/* hemensitem QR — işletme paneli. "Gökyüzü tabelası": müşteri menüsüyle aynı dil (menu.css).
   - Her sayfanın başı o anın gökyüzü (html[data-saat], panel.js İstanbul saatine göre yazar); içerik üstüne kayan
     beyaz yaprakta. Özet'te büyük tabela selamı, diğer sekmelerde ince şerit + sekme başlığı.
   - Tip: tek aile Archivo, üç genişlik: dar-kalın tabela başlıkları, %84 ürün adları, %116 geniş rakamlar.
   - Kartlar gölgesiz kum zemin; yarıçap hiyerarşisi: blok 28 · satır 22 · çip tam yuvarlak.
   - Telefon önce; tablet/masaüstü düzeni (kenar menüsü, iki panel, ızgaralar) genis.css’te, yalnız min-width ≥ 768.
   CSP: satır içi stil yok; dinamik değerler JS'te style.setProperty('--x', …) ile verilir. */

:root {
  --kobalt: #1552F0;
  --kobalt-koyu: #0F40C4;
  --kobalt-acik: #EEF2FE;
  --kobalt-orta: #DCE5FD;
  --murekkep: #1C1917;
  --murekkep-2: #292524;
  --tas: #57534E;
  --tas-acik: #6F6A64;
  --cizgi: #E9E5E0;
  --cizgi-koyu: #D5CFC8;
  --kum: #F4F2EF;
  --kum-koyu: #EAE6E1;
  --yaprak: #FFFFFF;
  --dis: #FFFFFF;
  --nane: #0B6B3F;
  --nane-acik: #E3F3EA;
  --kirmizi: #B42318;
  --kirmizi-acik: #FDEBE9;
  --amber: #7A4A00;
  --amber-acik: #FFF0D2;

  --dar: 68%;            /* tabela başlıkları */
  --yari-dar: 84%;       /* ürün adları */
  --genis: 116%;         /* rakamlar, fiyatlar */
  --r-blok: 28px;
  --r-satir: 22px;
  --r-kucuk: 16px;

  --genislik: 640px;
  --ust-yuk: 64px;       /* gökyüzündeki üst satır */
  --dok-yuk: calc(80px + env(safe-area-inset-bottom, 0px));
  --yazi: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --egri: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;

  /* gökyüzü — öğle (varsayılan); menu.css ile aynı */
  --gok-koyu-cam: var(--gok-cam);
  --gok-1: #7FC1FF; --gok-2: #BFE1FF; --gok-3: #EAF5FF;
  --gok-metin: #10233A; --gok-cam: rgba(255, 255, 255, .55);
  --gok-isik: #FFE27A; --gok-hale: rgba(255, 214, 92, .45);
}
html[data-saat="sabah"] {
  --gok-1: #FFB48C; --gok-2: #FFD3B0; --gok-3: #FFF1E3;
  --gok-metin: #3A1E0E; --gok-isik: #FFF1C9; --gok-hale: rgba(255, 160, 90, .5);
}
html[data-saat="aksam"] {
  /* gün batımı: beyaz yazı alt bölümde de AA tutsun diye orta ve alt renkler koyu (≈5:1) */
  --gok-1: #4A3B8E; --gok-2: #8E4E86; --gok-3: #C9705A;
  --gok-metin: #FFFFFF; --gok-cam: rgba(255, 255, 255, .16); --gok-isik: #FFC67E; --gok-hale: rgba(255, 140, 90, .5);
  --gok-koyu-cam: rgba(24, 16, 48, .62); /* güneşin üstündeki haplar: beyaz yazı ≥ 4,5:1 */
}
html[data-saat="gece"] {
  --gok-1: #0D1130; --gok-2: #1F265A; --gok-3: #363575;
  --gok-metin: #FFFFFF; --gok-cam: rgba(255, 255, 255, .13); --gok-isik: #F3EFE2; --gok-hale: rgba(214, 222, 255, .18);
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root { --kobalt-acik: color-mix(in srgb, var(--kobalt) 8%, #FFFFFF); --kobalt-orta: color-mix(in srgb, var(--kobalt) 18%, #FFFFFF); }
}

/* tür renkleri (menu.css ile aynı): zemin / koyu (yazı) / orta (büyük ikon) */
.renk-icecek { --rz: #D7E8F7; --rk: #154A7C; --ro: #5F98CC; }
.renk-yemek { --rz: #FBDDC8; --rk: #86330F; --ro: #DF8550; }
.renk-kahvalti { --rz: #FCEBB0; --rk: #6A4700; --ro: #D6A21E; }
.renk-tatli { --rz: #F8D6E5; --rk: #872255; --ro: #D97AA6; }
.renk-atistirmalik { --rz: #DCEDCD; --rk: #2E5B16; --ro: #7CB459; }
.renk-diger { --rz: #EEEAE5; --rk: #3C3732; --ro: #A69E95; }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--yazi);
  font-size: 16px;
  line-height: 1.5;
  color: var(--murekkep);
  background: var(--dis);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 40px; line-height: .94; font-weight: 850; font-stretch: var(--dar); letter-spacing: -.004em; }
h2 { font-size: 22px; line-height: 1.05; font-weight: 820; font-stretch: var(--dar); }
h3 { font-size: 18px; line-height: 1.15; font-weight: 760; font-stretch: 92%; }
a { color: var(--kobalt); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.gizli {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ikon-kumesi { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ince { color: var(--tas); font-size: 15px; line-height: 1.45; }
.ince .ikon { display: inline-block; vertical-align: -.2em; width: 1.05em; height: 1.05em; margin-right: .3em; }
.ortali { text-align: center; }
.sag { text-align: right; }
.ust-bosluk { margin-top: 22px; }
.noscript { padding: 24px; text-align: center; }

/* Sütun: telefonda tam ekran, masaüstünde ortalanmış dar yaprak */
.uygulama { position: relative; max-width: var(--genislik); min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--yaprak); }
body[data-mod="giris"] .uygulama { max-width: none; background: transparent; }
@media (min-width: 700px) {
  :root { --dis: #ECE8E3; }
}

/* ---------- Açılış / dönen ---------- */
.acilis { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; gap: 12px; justify-items: center; color: var(--tas); font-weight: 600; }
.donen {
  display: inline-block; width: 18px; height: 18px; flex: none;
  border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: don .8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Düğmeler ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 720; font-stretch: 94%; line-height: 1.15; text-decoration: none; text-align: center;
  background: transparent; color: var(--murekkep);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--egri);
  touch-action: manipulation;
}
.dugme .ikon { width: 20px; height: 20px; stroke-width: 2; }
.dugme:active:not(:disabled) { transform: scale(.965); }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.dugme-ana { background: var(--kobalt); color: #fff; }
.dugme-ana:hover { background: var(--kobalt-koyu); color: #fff; }
.dugme-ikincil { background: var(--kum); color: var(--murekkep); }
.dugme-ikincil:hover { background: var(--kum-koyu); }
/* kum zeminli kapların içinde ikincil düğme beyaz */
:is(.kart, .yonetici-satir, .taslak-kategori, .qr-sahne, .serit) .dugme-ikincil { background: var(--yaprak); }
:is(.kart, .yonetici-satir, .taslak-kategori, .qr-sahne, .serit) .dugme-ikincil:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cizgi-koyu); }
.dugme-metin { min-height: 44px; padding: 0 10px; color: var(--kobalt); font-weight: 680; }
.dugme-metin:hover { color: var(--kobalt-koyu); background: var(--kobalt-acik); }
.dugme-tehlike { background: var(--kirmizi); color: #fff; }
.dugme-tehlike-metin { color: var(--kirmizi); }
.dugme-tehlike-metin:hover { color: var(--kirmizi); background: var(--kirmizi-acik); }
.dugme-kucuk { min-height: 44px; padding: 0 16px; font-size: 15px; }
.dugme-kucuk .ikon { width: 18px; height: 18px; }
.dugme-buyuk { min-height: 58px; padding: 0 26px; font-size: 18px; font-weight: 750; }
.dugme-tam { width: 100%; }
.dugme.mesgul { opacity: .85; }
.dugme-satiri { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dugme-satiri.esit > * { flex: 1 1 140px; }
.dugme-satiri.esit > .dugme { padding-inline: 14px; white-space: nowrap; } /* 375px'te "Menüyü aç" iki satıra bölünmesin */
.ikon-dugme {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 999px; background: transparent; color: var(--tas);
  transition: background-color 160ms ease, color 160ms ease;
}
.ikon-dugme .ikon { width: 22px; height: 22px; }
.ikon-dugme:hover { background: var(--kum-koyu); color: var(--murekkep); }
.ikon-dugme:disabled { opacity: .28; cursor: default; background: transparent; }
.ikon-dugme.tehlike:hover { color: var(--kirmizi); background: var(--kirmizi-acik); }

/* ---------- Form ---------- */
.form { display: grid; gap: 14px; }
.alan { display: grid; gap: 7px; margin-top: 16px; }
.alan:first-child { margin-top: 0; }
.kart-baslik + .alan, .kart-baslik + p + .alan { margin-top: 14px; }
.alan-etiket { font-weight: 680; font-size: 15px; color: var(--murekkep); }
.alan-girdi {
  width: 100%; min-height: 54px; padding: 12px 16px;
  border: 1.5px solid var(--cizgi-koyu); border-radius: var(--r-kucuk); background: var(--yaprak);
  font-size: 17px; /* iOS yakınlaştırmasın */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.alan-girdi::placeholder { color: #9A938B; }
.alan-girdi:focus { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 4px var(--kobalt-orta); }
textarea.alan-girdi { min-height: 104px; resize: vertical; line-height: 1.45; }
select.alan-girdi {
  appearance: none; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tas) 50%), linear-gradient(135deg, var(--tas) 50%, transparent 50%);
  background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px; background-size: 6px 6px; background-repeat: no-repeat;
}
input[type="search"].alan-girdi { border-radius: 999px; padding-left: 20px; }
.alan-kucuk { min-height: 44px; padding: 8px 12px; font-size: 16px; border-radius: 14px; }
.alan-not { color: var(--tas); font-size: 14px; line-height: 1.45; }
.alan-not.uyari { color: var(--amber); font-weight: 650; }
.kart > p.alan-etiket:not(:first-child) { margin-top: 18px; margin-bottom: 8px; }
.alan-hata, .form-hata { color: var(--kirmizi); font-size: 15px; font-weight: 600; }
.alan-hata:empty, .form-hata:empty { display: none; }
.iki-sutun { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); }
.iki-sutun .alan { margin-top: 16px; }
@media (min-width: 520px) { .iki-sutun { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hata-kutu {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border-radius: 18px;
  background: var(--kirmizi-acik); color: #8A1C12; font-weight: 600; font-size: 15px;
}
.hata-kutu .ikon { margin-top: 1px; }
.kart > .hata-kutu + * { margin-top: 12px; }
.not-kutu {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 18px; background: var(--kobalt-acik); color: var(--murekkep-2); font-size: 15px;
}
.sifre-kutu { position: relative; }
.sifre-kutu .alan-girdi { padding-right: 56px; }
.sifre-goster { position: absolute; right: 5px; top: 5px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--tas); display: grid; place-items: center; border-radius: 12px; }
.sifre-goster:hover { color: var(--murekkep); background: var(--kum); }
.slug-onizleme { display: flex; align-items: center; gap: 6px; color: var(--kobalt-koyu); font-weight: 650; font-size: 15px; overflow-wrap: anywhere; }
.slug-onizleme .ikon { width: 1.05em; height: 1.05em; }
.fiyat-kutu { position: relative; }
.fiyat-kutu .alan-girdi { padding-right: 30px; font-stretch: 108%; font-variant-numeric: tabular-nums; }
.fiyat-birim { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--tas); pointer-events: none; }
/* Boy / porsiyon satırları (ürün düzenleme, içe aktarma kontrolü): dar kapta iki satır (ad + fiyat; gramaj + düğmeler),
   geniş kapta tek satır (ad, gramaj, fiyat, düğmeler). Kap genişliğine bakılır: iki panelli düzende sağ panel dardır. */
.boy-alani { container-type: inline-size; display: grid; gap: 8px; margin-top: 16px; }
.boy-alani > .alan-etiket { margin-bottom: 2px; }
.boy-alani > .dugme-metin { justify-self: start; margin-left: -10px; }
.boy-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 6px; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid var(--cizgi);
}
.boy-satir > .boy-ad { font-weight: 650; }
.boy-satir .boy-fiyat { text-align: right; }
.boy-satir > .boy-miktar { min-height: 44px; padding-block: 8px; font-size: 16px; }
.boy-dugmeler { display: flex; justify-content: flex-end; }
@container (min-width: 540px) {
  .boy-satir { grid-template-columns: minmax(0, 1fr) 150px 116px auto; padding-bottom: 0; border-bottom: 0; }
  .boy-satir > .boy-miktar { grid-column: 2; grid-row: 1; min-height: 54px; padding-block: 12px; font-size: 17px; }
  .boy-satir > .fiyat-kutu { grid-column: 3; grid-row: 1; }
  .boy-satir > .boy-dugmeler { grid-column: 4; grid-row: 1; }
}
.sayac { font-variant-numeric: tabular-nums; font-stretch: var(--genis); }

/* Seçim grubu (çip düğmeler) */
.secim-grubu { display: flex; flex-wrap: wrap; gap: 8px; }
.secim {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 0; background: var(--kum); font-size: 15px; font-weight: 620; color: var(--murekkep-2);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--egri);
}
.kart .secim { background: var(--yaprak); }
.secim:hover { box-shadow: inset 0 0 0 1.5px var(--cizgi-koyu); }
.secim:active { transform: scale(.96); }
.secim[aria-pressed="true"] { background: var(--murekkep); color: #fff; box-shadow: none; }
.secim .ikon { width: 17px; height: 17px; }
.secim-grubu.alerjenler .secim { border-radius: 14px; text-align: left; }
.etiket-alani { margin-top: 20px; display: grid; gap: 9px; }

/* Aç/kapa anahtarı */
.anahtar { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; border-top: 1px solid var(--cizgi-koyu); }
.anahtar:first-of-type { border-top: 0; }
.alan + .anahtar { margin-top: 16px; border-top: 1px solid var(--cizgi-koyu); }
.anahtar-metin { display: grid; gap: 3px; }
.anahtar-baslik { font-weight: 700; font-size: 16.5px; }
.anahtar-not { color: var(--tas); font-size: 14px; line-height: 1.4; }
.anahtar-girdi { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anahtar-gorsel { position: relative; flex: none; width: 54px; height: 32px; border-radius: 999px; background: var(--cizgi-koyu); transition: background-color 180ms ease; }
.anahtar-gorsel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(28, 25, 23, .25); transition: transform 180ms var(--egri); }
.anahtar-girdi:checked + .anahtar-gorsel { background: var(--kobalt); }
.anahtar-girdi:checked + .anahtar-gorsel::after { transform: translateX(22px); }
.anahtar-girdi:focus-visible + .anahtar-gorsel { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.onay-satir { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--yaprak); cursor: pointer; line-height: 1.4; }
.onay-girdi { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--kobalt); }

/* ---------- Kartlar ---------- */
.kart {
  background: var(--kum); border-radius: var(--r-blok); padding: 20px 18px;
  scroll-margin-top: 16px;
}
.kart-baslik {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 25px; line-height: 1; font-weight: 820; font-stretch: var(--dar); letter-spacing: -.004em;
}
.kart-baslik > .ikon { display: none; }
.kart-basari .kart-baslik > .ikon {
  display: block; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--nane); color: #fff; stroke-width: 2.6;
}
.kart-baslik .donen { width: 20px; height: 20px; color: var(--kobalt); }
.kart-giris { color: var(--murekkep-2); font-size: 15.5px; }
.kart-vurgu { background: var(--kobalt-acik); }
.kart-basari { background: var(--nane-acik); }
.kart-ipucu > p + p, .kart-ipucu > p + .dugme, .kart-ipucu > p + button { margin-top: 10px; }
.kart > p + .dugme, .kart > .ince + .dugme, .kart > .ince + button { margin-top: 14px; }
.alt-baslik { margin: 22px 0 10px; font-size: 19px; font-weight: 800; font-stretch: var(--dar); }
.ayrac { height: 1px; background: var(--cizgi-koyu); margin: 20px 0 8px; }
.bos-not { color: var(--tas); font-size: 15px; padding: 6px 0; }
.iskelet { min-height: 150px; background: linear-gradient(90deg, var(--kum) 0%, var(--kum-koyu) 50%, var(--kum) 100%); background-size: 200% 100%; animation: parla 1.4s ease-in-out infinite; }
@keyframes parla { to { background-position: -200% 0; } }
.rozet { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--murekkep); color: #fff; font-size: 12.5px; font-weight: 700; font-stretch: 100%; letter-spacing: 0; }
.rozet-tehlike { background: var(--kirmizi); color: #fff; }
.bos-durum { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px 8px; }
.bos-durum h3 { font-size: 26px; font-weight: 820; font-stretch: var(--dar); line-height: 1; }
.bos-durum p { color: var(--tas); max-width: 34ch; }
.bos-durum .dugme { margin-top: 8px; }
.bos-ikon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: var(--kobalt-acik); color: var(--kobalt); margin: 0 auto 4px; }
.bos-ikon .ikon { width: 34px; height: 34px; stroke-width: 1.6; }

/* =====================================================================
   Gökyüzü blokları — sayfanın başı. Kap (sayfa / sihirbaz gövdesi) --tepe kadar üst boşluk bırakır, üst satır
   (marka + plan) o boşluğun üstünde durur; blok bu boşluğa doğru uzar ve tam genişliğe taşar. Alt kenarındaki
   beyaz yaprak (::after) içeriğin gökyüzünün üstüne kaydığı izlenimini verir; güneş/hilal ::before.
   Bloklar: sayfanın ilk .sayfa-baslik'i · Menü'nün başlığı · sihirbaz adım başlığı · "Menün hazır" · bekleme
   ===================================================================== */
.sayfa > .sayfa-baslik:first-child,
.menu-arac > .sayfa-baslik,
.sihirbaz-govde > .sayfa-baslik:first-child,
.sihirbaz-govde > .hazir-ust,
.sihirbaz-govde > .bekle {
  position: relative; isolation: isolate; overflow: hidden;
  margin: calc(-1 * var(--tepe, 0px)) calc(-1 * var(--kenar, 16px)) -20px;
  padding: calc(var(--tepe, 0px) + 8px) calc(var(--kenar, 16px) + 4px) 56px;
  color: var(--gok-metin);
  background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 62%, var(--gok-3) 100%);
}
html[data-saat="gece"] :is(.sayfa > .sayfa-baslik:first-child, .menu-arac > .sayfa-baslik, .sihirbaz-govde > .sayfa-baslik:first-child, .sihirbaz-govde > .hazir-ust, .sihirbaz-govde > .bekle),
html[data-saat="gece"] .giris-gok, html[data-saat="gece"] .bekleme-katman {
  background:
    radial-gradient(2px 2px at 12% 22%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 32% 12%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 54% 30%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 70% 14%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 86% 54%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 22% 48%, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 44% 66%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 64% 44%, #fff 50%, transparent 52%),
    linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 62%, var(--gok-3) 100%);
}
/* güneş (gece hilal) */
.sayfa > .sayfa-baslik:first-child::before,
.menu-arac > .sayfa-baslik::before,
.sihirbaz-govde > .sayfa-baslik:first-child::before,
.sihirbaz-govde > .hazir-ust::before,
.sihirbaz-govde > .bekle::before,
.giris-gok::before, .bekleme-katman::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -46px; right: -40px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #FFFFFF 0%, var(--gok-isik) 46%);
  box-shadow: 0 0 0 16px var(--gok-hale), 0 0 90px 34px var(--gok-hale);
}
html[data-saat="gece"] :is(.sayfa > .sayfa-baslik:first-child, .menu-arac > .sayfa-baslik, .sihirbaz-govde > .sayfa-baslik:first-child, .sihirbaz-govde > .hazir-ust, .sihirbaz-govde > .bekle, .giris-gok, .bekleme-katman)::before {
  background: transparent; top: 58px; right: 26px; width: 62px; height: 62px;
  box-shadow: inset -16px 8px 0 0 var(--gok-isik), 0 0 60px 12px var(--gok-hale);
}
/* beyaz yaprak */
.sayfa > .sayfa-baslik:first-child::after,
.menu-arac > .sayfa-baslik::after,
.sihirbaz-govde > .sayfa-baslik:first-child::after,
.sihirbaz-govde > .hazir-ust::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; height: 28px;
  background: var(--yaprak); border-radius: 28px 28px 0 0; box-shadow: 0 -14px 36px -26px rgba(15, 20, 40, .45);
}
.sayfa-baslik { display: grid; gap: 8px; }
.sayfa-baslik h1 { font-size: clamp(40px, 12vw, 54px); line-height: .9; font-weight: 850; font-stretch: var(--dar); letter-spacing: -.006em; overflow-wrap: anywhere; }
.sayfa-baslik p { max-width: 34ch; font-size: 16.5px; line-height: 1.4; font-weight: 520; opacity: .88; }
html[data-saat="aksam"] :is(.sayfa-baslik p, .giris-gok-alt) { opacity: 1; text-shadow: 0 1px 2px rgba(40, 18, 60, .35); }
.sayfa-baslik.satirli { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sayfa-baslik.satirli > div { display: grid; gap: 8px; min-width: 0; }
.geri-baslik { justify-items: start; }
.geri-baslik > .ikon-dugme { margin-left: -4px; }
.geri-baslik h1 { font-size: clamp(34px, 10vw, 46px); }

/* gökyüzündeki cam yüzeyler (üst satır, geri düğmesi, haplar) */
.cam, .geri-baslik > .ikon-dugme, .sihirbaz-ust .ikon-dugme, .kredi-hap, .kayit-durumu {
  background: var(--gok-cam); color: inherit; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.geri-baslik > .ikon-dugme:hover, .sihirbaz-ust .ikon-dugme:hover { background: var(--gok-cam); color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Özet: büyük tabela selamı */
.ozet-baslik { padding-bottom: 64px !important; gap: 0; }
.ozet-selam {
  max-width: none !important; opacity: 1 !important; margin-top: 30px;
  font-size: clamp(56px, 17.5vw, 88px) !important; line-height: .86 !important; font-weight: 850 !important;
  font-stretch: var(--dar); letter-spacing: -.012em; hyphens: manual;
  animation: selam-gir .8s var(--egri) .05s both;
}
@keyframes selam-gir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ozet-baslik h1 { margin-top: 12px; font-size: clamp(26px, 7.6vw, 34px); line-height: 1; font-weight: 760; font-stretch: 84%; letter-spacing: -.01em; }
.ozet-tarih {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; min-height: 34px; padding: 0 14px 0 11px;
  border-radius: 999px; font-size: 15px !important; font-weight: 650 !important; opacity: 1 !important;
  background: var(--gok-cam); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ozet-tarih .ikon { width: 17px; height: 17px; }

/* ---------- Ana uygulama iskeleti ---------- */
body.uygulama-acik { padding-bottom: calc(var(--dok-yuk) + 12px); }
.ust-cubuk { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: var(--gok-metin); }
.ust-ic { height: var(--ust-yuk); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uygulama:has(.sayfa > .bos-durum:first-child) .ust-cubuk { color: var(--murekkep); }
.marka { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; font-weight: 720; font-size: 17px; }
.marka-isaret { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; background: var(--kobalt); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); }
.marka-isaret .ikon { width: 22px; height: 22px; }
.marka-isaret.kucuk { width: 40px; height: 40px; }
.ust-ad { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uygulama[data-sekme="ozet"] .ust-ad { visibility: hidden; }
.marka-ad b { font-weight: 800; }
.kredi-hap {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 15px 0 12px;
  border-radius: 999px; font-weight: 680; font-size: 14.5px; text-decoration: none; font-variant-numeric: tabular-nums;
}
.kredi-hap .ikon { width: 17px; height: 17px; }
.kredi-hap.az { background: var(--amber-acik); color: var(--amber); backdrop-filter: none; }
/* akşam güneşi üst sağda, hapın tam altında: koyu cam */
.kredi-hap:not(.az), .kayit-durumu:not(.hata) { background: var(--gok-koyu-cam); }

.sayfa {
  --tepe: var(--ust-yuk); --kenar: 16px;
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--tepe) var(--kenar) 28px; outline: none;
}
.sayfa > * { min-width: 0; order: 2; }
.sayfa > :first-child { order: 0; }
.sayfa > .serit-kap { order: 1; }
.serit-kap:empty { display: none; }
.rapor-kap { display: flex; flex-direction: column; gap: 14px; }
.serit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: var(--r-satir); font-size: 15px; font-weight: 560; }
.serit > span:not(.donen) { flex: 1 1 200px; }
.serit-uyari { background: var(--amber-acik); color: #5C3700; }
.serit-bilgi { background: var(--kobalt-acik); color: var(--murekkep-2); }
.serit .donen { color: var(--kobalt); }

/* Alt sekme çubuğu: yüzen cam hap, etkin sekme mürekkep dolgulu */
.sekme-cubugu {
  position: fixed; z-index: 30; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 20px), 540px); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px;
  border-radius: 999px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px -16px rgba(15, 20, 40, .45), inset 0 0 0 1px rgba(28, 25, 23, .07);
}
.sekme-cubugu.alti { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sekme {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; height: 56px; border-radius: 999px;
  color: var(--tas); text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.1;
  transition: background-color 200ms ease, color 200ms ease;
}
.sekme .ikon { width: 23px; height: 23px; }
.sekme span { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sekme:hover { color: var(--murekkep); }
.sekme[aria-current="page"] { background: var(--murekkep); color: #fff; }
.sekme[aria-current="page"] .ikon { stroke-width: 2.1; }
.sekme:focus-visible { outline-offset: -3px; }
.sekme-cubugu.alti .sekme { font-size: 11px; }

/* Sabit alt eylem çubuğu (tek ana düğme) */
.alt-cubuk {
  position: sticky; bottom: 0; z-index: 15;
  margin: 4px calc(-1 * var(--kenar, 16px)) 0; padding: 18px var(--kenar, 16px) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--yaprak) 36%);
}
.alt-cubuk-ic { max-width: var(--genislik); margin: 0 auto; }
body.uygulama-acik .alt-cubuk { bottom: var(--dok-yuk); padding-bottom: 10px; }

/* ---------- Bildirim (toast) ---------- */
.bildirim {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 90;
  display: flex; align-items: center; gap: 10px;
  max-width: min(calc(100vw - 24px), 480px); padding: 13px 20px 13px 16px; border-radius: 22px;
  background: var(--murekkep); color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1.35;
  box-shadow: 0 18px 40px -16px rgba(15, 20, 40, .55);
  transform: translate(-50%, -16px); opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 260ms var(--egri);
}
.bildirim.gorunur { opacity: 1; transform: translate(-50%, 0); }
.bildirim .ikon { width: 20px; height: 20px; stroke-width: 2.2; }
.bildirim.tamam .ikon { color: #7BE3A6; }
.bildirim.hata { background: #7A1A12; }

/* ---------- Pencere (dialog) ---------- */
.pencere {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--r-blok); background: var(--yaprak); color: var(--murekkep);
  box-shadow: 0 30px 70px -24px rgba(15, 20, 40, .55); display: none; flex-direction: column;
}
.pencere[open] { display: flex; animation: pencere-gir 280ms var(--egri) both; }
@keyframes pencere-gir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pencere::backdrop { background: rgba(28, 25, 23, .48); }
.pencere-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 20px 12px 6px 22px; }
.pencere-baslik { font-size: 28px; line-height: .98; font-weight: 840; font-stretch: var(--dar); padding-top: 8px; overflow-wrap: anywhere; }
.pencere-kapat { width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--kum); color: var(--tas); display: grid; place-items: center; flex: none; margin-left: auto; }
.pencere-kapat:hover { background: var(--kum-koyu); color: var(--murekkep); }
.pencere-govde { padding: 8px 22px 4px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.pencere-govde > p { color: var(--murekkep-2); }
.pencere-govde > .alan { margin-top: 0; }
.pencere-giris { color: var(--murekkep-2); }
.pencere-alt { display: flex; flex-wrap: wrap-reverse; gap: 8px; padding: 18px 22px 22px; justify-content: flex-end; }
.pencere-alt > * { flex: 1 1 auto; }
.pencere-uzun { height: min(740px, calc(100dvh - 32px)); }
.pencere-uzun .pencere-govde { flex: 1; }
@media (max-width: 560px) {
  .pencere { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r-blok) var(--r-blok) 0 0; max-height: 92dvh; }
  .pencere[open] { animation-name: pencere-kay; }
  .pencere-alt { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .pencere-alt > * { flex: 1 1 100%; }
}
@keyframes pencere-kay { from { transform: translateY(40%); } to { transform: none; } }
.secenek-listesi { display: grid; gap: 8px; }
.secenek { display: flex; gap: 14px; align-items: center; min-height: 64px; padding: 14px 16px; border-radius: var(--r-satir); cursor: pointer; background: var(--kum); transition: box-shadow 160ms ease, background-color 160ms ease; }
.kart .secenek { background: var(--yaprak); }
.secenek:has(input:checked) { background: var(--yaprak); box-shadow: inset 0 0 0 2.5px var(--murekkep); }
.secenek-radyo { width: 22px; height: 22px; margin: 0; accent-color: var(--murekkep); flex: none; }
.secenek-metin { display: grid; gap: 2px; }
.secenek-metin b { font-size: 18px; font-weight: 800; font-stretch: 84%; }
.secenek-metin span { color: var(--tas); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.gecici-sifre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; font-weight: 700; letter-spacing: .06em; padding: 16px; border-radius: var(--r-satir); background: var(--kum); text-align: center; user-select: all; }

/* Tam ekran bekleme: gökyüzü */
.bekleme-katman {
  position: fixed; inset: 0; z-index: 80; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; padding: 24px;
  color: var(--gok-metin); background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 62%, var(--gok-3) 100%);
  animation: sol-gir 300ms ease both;
}
@keyframes sol-gir { from { opacity: 0; } to { opacity: 1; } }
.bekleme-kutu { display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 340px; }
.bekleme-ikon, .bekle-ikon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--gok-cam); color: inherit; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: nabiz 1.8s ease-in-out infinite; }
.bekleme-ikon .ikon, .bekle-ikon .ikon { width: 38px; height: 38px; stroke-width: 1.6; }
.bekleme-metin { font-size: 38px; line-height: .94; font-weight: 850; font-stretch: var(--dar); }
.bekleme-alt { font-size: 16px; font-weight: 520; opacity: .88; }
@keyframes nabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- Giriş / kayıt: tam ekran gökyüzü + beyaz yaprak ---------- */
.giris-sayfa { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--yaprak); }
.giris-gok {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 10px; align-content: start;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 66px; color: var(--gok-metin);
  background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 62%, var(--gok-3) 100%);
}
.giris-gok .marka { justify-self: start; }
.giris-vaat {
  margin-top: 46px; max-width: 8.5em;
  font-size: clamp(56px, 17vw, 92px); line-height: .86; font-weight: 850; font-stretch: var(--dar); letter-spacing: -.012em;
  animation: selam-gir .8s var(--egri) .05s both;
}
.giris-gok-alt { max-width: 30ch; margin-top: 6px; font-size: 17px; line-height: 1.4; font-weight: 540; opacity: .9; }
.giris-kutu {
  position: relative; flex: 1; margin-top: -32px; padding: 26px 20px 22px;
  display: grid; gap: 10px; align-content: start;
  background: var(--yaprak); border-radius: 32px 32px 0 0; box-shadow: 0 -14px 36px -26px rgba(15, 20, 40, .45);
}
.giris-kutu.ortali { justify-items: center; align-content: center; text-align: center; }
.giris-kutu > * { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
.giris-kutu.ortali > .bos-ikon { width: 72px; }
.giris-baslik { font-size: 34px; line-height: .96; font-weight: 840; font-stretch: var(--dar); margin-top: 8px; }
.giris-altbaslik { color: var(--tas); }
.giris-sekmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 999px; background: var(--kum); }
.giris-sekme { min-height: 48px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 16px; color: var(--tas); transition: background-color 200ms ease, color 200ms ease; }
.giris-sekme[aria-selected="true"] { background: var(--murekkep); color: #fff; }
.giris-form { display: grid; gap: 4px; }
.giris-form .alan { margin-top: 12px; }
.giris-form .form-hata { margin-top: 12px; }
.giris-form .dugme-buyuk { margin-top: 18px; }
.giris-artilar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.giris-artilar li { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--nane-acik); color: var(--nane); font-size: 14px; font-weight: 650; }
.giris-artilar .ikon { width: 16px; height: 16px; stroke-width: 2.4; }
.giris-alt { text-align: center; margin-top: 8px; }
.giris-unuttum { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; font-weight: 650; padding: 0 10px; }
/* şifremi unuttum: bağlantı gönderildi notu; yeni şifre ekranında geçersiz bağlantı */
.giris-gonderildi { display: grid; gap: 6px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-satir); background: var(--nane-acik); color: var(--murekkep-2); }
.giris-form > .hata-kutu { margin-top: 12px; }
.giris-dip { margin-top: 18px !important; text-align: center; color: var(--tas); font-size: 14px; }
.giris-dip a { color: var(--tas); display: inline-block; padding: 10px 4px; }
.giris-dip.giris-yasal { margin-top: -12px !important; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; font-size: 13px; }
.giris-dip.giris-yasal a { padding: 6px 2px; }
@media (min-width: 700px) {
  .giris-sayfa { background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 55%, var(--gok-3) 100%); align-items: center; padding-bottom: 48px; }
  .giris-gok { width: 100%; max-width: 560px; background: none; overflow: visible; padding-bottom: 60px; }
  .giris-kutu { flex: none; width: min(100% - 32px, 520px); margin-top: -28px; padding: 28px 32px; border-radius: var(--r-blok); }
}

