/* FY Merkez — siyah & altın.
   Telefon önce. Yalnız mantıksal yön özellikleri (inline/block): Dari'de sayfa
   sağdan sola dönünce düzen kendiliğinden aynalanır. Animasyonlar "hareketi
   azalt" ayarında kapanır. */

/* --- yazı tipleri (yerel, OFL; app/fonts/OFL.txt) ------------------------ */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  /* U+2000-200F ve U+2060-206F (ZWNJ, yön işaretleri) bilerek dışarıda:
     Dari metnin içindeki ZWNJ başka yazı tipine düşerse harf birleşmesi bozulur. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2010-205F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/vazirmatn.woff2") format("woff2");
}

/* --- renkler ------------------------------------------------------------- */
:root {
  --yazi: "Manrope", "Vazirmatn", system-ui, -apple-system, "Segoe UI", Roboto, Tahoma, sans-serif;
  --altin-1: #fbefc1;
  --altin-2: #ecd078;
  --altin-3: #d4af37;
  --altin-4: #a8841c;
  --altin-5: #6e5510;
  --altin-egim: linear-gradient(135deg, #fff1bd 0%, #ecd078 28%, #d4af37 55%, #b8901f 78%, #8a6a14 100%);
  --altin-parlak: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.55) 48%, transparent 66%);

  --yesil: #34d399;
  --mavi: #60a5fa;
  --turuncu: #fbbf24;
  --kirmizi: #fb7185;
  --gri: #94a3b8;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;
  --menu-boy: 68px;
  --kenar: 16px;
  --egri: cubic-bezier(.2, .8, .2, 1);
  --yay: cubic-bezier(.34, 1.56, .64, 1);
}

:root, :root[data-tema="gece"] {
  color-scheme: dark;
  --zemin: #0b0a08;
  --zemin-2: #100e0b;
  --yuzey: rgb(255 255 255 / 0.045);
  --yuzey-dolu: #17140f;
  --yuzey-2: rgb(255 255 255 / 0.075);
  --yuzey-3: rgb(255 255 255 / 0.11);
  --cizgi: rgb(255 255 255 / 0.085);
  --cizgi-guclu: rgb(255 255 255 / 0.16);
  --metin: #f6f1e6;
  --soluk: #a8a193;
  --cok-soluk: #6f695e;
  --altin-metin: #ecd078;
  --vurgu-zemin: rgb(212 175 55 / 0.12);
  --golge: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 12px 32px rgb(0 0 0 / 0.38);
  --golge-buyuk: 0 30px 80px rgb(0 0 0 / 0.55);
  --cam: rgb(18 16 12 / 0.72);
  --girdi: rgb(255 255 255 / 0.05);
  --isik-1: rgb(212 175 55 / 0.16);
  --isik-2: rgb(45 212 191 / 0.07);
  --isik-3: rgb(129 140 248 / 0.07);
}

:root[data-tema="gunduz"] {
  color-scheme: light;
  --zemin: #f7f3ea;
  --zemin-2: #efe9dc;
  --yuzey: rgb(255 255 255 / 0.78);
  --yuzey-dolu: #ffffff;
  --yuzey-2: rgb(28 24 16 / 0.05);
  --yuzey-3: rgb(28 24 16 / 0.09);
  --cizgi: rgb(28 24 16 / 0.09);
  --cizgi-guclu: rgb(28 24 16 / 0.18);
  --metin: #1d1a14;
  --soluk: #6b6457;
  --cok-soluk: #9b9384;
  --altin-metin: #8a6a14;
  --vurgu-zemin: rgb(212 175 55 / 0.16);
  --golge: 0 1px 2px rgb(60 45 10 / 0.06), 0 10px 28px rgb(60 45 10 / 0.08);
  --golge-buyuk: 0 30px 80px rgb(60 45 10 / 0.18);
  --cam: rgb(251 248 241 / 0.82);
  --girdi: #ffffff;
  --isik-1: rgb(212 175 55 / 0.22);
  --isik-2: rgb(45 212 191 / 0.10);
  --isik-3: rgb(129 140 248 / 0.10);
  --yesil: #059669;
  --mavi: #2563eb;
  --turuncu: #d97706;
  --kirmizi: #e11d48;
  --gri: #64748b;
}

