/* ============================================================
   E-PAYLAŞIM · ASKIDA MUTLULUK
   Ortak stil dosyası — tüm sayfalar bunu kullanır.
   ============================================================ */

/* ---- Açık tema · mor hâkim "kral" paleti + lambader sarısı ----
   Renk yalnızca burada tanımlanır; bileşenler token okur. Hâkim renk mordur:
   ergüvandan menekşeye üç ton. Tek sıcak vurgu lambader sarısıdır — abajur
   ışığı gibi açık ve yumuşak. Birincil renk rolünün adı tarihsel olarak
   --green; kral morunu taşıyor, ad tüm dosyalarda kullanıldığı için korundu. */
:root{
  /* Etiket harf aralığı: marka kilidi, eyebrow ve düğmeler aynı ritmi kullanır. */
  --iz:.14em;
  --ground:#F8F4FC;
  --surface:#FFFFFF;
  --surface-2:#F1E9FA;
  --line:#E4D8F5;
  --line-strong:#CFBCEA;

  --ink:#241338;
  --ink-muted:#61507E;
  --ink-faint:#74638F;

  --green:#4A1D8C;
  --green-deep:#33115F;
  --green-soft:#EFE6FB;
  /* --green zemin ÜZERİNE gelen metin. Tema ile döner; "koyu üstüne koyu" olamaz. */
  --on-green:#FFFBEE;

  /* lambader sarısı — --brass adı korundu, ton açıldı */
  --brass:#EFCB63;
  --brass-deep:#85620E;
  --brass-soft:#FDF4D8;

  /* mor üçlüsü + lambader */
  --erguvan:#3A1268;   --erguvan-soft:#EBE2F8;
  --mor:#6D2FBF;       --mor-soft:#F1E8FC;
  --menekse:#8B4DE0;   --menekse-soft:#F4ECFD;
  --lamba:#EFCB63;     --lamba-acik:#FBE9A8; --lamba-koyu:#85620E;
  --lamba-soft:#FDF4D8;

  /* durum renkleri anlam taşır, mora çevrilmez; yalnızca palete yakınlaştırıldı */
  --ok:#1C6B4E;
  --ok-parlak:#2C8F69;
  /* --ok zemini ÜZERİNE gelen metin; tema ile döner */
  --on-ok:#F2FBF7;
  --ok-soft:#E0F1E9;
  --warn:#8A5F0D;
  --warn-soft:#FBF0D8;
  --bad:#A21548;
  --bad-soft:#FBE4EC;
  --info:#4A1D8C;
  --info-soft:#EFE6FB;

  --band:#2A0F52;
  --band-ink:#FBF3E2;
  --band-muted:#C9B4E8;
  --band-line:#4A2385;

  /* şölen geçişleri — hepsi mor ailesinde, tek sıcak nokta lambader */
  --gecis-kraliyet:linear-gradient(125deg,#1F0A3C 0%,#2E1052 30%,#43197A 64%,#5A25A6 100%);
  --gecis-mor:linear-gradient(135deg,#6D2FBF 0%,#3A1268 100%);
  --gecis-lamba:linear-gradient(135deg,#FBE9A8 0%,#EFCB63 55%,#D9AE3E 100%);
  --gecis-hat:linear-gradient(90deg,#8B4DE0 0%,#6D2FBF 26%,#3A1268 50%,#C9A23A 76%,#FBE9A8 100%);

  --shadow:0 1px 2px rgba(42,15,82,.07), 0 8px 24px -14px rgba(42,15,82,.28);
  --shadow-lift:0 2px 6px rgba(42,15,82,.09), 0 22px 48px -22px rgba(42,15,82,.36);

  --aski-maske:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 70 34%27%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M35 15.5V12.6a3.1 3.1 0 1 1 3.1-3.1%27/%3E%3Cpath d=%27M35 15.5 6.4 31.2h57.2L35 15.5Z%27/%3E%3C/g%3E%3C/svg%3E");
  --r-s:10px; --r-m:16px; --r-l:20px;

  /* Yazı sistemi: tek aile, Source Sans 3 (Trendyol ile aynı). Başlık 700,
     arayüz 600, gövde 400. Tüm site yalnızca bu iki token'ı okur. */
  --font-baslik:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  --font-arayuz:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  --maxw:1140px;
}

/* Aydınlık mod DEĞİŞMEZ KURAL: masaüstü, tablet ve telefonda, cihaz ya da
   tarayıcı koyu temada olsa bile site her zaman aydınlık görünür. Koyu tema
   değişkenleri kaldırıldı; "only light" tarayıcının otomatik koyulaştırmasını
   da (Chrome/Android) kapatır. */
:root{color-scheme:only light}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  /* şölen zemini: fildişi kâğıdın üstünde üç mücevherden gelen çok hafif hâle */
  background:radial-gradient(880px 520px at 10% -6%, transparent, transparent 62%),
    radial-gradient(820px 480px at 92% 3%, transparent, transparent 64%),
    radial-gradient(760px 520px at 48% 104%, transparent, transparent 62%),
    var(--ground); background:
    radial-gradient(880px 520px at 10% -6%, color-mix(in srgb,var(--mor) 13%,transparent), transparent 62%),
    radial-gradient(820px 480px at 92% 3%, color-mix(in srgb,var(--menekse) 13%,transparent), transparent 64%),
    radial-gradient(760px 520px at 48% 104%, color-mix(in srgb,var(--lamba) 14%,transparent), transparent 62%),
    var(--ground);
  background-attachment:fixed;
  font-family:var(--font-arayuz);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; font-feature-settings:"kern","liga","calt";
  /* Sayfa ekrana tam otursun: içerik kısa olsa da altbilgi ekranın altına
     yaslanır, altında boş zemin kalmaz. */
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
}
body > main{flex:1 0 auto}
h1,h2,h3,h4{
  font-family:var(--font-baslik);
  color:var(--green); margin:0; letter-spacing:-.01em; line-height:1.15; text-wrap:balance;
  font-weight:600;
}
h1{font-weight:700; letter-spacing:-.015em}
p{margin:0; text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
.tabular{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* hidden özniteliği her zaman kazanır: .field/.btn/.notice gibi display kuralları
   tarayıcı varsayılanı [hidden]{display:none} kuralını eziyordu. */
[hidden]{display:none !important}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
.section{padding-block:clamp(56px,8vw,104px)}
.section-tight{padding-block:clamp(36px,5vw,64px)}
.eyebrow{font-family:var(--font-arayuz); font-size:11.5px; font-weight:600; letter-spacing:var(--iz); text-transform:uppercase; color:var(--brass-deep)}
.lede{font-size:clamp(16.5px,1.5vw,19px); color:var(--ink-muted); max-width:62ch}
.h-page{font-size:clamp(30px,4vw,46px); font-weight:700}
.h-sec{font-size:clamp(25px,3.2vw,36px); font-weight:600}
.muted{color:var(--ink-muted)}
.small{font-size:14px}

/* ---------------- üst bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:60;
  background:var(--ground);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:background-color .25s ease, border-color .2s ease;
}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:18px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
/* Marka işareti: mor geçişli kare, lambader sarısı askı (assets/logo/). */
/* Marka: zeminsiz mor askı (assets/logo/logo-yatay.svg ile aynı model),
   yanında küçük harf "e-paylaşım" ve altında ASKIDA MUTLULUK. */
.brand-mark{width:40px; height:40px; border-radius:0; background:none; display:grid; place-items:center; flex:none}
.brand-mark svg{width:40px; height:40px; fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.band .brand-mark svg{stroke:var(--band-ink)}
/* Marka kilidi: sözcük işareti | ürün tanımı. Tanım, ince bir ayraçla
   sağda iki satır durur; sözcük işaretiyle aynı yükseklikte kalır. */
.brand-name{
  display:flex; flex-direction:row; align-items:center; gap:12px; line-height:1;
  font-family:var(--font-baslik); font-weight:700; font-size:21px; color:var(--green); letter-spacing:-.03em;
  text-transform:none;
}
.brand-name small{
  padding-left:12px; border-left:1px solid var(--line-strong);
  font-family:var(--font-arayuz); font-size:8.5px; font-weight:600; letter-spacing:var(--iz); line-height:1.5;
  text-transform:uppercase; color:var(--ink-muted); white-space:nowrap;
}
.band .brand-name{color:var(--band-ink)}
.band .brand-name small{color:var(--band-muted); border-color:rgba(255,255,255,.22)}
@media (max-width:420px){.brand-name small{display:none}}
.topnav{display:flex; gap:24px}
.topnav a{text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-muted); transition:color .15s ease}
.topnav a:hover{color:var(--green)}
.topnav a.active{color:var(--green); font-weight:600}
.topacts{display:flex; align-items:center; gap:10px}
.navtoggle{display:none; width:40px; height:40px; border-radius:var(--r-s); border:1px solid var(--line-strong); background:transparent; cursor:pointer; color:var(--green)}
.navtoggle svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8}
@media (max-width:940px){
  .topnav,.topacts .btn{display:none}
  .navtoggle{display:grid; place-items:center}
  .topbar.open .topnav{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; left:0; right:0; top:70px;
    background:var(--surface); border-bottom:1px solid var(--line); padding:12px 22px 18px;
  }
  .topbar.open .topnav a{padding:11px 0; font-size:16px}
  .topbar.open .topacts .btn{display:inline-flex}
  .topbar.open .topacts{position:absolute; left:22px; right:22px; top:calc(70px + 250px); gap:8px}
}


/* ---------------- butonlar ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:var(--r-s);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
/* Birincil düğme marka moru: logodaki sözcük işaretiyle aynı renk (--green).
   Sarı (lambader) vurgu rengi olarak kalır — ilerleme çubuğu, rozet, ışık;
   düğme dolgusu olarak kullanılmaz. .btn-brass eski ad; aynı görünümü alır. */
/* Düğme yazısı: cümle düzeninde, Source Sans 3 600. Büyük harf yalnızca
   küçük etiketlerde (eyebrow) kullanılır. */
.btn-primary, .btn-brass, .btn-ghost{font-family:var(--font-arayuz); font-size:14.5px; font-weight:600; letter-spacing:0; text-transform:none}
.btn-lg.btn-primary, .btn-lg.btn-brass, .btn-lg.btn-ghost{font-size:15.5px; padding:14px 26px}
.btn-primary, .btn-brass{background:var(--btn-bg,var(--green)); color:var(--btn-ink,var(--on-green)); border-color:transparent}
.btn-primary:hover:not([disabled]), .btn-brass:hover:not([disabled]){background:var(--btn-bg-hover,var(--green-deep)); color:var(--btn-ink,var(--on-green))}
.btn-ghost{border-color:var(--line-strong); color:var(--green); background:transparent}
.btn-ghost:hover:not([disabled]){border-color:var(--green); background:var(--green-soft)}
/* Koyu zeminde (band, kapak, kapanış, kimlik ekranları) birincil düğme
   krem dolgu + mor yazı: mor üstüne mor kaybolurdu. */
.band, .giris, .kapanis, .an, .kbas, .auth-side{--btn-bg:#fff; --btn-bg-hover:var(--band-ink); --btn-ink:#33115F}
.btn-quiet{color:var(--ink-muted); background:transparent}
.btn-quiet:hover{color:var(--green)}
.btn-lg{padding:14px 26px; font-size:15.5px}
.btn-block{width:100%}

/* ---------------- kart / yüzey ---------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l)}
.card-lift{box-shadow:var(--shadow-lift)}
.card-pad{padding:clamp(20px,3vw,30px)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; background:var(--surface-2); border-bottom:1px solid var(--line); border-radius:var(--r-l) var(--r-l) 0 0}
.divider{height:1px; background:var(--line); border:0; margin:0}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.01em}
.badge-ok{background:var(--ok-soft); color:var(--ok)}
.badge-warn{background:var(--warn-soft); color:var(--warn)}
.badge-bad{background:var(--bad-soft); color:var(--bad)}
.badge-info{background:var(--info-soft); color:var(--info)}
.badge-neutral{background:var(--surface-2); color:var(--ink-muted)}
.badge-brass{background:var(--brass-soft); color:var(--brass-deep)}
.code{font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--ink-muted); font-variant-numeric:tabular-nums}

/* ---------------- form ---------------- */
.field{display:block; margin-bottom:18px}
.label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:7px}
.label .req{color:var(--bad); margin-left:2px}
.input, .select, .textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:11px 13px; transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{min-height:96px; resize:vertical; line-height:1.6}
.select{appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--bad); box-shadow:0 0 0 3px transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 12%, transparent)}
.input[readonly]{background:var(--surface-2); color:var(--ink-muted); cursor:not-allowed}
.hint{margin-top:6px; font-size:12.5px; color:var(--ink-muted); line-height:1.55}
.err{margin-top:6px; font-size:12.5px; color:var(--bad); font-weight:500; min-height:1px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
/* Tarih + saat: aynı etiketin altında yan yana iki kutu. */
.tarih-saat{display:grid; grid-template-columns:1.4fr 1fr; gap:10px}
.tarih-saat .input{min-width:0}
@media (max-width:420px){.tarih-saat{grid-template-columns:1fr}}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
/* display:block şart — inline span'de mutlak konumlandırma satır kutusuna
   bağlanır ve "TL" eki alanın dışına kaçar. */
.input-money{position:relative; display:block}
.input-money .input{padding-right:44px; font-variant-numeric:tabular-nums}
.input-money .suffix{position:absolute; right:13px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--ink-faint); pointer-events:none}

.check{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.6; color:var(--ink-muted); cursor:pointer; margin-bottom:11px}
.check input{margin-top:3px; width:16px; height:16px; accent-color:var(--green); flex:none; cursor:pointer}
.check b{color:var(--ink); font-weight:600}

.notice{display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border-radius:var(--r-m); font-size:13.5px; line-height:1.6}
.notice svg{width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke-width:1.8}
.notice-info{background:var(--info-soft); color:var(--info)} .notice-info svg{stroke:var(--info)}
.notice-ok{background:var(--ok-soft); color:var(--ok)} .notice-ok svg{stroke:var(--ok)}
.notice-warn{background:var(--warn-soft); color:var(--warn)} .notice-warn svg{stroke:var(--warn)}
.notice-bad{background:var(--bad-soft); color:var(--bad)} .notice-bad svg{stroke:var(--bad)}

/* ---------------- tutar / ilerleme ---------------- */
.amount-xl{font-family:var(--font-baslik); font-weight:700; letter-spacing:-.03em; font-size:clamp(30px,4vw,40px); color:var(--green); line-height:1; font-variant-numeric:tabular-nums; display:block}
.amount-lg{font-family:var(--font-baslik); font-weight:600; letter-spacing:-.02em; font-size:24px; color:var(--green); line-height:1.1; font-variant-numeric:tabular-nums; display:block}
.amount-md{font-family:var(--font-baslik); font-weight:600; font-size:19px; color:var(--green); font-variant-numeric:tabular-nums; display:block}
.amount-ok{color:var(--ok)} .amount-brass{color:var(--brass-deep)}
.amount-label{font-size:12.5px; color:var(--ink-muted)}

.bar{height:9px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line)}
.bar span{display:block; height:100%; border-radius:999px; background:var(--brass); transition:width .55s cubic-bezier(.2,.8,.25,1)}
.bar.done span{background:var(--ok)}
.bar-note{display:flex; justify-content:space-between; gap:14px; margin-top:9px; font-size:12.5px; color:var(--ink-muted)}
.bar-note b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}