/* ---------- Sihirbaz ---------- */
.sihirbaz { --kenar: 16px; position: relative; max-width: var(--genislik); margin: 0 auto; padding: 0 var(--kenar) 24px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.sihirbaz-ust { position: absolute; z-index: 5; top: 0; left: var(--kenar); right: var(--kenar); height: var(--ust-yuk); display: flex; align-items: center; gap: 12px; color: var(--gok-metin); }
.sihirbaz-ilerleme { flex: 1; display: grid; gap: 7px; max-width: 320px; }
.sihirbaz-adim { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sihirbaz-ust .ilerleme { background: var(--gok-cam); }
.sihirbaz-ust .ilerleme-dolu { background: currentColor; }
.ilerleme { position: relative; height: 6px; border-radius: 999px; background: var(--kum-koyu); overflow: hidden; }
.ilerleme-dolu { position: absolute; inset: 0 auto 0 0; width: calc(var(--oran, 0) * 100%); background: var(--kobalt); border-radius: inherit; transition: width 400ms var(--egri); }
.ilerleme-buyuk { height: 8px; width: min(280px, 80%); background: var(--gok-cam); }
.ilerleme-buyuk .ilerleme-dolu { background: currentColor; }
.ilerleme.akan .ilerleme-dolu { width: 40%; animation: ak 1.4s ease-in-out infinite; }
@keyframes ak { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.sihirbaz-govde { --tepe: var(--ust-yuk); flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: var(--tepe); }
.sihirbaz-govde > * { min-width: 0; }
.sihirbaz-govde > .alt-cubuk { margin-top: auto; }
/* menü sekmesinde "içe aktar": uygulama üst satırının altında ikinci bir satır */
.sayfa > .sihirbaz-ek { margin-top: calc(-1 * var(--ust-yuk)); padding: 0; min-height: 0; max-width: none; }
.sihirbaz-ek > .sihirbaz-ust { top: var(--ust-yuk); left: 0; right: 0; height: 52px; }
.sihirbaz-ek > .sihirbaz-govde { --tepe: calc(var(--ust-yuk) + 52px); }

.yontem-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.yontem-karti {
  position: relative; overflow: hidden; isolation: isolate; min-height: 160px; padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px;
  border: 0; border-radius: var(--r-blok); background: var(--rz, var(--kum)); color: var(--rk, var(--murekkep)); text-align: start;
  transition: transform 160ms var(--egri);
}
.yontem-karti:active { transform: scale(.965); }
.yontem-karti[data-yontem="foto"] { --rz: var(--kobalt); --rk: #FFFFFF; --ro: rgba(255, 255, 255, .34); grid-column: 1 / -1; min-height: 172px; }
.yontem-karti[data-yontem="pdf"] { --rz: #D7E8F7; --rk: #154A7C; --ro: #5F98CC; }
.yontem-karti[data-yontem="link"] { --rz: #FCEBB0; --rk: #6A4700; --ro: #D6A21E; }
.yontem-karti[data-yontem="metin"] { --rz: #DCEDCD; --rk: #2E5B16; --ro: #7CB459; }
.yontem-karti[data-yontem="elle"] { --rz: var(--kum); --rk: var(--murekkep); --ro: #C9C2BA; }
.yontem-ikon { position: absolute; z-index: -1; top: -14px; right: -14px; width: 96px; height: 96px; color: var(--ro, var(--tas-acik)); transition: transform 260ms var(--egri); }
.yontem-ikon .ikon { width: 100%; height: 100%; stroke-width: 1.5; }
.yontem-karti:active .yontem-ikon { transform: rotate(-8deg) scale(1.06); }
.yontem-karti[data-yontem="foto"] .yontem-ikon { width: 132px; height: 132px; top: -18px; right: -12px; }
.yontem-metin { display: grid; gap: 4px; }
.yontem-metin b { font-size: 25px; line-height: .95; font-weight: 820; font-stretch: var(--dar); letter-spacing: -.004em; }
.yontem-karti[data-yontem="foto"] .yontem-metin b { font-size: 31px; }
.yontem-metin span { font-size: 14px; line-height: 1.3; font-weight: 600; opacity: .8; }
.yontem-maliyet {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 12px 0 9px;
  border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 13.5px; font-weight: 700;
}
.yontem-maliyet .ikon { width: 15px; height: 15px; }
.yontem-listesi ~ .ortali { margin-top: 4px; }
.yontem-listesi ~ .ortali .dugme-metin { color: var(--tas); font-size: 15px; }
@media (min-width: 640px) {
  .yontem-karti { min-height: 168px; }
}

.foto-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.foto-kucuk { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: var(--kum); display: grid; place-items: center; }
.foto-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.foto-kucuk figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(28, 25, 23, .75); color: #fff; font-size: 12.5px; font-weight: 650; }
.foto-sil { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; }
.foto-sil::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(28, 25, 23, .72); z-index: 0; }
.foto-sil .ikon { position: relative; width: 18px; height: 18px; }
.foto-yok .ikon { width: 32px; height: 32px; color: var(--tas); }
.foto-hazirlaniyor { gap: 6px; align-content: center; color: var(--kobalt); }

.sihirbaz-govde > .bekle { flex: 1; display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center; margin-bottom: -24px; min-height: 100vh; min-height: 100dvh; }
.bekle-baslik { font-size: clamp(40px, 12vw, 56px) !important; line-height: .9 !important; max-width: 8em; }
.bekle-alt { font-weight: 600; font-size: 17px; }
.bekle .ince { color: inherit; opacity: .82; max-width: 30ch; }

.taslak-liste { display: grid; gap: 12px; }
.taslak-kategori { background: var(--kum); border-radius: var(--r-blok); padding: 12px; display: grid; gap: 8px; }
.taslak-kategori-ust { display: flex; gap: 6px; align-items: center; }
.taslak-kategori-ad { font-size: 21px; font-weight: 820; font-stretch: var(--dar); background: transparent; border-color: transparent; padding-left: 8px; }
.taslak-kategori-ad:hover { border-color: var(--cizgi-koyu); }
.taslak-urunler { display: grid; gap: 6px; }
.taslak-urun { display: grid; grid-template-columns: minmax(0, 1fr) 104px 44px; gap: 6px; align-items: center; }
.taslak-urun > .alan-girdi { font-weight: 650; font-stretch: 92%; }
.taslak-fiyat { text-align: right; }
/* gramaj: dar ekranda adın altında (ad uzun kalsın), geniş ekranda adla fiyat arasında */
.taslak-urun > .taslak-miktar { grid-column: 1; grid-row: 2; min-height: 44px; padding-block: 8px; font-weight: 520; }
@media (min-width: 560px) {
  .taslak-urun { grid-template-columns: minmax(0, 1fr) 112px 104px 44px; }
  .taslak-urun > .taslak-miktar { grid-column: auto; grid-row: auto; min-height: 54px; padding-block: 12px; }
}
.taslak-kategori > .dugme-metin { justify-self: start; }
/* boy/porsiyon seçenekli ürün: ad satırı, altında girintili boy satırları */
.taslak-secenekli { display: grid; gap: 6px; }
.taslak-boy-not { color: var(--tas); font-size: 14px; font-weight: 600; text-align: right; padding-right: 4px; }
/* ad satırının sil düğmesi boy satırlarınınkiyle aynı (son) sütunda; 4 sütunlu geniş düzende fiyat sütununa düşmesin */
.taslak-secenekli-ust > .ikon-dugme { grid-column: -2; }
.taslak-boy { padding-left: 18px; }

/* Görünüm adımı: müşteri menüsünün minik önizlemesi */
.menu-onizleme { width: min(300px, 100%); border-radius: var(--r-blok); overflow: hidden; background: var(--yaprak); box-shadow: inset 0 0 0 1px var(--cizgi); }
.menu-onizleme-ust {
  display: flex; align-items: center; gap: 10px; padding: 16px 16px 40px; color: var(--gok-metin);
  background: linear-gradient(180deg, var(--gok-1), var(--gok-2) 62%, var(--gok-3));
}
.menu-onizleme-ust b { font-size: 24px; line-height: 1; font-weight: 840; font-stretch: var(--dar); overflow-wrap: anywhere; }
.menu-onizleme-logo { width: 38px; height: 38px; border-radius: 12px; object-fit: contain; padding: 3px; background: #fff; flex: none; }
.menu-onizleme-harf { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--gok-cam); font-weight: 850; font-stretch: var(--dar); font-size: 20px; }
.menu-onizleme-govde { position: relative; display: grid; gap: 8px; margin-top: -24px; padding: 18px 16px 18px; background: var(--yaprak); border-radius: 24px 24px 0 0; }
.menu-onizleme-cip { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--tema, var(--kobalt)); color: #fff; font-size: 13px; font-weight: 700; }
.menu-onizleme-satir { height: 44px; border-radius: 16px; background: var(--kum); }
.menu-onizleme-satir.kisa { width: 72%; }

.sihirbaz-govde > .hazir-ust { display: grid; justify-items: start; gap: 12px; padding-bottom: 60px; }
.hazir-ust h1 { font-size: clamp(56px, 17vw, 84px); line-height: .86; font-weight: 850; font-stretch: var(--dar); letter-spacing: -.012em; margin-top: 10px; animation: selam-gir .8s var(--egri) both; }
.hazir-ust p { max-width: 30ch; font-size: 17px; font-weight: 540; opacity: .9; }
.hazir-ikon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--yaprak); color: var(--nane); margin-top: 18px; }
.hazir-ikon .ikon { width: 34px; height: 34px; stroke-width: 2.6; }

/* Ürün seçici */
.secici { display: grid; gap: 12px; }
.kart > .secici { margin-top: 16px; }
.secici-liste { display: grid; gap: 18px; }
.secici-grup { display: grid; gap: 6px; }
.secici-baslik { font-size: 21px; line-height: 1; font-weight: 820; font-stretch: var(--dar); margin: 0 4px 2px; }
.secici-satir {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 16px 8px 12px; text-align: left;
  border: 0; border-radius: 18px; background: var(--kum); transition: box-shadow 160ms ease, background-color 160ms ease;
}
.kart .secici-satir { background: var(--yaprak); }
.secici-satir[aria-pressed="true"] { background: var(--yaprak); box-shadow: inset 0 0 0 2.5px var(--murekkep); }
.secici-kutu { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 9px; border: 2px solid var(--cizgi-koyu); color: transparent; background: #fff; }
.secici-satir[aria-pressed="true"] .secici-kutu { background: var(--murekkep); border-color: var(--murekkep); color: #fff; }
.secici-kutu .ikon { width: 16px; height: 16px; stroke-width: 2.8; }
.secici-ad { flex: 1; font-weight: 700; font-stretch: var(--yari-dar); font-size: 17px; line-height: 1.15; }
.secici-fiyat { color: var(--tas); font-size: 15px; font-weight: 650; font-stretch: var(--genis); font-variant-numeric: tabular-nums; }
.secici-sinir { color: var(--amber); font-weight: 600; }

.il-secici { display: grid; gap: 10px; margin-top: 12px; }
.il-secili { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.il-secili .ikon { color: var(--kobalt); }
.il-liste { display: flex; flex-wrap: wrap; gap: 8px; }

.renk-secici { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; margin-top: 10px; }
.renk { display: grid; justify-items: center; gap: 7px; min-height: 44px; padding: 10px 4px; border: 0; border-radius: 20px; background: transparent; font-size: 13.5px; font-weight: 620; color: var(--tas); transition: background-color 160ms ease; }
.renk[aria-checked="true"] { background: var(--yaprak); color: var(--murekkep); }
.renk-ornek { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--renk, var(--kobalt)); color: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.renk[aria-checked="true"] .renk-ornek { color: #fff; box-shadow: 0 0 0 3px var(--yaprak), 0 0 0 5.5px var(--renk, var(--kobalt)); }
.renk-ornek .ikon { stroke-width: 2.8; }

/* ---------- Hedef: büyük renkli bloklar ---------- */
.hedef-kartlari { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hedef-karti {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  width: 100%; min-height: 136px; padding: 18px 18px 17px; text-align: left;
  border: 0; border-radius: var(--r-blok); background: var(--rz); color: var(--rk);
  transition: transform 160ms var(--egri), box-shadow 200ms ease;
}
.hedef-karti:active { transform: scale(.975); }
.hedef-karti[data-hedef="dengeli"] { --rz: #D7E8F7; --rk: #154A7C; --ro: #5F98CC; }
.hedef-karti[data-hedef="kar"] { --rz: #DCEDCD; --rk: #2E5B16; --ro: #7CB459; }
.hedef-karti[data-hedef="stok"] { --rz: #FCEBB0; --rk: #6A4700; --ro: #D6A21E; }
.hedef-karti[data-hedef="hesap"] { --rz: #FBDDC8; --rk: #86330F; --ro: #DF8550; }
.hedef-karti[data-hedef="yeni"] { --rz: #F8D6E5; --rk: #872255; --ro: #D97AA6; }
.hedef-karti[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--murekkep); }
.hedef-ikon { position: absolute; z-index: -1; top: -16px; right: -14px; width: 116px; height: 116px; color: var(--ro); transition: transform 260ms var(--egri); }
.hedef-ikon .ikon { width: 100%; height: 100%; stroke-width: 1.5; }
.hedef-karti:active .hedef-ikon, .hedef-karti[aria-checked="true"] .hedef-ikon { transform: rotate(-8deg) scale(1.04); }
.hedef-metin { display: grid; gap: 5px; padding-right: 64px; }
.hedef-metin b { font-size: 29px; line-height: .94; font-weight: 840; font-stretch: var(--dar); letter-spacing: -.004em; }
.hedef-metin span { font-size: 15px; line-height: 1.35; font-weight: 560; opacity: .86; max-width: 36ch; }
.hedef-tik {
  position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--murekkep); color: #fff; opacity: 0; transform: scale(.6);
  transition: opacity 180ms ease, transform 220ms var(--egri);
}
.hedef-karti[aria-checked="true"] .hedef-tik { opacity: 1; transform: none; }
.hedef-karti[aria-checked="true"] .hedef-metin { padding-top: 40px; }
.hedef-tik .ikon { width: 18px; height: 18px; stroke-width: 3; }
@media (min-width: 600px) {
  .hedef-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hedef-karti[data-hedef="dengeli"] { grid-column: 1 / -1; }
}
.odak-listesi { display: grid; gap: 6px; margin: 12px 0 6px; }
.odak-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 6px 10px 16px; border-radius: 18px; background: var(--yaprak); }
.odak-satir.bitti { opacity: .7; }
.odak-ad { display: grid; gap: 1px; min-width: 0; }
.odak-ad b { overflow-wrap: anywhere; font-weight: 750; font-stretch: var(--yari-dar); font-size: 17px; line-height: 1.15; }
.odak-tarih { display: grid; gap: 2px; }
.odak-tarih .ince { font-size: 13px; }
.odak-tarih .alan-girdi { width: 156px; }
@media (max-width: 420px) {
  .odak-satir { grid-template-columns: minmax(0, 1fr) auto; }
  .odak-tarih { grid-column: 1; grid-row: 2; }
  .odak-satir .ikon-dugme { grid-column: 2; grid-row: 1; }
}

/* ---------- Menü ---------- */
.menu-arac { display: flex; flex-direction: column; gap: 12px; }
.menu-arac > .sayfa-baslik { order: -1; margin-bottom: -8px; }
.kayit-durumu { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; font-size: 14px; font-weight: 680; white-space: nowrap; }
.kayit-durumu:empty { display: none; }
.kayit-durumu.hata { background: var(--kirmizi-acik); color: var(--kirmizi); backdrop-filter: none; }
.menu-not { display: flex; align-items: flex-start; gap: 0; margin: 0 4px; font-size: 14px; }
.menu-ara { background: var(--kum); border-color: transparent; }
.menu-liste { display: flex; flex-direction: column; gap: 30px; }
.menu-liste > * { min-width: 0; }
.menu-liste.kilitli { opacity: .6; }
.kategori { display: flex; flex-direction: column; gap: 8px; }
.kategori-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding: 0 2px 2px 4px; }
.kategori-ad { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 30px; line-height: 1; font-weight: 840; font-stretch: var(--dar); letter-spacing: -.004em; }
.kategori-ad > span:first-child { overflow-wrap: anywhere; }
.kategori-ad .rozet { align-self: center; }
.kategori-sayi { flex: none; font-size: 15px; font-weight: 700; font-stretch: var(--genis); color: var(--tas-acik); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sira-dugmeleri { display: flex; flex: none; }
.gizli-kategori .urun-satir { opacity: .62; }
.urun-satir { display: grid; gap: 8px; padding: 8px; border-radius: var(--r-satir); background: var(--kum); }
.urun-ust { display: flex; align-items: center; gap: 12px; min-width: 0; }
.urun-gorsel { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--rz, var(--kum-koyu)); color: var(--ro, var(--tas)); }
.urun-gorsel.foto { object-fit: cover; background: var(--kum-koyu); }
.urun-gorsel .ikon { width: 28px; height: 28px; stroke-width: 1.6; }
.urun-ac { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 4px 2px; border-radius: 14px; color: var(--murekkep); text-decoration: none; }
.urun-ad { font-size: 17.5px; line-height: 1.12; font-weight: 750; font-stretch: var(--yari-dar); overflow-wrap: anywhere; }
.urun-ac:hover .urun-ad { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.urun-alt { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.urun-fiyat { font-size: 16px; font-weight: 720; font-stretch: var(--genis); letter-spacing: .005em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.urun-not { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: var(--amber-acik); color: var(--amber); font-weight: 680; font-size: 12.5px; }
.urun-satir .sira-dugmeleri .ikon-dugme { color: var(--tas-acik); }
.urun-satir.bitti .urun-ad { color: var(--tas); text-decoration: line-through; text-decoration-color: rgba(87, 83, 78, .55); }
.urun-satir.bitti .urun-gorsel { filter: grayscale(1); opacity: .55; }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 44px; padding: 0 15px; border-radius: 999px;
  border: 0; background: var(--yaprak); font-size: 14.5px; font-weight: 650; color: var(--tas); white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--egri);
}
.cip:hover { color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--cizgi-koyu); }
.cip:active { transform: scale(.95); }
.cip .ikon { width: 15px; height: 15px; }
.cip[aria-pressed="true"] { background: var(--murekkep); color: #fff; box-shadow: none; }
.cip[data-isaret="oneCikar"][aria-pressed="true"] { background: var(--kobalt); }
.cip[data-isaret="yeni"][aria-pressed="true"] { background: var(--nane); }
.cip-bitti[aria-pressed="true"] { background: var(--kirmizi); }
.cip:disabled { opacity: .5; }
.kategori > .dugme-metin {
  width: 100%; min-height: 54px; border-radius: var(--r-satir);
  box-shadow: inset 0 0 0 2px var(--cizgi); color: var(--kobalt);
}
.kategori > .dugme-metin:hover { background: var(--kobalt-acik); box-shadow: inset 0 0 0 2px var(--kobalt-orta); }
.menu-liste > .dugme-ikincil { min-height: 54px; }

/* Ürün düzenleme */
.eslesme-listesi { display: grid; gap: 6px; margin: 12px 0 6px; }
.eslesme { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px; border-radius: 18px; background: var(--yaprak); }
.eslesme.onaysiz { background: var(--amber-acik); }
.eslesme-metin { display: grid; gap: 2px; min-width: 0; flex: 1 1 180px; }
.eslesme-metin b { font-weight: 750; font-stretch: var(--yari-dar); font-size: 17px; }
.eslesme-durum { font-size: 13px; font-weight: 700; color: var(--nane); }
.eslesme.onaysiz .eslesme-durum { color: var(--amber); }
.eslesme-dugmeler { display: flex; gap: 6px; }

/* Fotoğraf seçici (foto-sec.js): önizleme kutusu + ana düğme + Değiştir/Kaldır + küçük "Bağlantıdan ekle" */
.foto-sec { display: grid; gap: 12px; margin-top: 16px; }
.foto-sec:first-child { margin-top: 0; }
.foto-sec-etiket { font-weight: 680; font-size: 15px; }
/* hemen üstünde kart başlığı varsa (sihirbaz) etiket yalnız ekran okuyucuya */
.kart-baslik + .foto-sec { margin-top: 12px; }
.kart-baslik + .foto-sec > .foto-sec-etiket { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.foto-sec-onizleme {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-satir);
  display: grid; place-items: center; background: var(--yaprak);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.foto-sec[data-bicim="logo"] .foto-sec-onizleme { width: 152px; aspect-ratio: 1 / 1; border-radius: var(--r-blok); }
.foto-sec[data-durum="bos"] .foto-sec-onizleme { cursor: pointer; box-shadow: inset 0 0 0 2px var(--cizgi-koyu); background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(28, 25, 23, .025) 14px 28px); }
.foto-sec[data-durum="bos"] .foto-sec-onizleme:hover { box-shadow: inset 0 0 0 2px var(--kobalt); }
.foto-sec[data-surukle="1"] .foto-sec-onizleme { background: var(--kobalt-acik); box-shadow: inset 0 0 0 3px var(--kobalt); }
.foto-sec-onizleme > img { width: 100%; height: 100%; object-fit: cover; }
.foto-sec[data-bicim="logo"] .foto-sec-onizleme > img { object-fit: contain; padding: 14px; }
.foto-sec-bos { display: grid; justify-items: center; gap: 8px; padding: 16px; color: var(--tas); text-align: center; font-size: 15px; font-weight: 620; }
.foto-sec-bos .ikon { width: 46px; height: 46px; stroke-width: 1.4; color: var(--tas-acik); }
.foto-sec[data-bicim="logo"] .foto-sec-bos { font-size: 13.5px; padding: 10px; }
.foto-sec[data-bicim="logo"] .foto-sec-bos .ikon { width: 36px; height: 36px; }
.foto-sec-ilerleme {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 7px;
  padding: 11px 13px; border-radius: 16px; background: rgba(28, 25, 23, .8); color: #fff;
  font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.foto-sec[data-bicim="logo"] .foto-sec-ilerleme { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; font-size: 12px; }
.foto-sec-ilerleme progress {
  appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .25); overflow: hidden; color: #fff;
}
.foto-sec-ilerleme progress::-webkit-progress-bar { background: rgba(255, 255, 255, .25); border-radius: 999px; }
.foto-sec-ilerleme progress::-webkit-progress-value { background: #fff; border-radius: 999px; transition: width 200ms ease; }
.foto-sec-ilerleme progress::-moz-progress-bar { background: #fff; border-radius: 999px; }
.foto-sec-ilerleme progress:indeterminate {
  background: linear-gradient(90deg, rgba(255, 255, 255, .25) 0 35%, #fff 35% 65%, rgba(255, 255, 255, .25) 65%) 0 0 / 300% 100%;
  animation: belirsiz 1.2s linear infinite;
}
.foto-sec-ilerleme progress:indeterminate::-webkit-progress-bar { background: transparent; }
.foto-sec-ilerleme progress:indeterminate::-moz-progress-bar { background: transparent; }
@keyframes belirsiz { from { background-position: 100% 0; } to { background-position: 0 0; } }
.foto-sec-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-sec-dugmeler > .dugme { flex: 1 1 auto; }
.foto-sec-ekle { flex-basis: 100% !important; min-height: 54px; }
.foto-sec[data-bicim="logo"] .foto-sec-ekle { flex-basis: auto !important; }
.foto-sec-kaldir { flex: 0 1 auto !important; }
.foto-sec-hata { color: var(--kirmizi); font-size: 15px; font-weight: 600; }
.foto-sec-baglanti > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  color: var(--tas); font-size: 14.5px; font-weight: 620; cursor: pointer; list-style: none;
  text-decoration: underline; text-decoration-color: var(--cizgi-koyu); text-underline-offset: 4px;
}
.foto-sec-baglanti > summary::-webkit-details-marker { display: none; }
.foto-sec-baglanti > summary:hover { color: var(--murekkep); }
.foto-sec-baglanti[open] > summary { color: var(--murekkep); text-decoration: none; }
.foto-sec-baglanti-satir { display: flex; gap: 8px; margin-top: 4px; }
.foto-sec-baglanti-satir > .alan-girdi { flex: 1; min-width: 0; }
.foto-sec-baglanti-satir > .dugme { flex: none; }

/* ---------- Özet ---------- */
.plan-karti { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 14px 14px 14px 18px; border-radius: var(--r-satir); }
.plan-karti.uyari { background: var(--amber-acik); }
.plan-sol { display: grid; gap: 1px; }
.plan-sol .ince { font-size: 13.5px; }
.plan-ad { font-weight: 760; font-size: 17px; font-stretch: 92%; }
.plan-dugme { margin: 0 !important; }
.yapilacak-listesi { display: grid; gap: 6px; }
.yapilacak {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px 14px 12px 16px;
  border-radius: 18px; background: var(--yaprak); color: var(--murekkep); text-decoration: none; font-weight: 600; line-height: 1.3;
  transition: transform 160ms var(--egri), background-color 160ms ease;
}
.yapilacak:active { transform: scale(.985); }
.yapilacak .ikon { width: 20px; height: 20px; color: var(--tas-acik); stroke-width: 2; }
.yapilacak.ana { background: var(--kobalt); color: #fff; }
.yapilacak.ana .ikon { color: #fff; }
.sayilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.sayi-kutu { display: grid; gap: 4px; align-content: end; padding: 14px 16px; border-radius: var(--r-satir); background: var(--yaprak); min-width: 0; }
.sayi-kutu:first-child { grid-column: 1 / -1; padding: 16px 18px; }
.sayi { font-size: 30px; line-height: 1; font-weight: 760; font-stretch: var(--genis); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sayi-kutu:first-child .sayi { font-size: clamp(48px, 15vw, 64px); }
.sayi-etiket { color: var(--tas); font-size: 14px; font-weight: 600; }
.cubuklar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 76px; margin-top: 12px; }
.cubuk { position: relative; height: 100%; border-radius: 10px; background: var(--yaprak); overflow: hidden; }
.cubuk-dolu { position: absolute; left: 0; right: 0; bottom: 0; height: max(4px, calc(var(--oran, 0) * 100%)); background: var(--kobalt); border-radius: 10px; }
.cubuk:last-child .cubuk-dolu { background: var(--murekkep); }
.etki { margin-top: 12px; padding: 16px; border-radius: var(--r-satir); background: var(--yaprak); display: grid; gap: 6px; }
.etki-arti { background: var(--nane-acik); }
.etki-baslik { font-weight: 780; font-size: 18px; font-stretch: 90%; line-height: 1.2; }
.etki-arti .etki-baslik { color: var(--nane); }
/* Önerilerin etkisi (etki.js): kanıt satırı ve satış sorusu — Özet kartında ve Satış asistanının satırlarında */
.etki-kanit { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.etki-kanit .ikon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--kobalt); }
.satis-sorusu { display: grid; gap: 8px; margin: 6px 0 8px; padding: 12px; border-radius: var(--r-kucuk); background: var(--kum); }
.satis-etiket { font-weight: 720; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.satis-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.satis-satir > .satis-girdi { flex: 0 1 132px; min-width: 96px; font-variant-numeric: tabular-nums; }
.satis-sorusu > .ince { font-size: 13.5px; line-height: 1.35; }
.sirali-liste { display: grid; gap: 14px; counter-reset: sira; margin-top: 4px; }
.sirali-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; counter-increment: sira; }
.sirali-liste li::before { content: counter(sira); grid-row: 1; font-size: 22px; line-height: 1; font-weight: 760; font-stretch: var(--genis); color: var(--kobalt); font-variant-numeric: tabular-nums; min-width: 1ch; }
.satir-ad { font-weight: 720; font-stretch: var(--yari-dar); font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.satir-sayi { color: var(--tas); font-size: 14px; font-weight: 650; font-stretch: 108%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.satir-cubuk { grid-column: 2 / -1; height: 8px; border-radius: 999px; background: var(--yaprak); position: relative; overflow: hidden; }
.satir-cubuk::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--oran, 0) * 100%); background: var(--kobalt-orta); border-radius: inherit; }
.sirali-liste li:first-child .satir-cubuk::after { background: var(--kobalt); }
.soru-listesi { display: grid; gap: 8px; margin: 4px 0 10px; }
.soru-listesi li { justify-self: start; max-width: 92%; padding: 11px 16px 10px; border-radius: 22px 22px 22px 7px; background: var(--yaprak); display: grid; gap: 2px; }
.soru { font-weight: 560; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.soru-listesi .ince { font-size: 13px; }

/* ---------- QR: masa kartı önizlemesi ---------- */
.qr-sahne { display: grid; justify-items: center; gap: 14px; padding: 22px 16px 16px; border-radius: var(--r-blok); background: var(--kum); }
.qr-sahne > .dugme { margin-top: 4px; }
.qr-sahne > .ince { margin-top: -6px; }
.sayfa > .dugme-satiri { margin-top: 0; }
/* sihirbazın "Menün hazır" adımındaki QR */
.qr-kart { display: grid; justify-items: center; text-align: center; }
.qr-cerceve { width: min(260px, 72vw); padding: 12px; border-radius: var(--r-satir); background: #fff; }
.qr-cerceve.orta { width: min(220px, 60vw); }
.qr-svg { width: 100%; height: auto; }
.qr-kart .qr-adres { margin-top: 12px; }
.qr-kart .dugme-satiri { justify-content: center; width: 100%; }
.qr-adres { font-weight: 680; font-size: 15px; overflow-wrap: anywhere; text-align: center; }
@keyframes kart-gir { from { opacity: 0; transform: translateY(12px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }

/* ---------- Ayarlar ---------- */
.dil-listesi { display: grid; gap: 0; margin-top: 8px; }
.dil-satir { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--cizgi-koyu); }
.dil-satir:first-child { border-top: 0; }
.dil-satir > div:first-child { display: grid; gap: 1px; }
.dil-satir b { font-size: 18px; font-weight: 760; font-stretch: 90%; }
.dil-dugmeler { display: flex; gap: 6px; align-items: center; }
.plan-satir { margin-bottom: 6px; font-size: 17px; }
.plan-satir b { font-weight: 780; }

/* Paketim (paketim.js): şu anki paket, dönüş kutusu, paket/dönem kartları, özet, fatura, onay, kart formu, ödemeler */
.paketim .kart-baslik { font-size: 22px; }
.paket-simdi { display: grid; gap: 2px; }
.paket-simdi.uyari { background: var(--amber-acik); }
.paket-simdi-ad { font-size: 30px; line-height: 1.05; font-weight: 820; font-stretch: var(--dar); }
.paket-simdi-satir { font-weight: 620; color: var(--murekkep-2); }
.paket-simdi > .ince:last-child { margin-top: 8px; font-size: 14px; }
/* otomatik yenileme kartı (PLAN.md Güncelleme 17; yalnız sunucuda açıkken görünür) */
.paket-yenileme.uyari { background: var(--amber-acik); }
.paket-yenileme .anahtar { padding: 10px 0 4px; }
.paket-yenileme > .ince { margin-top: 10px; font-size: 14.5px; }
.paket-yenileme > .serit { margin-top: 12px; }
.paket-yenileme > .hata-kutu { margin-top: 12px; }
.paket-yenileme .dugme-satiri { margin-top: 8px; }
.paket-donus:empty { display: none; }
.paket-donus { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: var(--r-satir); background: var(--kobalt-acik); color: var(--murekkep-2); }
.paket-donus .donen { color: var(--kobalt); }
.paket-donus-ikon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--yaprak); }
.paket-donus-ikon .ikon { width: 19px; height: 19px; stroke-width: 2.4; }
.paket-donus-metin { flex: 1 1 220px; display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.paket-donus-metin b { font-size: 16.5px; font-weight: 780; }
.paket-donus-eylem { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.paket-donus-odendi { background: var(--nane-acik); }
.paket-donus-odendi .paket-donus-ikon { background: var(--nane); color: #fff; }
.paket-donus-basarisiz { background: var(--kirmizi-acik); color: #8A1C12; }
.paket-donus-basarisiz .paket-donus-ikon { color: var(--kirmizi); }
.paket-donus-gecikti, .paket-donus-kontrol { background: var(--amber-acik); color: #5C3700; }
.paket-form, .paket-secim { display: flex; flex-direction: column; gap: 14px; }
.rozet-nane { background: var(--nane); }
/* .secenek-metin span (0,1,1) rozetin beyaz yazısını ve boyutunu ezmesin: "2 ay bedava" koyu yeşil üstünde okunur kalsın */
.secenek-metin b .rozet { margin-left: 8px; vertical-align: 3px; color: #fff; font-size: 12.5px; }
.paket-ozet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.paket-ozet > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; background: var(--yaprak); min-width: 0; }
.paket-ozet dt { color: var(--tas); font-size: 13.5px; font-weight: 650; }
.paket-ozet dd { margin: 0; color: var(--tas); font-size: 14px; }
.paket-ozet dd b { display: block; color: var(--murekkep); font-size: 22px; line-height: 1.15; font-weight: 780; font-stretch: 96%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.paket-ozet-not { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--murekkep-2); }
.paket-ozet ~ .ince { margin-top: 10px; font-size: 14px; }
.paket-ozet ~ .serit { margin-top: 12px; }
.paket-tip-etiket { margin: 18px 0 8px; }
.kart .paket-tip-etiket + .secim-grubu + div > .alan:first-child { margin-top: 16px; }
.paket-kvkk { margin-top: 12px; }
.paket-kvkk a, .onay-satir a { color: var(--kobalt-koyu); font-weight: 650; }
.kart > .hata-kutu:not([hidden]) { margin-top: 14px; }
.hata-kutu a { color: inherit; font-weight: 750; }
.paket-gonder { margin-top: 16px; }
.paket-guven { margin-top: 10px; font-size: 14px; }
.paket-odeme > .ince { margin-bottom: 12px; }
.odeme-cerceve { display: block; width: 100%; height: 640px; border: 0; border-radius: 18px; background: #fff; }
.paket-odeme > .dugme-metin { margin-top: 10px; }
.paket-sahte { display: grid; gap: 10px; justify-items: start; }
.paket-sahte code { padding: 8px 10px; border-radius: 10px; background: var(--yaprak); font-size: 14px; overflow-wrap: anywhere; }
.paket-gecmis { display: grid; margin: 4px 0 10px; }
.paket-gecmis li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--cizgi-koyu); }
.paket-gecmis li:first-child { border-top: 0; }
.paket-gecmis-metin { display: grid; gap: 1px; min-width: 0; }
.paket-gecmis-metin b { font-weight: 740; }
.paket-gecmis-metin .ince { font-size: 13.5px; overflow-wrap: anywhere; }
.paket-gecmis-sag { display: grid; justify-items: end; gap: 3px; flex: none; font-variant-numeric: tabular-nums; }
.paket-gecmis-durum { padding: 1px 9px; border-radius: 999px; background: var(--yaprak); color: var(--tas); font-size: 12.5px; font-weight: 700; }
.paket-gecmis-durum.odendi { background: var(--nane-acik); color: var(--nane); }
.paket-gecmis-durum.tutar_uyusmuyor { background: var(--amber-acik); color: var(--amber); }
.serit-kapat { width: 40px; height: 40px; margin: -6px -8px -6px 0; color: inherit; }
#ayar-hesap > .ince + .ince { margin-top: 4px; }
#ayar-hesap > .ince b { color: var(--murekkep); font-weight: 680; overflow-wrap: anywhere; }
/* Hesabı sil (kart ve pencere) */
.silme-bolum h3 { font-size: 15.5px; font-weight: 760; color: var(--murekkep); }
.silme-bolum > p { margin-top: 4px; color: var(--murekkep-2); }
.silme-liste { display: grid; gap: 4px; margin-top: 6px; padding-left: 1.2em; list-style: disc; color: var(--murekkep-2); }
.silme-liste li::marker { color: var(--kirmizi); }

/* ---------- Yönetici ---------- */
.yonetici-arac { display: grid; gap: 6px; }
.yonetici-arac .ince { padding: 0 8px; font-variant-numeric: tabular-nums; }
.yonetici-liste { display: grid; gap: 10px; }
.yonetici-satir { background: var(--kum); border-radius: var(--r-blok); padding: 18px; }
.yonetici-satir.askida { background: var(--kirmizi-acik); }
.yonetici-satir.dikkat { background: var(--amber-acik); }
.yonetici-satir.silindi { background: var(--yaprak); color: var(--tas); }
.yonetici-bolum { display: grid; gap: 14px; }
.yonetici-ust { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.yonetici-ust b { font-size: 22px; line-height: 1; font-weight: 820; font-stretch: var(--dar); }
.yonetici-ust .ince { overflow-wrap: anywhere; margin-top: 4px; }
.yonetici-bilgi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.yonetici-bilgi div { display: grid; gap: 1px; padding: 10px 12px; border-radius: 16px; background: var(--yaprak); min-width: 0; }
.yonetici-satir.askida .yonetici-bilgi div { background: rgba(255, 255, 255, .7); }
.yonetici-bilgi dt { color: var(--tas); font-size: 13px; font-weight: 600; }
.yonetici-bilgi dd { margin: 0; font-weight: 680; font-size: 14.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.yonetici-satir .dugme-satiri { margin-top: 12px; gap: 6px; }
/* Yönetici › Pano: üç sayı kartı, tablolar (yonetici-pano.js) */
.pano-arac { display: grid; gap: 6px; }
.pano-arac .ince { padding: 0 8px; }
.pano-kartlar { display: grid; gap: 10px; }
.pano-kart { display: grid; gap: 4px; align-content: start; background: var(--kum); border-radius: var(--r-blok); padding: 18px; }
.pano-kart-baslik { color: var(--tas); font-size: 14px; font-weight: 650; }
.pano-deger { font-size: 30px; line-height: 1.05; font-weight: 820; font-stretch: var(--dar); font-variant-numeric: tabular-nums; }
.pano-durumlar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pano-durumlar li { padding: 5px 10px; border-radius: 999px; background: var(--yaprak); font-size: 13.5px; color: var(--tas); }
.pano-durumlar b { color: var(--murekkep); font-variant-numeric: tabular-nums; }
.pano-izgara { display: grid; gap: 14px; }
.pano-bolum { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pano-tablo-kap { overflow-x: auto; }
.pano-tablo { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pano-tablo th { color: var(--tas); font-size: 13px; font-weight: 650; text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--cizgi); }
.pano-tablo td { padding: 9px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: top; overflow-wrap: anywhere; }
.pano-tablo .sayi { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pano-tablo tr.secili td { background: var(--kum); font-weight: 680; }
.pano-tablo a { color: var(--kobalt); text-decoration: none; }
.pano-sayfalama { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pano-sayfalama .ince { font-variant-numeric: tabular-nums; }

/* ---------- Baskı alanı (masa kartı düzenleri duzen.css'te) ---------- */
.yazdir-alani { display: none; }
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; padding: 0 !important; }
  body > *:not(.yazdir-alani) { display: none !important; }
  .yazdir-alani { display: block; }
}

/* ---------- Geniş ekran ---------- */
@media (min-width: 700px) {
  .sayfa { --kenar: 24px; }
  .sihirbaz { --kenar: 24px; }
  .ust-ic { padding: 0 24px; }
  .kart { padding: 24px 22px; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .donen { animation: don 2.4s linear infinite !important; }
  .bekleme-ikon, .bekle-ikon, .iskelet { animation: none !important; }
}

/* gökyüzünün üstünde odak halkası gökyüzü yazı renginde (gece de görünür) */
:is(.ust-cubuk, .sihirbaz-ust, .giris-gok, .geri-baslik) :focus-visible { outline-color: currentColor; }

/* ---------- Yapay zeka: satış asistanı, fotoğraf stüdyosu, haftalık öneriler ---------- */
.satis-asistani .alan-etiket { display: block; margin: 14px 0 6px; }
.satis-asistani textarea.satis-metin { min-height: 112px; font-size: 17px; }
.satis-cipler { margin: 10px 0 14px; }
.satis-cipler .cip { white-space: normal; text-align: start; line-height: 1.2; padding-block: 8px; }
.satis-sonuc:empty { display: none; }
.satis-sonuc { margin-top: 14px; }
.plan-onizleme { background: var(--yaprak); border-radius: var(--r-satir); padding: 18px 16px 16px; }
.plan-baslik { font-size: 22px; line-height: 1; font-weight: 820; font-stretch: var(--dar); margin-bottom: 8px; }
.plan-ozet { font-size: 16px; line-height: 1.4; color: var(--murekkep-2); }
.plan-satirlari { display: grid; gap: 6px; margin: 12px 0 8px; padding: 0; list-style: none; }
.plan-satir {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 56px; padding: 8px 4px 8px 10px; border-radius: var(--r-kucuk); background: var(--kum);
}
.plan-uygulanan .plan-satir { background: var(--yaprak); grid-template-columns: 36px minmax(0, 1fr); }
.plan-satir-ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kobalt-acik); color: var(--kobalt); }
.plan-satir-ikon .ikon { width: 19px; height: 19px; }
.plan-satir-metin { display: grid; gap: 2px; min-width: 0; }
.plan-satir-metin b { font-weight: 720; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.plan-satir-metin.bitti { opacity: .7; }
.plan-satir-metin .ince { font-size: 13.5px; }
.plan-cumle { font-size: 15px; font-style: italic; color: var(--kobalt-koyu); overflow-wrap: anywhere; }
/* önizlemede cümleye dokununca düzenlenir: metin gibi görünen, 44 px dokunma alanlı düğme */
.plan-cumle-duzenle {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; margin-block: -8px; margin-inline-start: -6px; padding: 8px 6px;
  border: 0; border-radius: var(--r-kucuk); background: none; font: inherit; font-size: 15px; font-style: italic; text-align: start; cursor: pointer;
}
.plan-cumle-duzenle .ikon { flex: none; width: 16px; height: 16px; opacity: .75; }
@media (hover: hover) { .plan-cumle-duzenle:hover { background: var(--kobalt-acik); } }
.plan-cumle-alan { gap: 8px; }
/* düzenlerken alan satırın tamamını alır (ikon gizlenir, çarpı yanda kalır) */
.plan-satir:has(> .plan-cumle-alan) { grid-template-columns: minmax(0, 1fr) auto; }
.plan-satir:has(> .plan-cumle-alan) > .plan-satir-ikon { display: none; }
.plan-cumle-alan .alan-etiket { margin: 0; font-size: 15px; }
.plan-cumle-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.plan-cumle-dugmeler .dugme { flex: 1 1 auto; min-width: 0; }
.plan-not { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--r-kucuk); background: var(--amber-acik); color: #5C3700; font-size: 15px; line-height: 1.4; }
.plan-not .ikon { margin-top: 1px; }
.plan-onizleme .dugme-satiri { margin-top: 12px; }
.plan-uygulanan .plan-ozet { margin-bottom: 4px; }
.plan-uygulanan .plan-yazdigin { margin: 6px 0 4px; overflow-wrap: anywhere; }
.plan-uygulanan > .dugme { margin-top: 6px; }
.hedef-genel-baslik { margin-top: 26px; margin-bottom: 4px; font-size: 25px; }
.hedef-genel-aciklama { margin-bottom: 12px; }
.odak-ad .plan-cumle { font-size: 14px; }

.yzfoto { display: grid; gap: 8px; margin-top: 12px; }
.yzfoto-dugme { width: 100%; }
.yzfoto-not { font-size: 14px; }
.yzfoto-pencere .yzfoto-onizleme { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-satir); background: var(--kum); }
.yzfoto-pencere .yzfoto-not { margin-top: 10px; }
.yzfoto-toplu .dugme-satiri { margin-top: 10px; }
.yzfoto-toplu > .ince { margin-top: 8px; font-size: 14px; }

dialog.bekleme-katman { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; }
dialog.bekleme-katman::backdrop { background: transparent; }

.tavsiye {
  counter-increment: tavsiye; display: grid; gap: 10px; padding: 14px 14px 14px 52px; position: relative;
  border-radius: var(--r-satir); background: var(--yaprak);
}
.tavsiye::before {
  content: counter(tavsiye); position: absolute; left: 14px; top: 13px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--kobalt-acik); color: var(--kobalt);
  font-weight: 800; font-size: 14px; font-stretch: var(--genis);
}
.tavsiye > .dugme { justify-self: start; }
.tavsiye.yapildi { background: var(--nane-acik); }
.tavsiye.yapildi::before { background: var(--nane); color: #fff; }