/* --- temel --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--zemin); }
body {
  margin: 0; min-block-size: 100dvh;
  background: var(--zemin); color: var(--metin);
  font-family: var(--yazi); font-size: 15.5px; line-height: 1.55; letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  font-feature-settings: "ss01", "cv11";
}
:root[lang="fa-AF"] body { font-size: 16.5px; letter-spacing: 0; line-height: 1.7; }
/* Arka plan ışıkları: sabit katmanda (kaydırırken yeniden boyanmaz). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -8%, var(--isik-1), transparent 70%),
    radial-gradient(45% 35% at 105% 30%, var(--isik-2), transparent 70%),
    radial-gradient(45% 35% at -5% 75%, var(--isik-3), transparent 70%);
}
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -0.02em; }
:root[lang="fa-AF"] :is(h1, h2, h3) { letter-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
img { max-inline-size: 100%; }
[hidden] { display: none !important; }
.simge { flex: none; display: block; }
[dir="rtl"] .simge.ayna { transform: scaleX(-1); }
.sayi-kutu, .tutar, .tablo, .ozet-deger { font-variant-numeric: tabular-nums; }
::selection { background: rgb(212 175 55 / 0.35); }
:focus-visible { outline: 2.5px solid var(--altin-2); outline-offset: 3px; border-radius: 8px; }

.acilis { min-block-size: 100dvh; display: grid; place-items: center; }
.acilis img { animation: nefes 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 30px rgb(212 175 55 / 0.35)); }

/* --- ekran düzeni -------------------------------------------------------- */
.ekran {
  max-inline-size: 760px; margin-inline: auto;
  padding-block-end: calc(var(--menu-boy) + 44px + env(safe-area-inset-bottom));
  animation: ekranGiris .45s var(--egri) both;
}
.ust {
  position: sticky; inset-block-start: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) var(--kenar) 12px;
  background: var(--cam); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-block-end: 1px solid var(--cizgi);
}
.ust h1 { font-size: 1.12rem; font-weight: 750; flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-sag { display: flex; gap: 8px; align-items: center; }
.govde { padding: 18px var(--kenar); display: flex; flex-direction: column; gap: 18px; }
.bolum { display: flex; flex-direction: column; gap: 10px; }
.bolum-baslik { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.bolum-baslik h2 { font-size: 1rem; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.bolum-baslik .simge { color: var(--altin-metin); }
.bolum-baslik .bag-dugme { font-size: 0.85rem; }

/* Kademeli giriş: yüklenen içerik sırayla yukarı süzülür. */
.canlan > * { animation: yuksel .55s var(--egri) both; animation-delay: calc(min(var(--i, 0), 10) * 55ms); }

/* --- alt menü ------------------------------------------------------------ */
.menu {
  position: fixed; z-index: 20;
  inset-inline: 12px; inset-block-end: calc(10px + env(safe-area-inset-bottom));
  max-inline-size: 520px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  block-size: var(--menu-boy); padding-inline: 6px;
  background: var(--cam); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--cizgi-guclu); border-radius: 24px; box-shadow: var(--golge-buyuk);
}
.sekme {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  block-size: 56px; border-radius: 18px; text-decoration: none; color: var(--soluk); font-size: 0.7rem; font-weight: 650; min-inline-size: 0;
  transition: color .25s;
}
.sekme::before {
  content: ""; position: absolute; inset: 6px 10px; border-radius: 14px; background: var(--vurgu-zemin);
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s var(--yay);
}
.sekme > * { position: relative; }
.sekme.secili { color: var(--altin-metin); }
.sekme.secili::before { opacity: 1; transform: none; }
.sekme.secili .simge { animation: zipla .45s var(--yay); }
.sekme-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.sekme.odeme-sekmesi { color: var(--metin); }
.sekme.odeme-sekmesi::before { display: none; }
.fab {
  display: grid; place-items: center; inline-size: 54px; block-size: 54px; margin-block-start: -26px; border-radius: 19px;
  background: var(--altin-egim); color: #1b1608;
  box-shadow: 0 10px 26px rgb(212 175 55 / 0.45), 0 0 0 5px var(--zemin), inset 0 1px 0 rgb(255 255 255 / 0.6);
  transition: transform .3s var(--yay);
}
.fab::after { content: ""; position: absolute; inset: -5px; border-radius: 23px; border: 2px solid rgb(212 175 55 / 0.55); animation: halka-dalga 2.6s ease-out infinite; }
.sekme.odeme-sekmesi:active .fab { transform: scale(.92) rotate(90deg); }
.sekme.odeme-sekmesi.secili .fab { transform: rotate(45deg); }

/* --- düğmeler ------------------------------------------------------------ */
.dugme {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 46px; padding: 10px 20px; border-radius: 15px; border: 1px solid transparent;
  background: var(--altin-egim); color: #1b1608; font-weight: 750; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 22px rgb(212 175 55 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.55);
  transition: transform .18s var(--egri), box-shadow .25s, filter .25s;
}
.dugme::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--altin-parlak); transform: translateX(-120%); }
.dugme:hover::after { animation: parilti 1s var(--egri); }
.dugme:active { transform: scale(.97); }
.dugme[disabled] { filter: grayscale(.6) brightness(.8); cursor: default; }
.dugme.ikincil { background: var(--yuzey-2); border-color: var(--cizgi); color: var(--metin); box-shadow: none; }
.dugme.ikincil:hover { background: var(--yuzey-3); }
.dugme.tehlike { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; box-shadow: 0 8px 22px rgb(225 29 72 / 0.3); }
.dugme.tehlike-cizgi { background: transparent; border-color: color-mix(in srgb, var(--kirmizi) 40%, transparent); color: var(--kirmizi); box-shadow: none; }
.dugme.whatsapp { background: linear-gradient(135deg, #34d399, #16a34a); color: #fff; box-shadow: 0 8px 22px rgb(22 163 74 / 0.32); }
.dugme.kucuk { min-block-size: 38px; padding: 6px 14px; font-size: 0.88rem; border-radius: 12px; }
.dugme.genis { inline-size: 100%; }
.dugme.buyuk { min-block-size: 56px; font-size: 1.06rem; border-radius: 18px; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.dugmeler.dikey { flex-direction: column; align-items: stretch; }
.yuvarlak-dugme {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 15px; flex: none;
  background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--egri), background .2s;
}
.yuvarlak-dugme:active { transform: scale(.92); }
.yuvarlak-dugme:hover { background: var(--yuzey-3); }
.yuvarlak-dugme.altin { background: var(--altin-egim); color: #1b1608; border-color: transparent; }
.yuvarlak-dugme.yesil { color: #22c55e; }
.yuvarlak-dugme.kucuk { inline-size: 36px; block-size: 36px; border-radius: 12px; }
.bag-dugme { background: none; border: none; padding: 4px 6px; color: var(--altin-metin); font-weight: 700; cursor: pointer; text-decoration: none; }
.eylem-satiri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.eylem {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--r-m);
  background: var(--yuzey); border: 1px solid var(--cizgi); color: var(--metin); text-decoration: none; font-size: 0.78rem; font-weight: 650; cursor: pointer;
  transition: transform .2s var(--egri), background .2s;
}
.eylem:active { transform: scale(.95); }
.eylem .simge-kap { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 13px; background: var(--vurgu-zemin); color: var(--altin-metin); }
.eylem.yesil .simge-kap { background: rgb(34 197 94 / 0.14); color: #22c55e; }
.eylem.mavi .simge-kap { background: rgb(96 165 250 / 0.14); color: var(--mavi); }

/* --- form ---------------------------------------------------------------- */
.girdi {
  inline-size: 100%; min-block-size: 50px; padding: 12px 14px;
  border: 1px solid var(--cizgi); border-radius: 15px; background: var(--girdi); color: var(--metin);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.girdi::placeholder { color: var(--cok-soluk); }
.girdi:focus { outline: none; border-color: var(--altin-3); box-shadow: 0 0 0 4px rgb(212 175 55 / 0.16); }
textarea.girdi { resize: vertical; min-block-size: 90px; }
select.girdi { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%), linear-gradient(-45deg, transparent 50%, var(--soluk) 50%); background-size: 6px 6px; background-repeat: no-repeat; background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; padding-inline-end: 38px; }
[dir="rtl"] select.girdi { background-position: 20px 55%, 14px 55%; }
select.girdi option { background: var(--yuzey-dolu); color: var(--metin); }
.form { display: flex; flex-direction: column; gap: 16px; }
.alan { display: flex; flex-direction: column; gap: 7px; border: none; padding: 0; margin: 0; min-inline-size: 0; }
.alan > span, .alan > legend, .etiket { font-size: 0.82rem; color: var(--soluk); font-weight: 700; padding: 0; letter-spacing: 0.01em; }
.girdi-simgeli { position: relative; display: flex; align-items: center; }
.girdi-simgeli .simge { position: absolute; inset-inline-start: 14px; color: var(--cok-soluk); pointer-events: none; }
.girdi-simgeli .girdi { padding-inline-start: 44px; }
.onay-kutusu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 54px; padding: 10px 14px;
  border-radius: 15px; background: var(--yuzey); border: 1px solid var(--cizgi); cursor: pointer;
}
/* Anahtar (switch) görünümlü onay kutusu. */
.anahtar { appearance: none; position: relative; flex: none; inline-size: 48px; block-size: 28px; border-radius: 99px; background: var(--yuzey-3); border: 1px solid var(--cizgi-guclu); cursor: pointer; transition: background .25s; margin: 0; }
.anahtar::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.3); transition: transform .3s var(--yay); }
.anahtar:checked { background: var(--altin-egim); border-color: transparent; }
.anahtar:checked::after { transform: translateX(20px); }
[dir="rtl"] .anahtar:checked::after { transform: translateX(-20px); }
.iki-sutun { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tutar-kap { position: relative; display: flex; align-items: center; }
.tutar-kap .girdi { padding-inline-end: 64px; font-size: 1.2rem; font-weight: 800; }
.tutar-kap .birim { position: absolute; inset-inline-end: 16px; color: var(--altin-metin); font-size: 0.85rem; font-weight: 800; pointer-events: none; }
.tutar-buyuk .girdi { min-block-size: 68px; font-size: 2rem; text-align: center; padding-inline: 64px; border-radius: 20px; letter-spacing: -0.02em; }
.secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.secenek { position: relative; }
.secenek input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secenek > span {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 46px; padding: 8px 15px; border-radius: 14px;
  border: 1px solid var(--cizgi); background: var(--yuzey); font-weight: 650; transition: all .2s var(--egri);
}
.secenek > span .simge { color: var(--soluk); transition: color .2s; }
.secenek input:checked + span { background: var(--vurgu-zemin); border-color: var(--altin-3); color: var(--metin); box-shadow: 0 0 0 3px rgb(212 175 55 / 0.12); }
.secenek input:checked + span .simge { color: var(--altin-metin); }
.secenek input:focus-visible + span { outline: 2.5px solid var(--altin-2); outline-offset: 2px; }
.form-hata { color: var(--kirmizi); font-weight: 700; display: flex; gap: 8px; align-items: center; }
.form-hata:empty { display: none; }
.ipucu { color: var(--soluk); font-size: 0.85rem; }
.eposta-goster { font-weight: 700; overflow-wrap: anywhere; }
.sabit-alt { position: sticky; inset-block-end: calc(var(--menu-boy) + 22px + env(safe-area-inset-bottom)); z-index: 4; }
.sabit-alt::before { content: ""; position: absolute; inset: -24px -16px -8px; z-index: -1; background: linear-gradient(to top, var(--zemin) 55%, transparent); pointer-events: none; }

/* --- kartlar ------------------------------------------------------------- */
.kart {
  position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l);
  padding: 16px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 12px;
}
.kart.altin-cerceve { border: 1px solid transparent; background: linear-gradient(var(--yuzey-dolu), var(--yuzey-dolu)) padding-box, linear-gradient(135deg, rgb(236 208 120 / 0.85), rgb(212 175 55 / 0.15) 40%, rgb(212 175 55 / 0.05) 60%, rgb(236 208 120 / 0.6)) border-box; }
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kart-baslik h3 { font-size: 0.95rem; font-weight: 750; }

/* Ana ekran: kahraman kartı */
.kahraman { overflow: hidden; padding: 18px 18px 8px; gap: 6px; }
.kahraman::before { content: ""; position: absolute; inset-block-start: -60%; inset-inline-end: -30%; inline-size: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(212 175 55 / 0.28), transparent 65%); pointer-events: none; }
.kahraman-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kahraman-etiket { color: var(--soluk); font-size: 0.82rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.kahraman-deger { font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; background: var(--altin-egim); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema="gunduz"] .kahraman-deger { background: linear-gradient(135deg, #8a6a14, #b8901f 50%, #6e5510); -webkit-background-clip: text; background-clip: text; }
.kahraman-alt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--soluk); font-size: 0.85rem; }
.degisim { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-weight: 800; font-size: 0.78rem; }
.degisim.artis { background: rgb(52 211 153 / 0.14); color: var(--yesil); }
.degisim.azalis { background: rgb(251 113 133 / 0.14); color: var(--kirmizi); }
.degisim.esit { background: var(--yuzey-2); color: var(--soluk); }

/* İstatistik kutuları */
.istatistikler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.istatistik { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-l); background: var(--yuzey); border: 1px solid var(--cizgi); min-inline-size: 0; }
.istatistik-simge { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 14px; flex: none; background: color-mix(in srgb, var(--renk, var(--altin-3)) 15%, transparent); color: var(--renk, var(--altin-3)); }
.istatistik div { display: flex; flex-direction: column; min-inline-size: 0; }
.istatistik span { color: var(--soluk); font-size: 0.76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.istatistik strong { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; display: flex; align-items: baseline; gap: 4px; }
.birim-kucuk { font-size: 0.68rem; font-weight: 800; color: var(--soluk); letter-spacing: 0.02em; }

/* --- grafikler ------------------------------------------------------------ */
.alan-grafik { position: relative; inline-size: 100%; touch-action: pan-y; cursor: crosshair; margin-block-start: 4px; }
[dir="rtl"] .alan-svg { transform: scaleX(-1); }
.alan-svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.alan-cizgi { fill: none; stroke: var(--altin-2); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciz 1.6s var(--egri) .15s forwards; filter: drop-shadow(0 4px 8px rgb(212 175 55 / 0.45)); }
.alan-dolgu { opacity: 0; animation: belir .9s ease .7s forwards; }
.grafik-izgara { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 3 5; }
.grafik-kilavuz { stroke: var(--altin-3); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity .15s; }
.grafik-imlec { fill: var(--altin-1); stroke: var(--zemin); stroke-width: 2.5; transition: opacity .15s; }
.grafik-nabiz { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: 10px; block-size: 10px; margin: -5px; border-radius: 50%; background: var(--altin-1); box-shadow: 0 0 0 0 rgb(236 208 120 / 0.7); animation: nabiz 2s ease-out 1.6s infinite; opacity: 0; animation-fill-mode: both; transition: opacity .2s; }
.alan-grafik .grafik-nabiz { opacity: 1; }
.grafik-balon {
  position: absolute; inset-block-start: -8px; inset-inline-start: var(--x); transform: translate(-50%, -100%);
  padding: 6px 10px; border-radius: 10px; background: var(--metin); color: var(--zemin); font-size: 0.78rem; font-weight: 800; white-space: nowrap; pointer-events: none;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.3);
}
[dir="rtl"] .grafik-balon { transform: translate(50%, -100%); }
.grafik-eksen { display: flex; justify-content: space-between; color: var(--cok-soluk); font-size: 0.72rem; font-weight: 650; margin-block-start: 4px; }
.alan-ikinci { fill: none; stroke: var(--soluk); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: 0; animation: belir .8s ease .4s forwards; }
.grafik-imlec.ikinci { fill: var(--soluk); }
.grafik-lejant { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.76rem; font-weight: 700; color: var(--soluk); padding-block: 4px 8px; }
.grafik-lejant > span { display: inline-flex; align-items: center; gap: 6px; }
.grafik-lejant > span:last-child { margin-inline-start: auto; font-weight: 600; }
.cizgi-ornek { inline-size: 18px; block-size: 3px; border-radius: 3px; background: var(--altin-egim); display: inline-block; }
.cizgi-ornek.kesikli { background: repeating-linear-gradient(90deg, var(--soluk) 0 4px, transparent 4px 8px); }