.chips{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.chip{
  font:inherit; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  padding:11px 4px; border-radius:var(--r-s); cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.chip:hover:not([disabled]){border-color:var(--brass)}
.chip[disabled]{opacity:.4; cursor:not-allowed}
.chip[aria-pressed="true"]{background:var(--green); color:var(--on-green); border-color:var(--green)}
@media (max-width:560px){.chips{grid-template-columns:repeat(2,1fr)}}

/* ---------------- adım göstergesi (wizard) ---------------- */
.stepbar{display:flex; gap:0; margin-bottom:30px; overflow-x:auto; padding-bottom:4px}
.stepbar-item{display:flex; align-items:center; gap:10px; flex:none; padding-right:14px}
.stepbar-item + .stepbar-item::before{content:""; width:26px; height:1px; background:var(--line-strong); margin-right:14px}
.stepbar-dot{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-faint);
}
.stepbar-label{font-size:13px; color:var(--ink-faint); white-space:nowrap}
.stepbar-item.active .stepbar-dot{background:var(--green); color:var(--on-green); border-color:transparent}
.stepbar-item.active .stepbar-label{color:var(--green); font-weight:600}
.stepbar-item.done .stepbar-dot{background:var(--ok-soft); color:var(--ok); border-color:transparent; border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.stepbar-item.done .stepbar-label{color:var(--ink-muted)}

.pane{display:none}
.pane.active{display:block; animation:fadeup .4s cubic-bezier(.2,.8,.25,1) both}
@keyframes fadeup{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------------- özet listesi ---------------- */
/* ---------------- üyelik kartları ----------------
   Fiyat ekranda aranmaz, görünür. Üç sayfada birden kullanılır;
   bu yüzden sayfa içinde değil burada tanımlıdır. */
.uy-kartlar{display:grid; gap:14px; margin-top:22px}
.uy-kartlar.iki{grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.uy-kartlar.iki{grid-template-columns:1fr}}

.uy-kart{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(22px,2.6vw,30px);
}
/* Öne çıkan kart renkle değil çerçeveyle ayrılır; tema değişince de
   ayakta kalır. Kenarlık kalınlaşınca iç boşluk aynı kalsın diye
   dolgu bir piksel azaltılır — kartlar aynı hizada durur. */
.uy-kart.one{border:2px solid var(--brass); padding:calc(clamp(22px,2.6vw,30px) - 1px)}
.uy-kart .rozet{
  position:absolute; top:-10px; left:clamp(22px,2.6vw,30px);
  padding:3px 10px; border-radius:999px;
  background:var(--brass); color:var(--brass-yazi,#33115F);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.uy-kart .kim{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass-deep);
}
.uy-kart h3{
  margin:9px 0 0; font-family:var(--font-baslik);
  font-size:19px; font-weight:600; line-height:1.25; color:var(--ink);
}
.uy-kart .tutar{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:14px;
}
.uy-kart .tutar b{
  font-family:var(--font-baslik); font-weight:700;
  font-size:clamp(26px,2.8vw,34px); line-height:1.05; letter-spacing:-.03em;
  color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.uy-kart .tutar span{font-size:14px; font-weight:500; color:var(--ink-muted)}
.uy-kart .altbilgi{margin:9px 0 0; font-size:13px; line-height:1.6; color:var(--ink-muted)}

.uy-kart ul{
  list-style:none; margin:18px 0 0; padding:18px 0 0;
  border-top:1px solid var(--line); display:grid; gap:11px;
}
.uy-kart li{
  position:relative; padding-left:26px;
  font-size:13.5px; line-height:1.6; color:var(--ink-muted);
}
.uy-kart li b{color:var(--ink); font-weight:600}
.uy-kart li::before{
  content:""; position:absolute; left:4px; top:7px; width:8px; height:8px;
  border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px var(--brass-soft);
}
.uy-kart .btn{width:100%}
/* Eylem düğmesi kartın en altına yaslanır: yan yana duran iki kartın
   maddeleri eşit sayıda olmayabilir, düğmeler yine aynı hizada dursun.
   Aradaki en küçük boşluk listenin alt marjıyla verilir; buraya sabit bir
   margin-top yazmak margin-top:auto'yu ezer ve hizalamayı bozar. */
.uy-kart ul{margin-bottom:22px}
.uy-kart .btn{margin-top:auto}

.sum{list-style:none; margin:0; padding:0}
.sum li{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-muted)}
.sum li:last-child{border-bottom:0}
.sum li b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
/* düz metin değerler: tabular rakam kipi tireyi geniş çiziyor (E-Paylaşım → E - Paylaşım) */
.sum li b.duz{font-variant-numeric:normal}

/* ---------------- tablo ---------------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface)}
table{width:100%; min-width:520px; border-collapse:collapse; font-size:14.5px}
/* çok sütunlu tablolar sıkışmak yerine kendi içinde kaysın */
.tablewrap.genis table{min-width:720px}
th{
  text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink)}
tr:last-child td{border-bottom:0}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------------- şerit / grid ---------------- */
.band{background:var(--band); color:var(--band-ink)}
.band h1,.band h2,.band h3{color:var(--band-ink)}
.band .eyebrow{color:var(--brass)}
.band .lede,.band .muted{color:var(--band-muted)}
/* koyu bantta ghost düğme okunur kalsın */
.band .btn-ghost{border-color:transparent; border-color:color-mix(in srgb,var(--band-ink) 34%,transparent); color:var(--band-ink)}
.band .btn-ghost:hover{border-color:var(--brass); color:var(--band-ink)}
.band strong,.band .band-vurgu{color:var(--band-ink)}
/* koyu bantta kart ve özet listesi: tekrarlanan inline stillerin karşılığı */
.band .card{background:transparent; background:color-mix(in srgb,var(--band-ink) 5%,transparent); border-color:var(--band-line); box-shadow:none}
.band .sum li{color:var(--band-muted); border-color:var(--band-line)}
.band .sum li b{color:var(--band-ink)}
.band .kutu{padding:16px; border-radius:var(--r-m); background:transparent; background:color-mix(in srgb,var(--band-ink) 7%,transparent)}
/* koyu bantta uyarı kutusu: açık zemin yerine bandın kendi tonu */
.band .notice-warn{background:transparent; background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--band-ink)}
.band .notice-warn svg{stroke:var(--brass)}

/* numaralı adım listesi */
.adimlar{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.adimlar li{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start}
.adimlar .no{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--brass); color:var(--band); font-weight:700; font-size:13px;
}
.adimlar .no.son{background:#6D2FBF}
.adimlar p{margin-top:4px; color:var(--ink-muted)}
.band .adimlar b{color:var(--band-ink)}
.band .adimlar p{color:var(--band-muted)}

/* soru–cevap listesi: solda ince çizgi, başlık + açıklama */
.qa{display:grid; gap:24px; margin:0}
.qa>div{padding-left:16px; border-left:2px solid transparent; border-left:2px solid color-mix(in srgb,var(--green) 45%,transparent)}
.qa dt{font-family:var(--font-baslik); font-weight:600; color:var(--ink)}
.qa dd{margin:8px 0 0; font-size:15px; color:var(--ink-muted)}
.band .qa>div{border-left:2px solid var(--lamba-acik); padding-left:16px}
.band .qa dt{color:var(--band-ink); font-weight:700}
.band .qa dd{color:var(--band-muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,54px); align-items:start}
@media (max-width:900px){.grid2,.grid3,.grid-split{grid-template-columns:1fr}}

/* ---------------- vektör illüstrasyonlar ---------------- */
.cizim{width:100%; height:100%; display:block}
.cizim .cizgi{fill:none; stroke:var(--brass-deep); stroke:color-mix(in srgb,var(--brass-deep) 55%,transparent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.cizim .dolu{fill:var(--brass); stroke:none}
.cizim .ikincil{fill:transparent; fill:color-mix(in srgb,var(--brass) 26%,transparent); stroke:none}
.cizim .beyaz{fill:var(--surface); stroke:none}

.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:24px 22px}
.tile .ico{width:38px; height:38px; border-radius:10px; background:var(--brass-soft); display:grid; place-items:center; margin-bottom:15px}
.tile .ico svg{width:19px; height:19px; stroke:var(--brass-deep); fill:none; stroke-width:1.8}
.tile.ok .ico{background:var(--ok-soft)} .tile.ok .ico svg{stroke:var(--ok)}
.tile h3{font-size:17px; font-weight:600}
.tile p{margin-top:7px; font-size:14.5px; color:var(--ink-muted)}

/* ---------------- sayfa başlığı ---------------- */
.pagehead{padding-block:clamp(38px,5vw,62px) clamp(24px,3vw,36px); position:relative; overflow:hidden}
/* .pagehead::before parıltısı kaldırıldı — düz zemin. */
.pagehead .wrap{position:relative}
.crumb{font-size:13px; color:var(--ink-faint); margin-bottom:14px}
/* Sayfa izi (site.js kurar): açık zeminde gri, koyu bantta açık renk. */
.sayfa-izi{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-faint); margin-bottom:14px}
.sayfa-izi a{color:var(--ink-muted); text-decoration:none; border-bottom:1px solid transparent}
.sayfa-izi a:hover{color:var(--green); border-bottom-color:var(--brass)}
.sayfa-izi svg{width:13px; height:13px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sayfa-izi b{font-weight:600; color:var(--ink)}
.sayfa-izi .sayfa-izi-panel{margin-left:auto; padding:7px 12px; border:1px solid var(--line-strong); border-radius:999px; font-weight:600; color:var(--mor); white-space:nowrap}
.sayfa-izi .sayfa-izi-panel:hover{border-color:var(--mor); color:var(--mor)}
.sayfa-izi .sayfa-izi-geri{padding:6px 12px; border:1px solid var(--line-strong); border-radius:999px; font-weight:600; color:var(--mor); white-space:nowrap}
.sayfa-izi .sayfa-izi-geri:hover{border-color:var(--mor); color:var(--mor)}
.band .sayfa-izi, .sayfabas .sayfa-izi, .an .sayfa-izi, .kbas .sayfa-izi{color:var(--band-muted)}
.band .sayfa-izi a, .sayfabas .sayfa-izi a, .an .sayfa-izi a{color:var(--band-muted)}
.band .sayfa-izi a:hover, .sayfabas .sayfa-izi a:hover, .an .sayfa-izi a:hover{color:var(--band-ink)}
.band .sayfa-izi b, .sayfabas .sayfa-izi b, .an .sayfa-izi b{color:var(--band-ink)}
.crumb a{text-decoration:none; color:var(--ink-muted)}
.crumb a:hover{color:var(--green)}

/* ---------------- kapak · fotoğraflı tam genişlik başlık alanı ----------------
   Fotoğraf arkada, üstünde koyu perde, ortada beyaz metin. Üst bar her sayfada
   kendi opak zeminiyle durur; kapak barın altından başlar.
   Panel sayfaları .pagehead kullanmayı sürdürür; .kapak yalnızca dört genel sayfada. */
.kapak{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; align-items:center; background:var(--band);
  min-height:clamp(400px,42vw,540px); color:#fff; text-align:center;
  padding-block:clamp(52px,6.5vw,80px) clamp(40px,5vw,62px);
}



/* kapak ilke şeridi: sayfanın çalışma esasları, koyu kapak üzerinde okunur kalır.
   akis.html ve index.html kapaklarında kullanılır. */
.kapak-ilke{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:9px}
.kapak-ilke li{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:500; color:#fff;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.kapak-ilke li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); flex:none}
@media (max-width:560px){
  .kapak-ilke{gap:7px}
  .kapak-ilke li{font-size:11.5px; padding:6px 11px}
}
.kapak-gorsel{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; display:block}
.kapak::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,16,13,.78), rgba(9,16,13,.44) 30%, rgba(9,16,13,.50) 62%, rgba(9,16,13,.82)),
    radial-gradient(140% 92% at 50% 46%, rgba(9,16,13,.34), rgba(9,16,13,0) 68%);
}
.kapak .wrap{position:relative; display:flex; flex-direction:column; align-items:center; max-width:900px}
.kapak b,.kapak strong{color:#fff}
.kapak h1,.kapak h2{color:#fff; text-wrap:balance; text-shadow:0 2px 20px rgba(0,0,0,.4)}
.kapak .lede{
  color:rgba(255,255,255,.92); max-width:58ch; margin-inline:auto;
  font-size:clamp(15.5px,1.4vw,18px); line-height:1.65; text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.kapak .flex{justify-content:center}
/* düğmeler: koyu yeşil birincil düğme fotoğrafta kayboluyor, pirinç sarısı kullanılır */
.kapak .btn-primary{background:rgba(109,47,191,.15); color:#fff; font-weight:600; border:1.5px solid rgba(255,255,255,.7); border-radius:12px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.kapak .btn-primary .vurgu{color:#fff}
.kapak .btn-primary:hover:not([disabled]){background:rgba(109,47,191,.28); border-color:#fff; color:#fff}
.kapak .btn-primary:hover:not([disabled]) .vurgu{color:#fff}
.kapak .btn-ghost{color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.kapak .btn-ghost:hover:not([disabled]){border-color:#fff; background:rgba(255,255,255,.2)}
/* kapağın sayfa sonundaki kısa eşi: aynı görsel dil, daha alçak, tek CTA */
.kapak-son{min-height:clamp(270px,25vw,330px); padding-block:clamp(44px,5vw,62px)}
.kapak-son h2{font-size:clamp(26px,3vw,36px); font-weight:700; line-height:1.15}
@media (max-width:640px){
  .kapak{min-height:clamp(330px,74vw,420px)}
  .kapak .flex{flex-direction:column; align-self:stretch}
  .kapak .flex .btn{width:100%}
}

/* ---------------- devam · bölüm sonunda sonraki sayfaya bağlam ---------------- */
.devam{font-size:14px; line-height:1.7; color:var(--ink-muted); max-width:72ch}
.devam a{color:var(--green); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; border-bottom:1px solid color-mix(in srgb,var(--green) 32%,transparent)}
.devam a:hover{border-bottom-color:var(--green)}
.band .devam{color:var(--band-muted)}
.band .devam a{color:var(--brass); border-bottom-color:transparent; border-bottom-color:color-mix(in srgb,var(--brass) 38%,transparent)}
.band .devam a:hover{border-bottom-color:var(--brass)}

/* ---------------- kimlik sayfaları ---------------- */
.auth{display:grid; grid-template-columns:1fr 1.05fr; min-height:calc(100vh - 70px)}
@media (max-width:900px){.auth{grid-template-columns:1fr; min-height:0}}
/* Sag sutun (form + demo hesap listesi) yan panelden cok daha uzun; izgara satiri
   onun boyuna gore buyuyor. `justify-content:center` yan panelin icerigini o uzun
   satirin ortasina hizaladigi icin askidaki kart ilk ekranin altinda kaliyordu.
   Icerik artik panelin ustune hizalanir: panel satiri doldurmaya devam eder
   (solda bosluk olusmaz) ama kart her ekran yuksekliginde gorunur kalir. */
.auth-side{
  background:var(--band); color:var(--band-ink);
  padding:clamp(32px,5vw,56px);
  display:flex; flex-direction:column; justify-content:flex-start; gap:34px;
}
@media (max-width:900px){.auth-side{display:none}}
.auth-side h2{color:var(--band-ink); font-size:clamp(24px,2.6vw,32px)}
.auth-points{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:13px}
.auth-points li{display:flex; gap:11px; font-size:14.5px; color:var(--band-muted); line-height:1.6}
.auth-points li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); margin-top:9px; flex:none}
.auth-main{display:flex; align-items:center; justify-content:center; padding:clamp(30px,5vw,56px) 22px}
.auth-form{width:100%; max-width:430px}
/* Tek sütun sade karşılama (giriş, marka girişi, hesap açma): tanıtım paneli
   yok. Başlık ortada, form tek kartta — telefondaki düzenin (uygulama.css)
   masaüstü hâli. Sayfa izi gizli: gezinme üst çubukta. Masaüstünde sayfa tek
   ekrana oturur, altbilgi gizlenir; uzun form kendi içinde kayar. */
.auth-tek{grid-template-columns:1fr}
.auth-tek .crumb{display:none}
@media (min-width:901px){
  body:has(> .auth-tek) > footer{display:none}
  .auth-tek{height:calc(100vh - 71px); height:calc(100svh - 71px); min-height:0; overflow:hidden}
  .auth-tek .auth-main{overflow:auto; align-items:flex-start; padding:clamp(28px,5vh,56px) 22px}
  .auth-tek .auth-form{max-width:440px; margin-block:auto}
  .auth-tek .auth-form > .h-page{text-align:center; font-size:clamp(28px,2.4vw,32px)}
  .auth-tek .auth-form > .h-page + p{text-align:center; margin-inline:auto; max-width:40ch}
  .auth-tek form{
    margin-top:24px; padding:28px; border:1px solid var(--line); border-radius:var(--r-l);
    background:var(--surface); box-shadow:var(--shadow);
  }
}

/* seçim kartları: üyelik hesap türü, senet teslim yöntemi gibi iki seçenekli alanlar */
.rolsec{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px}
@media (max-width:520px){.rolsec{grid-template-columns:1fr}}
.rolsec button{
  font:inherit; text-align:left; cursor:pointer; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-m);
  transition:border-color .15s ease, background .15s ease;
}
.rolsec button b{display:flex; align-items:center; gap:8px; font-family:var(--font-baslik); font-size:15px; color:var(--ink)}
/* marka işareti (elbise askısı) rol kartlarında da ikon olarak kullanılır */
.rolsec .rol-ikon{width:26px; height:26px; border-radius:7px; background:var(--brass-soft); display:grid; place-items:center; flex:none}
.rolsec .rol-ikon svg{width:15px; height:15px; fill:none; stroke:var(--brass-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rolsec button[aria-pressed="true"] .rol-ikon{background:transparent; background:color-mix(in srgb,var(--green) 12%,transparent)}
.rolsec button[aria-pressed="true"] .rol-ikon svg{stroke:var(--green)}
.rolsec button span{display:block; font-size:12.5px; color:var(--ink-muted); margin-top:4px; line-height:1.5}
.rolsec button[aria-pressed="true"]{border-color:var(--green); background:transparent; background:color-mix(in srgb,var(--green) 7%,transparent)}
.uyelik-kart{
  position:relative; width:100%; max-width:290px; min-height:376px; margin:0 auto;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.28);
  border-radius:16px; padding:20px 20px 18px;
}
.uk-ust{
  display:flex; align-items:center; gap:8px; margin-top:14px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass);
}
.uk-ust svg{width:15px; height:15px; fill:none; stroke:var(--brass); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.uk-ust .uk-tur{margin-left:auto; letter-spacing:.08em; color:var(--band-ink); opacity:.75}
.uk-govde{flex:1; display:flex; flex-direction:column; justify-content:center; padding:20px 0 16px}
.uk-etiket{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--band-muted)}
.uk-ad{
  display:block; margin-top:6px; font-family:var(--font-baslik); font-weight:700;
  font-size:21px; line-height:1.25; color:var(--band-ink); overflow-wrap:anywhere;
}
.uk-ad.bos{color:var(--band-muted); font-weight:500}
.uk-delik{                      /* perforasyon çizgisi: künye satırlarını ayırır */
  position:relative; height:1px; margin:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.42) 0 6px, transparent 6px 12px);
}
.uk-kunye{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px}
.uk-kunye li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; line-height:1.5}
.uk-kunye span{color:var(--band-muted)}
.uk-kunye b{color:var(--band-ink); font-weight:600; text-align:right}
.uk-kod{
  margin-top:14px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; letter-spacing:.12em; color:var(--band-muted);
}

/* Açık zemin sürümü: panellerde (beyaz kart içinde) aynı üyelik kartı kullanılır. */
.uyelik-kart.acik{background:var(--surface-2); border-color:var(--line)}
.uyelik-kart.acik::after{background:var(--line-strong); box-shadow:none}
.uyelik-kart.acik .uk-ust{color:var(--brass-deep)}
.uyelik-kart.acik .uk-ust svg{stroke:var(--brass-deep)}
.uyelik-kart.acik .uk-ust .uk-tur{color:var(--ink-muted); opacity:1}
.uyelik-kart.acik .uk-etiket{color:var(--ink-muted)}
.uyelik-kart.acik .uk-ad{color:var(--ink)}
.uyelik-kart.acik .uk-ad.bos{color:var(--ink-faint)}
.uyelik-kart.acik .uk-delik{background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px)}
.uyelik-kart.acik .uk-kunye span{color:var(--ink-muted)}
.uyelik-kart.acik .uk-kunye b{color:var(--ink)}
.uyelik-kart.acik .uk-kod{color:var(--ink-faint)}
/* ---------------- panel önizleme ---------------- */
.panel{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lift)}
.panel-bar{display:flex; align-items:center; gap:8px; padding:11px 16px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.panel-dot{width:9px; height:9px; border-radius:50%; background:var(--line-strong)}
.panel-url{margin-left:8px; font-size:11.5px; color:var(--ink-faint); font-family:ui-monospace,Menlo,Consolas,monospace}
.panel-body{padding:clamp(18px,2.5vw,26px)}
/* hızlı işlemler: panelin en üstünde, tek bakışta görünen ana eylemler.
   Bekleyen iş varsa düğmenin üzerinde sayı rozeti çıkar. */
.hizli{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px}
@media (max-width:900px){.hizli{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.hizli{grid-template-columns:1fr}}
.hizli button{
  position:relative; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:12px; padding:15px 16px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-m);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.hizli button:hover:not([disabled]){border-color:var(--mor); box-shadow:var(--shadow-lift)}
.hizli button[disabled]{opacity:.5; cursor:not-allowed}
.hizli .hizli-ikon{width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--brass-soft)}
.hizli .hizli-ikon svg{width:19px; height:19px; fill:none; stroke:var(--brass-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hizli b{display:block; font-family:var(--font-baslik); font-size:14.5px; color:var(--ink)}
.hizli span.alt{display:block; font-size:12px; color:var(--ink-muted); margin-top:3px; line-height:1.45}
.hizli .hizli-sayi{
  position:absolute; right:12px; top:12px; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--warn); color:var(--on-green);
  font-size:12px; font-weight:700; display:grid; place-items:center;
}
.hizli button.acil{border-color:var(--warn)}
/* gösterge kartları: panel üstündeki dört ölçüm. Solda renkli ikon rozeti,
   sağda etiket + değer + kısa açıklama. Panellerde ortak kullanılır. */
.kpi-kart{
  display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m); padding:14px 15px; box-shadow:var(--shadow);
}
.kpi-ikon{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--brass-soft)}
.kpi-ikon svg{width:19px; height:19px; fill:none; stroke:var(--brass-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.kpi-kart .kpi-yazi{min-width:0}
.kpi-kart .kpi-yazi span{display:block; font-size:12px; color:var(--ink-muted)}
.kpi-kart .kpi-yazi b{display:block; margin-top:4px; font-family:var(--font-baslik); font-size:20px; color:var(--green); font-variant-numeric:tabular-nums}
.kpi-kart .kpi-alt{display:block; margin-top:3px; font-size:11.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi-kart.mor .kpi-ikon{background:var(--mor-soft)}
.kpi-kart.mor .kpi-ikon svg{stroke:var(--mor)}
.kpi-kart.yesil .kpi-ikon{background:var(--ok-soft)}
.kpi-kart.yesil .kpi-ikon svg{stroke:var(--ok)}
.kpi-kart.sari .kpi-ikon{background:var(--warn-soft)}
.kpi-kart.sari .kpi-ikon svg{stroke:var(--warn)}

/* ---------------- kayıt kartı ızgarası (dashboard kart deseni) ----------------
   Referans düzen: üstte görsel alanı ve durum rozeti, altında kategori çipi,
   mağaza satırı (avatar + ad), başlık, kısa künye ve ilerleme çubuğu.
   Kartlar ızgarada dizilir; ayrıntı bölümleri kartın içinde açılır. */
.kayit-izgara{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; align-content:start}
@media (max-width:1500px){.kayit-izgara{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.kayit-kart{display:flex; flex-direction:column; overflow:hidden}
.kayit-gorsel{
  position:relative; aspect-ratio:16/9; background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden;
}
.kayit-gorsel img{width:100%; height:100%; object-fit:cover; display:block}
.kayit-gorsel .bos-aski{width:52px; height:52px; fill:none; stroke:var(--line-strong); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.kayit-gorsel .kg-durum{position:absolute; right:10px; top:10px}
.kayit-gorsel .kg-kod{
  position:absolute; left:10px; top:10px; font-family:ui-monospace,Consolas,monospace;
  font-size:11px; letter-spacing:.06em; color:#fff; background:rgba(20,8,40,.62);
  padding:4px 9px; border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.kayit-govde{padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1}
.kayit-cip{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mor); background:var(--mor-soft); padding:4px 9px; border-radius:6px;
}
.kayit-magaza{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-muted)}
.kayit-magaza .km-av{
  width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--brass-soft); color:var(--brass-deep); font:700 11px var(--font-baslik);
}
.kayit-kart h3{font-family:var(--font-baslik); font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.3}
.kayit-meta{font-size:12.5px; color:var(--ink-muted); line-height:1.5}
.kayit-tutar{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-muted)}
.kayit-tutar b{font-family:var(--font-baslik); font-size:16px; color:var(--green)}
.kayit-ayrinti{border-top:1px solid var(--line); margin-top:2px; padding-top:12px}
.kayit-ayrinti[hidden]{display:none}
.kayit-ac{
  align-self:flex-start; font:inherit; font-size:12.5px; font-weight:600; color:var(--green);
  background:none; border:0; padding:4px 0; cursor:pointer;
}
.kayit-ac:hover{color:var(--brass-deep)}

.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:760px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi div{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:15px}
.kpi span{display:block; font-size:12px; color:var(--ink-muted)}
.kpi b{display:block; margin-top:7px; font-family:var(--font-baslik); font-size:21px; color:var(--green); font-variant-numeric:tabular-nums}

/* ---------------- SSS / details ---------------- */
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; transition:border-color .18s ease}
details[open]{border-color:var(--line-strong)}
summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; font-family:var(--font-baslik); font-weight:600; font-size:16.5px; color:var(--green)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--brass-deep); font-size:19px; line-height:1; transition:transform .2s ease; flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:11px; font-size:15px; color:var(--ink-muted); max-width:70ch}

/* ---------------- bildirim (toast) ---------------- */
.toasts{position:fixed; right:18px; bottom:18px; z-index:120; display:grid; gap:10px; max-width:min(380px,calc(100vw - 36px))}
.toast{
  display:flex; gap:11px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:var(--r-m); padding:13px 15px; box-shadow:var(--shadow-lift);
  font-size:14px; animation:fadeup .3s ease both;
}
.toast.bad{border-left-color:var(--bad)}
.toast.info{border-left-color:var(--info)}
.toast b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px}
.toast span{color:var(--ink-muted); line-height:1.55}

/* ---------------- alt bilgi ---------------- */
/* ---------------- çerez bandı ----------------
   Kurumsal onay çubuğu: sayfanın altında tam genişlik, üst çizgili, sade.
   Solda kalkan simgesi + başlık + tek satır açıklama, sağda eylemler.
   "Ayarlar" açılınca üç kategori yan yana anahtarlarla listelenir. */
.cerez{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  animation:cerez-gel .25s ease;
}
.cerez.kapaniyor{opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease}
@keyframes cerez-gel{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.cerez-kutu{
  background:var(--surface); border-top:1px solid var(--line-strong);
  box-shadow:0 -12px 32px -20px rgba(42,15,82,.35);
}
.cerez-ic{max-width:var(--maxw); margin-inline:auto; padding:16px 22px; display:grid; gap:14px}
.cerez-satir{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px}
.cerez-ikon{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line)}
.cerez-ikon svg{width:20px; height:20px; fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cerez-yazi b{display:block; font-family:var(--font-baslik); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.cerez-yazi p{margin:2px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-muted)}
.cerez-yazi a{color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.cerez-eylem{display:flex; align-items:center; gap:8px; white-space:nowrap}
.cerez-eylem .btn{padding:9px 16px; font-size:13px; border-radius:var(--r-s)}
.cerez-eylem .btn-quiet{padding-inline:10px; text-decoration:underline; text-underline-offset:3px}
.cerez-ayar{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-top:14px; border-top:1px solid var(--line)}
.cerez-kat{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface-2)}
.cerez-kat b{display:block; font-size:13px; font-weight:600; color:var(--ink)}
.cerez-kat small{display:block; margin-top:3px; font-size:12px; line-height:1.5; color:var(--ink-muted)}
.cerez-kat em{display:block; margin-top:6px; font-style:normal; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted)}
.cerez-anahtar{position:relative; flex:none; width:38px; height:22px; margin-top:1px}
.cerez-anahtar input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.cerez-anahtar i{position:absolute; inset:0; border-radius:999px; background:var(--line-strong); transition:background .15s}
.cerez-anahtar i::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s}
.cerez-anahtar input:checked + i{background:var(--green)}
.cerez-anahtar input:checked + i::after{transform:translateX(16px)}
.cerez-anahtar input:disabled + i{opacity:.55; cursor:not-allowed}
.cerez-anahtar input:focus-visible + i{outline:2px solid var(--green); outline-offset:2px}
@media (max-width:900px){
  .cerez-satir{grid-template-columns:auto 1fr}
  .cerez-eylem{grid-column:1 / -1; justify-content:flex-end; flex-wrap:wrap; white-space:normal}
  .cerez-ayar{grid-template-columns:1fr}
}
@media (max-width:560px){.cerez-ic{padding:14px 16px} .cerez-ikon{display:none} .cerez-satir{grid-template-columns:1fr} .cerez-eylem .btn{flex:1 1 auto}}
@media (prefers-reduced-motion: reduce){.cerez{animation:none}}

