/* ═══════════════════════════════════════════════════════════════
   MODULOR — v3 KÖPRÜ STİLLERİ
   v3 sayfaları css/app.css'i YÜKLEMEZ (3600+ satır, v3 kabuğuyla
   çakışır). Ama app.html'e ait bazı MODÜLLER v3'e taşındı ve
   stilleri geride kaldı — modül çalışıyor, ekran stilsiz çiziliyor.
   Bu dosya yalnız o modüllerin bloklarını app.css'ten getirir:
     · auth-modal.js   → .auth-* .sf-* (profil / kayıt formu)
     · bulut-onay.js   → .bo-*        (buluta bağlan rızası)
     · ayar-menu.js    → .mtu-*       (onay kutusu) + .hi-caret .icon-btn-text
     · ortak           → .btn-altin .link-btn .gem-aciklama
   v2 token adları aşağıda v3 tokenlarına köprüleniyor
   (aynı kalıp v3 sayfalarındaki #uy-ortu bloğunda da var).
   ⚠️ app.css'te bu bloklar değişirse buraya da yansıtılmalı.
   ═══════════════════════════════════════════════════════════════ */
body{
  --bg-1:var(--zemin);--bg-2:var(--kart);--blur-bg:rgba(6,5,10,.82);
  --border-0:rgba(255,255,255,.07);--border-1:rgba(255,255,255,.12);
  --border-2:rgba(255,255,255,.18);--border-gold:rgba(var(--altin-rgb),.42);
  --gold:var(--altin);--gold-rgb:var(--altin-rgb);
  --gold-10:rgba(var(--altin-rgb),.10);--gold-20:rgba(var(--altin-rgb),.20);
  --text-0:var(--m1);--text-1:var(--m2);--text-2:var(--m3);
  --text-gold:var(--altin);--text-gold-dim:rgba(var(--altin-rgb),.7);
  --oda-cizgi:rgba(var(--altin-rgb),.28);--ucan-bg:rgba(6,5,10,.92);
  --success:#8a9a70;--error:#c88f6a;--warn:#c8a86a;
  --font-cinzel:var(--cinzel);--font-cormorant:var(--cormorant);--font-outfit:var(--outfit);
  --dur-fast:.18s;--dur-mid:.32s;--shadow-lg:0 20px 60px rgba(0,0,0,.6);
  --safe-top:var(--safe-t);--safe-bottom:var(--safe-b);
}


.hi-caret { font-size: 13px; opacity: .6; }
.sf-lbl-not { font-family: var(--font-cormorant); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text-2); }
.sf-input {
  width        : 100%;
  background   : var(--bg-2);
  border       : none;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  color        : var(--text-0);
  font-family  : var(--font-cormorant);
  font-size    : 23px;
  padding      : 13px 5px;
  outline      : none;
  transition   : border-color var(--dur-fast);
}
.sf-input:focus { border-color: var(--gold); }
.sf-select {
  background    : var(--bg-2);
  border        : none;
  border-bottom : 1px solid var(--border-1);
  color         : var(--text-0);
  font-family   : var(--font-cormorant);
  font-size     : 22px;
  padding       : 13px 5px;
  outline       : none;
  cursor        : pointer;
  appearance    : none;
  -webkit-appearance: none;
  text-align    : center;
  width         : 100%;
}
.sf-hata {
  font-size    : 16px;
  color        : var(--error);
  padding      : 8px 0;
  margin-top   : 10px;
}
/* ── Kademeli konum + saat dropdown'ları ──────────────────── */
.sf-yer-grup {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : 10px;
  margin-bottom        : 5px;
}
/* Ülke / İl / İlçe TEK SATIR */
.sf-yer-3lu {
  grid-template-columns: 1fr 1fr 1fr;
}
/* Native select açık zemin sorununu çöz: kart zeminine sabitle,
   option'ları da koyu yap (bazı tarayıcılar seçili option'u beyaz gösteriyor) */