.halka-kap { display: flex; align-items: center; gap: 18px; }
.halka { position: relative; inline-size: var(--boyut); block-size: var(--boyut); flex: none; }
.halka svg { transform: rotate(-90deg); display: block; }
.halka-zemin { fill: none; stroke: var(--yuzey-2); stroke-width: 5; }
.halka-dilim { fill: none; stroke-width: 5; stroke-linecap: butt; stroke-dasharray: 0 100; animation: dilim 1.1s var(--egri) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
.halka-merkez { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.halka-merkez strong { font-size: 1.7rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.halka-merkez span { font-size: 0.72rem; color: var(--soluk); font-weight: 700; }
.lejant { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; min-inline-size: 0; }
.lejant li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.lejant strong { margin-inline-start: auto; font-weight: 800; }
.nokta { inline-size: 10px; block-size: 10px; border-radius: 4px; background: var(--renk); flex: none; box-shadow: 0 0 10px color-mix(in srgb, var(--renk) 60%, transparent); }

.sutunlar { display: flex; align-items: flex-end; gap: 10px; block-size: 170px; padding-block-start: 8px; }
.sutun { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; block-size: 100%; min-inline-size: 0; }
.sutun-deger { font-size: 0.7rem; font-weight: 800; color: var(--soluk); white-space: nowrap; min-block-size: 1.2em; }
.sutun-kanal { flex: 1; inline-size: 100%; max-inline-size: 42px; display: flex; align-items: flex-end; border-radius: 12px; background: var(--yuzey-2); overflow: hidden; }
.sutun-dolgu { inline-size: 100%; block-size: calc(var(--oran) * 100%); border-radius: 12px; background: linear-gradient(180deg, rgb(236 208 120 / 0.55), rgb(212 175 55 / 0.25)); transform-origin: bottom; animation: buyu .9s var(--yay) both; animation-delay: calc(var(--i) * 90ms + 200ms); }
.sutun.vurgu .sutun-dolgu { background: var(--altin-egim); box-shadow: 0 0 22px rgb(212 175 55 / 0.45); }
.sutun.vurgu .sutun-deger { color: var(--altin-metin); }
.sutun-etiket { font-size: 0.72rem; color: var(--soluk); font-weight: 700; }
.sutun.vurgu .sutun-etiket { color: var(--metin); }

.yigin { display: flex; flex-direction: column; gap: 12px; }
.yigin-cubuk { display: flex; gap: 3px; block-size: 14px; border-radius: 99px; overflow: hidden; background: var(--yuzey-2); }
.yigin-parca { flex: var(--pay) 1 0; background: var(--renk); transform-origin: left; animation: yayil .8s var(--egri) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
[dir="rtl"] .yigin-parca { transform-origin: right; }
.yigin-parca:first-child { border-start-start-radius: 99px; border-end-start-radius: 99px; }
.yigin-parca:last-child { border-start-end-radius: 99px; border-end-end-radius: 99px; }
.yigin-bos { flex: 1; }
.yigin-aciklama { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.yigin-aciklama li { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; }
.yigin-aciklama li.soluk { opacity: 0.45; }
.yigin-aciklama .simge { color: var(--soluk); }
.yigin-ad { flex: 1; min-inline-size: 0; }
.yigin-yuzde { color: var(--cok-soluk); font-size: 0.76rem; font-weight: 700; inline-size: 3em; text-align: end; }

.ilerleme-halka { position: relative; inline-size: var(--boyut); block-size: var(--boyut); flex: none; }
.ilerleme-halka svg { transform: rotate(-90deg); display: block; }
.ilerleme-halka .halka-zemin { stroke-width: 4; }
.ilerleme-dolgu { fill: none; stroke: var(--renk); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 100; animation: ilerle 1.1s var(--egri) .2s forwards; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--renk) 55%, transparent)); }
.ilerleme-metin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ilerleme-metin strong { font-size: 0.95rem; font-weight: 800; }
.ilerleme-metin span { font-size: 0.6rem; color: var(--soluk); font-weight: 700; margin-block-start: 2px; }

/* --- ürün kartları (yatay kaydırma) --------------------------------------- */
.kaydir { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--kenar) 10px; margin-inline: calc(var(--kenar) * -1); scrollbar-width: none; }
.kaydir::-webkit-scrollbar { display: none; }
.kaydir > * { scroll-snap-align: start; flex: none; }
.urun-kart {
  inline-size: 168px; padding: 14px; border-radius: var(--r-l); display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--renk) 16%, transparent), transparent 70%), var(--yuzey);
  border: 1px solid color-mix(in srgb, var(--renk) 28%, var(--cizgi));
}
.urun-kart .urun-simge-kap { inline-size: 40px; block-size: 40px; }
.urun-kart h3 { font-size: 0.95rem; font-weight: 800; }
.urun-kart-sayilar { display: flex; gap: 12px; font-size: 0.75rem; color: var(--soluk); font-weight: 700; }
.urun-kart-sayilar b { display: block; color: var(--metin); font-size: 1.05rem; }
.urun-kart-gelir { font-weight: 800; color: var(--renk); font-size: 0.9rem; }
.urun-simge-kap { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 12px; flex: none; color: var(--renk); background: color-mix(in srgb, var(--renk) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--renk) 30%, transparent); }