footer{border-top:0; margin-top:clamp(48px,7vw,88px); position:relative}
footer::before{content:""; display:block; height:1px; background:var(--line)}
.foot{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:30px; padding-block:46px}
@media (max-width:1000px){.foot{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}
.foot h4,.foot .foot-bas{margin:0; font-size:13.5px; font-weight:600; letter-spacing:0; color:var(--green); font-family:var(--font-arayuz)}
.foot ul{list-style:none; margin:13px 0 0; padding:0; display:grid; gap:9px}
.foot a{font-size:14px; color:var(--ink-muted); text-decoration:none}
.foot a:hover{color:var(--green)}
.legal{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px; font-size:12.5px; line-height:1.7; color:var(--ink-muted)}
.legal b{color:var(--ink)}
/* Sosyal medya simgeleri: altbilgi marka sütununun altında, yuvarlak düğmeler. */
.sosyal{display:flex; gap:8px; margin-top:16px}
.sosyal a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--ink-muted); background:var(--surface);
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.sosyal a svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sosyal a:hover{color:var(--on-green); background:var(--green); border-color:var(--green)}
.copy .urun-notu{font-weight:600; color:var(--ink-muted); margin-left:6px}
.copy{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-block:26px; border-top:1px solid var(--line); margin-top:26px; font-size:12.5px; color:var(--ink-faint)}

/* ---------------- yardımcılar ---------------- */
.stack-sm{display:grid; gap:10px}
.flex{display:flex; gap:12px; flex-wrap:wrap}
.flex-between{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
/* aralık ölçeği: 8 / 12 / 16 / 24 / 32 */
.mt-s{margin-top:12px} .mt-m{margin-top:24px} .mt-l{margin-top:32px}
/* önceki bölümün devamı: üst boşluk tekrarlanmaz */
.section.bitisik{padding-top:0}
/* kart ve panel içi başlık */
.h-kart{font-family:var(--font-baslik); font-size:19px; font-weight:600; color:var(--ink)}
/* akış sayfasındaki adım başlıkları */
.adim-bas{margin-top:12px; font-size:26px}

/* ---------------- kullanıcı ve marka paneli (ortak) ---------------- */
/* minmax(0,…): sütunun min-content genişliğine büyüyüp taşmasını engeller */
/* ---------------- panel yan menüsü ----------------
   Panel eylemleri solda dar bir sütunda durur; içerik sağda geniş alanı alır
   (asimetrik düzen). Menü açılır/kapanır: kapalıyken yalnızca ikonlar görünür,
   tercih tarayıcıda saklanır. 900px altında menü yatay şeride döner. */
/* Panel sayfaları ekranı tam kaplar: geniş kap, kısa üst boşluk, sütunlar
   viewport yüksekliğini doldurur. Boş alan kalmaması için içerik esner. */
.wrap-genis{max-width:1680px; margin-inline:auto; padding-inline:clamp(16px,2vw,30px)}
/* tek ekrana sığdırma: panel bileşenlerinin dikey ritmi kısaldı */
.panel-sayfa{padding-block:14px 22px}
.panel-sayfa .panel-duzen{min-height:calc(100vh - 150px)}
.panel-sayfa .panel-bas{margin-bottom:12px}
.panel-sayfa .karsilama{padding:20px 24px; margin-bottom:12px; gap:16px}
.panel-sayfa .karsilama p{margin-top:6px; font-size:13.5px}
.panel-sayfa .karsilama .flex{margin-top:12px}
.panel-sayfa .kpi{gap:10px}
.panel-sayfa .kpi-kart{padding:11px 13px}
.panel-sayfa .kpi-kart .kpi-yazi b{font-size:18px; margin-top:2px}
.panel-sayfa .panel-grid{margin-top:14px !important; gap:16px}
.panel-sayfa .card-pad{padding:16px 18px}
.panel-sayfa .adimlar{gap:14px; margin-top:14px}
.panel-sayfa .adimlar h3{font-size:14.5px}
.panel-sayfa .adimlar p{font-size:13px; margin-top:4px}
.panel-sayfa .adim-no{width:28px; height:28px; margin-bottom:8px; font-size:13px}
.panel-sayfa .panel-icerik{display:flex; flex-direction:column}
.panel-sayfa .panel-icerik .panel-grid{flex:1; align-items:stretch}
.panel-sayfa .panel-grid > div:first-child{display:flex; flex-direction:column}
.panel-sayfa .panel-grid > aside{display:flex; flex-direction:column; gap:16px}
.panel-sayfa .panel-grid > aside > .card{margin-top:0}
.panel-sayfa .panel-grid > aside > .card:last-child{flex:1}
/* panel başlığı da daralsın: dashboard'da uzun tanıtım metni yer kaplamasın */
.panel-sayfa-bas{padding-block:clamp(18px,2vw,26px) 0}
.panel-sayfa-bas .lede{font-size:14.5px; max-width:78ch}
.panel-duzen{display:grid; grid-template-columns:248px minmax(0,1fr); gap:clamp(18px,2.4vw,28px); align-items:start}
.panel-duzen.dar{grid-template-columns:68px minmax(0,1fr)}
.panel-duzen>*{min-width:0}

.yanmenu{position:sticky; top:88px; display:grid; gap:8px}
.yanmenu-bas{display:flex; align-items:center; gap:8px; padding:0 4px 6px}
.yanmenu-bas span{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.yanmenu-katla{
  margin-left:auto; width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:8px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink-muted);
}
.yanmenu-katla:hover{border-color:var(--mor); color:var(--green)}
.yanmenu-katla svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .18s ease}
.panel-duzen.dar .yanmenu-katla svg{transform:rotate(180deg)}
.panel-duzen.dar .yanmenu-bas span{display:none}
.panel-duzen.dar .yanmenu-katla{margin:0 auto}

.yanmenu-alt{
  display:flex; align-items:center; gap:10px; margin-top:6px; padding:11px 12px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2);
}
.yanmenu-alt .profil-foto{width:32px; height:32px; border-radius:50%; font-size:14px; border:0; flex:none}
.yanmenu-alt-yazi{min-width:0}
.yanmenu-alt-yazi b{display:block; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.yanmenu-alt-yazi span{display:block; font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,Consolas,monospace}
.panel-duzen.dar .yanmenu-alt{justify-content:center; padding:9px}
.panel-duzen.dar .yanmenu-alt-yazi{display:none}
@media (max-width:900px){.yanmenu-alt{display:none}}
.yanmenu button.yan-eylem{
  position:relative; font:inherit; text-align:left; cursor:pointer; width:100%;
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.yanmenu button.yan-eylem:hover:not([disabled]){border-color:var(--mor); box-shadow:var(--shadow)}
.yanmenu button.yan-eylem[disabled]{opacity:.45; cursor:not-allowed}
.yanmenu .yan-ikon{width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--brass-soft)}
.yanmenu .yan-ikon svg{width:18px; height:18px; fill:none; stroke:var(--brass-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.yanmenu .yan-yazi{min-width:0}
.yanmenu .yan-yazi b{display:block; font-family:var(--font-baslik); font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.yanmenu .yan-yazi span{display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px; line-height:1.4}
.yanmenu .yan-sayi{
  position:absolute; right:10px; top:10px; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:var(--warn); color:var(--on-green);
  font-size:11.5px; font-weight:700; display:grid; place-items:center;
}
.yanmenu button.acil{border-color:var(--warn)}

/* kapalı durum: yalnızca ikon, rozet ikonun köşesinde */
.panel-duzen.dar .yanmenu .yan-yazi{display:none}
.panel-duzen.dar .yanmenu button.yan-eylem{justify-content:center; padding:11px 8px}
.panel-duzen.dar .yanmenu .yan-sayi{right:6px; top:6px; min-width:17px; height:17px; font-size:10.5px; padding:0 4px}

@media (max-width:900px){
  .panel-duzen,.panel-duzen.dar{grid-template-columns:1fr}
  .yanmenu{position:static; grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; padding-bottom:4px}
  .yanmenu-bas{display:none}
  .panel-duzen.dar .yanmenu .yan-yazi{display:block}
}


/* Sade (minimalist) panel varyantı — marka panelinde kullanılır: kart gölgesi ve
   dolgu rozetleri yerine ince çizgi ve tek renk ikonlar, daha çok boşluk. */
.panel-duzen.sade .yanmenu button.yan-eylem{background:transparent; border-color:transparent; padding:10px 12px}
.panel-duzen.sade .yanmenu button.yan-eylem:hover:not([disabled]){background:var(--surface-2); box-shadow:none; border-color:transparent}
.panel-duzen.sade .yanmenu .yan-ikon{background:transparent; width:24px; height:24px; border-radius:0}
.panel-duzen.sade .yanmenu .yan-ikon svg{stroke:var(--ink-muted); width:19px; height:19px}
.panel-duzen.sade .yanmenu button.acil{border-color:transparent; background:var(--warn-soft)}
.panel-duzen.sade .yanmenu button.acil .yan-ikon svg{stroke:var(--warn)}
.panel-duzen.sade .yanmenu button.yan-eylem:hover .yan-ikon svg{stroke:var(--green)}

.panel-duzen.sade .kpi{gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:6px 4px}
.panel-duzen.sade .kpi-kart{
  background:transparent; border:0; border-right:1px solid var(--line);
  border-radius:0; box-shadow:none; padding:12px 16px;
}
.panel-duzen.sade .kpi-kart:last-child{border-right:0}
.panel-duzen.sade .kpi-ikon{background:transparent; width:26px; height:26px; border-radius:0}
.panel-duzen.sade .kpi-ikon svg{stroke:var(--ink-muted)}
.panel-duzen.sade .kpi-kart.yesil .kpi-ikon svg{stroke:var(--ok)}
.panel-duzen.sade .kpi-kart.sari .kpi-ikon svg{stroke:var(--warn)}
.panel-duzen.sade .kpi-kart.mor .kpi-ikon svg{stroke:var(--mor)}
@media (max-width:760px){
  .panel-duzen.sade .kpi-kart{border-right:0; border-bottom:1px solid var(--line)}
  .panel-duzen.sade .kpi-kart:nth-last-child(-n+1){border-bottom:0}
}


/* ---------------- panel içerik başlığı ve karşılama bandı ----------------
   Dashboard düzeni: içerik sütununun üstünde başlık + arama + kullanıcı çipi,
   altında özet bandı, sonra gösterge kartları. */
.panel-bas{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.panel-bas h2{font-family:var(--font-baslik); font-size:20px; font-weight:600; color:var(--ink); margin-right:auto}
.panel-ara{position:relative; flex:0 1 280px}
.panel-ara input{width:100%; padding-left:38px}
.panel-ara svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; fill:none; stroke:var(--ink-faint); stroke-width:1.8; pointer-events:none}
.panel-cip{display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.panel-cip .profil-foto{width:30px; height:30px; border-radius:50%; font-size:13px; border:0}
.panel-cip b{font-size:13.5px; color:var(--ink); white-space:nowrap}

.karsilama{
  position:relative; overflow:hidden; border-radius:var(--r-l); color:var(--band-ink);
  background:var(--band); padding:clamp(20px,2.6vw,28px); margin-bottom:16px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.karsilama h3{color:var(--band-ink); font-size:clamp(19px,2.1vw,23px); font-weight:700; line-height:1.25}
.karsilama p{color:var(--band-muted); font-size:14px; line-height:1.65; margin-top:8px; max-width:52ch}
.karsilama .karsilama-yazi{flex:1 1 320px; min-width:0}
.karsilama .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.1)}
.karsilama .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.18); color:#fff}
.karsilama .flex{margin-top:16px}
.karsilama-aski{flex:0 0 96px; display:grid; place-items:center; opacity:.9}
.karsilama-aski svg{width:78px; height:78px; fill:none; stroke:var(--brass); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:620px){.karsilama-aski{display:none}}

/* yaklaşan işlemler listesi */
.yaklasan{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.yaklasan li{display:flex; gap:11px; align-items:flex-start; padding:11px 12px; background:var(--surface-2); border-radius:var(--r-m)}
.yaklasan .yak-ikon{width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--surface)}
.yaklasan .yak-ikon svg{width:15px; height:15px; fill:none; stroke:var(--brass-deep); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.yaklasan b{display:block; font-size:13.5px; color:var(--ink)}
.yaklasan span{display:block; font-size:12px; color:var(--ink-muted); margin-top:2px; line-height:1.5}

.panel-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(322px,.65fr);
  gap:clamp(20px,3vw,30px); align-items:start;
}
.panel-grid>*{min-width:0}
@media (max-width:1240px){.panel-icerik .panel-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:920px){.panel-grid{grid-template-columns:minmax(0,1fr)}}
.bildirim{display:grid; gap:12px}
.bildirim div{padding:12px 16px; background:var(--surface-2); border-radius:var(--r-s); border:1px solid var(--line)}
.bildirim b{display:block; font-size:13.5px; color:var(--ink)}
.bildirim span{display:block; margin-top:4px; font-size:12.5px; color:var(--ink-muted); line-height:1.55}
.bildirim time{display:block; margin-top:4px; font-size:11.5px; color:var(--ink-faint)}
.center{text-align:center}
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   YÖNETİM KONSOLU (yonetim.html)
   Gerçek uygulamadaki admin panelinin sitedeki önizlemesi.
   Renkler yalnızca mevcut tema değişkenlerinden türetilir.
   ============================================================ */
.kons{
  /* Üst bar yapışkandır (70px); sayfa içi kaydırmada konsol altında kalmasın. */
  scroll-margin-top:86px;
  display:grid; grid-template-columns:232px 1fr;
  border:1px solid var(--line); border-radius:var(--r-l);
  overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lift);
}
.kons-yan{background:var(--band); color:var(--band-ink); padding:18px 0; display:flex; flex-direction:column}
.kons-marka{display:flex; align-items:center; gap:9px; padding:0 18px 16px; border-bottom:1px solid var(--band-line)}
.kons-marka .brand-mark{width:26px; height:26px; flex:none}
.kons-marka b{font-family:var(--font-baslik); font-size:14.5px; color:var(--band-ink)}
.kons-grup{padding:16px 18px 6px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted); opacity:.75}
.kons-link{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 18px; font:inherit; font-size:14px; font-weight:500;
  background:none; border:0; cursor:pointer; color:var(--band-muted);
  transition:background .15s ease, color .15s ease;
}
.kons-link svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.kons-link:hover{background:rgba(255,255,255,.06); color:var(--band-ink)}
.kons-link[aria-current="true"]{background:var(--green); color:var(--on-green)}
.kons-ana{padding:clamp(18px,2.4vw,26px); min-width:0}
.kons-baslik{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px}
.kons-baslik h3{font-family:var(--font-baslik); font-size:20px; font-weight:600; color:var(--green)}
.kons-baslik p{margin-top:4px; font-size:14px; color:var(--ink-muted); max-width:56ch}
.kons-bos{padding:44px 20px; text-align:center; color:var(--ink-muted); font-size:14.5px}

/* rol seçici */

/* kart ızgarası */
.kons-kartlar{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.kons-kart{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-m); padding:16px}
.kons-kart h4{font-family:var(--font-baslik); font-size:14.5px; font-weight:600; color:var(--green); margin-bottom:8px}
.kons-satir{display:flex; justify-content:space-between; gap:14px; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line)}
.kons-satir:last-child{border-bottom:0}
.kons-satir span{color:var(--ink-muted)}
.kons-satir b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.kons-iban{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.06em}
.kons-olay{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:var(--ink-muted); word-break:break-all}

@media (max-width:860px){
  .kons{grid-template-columns:1fr}
  .kons-yan{
    flex-direction:row; flex-wrap:wrap; gap:6px; padding:12px;
    border-bottom:1px solid var(--band-line);
  }
  .kons-marka,.kons-grup{display:none}
  .kons-link{width:auto; padding:7px 13px; border-radius:999px; font-size:13px}
  .kons-kartlar{grid-template-columns:1fr}
}

/* =====================================================================
   KULLANICILAR EKRANI
   Aralıklar 8 / 12 / 16 / 24 / 32 ölçeğinde; ince çizgi, gölge yok.
   ===================================================================== */
.uy-arac{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.uy-ara{position:relative; flex:1 1 260px; min-width:0}
.uy-ara svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; fill:none; stroke:var(--ink-faint);
  stroke-width:1.8; stroke-linecap:round; pointer-events:none;
}
.uy-ara input{
  width:100%; height:38px; padding:0 12px 0 36px;
  font:400 14px/1 var(--font-arayuz); color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-s);
  appearance:none; transition:border-color .15s ease;
}
.uy-ara input::placeholder{color:var(--ink-faint)}
.uy-ara input:hover{border-color:var(--line-strong)}
.uy-ara input:focus-visible,.uy-secim:focus-visible{
  outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);
}
.uy-secim{width:auto; min-width:160px; height:38px; padding:0 32px 0 12px; font-size:14px}

/* Taşma gizlenmez: ⋯ menüsü satırın dışına açılabilmeli. */
.uy-tablo{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface)}
.uy-bas{border-radius:var(--r-m) var(--r-m) 0 0}
.uy-satir:last-child{border-radius:0 0 var(--r-m) var(--r-m)}
.uy-bas,.uy-satir{
  display:grid; grid-template-columns:minmax(180px,2.2fr) minmax(160px,2fr) 104px 116px minmax(132px,max-content);
  gap:16px; align-items:center; padding:12px 16px;
}
.uy-bas{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-muted);
}
.uy-bas span:last-child{text-align:right}
.uy-satir{border-bottom:1px solid var(--line); font-size:14px; transition:background .12s ease}
.uy-satir:last-child{border-bottom:0}
.uy-satir:hover{background:var(--surface-2)}

.uy-kisi{display:flex; align-items:center; gap:12px; min-width:0}
.uy-avatar{
  width:32px; height:32px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--green-soft); color:var(--green);
  font-size:13px; font-weight:600;
}
.uy-ad{font-weight:500; color:var(--ink)}
.uy-hucre{color:var(--ink)}
.uy-ad,.uy-hucre{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uy-alt{display:block; margin-top:2px; font-size:12.5px; font-weight:400; color:var(--ink-muted)}
.uy-tarih{color:var(--ink-muted); font-variant-numeric:tabular-nums}

.uy-rozet{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12.5px; font-weight:500; color:var(--ok); background:var(--ok-soft);
}
.uy-rozet.pasif{color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line)}

.uy-islem{position:relative; display:flex; justify-content:flex-end; align-items:center; gap:4px}
.uy-btn,.uy-nokta{
  border:1px solid transparent; border-radius:var(--r-s); background:transparent;
  color:var(--ink-muted); cursor:pointer; font:500 13.5px/1 var(--font-arayuz);
  transition:background .12s ease, color .12s ease;
}
.uy-btn{padding:7px 12px}
.uy-nokta{width:30px; height:30px; font-size:16px; line-height:1}
.uy-btn:hover,.uy-nokta:hover{background:var(--green-soft); color:var(--green)}
.uy-btn:focus-visible,.uy-nokta:focus-visible{outline:2px solid var(--green); outline-offset:1px}
.uy-nokta[aria-expanded="true"]{background:var(--green-soft); color:var(--green)}

.uy-menu{
  position:absolute; top:calc(100% + 4px); right:0; z-index:20; min-width:168px;
  padding:4px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow);
}
.uy-menu.yukari{top:auto; bottom:calc(100% + 4px)}
.uy-menu button{
  padding:8px 12px; text-align:left; border:0; border-radius:8px; background:transparent;
  color:var(--ink); cursor:pointer; font:400 13.5px/1.3 var(--font-arayuz);
}
.uy-menu button:hover{background:var(--surface-2)}
.uy-menu button:focus-visible{outline:2px solid var(--green); outline-offset:-2px}
.uy-menu .tehlike{color:var(--bad)}
.uy-menu .tehlike:hover{background:var(--bad-soft)}