.sf-select {
  background-color: var(--bg-2) !important;
  color           : var(--text-0) !important;
}
.sf-select option {
  background-color: var(--bg-1);
  color           : var(--text-0);
}
/* Native select: sağda ok, sola hizalı metin, kart zeminiyle uyumlu */
.sf-yer-grup .sf-select,
.sf-saat-grup .sf-select {
  text-align   : left;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23B3ACA0' stroke-width='1.5'/></svg>");
  background-repeat  : no-repeat;
  background-position: right 10px center;
}
.sf-yer-3lu .sf-select {
  text-align : center;
  padding    : 13px 26px 13px 8px;
  font-size  : 20px;
}
.sf-saat-grup {
  display      : grid;
  grid-template-columns: 75px 13px 75px 1fr;  /* saat : dk  buton — TEK SATIR */
  align-items  : center;
  gap          : 8px;
  margin-bottom: 5px;
}
.sf-saat-grup .sf-select {
  width      : 100%;
  text-align : center;
  padding    : 13px 5px;
  background-image: none;   /* dar saat kutularında ok gösterme */
}
.sf-saat-ayrac {
  color      : var(--text-2);
  font-size  : 23px;
  text-align : center;
  font-family: var(--font-cormorant);
}
.sf-saat-test-btn {
  min-width     : 0;
  white-space   : nowrap;
  background    : transparent;
  border        : 1px solid var(--oda-cizgi, var(--gold));
  color         : var(--text-gold);
  font-family   : var(--font-cinzel);
  font-size     : 16px;
  letter-spacing: .06em;
  padding       : 13px 10px;
  border-radius : 10px;
  cursor        : pointer;
  transition    : background var(--dur-fast), color var(--dur-fast);
}
.sf-saat-test-btn:hover {
  background: var(--gold-10);
  color    : var(--text-0);
}
.sf-select:disabled { opacity: .45; cursor: not-allowed; }
/* ── Butonlar ───────────────────────────────────────────── */
.btn-altin {
  display      : block;
  width        : 100%;
  /* Rapor: min 57px */
  min-height   : 62px;
  background   : none;
  border       : 1px solid var(--border-gold);
  border-radius: 10px;
  color        : var(--text-gold);
  font-family  : var(--font-cinzel);
  font-size    : 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor       : pointer;
  transition   : all var(--dur-fast);
  touch-action : manipulation;  /* Rapor: ontouchstart kaldır */
}
.btn-altin:hover, .btn-altin:active {
  background: var(--gold-10);
  border-color: var(--gold);
}
.gem-aciklama  { font-family:var(--font-cormorant);font-size:21px;font-style:italic;color:var(--text-1);line-height:1.65 }
.link-btn   { background:none;border:none;color:var(--text-gold);font-size:16px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0 }
/* ════════════════════════════════════════════════════════════
   AUTH — Header giriş butonu
════════════════════════════════════════════════════════════ */
.icon-btn-text {
  background    : none;
  border        : 1px solid var(--border-gold);
  border-radius : 8px;
  color         : var(--text-gold);
  font-family   : var(--font-cinzel);
  font-size     : 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding       : 8px 16px;
  cursor        : pointer;
  transition    : all var(--dur-fast);
  touch-action  : manipulation;
  min-height    : 39px;
}
.icon-btn-text:hover { background: var(--gold-10); }
/* ── Auth modal: profil ─────────────────────────────────── */
.sf-lbl-not { font-family:var(--font-cormorant);font-style:italic;text-transform:none;letter-spacing:0;font-size:16px;color:var(--text-2) }
.auth-tarih-grup { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:5px }
.sf-select {
  background:var(--bg-2);border:none;border-bottom:1px solid var(--border-1);
  color:var(--text-0);font-family:var(--font-cormorant);font-size:22px;
  padding:13px 5px;outline:none;cursor:pointer;appearance:none;
  -webkit-appearance:none;text-align:center;width:100%;
}
.auth-profil-kilit-uyari {
  font-size:14px;color:var(--warn);margin-top:16px;
  padding:10px 13px;border:1px solid rgba(139,58,90,.3);border-radius:8px;line-height:1.5;
}
.mtu-kart {
  max-width: 520px;
  background: var(--bg-1);
  border: 1px solid var(--border-gold);
  border-radius: 21px;
  padding: 36px 31px;
  text-align: center;
  transform: scale(.94); transition: transform var(--dur-mid);
}
.mtu-ort.acik .mtu-kart { transform: scale(1); }
.mtu-ikon { font-size: 42px; color: var(--text-gold); margin-bottom: 16px; }
.mtu-baslik {
  font-family: var(--font-cinzel);
  font-size: 23px; letter-spacing: .04em;
  color: var(--text-gold); margin-bottom: 18px;
}
.mtu-metin {
  font-family: var(--font-cormorant);
  font-size: 21px; line-height: 1.7;
  color: var(--text-1); margin-bottom: 31px;
}
.mtu-butonlar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mtu-vazgec, .mtu-onay {
  padding: 17px;
  border-radius: 13px;
  font-family: var(--font-cinzel); font-size: 17px; letter-spacing: .05em;
  cursor: pointer;
}
.mtu-vazgec {
  background: transparent;
  border: 1px solid var(--border-1);
  color: var(--text-1);
}
.mtu-vazgec:hover { border-color: var(--border-2); color: var(--text-0); }
.mtu-onay {
  background: var(--gold-10);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
}
.mtu-onay:hover { background: var(--gold-20); }
.bo-kart {
  position: relative; width: 100%; max-width: 520px;
  max-height: calc(100vh - 32px);
  margin: auto;
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--border-gold);
  border-radius: 20px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Başlık ve kutu sabit; ortadaki açıklama listesi kayar. Böylece
   "Onayla" düğmesi ekranın altında kaybolmaz, her zaman görünür. */