/* --- listeler ------------------------------------------------------------ */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-oge {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--r-l);
  background: var(--yuzey); border: 1px solid var(--cizgi); transition: transform .2s var(--egri), background .2s, border-color .2s;
}
a.liste-oge, .liste-oge.tiklanir { text-decoration: none; cursor: pointer; }
a.liste-oge:active, .liste-oge.tiklanir:active { transform: scale(.985); }
a.liste-oge:hover { border-color: var(--cizgi-guclu); background: var(--yuzey-2); }
.liste-oge.iptal { opacity: 0.55; }
.liste-oge.iptal strong { text-decoration: line-through; }
.liste-ana { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.liste-ana > * { overflow-wrap: anywhere; }
.liste-ana strong { font-weight: 750; }
.liste-sag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bitis-oge { display: grid !important; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 10px; }
.bitis-oge .liste-sag { grid-column: 1 / -1; padding-block-start: 10px; border-block-start: 1px dashed var(--cizgi); }
.ikincil-metin { color: var(--soluk); font-size: 0.84rem; }
.rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }
.bos-durum { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 16px; color: var(--soluk); }
.bos-durum .simge-kap { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 22px; background: var(--vurgu-zemin); color: var(--altin-metin); }
.ortala { text-align: center; }
.kirmizi { color: var(--kirmizi); font-weight: 700; }
.turuncu { color: var(--turuncu); font-weight: 700; }
.chevron { color: var(--cok-soluk); }