.uy-sayac{margin-top:12px; font-size:12.5px; color:var(--ink-muted)}
.uy-bos{
  padding:48px 24px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface);
}
.uy-bos-bas{font-family:var(--font-baslik); font-size:16px; font-weight:600; color:var(--ink)}
.uy-bos p+p{margin-top:8px; font-size:14px; color:var(--ink-muted)}
.uy-bos .btn{margin-top:16px}

/* ---- pencere: görüntüle / düzenle / sil onayı ---- */
body.kilit{overflow:hidden}
.uy-pencere{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px;
  background:rgba(15,25,21,.44); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
/* Ayrıntı penceresinde alt başlık (hediye hafızası vb.). */
.uy-altbaslik{font-family:var(--font-baslik); font-size:14px; font-weight:600; color:var(--ink); margin:18px 0 8px; padding-top:14px; border-top:1px solid var(--line)}
.uy-altbaslik .muted{font-weight:500; font-size:12.5px}
.uy-pencere-kutu{
  width:min(760px,100%); max-height:min(88vh,760px); display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); box-shadow:var(--shadow-lift);
}
.uy-pencere-bas{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--line);
}
.uy-pencere-bas h4{font-family:var(--font-baslik); font-size:16px; font-weight:600; color:var(--ink)}
.uy-kapat{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent; color:var(--ink-muted); cursor:pointer;
}
.uy-kapat svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.uy-kapat:hover{background:var(--surface-2); color:var(--ink)}
.uy-kapat:focus-visible{outline:2px solid var(--green); outline-offset:1px}
.uy-pencere-govde{padding:24px; overflow:auto}
.uy-pencere-alt{
  display:flex; justify-content:flex-end; gap:8px;
  padding:16px 24px; border-top:1px solid var(--line);
}
.uy-tehlike{background:var(--bad); color:#fff; border:1px solid var(--bad)}
.uy-tehlike:hover{filter:brightness(.94)}

.uy-detay{display:grid; gap:12px}
.uy-detay>div{display:flex; justify-content:space-between; gap:16px; font-size:14px}
.uy-detay dt{color:var(--ink-muted)}
.uy-detay dd{color:var(--ink); font-weight:500; text-align:right; word-break:break-word}
.uy-mutluluk{margin-top:24px; border-top:1px solid var(--line); list-style:none}
.uy-mutluluk li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px}
.uy-mutluluk li:last-child{border-bottom:0}
.uy-mutluluk span{display:flex; flex-direction:column; gap:2px; min-width:0; color:var(--ink)}
.uy-mutluluk em{font-style:normal; font-size:12.5px; color:var(--ink-muted)}
.uy-mutluluk b{font-variant-numeric:tabular-nums; white-space:nowrap}
.uy-form .field:last-child{margin-bottom:0}
.uy-onay{font-size:14px; line-height:1.6; color:var(--ink)}

@media (max-width:860px){
  .uy-bas{display:none}
  .uy-tablo{border:0; background:transparent}
  .uy-satir{
    grid-template-columns:1fr auto; gap:12px 16px; align-items:start;
    padding:16px; margin-bottom:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  }
  .uy-satir:last-child{border-bottom:1px solid var(--line); margin-bottom:0}
  .uy-satir:hover{background:var(--surface)}
  .uy-kisi{grid-column:1/-1}
  .uy-ad{white-space:normal}
  .uy-hucre{grid-column:1/-1; white-space:normal}
  .uy-hucre:nth-child(3){grid-area:3/1; align-self:center}
  .uy-hucre.uy-tarih{grid-area:3/2; font-size:12.5px; text-align:right; align-self:center}
  .uy-islem{grid-column:1/-1; padding-top:12px; border-top:1px solid var(--line)}
  .uy-btn{padding:8px 14px; border:1px solid var(--line); color:var(--ink)}
  .uy-secim{flex:1 1 140px; min-width:0}
}

/* ============================================================
   ŞÖLEN KATMANI — mücevher vurguları
   Renk sabiti yazma: her şey :root token'larından okunur. Yeni bir vurgu
   gerekiyorsa önce token ekle, sonra buradan dağıt.
   ============================================================ */
/* Bölüm üst yazısı düz mor. Bir ara mücevher geçişiyle boyanıyordu; geçişin
   lambader ucu açık zeminde kaybolduğu için son harfler okunmuyordu
   ("NASIL İŞLER"in sonu görünmez oluyordu). Metin dolgusu gradyan olduğunda
   kontrast satır boyunca değiştiği için başlıklarda kullanılmaz. */
.eyebrow{color:var(--mor)}
.band .eyebrow,.kapak .eyebrow{color:var(--brass)}

/* üçlü kutular sırayla taş değiştirir, üstlerinde ince mücevher hattı olur */
.tile{position:relative; overflow:hidden}
.grid3>.tile .ico{background:var(--mor-soft)}
.grid3>.tile .ico svg{stroke:var(--mor)}
.tile.ok .ico{background:var(--ok-soft)}
.tile.ok .ico svg{stroke:var(--ok)}

/* numaralı adım madalyonları altın ve mor arasında dönüşür */
.adimlar .no{background:var(--brass); color:#33115F}
.adimlar .no.son{background:#6D2FBF; color:#EFCB63}

/* kart başlığı ve ayraçlar ince mücevher hattı taşır */
.card-head{border-bottom:0; position:relative}
.card-head::after{content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--line)}
.divider{height:1px; background:var(--line)}

/* kapak perdesi: her sayfa kendi taşını taşır, metin kontrastı korunur */
/* kapak perdesi: hepsi mor ailesinde, sayfa başına farklı derinlik.
   `.kapak-lamba` sıcak abajur tonudur, koyu fotoğraflarda kullanılır. */
.kapak-mor::after{
  background:
    linear-gradient(180deg, rgba(34,12,66,.82), rgba(34,12,66,.44) 30%, rgba(34,12,66,.52) 62%, rgba(34,12,66,.88)),
    radial-gradient(140% 92% at 50% 46%, rgba(109,47,191,.38), rgba(109,47,191,0) 70%) !important;
}
/* kurumsal.jpg zaten koyu bir masa fotoğrafı; perde diğerleri kadar ağır olunca
   sağ yarı siyaha düşüyordu. Alfalar düşürüldü, taban rengi mora çekildi ve
   fotoğrafın kendisi biraz açıldı. */
.kapak-erguvan .kapak-gorsel{filter:brightness(1.32) saturate(1.06)}
.kapak-erguvan::after{
  background:
    linear-gradient(180deg, rgba(40,15,78,.66), rgba(40,15,78,.30) 32%, rgba(40,15,78,.40) 64%, rgba(40,15,78,.76)),
    radial-gradient(140% 92% at 50% 46%, rgba(86,34,148,.26), rgba(86,34,148,0) 70%) !important;
}
.kapak-menekse::after{
  background:
    linear-gradient(180deg, rgba(44,18,82,.80), rgba(44,18,82,.42) 30%, rgba(44,18,82,.50) 62%, rgba(44,18,82,.86)),
    radial-gradient(140% 92% at 50% 46%, rgba(139,77,224,.38), rgba(139,77,224,0) 70%) !important;
}
.kapak-lamba::after{
  background:
    linear-gradient(180deg, rgba(30,12,58,.84), rgba(30,12,58,.46) 30%, rgba(30,12,58,.54) 62%, rgba(30,12,58,.88)),
    radial-gradient(120% 86% at 50% 40%, rgba(239,203,99,.26), rgba(239,203,99,0) 66%) !important;
}

/* Koyu zeminde (bant, kapak, giriş yan paneli) renkler gece sürümüne döner.
   Token'ı o kapsamda yeniden tanımlamak, içerideki her `var(--ok)` gibi
   kullanımı — satır içi stiller dâhil — tek yerden düzeltir. */
.band,.kapak,.auth-side{
  --ok-parlak:#8CE3C0; --on-ok:#0C2A1F;
  --ok:#63D2A6;    --ok-soft:rgba(99,210,166,.16);
  --warn:#E9B457;  --warn-soft:rgba(233,180,87,.16);
  --bad:#F08CAF;   --bad-soft:rgba(240,140,175,.16);
  --info:#CDA8F5;  --info-soft:rgba(205,168,245,.16);
  --brass:#F3D77E; --brass-deep:#FBE9A8; --brass-soft:rgba(243,215,126,.14);
  --erguvan:#B98CEE; --mor:#B98CEE; --menekse:#CDA8F5;
  --lamba:#F3D77E; --lamba-acik:#FBE9A8; --lamba-koyu:#F3D77E;
}

/* para akışı: mor gradyan section */
.para-akisi-section{
  background:linear-gradient(135deg,#2D1050 0%,#4B2380 40%,#6B3BA8 100%);
  padding-block:clamp(56px,8vw,104px);
}
.para-akisi-section .grid-split{align-items:start}

.para-akisi-left,.para-akisi-right{position:relative}
.para-akisi-left .lede{line-height:1.8; margin-bottom:12px}

.qa-purple{display:grid; gap:32px; margin:48px 0 0; list-style:none}
.qa-purple>div{padding-left:20px; border-left:2px solid rgba(255,212,128,.4)}
.qa-purple dt{font-family:var(--font-baslik); font-weight:600; color:#fff; font-size:16px; font-weight:700; margin-bottom:6px}
.qa-purple dd{margin:0; font-size:15px; color:rgba(255,255,255,.75); line-height:1.7}

.para-akisi-card{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-l); padding:clamp(20px,3vw,30px); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.para-akisi-list{list-style:none; margin:0; padding:0}
.para-akisi-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-size:14.5px; color:rgba(255,255,255,.65); line-height:1.6;
}
.para-akisi-list li:last-child{border-bottom:0}
.para-akisi-list li b{
  color:#ffd480; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-family:var(--font-baslik);
}

.para-akisi-totals{
  margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:grid; gap:8px;
}
.total-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:8px 0;
}
.total-row span{font-size:13px; color:rgba(255,255,255,.65)}
.total-row b{
  font-family:var(--font-baslik); font-weight:600; color:#ffd480;
  font-size:21px; font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  .para-akisi-section .grid-split{grid-template-columns:1fr}
  .para-akisi-right{margin-top:32px}
}

/* Güvenlik notu: kutu değil, bandın üstünde çizgiyle ayrılmış not. */
.guvenlik-not{
  margin-top:clamp(24px,3vw,34px); padding-top:20px;
  border-top:1px solid var(--band-line);
  font-size:13.5px; line-height:1.7; color:var(--band-muted); max-width:46ch;
}
.guvenlik-not b{color:var(--band-ink); font-weight:600}

/* Onaylar: kutu yerine üstten çizgiyle ayrılmış bir dizi (uye-ol). */
.onaylar{margin:4px 0 20px; padding-top:16px; border-top:1px solid var(--line)}
.onaylar .check{padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line)}
.onaylar .check:last-of-type{padding-bottom:0; margin-bottom:0; border-bottom:0}

/* ---------------------------------------------------------------
   Kimlik paneli (giris + uye-ol sol sütun)
   Askı çizimi ve perforasyon kalktı: üstte gerçek fotoğraf, alt
   kenarında karartma ve kimlik yazısı; altında çizgiyle ayrılmış
   künye satırları. Kart görünümü yok, kutu yok.
   --------------------------------------------------------------- */
.kimlik{margin:clamp(22px,3vw,30px) 0 0; max-width:420px}
.kimlik-gorsel{
  position:relative; border-radius:var(--r-m); overflow:hidden;
  /* Kaynak fotoğraflar geniş bant; 16:9 en az kırpan oran. */
  aspect-ratio:16/9; background:var(--band-line);
}
.kimlik-gorsel img{width:100%; height:100%; object-fit:cover; display:block}
.kimlik-gorsel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(16,6,30,.12) 0%,rgba(16,6,30,.04) 42%,rgba(16,6,30,.84) 100%);
}
.kimlik-gorsel figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:clamp(16px,2.2vw,22px);
}
.kimlik .uk-etiket{color:rgba(255,255,255,.72)}
.kimlik .uk-ad{color:#fff; margin-top:5px}
.kimlik .uk-ad.bos{color:rgba(255,255,255,.6); font-weight:500}
.kimlik .uk-kunye{margin-top:20px; gap:0}
.kimlik .uk-kunye li{padding:11px 0; border-bottom:1px solid var(--band-line)}
.kimlik .uk-kunye li:first-child{border-top:1px solid var(--band-line)}
.kimlik .uk-kod{display:block; margin-top:16px}


/* ============================================================
   ÖDEME TAKİBİ
   Kargo takibinin düzeni: yatay bir şerit, her durak bir aşama,
   aralarındaki çizgi ilerlemeyi gösterir. Dar ekranda dikeye döner —
   üç durak yan yana sığmıyor ve sıkıştırmak yazıyı okunmaz yapıyor.
   ============================================================ */
.takip{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); padding:14px 16px}
.takip-kunye{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--line);
}
.takip-kunye b{margin-left:auto; font-family:var(--font-baslik); font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums}
.takip-durum{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.takip-durum.bekle{background:var(--warn-soft); color:var(--warn)}
.takip-durum.ok{background:var(--ok-soft); color:var(--ok)}

.takip-adimlar{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.takip-adimlar li{position:relative; padding:0 10px 0 0; text-align:left}
/* Duraklar arası çizgi: aşamanın tamamlanıp tamamlanmadığını renk
   söyler. Çizgi duraktan çıkar, ayrı bir öğe olsaydı son durakta da
   devam edip şeridi açık uçlu bırakırdı. */
.takip-adimlar li::before{
  content:""; position:absolute; left:26px; right:0; top:12px; height:2px;
  background:var(--line);
}
.takip-adimlar li:last-child::before{display:none}
.takip-adimlar li.tamam::before{background:var(--ok)}
.takip-sim{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:2px solid var(--line-strong); margin-bottom:9px;
  position:relative; z-index:1;
}
.takip-sim svg{width:14px; height:14px; fill:none; stroke:var(--ink-faint); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.takip-adimlar li.tamam .takip-sim{background:var(--ok-soft); border-color:var(--ok)}
.takip-adimlar li.tamam .takip-sim svg{stroke:var(--ok)}
.takip-adimlar li.suren .takip-sim{background:var(--warn-soft); border-color:var(--warn)}
.takip-adimlar li.suren .takip-sim svg{stroke:var(--warn)}
/* Süren aşama nefes alır: ekranın neresine bakılacağını söyler.
   Hareket azaltma açıkken durur. */
.takip-adimlar li.suren .takip-sim::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--warn); opacity:0; animation:takip-nabiz 2s ease-out infinite;
}
@keyframes takip-nabiz{
  0%{transform:scale(.85); opacity:.55}
  70%{transform:scale(1.25); opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.takip-adimlar li.suren .takip-sim::after{animation:none; opacity:.4}}

.takip-adimlar b{display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3}
.takip-adimlar li.sirada b{color:var(--ink-faint)}
.takip-alt{display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--ink-muted)}
.takip-adimlar time{display:block; margin-top:5px; font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.takip-not{margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-muted)}

@media (max-width:640px){
  .takip-adimlar{grid-template-columns:1fr; gap:0}
  .takip-adimlar li{padding:0 0 18px 36px}
  .takip-adimlar li:last-child{padding-bottom:0}
  .takip-adimlar li::before{left:12px; right:auto; top:30px; bottom:6px; width:2px; height:auto}
  .takip-sim{position:absolute; left:0; top:0; margin:0}
}

/* Tablo içinde açılan takip satırı: kendi satırında, hafif girintili.
   Tabloya dördüncü bir sütun eklemek yerine böyle yapıldı — üç aşama
   ve üç zaman bir hücreye sığmıyor. */
.takip-satir > td{padding:0 0 14px !important; background:transparent !important; border-top:0 !important}
.takip-satir .takip{border-style:dashed; background:var(--surface-2)}
.kuyruk-takip{margin-top:12px}
.kuyruk-takip .takip{background:var(--surface-2)}


/* Bekleme süresi ve gecikme. Olağan bekleyiş sarı kalır; eşiği aşan
   bekleyiş kırmızıya döner — "bir şey ters gitti" demek için değil,
   "artık bakmak gerekir" demek için. */
.takip-sure{font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums}
.takip-durum.gec{background:var(--bad-soft); color:var(--bad)}
.takip-adimlar li.gecikti::before{background:var(--line)}
.takip-adimlar li.gecikti .takip-sim{background:var(--bad-soft); border-color:var(--bad)}
.takip-adimlar li.gecikti .takip-sim svg{stroke:var(--bad)}
.takip-adimlar li.gecikti .takip-sim::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--bad); opacity:0; animation:takip-nabiz 2s ease-out infinite;
}
.takip-adimlar li.gecikti .takip-alt{color:var(--bad); font-weight:600}
@media (prefers-reduced-motion:reduce){.takip-adimlar li.gecikti .takip-sim::after{animation:none; opacity:.4}}
.takip-not.gec{color:var(--bad)}

/* ================================================================
   KASA QR — mağaza kasası, müşteri telefonu, ödeme ekranı ve yönetim
   aynı bileşenleri kullanır. Renkler token'lardan; yeni renk yok.
   ================================================================ */
/* zaman çizgisi */
.kq-zaman{list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative}
.kq-zaman::before{content:""; position:absolute; left:7px; top:10px; bottom:10px; width:2px; background:var(--line)}
.kq-olay{position:relative; display:flex; gap:14px; padding:8px 0 8px 0}
.kq-nokta{flex:none; width:16px; height:16px; border-radius:50%; margin-top:2px; background:var(--surface); border:2px solid var(--line-strong); position:relative; z-index:1}
.kq-onayli .kq-nokta{background:var(--ok); border-color:var(--ok)}
.kq-teyit .kq-nokta,.kq-tarandi .kq-nokta{background:var(--mor); border-color:var(--mor)}
.kq-red .kq-nokta,.kq-iptal .kq-nokta{background:var(--bad); border-color:var(--bad)}
.kq-olay > div{display:grid; gap:2px; font-size:13px; line-height:1.45}
.kq-olay b{color:var(--ink); font-weight:600}
.kq-olay span{color:var(--ink-muted)}
.kq-olay time{font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums}