.bo-kart > * { padding-left: 22px; padding-right: 22px; }
.bo-kart > *:first-child { padding-top: 24px; }
.bo-govde {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: 4px; padding-bottom: 4px;
}
.bo-kutu, .bo-islem { flex: 0 0 auto; }
.bo-islem { padding-bottom: 22px; padding-top: 10px; }
.bo-kapat {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border-1);
  color: var(--text-1); font-size: 18px; cursor: pointer;
}
.bo-baslik {
  font-family: var(--font-cormorant); font-size: 26px;
  color: var(--text-0); text-align: center;
}
.bo-giris {
  font-size: 14px; color: var(--text-1); line-height: 1.6;
  text-align: center; margin: 10px 0 20px;
}
.bo-blok {
  border: 1px solid var(--border-0); border-left-width: 2px;
  border-radius: 0 12px 12px 0; padding: 13px 14px; margin-bottom: 10px;
}
.bo-blok-b {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-gold-dim); margin-bottom: 8px;
}
.bo-liste { margin: 0; padding-left: 18px; }
.bo-liste li {
  font-size: 13.5px; color: var(--text-1); line-height: 1.6; margin-bottom: 6px;
}
.bo-liste li:last-child { margin-bottom: 0; }
.bo-kutu {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 18px 0 16px; cursor: pointer;
  font-size: 13.5px; color: var(--text-0); line-height: 1.55;
}
.bo-kutu input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }
.bo-islem { display: flex; gap: 10px; }
.bo-ikincil, .bo-ana {
  flex: 1 1 0; border-radius: 12px; padding: 12px;
  font-family: var(--font-outfit); font-size: 13.5px; cursor: pointer;
}
.bo-ikincil { background: transparent; color: var(--text-1); border: 1px solid var(--border-1); }
.bo-ana { background: var(--gold-10); color: var(--gold); border: 1px solid var(--border-gold); }
.bo-ana:disabled { opacity: .45; cursor: not-allowed; }
.bo-ana:not(:disabled):hover { background: var(--gold-20); }