/* Avatar: addan türeyen renkli degrade + baş harfler. */
.avatar {
  display: grid; place-items: center; inline-size: var(--boyut, 44px); block-size: var(--boyut, 44px); flex: none; border-radius: calc(var(--boyut, 44px) * 0.36);
  background: linear-gradient(135deg, hsl(var(--ton) 70% 62%), hsl(calc(var(--ton) + 40) 65% 42%)); color: #fff;
  font-weight: 800; font-size: calc(var(--boyut, 44px) * 0.38); letter-spacing: 0; text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}
.avatar img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }

/* Rozetler */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; word-spacing: 0.12em; background: color-mix(in srgb, var(--renk, var(--gri)) 15%, transparent); color: var(--renk, var(--gri)); }
.rozet::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.rozet.aktif { --renk: var(--yesil); }
.rozet.deneme { --renk: var(--mavi); }
.rozet.bitiyor, .rozet.deneme-bitiyor { --renk: var(--turuncu); }
.rozet.bitiyor::before, .rozet.deneme-bitiyor::before { animation: yanip 1.6s ease-in-out infinite; }
.rozet.bitti { --renk: var(--kirmizi); }
.rozet.pasif, .rozet.yok { --renk: var(--gri); }
.rozet.duz::before { display: none; }
.urun-cip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 99px; background: var(--yuzey-2); font-size: 0.76rem; font-weight: 750; }
[dir="rtl"] .urun-cip { padding: 3px 4px 3px 9px; }
.urun-cip .urun-simge-kap { inline-size: 20px; block-size: 20px; border-radius: 7px; }
.urun-cip .durum-noktasi { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--renk); box-shadow: 0 0 8px var(--renk); }
.sayac { display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding-inline: 7px; border-radius: 99px; background: rgb(251 191 36 / 0.15); color: var(--turuncu); font-size: 0.78rem; font-weight: 800; }

/* Süzgeç çipleri */
.suzgec { display: flex; flex-direction: column; gap: 10px; }
.cipler { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 4px; scrollbar-width: none; margin-inline: calc(var(--kenar) * -1); padding-inline: var(--kenar); }
.cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-block-size: 38px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all .2s var(--egri); }
.cip.secili { background: var(--vurgu-zemin); border-color: var(--altin-3); color: var(--metin); }
.cip .nokta { inline-size: 8px; block-size: 8px; }

/* --- müşteri ayrıntısı ---------------------------------------------------- */
.profil { align-items: center; text-align: center; padding: 22px 16px 16px; gap: 10px; overflow: hidden; }
.profil::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 90px; background: linear-gradient(180deg, color-mix(in srgb, hsl(var(--ton) 70% 55%) 30%, transparent), transparent); pointer-events: none; }
.profil h2 { font-size: 1.35rem; font-weight: 800; }
.profil .avatar { --boyut: 76px; box-shadow: 0 12px 30px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.3); }
.bilgi-cipler { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bilgi-cip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--yuzey-2); color: var(--soluk); font-size: 0.8rem; font-weight: 650; }
.not-metni { white-space: pre-wrap; background: var(--yuzey-2); padding: 10px 12px; border-radius: 12px; text-align: start; font-size: 0.9rem; inline-size: 100%; }
.lisans-kart { overflow: hidden; }
.lisans-kart::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--renk); box-shadow: 0 0 18px var(--renk); }
.lisans-ust { display: flex; align-items: center; gap: 12px; }
.lisans-ust h3 { font-size: 1.02rem; font-weight: 800; flex: 1; min-inline-size: 0; }
.lisans-govde { display: flex; align-items: center; gap: 14px; }
.bilgi-listesi { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; flex: 1; min-inline-size: 0; font-size: 0.88rem; }
.bilgi-listesi dt { color: var(--soluk); font-weight: 650; }
.bilgi-listesi dd { margin: 0; overflow-wrap: anywhere; font-weight: 650; }
.cihazlar { display: flex; flex-direction: column; gap: 6px; }
.cihaz { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; padding: 7px 10px; border-radius: 11px; background: var(--yuzey-2); }
.cihaz .simge { color: var(--soluk); }
.cihaz span:last-child { margin-inline-start: auto; color: var(--soluk); font-size: 0.76rem; }
/* Personel: sahibin kartında liste, personelin kartında sahibe bağ */
.personel-liste { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; border: 1px dashed var(--cizgi, rgb(255 255 255 / 0.12)); }
.personel-baslik { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 0.86rem; }
.personel-baslik .ikincil-metin { margin-inline-start: auto; }
.personel-oge, .personel-bag { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 11px; background: var(--yuzey-2); color: inherit; text-decoration: none; font-size: 0.86rem; min-width: 0; }
.personel-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personel-bag .personel-ad { display: flex; flex-direction: column; white-space: normal; }
.personel-bag { background: color-mix(in srgb, var(--renk, var(--altin)) 12%, var(--yuzey-2)); }
.personel-liste .dugme { align-self: flex-start; }
[dir="rtl"] .personel-oge > .simge:last-child, [dir="rtl"] .personel-bag > .simge:last-child { transform: scaleX(-1); }
.uyari-kutu { display: flex; gap: 10px; align-items: flex-start; background: rgb(251 191 36 / 0.1); color: var(--turuncu); border: 1px solid rgb(251 191 36 / 0.25); border-radius: 14px; padding: 10px 12px; font-weight: 650; font-size: 0.88rem; }
.tehlike-bolge { margin-block-start: 10px; }
details.bolum > summary { cursor: pointer; font-weight: 750; padding-block: 8px; list-style: none; display: flex; align-items: center; gap: 8px; color: var(--soluk); }
details.bolum > summary::-webkit-details-marker { display: none; }
details.bolum[open] > summary .simge { transform: rotate(90deg); }
[dir="rtl"] details.bolum[open] > summary .simge { transform: scaleX(-1) rotate(90deg); }