/* ortak marka başlığı: mağaza + Askıda Mutluluk */
.kq-marka{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:var(--r-m); background:var(--band); color:var(--band-ink)}
.kq-marka .kqm-sol{display:flex; align-items:center; gap:12px; min-width:0}
.kq-marka .kqm-harf{flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-family:var(--font-baslik); font-weight:700; font-size:18px; background:transparent; background:color-mix(in srgb,#fff 12%,transparent); color:#fff}
.kq-marka .kqm-ad{display:grid; gap:2px; min-width:0}
.kq-marka .kqm-ad b{font-family:var(--font-baslik); font-size:15px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kq-marka .kqm-ad span{font-size:12px; color:var(--band-muted)}
.kq-marka .kqm-sag{display:flex; align-items:center; gap:8px; flex:none; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lamba-acik); font-weight:600}
.kq-marka .kqm-sag svg{width:20px; height:20px; fill:none; stroke:var(--lamba); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* kalem listesi */
.kq-kalemler{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden}
.kq-kalem{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px; background:var(--surface)}
.kq-kalem + .kq-kalem{border-top:1px solid var(--line)}
.kq-kalem input[type=checkbox]{width:18px; height:18px; accent-color:var(--mor); margin:0}
.kq-kalem .kqk-ad{display:grid; gap:2px; min-width:0}
.kq-kalem .kqk-ad b{font-size:14px; font-weight:600; color:var(--ink)}
.kq-kalem .kqk-ad span{font-size:12px; color:var(--ink-muted)}
.kq-kalem .kqk-tutar{font-family:var(--font-baslik); font-weight:600; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.kq-kalem.pasif{opacity:.5}
.kq-kalem.pasif .kqk-ad b{text-decoration:line-through}
.kq-toplam{display:grid; gap:6px; padding:12px 14px; border-top:1px solid var(--line); background:var(--surface-2); font-size:13px}
.kq-toplam div{display:flex; justify-content:space-between; gap:12px; color:var(--ink-muted)}
.kq-toplam div b{color:var(--ink); font-variant-numeric:tabular-nums}
.kq-toplam div.kqt-kalan{font-size:15px; color:var(--ink); padding-top:6px; border-top:1px dashed var(--line-strong)}
.kq-toplam div.kqt-kalan b{color:var(--mor); font-family:var(--font-baslik); font-size:18px}

/* kasa: QR kartı */
.kq-qr{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface)}
.kq-qr-kutu{width:216px; height:216px; padding:10px; border-radius:14px; background:#fff; border:1px solid var(--line-strong); display:grid; place-items:center}
.kq-qr-kutu img,.kq-qr-kutu canvas{display:block; width:196px !important; height:196px !important; image-rendering:pixelated}
.kq-qr-bilgi{display:grid; gap:10px; min-width:0}
.kq-qr-bilgi .kqq-kod{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:24px; font-weight:700; letter-spacing:.08em; color:var(--ink)}
.kq-qr-bilgi .kqq-not{font-size:13px; line-height:1.55; color:var(--ink-muted)}
.kq-qr-bilgi .kqq-durum{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink)}
.kq-qr-bilgi .kqq-durum i{width:10px; height:10px; border-radius:50%; background:var(--lamba); box-shadow:0 0 0 4px transparent; box-shadow:0 0 0 4px color-mix(in srgb,var(--lamba) 25%,transparent); animation:kq-nabiz 1.6s ease-in-out infinite}
.kq-qr-bilgi .kqq-durum.ok i{background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); animation:none}
@keyframes kq-nabiz{0%,100%{transform:scale(1)} 50%{transform:scale(1.35)}}
@media (max-width:640px){.kq-qr{grid-template-columns:1fr; justify-items:center; text-align:center} .kq-qr-bilgi{justify-items:center}}
.kq-satirlar{display:grid; gap:8px}
.kq-satir{display:grid; grid-template-columns:1fr 72px 130px 36px; gap:8px; align-items:end}
.kq-satir .input{margin:0}
.kq-satir .kq-sil{height:44px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:var(--ink-muted); cursor:pointer; font-size:18px; line-height:1}
.kq-satir .kq-sil:hover{color:var(--bad); border-color:var(--bad)}
@media (max-width:640px){.kq-satir{grid-template-columns:1fr 1fr 36px} .kq-satir .field:first-child{grid-column:1 / -1}}
.kq-istek{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); overflow:hidden}
.kq-istek + .kq-istek{margin-top:10px}
.kq-istek-ust{display:grid; grid-template-columns:1fr auto; gap:10px 14px; align-items:center; padding:12px 14px; cursor:pointer}
.kq-istek-ust .kqi-kod{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; letter-spacing:.06em; color:var(--ink)}
.kq-istek-ust .kqi-alt{font-size:12.5px; color:var(--ink-muted); margin-top:2px}
.kq-istek-govde{padding:14px; border-top:1px solid var(--line); display:grid; gap:14px; background:var(--surface-2)}
.kq-istek.teyit .kq-istek-ust{background:transparent; background:color-mix(in srgb,var(--lamba) 14%,transparent)}
.kq-musteri{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; font-size:13px}
.kq-musteri span{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted)}
.kq-musteri b{font-weight:600; color:var(--ink)}
.kq-eylem{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
/* ---------------- istek listesi belgesi ---------------- */
.ib-belge{display:grid; gap:18px; padding:clamp(18px,3vw,28px); border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); color:var(--ink); box-shadow:0 10px 30px -18px rgba(20,8,40,.35)}
.ib-ust{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:16px; border-bottom:2px solid var(--mor)}
.ib-marka{display:flex; align-items:center; gap:14px; min-width:0}
.ib-logo{flex:none; width:60px; height:60px; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:var(--mor-soft); color:var(--mor); font-family:var(--font-baslik); font-size:24px; font-weight:700; border:1px solid var(--line)}
.ib-logo img{width:100%; height:100%; object-fit:cover; display:block}
.ib-marka-yazi{display:grid; gap:2px; min-width:0}
.ib-marka-yazi b{font-family:var(--font-baslik); font-size:17px; font-weight:700; color:var(--ink); line-height:1.2}
.ib-marka-yazi span{font-size:12.5px; line-height:1.45; color:var(--ink-muted); overflow-wrap:anywhere}
.ib-ep{flex:none; display:grid; gap:2px; justify-items:end}
.ib-ep img{height:34px; width:auto; display:block}
.ib-baslik{display:grid; gap:8px}
.ib-etiket{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-deep)}
.ib-baslik h2{margin:0; font-family:var(--font-baslik); font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.01em; line-height:1.2; color:var(--ink)}
.ib-kunye{display:flex; flex-wrap:wrap; gap:8px 26px; margin:4px 0 0; padding:0}
.ib-kunye div{display:grid; gap:1px}
.ib-kunye dt{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.ib-kunye dd{margin:0; font-size:13.5px; font-weight:600; color:var(--ink)}
.ib-kunye dd.ib-kod{font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.05em; font-weight:700}
.ib-tablo-kap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m)}
.ib-tablo{width:100%; min-width:0; border-collapse:collapse; font-size:14px}
.ib-tablo th{padding:10px 12px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); background:var(--surface-2); border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.ib-tablo td{padding:11px 12px; border-bottom:1px solid var(--line); color:var(--ink)}
.ib-tablo .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.ib-tablo .ib-no{width:34px; color:var(--ink-faint); font-size:12px}
.ib-tablo .ib-tutar{font-weight:600}
.ib-tablo tfoot td{background:var(--surface-2); font-size:13px; color:var(--ink-muted); padding:9px 12px}
.ib-tablo tfoot td.num{color:var(--ink); font-weight:600}
.ib-tablo tfoot tr.ib-kalan td{font-size:15px; color:var(--ink); font-weight:600; border-top:1px dashed var(--line-strong)}
.ib-tablo tfoot tr.ib-kalan td.num{font-family:var(--font-baslik); font-size:19px; color:var(--mor)}
.ib-tablo tr:last-child td{border-bottom:0}
.ib-mesaj{margin:0; padding:12px 16px; border-left:3px solid var(--brass); background:var(--brass-soft); border-radius:0 var(--r-s) var(--r-s) 0; font-size:14px; line-height:1.55; color:var(--ink); font-style:italic}
/* Mağazanın kurumsal hesabı — belgenin ayrı bölümü: hesap sahibi + IBAN. */
.ib-hesap{display:grid; gap:8px; padding:14px 16px; border:1px solid var(--line-strong); border-radius:var(--r-m); background:var(--surface-2)}
.ib-hesap-et{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mor); font-weight:700}
.ib-hesap-govde{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:10px 22px}
.ib-hesap-govde div{display:grid; gap:2px; min-width:0}
.ib-hesap-govde span{font-size:11px; color:var(--ink-faint)}
.ib-hesap-govde b{font-size:14px; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.ib-hesap-govde b.ib-iban{font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.04em; font-size:15px}
.ib-hesap-govde small{font-size:11.5px; color:var(--ink-muted)}
@media (max-width:560px){.ib-hesap-govde{grid-template-columns:1fr}}
/* genel footer kuralı (üst boşluk + çizgi) belgenin altına uygulanmasın */
.ib-alt{display:grid; gap:8px; margin-top:0; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.55; color:var(--ink-muted)}
.ib-alt::before{display:none}
.ib-alt b{color:var(--ink); font-weight:600}
.ib-alt .kq-rozet{justify-self:start}
@media (max-width:560px){
  .ib-ust{flex-direction:column}
  .ib-ep{justify-items:start}
  .ib-tablo th:nth-child(4),.ib-tablo td:nth-child(4){display:none}
}
@media print{
  .ib-belge{box-shadow:none; border-color:#999}
}

/* kasa işlemi: tek kart, üç adım */
.pnl-govde.tek{grid-template-columns:minmax(0,1fr)}
.pnl-govde.tek .pnl-sag{display:none}
.ks-kart{max-width:1100px}
.ks-kart .kq-adimlar{grid-template-columns:repeat(3,1fr); margin-bottom:20px}
.ks-kart .kq-adimlar li{font-size:12.5px; padding:12px 10px}
.ks-kart .kq-adimlar li b{font-size:13px}
.ks-iki{display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; align-items:start}
.ks-blok{min-width:0}
.ks-blok h3{margin:0 0 4px; font-family:var(--font-baslik); font-size:15px; font-weight:600; color:var(--ink)}
.ks-blok .ks-not{display:block; margin-bottom:12px; font-size:12.5px; line-height:1.5; color:var(--ink-muted)}
.ks-blok .field{margin-bottom:12px}
.ks-blok .kq-satirlar .field{margin:0}
.ks-alt{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.ks-alt .err:empty{display:none}
.ks-alt .kq-eylem{margin-left:auto}
.ks-toplam{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; font-size:13px; color:var(--ink-muted)}
.ks-toplam b{margin-left:6px; color:var(--ink); font-variant-numeric:tabular-nums}
.ks-toplam .kalan b{font-family:var(--font-baslik); font-size:17px; color:var(--mor)}
.ks-qr{display:grid; justify-items:center; gap:10px; padding:20px; text-align:center; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2)}
.ks-qr .kqq-kod{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:22px; font-weight:700; letter-spacing:.08em; color:var(--ink)}
.ks-qr .kqq-durum{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink)}
.ks-qr .kqq-durum i{width:10px; height:10px; border-radius:50%; background:var(--lamba); box-shadow:0 0 0 4px transparent; box-shadow:0 0 0 4px color-mix(in srgb,var(--lamba) 25%,transparent); animation:kq-nabiz 1.6s ease-in-out infinite}
.ks-qr .kqq-durum.ok i{background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); animation:none}
.ks-yayin{display:grid; gap:12px; justify-items:start}
.ks-yayin h3{margin:0; font-family:var(--font-baslik); font-size:20px; color:var(--ink)}
.ks-yayin p{margin:0}
.ks-yayin .kqp-bag{display:grid; grid-template-columns:1fr auto; gap:8px; width:100%; max-width:640px}
.ks-yayin .kqp-bag .input{margin:0; font-size:13px}
#ksTablo tr.ks-satir{cursor:pointer}
#ksTablo tr.ks-satir:hover td{background:var(--surface-2)}
#ksTablo tr.ks-satir.etkin td{background:transparent; background:color-mix(in srgb,var(--mor) 8%,transparent)}
#ksTablo .kqi-kod{display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; letter-spacing:.06em}
#ksTablo .hr-alt{display:block; font-size:12px; color:var(--ink-muted); margin-top:2px}
@media (max-width:900px){.ks-iki{grid-template-columns:1fr}}
@media (max-width:640px){.ks-blok .row2{grid-template-columns:1fr} .ks-alt .kq-eylem{margin-left:0; width:100%} .ks-alt .kq-eylem .btn{flex:1}}
@media (prefers-reduced-motion:reduce){.ks-qr .kqq-durum i{animation:none}}

/* telefon: tarama ekranı */
.kq-tarama{display:grid; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface)}
.kq-kamera{position:relative; aspect-ratio:1/1; max-width:360px; width:100%; margin:0 auto; border-radius:16px; overflow:hidden; background:#000}
.kq-kamera video{width:100%; height:100%; object-fit:cover; display:block}
.kq-kamera::after{content:""; position:absolute; inset:14%; border:2px solid rgba(255,255,255,.85); border-radius:14px; box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.kq-kamera .kq-cizgi{position:absolute; left:14%; right:14%; height:2px; background:var(--lamba); top:14%; animation:kq-tara 2.2s ease-in-out infinite; box-shadow:0 0 12px var(--lamba)}
@keyframes kq-tara{0%,100%{top:16%} 50%{top:82%}}
.kq-kod-giris{display:grid; grid-template-columns:1fr auto; gap:8px}
.kq-kod-giris .input{font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; margin:0}
.kq-adimlar{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0; padding:0; list-style:none}
.kq-adimlar li{padding:10px 8px; border-radius:var(--r-s); background:var(--surface-2); text-align:center; font-size:11.5px; line-height:1.35; color:var(--ink-muted); border:1px solid transparent}
.kq-adimlar li b{display:block; font-family:var(--font-baslik); font-size:12px; color:var(--ink); margin-bottom:2px}
.kq-adimlar li.oldu{background:var(--ok-soft); border-color:transparent; border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.kq-adimlar li.oldu b{color:var(--ok)}
.kq-adimlar li.simdi{background:transparent; background:color-mix(in srgb,var(--lamba) 18%,transparent); border-color:var(--lamba)}
@media (max-width:480px){.kq-adimlar{grid-template-columns:repeat(2,1fr)}}
.kq-bekle{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-m); background:var(--surface-2); font-size:13.5px; color:var(--ink)}
.kq-bekle i{flex:none; width:22px; height:22px; border-radius:50%; border:3px solid var(--line-strong); border-top-color:var(--mor); animation:kq-don 1s linear infinite}
@keyframes kq-don{to{transform:rotate(360deg)}}
.kq-paylas{display:grid; gap:10px; padding:16px; border-radius:var(--r-m); border:1px solid transparent; border:1px solid color-mix(in srgb,var(--ok) 35%,transparent); background:var(--ok-soft)}
.kq-paylas .kqp-bag{display:grid; grid-template-columns:1fr auto; gap:8px}
.kq-paylas .kqp-bag .input{margin:0; font-size:13px}
.kq-paylas .kqp-kanal{display:flex; flex-wrap:wrap; gap:8px}
.kq-rozet{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--ok-soft); color:var(--ok); border:1px solid transparent; border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.kq-rozet svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.kq-kamera .kq-cizgi,.kq-bekle i,.kq-qr-bilgi .kqq-durum i{animation:none}}
/* Kasa QR listeleri .uy-kart içinde: kartın madde imi ve sol boşluğu bu
   listelere uygulanmaz; .uy-kart .btn tam genişlik kuralı da düğme
   sıralarını bozmasın. Dar ekranda marka başlığı iki satıra iner. */
.uy-kart .kq-kalem,.uy-kart .kq-adimlar li,.uy-kart .kq-olay,.uy-kart .kq-toplam{padding-left:14px}
.uy-kart .kq-adimlar li{padding:10px 8px}
.uy-kart .kq-olay{padding-left:0}
.uy-kart .kq-kalem::before,.uy-kart .kq-adimlar li::before,.uy-kart .kq-olay::before,.uy-kart .kq-toplam::before{display:none}
.uy-kart .kq-olay b,.uy-kart .kq-kalem b{color:var(--ink)}
.uy-kart .kqp-kanal .btn,.uy-kart .kqp-bag .btn,.uy-kart .kq-kod-giris .btn{width:auto}
.kq-marka{flex-wrap:wrap}
.kq-marka .kqm-ad b{white-space:normal}
.kq-marka .kqm-sag{margin-left:auto}
/* Onay bekleyen başvurunun düğmesi: metin gibi değil, belirgin sarı düğme.
   Yönetici "Onayla"yı satırda ilk bakışta görmeli. */
.uy-btn.onay{
  background:var(--lamba); color:#2A0F52; font-weight:700; border-radius:999px;
  padding:8px 16px; box-shadow:0 6px 14px -8px rgba(0,0,0,.6);
}
.uy-btn.onay:hover{background:var(--lamba-acik); color:#2A0F52}
/* Dar ekranda işlem hücresi taşmasın: sarı Onayla düğmesi kendi satırına
   alınır, Görüntüle ve menü altına düşer. Geniş ekranda tek satır. */
.uy-islem{flex-wrap:wrap}
@media (max-width:1100px){.uy-btn.onay{flex:1 1 100%; text-align:center}}
/* Kullanıcılar: arama kutusu ve süzgeçler çip satırıyla aynı dilde —
   hap biçimli, aynı yükseklik, sola dizili; arama kutusu ekranı kaplamaz. */
.uy-arac{gap:8px; margin-bottom:10px; align-items:center}
.uy-ara{flex:0 1 260px}
.uy-ara input{height:40px; border-radius:999px; padding-left:38px}
.uy-ara svg{left:14px}
.uy-secim{height:40px; border-radius:999px; min-width:140px; padding-left:16px}

/* ================================================================
   DESTEK MODU ŞERİDİ — yönetici bir üyenin/markanın paneline destek
   amacıyla girdiğinde sayfanın en üstünde durur; kapanana kadar kalır.
   ================================================================ */
.destek-serit{
  position:sticky; top:0; z-index:200; display:flex; align-items:center; gap:12px;
  padding:10px 18px; background:var(--bad); color:#fff; font-size:13.5px; line-height:1.4;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.6);
}
.destek-serit .ds-nokta{flex:none; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25); animation:kq-nabiz 1.6s ease-in-out infinite}
.destek-serit .ds-yazi{flex:1; min-width:0}
.destek-serit .ds-yazi b{font-weight:700}
.destek-serit .ds-kapat{
  flex:none; border:1px solid rgba(255,255,255,.7); background:#fff; color:var(--bad);
  border-radius:999px; padding:7px 14px; font:600 13px/1 var(--font-arayuz); cursor:pointer;
}
.destek-serit .ds-kapat:hover{background:transparent; color:#fff}
@media (max-width:640px){.destek-serit{flex-wrap:wrap} .destek-serit .ds-kapat{width:100%; text-align:center}}
/* Destek modunda şifre alanları kapalı: yöneticinin kişinin şifresine dokunması yok. */
.destek-modu .destek-gizle{display:none !important}

/* Yönetim: destek erişimi kutusu */
.destek-kutu{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; margin-top:10px}
.destek-kutu .input{margin:0; font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; height:40px; border-radius:999px}
/* Kayıt/giriş ızgarasında sayfa izi: kendi satırında, üstte, sütunları
   büyütmeden. Aksi hâlde ızgaranın fazla yüksekliği iki satıra eşit
   bölünüyor ve izin altında koca bir boşluk kalıyordu. */
.auth:has(> .sayfa-izi){grid-template-rows:auto 1fr}
.auth > .sayfa-izi{grid-column:1 / -1; align-self:start; padding:14px 22px 0}
/* kasa işlemi · müşterinin giriş bilgileri (geçici şifre) */
.ks-sifre{display:grid; gap:6px; width:100%; max-width:640px; padding:14px 16px; border:1px solid transparent; border:1px solid color-mix(in srgb,var(--mor) 30%,transparent); border-radius:var(--r-m); background:var(--mor-soft)}
.ks-sifre-bas{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}
.ks-sifre-satir{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13.5px}
.ks-sifre-satir span{min-width:96px; color:var(--ink-muted)}
.ks-sifre-satir b{color:var(--ink); font-weight:600; overflow-wrap:anywhere}
.ks-sifre-satir b.kod{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:20px; letter-spacing:.14em; padding:4px 10px; border-radius:var(--r-s); background:var(--surface); border:1px solid var(--line-strong)}
.ks-sifre small{font-size:12px; line-height:1.5; color:var(--ink-muted)}
.btn.btn-sm{padding:7px 12px; font-size:12.5px; min-height:0}

/* ---------------- marka vitrini (ödeme sayfası, dekont) ---------------- */
.hv-marka{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px 16px; align-items:center;
  margin-top:12px; padding:16px 18px; border-radius:var(--r-m);
  background:linear-gradient(135deg,var(--mor-soft),var(--surface)); border:1px solid transparent; border:1px solid color-mix(in srgb,var(--mor) 22%,transparent);
}
.hv-marka .ib-logo{width:76px; height:76px; border-radius:16px; font-size:30px; background:var(--surface); box-shadow:0 6px 18px -10px rgba(20,8,40,.5)}
.hv-marka .hvm-yazi{display:grid; gap:3px; min-width:0}
.hv-marka .hvm-etiket{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-deep)}
.hv-marka .hvm-ad{font-family:var(--font-baslik); font-size:19px; font-weight:700; line-height:1.15; color:var(--ink); letter-spacing:-.01em}
.hv-marka .hvm-slogan{font-size:12.5px; color:var(--ink-muted)}
.hv-marka .hvm-ep{align-self:start}
.hv-marka .hvm-ep img{height:30px; width:auto; display:block}
.hv-marka .hvm-liste{grid-column:1 / -1; display:grid; gap:6px; margin:2px 0 0; padding:10px 0 0; border-top:1px solid transparent; border-top:1px solid color-mix(in srgb,var(--mor) 18%,transparent); list-style:none}
.hv-marka .hvm-liste li{display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.hv-marka .hvm-liste svg{width:15px; height:15px; flex:none; margin-top:2px; fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hv-marka .hvm-liste a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.hv-marka .hvm-liste a:hover{color:var(--mor); border-bottom-color:var(--mor)}
.hv-marka .hvm-yok{font-size:12px; color:var(--ink-faint)}
@media (max-width:520px){.hv-marka{grid-template-columns:auto minmax(0,1fr)} .hv-marka .hvm-ep{grid-column:1 / -1; justify-self:start}}
@media print{.hv-marka{background:none; border-color:#999; box-shadow:none} .hv-marka .ib-logo{box-shadow:none}}

/* =====================================================================
   TEŞEKKÜR KARTI (.tesekkur-kart) — dekont sonrası otomatik oluşan kart.
   Ödeme "Havale bilgileri" ile aynı düz dil: temiz alan listesi (etiket/değer),
   ALICI IBAN kutusu ve ALICI MAĞAZA kartı (.hv-marka). Katkı yapan (ödeme
   sonuç) ve marka yöneticisi (panel) aynı kartı görür.
   ===================================================================== */
.tesekkur-kart{display:grid; gap:16px; padding:clamp(16px,2.4vw,22px); border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); color:var(--ink); text-align:left}
.tesekkur-kart .tsk-bas{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.tesekkur-kart .tsk-bas-yz{min-width:0; display:grid; gap:3px}
.tesekkur-kart .tsk-et{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-deep)}
.tesekkur-kart .tsk-bas-yz b{font-family:var(--font-baslik); font-size:clamp(17px,2.2vw,21px); font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.15}
.tesekkur-kart .tsk-rozet{flex:none; font-size:11px; font-weight:600; letter-spacing:.02em; padding:4px 11px; border-radius:999px; white-space:nowrap}
.tesekkur-kart .tsk-rozet.bek{background:var(--warn-soft); color:var(--warn)}
.tesekkur-kart .tsk-rozet.ok{background:var(--ok-soft); color:var(--ok)}
.tesekkur-kart .tsk-alanlar{display:grid; gap:11px; margin:0}
.tesekkur-kart .tsk-alan{display:grid; grid-template-columns:minmax(88px,120px) 1fr; gap:8px 18px; align-items:baseline}
.tesekkur-kart .tsk-alan dt{margin:0; font-size:13px; color:var(--ink-muted)}
.tesekkur-kart .tsk-alan dd{margin:0; font-size:13.5px; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.tesekkur-kart .tsk-alan dd.tsk-mono{font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.04em; font-weight:700}
.tesekkur-kart .tsk-alan dd.tsk-vurgu{font-family:var(--font-baslik); font-size:17px; font-weight:700; color:var(--mor); font-variant-numeric:tabular-nums}
.tesekkur-kart .tsk-iban{display:grid; gap:5px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2)}
.tesekkur-kart .tsk-iban-et{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); font-weight:700}
.tesekkur-kart .tsk-iban b{font-size:15px; color:var(--ink)}
.tesekkur-kart .hv-marka{margin:0}
.tesekkur-kart .tsk-alt{margin:0; font-size:11.5px; line-height:1.55; color:var(--ink-faint)}
.tesekkur-kart.onayli .tsk-et{color:var(--ok)}
.tesekkur-kart.onayli .tsk-alan dd.tsk-vurgu{color:var(--ok)}
@media (max-width:520px){ .tesekkur-kart .tsk-hesap-govde{grid-template-columns:1fr} }

/* =====================================================================
   DEKONT STANDARDI (.dks) — bankadan bağımsız altı alan:
   Gönderen · Tutar · Tarih · Saat · Alıcı · Açıklama.
   Teşekkür kartı, dekont sayfası ve onay penceresi aynı bloğu basar.
   ===================================================================== */
.dks{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface-2); overflow:hidden}
.dks-bas{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); border-bottom:1px solid var(--line)}
.dks-bas span{font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink-faint)}
.dks-satir{display:grid; grid-template-columns:minmax(80px,110px) 1fr; gap:6px 14px; align-items:baseline; padding:8px 14px; border-bottom:1px solid var(--line)}
.dks-satir:last-child{border-bottom:0}
.dks-satir span{font-size:12.5px; color:var(--ink-muted)}
.dks-satir b{font-size:13.5px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.dks-satir.dks-tutar b{color:var(--mor); font-size:15px; font-weight:700}
.dks-yok{font-style:normal; font-weight:500; color:var(--warn)}

/* =====================================================================
   HEDİYE KATKI KARTI (.katki-kunye) — kampanya sayfası.
   Ödeme sayfalarının bilinen kalıbı: başlık + meta · adım göstergesi ·
   "Havale bilgileri" talimat listesi (etiket · değer · kopyala) ·
   dekont yükleme alanı · yasal not. Tek yüzey, tek vurgu rengi, kutu
   içinde kutu yok; ölçüler 14 / 13 / 12 px.
   ===================================================================== */
.katki-kunye{gap:22px; padding:clamp(20px,2.8vw,30px)}
.katki-kunye .tsk-bas{padding-bottom:0; border-bottom:0; align-items:center}
.katki-kunye .tsk-bas-yz b{font-size:clamp(22px,2.6vw,28px); letter-spacing:-.02em}
.katki-kunye .kh-logo{flex:none; align-self:center}
.katki-kunye .kh-logo img{display:block; height:clamp(34px,3.6vw,40px); width:auto}

/* meta satırı: mağaza · kimin adına · kategori · doğrulama */
.katki-kunye .kh-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; margin-top:-8px; font-size:13.5px; color:var(--ink-muted)}
.katki-kunye .kh-meta > span{display:inline-flex; align-items:center}
.katki-kunye .kh-meta > span + span::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--ink-faint); margin:0 10px}
.katki-kunye .kh-meta b{font-weight:600; color:var(--ink)}
.katki-kunye .kh-onay{gap:5px; font-weight:600; color:var(--ok); margin-left:auto}
.katki-kunye .kh-meta > .kh-onay::before{display:none}
.katki-kunye .kh-onay svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* adım göstergesi: 1 Ödeme — 2 Dekont — 3 Onay */
.katki-kunye .kh-stepper{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.katki-kunye .kh-stepper li{display:flex; align-items:center; gap:9px; min-width:0; padding-top:10px; border-top:2px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-faint)}
.katki-kunye .kh-stepper li i{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink-faint); background:var(--surface-2); border:1px solid var(--line)}
.katki-kunye .kh-stepper li.aktif{border-top-color:var(--mor); color:var(--ink)}
.katki-kunye .kh-stepper li.aktif i{background:var(--mor); border-color:var(--mor); color:#fff}
.katki-kunye .kh-stepper li span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* bölüm: başlık + açıklama, altında içerik */
.katki-kunye .kh-bolum{display:grid; gap:12px}
.katki-kunye .kh-bolum-bas{display:grid; gap:2px}
.katki-kunye .kh-bolum-bas > b{font-size:15px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px}
.katki-kunye .kh-bolum-bas > span{font-size:13px; line-height:1.5; color:var(--ink-muted)}
.katki-kunye .kh-zorunlu{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bad); padding:2px 7px; border-radius:4px; background:var(--bad-soft)}

/* marka künyesi: satıcı kimliği — logo · ad + doğrulama · alt bilgi · eylemler.
   Talimat listesiyle aynı yüzey ve kenarlık; tek satır, darda eylemler alta. */
.katki-kunye .kh-marka{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px 14px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface)}
.katki-kunye .kh-marka-logo{width:48px; height:48px; border-radius:12px; overflow:hidden; display:grid; place-items:center; background:var(--mor-soft); border:1px solid var(--line); font-family:var(--font-baslik); font-size:20px; font-weight:800; color:var(--mor)}
.katki-kunye .kh-marka-logo img{width:100%; height:100%; object-fit:cover; display:block}
.katki-kunye .kh-marka-yazi{display:grid; gap:2px; min-width:0}
.katki-kunye .kh-kap{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}
.katki-kunye .kh-marka-yazi > b{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--ink); line-height:1.25; min-width:0}
.katki-kunye .kh-marka-yazi > b{overflow-wrap:anywhere}
.katki-kunye .kh-marka-onay{flex:none; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; background:var(--ok); color:#fff}
.katki-kunye .kh-marka-onay svg{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.katki-kunye .kh-marka-yazi > small{font-size:12px; color:var(--ink-muted)}
.katki-kunye .kh-marka-eylem{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.katki-kunye .kh-pill{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:none; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); white-space:nowrap; transition:border-color .15s ease, color .15s ease, background .15s ease}
.katki-kunye .kh-pill:hover{border-color:var(--mor); color:var(--mor); background:var(--mor-soft)}
.katki-kunye .kh-pill:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.katki-kunye .kh-pill svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.katki-kunye .kh-marka-yok{font-size:12px; color:var(--ink-faint)}
@media (max-width:640px){
  .katki-kunye .kh-marka{grid-template-columns:auto minmax(0,1fr)}
  .katki-kunye .kh-marka-eylem{grid-column:1 / -1; justify-content:flex-start; padding-top:10px; border-top:1px solid var(--line)}
}
/* talimat listesi: etiket · değer · kopyala */
.katki-kunye .kh-liste{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); overflow:hidden}
.katki-kunye .kh-satir2{display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line)}
.katki-kunye .kh-satir2:first-child{border-top:0}
.katki-kunye .kh-et{font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink-muted)}
.katki-kunye .kh-dg{display:grid; gap:2px; min-width:0; font-size:14px; color:var(--ink); overflow-wrap:anywhere}
.katki-kunye .kh-dg b{font-weight:600; color:var(--ink)}
.katki-kunye .kh-dg small{font-size:12px; color:var(--ink-muted)}
.katki-kunye .kh-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.katki-kunye .kh-ack{font-size:12.5px; line-height:1.5}
.katki-kunye .kh-yok{font-size:13px; color:var(--warn)}
.katki-kunye .kh-kopya{
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink); cursor:pointer; white-space:nowrap; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.katki-kunye .kh-kopya:hover{border-color:var(--mor); color:var(--mor); background:var(--mor-soft)}
.katki-kunye .kh-kopya:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.katki-kunye .kh-kopya svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.katki-kunye .kh-kopya .tik{display:none}
.katki-kunye .kh-kopya.ok{border-color:var(--ok); color:var(--ok); background:var(--ok-soft)}
.katki-kunye .kh-kopya.ok .tik{display:block}
.katki-kunye .kh-kopya.ok .pano{display:none}
.katki-kunye .kh-ipucu{display:flex; align-items:flex-start; gap:8px; margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-muted)}
.katki-kunye .kh-ipucu b{font-weight:600; color:var(--ink)}
.katki-kunye .kh-ipucu svg{flex:none; width:15px; height:15px; margin-top:2px; fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* dekont yükleme alanı */
.katki-kunye .kh-yukle{
  display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
  border:1.5px dashed var(--line-strong, var(--line)); border-radius:var(--r-m); background:var(--surface-2);
  transition:border-color .15s ease, background .15s ease;
}
.katki-kunye .kh-yukle:hover, .katki-kunye .kh-yukle.surukle{border-color:var(--mor); background:var(--mor-soft)}
.katki-kunye .kh-yukle-ikon{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line)}
.katki-kunye .kh-yukle-ikon svg{width:20px; height:20px; fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.katki-kunye .kh-yukle-yazi{display:grid; gap:2px; min-width:0; flex:1}
.katki-kunye .kh-yukle-yazi b{font-size:14px; font-weight:600; color:var(--ink)}
.katki-kunye .kh-bicim{font-size:12px; color:var(--ink-muted)}
.katki-kunye .kh-yukle-btn{flex:none; padding:10px 16px; font-size:13.5px}
@media (max-width:560px){
  .katki-kunye .kh-yukle{flex-wrap:wrap}
  .katki-kunye .kh-yukle-btn{width:100%; text-align:center}
}
/* seçilen dekont: yükleme alanının yerine geçer */
.katki-kunye .kh-secili{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border:1px solid transparent; border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);
  border-radius:var(--r-m); background:var(--ok-soft);
}
.katki-kunye .kh-secili svg{width:16px; height:16px; flex:none; fill:none; stroke:var(--ok); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.katki-kunye .kh-secili span{min-width:0; flex:1; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.katki-kunye .kh-secili button{flex:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; background:none; border:0; padding:2px 0; color:var(--ink-muted); text-decoration:underline}
.katki-kunye .kh-secili button:hover{color:var(--bad)}
.katki-kunye .kh-hata:empty{display:none}
.katki-kunye .kh-hata{display:block; font-size:12.5px; font-weight:500; color:var(--bad)}

/* yasal not */
.katki-kunye .kh-uyari{margin:0; padding-top:14px; border-top:1px solid var(--line); font-size:11.5px; line-height:1.55; color:var(--ink-faint)}
.katki-kunye .kh-uyari a{color:inherit; text-decoration:underline}

@media (max-width:520px){
  .katki-kunye .kh-satir2{grid-template-columns:minmax(0,1fr) auto; row-gap:4px}
  .katki-kunye .kh-et{grid-column:1 / -1}
  .katki-kunye .kh-stepper li span{font-size:12px}
}


/* ============================================================
   YALIN SAYFA DÜZENİ (.ak) — Nasıl çalışır ve Markalar ortak kullanır.
   Başlık + yol (3 durak) + fotoğraflı adım kartları + özellik kutusu +
   eylem düğmeleri. Adım sayısı serbest: kartlar eşit sütunlara dağılır;
   1060px altında dikey akış, fotoğraf solda.
   ============================================================ */
/* ---------------- işleyiş ---------------- */
.ak{padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px); background:linear-gradient(180deg,var(--surface-2),var(--ground))}
.ak-bas{text-align:center; max-width:760px; margin-inline:auto}
.ak-bas .eyebrow{color:var(--mor)}
.ak-bas h1,.ak-bas h2{margin:8px 0 0; font-family:var(--font-baslik); font-size:clamp(28px,3.6vw,44px); line-height:1.1; letter-spacing:-.02em; color:var(--green); text-wrap:balance}
.ak-bas p{margin:10px auto 0; max-width:56ch; font-size:16px; color:var(--ink-muted)}

.ak-akis{list-style:none; margin:clamp(24px,3vw,40px) 0 0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:18px}
.ak-adim{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow)}
/* adımlar arası ok */
.ak-adim:not(:last-child)::after{
  content:""; position:absolute; z-index:2; right:-15px; top:28%; width:12px; height:12px;
  border-right:2.5px solid var(--mor); border-top:2.5px solid var(--mor); transform:rotate(45deg);
}
.ak-foto{position:relative; margin:0; aspect-ratio:4/3; border-radius:17px 17px 0 0; overflow:hidden; background-color:var(--surface-2); background-position:center; background-size:cover; background-repeat:no-repeat}
.ak-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(36,19,56,0) 45%,rgba(36,19,56,.5))}
.ak-cip{
  position:absolute; z-index:1; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.95); color:#241338;
  font-size:11.5px; font-weight:600; white-space:nowrap; box-shadow:0 6px 16px -8px rgba(0,0,0,.55);
}
.ak-cip svg{width:13px; height:13px; flex:none; fill:none; stroke:#6D2FBF; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
/* tarama çerçevesi */
.ak-kose{position:absolute; z-index:1; width:18px; height:18px; border:3px solid #EFCB63}
.ak-kose.a{left:14%; top:12%; border-right:0; border-bottom:0}
.ak-kose.b{right:14%; top:12%; border-left:0; border-bottom:0}
.ak-kose.c{left:14%; bottom:30%; border-right:0; border-top:0}
.ak-kose.d{right:14%; bottom:30%; border-left:0; border-top:0}
/* ibra kaşesi */
.ak-muhur{
  position:absolute; z-index:1; left:50%; top:44%; transform:translate(-50%,-50%) rotate(-9deg);
  padding:7px 14px; border:3px solid #fff; border-radius:8px; background:rgba(28,107,78,.88); color:#fff;
  font-family:var(--font-baslik); font-weight:700; font-size:16px; letter-spacing:.1em; text-align:center; line-height:1.15;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
}
.ak-muhur small{display:block; font-size:10px; letter-spacing:.14em}

.ak-yazi{padding:14px 16px 18px; display:grid; gap:6px; align-content:start}
.ak-no{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:var(--on-green); font-family:var(--font-baslik); font-weight:700; font-size:14px}
.ak-adim.son .ak-no{background:#6D2FBF; color:#EFCB63}
.ak-yazi h2,.ak-yazi h3{margin:4px 0 0; font-family:var(--font-baslik); font-size:16.5px; line-height:1.25; letter-spacing:-.01em; color:var(--ink)}
.ak-yazi p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-muted)}

/* kartta yer alanlar */
.ak-ozellik{margin:clamp(20px,2.6vw,32px) 0 0; padding:18px; border-radius:18px; background:var(--lamba-soft); border:1px solid var(--lamba); border:1px solid color-mix(in srgb,var(--lamba) 55%,transparent)}
.ak-ozellik h3{margin:0 0 12px; display:flex; align-items:center; gap:8px; font-family:var(--font-arayuz); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lamba-koyu)}
.ak-ozellik h3 svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ak-ozellik ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.ak-ozellik li{padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.ak-ozellik li b{display:block; font-size:14px; color:var(--ink)}
.ak-ozellik li span{display:block; margin-top:3px; font-size:12.5px; color:var(--ink-muted)}
.ak-bar{height:6px; margin-top:8px; border-radius:999px; background:var(--surface-2); overflow:hidden}
.ak-bar i{display:block; width:63%; height:100%; border-radius:999px; background:var(--brass)}

.ak-eylem{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(20px,2.6vw,30px)}

/* yol: fatura → istek listesi → hediye kabulü */
.ak-yol{list-style:none; margin:clamp(20px,2.6vw,30px) auto 0; padding:0; max-width:720px; display:grid; grid-template-columns:repeat(3,1fr); position:relative}
.ak-yol::before{content:""; position:absolute; left:16.66%; right:16.66%; top:27px; border-top:2.5px dashed var(--mor); border-top:2.5px dashed color-mix(in srgb,var(--mor) 55%,transparent)}
.ak-yol li{position:relative; display:grid; justify-items:center; gap:8px; text-align:center}
.ak-yol .ik{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--mor); color:var(--mor); box-shadow:var(--shadow)}
/* Son adım marka renginde: mor dolgu + lamba sarısı simge (yeşil değil). */
.ak-yol li:last-child .ik{background:#6D2FBF; border-color:#6D2FBF; color:#EFCB63}
.ak-yol .ik svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ak-yol b{font-family:var(--font-baslik); font-size:15px; color:var(--ink)}
.ak-yol small{display:block; margin-top:-4px; font-size:12px; color:var(--ink-faint)}
@media (max-width:560px){.ak-yol .ik{width:48px; height:48px} .ak-yol::before{top:23px} .ak-yol b{font-size:13.5px} .ak-yol small{font-size:11px}}

/* orta boy ve telefon: dikey akış, fotoğraf solda */
@media (max-width:1060px){
  .ak-akis{grid-auto-flow:row; grid-template-columns:1fr; gap:14px; max-width:640px; margin-inline:auto}
  .ak-adim{flex-direction:row}
  .ak-adim:not(:last-child)::after{right:auto; left:calc(clamp(112px,30%,190px) / 2 - 6px); top:auto; bottom:-12px; transform:rotate(135deg)}
  .ak-foto{flex:none; width:clamp(112px,30%,190px); aspect-ratio:auto; min-height:112px; border-radius:17px 0 0 17px}
  .ak-yazi{padding:14px 16px; align-content:center}
  .ak-ozellik{max-width:640px; margin-inline:auto}
  .ak-ozellik ul{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ak-cip{display:none}
  .ak-muhur{font-size:12px; padding:5px 8px; border-width:2px}
  .ak-muhur small{font-size:8px}
  .ak-kose{width:12px; height:12px; border-width:2.5px}
  .ak-yazi h2{font-size:16px}
  .ak-eylem .btn{flex:1 1 100%}
}

/* Yalın düzen ek parçaları: ara bölüm başlığı + kutu ızgarası
   (Markalar: kazanımlar ve marka paneli alanları). */
.ak-bolum{margin-top:clamp(38px,5vw,64px); text-align:center}
.ak-bolum h2{margin:0; font-family:var(--font-baslik); font-size:clamp(22px,2.4vw,30px); line-height:1.15; color:var(--green)}
.ak-bolum .ak-alt{margin:8px auto 0; max-width:56ch; font-size:15.5px; color:var(--ink-muted)}
.ak-bolum + .ak-akis,.ak-bolum + .ak-kutular{margin-top:22px}
.ak-kutular{list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.ak-kutu{padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow)}
.ak-kutu .ik{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--mor-soft); color:var(--mor)}
.ak-kutu .ik svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ak-kutu b{display:block; margin-top:12px; font-family:var(--font-baslik); font-size:16.5px; font-weight:700; line-height:1.3; color:var(--ink)}
.ak-kutu span:not(.ik){display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--ink-muted)}
@media (max-width:760px){.ak-kutular{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}}
@media (max-width:640px){.ak-kutular.uclu{grid-template-columns:1fr}}
@media (max-width:480px){
  .ak-kutu{padding:14px}
  .ak-kutu .ik{width:34px; height:34px; border-radius:10px}
  .ak-kutu b{margin-top:10px; font-size:15px}
  .ak-kutu span:not(.ik){font-size:13px}
  .ak-kutular.uclu .ak-kutu{display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center}
  .ak-kutular.uclu .ak-kutu .ik{grid-row:span 2}
  .ak-kutular.uclu .ak-kutu b{margin-top:0}
}
/* Sayfa geçişi: aynı sitede sayfalar arasında kısa, yumuşak geçiş
   (beyaz yanıp sönme yok). Hareket azaltma tercihinde kapalı. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Yerleşim kayması (CLS) önlemi: üst çubuk betikle eklenir; yeri baştan
   ayrılır ki içerik sonradan aşağı itilmesin (masaüstü 71px, telefon 67px). */