/* Zaman çizelgesi (ödemeler, işlemler) */
.zaman-cizelgesi { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.zaman-cizelgesi::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 19px; inline-size: 2px; background: linear-gradient(var(--cizgi-guclu), transparent); }
.zc-oge { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.zc-simge { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 14px; flex: none; background: var(--yuzey-dolu); border: 1px solid var(--cizgi-guclu); color: var(--renk, var(--altin-metin)); }
.zc-govde { flex: 1; min-inline-size: 0; padding: 10px 12px; border-radius: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 2px; }
.zc-ust { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.zc-ust strong { font-weight: 800; }
.zc-govde .ikincil-metin { font-size: 0.8rem; }
.zc-oge.iptal { opacity: 0.55; }
.zc-oge.iptal .zc-ust strong { text-decoration: line-through; }
.gun-baslik { font-size: 0.78rem; font-weight: 800; color: var(--altin-metin); padding-inline-start: 52px; margin-block: 6px -4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* --- ödeme ekranı -------------------------------------------------------- */
.adim { display: flex; flex-direction: column; gap: 10px; }
.adim-baslik { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.95rem; }
.adim-no { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 9px; background: var(--vurgu-zemin); color: var(--altin-metin); font-size: 0.8rem; font-weight: 800; }
.oneriler { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-radius: 18px; background: var(--yuzey-dolu); border: 1px solid var(--cizgi-guclu); box-shadow: var(--golge-buyuk); animation: acil .2s var(--egri); }
.oneri { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; border: none; background: none; inline-size: 100%; text-align: start; }
.oneri:hover, .oneri:focus-visible { background: var(--yuzey-2); }
.oneri .avatar { --boyut: 36px; }
.oneri span { display: flex; flex-direction: column; min-inline-size: 0; }
.oneri small { color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secili-musteri { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--vurgu-zemin); border: 1px solid rgb(212 175 55 / 0.35); animation: acil .3s var(--yay); }
.secili-musteri div { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.secili-musteri small { color: var(--soluk); overflow-wrap: anywhere; }
.yeni-musteri { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: rgb(96 165 250 / 0.08); border: 1px dashed rgb(96 165 250 / 0.4); }
.yeni-musteri .ipucu { color: var(--mavi); font-weight: 650; display: flex; gap: 8px; align-items: center; }
.urun-secim { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.urun-secim .secenek > span, .plan-secim .secenek > span { inline-size: 100%; }
.urun-karo > span { flex-direction: column; align-items: flex-start !important; gap: 8px !important; padding: 12px !important; border-radius: 18px !important; min-block-size: 0 !important; }
.urun-karo input:checked + span { border-color: var(--renk) !important; background: color-mix(in srgb, var(--renk) 14%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--renk) 18%, transparent) !important; }
.urun-karo .urun-simge-kap { inline-size: 34px; block-size: 34px; }
.plan-secim { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.plan-karo > span { flex-direction: column; align-items: flex-start !important; gap: 2px !important; padding: 12px 14px !important; border-radius: 18px !important; }
.plan-karo small { color: var(--soluk); font-weight: 700; font-size: 0.78rem; }
.plan-karo b { font-size: 1.02rem; font-weight: 800; }
.plan-karo input:checked + span b { color: var(--altin-metin); }
.yontem-secim .secenek > span { min-block-size: 44px; }

/* Canlı fiş */
.fis {
  position: relative; padding: 18px 18px 22px; border-radius: 20px 20px 6px 6px;
  background: linear-gradient(180deg, var(--yuzey-dolu), color-mix(in srgb, var(--yuzey-dolu) 92%, var(--altin-3)));
  border: 1px solid var(--cizgi-guclu); box-shadow: var(--golge);
  display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem;
}
.fis::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -9px; block-size: 18px;
  background: radial-gradient(circle at 9px -1px, transparent 9px, var(--zemin) 9.5px) repeat-x; background-size: 18px 18px;
}
.fis-baslik { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--altin-metin); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.fis-satir { display: flex; justify-content: space-between; gap: 12px; }
.fis-satir span:first-child { color: var(--soluk); }
.fis-satir span:last-child { font-weight: 750; text-align: end; overflow-wrap: anywhere; }
.fis-ayrac { border-block-start: 2px dashed var(--cizgi-guclu); margin-block: 4px; }
.fis-toplam { display: flex; justify-content: space-between; align-items: baseline; }
.fis-toplam strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.fis-bitis { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgb(52 211 153 / 0.1); color: var(--yesil); font-weight: 750; font-size: 0.86rem; }

/* Başarı ekranı */
.basari { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 28px 8px; }
.basari-isaret { position: relative; inline-size: 104px; block-size: 104px; margin-block-end: 10px; }
.basari-isaret svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.basari-daire { fill: rgb(52 211 153 / 0.14); stroke: var(--yesil); stroke-width: 3; transform-origin: center; animation: patla .6s var(--yay) both; }
.basari-tik { fill: none; stroke: var(--yesil); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ciz .5s var(--egri) .45s forwards; }
.basari-isaret::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgb(52 211 153 / 0.4); animation: halka-dalga 1.4s ease-out .3s 2 both; }
.basari h2 { font-size: 1.3rem; font-weight: 800; }
.basari .kahraman-deger { margin-block: 4px; }
.basari .fis { inline-size: 100%; text-align: start; margin-block: 10px 6px; }
.basari .dugmeler { inline-size: 100%; margin-block-start: 14px; }
.konfeti { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; z-index: 60; pointer-events: none; }

/* --- kasa ---------------------------------------------------------------- */
.cuzdanlar { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--kenar) 14px; margin-inline: calc(var(--kenar) * -1); scrollbar-width: none; }
.cuzdanlar::-webkit-scrollbar { display: none; }
.cuzdan {
  position: relative; flex: none; scroll-snap-align: center; inline-size: min(330px, 84vw); aspect-ratio: 1.62; border-radius: 24px; padding: 18px 20px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: var(--cuzdan-egim, linear-gradient(135deg, #2b2416 0%, #0f0d09 55%, #3a2f12 100%));
  box-shadow: 0 22px 46px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.18);
  animation: kartGiris .7s var(--yay) both; animation-delay: calc(var(--i, 0) * 120ms);
}
.cuzdan::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgb(236 208 120 / 0.35), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgb(255 255 255 / 0.08), transparent 60%); }
.cuzdan::after { content: ""; position: absolute; inset: -50% -20%; z-index: -1; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.14) 50%, transparent 60%); animation: kayanIsik 5.5s ease-in-out 1s infinite; }
.cuzdan.yegen { --cuzdan-egim: linear-gradient(135deg, #0f3b3a 0%, #072221 55%, #11524f 100%); }
.cuzdan.ucuncu { --cuzdan-egim: linear-gradient(135deg, #2a2560 0%, #121032 55%, #3b2f7a 100%); }
.cuzdan-ust { display: flex; justify-content: space-between; align-items: flex-start; }
.cuzdan-cip { inline-size: 42px; block-size: 32px; border-radius: 7px; background: linear-gradient(135deg, #f6e3a1, #c9a43a 55%, #f1d887); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2); color: rgb(90 66 10 / 0.55); display: grid; place-items: center; }
.cuzdan-logo { inline-size: 58px; block-size: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.45)); }
.cuzdan-etiket { font-size: 0.72rem; font-weight: 700; opacity: 0.7; letter-spacing: 0.04em; }
.cuzdan-deger { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-shadow: 0 2px 12px rgb(0 0 0 / 0.35); }
.cuzdan-alt { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cuzdan-ad { font-weight: 750; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.cuzdan-ad .rozet { background: rgb(255 255 255 / 0.18); color: #fff; }
.cuzdan-mini { display: flex; gap: 12px; font-size: 0.7rem; opacity: 0.8; font-weight: 650; text-align: end; }
.cuzdan-mini b { display: block; font-size: 0.82rem; opacity: 1; }
.teslim-yonu { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.teslim-ok { display: grid; place-items: center; inline-size: 44px; block-size: 50px; color: var(--altin-metin); }
.teslim-ok .simge { animation: salin 1.8s ease-in-out infinite; }

/* --- daha / ayarlar ------------------------------------------------------ */
.kullanici-kart { flex-direction: row; align-items: center; gap: 14px; }
.kullanici-kart .avatar { --boyut: 58px; }
.kullanici-kart div { flex: 1; min-inline-size: 0; }
.kullanici-kart strong { font-size: 1.1rem; font-weight: 800; display: block; }
.menu-liste { list-style: none; margin: 0; padding: 6px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-l); display: flex; flex-direction: column; gap: 2px; }
.menu-oge { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 15px; text-decoration: none; transition: background .2s; }
.menu-oge:hover { background: var(--yuzey-2); }
.menu-oge .simge-kap { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 13px; background: color-mix(in srgb, var(--renk, var(--altin-3)) 15%, transparent); color: var(--renk, var(--altin-3)); flex: none; }
.menu-oge div { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.menu-oge strong { font-weight: 750; }
.parcali { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.parcali button { display: flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 42px; border: none; border-radius: 12px; background: none; color: var(--soluk); font-weight: 750; cursor: pointer; transition: all .25s var(--egri); }
.parcali button.secili { background: var(--yuzey-dolu); color: var(--metin); box-shadow: 0 4px 14px rgb(0 0 0 / 0.18); }
.parcali button.secili .simge { color: var(--altin-metin); }
.surum { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cok-soluk); font-size: 0.8rem; padding-block: 10px; }
.surum img { inline-size: 120px; block-size: auto; filter: drop-shadow(0 8px 22px rgb(212 175 55 / 0.25)); }

/* ürün yönetimi */
.urun-yonetim-kart { flex-direction: row; align-items: center; gap: 14px; text-decoration: none; }
.urun-yonetim-kart .urun-simge-kap { inline-size: 48px; block-size: 48px; border-radius: 16px; }
.urun-yonetim-kart > div { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 4px; }
.fiyat-cipleri { display: flex; flex-wrap: wrap; gap: 6px; }
.fiyat-cip { padding: 2px 9px; border-radius: 99px; background: var(--yuzey-2); font-size: 0.76rem; font-weight: 700; }
.fiyat-satir { display: grid; grid-template-columns: minmax(6rem, 1fr) 1.4fr; align-items: center; gap: 10px; }
.fiyat-satir > span { font-weight: 700; }

/* --- giriş --------------------------------------------------------------- */
.giris { position: relative; min-block-size: 100dvh; display: grid; place-items: center; padding: 24px 18px; overflow: hidden; isolation: isolate; }
.isik { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: suzul 14s ease-in-out infinite alternate; }
.isik.i1 { inline-size: 70vmax; block-size: 70vmax; inset-block-start: -35vmax; inset-inline-start: -20vmax; background: radial-gradient(circle, rgb(212 175 55 / 0.55), transparent 60%); }
.isik.i2 { inline-size: 55vmax; block-size: 55vmax; inset-block-end: -25vmax; inset-inline-end: -20vmax; background: radial-gradient(circle, rgb(45 212 191 / 0.28), transparent 60%); animation-duration: 17s; }
.isik.i3 { inline-size: 45vmax; block-size: 45vmax; inset-block-end: 10vmax; inset-inline-start: -25vmax; background: radial-gradient(circle, rgb(129 140 248 / 0.25), transparent 60%); animation-duration: 20s; }
.zerre { position: absolute; z-index: -1; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--altin-1); box-shadow: 0 0 10px var(--altin-2); opacity: 0; animation: zerre var(--sure, 9s) linear var(--gecikme, 0s) infinite; inset-inline-start: var(--x); inset-block-end: -10px; }
.giris-kart {
  inline-size: 100%; max-inline-size: 400px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 34px 24px 26px; border-radius: 32px; background: var(--cam); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--cizgi-guclu); box-shadow: var(--golge-buyuk); animation: yuksel .8s var(--egri) both;
}
.giris-hero { display: block; inline-size: min(250px, 66vw); block-size: auto; margin-block: -8px -14px; filter: drop-shadow(0 18px 40px rgb(212 175 55 / 0.28)); }
.giris-kart h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; background: var(--altin-egim); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema="gunduz"] .giris-kart h1 { background: linear-gradient(135deg, #8a6a14, #b8901f 50%, #6e5510); -webkit-background-clip: text; background-clip: text; }
.giris-alt { color: var(--soluk); font-weight: 600; }
.giris-alan { min-block-size: 60px; display: grid; place-items: center; inline-size: 100%; margin-block-start: 8px; }
.giris-mesaj { color: var(--kirmizi); font-weight: 700; font-size: 0.9rem; }
.giris-mesaj:empty { display: none; }
.gelistirme-giris { display: flex; flex-direction: column; gap: 10px; inline-size: 100%; }
.giris-guven { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--cok-soluk); font-size: 0.78rem; font-weight: 650; }
.giris .parcali { inline-size: 100%; }

/* --- yükleniyor, hata, bildirim, pencere -------------------------------- */
.iskelet { display: flex; flex-direction: column; gap: 14px; }
.iskelet-blok { border-radius: var(--r-l); background: linear-gradient(100deg, var(--yuzey) 30%, var(--yuzey-3) 50%, var(--yuzey) 70%); background-size: 300% 100%; animation: parilda 1.4s ease-in-out infinite; }
.donen { inline-size: 26px; block-size: 26px; border-radius: 50%; border: 3px solid var(--yuzey-3); border-block-start-color: var(--altin-3); animation: don .8s linear infinite; }
.hata-kutu { background: rgb(251 113 133 / 0.08); border: 1px solid rgb(251 113 133 / 0.25); color: var(--kirmizi); border-radius: var(--r-l); padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; animation: titre .4s ease; }
.hata-kutu p { font-weight: 700; }
.toast {
  position: fixed; z-index: 70; inset-inline: 16px; inset-block-end: calc(var(--menu-boy) + 26px + env(safe-area-inset-bottom));
  max-inline-size: 460px; margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: var(--yuzey-dolu); color: var(--metin); border: 1px solid var(--cizgi-guclu); box-shadow: var(--golge-buyuk); font-weight: 700;
  opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .3s var(--egri), transform .4s var(--yay); pointer-events: none;
}
.toast .simge-kap { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 10px; background: rgb(52 211 153 / 0.16); color: var(--yesil); flex: none; }
.toast.hata .simge-kap { background: rgb(251 113 133 / 0.16); color: var(--kirmizi); }
.toast.goster { opacity: 1; transform: none; }
.pencere { border: 1px solid var(--cizgi-guclu); border-radius: 26px; padding: 22px; inline-size: min(92vw, 420px); background: var(--yuzey-dolu); color: var(--metin); box-shadow: var(--golge-buyuk); }
.pencere[open] { animation: pencereAc .35s var(--yay); }
.pencere::backdrop { background: rgb(0 0 0 / 0.55); backdrop-filter: blur(4px); animation: belir .25s ease; }
.pencere-simge { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 17px; background: var(--vurgu-zemin); color: var(--altin-metin); margin-block-end: 14px; }
.pencere-simge.tehlike { background: rgb(251 113 133 / 0.14); color: var(--kirmizi); }
.pencere-metin { font-weight: 800; font-size: 1.05rem; margin-block-end: 6px; }
.pencere-ayrinti { color: var(--soluk); margin-block-end: 14px; overflow-wrap: anywhere; font-size: 0.92rem; }
.pencere .girdi { margin-block: 6px 14px; }
.pencere-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 14px; }

/* --- tablolar (yedek) ---------------------------------------------------- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r-l); background: var(--yuzey); }
.tablo { inline-size: 100%; border-collapse: collapse; }
.tablo th, .tablo td { padding: 11px 10px; text-align: start; border-block-end: 1px solid var(--cizgi); white-space: nowrap; }
.tablo thead th { font-size: 0.75rem; color: var(--soluk); font-weight: 750; }
.tablo tbody tr:last-child > * { border-block-end: none; }
.tablo td { text-align: end; }


/* --- karşılama (ana ekran başı) ----------------------------------------- */
.ekran > .govde:first-child { padding-block-start: calc(22px + env(safe-area-inset-top)); }
.karsilama { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.karsilama-metin { min-inline-size: 0; }
.karsilama-selam { color: var(--altin-metin); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; }
.marka { display: inline-flex; align-items: center; gap: 8px; margin-block-end: 10px; text-decoration: none; color: var(--soluk); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.marka img { inline-size: 46px; block-size: auto; filter: drop-shadow(0 3px 10px rgb(212 175 55 / 0.35)); }
.karsilama h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karsilama .ikincil-metin { font-size: 0.82rem; }
.karsilama-avatar { flex: none; border-radius: 18px; box-shadow: 0 0 0 2px var(--zemin), 0 0 0 4px rgb(212 175 55 / 0.55); text-decoration: none; transition: transform .2s var(--yay); }
.karsilama-avatar:active { transform: scale(.94); }
.karsilama-avatar .avatar { border-radius: 18px; }

.iki-genis { display: flex; flex-direction: column; gap: 18px; }
.adim-icerik { display: flex; flex-direction: column; gap: 10px; }
.google-dugmesi { display: flex; justify-content: center; min-block-size: 44px; }
.liste > li:not(.liste-oge) { display: block; }

/* --- animasyonlar -------------------------------------------------------- */
@keyframes ekranGiris { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes yuksel { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes acil { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ciz { to { stroke-dashoffset: 0; } }
@keyframes dilim { to { stroke-dasharray: var(--uzunluk) calc(100 - var(--uzunluk)); } }
@keyframes ilerle { to { stroke-dasharray: var(--pay) calc(100 - var(--pay)); } }
@keyframes buyu { from { transform: scaleY(0); } to { transform: none; } }
@keyframes yayil { from { transform: scaleX(0); } to { transform: none; } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgb(236 208 120 / 0.65); } 80%, 100% { box-shadow: 0 0 0 14px rgb(236 208 120 / 0); } }
@keyframes halka-dalga { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes parilti { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes kayanIsik { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes parilda { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes don { to { transform: rotate(360deg); } }
@keyframes nefes { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes zipla { 0% { transform: scale(.7) translateY(3px); } 60% { transform: scale(1.12) translateY(-2px); } 100% { transform: none; } }
@keyframes yanip { 50% { opacity: .35; } }
@keyframes patla { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes kartGiris { from { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes salin { 50% { transform: translateX(4px); } }
@keyframes suzul { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(6vmax, 5vmax) scale(1.15); } }
@keyframes zerre { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 90% { opacity: .6; } 100% { opacity: 0; transform: translateY(-105vh); } }
@keyframes titre { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes pencereAc { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

@media (min-width: 680px) {
  .istatistikler { grid-template-columns: repeat(4, 1fr); }
  .urun-secim { grid-template-columns: repeat(4, 1fr); }
  .plan-secim { grid-template-columns: repeat(3, 1fr); }
  .iki-genis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .isik, .zerre, .grafik-nabiz, .fab::after { display: none; }
}