#ust{min-height:71px}
@media (max-width:940px){#ust{min-height:67px}}

/* ================================================================
   UYGULAMA ÖLÇÜ ÖLÇEĞİ — yeni bileşenlerin (vitrin, kategoriler, alt
   çubuk, profil) tüm boşluk/köşe/yazı ölçüleri buradan: 4'lük ızgara.
   Sayfa kenar boşluğu sitenin .wrap değeriyle (22px) aynıdır; böylece
   banner, kategori ve liste kenarları aynı çizgide hizalanır.
   ================================================================ */
:root{
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:20px; --a6:24px; --a8:32px;
  --kenar:22px; --r-kart:12px;
  --y-kucuk:11px; --y-etiket:12px; --y-govde:15px; --y-baslik:17px; --y-bolum:19px;
  --altcubuk-h:62px;
}

/* ================================================================
   ALT SEKME ÇUBUĞU (telefon/tablet ≤940px) — sayfalar arası geçiş.
   Mobil uygulama düzeni: 5 sekme, ortada yükseltilmiş Başlat düğmesi,
   etiketli simgeler, en az 48px dokunma alanı, safe-area payı.
   Masaüstünde üst menü kullanılır; çubuk gizlidir.
   ================================================================ */
.altcubuk{display:none}
@media (max-width:940px){
  html.alt-cubuklu body{padding-bottom:calc(var(--altcubuk-h) + var(--a1) + env(safe-area-inset-bottom))}
  /* Alt çubuğun üstünde kalması gerekenler: bildirim, uygulamayı yükle; yüzen
     Başlat düğmesi çubuğun ortasındaki düğmeyle aynı işi yaptığı için gizli. */
  html.alt-cubuklu .toasts{bottom:calc(var(--altcubuk-h) + var(--a3) + env(safe-area-inset-bottom)); right:var(--a3); left:var(--a3); max-width:none}
  html.alt-cubuklu .uyg-kur{bottom:calc(var(--altcubuk-h) + var(--a3) + env(safe-area-inset-bottom))}
  html.alt-cubuklu .baslat-yuzen{display:none !important}
  /* Klavye açıkken çubuk alanı kapatmasın (uygulama davranışı). */
  html.klavye-acik .altcubuk{display:none}
  .altcubuk{
    position:fixed; left:0; right:0; bottom:0; z-index:65;
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
    height:calc(var(--altcubuk-h) + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom);
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 18px -14px rgba(36,19,56,.4);
  }
  .altcubuk a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:58px; padding:6px 2px 4px; text-decoration:none;
    font-size:11px; font-weight:600; line-height:1.1; color:#8C82A0;
    -webkit-tap-highlight-color:transparent;
  }
  .altcubuk svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .altcubuk a[aria-current="page"]{color:var(--mor)}
  .altcubuk a[aria-current="page"] svg{stroke-width:2.2}
  .altcubuk a:active{opacity:.7}
  .altcubuk .altcubuk-orta{justify-content:flex-end; gap:4px; color:var(--mor)}
  .altcubuk-orta i{
    display:grid; place-items:center; width:58px; height:58px; margin-top:-26px; border-radius:50%;
    background:#5A2CC2; border:4px solid #fff; box-shadow:0 8px 18px -8px rgba(74,29,140,.75);
  }
  .altcubuk-orta i svg{width:26px; height:26px; stroke:#FFD23F; stroke-width:2.2}
  html.menu-acik .altcubuk{display:none}
}

/* ================================================================
   VİTRİN — kayan banner (ana sayfa + kategori sayfaları ortak).
   Premium, sade: düz palet zemini (gradient/karartma yok), solda
   küçük üst etiket + iki satır başlık + "Hemen bak" bağlantısı, sağda
   kenardan kenara kırpılmış fotoğraf. Renkler yalnız site paletinden.
   Ölçüler Getir referansı (375pt): kart = ekran − 36px (iki yanda
   komşunun 18px'i görünür), aralık 8px, oran 1,98:1, köşe 12px.
   Masaüstünde aynı oran, üç kart yan yana.
   ================================================================ */
.vitrin{padding:var(--a3) 0 var(--a1)}
.vitrin-kaydir{
  display:flex; gap:var(--a2); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 var(--kenar); scroll-padding:0 var(--kenar);
}
.vitrin-kaydir::-webkit-scrollbar{display:none}
.vitrin-kart{
  --vz:var(--erguvan); --vy:#fff; --vv:var(--lamba); --vs:rgba(255,255,255,.72);
  position:relative; flex:0 0 calc(100% - 2 * var(--kenar)); aspect-ratio:1.98 / 1; scroll-snap-align:center;
  display:grid; grid-template-columns:54% 46%; border-radius:var(--r-kart); overflow:hidden;
  text-decoration:none; background:var(--vz); color:var(--vy);
  box-shadow:inset 0 0 0 1px rgba(36,19,56,.06);
}
.vitrin-kart.t-lila{--vz:var(--mor-soft); --vy:var(--ink); --vv:var(--mor); --vs:var(--ink-muted)}
.vitrin-kart.t-lamba{--vz:var(--lamba-soft); --vy:var(--ink); --vv:var(--lamba-koyu); --vs:var(--ink-muted)}
.vitrin-kart.t-derin{--vz:var(--green); --vy:#fff; --vv:var(--lamba-acik); --vs:rgba(255,255,255,.72)}
.vt-yazi{display:flex; flex-direction:column; justify-content:center; gap:var(--a2); min-width:0; padding:var(--a3) var(--a2) var(--a3) var(--a4)}
.vt-et{font-size:var(--y-kucuk); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--vs)}
.vt-bas{margin:0; font-size:var(--y-baslik); font-weight:700; line-height:1.18; letter-spacing:-.01em}
.vt-bas em{font-style:normal; color:var(--vv)}
.vt-git{display:inline-flex; align-items:center; gap:var(--a1); font-size:13px; font-weight:700; color:var(--vy)}
.vt-git svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.vt-foto{background:var(--surface-2) center/cover no-repeat}
.vitrin-kart:active{opacity:.92}
.vitrin-nokta{display:flex; justify-content:center; gap:0; margin-top:var(--a1)}
.vitrin-nokta button{display:grid; place-items:center; min-width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer}
.vitrin-nokta button::before{content:""; width:6px; height:6px; border-radius:99px; background:var(--line-strong); transition:width .2s, background .2s}
.vitrin-nokta button[aria-current="true"]::before{width:18px; background:var(--mor)}
@media (max-width:360px){ .vt-bas{font-size:16px} .vt-et{display:none} }
@media (min-width:761px){
  .vitrin{padding-top:20px}
  /* Şerit sayfa içeriğiyle (.wrap) aynı genişlikte ve hizada; kenarlarda boşluk ya da taşan kart kalmaz. */
  .vitrin-kaydir{gap:var(--a3); padding:0; scroll-padding:0; margin-inline:max(22px, calc((100% - var(--maxw)) / 2 + 22px))}
  .vitrin-kart{flex-basis:calc((100% - 2 * var(--a3)) / 3); scroll-snap-align:start; border-radius:14px}
  .vitrin-kart:hover .vt-git{text-decoration:underline; text-underline-offset:3px}
  .vt-yazi{padding:16px 12px 16px 20px}
}
@media (min-width:761px) and (max-width:1100px){ .vitrin-kart{flex-basis:calc((100% - var(--a3)) / 2)} }
/* Tablet (561–760): şerit kenar boşluklu kalır, iki kart görünür. */
@media (min-width:561px) and (max-width:760px){ .vitrin-kart{flex-basis:calc((100% - 2 * var(--kenar) - var(--a2)) / 2); scroll-snap-align:start} }
@media (prefers-reduced-motion:reduce){ .vitrin-kaydir{scroll-behavior:auto} }

/* ================================================================
   KATEGORİLER — 4 sütunlu simge kutuları (masaüstü 6). Fotoğraf yok:
   her kategorinin kendi çizgi simgesi (EP.anSimgesi) açık mor kare
   zeminde; ad altında en çok iki satır, satırlar hizalı kalsın diye
   sabit yükseklik. Ölçüler --a* ölçeğinde.
   ================================================================ */
/* Fintech kart düzeni (1 Ekim 2026): beyaz kart + ince çerçeve, solda
   simge çipi, ad ve gerçek "yayında liste" sayısı, sağda ok. Telefonda
   3 sütunlu sıkı kutular (simge üstte), tablette 4, masaüstünde 4 sütun
   yatay satır kartı. Tüm dokunma alanları en az 44px. */
.katizgara{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:var(--a3)}
.kat-kutu{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0;
  padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff;
  text-decoration:none; color:var(--ink); -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(36,19,56,.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kat-kutu i{
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--mor-soft); color:var(--mor); transition:background .15s ease, color .15s ease;
}
.kat-kutu i svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.kat-yazi{display:grid; gap:2px; min-width:0; width:100%}
.kat-yazi b{font-size:13px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.kat-yazi small{font-size:11.5px; font-weight:500; color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kat-yazi small.var{color:var(--ok); font-weight:600}
.kat-ok{display:none; flex:none; width:18px; height:18px; fill:none; stroke:var(--ink-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease, stroke .15s ease}
.kat-kutu:active{background:var(--mor-soft)}
.kat-kutu:focus-visible{outline:2px solid var(--mor); outline-offset:2px}
@media (min-width:561px){
  .katizgara{grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
}
@media (min-width:761px){
  .katizgara{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:var(--a4)}
  .kat-kutu{flex-direction:row; align-items:center; gap:14px; padding:14px 16px; min-height:72px}
  .kat-kutu i{width:44px; height:44px}
  .kat-yazi b{font-size:15px; display:block; white-space:nowrap; text-overflow:ellipsis}
  .kat-yazi small{font-size:12.5px}
  .kat-ok{display:block; margin-left:auto}
  .kat-kutu:hover{border-color:var(--line); border-color:color-mix(in srgb,var(--mor) 45%,var(--line)); box-shadow:0 6px 18px -8px rgba(54,22,99,.28); transform:translateY(-1px)}
  .kat-kutu:hover i{background:var(--mor); color:#fff}
  .kat-kutu:hover .kat-ok{stroke:var(--mor); transform:translateX(2px)}
}
@media (min-width:1101px){ .katizgara{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .kat-kutu,.kat-kutu i,.kat-ok{transition:none} .kat-kutu:hover{transform:none} }


/* Vitrin simge paneli: kategoriye özel kartlarda fotoğraf yerine o
   kategorinin çizgi simgesi (alakasız stok görsel kullanılmaz). */
.vt-ikon{display:grid; place-items:center; background:rgba(255,255,255,.08)}
.vt-ikon svg{width:52%; height:auto; aspect-ratio:1; fill:none; stroke:var(--vv); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.vitrin-kart.t-lila .vt-ikon,.vitrin-kart.t-lamba .vt-ikon{background:rgba(255,255,255,.55)}

/* Katkı adımı 1 · tutar önerileri: dokununca tutar panoya alınır. */
.katki-kunye .kh-tutar{grid-template-columns:96px minmax(0,1fr)}
.katki-kunye .kh-oneri{display:flex; flex-wrap:wrap; gap:var(--a2)}
.katki-kunye .kh-cip{
  min-height:40px; padding:0 var(--a4); border:1px solid var(--line-strong); border-radius:999px;
  background:var(--surface); font:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer;
  touch-action:manipulation; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.katki-kunye .kh-cip:hover{border-color:var(--mor); color:var(--mor)}
.katki-kunye .kh-cip.ok{border-color:var(--ok); background:var(--ok-soft); color:var(--ok)}
.katki-kunye .kh-cip:last-child{border-color:var(--mor); background:var(--mor-soft); color:var(--mor)}
@media (max-width:940px){ .katki-kunye .kh-kopya{min-height:40px; padding:0 var(--a3)} }
@media (max-width:520px){ .katki-kunye .kh-tutar{grid-template-columns:minmax(0,1fr)} }

/* Kampanya · telefonda altta sabit katkı çubuğu (alt sekme çubuğunun
   hemen üstünde): kalan tutar + ilerleme + "Hediyeye katkı yap". Katkı
   adımları ekrana girince kendiliğinden gizlenir. */
.kmp-cta{display:none}
@media (max-width:940px){
  .kmp-cta{
    position:fixed; left:0; right:0; z-index:64;
    bottom:calc(var(--altcubuk-h) + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:var(--a3); padding:var(--a2) var(--kenar);
    background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 20px -16px rgba(36,19,56,.45);
    transition:transform .2s ease, opacity .2s ease;
  }
  .kmp-cta.gizli{transform:translateY(110%); opacity:0; pointer-events:none}
  .kmp-cta-bilgi{flex:1; min-width:0; display:grid; gap:var(--a1)}
  .kmp-cta-bilgi span{font-size:var(--y-kucuk); font-weight:600; color:var(--ink-muted)}
  .kmp-cta-bilgi b{font-size:var(--y-baslik); font-weight:800; color:var(--ink)}
  .kmp-cta-cubuk{height:4px; border-radius:99px; background:var(--mor-soft); overflow:hidden}
  .kmp-cta-cubuk i{display:block; height:100%; background:var(--mor)}
  .kmp-cta .btn{flex:none; min-height:48px; padding:0 var(--a5); font-size:15px}
  html.klavye-acik .kmp-cta{display:none}
}

/* ================================================================
   VİTRİN İLLÜSTRASYONLARI — düz palet renkleri; koyu kartta altın
   çizgi, açık kartta mor çizgi. Beyaz yüzeyler açık zeminde ince
   çerçeveyle ayrılır.
   ================================================================ */
.vt-cizim{display:grid; place-items:center; overflow:hidden; --il-z:rgba(255,255,255,.08); --il-s:var(--lamba)}
.vitrin-kart.t-lila .vt-cizim,.vitrin-kart.t-lamba .vt-cizim{--il-z:rgba(255,255,255,.78); --il-s:var(--mor)}
.vt-cizim svg{width:94%; height:94%}
.vt-cizim .z{fill:var(--il-z)}
.vt-cizim .k{fill:#fff}
.vitrin-kart.t-lila .vt-cizim .k,.vitrin-kart.t-lamba .vt-cizim .k{stroke:var(--line-strong); stroke-width:1.5}
.vt-cizim .a{fill:var(--lamba)}
.vt-cizim .ac{fill:var(--lamba-acik)}
.vt-cizim .v{fill:var(--menekse)}
.vt-cizim .c{fill:var(--mor-soft)}
.vt-cizim .t{fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.vt-cizim .s{fill:none; stroke:var(--il-s); stroke-width:6; stroke-linecap:round; stroke-linejoin:round}
.vt-cizim .s2{fill:none; stroke:var(--il-s); stroke-width:2}
.vt-cizim .s3{fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.vt-cizim .sv{fill:none; stroke:var(--mor); stroke-width:9; stroke-linecap:round; stroke-linejoin:round}
.vt-cizim .tx{fill:var(--erguvan); font-family:var(--font-baslik); font-size:22px; font-weight:800}

/* Simge ailesi varsayılanları: 24'lük çizgi simgelerde yuvarlak uç/birleşim. */
svg[viewBox="0 0 24 24"]{stroke-linecap:round; stroke-linejoin:round}

/* ================================================================
   GETİR DÜZENİ — ana sayfa (telefon/tablet ≤940px). Ölçüler Getir
   ekranlarından (375pt): bilgi şeridi 46, kısayol kutusu 60, raf kartı
   görseli 86, kategori kutusu gri zemin. Renkler site paletinden.
   Masaüstünde (≥941) bu parçalar gizli; web düzeni geçerli.
   ================================================================ */
.g-serit,.g-kisa,.g-raf,.vitrin-ince{display:none}
@media (max-width:940px){
  /* 1 · Güven ve hesap kartı: beyaz kart, solda kalkan simgesiyle katkı
     güvencesi, sağda "Giriş yap" ya da hesap (baş harf + ad). */
  .g-serit{
    display:flex; align-items:center; gap:var(--a3); margin:var(--a3) var(--kenar) 0; padding:var(--a2) var(--a2) var(--a2) var(--a3);
    background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 18px -14px rgba(36,19,56,.35);
  }
  .g-serit a{text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent}
  .g-guven{flex:1; min-width:0; display:flex; align-items:center; gap:var(--a3)}
  .g-guven i{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--mor-soft); color:var(--mor)}
  .g-guven i svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2}
  .g-guven span{display:grid; gap:1px; min-width:0}
  .g-guven b{font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .g-guven small{font-size:12.5px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .g-giris{flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 var(--a4); border-radius:10px; background:var(--mor); color:#fff !important; font-size:14px; font-weight:700}
  .g-hesap{flex:none; display:inline-flex; align-items:center; gap:var(--a2); min-height:40px; padding:0 var(--a3) 0 var(--a1); border-radius:999px; background:var(--mor-soft); font-size:14px; font-weight:700; color:var(--mor) !important}
  .g-hesap i{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--mor); color:#fff; font-style:normal; font-size:14px; font-weight:800}

  /* 2 · Kısayollar: 60px kare, renkli zemin, altında iki satır ad. */
  .g-kisa{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--a2); padding:var(--a4) var(--kenar) var(--a2)}
  .g-kisa-oge{display:flex; flex-direction:column; align-items:center; gap:var(--a2); text-decoration:none; color:var(--ink); -webkit-tap-highlight-color:transparent}
  .g-kisa-oge i{display:grid; place-items:center; width:100%; max-width:64px; aspect-ratio:1; border-radius:14px}
  .g-kisa-oge i svg{width:46%; height:46%; fill:none; stroke-width:2}
  .g-kisa-oge span{font-size:12px; font-weight:600; line-height:1.2; text-align:center}
  .r-mor{background:var(--mor)} .r-mor svg{stroke:var(--lamba)}
  .r-lamba{background:var(--lamba)} .r-lamba svg{stroke:var(--erguvan)}
  .r-erguvan{background:var(--erguvan)} .r-erguvan svg{stroke:#fff}
  .r-menekse{background:var(--menekse)} .r-menekse svg{stroke:#fff}
  .r-derin{background:var(--green)} .r-derin svg{stroke:var(--lamba)}

  /* 3 · Raf: başlık + "Tümü (N)", açık mor çerçeve içinde yatay kartlar. */
  .g-raf{display:block; padding:var(--a4) 0 var(--a2)}
  .g-raf[hidden]{display:none}
  .g-raf-bas{display:flex; align-items:baseline; justify-content:space-between; gap:var(--a3); padding:0 var(--kenar)}
  .g-raf-bas h2{margin:0; font-size:17px !important; font-weight:700; letter-spacing:-.01em !important; color:var(--ink)}
  .g-raf-bas a{flex:none; font-size:15px; font-weight:600; color:var(--mor); text-decoration:none}
  .g-raf-kutu{margin:var(--a3) var(--kenar) 0; padding:var(--a3) 0; border-radius:16px; background:var(--mor-soft); overflow:hidden}
  .g-raf-kaydir{display:flex; gap:var(--a3); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding:0 var(--a3); scroll-padding:0 var(--a3)}
  .g-raf-kaydir::-webkit-scrollbar{display:none}
  .g-kart{position:relative; flex:0 0 112px; scroll-snap-align:start; display:flex; flex-direction:column}
  .g-kart-gorsel{position:relative; display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--line)}
  .g-kart-gorsel img{width:100%; height:100%; object-fit:cover; display:block}
  .g-rozet{
    position:absolute; left:6px; right:6px; bottom:6px; padding:3px 6px; border-radius:999px;
    background:#fff; border:1px solid transparent; border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);
    font-size:11px; font-weight:700; color:var(--ok); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .g-arti{
    position:absolute; top:-6px; right:-6px; display:grid; place-items:center; width:32px; height:32px;
    border-radius:10px; background:#fff; color:var(--mor); box-shadow:0 2px 8px rgba(36,19,56,.18); text-decoration:none;
  }
  .g-arti svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4}
  .g-kart-yazi{display:grid; gap:2px; padding-top:var(--a2); text-decoration:none; color:var(--ink)}
  .g-kart-yazi b{font-size:15px; font-weight:800; color:var(--mor); font-variant-numeric:tabular-nums; line-height:1.1}
  .g-kart-yazi small{margin-top:-2px; font-size:11px; font-weight:600; color:var(--ink-muted)}
  .g-kart-yazi span{font-size:13px; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .g-kart-yazi em{font-style:normal; font-size:12px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


  /* 5 · İnce banner: 4,2:1 tek sıra. */
  .vitrin-ince{display:block; padding:var(--a4) 0 var(--a2)}
  .vitrin-ince .vitrin-kart{aspect-ratio:3.4 / 1; grid-template-columns:62% 38%}
  .vitrin-ince .vt-et{display:none}
  .vitrin-ince .vt-bas{font-size:16px}
  .vitrin-ince .vt-yazi{gap:var(--a1)}

  /* Uygulama modunda web'e özgü tekrar eden bölümler gizli: kapak, liste
     duvarı (rafı var), işleyiş bandı ve kapanış çağrısı (alt çubuk var). */
  .giris,#listeler,#model,.kapanis{display:none !important}

  /* Tablet (561–940): telefon parçaları devleşmesin — vitrin ikili,
     kısayol ve kategori sırası genişler. */
}
@media (min-width:561px) and (max-width:940px){
  .vitrin-kaydir{scroll-padding:0 var(--kenar)}
  .vitrin-ince .vitrin-kart{aspect-ratio:3.4 / 1}
  .g-kisa{grid-template-columns:repeat(5,72px); justify-content:start; gap:var(--a4)}
  .g-kart{flex-basis:128px}
}

/* Getir düzeni düzeltmeleri: "+" kutusu kaydırma alanında kesilmesin diye
   görselin içinde; kısayollar tablette sola yığılmasın; kategori kutuları
   tablette devleşmesin (Getir ölçüsü ≈ 72–84px); başlıklar büyük harfle. */
@media (max-width:940px){
  .g-arti{top:6px; right:6px}
  .g-kart-yazi span::first-letter{text-transform:uppercase}
}
@media (min-width:561px) and (max-width:940px){
  .g-kisa{grid-template-columns:repeat(5,minmax(0,1fr)); justify-content:stretch; justify-items:center; gap:var(--a4)}
  .g-kisa-oge{width:100%; max-width:96px}
}

/* ================================================================
   VİTRİN · FOTOĞRAFLI KART — bölünmüş kurumsal düzen.
   Solda düz marka renginde yazı paneli (etiket · başlık · düğme),
   sağda perdesiz, net fotoğraf; fotoğrafın sol kenarı panel rengine
   yumuşak bir geçişle karışır (mask). Fotoğrafın üstüne renk perdesi,
   yazı gölgesi ve palet dışı renk konmaz. Renkler sabit: masaüstü koyu
   temada da kart aynı görünür. Tema: erguvan/derin koyu panel, lila
   ve lamba açık panel.
   ================================================================ */
.vitrin-kart.foto-tam{
  --fp:#3A1268; --fy:#FFFFFF; --fv:#EFCB63; --fs:rgba(255,255,255,.66); --fb:#EFCB63; --fbi:#2A0F52;
  display:block; isolation:isolate; background:var(--fp); box-shadow:none;
}
.vitrin-kart.foto-tam.t-derin{--fp:#4A1D8C}
.vitrin-kart.foto-tam.t-lila{--fp:#F1E8FC; --fy:#241338; --fv:#6D2FBF; --fs:#6B5A86; --fb:#6D2FBF; --fbi:#FFFFFF}
.vitrin-kart.foto-tam.t-lamba{--fp:#FDF4D8; --fy:#241338; --fv:#85620E; --fs:#7A6A55; --fb:#3A1268; --fbi:#FFFFFF}
.vitrin-kart.foto-tam .vt-arka{
  position:absolute; top:0; right:0; bottom:0; width:52%; height:100%; z-index:-1;
  object-fit:cover; object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%); mask-image:linear-gradient(90deg,transparent 0,#000 34%);
}
.vitrin-kart.foto-tam::after{content:none}
/* Üçüncü taraf reklamı: kartın sağ üstünde küçük "Reklam" etiketi (ayırt edilebilirlik). */
.vt-reklam{position:absolute; top:8px; right:8px; z-index:2; padding:2px 7px; border-radius:6px; background:rgba(255,255,255,.92); color:#3A1268; font-size:10.5px; font-weight:700; letter-spacing:.04em; line-height:1.5; box-shadow:0 1px 3px rgba(36,19,56,.18); pointer-events:none}
.vitrin-kart.foto-tam .vt-yazi{
  position:relative; height:100%; max-width:60%; gap:var(--a2); padding:var(--a4) var(--a2) var(--a4) var(--a5);
  --vy:var(--fy); --vv:var(--fv); --vs:var(--fs); color:var(--fy);
}
.vitrin-kart.foto-tam .vt-et{font-size:10.5px; letter-spacing:.14em}
.vitrin-kart.foto-tam .vt-bas{text-shadow:none; font-size:18px; line-height:1.22; letter-spacing:-.015em}
.vitrin-kart.foto-tam .vt-git{
  align-self:flex-start; margin-top:var(--a1); min-height:34px; padding:0 var(--a3); gap:6px;
  border-radius:8px; background:var(--fb); color:var(--fbi); font-size:13px; font-weight:700;
}
.vitrin-kart.foto-tam .vt-git svg{width:14px; height:14px; stroke:var(--fbi)}
.vitrin-ince .vitrin-kart.foto-tam .vt-yazi{max-width:62%; padding-block:var(--a3)}
.vitrin-ince .vitrin-kart.foto-tam .vt-arka{width:46%}
.vitrin-ince .vitrin-kart.foto-tam .vt-bas{font-size:16px}
.vitrin-ince .vitrin-kart.foto-tam .vt-git{min-height:30px; font-size:12.5px}
@media (max-width:360px){ .vitrin-kart.foto-tam .vt-bas{font-size:16px} }
@media (min-width:761px){
  .vitrin-kart.foto-tam .vt-yazi{padding:18px 12px 18px 22px}
  .vitrin-kart.foto-tam:hover .vt-git{text-decoration:none; filter:brightness(1.06)}
}

/* ================================================================
   KAMPANYA PENCERESİ (site.js kampanyaGoster) — kategori geçişinde
   markanın onaylı kampanyası. Telefonda tam ekran (Getir tipi): mor
   geçişli üst alan, marka kimliği + "Reklam" etiketi, sarı vurgu,
   büyük beyaz başlık, koşul metni; altta kıvrımla başlayan kampanya
   görseli ve iki düğme (Kapat · eylem). Masaüstünde karartılmış zemin
   üstünde 420px kart. Renkler sabit (koyu temada da aynı).
   ================================================================ */
html.kmp-acik,html.kmp-acik body{overflow:hidden}
.kmp-pen{
  position:fixed; inset:0; z-index:140; display:grid; place-items:center;
  background:rgba(21,11,38,.72); animation:kmpBelir .22s ease-out;
}
.kmp-pen-kutu{
  position:relative; display:flex; flex-direction:column; width:100%; max-width:420px; height:100%; max-height:820px;
  overflow:hidden; border-radius:20px; color:#fff;
  background:radial-gradient(120% 70% at 50% 0%,#7B3FD1 0%,#5A23A8 45%,#3A1268 100%);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.kmp-pen-x{
  position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; z-index:3; display:grid; place-items:center;
  width:44px; height:44px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
}
.kmp-pen-x svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.kmp-pen-ust{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:50%; padding:calc(26px + env(safe-area-inset-top)) 24px 20px; text-align:center}
.kmp-pen-kim{display:flex; align-items:center; gap:8px; max-width:calc(100% - 56px)}
.kmp-pen-logo{
  flex:none; display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border-radius:10px;
  background:#fff; color:#3A1268; font-size:13px; font-weight:800;
}
.kmp-pen-logo img{width:100%; height:100%; object-fit:cover}
.kmp-pen-kim b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; font-weight:800; letter-spacing:-.01em}
.kmp-pen-reklam{flex:none; padding:2px 7px; border:1px solid rgba(255,255,255,.5); border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.kmp-pen-vurgu{
  margin-top:6px; padding:6px 14px; border-radius:10px; background:#EFCB63; color:#2A0F52;
  font-size:15px; font-weight:800; letter-spacing:.01em; box-shadow:0 3px 0 #B8912A;
}
.kmp-pen-bas{margin:4px 0 0; max-width:15ch; font-size:clamp(30px,8.6vw,36px); font-weight:800; line-height:1.05; letter-spacing:-.02em; color:#fff; text-wrap:balance}
.kmp-pen-ac{margin:0; max-width:32ch; font-size:15px; line-height:1.45; color:rgba(255,255,255,.9)}
.kmp-pen-kosul{margin:2px 0 0; max-width:40ch; font-size:11px; line-height:1.45; color:rgba(255,255,255,.72)}
.kmp-pen-gorsel{position:relative; flex:1; min-height:180px; margin-top:4px}
.kmp-pen-gorsel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:48% 52% 0 0 / 38px 38px 0 0; box-shadow:0 -2px 0 #EFCB63;
}
.kmp-pen-eylem{
  position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(21,11,38,.55),rgba(21,11,38,0));
}
.kmp-pen-kapat,.kmp-pen-git{
  display:grid; place-items:center; min-height:54px; padding:0 12px; border:0; border-radius:12px;
  font:inherit; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer;
}
.kmp-pen-kapat{background:#fff; color:#241338; border:1px solid #CFBCEA !important}
.kmp-pen-git{background:#6D2FBF; color:#fff; border:1px solid #6D2FBF !important}
.kmp-pen-kapat:active,.kmp-pen-git:active{opacity:.85}
/* Tam ekran yalnızca telefon genişliğinde; daha geniş ekranda 420px kart
   (geniş tam ekranda yazı dar sütunda küçük, görsel orantısız büyük kalıyordu). */
@media (max-width:480px){
  .kmp-pen{place-items:stretch; background:#3A1268}
  .kmp-pen-kutu{max-width:none; max-height:none; border-radius:0; box-shadow:none}
}
@media (max-height:640px){
  .kmp-pen-ac{display:none}
  .kmp-pen-bas{font-size:28px}
}
@keyframes kmpBelir{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .kmp-pen{animation:none} }

/* Marka paneli önizlemesi: aynı pencere, küçük ölçekli ve etkileşimsiz. */
.kmp-onizleme{width:280px; height:560px; margin:0 auto; overflow:hidden; border-radius:22px; border:6px solid #1A0B2E; background:#1A0B2E}
.kmp-onizleme .kmp-pen-kutu{max-width:none; max-height:none; border-radius:16px; zoom:.667; width:420px; height:840px; box-shadow:none}
.kmp-onizleme .kmp-pen-eylem{pointer-events:none}

/* ================================================================
   KAMPANYA · REKLAM TİPOGRAFİSİ — pencere ve tanıtım banner'ı reklam
   formatında: büyük harf, en kalın ağırlık, iri ve sıkı başlık (ekrana
   göre ölçeklenir), sarı vurgu kutusu büyük harf ve kabartmalı. Türkçe
   büyük harf dönüşümü html lang="tr" ile doğru yapılır (i → İ).
   ================================================================ */
.kmp-pen-bas{
  max-width:none; font-size:clamp(34px,10.5vw,46px); font-weight:800; line-height:.98; letter-spacing:-.015em;
  text-transform:uppercase; text-shadow:0 3px 0 rgba(20,6,40,.28);
}
.kmp-pen-vurgu{padding:7px 16px; font-size:clamp(17px,5vw,21px); font-weight:800; letter-spacing:.01em; text-transform:uppercase; border-radius:10px; box-shadow:0 4px 0 #B8912A}
.kmp-pen-ac{font-size:15px; font-weight:600}
.kmp-pen-kim b{font-size:18px}
.kmp-onizleme .kmp-pen-bas{font-size:44px}
.kmp-onizleme .kmp-pen-vurgu{font-size:20px}

/* Kategori banner şeridindeki kampanya kartı: aynı reklam dili. */
.vitrin-kart.vt-kmp .vt-bas{font-weight:800; line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; font-size:clamp(17px,4.6vw,21px)}
.vitrin-kart.vt-kmp .vt-bas em{display:inline-block; margin-top:6px; padding:3px 9px; border-radius:7px; background:#EFCB63; color:#2A0F52; font-size:.82em; box-shadow:0 2px 0 #B8912A}
.vitrin-kart.vt-kmp .vt-et{color:#fff; opacity:.85}

/* ================================================================
   KAMPANYA · DİKKAT ÇEKİCİ + HAREKETE GEÇİRİCİ
   · Çıkartma (Getir'deki yuvarlak etiket): gerçek bitiş tarihinden;
     son 7 günde "SON N GÜN!" (sarı, acil), öncesinde bitiş günü.
   · Açılış: vurgu kutusu "pop", başlık aşağıdan gelir, görsel hafifçe
     yakınlaşır, çıkartma dönerek yerleşir.
   · Eylem düğmesi oklu; iki kez yumuşak nabız atar (sürekli değil).
   · "Hareketi azalt" tercihinde animasyon yok.
   ================================================================ */
.kmp-pen-rozet{
  position:absolute; left:16px; top:34px; z-index:2; display:grid; place-content:center; justify-items:center;
  filter:drop-shadow(0 6px 12px rgba(20,6,40,.45));
  width:92px; height:92px; padding:6px; text-align:center; color:#fff; background:#2A0F52;
  clip-path:polygon(50% 0%,61% 6%,74% 3%,80% 14%,93% 17%,93% 30%,100% 40%,95% 51%,100% 62%,92% 71%,92% 84%,80% 86%,73% 97%,61% 93%,50% 100%,39% 93%,27% 97%,20% 86%,8% 84%,8% 71%,0% 62%,5% 51%,0% 40%,7% 30%,7% 17%,20% 14%,26% 3%,39% 6%);
  transform:rotate(-10deg);
}
.kmp-pen-rozet small{font-size:11px; font-weight:800; letter-spacing:.06em; line-height:1.1}
.kmp-pen-rozet b{font-size:30px; font-weight:800; line-height:.95}
.kmp-pen-rozet.acil{background:#EFCB63; color:#2A0F52}
.kmp-pen-rozet.acil b:only-of-type{font-size:30px}
.kmp-pen-git{display:flex; align-items:center; justify-content:center; gap:8px}
.kmp-pen-git svg{flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

@media (prefers-reduced-motion:no-preference){
  .kmp-pen-vurgu{animation:kmpPop .5s cubic-bezier(.2,1.4,.4,1) .15s both}
  .kmp-pen-bas{animation:kmpYuksel .45s ease-out .25s both}
  .kmp-pen-ac,.kmp-pen-kosul{animation:kmpBelir .4s ease-out .4s both}
  .kmp-pen-gorsel img{animation:kmpYaklas .9s ease-out both}
  .kmp-pen-rozet{animation:kmpRozet .55s cubic-bezier(.2,1.4,.4,1) .5s both}
  .kmp-pen-git{animation:kmpNabiz 1.4s ease-in-out 1s 2}
  .kmp-onizleme *{animation:none !important}
}
@keyframes kmpPop{0%{opacity:0; transform:scale(.6)} 70%{opacity:1; transform:scale(1.08)} 100%{transform:scale(1)}}
@keyframes kmpYuksel{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes kmpYaklas{from{transform:scale(1.08)} to{transform:scale(1)}}
@keyframes kmpRozet{from{opacity:0; transform:rotate(-40deg) scale(.5)} to{opacity:1; transform:rotate(-10deg) scale(1)}}
@keyframes kmpNabiz{0%,100%{box-shadow:0 0 0 0 rgba(239,203,99,0)} 50%{box-shadow:0 0 0 7px rgba(239,203,99,.45)}}
/* Banner kampanya kartı: marka adı tek satır; "Reklam" köşede ayrı etiket. */
.vitrin-kart.vt-kmp .vt-et{display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vitrin-kart.vt-kmp::before{
  content:"Reklam"; position:absolute; top:8px; right:8px; z-index:2; padding:2px 7px; border-radius:5px;
  background:rgba(20,6,40,.55); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
/* Banner kampanya kartı sığma: içerik kart yüksekliğini aşıp marka adını
   üstten kesiyordu — aralıklar ve düğme sıkılaştırıldı. */
.vitrin-kart.vt-kmp .vt-yazi{gap:4px; padding-block:10px}
.vitrin-kart.vt-kmp .vt-bas{font-size:clamp(15px,4.3vw,20px)}
.vitrin-kart.vt-kmp .vt-bas em{margin-top:4px; padding:2px 8px}
.vitrin-kart.vt-kmp .vt-git{min-height:30px; margin-top:4px; padding:0 10px; font-size:12.5px}

/* ================================================================
   DEKONT CANLI TAKİP (site.js dekontIziHtml · dekontKartHtml)
   Üç panel aynı kartı okur. Şerit: dört aşama; tamam mor, sıradaki
   lamba sarısı (nabız), hatalı kırmızı; borç kapanınca yeşil.
   ================================================================ */
.dz-liste{display:grid; gap:10px}
.dz-kart{padding:14px 16px 0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.dz-ust{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.dz-kim{min-width:0; display:grid; gap:2px}
.dz-kim b{font-size:15px; font-weight:600; color:var(--ink)}
.dz-kim small{font-size:12.5px; color:var(--ink-faint); overflow-wrap:anywhere}
.dz-tutar{font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
/* Şerit: her aşama simgeli daire + etiket, daireler ince çizgiyle bağlı.
   Bulunulan aşama (aktif) sarı dairede yanıp sönen halka; hatalı kırmızı. */
.dz-serit{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:14px 0 0; padding:0; list-style:none}
.dz-serit li{position:relative; display:grid; justify-items:center; align-content:start; gap:6px; min-width:0; text-align:center}
.dz-serit li + li::before{content:""; position:absolute; top:15px; left:calc(-50% + 20px); right:calc(50% + 20px); height:2px; border-radius:2px; background:var(--line)}
.dz-serit li.tamam::before,.dz-serit li.aktif::before{background:var(--mor)}
.dz-serit li.hata::before{background:var(--bad)}
.dz-serit li span{font-size:11.5px; line-height:1.25; color:var(--ink-faint)}
.dz-serit li.tamam span,.dz-serit li.aktif span{color:var(--ink); font-weight:600}
.dz-serit li.hata span{color:var(--bad); font-weight:600}
.dz-ik{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--surface-2); color:var(--ink-faint)}
.dz-ik svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dz-iz .tamam > .dz-ik{background:var(--mor); color:#fff}
.dz-iz .aktif > .dz-ik{background:var(--lamba); color:#3A2A00; animation:dzHalka 1.6s ease-out infinite}
.dz-iz .hata > .dz-ik{background:var(--bad); color:#fff; animation:dzHalkaHata 1.6s ease-out infinite}
.dz-kapandi .tamam > .dz-ik{background:var(--ok)}
.dz-kapandi .dz-serit li::before{background:var(--ok)}
@keyframes dzHalka{0%{box-shadow:0 0 0 0 var(--lamba-koyu); box-shadow:0 0 0 0 color-mix(in srgb,var(--lamba-koyu) 65%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@keyframes dzHalkaHata{0%{box-shadow:0 0 0 0 var(--bad); box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){.dz-ik{animation:none !important}}
.dz-iz details.dz-gecmis,.dz-iz details.dz-gecmis[open]{margin:10px 0 0; padding:0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none}
.dz-kart details.dz-gecmis{margin:10px -16px 0}
.dz-gecmis > summary{display:flex; align-items:center; gap:8px; min-height:46px; padding:0; font-family:inherit; font-size:14px; font-weight:400; color:var(--ink)}
.dz-gecmis > summary b{flex:1; min-width:0; font-weight:600}
.dz-gecmis > summary time{font-size:12.5px; color:var(--ink-faint); white-space:nowrap}
.dz-gecmis > summary::after{content:""; flex:none; width:7px; height:7px; margin:0 2px 3px 4px; font-size:0; color:transparent;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(45deg); transition:transform .2s ease}
.dz-gecmis[open] > summary::after{transform:rotate(-135deg); margin-bottom:-3px}
.dz-nokta{flex:none; width:8px; height:8px; border-radius:50%; background:var(--mor)}
.dz-askida .dz-nokta,.dz-inceleme .dz-nokta{background:var(--lamba-koyu); animation:dzNabiz 1.8s ease-out infinite}
.dz-hata .dz-nokta{background:var(--bad)}
.dz-kapandi .dz-nokta{background:var(--ok)}
@keyframes dzNabiz{0%{box-shadow:0 0 0 0 var(--lamba-koyu); box-shadow:0 0 0 0 color-mix(in srgb,var(--lamba-koyu) 55%,transparent)}75%,100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.dz-nokta{animation:none !important}}
.dz-adim{list-style:none; margin:0; padding:4px 0 8px}
.dz-adim li{position:relative; padding:0 0 14px 36px; min-height:38px}
.dz-adim .dz-ik{position:absolute; left:0; top:0; width:26px; height:26px}
.dz-adim .dz-ik svg{width:14px; height:14px}
.dz-adim li::after{content:""; position:absolute; left:12.5px; top:30px; bottom:2px; width:1px; background:var(--line-strong)}
.dz-adim li:last-child{padding-bottom:4px}
.dz-adim li:last-child::after{display:none}
.dz-adim b{display:block; font-size:14px; font-weight:600; color:var(--ink)}
.dz-adim span{display:block; font-size:13px; line-height:1.45; color:var(--ink-muted)}
.dz-adim time{display:block; margin-top:2px; font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.dz-adim li.sirada b,.dz-adim li.sirada span{color:var(--ink-faint)}
.dz-adim li.hata b{color:var(--bad)}
.dz-belge{display:inline-block; margin:0 0 12px; font-size:13.5px; font-weight:600; color:var(--mor); text-decoration:none}
.dz-kart .dz-gecmis > summary,.dz-kart .dz-adim{padding-left:16px; padding-right:16px}
.dz-kart .dz-belge{margin-left:16px}
.dz-eylem{display:block; margin:0 -16px; padding:12px 16px; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--mor); text-decoration:none}

/* ================================================================
   ASKIDA MUTLULUK KUPONU (EP.kuponHtml) — bilet biçimi: solda mor
   tutar alanı, kesik çizgi ve üst/alt oyuklar (mask ile gerçek
   oyuk; zemin rengine bağlı değil), sağda marka, kod, son kullanım.
   ================================================================ */
.kupon{
  --kx:116px; position:relative; display:grid; grid-template-columns:var(--kx) minmax(0,1fr); min-height:112px;
  border-radius:14px; background:#fff; color:var(--ink); filter:drop-shadow(0 6px 14px rgba(58,18,104,.16));
  -webkit-mask:radial-gradient(circle 9px at var(--kx) 0,transparent 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at var(--kx) 100%,transparent 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 9px at var(--kx) 0,transparent 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at var(--kx) 100%,transparent 97%,#000) bottom/100% 51% no-repeat;
}
.kupon-sol{
  display:grid; place-content:center; justify-items:center; gap:2px; padding:12px 8px; border-radius:14px 0 0 14px; text-align:center;
  background:#4A1D8C; background:linear-gradient(160deg,#3A1268,#6D2FBF); color:#fff; border-right:2px dashed rgba(255,255,255,.55);
}
.kupon-sol b{font-size:24px; font-weight:800; line-height:1.05; letter-spacing:-.02em; color:#EFCB63; font-variant-numeric:tabular-nums; white-space:nowrap}
.kupon-sol span{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8)}
.kupon-sag{display:grid; align-content:center; gap:6px; min-width:0; padding:12px 14px 12px 18px; border:1px solid var(--line); border-left:0; border-radius:0 14px 14px 0}
.kupon-marka{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--mor); min-width:0}
.kupon-marka img{flex:none; border-radius:50%}
.kupon-yeni{margin-top:4px; padding:1px 7px; border-radius:999px; background:#EFCB63; color:#2A0F52; font-style:normal; font-size:10.5px; font-weight:800}
.kupon-kod{display:flex; align-items:center; gap:8px; min-width:0}
.kupon-kod code{flex:1; min-width:0; font-family:ui-monospace,Consolas,monospace; font-size:16px; font-weight:700; letter-spacing:.06em; color:var(--ink); overflow-wrap:anywhere}
.kupon-kod button{flex:none; min-height:34px; padding:0 12px; border:1px solid var(--mor); border-radius:8px; background:#fff; color:var(--mor); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.kupon-kod button:hover{background:var(--mor-soft)}
.kupon-kod button:focus-visible{outline:2px solid var(--mor); outline-offset:2px}
.kupon-sure{font-size:12.5px; color:var(--ink-muted)}
.kupon-sure b{color:var(--ink); font-weight:600}
.kupon.az .kupon-sure{color:#8A5A00}
.kupon-marka-ad{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kupon-kod code{white-space:nowrap; overflow-wrap:normal; overflow:hidden; text-overflow:clip}
@media (max-width:560px){
  .kupon{--kx:90px; min-height:104px}
  .kupon-sol b{font-size:19px}
  .kupon-sol span{font-size:10px}
  .kupon-sag{padding:10px 10px 10px 14px; gap:5px}
  .kupon-marka{font-size:11px; gap:5px}
  .kupon-marka img{width:16px; height:16px}
  .kupon-kod{gap:6px}
  .kupon-kod code{font-size:14px; letter-spacing:.03em}
  .kupon-kod button{min-height:32px; padding:0 10px; font-size:12.5px}
  .kupon-sure{font-size:11.5px}
  .kupon-damga{right:8px; font-size:11px; padding:4px 8px}
}

/* Kullanılmış kupon: soluk, "Kod kullanılmıştır" damgası */
.kupon.kullanildi{filter:grayscale(.85) drop-shadow(0 4px 10px rgba(36,19,56,.1))}
.kupon.kullanildi .kupon-sol,.kupon.kullanildi .kupon-sag{opacity:.6}
.kupon-damga{
  position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(-10deg); z-index:2; padding:5px 10px;
  border:2px solid #B42318; border-radius:6px; background:rgba(255,255,255,.92); color:#B42318;
  font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; pointer-events:none;
}
.kupon.gecmis-doldu .kupon-damga,.kupon.gecmis-iptal .kupon-damga{border-color:#61507E; color:#61507E}