/* ===========================================================================
   UYGULAMA KATMANI — web ve mobilde aynı site, telefonda uygulama gibi.

   site.css (ve varsa panel.css) SONRASINDA yüklenir. Yeni renk tanımlanmaz;
   mor + lambader token'ları kullanılır, koyu tema kendiliğinden döner.

   İçerik:
     1. Kameralı alan  — IBAN / fatura alanının içinde kamera simgesi,
                         arka plan tarama durumu, kilitli (değiştirilemez) alan
     2. İstek listesi  — tek ekran form grupları
     3. Tanıyan giriş  — "Tekrar hoş geldin" kartı
     4. Üst çubuk      — orijinal logo + menü düğmesi, tam ekran menü, giriş kartı, çerez paneli
     5. Paneller       — telefonda üstte yapışkan sekme şeridi
     6. Dokunmatik ve güvenli alan ayarları (çentik, ana ekran uygulaması)
   =========================================================================== */

/* ------------------------------------------------------------ 1 · kamera -- */
.kamera-alan{position:relative}
.kamera-alan > .input{padding-right:62px}
.kamera-dugme{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:48px; height:40px; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; color:var(--mor);
  transition:background-color .15s ease;
}
.kamera-dugme:hover{background:var(--mor-soft)}
.kamera-dugme svg{width:30px; height:30px; fill:currentColor; stroke:none}
.kamera-dugme svg circle{fill:var(--surface)}
.kamera-dugme:focus-within{outline:2px solid var(--brass); outline-offset:1px}
.kamera-alan.taraniyor .kamera-dugme{animation:kamera-nabiz 1.2s ease-in-out infinite}
@keyframes kamera-nabiz{50%{opacity:.45}}

.kamera-durum{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px; padding:8px 10px; border-radius:var(--r-s);
  background:var(--surface-2); font-size:12.5px; line-height:1.45; color:var(--ink-muted);
}
.kamera-durum img{width:38px; height:38px; border-radius:7px; object-fit:cover; flex:none; border:1px solid var(--line)}
.kamera-durum .kd-yazi{flex:1; min-width:0}
.kamera-durum .kd-cubuk{flex-basis:100%; height:4px; border-radius:4px; background:var(--line); overflow:hidden}
.kamera-durum .kd-cubuk b{display:block; height:100%; width:0; background:var(--mor); transition:width .3s ease}
.kamera-durum.tamam{background:var(--ok-soft); color:var(--ok)}
.kamera-durum.tamam .kd-yazi::before{content:"✓ "; font-weight:700}
.kamera-durum.hata{background:var(--bad-soft); color:var(--bad)}

/* Fotoğraftan gelen alan: salt okunur, kilit işaretli. */
.input.kilitli,.select.kilitli{
  background:var(--surface-2); color:var(--ink); font-weight:600;
  border-color:var(--line); cursor:default;
}
.input.kilitli:focus{outline:none; box-shadow:none}
.field.alan-kilitli .label::after,
.kilit-ikon{
  content:""; display:inline-block; width:13px; height:13px; margin-left:7px; vertical-align:-1px;
  background:var(--brass-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
svg.kilit-ikon{margin:0 2px; fill:none; stroke:none}
.iban-yazi{font-family:ui-monospace,"Roboto Mono",Menlo,monospace; letter-spacing:.03em}
/* IBAN alanı salt okunur metin kutusudur: dar ekranda iki satıra kırılır,
   hiçbir hanesi gizlenmez. */
textarea.iban-yazi,textarea.il-metin{resize:none; overflow:hidden; field-sizing:content; min-height:0; line-height:1.45; white-space:pre-wrap; word-break:normal}
/* Safari (iPhone/Mac) ve Firefox field-sizing bilmez: iki satırlık yer
   baştan ayrılır ki IBAN ya da uzun unvan kesilmesin. */
@supports not (field-sizing: content){
  textarea.iban-yazi,textarea.il-metin{min-height:calc(2 * 1.45em + 26px); overflow-y:auto}
}

/* -------------------------------------------------------- 2 · istek listesi */
.il-form{display:grid; gap:18px}
.il-grup{
  display:grid; gap:2px; padding:18px 18px 8px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface);
}
.il-grup-bas{display:grid; gap:2px; margin-bottom:12px}
.il-grup-bas b{font-family:var(--font-baslik); font-size:17px; color:var(--green)}
.il-grup-bas span{font-size:13px; color:var(--ink-muted)}
.il-okunan{display:grid; gap:2px; margin-top:6px}
.il-okunan .ft-kilit{margin:4px 0 14px}
.il-iban-not{margin:-4px 0 10px}
@media (max-width:640px){
  /* Kalem tablosu telefonda yatay kaydırmasız: tutar sütunu hep görünür. */
  #bolumFatura .ft-tablo{min-width:0; width:100%; font-size:13px}
  #bolumFatura .ft-tablo th,#bolumFatura .ft-tablo td{padding-inline:6px}
  #bolumFatura .ft-tablo td:nth-child(2){overflow-wrap:anywhere}
  #bolumFatura .ft-tablo .num{white-space:nowrap}
  .pnl-baslik{flex-direction:column; align-items:flex-start; gap:4px}
  /* İç içe kutular telefonda daha az boşluk alır; alanlar daha geniş kalır. */
  #ftKart > .card-pad{padding:12px}
  .il-grup{padding:14px 12px 4px}
  .kamera-alan > .input{padding-left:12px; padding-right:54px}
  .kamera-dugme{width:44px; right:4px}
}

/* Listem kartı: liste silme — sade metin bağlantısı, onayda kırmızı. */
.kayit-sil{
  margin-top:12px; padding:10px 0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-faint); text-align:left;
  min-height:44px;
}
.kayit-sil:hover{color:var(--bad)}
.kayit-sil.onay{color:var(--bad)}
.kayit-sil-not{margin-top:12px; font-size:12.5px; line-height:1.5; color:var(--ink-faint)}

/* Marka paneli IBAN onayı: müşterinin fotoğrafladığı IBAN satırı. */
.ib-beyan{
  margin:10px 0 0; padding:9px 12px; border-radius:var(--r-s);
  background:var(--surface-2); font-size:13px; color:var(--ink-muted); overflow-wrap:anywhere;
}
.ib-beyan b{color:var(--ink)}
.ib-beyan em{font-style:normal; font-weight:600; color:var(--ok)}
.ib-beyan.uyusmaz{background:var(--bad-soft)}
.ib-beyan.uyusmaz em{color:var(--bad)}

/* ------------------------------------------------------- 3 · tanıyan giriş */
.tanidik{position:relative; margin-bottom:18px}
/* Hesap çipi (Google/Microsoft hesap seçici modeli): baş harf, ad, e-posta, açılır ok. */
.tanidik-hesap{
  display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 14px 10px 10px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
  font:inherit; text-align:left; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.tanidik-hesap:hover{background:#FBF9FE; border-color:var(--line); border-color:color-mix(in srgb,var(--mor) 35%,var(--line))}
.tanidik-hesap:focus-visible{outline:2px solid var(--mor); outline-offset:2px}
.tanidik.acik .tanidik-hesap{border-color:var(--mor); box-shadow:0 0 0 3px transparent; box-shadow:0 0 0 3px color-mix(in srgb,var(--mor) 12%,transparent)}
.tanidik-av{
  width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--mor); color:#fff; font-weight:700; font-size:16px;
}
.tanidik-yazi{flex:1; min-width:0; display:grid; gap:1px; line-height:1.3}
.tanidik-yazi b{font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tanidik-yazi span{font-size:13.5px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tanidik-ok{flex:none; width:20px; height:20px; fill:none; stroke:var(--ink-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s}
.tanidik.acik .tanidik-ok{transform:rotate(180deg)}
.tanidik-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; display:grid; padding:6px;
  border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 12px 32px -12px rgba(36,19,56,.35);
}
.tanidik-menu[hidden]{display:none}
.tanidik-menu button{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 12px; border:0; border-radius:8px;
  background:none; font:inherit; font-size:14.5px; font-weight:500; color:var(--ink); text-align:left; cursor:pointer;
}
.tanidik-menu button:hover,.tanidik-menu button:focus-visible{background:var(--mor-soft); outline:none}
.tanidik-menu svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-muted); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.tanidik-menu [data-tanidik="unut"]{color:var(--bad, #B42318)}
.tanidik-menu [data-tanidik="unut"] svg{stroke:currentColor}

/* ------------------------------ 4 · üst çubuk + tam ekran menü (telefon) --
   Üstte yalnızca orijinal logo ve menü düğmesi (çerçeveli kare, üç çizgi).
   Düğme tam ekran sade menü açar: açık gri karşılama şeridi + yuvarlak
   kapat düğmesi, bağlantı listesi, altta Üye ol / Giriş yap. */

/* Marka işareti HER YERDE aynı: altın disk + askı (logo/logo-isaret.svg).
   Üst çubuk, alt bilgi, paneller ve sayfa içi marka kutuları bu kuralı
   kullanır; içteki çizgi SVG yalnızca erişilebilirlik için kalır, gizlenir. */
.brand-mark,.pnl-marka .mk,.sc-brand .mark{
  background:url("logo/logo-isaret.svg") center/cover no-repeat !important; border-radius:50% !important;
  box-shadow:0 0 0 1px rgba(201,154,46,.35), 0 4px 10px -4px rgba(74,29,140,.35);
}
.brand-mark svg,.pnl-marka .mk svg,.sc-brand .mark svg{visibility:hidden}

@media (max-width:940px){
  .topbar{
    padding-top:env(safe-area-inset-top); background:var(--surface);
    border-bottom:1px solid var(--line); box-shadow:0 6px 14px -12px rgba(36,19,56,.35);
  }
  .topbar .wrap{height:66px; gap:12px; padding-inline:16px}
  .topbar .brand-mark,.topbar .brand-mark svg{width:44px; height:44px}
  .topbar .brand{gap:10px; min-width:0}
  .topbar .brand-name{font-size:21px; gap:10px}
  /* Logonun yanında ürün adı: "Askıda Mutluluk / ile Ödeme" iki satır. */
  .topbar .brand-name small{
    display:block; padding-left:10px; font-size:9px; line-height:1.45; letter-spacing:.12em;
  }
  @media (max-width:350px){
    .topbar .brand-mark,.topbar .brand-mark svg{width:38px; height:38px}
    .topbar .brand-name{font-size:18px; gap:8px}
    .topbar .brand-name small{padding-left:8px; font-size:8px; letter-spacing:.08em}
  }
  .topbar .topacts .btn,.topbar .ust-ad,.topbar.open .topnav{display:none}
  .topbar .navtoggle{
    display:grid; place-items:center; width:54px; height:44px; padding:0;
    border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink);
  }
  .topbar .navtoggle svg{width:26px; height:26px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}

  .mmenu{
    position:fixed; inset:0; z-index:300; display:flex; flex-direction:column;
    background:var(--surface); overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mmenu-bas{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:calc(24px + env(safe-area-inset-top)) 20px 22px 24px; background:var(--surface-2);
  }
  .mmenu-bas b{display:block; font-family:var(--font-baslik); font-size:21px; letter-spacing:-.01em; color:var(--ink)}
  .mmenu-bas span{display:block; margin-top:3px; font-size:15.5px; color:var(--ink-muted)}
  .mmenu-kapat{
    flex:none; width:50px; height:50px; border-radius:50%; border:0; cursor:pointer;
    display:grid; place-items:center; background:var(--surface); box-shadow:0 2px 8px rgba(36,19,56,.08);
  }
  .mmenu-kapat svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round}
  .mmenu-liste{display:grid; padding-block:12px; border-bottom:1px solid var(--line)}
  .mmenu-liste a{padding:15px 28px; font-size:18px; line-height:1.4; color:var(--ink); text-decoration:none}
  .mmenu-liste a[aria-current]{color:var(--green); font-weight:600}
  .mmenu-liste a:active{background:var(--surface-2)}
  .mmenu-eylem{display:grid; gap:12px; padding:24px 16px}
  .mmenu-eylem .btn{min-height:56px; font-size:17px; font-weight:600; border-radius:12px; text-transform:none; letter-spacing:normal}
  .mmenu-eylem .btn-ghost{border:1.5px solid var(--line-strong); color:var(--ink); background:var(--surface)}
  html.menu-acik,html.menu-acik body{overflow:hidden}

  /* Kapak üst çubuk yükseldiği için ekrana sığacak şekilde kısalır. */
  .giris{min-height:auto}
}
.mmenu[hidden]{display:none !important}

/* Masaüstü üst çubuk: hiçbir öğe iki satıra kırılmaz. Çubuk sayfa
   içeriğinden geniş tutulur; orta boy ekranda ikincil yazılar düşer. */
@media (min-width:941px){
  .topbar .wrap{max-width:1320px; gap:20px}
  .topbar .brand-mark,.topbar .brand-mark svg{width:44px; height:44px}
  .topnav{gap:clamp(14px,1.8vw,28px)}
  .topnav a,.topacts .btn,.brand-name small{white-space:nowrap}
  .topacts .btn{padding:10px 18px; font-size:13px; letter-spacing:.08em}
}
@media (min-width:941px) and (max-width:1279px){
  .topbar .brand-name small{display:none}
  .topbar .uz{display:none}
}

/* ------------------------------------------ giriş ekranları (telefon) ---
   Ortalanmış başlık + tek sade kart; açık zeminli dolgulu alanlar, şifre
   gözü, geniş birincil düğme. Tanıtım paneli telefonda gizlenir. */
@media (max-width:900px){
  .auth .auth-side{display:none}
  .auth .auth-main{padding:28px 16px 36px; background:var(--ground)}
  .auth-form{max-width:520px; margin-inline:auto}
  .auth-form > .crumb{display:none}
  .auth-form > .h-page{text-align:center; font-size:34px !important}
  .auth-form > .h-page + p{text-align:center; margin-inline:auto; max-width:34ch}
  .auth-form form{
    margin-top:24px; padding:24px 20px; border:1px solid var(--line); border-radius:20px;
    background:var(--surface); box-shadow:0 10px 30px -24px rgba(36,19,56,.4);
  }
  .auth-form .field .label{font-size:15px; font-weight:500; color:var(--ink)}
  .auth-form .btn-primary.btn-block{min-height:56px; border-radius:14px; font-size:17px; text-transform:none; letter-spacing:normal}
  .auth-form > p.center{text-align:center}
}

/* Tüm telefon formları: dolgulu, yumuşak köşeli alanlar (arama çubuğu dahil). */
@media (max-width:940px){
  .input,.select,.textarea,.pnl-ara input{
    background:var(--surface-2); border:1px solid var(--line); border-radius:12px; min-height:52px;
  }
  .input:focus,.select:focus,.textarea:focus,.pnl-ara input:focus{background:var(--surface); border-color:var(--mor)}

  /* Arama çubuğu: giriş alanlarıyla aynı dolgulu, yumuşak köşeli kutu;
     büyüteç solda. */
  .sss-ara{width:100%; margin-top:24px}
  .sss-ara input{
    height:54px; padding:0 16px 0 46px; border:1px solid var(--line); border-radius:12px;
    background:var(--surface-2); font-size:16px;
  }
  .sss-ara input:focus{background:var(--surface); border-color:var(--mor)}
  .sss-ara svg{left:16px; right:auto; width:18px; height:18px; margin-top:-9px}

  /* Açılır alanlar: giriş kartı gibi beyaz, çerçeveli, 14px köşeli kart;
     başlık koyu yazı, sağda ok. Açılınca yanıt aynı kartın içinde. */
  details,details[open]{border-radius:14px; border:1px solid var(--line); background:var(--surface); box-shadow:0 6px 18px -16px rgba(36,19,56,.45)}
  summary{color:var(--ink); font-size:16px}
  .sss-soru,.sss-soru[open]{margin:0 0 10px; border-radius:14px; box-shadow:0 6px 18px -16px rgba(36,19,56,.45)}
  .sss-soru > summary,.sss-soru > summary:hover{
    padding:18px 16px; background:var(--surface); color:var(--ink); font-weight:600; font-size:16px;
  }
  .sss-soru > summary::after{color:var(--mor)}
  .sss-soru[open] > summary{border-bottom:1px solid var(--line)}
  .sss-yanit{padding:16px; font-size:15px}
  .sss-yanit p{font-size:15px}
  .sss-yasal{border-radius:14px}
  details.form-katla,details.form-katla[open]{border-radius:0; border:0; border-bottom:1px solid var(--line); box-shadow:none; background:none}
}

/* Şifre göster/gizle (uygulama.js ekler). */
.sifre-kutu{position:relative}
.sifre-kutu > .input{padding-right:54px}
.sifre-goz{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:0; background:none; cursor:pointer; border-radius:10px;
  display:grid; place-items:center; color:var(--ink-faint);
}
.sifre-goz svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.sifre-goz:hover{color:var(--ink)}

/* ------------------------------------------ çerez paneli (telefon) ---
   Alttan açılan koyu panel: başlık, açıklama, altta "Tercihleri yönet"
   bağlantısı ve iki dolu düğme. */
@media (max-width:640px){
  .cerez-kutu{background:var(--band); border-top:0; box-shadow:0 -12px 32px -16px rgba(0,0,0,.5)}
  .cerez-ic{padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
  .cerez-ikon{display:none}
  .cerez-satir{grid-template-columns:1fr; gap:16px}
  .cerez-yazi b{font-size:19px; color:var(--band-ink)}
  .cerez-yazi p{margin-top:8px; font-size:15px; line-height:1.6; color:var(--band-muted)}
  .cerez-yazi a{color:var(--lamba-acik)}
  .cerez-eylem{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
  .cerez-eylem .btn{flex:1 1 130px; min-height:48px; padding:10px 14px; font-size:15px; font-weight:600; border-radius:10px; text-transform:none; letter-spacing:normal; white-space:nowrap}
  .cerez-eylem #cerezAyarAc{flex:0 0 100%; order:2; min-height:40px; justify-content:flex-start; padding-inline:0; background:none; border:0; color:var(--band-ink); text-decoration:underline; text-underline-offset:3px}
  .cerez-eylem #cerezGerekli,.cerez-eylem #cerezKabul{background:var(--lamba); border-color:var(--lamba); color:#2A0F52}
  .cerez-ayar{border-top-color:var(--band-line)}
  .cerez-kat{background:transparent; background:color-mix(in srgb,#fff 6%,transparent); border-color:var(--band-line)}
  .cerez-kat b{color:var(--band-ink)}
  .cerez-kat small,.cerez-kat em{color:var(--band-muted)}
}

/* ------------------------------------------------------------ 5 · paneller */
@media (max-width:900px){
  .pnl-yan{
    position:sticky; top:0; z-index:50;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    gap:10px; overscroll-behavior-x:contain; scrollbar-width:none;
    background:var(--surface); background:color-mix(in srgb,var(--surface) 94%,transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .pnl-yan::-webkit-scrollbar{display:none}
  .pnl-marka{padding:0}
  .pnl-marka b{display:none}
  .pnl-marka .mk,.pnl-marka .mk svg{width:34px; height:34px}
  .pnl-nav{gap:6px}
  .pnl-nav button{min-height:40px; border-radius:999px; border:1px solid var(--line); background:var(--surface)}
  .pnl-nav button.etkin{background:var(--mor-soft); border-color:var(--mor)}
  .pnl-nav button.etkin::before{display:none}
  .pnl-nav .nv-ikon{width:26px; height:26px}
  /* Telefonda "Diğer bölümler" katlanmaz: bütün bölümler aynı şeritte. */
  .pnl-nav .nv-diger{display:none}
  .pnl-nav .nv-diger-grup,
  .pnl-nav .nv-diger-grup[hidden]{display:contents !important}
  .pnl-nav-grup{display:none}

  .pnl-kimlik .kim-not{display:none}
  .pnl-ust{padding-inline:14px}
}

/* ------------------------------------------------ 6 · dokunmatik + güvenli */
@media (max-width:940px){
  /* iOS 16px altındaki alanlara odaklanınca sayfayı büyütür. */
  .input,.select,.textarea,input,select,textarea{font-size:16px}
  .btn{min-height:44px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .toasts{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:none}
  .cerez{padding-bottom:env(safe-area-inset-bottom)}
  body{padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
  .form-alt{flex-direction:column; align-items:stretch; gap:12px}
  .form-alt .fa-dugme{display:flex; gap:8px; flex-wrap:wrap}
  .form-alt .fa-dugme .btn{flex:1 1 auto}
  .il-grup{padding:16px 14px 6px}
}
html{-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:color-mix(in srgb,var(--mor) 14%,transparent)}
button,a,label{touch-action:manipulation}

/* Ana ekrana eklenmiş uygulama (standalone): tarayıcı çubuğu yok. */
html.uyg-standalone body{overscroll-behavior-y:none}
html.uyg-standalone .sayfa-izi{display:none}

/* Sayfa geçişleri: destekleyen tarayıcıda uygulama gibi yumuşak geçiş. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .kamera-alan.taraniyor .kamera-dugme{animation:none}
}

/* Uygulamayı yükle düğmesi (uygulama.js yalnızca kurulabilir olduğunda gösterir). */
.uyg-kur{
  position:fixed; z-index:110; left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px;
  border-radius:999px; background:var(--band); color:var(--band-ink);
  box-shadow:var(--shadow-lift); font-size:14px; max-width:calc(100vw - 24px);
}
.uyg-kur b{font-weight:600}
.uyg-kur .btn{min-height:36px; padding:7px 14px; font-size:13.5px}
.uyg-kur button.uyg-kapat{background:none; border:0; color:var(--band-muted); font-size:20px; line-height:1; cursor:pointer; padding:4px 6px}

/* ============================================================ 7 · HAVALE FORMU
   İstek listesi formu (panel #bolumFatura + baslat.html) banka uygulamasındaki
   "Para transferi" ekranı gibi: kalın gri etiket, beyaz ve ince gri çerçeveli
   alan, sağda dolu kamera simgesi. Telefonda ve masaüstünde aynı görünüm. */
.il-form{gap:0}
.il-form .il-grup{
  padding:22px 0 6px; border:0; border-radius:0; background:transparent;
  border-top:1px solid var(--line);
}
.il-form .il-grup:first-child{border-top:0; padding-top:4px}
.il-form .il-grup-bas{margin-bottom:14px}
.il-form .il-grup-bas b{font-family:var(--font-arayuz); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mor)}
.il-form .il-grup-bas span{font-size:14px; color:var(--ink-muted)}
.il-form .field{margin-bottom:20px}
.il-form .label{font-size:17px; font-weight:700; color:#5B5B63; margin-bottom:9px; letter-spacing:-.01em}
.il-form .label .req{color:var(--bad)}
.il-form .input,.il-form .textarea,.il-form .select{
  width:100%; min-height:58px; padding:15px 16px; box-sizing:border-box;
  background:var(--surface); border:1px solid #CDCDD3; border-radius:5px; box-shadow:none;
  font-size:17px; color:var(--ink);
}
.il-form textarea.input{min-height:58px}
.il-form .textarea{min-height:128px; resize:vertical}
.il-form .input::placeholder,.il-form .textarea::placeholder{color:#A9A9B1; font-weight:400}
.il-form .iban-yazi:placeholder-shown{font-family:inherit; letter-spacing:0}
.il-form .input:focus,.il-form .textarea:focus,.il-form .select:focus{
  background:var(--surface); border-color:var(--mor); box-shadow:0 0 0 3px var(--mor-soft); outline:none;
}
/* "Seçiniz" kutusu: bankadaki gibi gri dolgulu, sağda ok. */
.il-form .select{background-color:#EDEDEF; border-color:#CDCDD3; color:var(--ink)}
/* Fotoğraftan gelen (kilitli) alan: beyaz kalır, yazı koyu ve kalın. */
.il-form .input.kilitli{background:var(--surface); border-color:#CDCDD3; color:var(--ink); font-weight:600}
.il-form .kamera-alan > .input{padding-right:72px}
.il-form .kamera-dugme{right:8px; width:56px; height:46px; color:var(--mor)}
.il-form .kamera-dugme svg{width:40px; height:40px}
.il-form .kamera-dugme svg circle{fill:var(--surface); stroke:var(--surface); stroke-width:1.8}
.il-form .form-alt{border-top:1px solid var(--line); padding-top:18px; margin-top:6px}
@media (max-width:940px){
  .il-form .input,.il-form .textarea{background:var(--surface); border:1px solid #CDCDD3; border-radius:5px}
  .il-form .select{background-color:#EDEDEF; border-radius:5px}
  .il-form .input:focus,.il-form .textarea:focus{background:var(--surface)}
}
@media (max-width:640px){
  .il-form .label{font-size:16.5px}
  .il-form .kamera-alan > .input{padding-left:14px; padding-right:68px}
  .il-form .kamera-dugme{width:54px; right:6px}
  .il-form .row2{grid-template-columns:1fr}
  .il-form .form-alt{flex-direction:column; align-items:stretch}
  .il-form .fa-dugme{display:grid; gap:10px}
  .il-form .fa-dugme .btn{width:100%; min-height:54px}
}

/* ------------------------------------------ 8 · Askıda mutluluk başlat
   Telefonda herkese açık sayfaların altında sabit başlat düğmesi. */
.baslat-yuzen{display:none}
@media (max-width:940px){
  .baslat-yuzen{
    position:fixed; z-index:90; left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom));
    display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px;
    border-radius:14px; background:var(--gecis-mor, var(--mor)); color:#fff; text-decoration:none;
    font-size:16.5px; font-weight:700; box-shadow:0 12px 26px -12px rgba(74,29,140,.6);
  }
  .baslat-yuzen svg{width:24px; height:24px; fill:#fff}
  .baslat-yuzen svg circle{fill:var(--mor)}
  html.baslat-yuzen-var body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  html.menu-acik .baslat-yuzen{display:none}
}

/* Süreç çizgisi (panel Listem + inceleme ekranı) */
.surec-cizgi{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:0}
.surec-cizgi li{position:relative; display:grid; grid-template-columns:22px 1fr; gap:10px; padding:0 0 14px; font-size:14.5px; color:var(--ink-faint)}
.surec-cizgi li::before{content:""; width:14px; height:14px; margin:3px 4px 0; border-radius:50%; border:2px solid var(--line-strong); background:var(--surface); box-sizing:border-box}
.surec-cizgi li::after{content:""; position:absolute; left:10px; top:19px; bottom:0; width:2px; background:var(--line)}
.surec-cizgi li:last-child{padding-bottom:0}
.surec-cizgi li:last-child::after{display:none}
.surec-cizgi li b{font-weight:600}
.surec-cizgi li small{display:block; font-size:12.5px; color:var(--ink-faint)}
.surec-cizgi li.tamam{color:var(--ink)}
.surec-cizgi li.tamam::before{background:var(--ok); border-color:var(--ok)}
.surec-cizgi li.simdi{color:var(--ink)}
.surec-cizgi li.simdi::before{background:var(--lamba, var(--brass)); border-color:var(--lamba, var(--brass)); box-shadow:0 0 0 4px transparent; box-shadow:0 0 0 4px color-mix(in srgb,var(--lamba, var(--brass)) 25%,transparent)}
.surec-cizgi li.simdi b{color:var(--mor)}
.surec-cizgi li.hata{color:var(--bad)}
.surec-cizgi li.hata::before{background:var(--bad); border-color:var(--bad)}

/* İnceleme bilgisi kutusu */
.inc-kutu{display:grid; gap:12px; padding:22px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.inc-kutu .inc-ust{display:flex; align-items:center; gap:14px}
.inc-kutu .inc-saat{
  flex:none; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--mor-soft); color:var(--mor);
}
.inc-kutu .inc-saat svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
.inc-kutu h3{margin:0; font-family:var(--font-baslik); font-size:21px; color:var(--ink); line-height:1.25}
.inc-kutu p{margin:0; font-size:15px; color:var(--ink-muted); line-height:1.55}
.inc-kutu .inc-kanal{display:flex; flex-wrap:wrap; gap:8px}
.inc-kutu .inc-kanal span{padding:5px 11px; border-radius:999px; background:var(--surface-2); font-size:13px; font-weight:600; color:var(--ink-muted)}
.il-form .form-alt{display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap}
.il-form .fa-not{flex:1 1 260px; font-size:13.5px; line-height:1.5; color:var(--ink-muted)}
.il-form .fa-dugme{display:flex; gap:10px; flex-wrap:wrap}
.il-form .fa-dugme .btn-primary{min-width:170px; min-height:52px; font-size:16.5px; text-transform:none; letter-spacing:normal; justify-content:center}
@media (max-width:640px){ .il-form .form-alt{flex-direction:column; align-items:stretch} .il-form .fa-dugme{display:grid} .il-form .fa-dugme .btn{width:100%} }
@media (max-width:640px){ .il-form .fa-not{flex:none} }
.ft-tablo .ft-bos td{text-align:center; color:var(--ink-faint); padding:18px 12px; font-size:13.5px; width:auto}
/* Kalem tablosu her ekranda kutuya sığar; tutar sütunu hep görünür. */
.ft-tablo{min-width:0 !important; width:100%}
.ft-tablo td:nth-child(2){overflow-wrap:anywhere}
@media (max-width:640px){ .ft-tablo th,.ft-tablo td{padding-inline:8px} .ft-tablo{font-size:13.5px} }

/* ------------------------------------------ 9 · başlat bandı (site.js)
   Altbilginin hemen üstünde; logo + iki satır + tek düğme. */
.baslat-bant{padding:28px 0; background:var(--ground)}
.bb-kutu{
  display:flex; align-items:center; gap:18px; max-width:880px; margin:0 auto; padding:20px 24px;
  border:1px solid var(--line); border-radius:var(--r-l); background:var(--surface); box-shadow:var(--shadow);
}
.bb-kutu img{width:48px; height:48px; flex:none; border-radius:50%}
.bb-yazi{flex:1; min-width:0; display:grid; gap:2px}
.bb-yazi b{font-family:var(--font-baslik); font-size:18px; font-weight:700; color:var(--ink); line-height:1.25}
.bb-yazi span{font-size:14.5px; color:var(--ink-muted); line-height:1.5}
.bb-kutu .btn{flex:none; text-transform:none; letter-spacing:normal; font-size:15.5px; min-height:48px; padding-inline:22px}
@media (max-width:640px){
  .baslat-bant{padding:20px 0}
  .bb-kutu{flex-wrap:wrap; gap:12px 14px; padding:18px 16px}
  .bb-kutu img{width:42px; height:42px}
  .bb-yazi b{font-size:17px}
  .bb-kutu .btn{flex:1 1 100%; min-height:52px; justify-content:center; border-radius:12px}
}
.baslat-yuzen{transition:transform .25s ease, opacity .25s ease}
.baslat-yuzen.cekil{transform:translateY(140%); opacity:0; pointer-events:none}
@media print{ .baslat-bant,.baslat-yuzen{display:none !important} }

/* ------------------------------------------ 10 · istek listesi kartı
   EP.istekListesiKarti: hazırlık önizlemesi (baslat.html) ve yayındaki
   liste (kampanya.html) aynı kart. */
.ilk{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface)}
.ilk-bas{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--band, #241338); color:#fff}
.ilk-bas img{width:36px; height:36px; border-radius:50%; flex:none}
.ilk-bas small{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.7}
.ilk-bas b{display:block; font-family:var(--font-baslik); font-size:19px; line-height:1.2; color:#fff}
.ilk-satir{display:flex; justify-content:space-between; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:14px}
.ilk-satir span{color:var(--ink-muted); min-width:0}
.ilk-satir b{color:var(--ink); font-weight:600; text-align:right; overflow-wrap:anywhere}
.ilk-satir.vurgu{background:var(--mor-soft)}
.ilk-satir.vurgu b{color:var(--mor); font-size:16px}
.ilk-bolum{padding:9px 16px 7px; background:var(--surface-2); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mor)}
.ilk-kunye{display:flex; gap:12px; align-items:center; padding:14px 16px}
.ilk-kunye > div{flex:1; min-width:0}
.ilk-kunye .lg{width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; overflow:hidden; background:var(--surface-2); color:var(--mor); font-weight:800; font-size:17px; border:1px solid var(--line)}
.ilk-kunye .lg img{width:100%; height:100%; object-fit:cover}
.ilk-kunye b{display:block; font-size:15px; color:var(--ink); line-height:1.3}
.ilk-kunye span{display:block; font-size:13px; color:var(--ink-muted); line-height:1.45; overflow-wrap:anywhere}
.ilk-kunye .iban{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--ink); letter-spacing:.02em}
.ilk-kunye em{font-style:normal; font-weight:700; color:var(--ok)}
.ilk-kunye > .kh-kopya{flex:none; align-self:center}
/* yayındaki listede kartın altındaki katkı adımları */
.katki-kunye.ilk-sar{display:grid; gap:20px; padding:0; border:0; background:none; box-shadow:none}
@media (max-width:560px){ .ilk-kunye{flex-wrap:wrap} .ilk-kunye > .kh-kopya{flex:1 1 100%; justify-content:center; min-height:44px} }
/* Dekont: fotoğrafını çek + dosyadan yükle */
.katki-kunye .kh-yukle{cursor:default; flex-wrap:wrap}
.katki-kunye .kh-yukle-dugme{display:flex; gap:8px; flex:none}
.katki-kunye .kh-yukle-dugme .btn{cursor:pointer; text-transform:none; letter-spacing:normal}
@media (max-width:640px){
  .katki-kunye .kh-yukle-dugme{flex:1 1 100%; display:grid; gap:8px}
  .katki-kunye .kh-yukle-dugme .btn{width:100%; min-height:50px; justify-content:center; font-size:15.5px; border-radius:12px}
}
/* künye: doğrulama rozeti adın yanında, IBAN'ın kime ait olduğu açık */
.ilk-kunye b .ilk-dogru{display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:2px 8px; border-radius:999px; background:var(--ok-soft); color:var(--ok); font-style:normal; font-size:11.5px; font-weight:700; vertical-align:2px; white-space:nowrap}
.ilk-kunye b .ilk-dogru svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.ilk-kunye .iban-et{margin-top:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint)}
.ilk-not{margin:0; padding:10px 16px 14px; font-size:12.5px; line-height:1.5; color:var(--ink-muted)}

/* ------------------------------------------------ 7 · panel menüsü (çekmece)
   Sol menü sabit sütun değil: üst çubuktaki çerçeveli ☰ düğmesiyle soldan
   açılan çekmece (sitedeki menü düğmesiyle aynı görünüm). Tüm genişliklerde. */
.pnl{grid-template-columns:minmax(0,1fr)}
.pnl-menu-ac{
  flex:none; display:grid; place-items:center; width:54px; height:44px; padding:0; cursor:pointer;
  border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink);
}
.pnl-menu-ac:hover{border-color:var(--mor); color:var(--mor)}
.pnl-menu-ac svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.pnl .pnl-yan{
  position:fixed; top:0; bottom:0; left:0; z-index:210; width:min(300px,86vw); height:auto;
  padding:20px 14px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--line); border-bottom:0;
  box-shadow:0 20px 60px -20px rgba(36,19,56,.45);
  transform:translateX(-105%); visibility:hidden;
  transition:transform .22s ease, visibility 0s linear .22s;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.pnl.menu-acik .pnl-yan{transform:none; visibility:visible; transition:transform .22s ease}
.pnl-perde{position:fixed; inset:0; z-index:200; background:transparent; background:color-mix(in srgb,#150B26 42%,transparent)}
/* Yalın, klasik çekmece: kutusuz düz satırlar, küçük çizgi ikon, yalnız
   başlık, ince ayırıcı; seçili satır mor yazı + sol çizgi. */
.pnl .pnl-yan{height:100vh; height:100dvh; gap:0; padding:18px 0 calc(12px + env(safe-area-inset-bottom))}
.pnl .pnl-marka{display:flex; align-items:center; gap:10px; padding:0 20px 16px}
.pnl .pnl-marka .mk,.pnl .pnl-marka .mk svg{width:34px; height:34px}
.pnl .pnl-marka b{display:block; font-size:18px}
.pnl .pnl-marka b small{display:none}
.pnl .pnl-menu-bas{padding:10px 12px 10px 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pnl .pnl-nav{display:flex; flex-direction:column; gap:0; padding:6px 0}
.pnl .pnl-nav button,.pnl .pnl-nav a{
  display:flex; align-items:center; gap:12px; width:100%; min-height:48px; margin:0;
  padding:0 20px; border:0; border-radius:0; background:none; box-shadow:none;
  font:inherit; font-size:15px; color:var(--ink); text-align:left; cursor:pointer; position:relative;
}
.pnl .pnl-nav button:hover,.pnl .pnl-nav a:hover{background:var(--surface-2)}
.pnl .pnl-nav button.etkin,.pnl .pnl-nav button[aria-current="true"]{background:none; color:var(--mor); font-weight:600}
.pnl .pnl-nav button.etkin::before,.pnl .pnl-nav button[aria-current="true"]::before{content:""; display:block; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--mor)}
.pnl .pnl-nav .nv-ikon{width:20px; height:20px; background:none; border:0; border-radius:0; display:grid; place-items:center; color:inherit}
.pnl .pnl-nav .nv-ikon svg{width:20px; height:20px; stroke:currentColor}
.pnl .pnl-nav .nv-yazi b{font-size:15px; font-weight:inherit; color:inherit}
.pnl .pnl-nav .nv-yazi > span{display:none}
.pnl .pnl-nav .nv-diger{justify-content:space-between; border-top:1px solid var(--line); margin-top:6px; color:var(--ink-muted); font-size:14px}
.pnl .pnl-nav .nv-diger svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8}
.pnl .pnl-yan-alt{margin-top:auto; padding:14px 20px 0; border-top:1px solid var(--line)}
html:has(.pnl.menu-acik){overflow:hidden}
@media (prefers-reduced-motion:reduce){.pnl .pnl-yan,.pnl.menu-acik .pnl-yan{transition:none}}

/* Üst çubuk hesap/çıkış: menüdeki satırlarla aynı dil — çizgi ikon + yazı,
   kutusuz. Telefonda (≤560px) yazı düşer, yalnız ikon kalır. */
.pnl-duz{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 10px;
  border:0; border-radius:10px; background:none; cursor:pointer;
  font:inherit; font-size:15px; color:var(--ink); white-space:nowrap;
}
.pnl-duz:hover{background:var(--surface-2); color:var(--mor)}
.pnl-duz svg{width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pnl-ust-sag{gap:4px}
@media (max-width:560px){
  .pnl-duz{padding:0 8px; min-width:44px; justify-content:center}
  .pnl-duz span{display:none}
}
/* Telefonda tüm bölümler açık listelenir; "Diğer bölümler" başlığı gereksiz. */
@media (max-width:900px){.pnl .pnl-nav .nv-diger{display:none}}
/* Menüde tüm bölümler tek düz liste (her genişlikte): "Diğer bölümler"
   katlaması yok. */
.pnl .pnl-nav .nv-diger{display:none}
.pnl .pnl-nav .nv-diger-grup,.pnl .pnl-nav .nv-diger-grup[hidden]{display:contents !important}
/* Alttaki kişi satırı bir düğme: Hesap bilgilerim'e götürür. */
.pnl .pnl-yan-alt{
  display:flex; align-items:center; gap:12px; width:100%; margin-top:auto;
  padding:14px 20px; border:0; border-top:1px solid var(--line); border-radius:0;
  background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer;
}
.pnl .pnl-yan-alt:hover{background:var(--surface-2)}
.pnl .pnl-yan-alt .ky-yazi{flex:1; min-width:0}
.pnl .pnl-yan-alt .ky-yazi span{display:block; font-size:12.5px; color:var(--ink-muted)}
.pnl .pnl-yan-alt .ky-ok{width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-faint); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pnl .pnl-yan-alt:hover .ky-ok{stroke:var(--mor)}
/* Alttaki kişi satırı (çıkış): açık mor zeminde mor kişi ikonu + ad. */
.pnl .pnl-yan-alt{
  width:auto; margin:auto 14px 0; padding:0 14px; min-height:48px; gap:12px;
  border:0; border-radius:12px; background:var(--mor-soft); color:var(--mor);
}
.pnl .pnl-yan-alt:hover{background:var(--surface); background:color-mix(in srgb,var(--mor) 16%,var(--surface))}
.pnl .pnl-yan-alt .ky-kisi{width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pnl .pnl-yan-alt .ky-yazi b{font-family:var(--font-arayuz); font-size:15px; font-weight:500; color:inherit}
.pnl .pnl-yan-alt .ky-yazi span:empty{display:none}

/* ================================================================
   UYGULAMA KABUĞU (≤940px) — site telefonda bir uygulama gibi durur:
   mor uygulama çubuğu (ortada logo, solda geri, sağda menü), altta
   sekme çubuğu, altbilgi yok (yasal bağlantılar menünün altında).
   Renkler yalnız site paletinden (--mor, --lamba).
   ================================================================ */
.app-geri{display:none}
@media (max-width:940px){
  .topbar{background:var(--mor); border-bottom:0; box-shadow:none}
  .topbar.scrolled{border-bottom:0; box-shadow:0 6px 14px -12px rgba(36,19,56,.5)}
  .topbar .wrap{position:relative; justify-content:center; height:56px; padding-inline:56px}
  .topbar .brand{gap:8px}
  .topbar .brand-mark,.topbar .brand-mark svg{width:34px; height:34px}
  .topbar .brand-name{font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--lamba)}
  .topbar .brand-name small{display:none}
  .topbar .topacts{position:absolute; right:6px; top:0; bottom:0; display:flex; align-items:center}
  .topbar .navtoggle{width:44px; height:44px; border:0; border-radius:10px; background:none; color:#fff}
  .app-geri{
    position:absolute; left:6px; top:0; bottom:0; margin:auto 0;
    display:grid; place-items:center; width:44px; height:44px; padding:0;
    border:0; border-radius:10px; background:none; color:#fff; cursor:pointer;
  }
  .app-geri svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
  .topbar .navtoggle:active,.app-geri:active{background:rgba(255,255,255,.14)}
  html.alt-cubuklu body > footer,html.alt-cubuklu footer.site-alt{display:none}
  .mmenu-yasal{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; padding:14px 20px 18px; border-top:1px solid var(--line); font-size:13px}
  .mmenu-yasal a{color:var(--ink-muted); text-decoration:none; min-height:32px; display:inline-flex; align-items:center}
}
@media (min-width:941px){ .mmenu-yasal{display:none} }

/* ================================================================
   PANEL — uygulama düzeni (≤940px). Üstte mor uygulama çubuğu
   (geri · bölüm başlığı · bildirim zili); çekmece menüsü ve arama
   yerine kök ekran "Profil" (Getir tipi): karşılama kartı, üç kısayol,
   satır listesi, çıkış. Masaüstü düzeni değişmez.
   ================================================================ */
.app-baslik{display:none}
#bolumHesabim{display:none}
@media (max-width:940px){
  .pnl-kimlik{display:none}
  .pnl-ust{
    position:sticky; top:0; z-index:150; flex-wrap:nowrap; justify-content:center;
    min-height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 56px 0;
    background:var(--mor); border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .pnl-ust .pnl-menu-ac,.pnl-ust .pnl-ara,#ustHesap,#cikisPanel{display:none}
  /* Marka paneli: masaüstü başlık yazısı ve kişi rozeti çubukta yer almaz. */
  .pnl-ust .pnl-ust-sol,.pnl-ust .pnl-kisi{display:none}
  /* Ayar penceresi ekrana sığar: ızgara öğesi içeriği kadar genişlemesin
     (beş sekmeli marka penceresi 449px'e çıkıp sağdan kesiliyordu). */
  .hmodal{grid-template-columns:minmax(0,1fr); z-index:200; padding:12px}
  .hmodal-kutu{min-width:0; max-width:100%}
  .hmodal-kutu.genis{max-width:min(640px,100%); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px)}
  /* Sekmeler tek satırda ekrana sığar; yana kaydırma yok. */
  .ayar-sekme{gap:0; padding:6px 6px 0; overflow-x:visible}
  .ayar-sekme button{flex:1 1 auto; min-width:0; padding:10px 4px 11px; font-size:12.5px; white-space:nowrap}
  .pnl-ust .app-geri{top:env(safe-area-inset-top)}
  .pnl-geri.gizli{visibility:hidden}
  .app-baslik{display:block; min-width:0; font-size:17px; font-weight:700; color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pnl-ust-sag{position:absolute; right:6px; top:env(safe-area-inset-top); bottom:0; margin:0; display:flex; align-items:center}
  .pnl-zil{width:44px; height:44px; border:0; border-radius:10px; background:none; color:#fff}
  .pnl-zil svg{width:22px; height:22px; stroke-width:1.8}
  .pnl-zil:active{background:rgba(255,255,255,.14)}
  /* Bölüm başlığı artık uygulama çubuğunda: ilk başlık tekrar yazılmaz. */
  .pnl-sol > section > .pnl-baslik:first-child h2{display:none}
  .pnl-sol > section > .pnl-baslik:first-child{margin-bottom:8px}

  #bolumHesabim:not([hidden]){display:block}
  .prf{margin:-4px -2px 0}
  .prf-kart,.prf-kisa button,.prf-liste{background:var(--surface); border:1px solid var(--line); border-radius:12px}
  .prf-kart{
    display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:12px 14px;
    font:inherit; color:var(--ink); text-align:left; cursor:pointer;
  }
  .prf-av{
    flex:none; display:grid; place-items:center; width:48px; height:48px; overflow:hidden; border-radius:12px;
    background:var(--mor-soft); color:var(--mor); font-size:17px; font-weight:700;
  }
  .prf-av img{width:100%; height:100%; object-fit:cover}
  .prf-ad{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
  .prf-ad b{font-size:17px; font-weight:700}
  .prf-ad span{font-size:15px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .prf-duzenle{flex:none; width:22px; height:22px; fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .prf-kisa{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px}
  .prf-kisa button{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    min-height:92px; padding:12px 6px; font:inherit; font-size:13px; font-weight:600; line-height:1.2; color:var(--ink); cursor:pointer;
  }
  .prf-kisa svg{width:30px; height:30px; fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .prf-liste{margin-top:10px; overflow:hidden}
  .prf-liste > a,.prf-liste > button,.prf-liste > .prf-bilgi{
    position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:54px; padding:0 14px;
    border:0; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--ink); text-align:left; text-decoration:none; cursor:pointer;
  }
  .prf-liste > * + *::before{content:""; position:absolute; top:0; left:48px; right:0; height:1px; background:var(--line)}
  .prf-liste svg{flex:none; width:20px; height:20px; fill:none; stroke:var(--mor); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .prf-liste > a > span,.prf-liste > button > span,.prf-bilgi > span{flex:1}
  .prf-liste > a::after,.prf-liste > button::after{
    content:""; flex:none; width:8px; height:8px; margin-right:4px;
    border-top:2px solid var(--mor); border-right:2px solid var(--mor); transform:rotate(45deg);
  }
  .prf-liste > a:active,.prf-liste > button:active,.prf-kart:active,.prf-kisa button:active{background:var(--surface-2)}
  .prf-bilgi{cursor:default}
  .prf-bilgi em{font-style:normal; font-weight:600; color:var(--ink-muted)}
  .prf-sayi{font-style:normal; min-width:22px; height:22px; padding:0 6px; border-radius:99px; display:grid; place-items:center; background:var(--mor); color:#fff; font-size:12px; font-weight:700}
  .prf-ad .prf-kod{font-size:12.5px; color:var(--ink-faint)}
  .prf-ad .prf-kod b{font-size:inherit; font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em; color:var(--ink-muted)}
}

/* ================================================================
   PANEL TABLOLARI → KART (≤940px, telefon ve tablet). Satır = kart; her hücre solda sütun
   adı (data-et, betik başlıktan yazar), sağda değer. İlk hücre kartın
   başlığıdır. Açılan ayrıntı satırı (colspan) kartın alt parçası olur.
   Yatay kaydırma ve sayfa taşması yok; masaüstü tablo aynı kalır.
   ================================================================ */
@media (max-width:940px){
  .pnl-sol .card:has(> .tablewrap > table.kartli),
  .pnl-sol .card:has(> .tablewrap > table.kartli) > .tablewrap{
    padding:0; border:0; background:none; box-shadow:none; overflow:visible; border-radius:0;
  }
  .pnl-sol table.kartli{min-width:0 !important; width:100%; border-collapse:separate; border-spacing:0}
  .pnl-sol table.kartli thead,.pnl-sol table.kartli caption{display:none}
  .pnl-sol table.kartli tbody{display:grid; gap:10px}
  .pnl-sol table.kartli tr{
    display:block; padding:4px 14px; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-kart, 12px);
  }
  .pnl-sol table.kartli tr.bekliyor{box-shadow:inset 3px 0 0 var(--lamba)}
  .pnl-sol table.kartli tr td:first-child{box-shadow:none !important}
  .pnl-sol table.kartli td[data-et]{
    display:grid !important; grid-template-columns:minmax(88px,38%) minmax(0,1fr); column-gap:12px;
    justify-items:end; text-align:right; padding:9px 0; border:0; background:none !important;
    white-space:normal; min-width:0; font-size:14px;
  }
  .pnl-sol table.kartli td[data-et] + td[data-et]{border-top:1px solid var(--line)}
  .pnl-sol table.kartli td[data-et]::before{
    content:attr(data-et); grid-column:1; grid-row:1 / span 9; justify-self:start; text-align:left;
    font-size:12.5px; font-weight:600; color:var(--ink-faint);
  }
  .pnl-sol table.kartli td[data-et] > *{grid-column:2; max-width:100%; overflow-wrap:anywhere}
  .pnl-sol table.kartli td[data-et] > br{display:none}
  /* Başlık hücresi: etiketsiz, sola yaslı, kartın üst satırı. */
  .pnl-sol table.kartli td[data-et]:first-child{display:block !important; justify-items:start; text-align:left; padding:10px 0 8px}
  .pnl-sol table.kartli td[data-et]:first-child::before{display:none}
  .pnl-sol table.kartli td[data-et]:first-child > b{font-size:16px}
  .pnl-sol table.kartli td[data-et]:first-child .hr-alt{text-align:left}
  /* Boş etiketli (başlıksız) hücre ve düğmeli hücre tam genişlik. */
  .pnl-sol table.kartli td[data-et=""]::before{display:none}
  .pnl-sol table.kartli td[data-et]:has(> .btn){display:block !important; justify-items:stretch; padding:10px 0 8px}
  .pnl-sol table.kartli td[data-et]:has(> .btn)::before{display:none}
  .pnl-sol table.kartli td .btn{width:100%; min-height:46px; white-space:normal}
  /* İlerleme hücresi: çubuk tam satır. */
  .pnl-sol table.kartli td.tk-ilerleme{min-width:0; gap:4px 12px}
  .pnl-sol table.kartli td.tk-ilerleme .bar{width:100%}
  /* Ayrıntı satırı: kartın hemen altına yapışan açık zemin. */
  .pnl-sol table.kartli tr.tk-detay-satir,.pnl-sol table.kartli tr.dk-detay-satir{
    margin-top:-14px; padding:0; border-top:0; border-radius:0 0 var(--r-kart, 12px) var(--r-kart, 12px);
    background:var(--surface-2); overflow:hidden;
  }
  .pnl-sol table.kartli tr.tk-detay-satir > td,.pnl-sol table.kartli tr.dk-detay-satir > td{display:block; padding:0 12px 10px}
  .pnl-sol table.kartli tr.acik{border-radius:var(--r-kart, 12px) var(--r-kart, 12px) 0 0}
  /* Dar tablolarda gizlenen sütunlar kartta yeniden görünür (yer var). */
  .pnl-sol table.kartli td.tk-son,.pnl-sol table.kartli td.tk-hedef,.pnl-sol table.kartli td.tk-kalan,
  .pnl-sol table.kartli td.dk-belge,.pnl-sol table.kartli td.dk-veren{display:grid !important}
}

/* Uygulama çubuğu marka kilidi (≤940px): web masaüstündeki yatay kilidin
   mor zemin karşılığı — altın işaret · beyaz "epaylaşım" · ince ayraç ·
   iki satır "ASKIDA MUTLULUK / İLE ÖDEME" (açık altın). */
@media (max-width:940px){
  .topbar .brand{gap:var(--a3, 12px)}
  .topbar .brand-mark,.topbar .brand-mark svg{width:36px; height:36px}
  /* Yatay kilit (web masaüstündeki gibi): ad | ince ayraç | iki satır ürün adı */
  .topbar .brand-name{flex-direction:row; align-items:center; gap:10px; font-size:20px; font-weight:800; line-height:1; letter-spacing:-.02em; color:#fff}
  .topbar .brand-name small{display:block; padding-left:10px; border-left:1px solid rgba(255,255,255,.38); font-size:8.5px; font-weight:700; line-height:1.45; letter-spacing:.1em; color:#FBE9A8; white-space:nowrap}
  .topbar .brand-name small br{display:inline}
  /* Profil ekranı ölçüleri de aynı ölçekte */
  .prf-kisa,.prf-liste{margin-top:var(--a3, 12px)}
  .prf-kisa{gap:var(--a2, 8px)}
  .prf-kart,.prf-kisa button,.prf-liste{border-radius:var(--r-kart, 12px)}
}

/* ================================================================
   MOBİL UYGULAMA TEMEL KURALLARI
   - Yazı boyutu sistem tarafından şişirilmez (yatay çevirmede iOS).
   - Dokunuşlarda 300 ms çift dokunma beklemesi yok (touch-action).
   - Arayüz parçaları (çubuklar, kısayollar) uzun basınca seçilmez /
     menü açmaz; içerik metinleri seçilebilir kalır.
   - Sabit üst çubuk bağlantı hedeflerini örtmez (scroll-padding).
   - Basılı durum geri bildirimi: dokunulan öğe hafifçe solar.
   - Çevrimdışı şeridi: bağlantı kopunca üstte görünür.
   ================================================================ */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
a,button,label,summary,[role="button"],input[type="submit"]{touch-action:manipulation}
.cevrimdisi-serit{display:none}
.cevrimdisi-serit.acik{
  display:flex; align-items:center; justify-content:center; gap:var(--a2, 8px);
  position:sticky; top:0; z-index:66; padding:var(--a2, 8px) var(--a4, 16px);
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; text-align:center;
}
.cevrimdisi-serit svg{flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
@media (max-width:940px){
  html{scroll-padding-top:calc(56px + env(safe-area-inset-top) + 12px)}
  html.kmp-ctali body{padding-bottom:calc(var(--altcubuk-h, 62px) + 68px + env(safe-area-inset-bottom))}
  a,button,label,summary{-webkit-tap-highlight-color:transparent}
  .altcubuk,.topbar,.pnl-ust,.vitrin-nokta,.prf-kisa,.prf-liste,.kat-kutu,.vitrin-kart,.acilis-eylem,.kmp-cta{
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  .btn:active:not([disabled]),.kh-kopya:active,.kh-cip:active,.kat-kutu:active,.altcubuk a:active{opacity:.78}
  .cevrimdisi-serit.acik{top:calc(56px + env(safe-area-inset-top))}
}
/* Telefonda sayfa içi "← Geri" izi gereksiz: uygulama çubuğunda geri var. */
@media (max-width:940px){ html.alt-cubuklu .sayfa-izi{display:none} }

/* ================================================================
   YAZI ÖLÇEĞİ (telefon, ≤940px) — tek aile (Source Sans 3), tek ölçek:
   Başlık 1 26/1.2 · Başlık 2 20/1.25 · Başlık 3 17/1.3 · Gövde 16/1.5 ·
   Küçük 13 · Etiket 12 · Minik 11 (yalnız büyük harfli etiketler).
   Hiyerarşi her sayfada aynı: sayfa başlığı > bölüm başlığı > kart başlığı.
   Tutarlar sabit genişlikli rakamla (tabular) hizalanır.
   ================================================================ */
:root{--t-b1:26px; --t-b2:20px; --t-b3:17px; --t-govde:16px; --t-kucuk:13px; --t-etiket:12px; --t-minik:11px}
@media (max-width:940px){
  body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-kerning:normal}
  main h1{font-size:var(--t-b1) !important; line-height:1.2 !important; letter-spacing:-.02em !important; text-wrap:balance}
  main h2{font-size:var(--t-b2) !important; line-height:1.25 !important; letter-spacing:-.01em !important; text-transform:none !important; text-wrap:balance}
  main h3{font-size:var(--t-b3) !important; line-height:1.3 !important; letter-spacing:-.005em !important; text-transform:none !important}
  main p{text-wrap:pretty}
  /* Liste kartlarında okunaklılık alt sınırı */
  .izgara .lmarka{font-size:var(--t-minik) !important}
  .izgara .lkategori,.lvideo{font-size:var(--t-minik) !important}
  .izgara .ldurum{font-size:var(--t-etiket) !important}
  /* Tutarlar */
  .ldurum b,.kmp-sayilar b,.kmp-cta-bilgi b,.kh-cip,.tk-ozet b,.prf-kod b,.an-adet{font-variant-numeric:tabular-nums}
}

/* ================================================================
   ALT SEKME ÇUBUĞU · seçili gösterge (Material 3 tipi): seçili sekmenin
   simgesi açık mor hap içinde, yazısı kalın; diğerleri nötr.
   ================================================================ */
@media (max-width:940px){
  .altcubuk a{gap:4px; font-size:var(--t-minik); font-weight:600; letter-spacing:.01em}
  .altcubuk a > svg{box-sizing:content-box; width:24px; height:24px; padding:4px 16px; border-radius:999px; transition:background-color .2s ease}
  .altcubuk a[aria-current="page"] > svg{background:var(--mor-soft); stroke-width:2.2}
  .altcubuk a[aria-current="page"]{font-weight:700}
  .altcubuk .altcubuk-orta span{font-weight:700}
}

/* Boş durum (uygulama standardı): simge · başlık · tek cümle · tek eylem. */
.bos-durum{display:grid; justify-items:center; gap:var(--a2, 8px); padding:var(--a8, 32px) var(--a4, 16px); text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kart, 12px)}
.bos-durum .bos-ikon{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--mor-soft); color:var(--mor); margin-bottom:var(--a1, 4px)}
.bos-durum .bos-ikon svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8}
.bos-durum b{font-size:var(--t-b3, 17px); font-weight:700; color:var(--ink)}
.bos-durum > span:not(.bos-ikon){max-width:34ch; font-size:var(--t-kucuk, 13px); line-height:1.5; color:var(--ink-muted)}
.bos-durum .btn{margin-top:var(--a2, 8px); min-height:48px}

/* Alt sekme çubuğu — Getir biçimi: yalnız simge (ad ekran okuyucuya),
   seçili sekme mor, diğerleri gri; ortada mor daire içinde sarı simge. */
@media (max-width:940px){
  .altcubuk a > span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .altcubuk a{justify-content:center; min-height:56px}
  .altcubuk a > svg{padding:0; width:26px; height:26px; background:none !important; color:inherit}
  .altcubuk a{color:#A9A3B5}
  .altcubuk a[aria-current="page"]{color:var(--mor)}
  .altcubuk a[aria-current="page"] > svg{stroke-width:2.4}
  .altcubuk .altcubuk-orta{justify-content:center}
  .altcubuk-orta i{width:60px; height:60px; margin-top:-24px; background:var(--mor)}
  .altcubuk-orta i svg{stroke:var(--lamba)}
}
/* Uygulama modunda sekme kök sayfalarında sayfa izi (Ana sayfa › Keşfet) gereksiz. */
@media (max-width:940px){ html.alt-cubuklu .kbas .kiz{display:none} }

/* ================================================================
   KAMPANYA · HEDEF KARTI (telefon/tablet) — uygulama ürün sayfası
   düzeni: görsel → kimin listesi → başlık → ürün · mağaza → kalan
   tutar → ilerleme → Hediyeye katkı yap / Paylaş. Künye katlanır.
   ================================================================ */
.kmp-hedef{display:none}
details.ilk-ac > summary{display:none}
@media (max-width:940px){
  .kmp-hedef{display:block; overflow:hidden; border-radius:16px; background:var(--surface); border:1px solid var(--line)}
  #kOzet,#kHikaye{display:none !important}
  .kh-gorsel{position:relative; aspect-ratio:16 / 10; background:var(--surface-2)}
  .kh-gorsel img{width:100%; height:100%; object-fit:cover; display:block}
  .kh-cip,.kh-sure{position:absolute; top:var(--a3); padding:5px 10px; border-radius:999px; font-size:12px; font-weight:700; line-height:1}
  .kh-cip{left:var(--a3); background:rgba(255,255,255,.94); color:var(--ink)}
  .kh-sure{right:var(--a3); background:var(--erguvan); color:#fff}
  .kh-sure.kapali{background:var(--ink-muted)}
  .kh-govde{display:grid; gap:var(--a2); padding:var(--a4)}
  .kh-kisi{display:flex; align-items:center; gap:var(--a2); font-size:13px; font-weight:600; color:var(--ink-muted)}
  .kh-kisi i{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--mor-soft); color:var(--mor); font-style:normal; font-size:12px; font-weight:800}
  .kmp-hedef h1{margin:0; color:var(--ink)}
  .kh-urun{margin:0; font-size:14px; line-height:1.45; color:var(--ink-muted)}
  .kh-urun b{color:var(--ink); font-weight:700}
  .kh-onay{display:inline-grid; vertical-align:-3px}
  .kh-onay svg{width:16px; height:16px; fill:none; stroke:var(--ok); stroke-width:2.2}
  .kh-tutar{display:flex; align-items:baseline; gap:var(--a2); margin-top:var(--a1)}
  .kh-tutar b{font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--mor); font-variant-numeric:tabular-nums; line-height:1}
  .kh-tutar span{font-size:14px; font-weight:600; color:var(--ink-muted)}
  .kh-cubuk{height:8px; border-radius:99px; background:var(--mor-soft); overflow:hidden}
  .kh-cubuk i{display:block; height:100%; border-radius:inherit; background:var(--mor)}
  .kh-ist{display:flex; justify-content:space-between; gap:var(--a3); font-size:13px; color:var(--ink-muted); font-variant-numeric:tabular-nums}
  .kh-ist b{color:var(--ink); font-weight:700}
  .kh-bitti{display:flex; gap:var(--a3); align-items:flex-start; padding:var(--a3); border-radius:12px; background:var(--ok-soft); color:var(--ok)}
  .kh-bitti svg{flex:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2}
  .kh-bitti span{display:grid; gap:2px; font-size:13px; color:var(--ink-muted)}
  .kh-bitti b{font-size:15px; color:var(--ok)}
  .kh-eylem{display:grid; grid-template-columns:1fr auto; gap:var(--a2); margin-top:var(--a2)}
  .kh-eylem:has(> :only-child){grid-template-columns:1fr}
  .kh-eylem .btn{min-height:50px; font-size:16px}
  .kh-eylem .btn-ghost{display:inline-flex; align-items:center; gap:6px; padding-inline:var(--a4)}
  .kh-eylem .btn-ghost svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8}

  /* Künye katlanır: başlık satırı dokunulabilir kart */
  details.ilk-ac{border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden}
  details.ilk-ac > summary{
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px var(--a3); padding:var(--a3) var(--a4);
    min-height:56px; cursor:pointer; list-style:none;
  }
  details.ilk-ac > summary::-webkit-details-marker{display:none}
  details.ilk-ac > summary span{font-size:15px; font-weight:700; color:var(--ink)}
  details.ilk-ac > summary small{grid-column:1; font-size:12.5px; color:var(--ink-muted)}
  details.ilk-ac > summary::after{
    content:""; grid-column:2; grid-row:1 / span 2; width:9px; height:9px; margin-right:4px;
    border-right:2px solid var(--mor); border-bottom:2px solid var(--mor); transform:rotate(45deg); transition:transform .2s ease;
  }
  details.ilk-ac[open] > summary::after{transform:rotate(-135deg)}
  details.ilk-ac > .ilk{border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; margin:0}
}

/* ================================================================
   KEŞFET — uygulama düzeni (≤940px): koyu bant yerine beyaz sayfa
   başlığı, yatay kayan özel an çipleri, kompakt süzgeç/sıralama satırı
   ve Getir ürün ızgarası gibi sık kart dizilimi (telefonda 2, tablette
   3–5 sütun). Masaüstü değişmez.
   ================================================================ */
.k-cipler{display:none}
@media (max-width:940px){
  .kbas{background:transparent; color:var(--ink); border:0; padding:var(--a4) 0 0}
  .kbas h1{color:var(--ink); margin-top:0; max-width:none}
  .kbas p{display:none}
  .k-cipler{
    display:flex; gap:var(--a2); overflow-x:auto; scrollbar-width:none;
    margin:var(--a3) calc(-1 * var(--kenar)) 0; padding:0 var(--kenar) var(--a1); scroll-padding:0 var(--kenar);
  }
  .k-cipler::-webkit-scrollbar{display:none}
  .k-cipler a{
    flex:none; display:inline-flex; align-items:center; min-height:36px; padding:0 var(--a4);
    border:1px solid var(--line-strong); border-radius:999px; background:var(--surface);
    font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap;
  }
  .k-cipler a[aria-current="true"]{background:var(--mor); border-color:var(--mor); color:#fff}
  html.alt-cubuklu body:has(.kbas){background:#fff}

  .kbas + .vitrin{padding-top:var(--a3)}
  .kduzen{gap:var(--a3)}
  /* Seçim düğmeleri modeli (kullanıcı seçimi: Süzgeçler): beyaz zemin, ince
     açık mor çerçeve, 12px köşe, koyu 600 yazı, mor simge. Kategori çipleri
     ve sıralama kutusu da aynı model; seçili çip mor dolgulu. */
  .kyan-ac{min-height:48px; padding:0 var(--a4); border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--ink); font-size:15px; font-weight:600}
  .kyan-ac svg{width:18px; height:18px; stroke:var(--mor); stroke-width:1.8}
  .kyan-ac .sayi{font-size:13px; font-weight:600; color:var(--ink-muted)}
  .k-cipler a{min-height:44px; padding:0 var(--a4); border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); font-size:14.5px; font-weight:600; color:var(--ink)}
  .k-cipler a[aria-current="true"]{background:var(--mor); border-color:var(--mor); color:#fff}
  .ksirala .select{min-height:44px; border:1px solid var(--line-strong); border-radius:12px; background-color:var(--surface); font-weight:600}
  .kust{padding-bottom:0; border-bottom:0; gap:var(--a2) var(--a3)}
  .ksayi{font-size:14px}
  .ksayi b{font-size:17px}
  .ksirala label{display:none}
  .ksirala .select{min-width:0; width:auto; min-height:40px; padding-block:0; border-radius:999px; font-size:14px}

  .izgara{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:var(--a5) var(--a3); margin-top:var(--a4)}
  .izgara .lgorsel{aspect-ratio:1; border-radius:12px}
  .izgara .lvideo,.izgara .lrozet{top:8px; font-size:11px; padding:3px 8px}
  .izgara .lvideo{left:8px} .izgara .lrozet{right:8px}
  .izgara .lkategori{left:8px; bottom:7px}
  .izgara .lgovde{padding-top:var(--a2); gap:var(--a1)}
  .izgara .lmarka{letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
  .izgara .lbaslik{font-size:15px !important; line-height:1.25}
  .izgara .lurun{font-size:13px; -webkit-line-clamp:1}
  .izgara .ldurum{line-height:1.4}
  .izgara .lcta{min-height:40px; padding:8px 6px; font-size:13.5px; margin-top:var(--a1); white-space:nowrap; border-radius:10px}
  .izgara .lcta svg{display:none}
}
@media (max-width:940px){ .kbas ~ .section-tight{padding-top:var(--a3)} .kbas ~ .vitrin .vitrin-nokta{margin-top:0} }

/* ================================================================
   NASIL ÇALIŞIR (akis.html #isleyis) — uygulama düzeni (≤940px):
   özellikler 2×2, eylemler tam genişlik. Masaüstü değişmez.
   ================================================================ */
@media (max-width:940px){
  #isleyis .ak-ozellik{max-width:720px; margin:var(--a2) auto 0; padding:var(--a4); border-radius:16px}
  #isleyis .ak-ozellik ul{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a2)}
  #isleyis .ak-ozellik li{padding:var(--a3)}
  #isleyis .ak-eylem{max-width:720px; margin:var(--a6) auto 0; display:grid; gap:var(--a2)}
  #isleyis .ak-eylem .btn{width:100%; min-height:50px; justify-content:center}
}

/* Nasıl çalışır · başlık alanı korunur (ortalı etiket, mor başlık, açıklama,
   Fatura → İstek listesi → Hediye kabulü şeridi); başlık telefonda ölçekli.
   Adımlar profesyonel kart: beyaz yüzey, ince çerçeve, hafif gölge; kartın
   içinde fotoğraf (telefonda üstte, tablette solda) ve metin. */
@media (max-width:940px){
  #isleyis .ak-bas h1{color:var(--green)}
  #isleyis .ak-yol{margin-top:var(--a6)}
}

/* Nasıl çalışır · adım kartları (≤940px): her adım tek kart — beyaz
   yüzey, ince çerçeve, hafif gölge. Telefonda fotoğraf üstte (16:9),
   tablette solda (sabit 220px); numara fotoğrafın köşesinde beyaz halkalı. */
@media (max-width:940px){
  #isleyis .ak-akis{grid-auto-flow:row; grid-template-columns:1fr; gap:var(--a3); max-width:720px; margin:var(--a8) auto 0}
  #isleyis .ak-adim{
    position:relative; display:grid; grid-template-columns:1fr; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 1px 2px rgba(36,19,56,.05), 0 12px 28px -20px rgba(36,19,56,.4);
  }
  #isleyis .ak-adim::after{display:none}
  #isleyis .ak-foto{width:100%; min-height:0; aspect-ratio:16 / 9; border-radius:0; margin:0}
  #isleyis .ak-yazi{padding:var(--a3) var(--a4) var(--a4); gap:var(--a1); align-content:start}
  #isleyis .ak-no{
    position:absolute; top:var(--a3); left:var(--a3); z-index:2; width:32px; height:32px; font-size:14px;
    box-shadow:0 0 0 3px rgba(255,255,255,.95);
  }
  #isleyis .ak-yazi h2,#isleyis .ak-yazi h3{margin:0}
  #isleyis .ak-yazi p{font-size:14px; line-height:1.5}
}
@media (min-width:561px) and (max-width:940px){
  #isleyis .ak-adim{grid-template-columns:220px minmax(0,1fr)}
  #isleyis .ak-foto{aspect-ratio:auto; height:100%; min-height:140px}
  #isleyis .ak-yazi{align-content:center; padding:var(--a4) var(--a5)}
}

/* ================================================================
   MARKALAR (markalar.html) — uygulama düzeni (≤940px). Mor uygulama
   çubuğunun devamı mor başlık alanı; üç olgu kartı başlık alanının
   altına biner. Bölümler beyaz sayfada kart: değer önerisi 2'li
   kutular, süreç dikey adım çizelgesi, panel ve güvenceler simgeli
   satır listesi; kapanış mor kart. Başvuru penceresi alttan açılır.
   Tablette içerik 720px'te ortalanır. Masaüstü değişmez.
   ================================================================ */
@media (max-width:940px){
  html.alt-cubuklu body:has(main.mk){background:#fff}
  .mk .wrap{max-width:720px}
  .mk .mk-ik{
    display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:var(--r-kart);
    background:var(--mor-soft); color:var(--mor);
  }
  .mk .mk-ik svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8}

  /* Başlık alanı: uygulama çubuğundan ayrı, beyaz zeminde yuvarlak köşeli
     mor kart; olgular kartın altında beyaz şerit. */
  .mk .mk-bas{background:transparent; padding:var(--a4) 0 0; --btn-bg:#fff; --btn-ink:#33115F}
  .mk .mk-bas .wrap{
    width:calc(100% - 2 * var(--kenar)); max-width:676px; padding:var(--a6) var(--a5) 0; overflow:hidden;
    background:var(--mor); border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 6px rgba(42,15,82,.08), 0 16px 32px -20px rgba(42,15,82,.5);
  }
  .mk .mk-ust{font-size:var(--t-minik); color:var(--lamba)}
  .mk .mk-bas h1{margin-top:var(--a2); max-width:none; color:#fff}
  .mk .mk-bas p{margin-top:var(--a3); font-size:15px; line-height:1.5; color:rgba(255,255,255,.86)}
  .mk .mk-eylem{display:grid; grid-template-columns:1fr 1fr; gap:var(--a2); margin-top:var(--a5)}
  .mk .mk-eylem .btn{width:100%; min-height:50px; padding:0 var(--a3); justify-content:center; font-size:15.5px; white-space:nowrap}
  .mk .mk-bas .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}
  .mk .mk-olgu{
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin:var(--a6) calc(-1 * var(--a5)) 0; border:0; border-radius:0; box-shadow:none;
  }
  .mk .mk-olgu div,.mk .mk-olgu div + div{padding:var(--a4) var(--a2); border-bottom:0; text-align:center}
  .mk .mk-olgu div + div{border-left:1px solid var(--line)}
  .mk .mk-olgu dt{font-size:16px; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--mor)}
  .mk .mk-olgu dd{margin-top:var(--a1); font-size:var(--t-etiket); line-height:1.35}

  /* Bölümler */
  .mk .mk-bolum,.mk .mk-bolum + .mk-bolum{padding:var(--a8) 0 0}
  .mk .mk-bas + .mk-bolum{padding-top:var(--a8)}
  .mk .mk-bolum + .mk-bolum .wrap{border-top:0; padding-top:0}
  .mk .mk-bolum .wrap{grid-template-columns:minmax(0,1fr); gap:var(--a3)}
  .mk .mk-bolum header{flex-direction:row; align-items:baseline; gap:var(--a2)}
  .mk .mk-bolum header .no{font-size:13px; color:var(--mor)}
  .mk .mk-bolum h2{color:var(--ink)}

  /* 01 · Değer önerisi: 2'li kutular (tablette 3'lü) */
  .mk .mk-liste{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--a2)}
  .mk .mk-liste li{
    display:flex; flex-direction:column; gap:var(--a1); padding:var(--a4) var(--a3);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kart);
  }
  .mk .mk-liste li .mk-ik{margin-bottom:var(--a2)}
  .mk .mk-liste b{font-size:15px; line-height:1.25}
  .mk .mk-liste span{margin-top:0; font-size:13px; line-height:1.45}

  /* 03 · Yönetim paneli ve 04 · Güvenceler: simgeli satır listesi */
  .mk .mk-liste.uclu,.mk .mk-cerceve{
    grid-template-columns:1fr; gap:0; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
  }
  .mk .mk-liste.uclu li,.mk .mk-cerceve div{
    display:grid; grid-template-columns:40px minmax(0,1fr); align-content:center; gap:2px var(--a3);
    padding:var(--a3) var(--a4); border:0; border-radius:0; background:none;
  }
  .mk .mk-liste.uclu li + li,.mk .mk-cerceve div + div{border-top:1px solid var(--line)}
  .mk .mk-liste.uclu li .mk-ik,.mk .mk-cerceve .mk-ik{grid-row:1 / span 2; align-self:center; margin:0}
  .mk .mk-cerceve dt{font-size:var(--t-minik); letter-spacing:.1em}
  .mk .mk-cerceve dd{margin:0; font-size:14px; line-height:1.45}
  .mk .mk-cerceve .mk-ik{background:var(--ok-soft); color:var(--ok)}

  /* 02 · Süreç: dikey adım çizelgesi (numara · adım · sorumlu · işlem) */
  .mk .mk-tablo{display:block; width:auto; padding:var(--a4); background:var(--surface); border:1px solid var(--line); border-radius:16px}
  .mk .mk-tablo thead{display:none}
  .mk .mk-tablo tbody{display:block}
  .mk .mk-tablo tr{position:relative; display:block; padding:0 0 var(--a5) 44px; border:0}
  .mk .mk-tablo tr:last-child{padding-bottom:0}
  .mk .mk-tablo tr:not(:last-child)::before{content:""; position:absolute; left:15px; top:34px; bottom:2px; width:2px; border-radius:2px; background:var(--mor-soft)}
  .mk .mk-tablo td{display:block; width:auto; padding:0; border:0; white-space:normal}
  .mk .mk-tablo td:first-child{font-size:16px; line-height:32px; white-space:normal}
  .mk .mk-tablo i{position:absolute; left:0; top:0; width:32px; height:32px; margin:0; background:var(--mor); color:#fff; font-size:14px; font-weight:700}
  .mk .mk-tablo i.son{background:#6D2FBF; color:#EFCB63}
  .mk .mk-tablo td:nth-child(2){
    display:inline-block; margin:2px 0 0; padding:3px 10px; border-radius:999px;
    background:var(--mor-soft); color:var(--mor); font-size:var(--t-etiket); font-weight:700; letter-spacing:0; text-transform:none;
  }
  .mk .mk-tablo td:nth-child(3){margin:var(--a2) 0 0; font-size:14px; line-height:1.5}

  /* Kapanış: mor kart */
  .mk .mk-kapanis{background:transparent; padding:var(--a8) 0}
  .mk .mk-kapanis .wrap{
    display:block; width:calc(100% - 2 * var(--kenar)); max-width:676px; padding:var(--a5);
    background:var(--mor); border-radius:16px; color:#fff;
  }
  .mk .mk-kapanis h2{color:#fff}
  .mk .mk-kapanis p{margin-top:var(--a2); font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.86)}
  .mk .mk-kapanis .mk-eylem{margin-top:var(--a5)}
  .mk .mk-kapanis .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}

  /* Başvuru penceresi: alttan açılan sayfa (bottom sheet) */
  .mb-modal{place-items:end center; padding:0; padding-top:env(safe-area-inset-top)}
  .mb-kutu{
    max-width:560px; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; margin:0;
    padding:var(--a3) var(--a5) calc(var(--a5) + env(safe-area-inset-bottom));
    border:0; border-radius:20px 20px 0 0; overscroll-behavior:contain;
  }
  .mb-kutu::before{content:""; display:block; width:40px; height:4px; margin:0 auto var(--a3); border-radius:99px; background:var(--line-strong)}
  .mb-bas{margin-bottom:var(--a4)}
  .mb-bas h2{font-size:var(--t-b2) !important}
  .mb-kutu .input,.mb-kutu .select,.mb-kutu .textarea{font-size:16px; min-height:48px}
  .mb-alt{display:grid; grid-template-columns:auto 1fr; gap:var(--a2)}
  .mb-alt .btn{min-height:50px; justify-content:center}
}
@media (max-width:560px){
  .mk .mk-eylem{grid-template-columns:1fr}
}
@media (min-width:561px) and (max-width:940px){
  .mk .mk-liste:not(.uclu){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ================================================================
   HAKKIMIZDA (hakkimizda.html) — uygulama düzeni (≤940px). Beyaz
   sayfa; Hakkımızda | İletişim iki parçalı seçici; metin kartsız,
   okunaklı gövde yazısı; iletişim bilgileri tek kart içinde satır
   listesi (üstte etiket, altta değer). Tablette 720px'te ortalanır.
   Masaüstü değişmez.
   ================================================================ */
@media (max-width:940px){
  html.alt-cubuklu body:has(.hk-sayfa){background:#fff}
  .hk-sayfa{padding:var(--a4) 0 var(--a8)}
  .hk-sayfa .wrap{max-width:720px}
  .hk-duzen{grid-template-columns:minmax(0,1fr); gap:var(--a5)}

  /* İki parçalı seçici */
  .hk-menu{
    display:grid; grid-template-columns:1fr 1fr; gap:var(--a1); padding:var(--a1);
    background:var(--surface-2); border:0; border-radius:var(--r-kart); box-shadow:none;
  }
  .hk-menu li{flex:none}
  .hk-menu a,.hk-menu li + li a{
    display:grid; place-items:center; min-height:40px; padding:0 var(--a3);
    border:0; border-radius:9px; font-size:15px; font-weight:600; color:var(--ink-muted);
  }
  .hk-menu a[aria-current]{background:#fff; color:var(--mor); font-weight:700; box-shadow:0 1px 3px rgba(42,15,82,.12)}

  /* Metin */
  .hk-kart{padding:0; background:none; border:0; box-shadow:none}
  .hk-kart h1{margin:0 0 var(--a3); color:var(--ink)}
  .hk-kart p{margin:0; font-size:var(--t-govde); line-height:1.6; color:var(--ink-muted)}
  .hk-kart p + p{margin-top:var(--a3)}
  .hk-kart p a{font-weight:600; color:var(--mor)}

  /* İletişim bilgileri: kart içinde satır listesi */
  .hk-iletisim{
    margin-top:var(--a8); overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
  }
  .hk-iletisim > strong{margin:0; padding:var(--a4); font-size:var(--t-b3); color:var(--ink); border-bottom:1px solid var(--line)}
  .hk-iletisim p,.hk-iletisim p + p{
    display:grid; gap:2px; margin:0; padding:var(--a3) var(--a4);
    font-size:15px; line-height:1.4; color:var(--ink); overflow-wrap:anywhere;
  }
  .hk-iletisim p + p{border-top:1px solid var(--line)}
  .hk-et{font-size:var(--t-etiket); font-weight:600; color:var(--ink-faint)}
  .hk-et::after{content:none}
  .hk-iletisim a{justify-self:start; color:var(--mor)}
}
@media (min-width:561px) and (max-width:940px){
  /* Tablette etiket solda, değer sağda */
  .hk-iletisim p,.hk-iletisim p + p{grid-template-columns:180px minmax(0,1fr); gap:var(--a3); align-items:baseline}
}

/* ================================================================
   SIK SORULAN SORULAR (sss.html) — yardım merkezi düzeni (≤940px).
   Beyaz sayfa, sola hizalı başlık, dolgulu arama; altında çerçevesiz
   konu şeridi (seçili konu alt çizgili, kaydırırken üstte sabit ve
   bulunulan bölümü işaretler). Her bölüm aynı beyaz kart: ince
   çizgiyle ayrılmış satırlar, gri ok. Süreç adımları küçük gri
   "ADIM n" etiketiyle. Renk yalnız vurguda (seçili konu, bağlantı).
   Tablette 676px'te ortalanır. Masaüstü değişmez.
   ================================================================ */
@media (max-width:940px){
  html:has(.sss-cipler){scroll-padding-top:calc(56px + 49px + env(safe-area-inset-top) + var(--a4))}
  html.alt-cubuklu body:has(.sss-sayfa){background:#fff}
  .sss-sayfa{padding:var(--a6) 0 var(--a8); background:#fff}
  .sss-govde{max-width:676px}

  /* Başlık */
  .sss-bas{text-align:left}
  .sss-bas .eyebrow{font-size:var(--t-minik); letter-spacing:.12em; color:var(--ink-faint)}
  .sss-bas h1{margin-top:var(--a1); color:var(--ink)}
  .sss-bas p{margin-top:var(--a2); max-width:46ch; font-size:15px; line-height:1.5; color:var(--ink-muted)}
  .sss-ara{max-width:none; margin-top:var(--a5)}
  .sss-ara input{height:50px; box-shadow:none}

  /* Konu şeridi: çerçevesiz sekmeler, seçili olan alt çizgili */
  .sss-cipler{
    position:sticky; top:calc(56px + env(safe-area-inset-top)); z-index:6;
    display:flex; gap:var(--a5); overflow-x:auto; scrollbar-width:none;
    margin:var(--a4) calc(-1 * var(--kenar)) 0; padding:0 var(--kenar); scroll-padding:0 var(--kenar);
    background:#fff; border-bottom:1px solid var(--line);
    -webkit-user-select:none; user-select:none;
  }
  .sss-cipler::-webkit-scrollbar{display:none}
  .sss-cipler a{
    position:relative; flex:none; display:inline-flex; align-items:center; min-height:48px;
    font-size:14.5px; font-weight:600; color:var(--ink-muted); text-decoration:none; white-space:nowrap;
  }
  .sss-cipler a[aria-current]{color:var(--mor)}
  .sss-cipler a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--mor)}

  /* Bölüm başlığı: (varsa) küçük gri "ADIM n" etiketi + başlık */
  .sss-grup{margin-top:var(--a8)}
  .sss-grup h2{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin:0 0 var(--a3); font-size:var(--t-b3) !important; font-weight:700; color:var(--ink)}
  .sss-no{
    display:block; font-size:var(--t-minik); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-faint); font-variant-numeric:tabular-nums;
  }
  .sss-no::before{content:"Adım "}
  .sss-no::after{content:none}

  /* Satırlar: tek kart, ince ayraç, gri ok */
  .sss-grup .sss-soru,.sss-grup .sss-soru[open]{
    margin:0; border:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--surface);
  }
  .sss-grup .sss-soru + .sss-soru{border-top:0}
  .sss-grup .sss-soru + .sss-soru > summary{box-shadow:inset 0 1px 0 var(--line)}
  .sss-grup .sss-soru:first-of-type{border-top-left-radius:12px; border-top-right-radius:12px}
  .sss-grup .sss-soru:last-of-type{border-bottom-left-radius:12px; border-bottom-right-radius:12px}
  .sss-grup .sss-soru > summary,.sss-grup .sss-soru > summary:hover{
    min-height:56px; padding:var(--a3) var(--a4); gap:var(--a4); background:transparent;
    font-size:15.5px; font-weight:600; line-height:1.4; color:var(--ink);
  }
  .sss-grup .sss-soru > summary::after{width:7px; height:7px; border-color:var(--ink-faint); border-width:2px}
  .sss-grup .sss-soru[open] > summary{border-bottom:0}
  .sss-grup .sss-yanit{padding:0 var(--a4) var(--a4); font-size:15px; line-height:1.6; color:var(--ink-muted)}
  .sss-grup .sss-yanit a{color:var(--mor); font-weight:600}
  .sss-grup .sss-soru > summary:active{background:var(--surface-2)}

  /* Hizmet bedelleri: etiket solda, tutar sağda, ince ayraçlı */
  .sss-yanit .sum{margin:0}
  .sss-yanit .sum li{display:flex; justify-content:space-between; gap:var(--a3); padding:var(--a2) 0; font-size:14px; border-bottom:1px solid var(--line)}
  .sss-yanit .sum li:last-child{border-bottom:0}
  .sss-yanit .sum li b{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}

  /* Destek: nötr kart */
  .sss-destek{
    margin-top:var(--a8); padding:var(--a5); text-align:left;
    background:var(--ground); border:1px solid var(--line); border-radius:12px;
  }
  .sss-destek h2{font-size:var(--t-b3) !important; font-weight:700; color:var(--ink)}
  .sss-destek p{margin:var(--a1) 0 0; font-size:14.5px; line-height:1.5}
  .sss-destek .btn{display:flex; width:100%; min-height:50px; justify-content:center; margin-top:var(--a2)}
  .sss-destek .btn:first-of-type{margin-top:var(--a4)}
  .sss-destek .btn-ghost{background:#fff}
}
@media (min-width:700px) and (max-width:940px){
  .sss-destek{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--a1) var(--a2)}
  .sss-destek h2,.sss-destek p{grid-column:1}
  .sss-destek .btn,.sss-destek .btn:first-of-type{grid-row:1 / span 2; width:auto; margin:0; padding-inline:var(--a4)}
  .sss-destek .btn-primary{grid-column:2}
  .sss-destek .btn-ghost{grid-column:3}
}

/* ================================================================
   İLETİŞİM (iletisim.html) — kurumsal düzen (≤940px). SSS ile aynı
   dil: beyaz sayfa, sola hizalı başlık (gri etiket · başlık · açıklama),
   sade beyaz kartlar (ince çerçeve, gölgesiz). Önce talep formu
   (Destek talebi | Hesap açılış dekontu seçicisi), sonra merkez ofis
   kartı: harita ve ince çizgiyle ayrılmış bilgi satırları. Alanlar
   16px (iOS yakınlaştırmaz), gönder düğmesi tam genişlik. Tablette
   676px'te ortalanır. Masaüstü değişmez.
   ================================================================ */
@media (max-width:940px){
  html.alt-cubuklu body:has(.ilt-sayfa){background:#fff}
  .ilt-sayfa{padding:var(--a6) 0 var(--a8); background:#fff}

  /* Başlık */
  .ilt-bas{max-width:676px; text-align:left}
  .ilt-bas .eyebrow{font-size:var(--t-minik); letter-spacing:.12em; color:var(--ink-faint)}
  .ilt-bas h1{margin-top:var(--a1); color:var(--ink)}
  .ilt-bas p{margin:var(--a2) 0 0; max-width:none; font-size:15px; line-height:1.55; color:var(--ink-muted)}

  /* Kartlar */
  .ilt-duzen{grid-template-columns:minmax(0,1fr); max-width:676px; margin:var(--a6) auto 0; gap:var(--a4)}
  .ilt-kart{padding:var(--a5); border:1px solid var(--line); border-radius:12px; box-shadow:none}
  .ilt-kart h2{font-size:var(--t-b3) !important; font-weight:700}
  .ilt-kart h2 small{margin-top:2px; font-size:13px; font-weight:500; color:var(--ink-faint)}

  /* Seçici: gri zemin, seçili beyaz */
  .ilt-sekme{gap:var(--a1); padding:var(--a1); border:0; border-radius:10px; background:var(--surface-2)}
  .ilt-sekme button{min-height:40px; border-radius:8px; font-size:14px}
  .ilt-sekme button[aria-selected=true]{color:var(--mor); font-weight:700}

  /* Form */
  .ilt-form,.ilt-dekont{margin-top:var(--a5)}
  .ilt-form .field,.ilt-dekont .field{margin-bottom:var(--a4)}
  .ilt-form .label,.ilt-dekont .label{margin-bottom:6px; font-size:14px}
  .ilt-form .input,.ilt-form .select,.ilt-dekont .input{min-height:50px; font-size:16px}
  .ilt-form .textarea{min-height:128px; font-size:16px}
  .ilt-form .check{font-size:13.5px; color:var(--ink-muted)}
  .ilt-alt{margin-top:var(--a2)}
  .ilt-alt .btn{width:100%; min-height:50px; justify-content:center; font-size:16px}

  /* Dekont özeti: beyaz, ince ayraçlı satırlar */
  .ilt-dekont-ozet{padding:0 var(--a4); border-radius:10px; background:var(--surface)}
  .ilt-dekont-ozet div{padding:var(--a3) 0; font-size:14.5px}
  .ilt-yukle{padding:var(--a5) var(--a4); border-radius:10px}
  .ilt-yukle:hover,.ilt-yukle.surukle{border-color:var(--mor); background:var(--mor-soft)}
  .ilt-yukle svg{stroke:var(--mor)}
  .ilt-sonuc{border-radius:10px}

  /* Merkez ofis: harita + bilgi satırları */
  .ilt-harita{height:200px; margin-top:var(--a4); border-radius:10px}
  .ilt-adres{gap:0; margin-top:var(--a2)}
  .ilt-adres div{gap:var(--a3); align-items:center; padding:var(--a3) 0; font-size:14.5px; line-height:1.5}
  .ilt-adres div + div{border-top:1px solid var(--line)}
  .ilt-adres svg{
    box-sizing:content-box; width:18px; height:18px; margin:0; padding:9px;
    border-radius:10px; background:var(--ground); stroke:var(--mor);
  }
  .ilt-adres b{margin-bottom:1px; font-size:14px}
  .ilt-adres a{color:var(--mor)}
}
@media (max-width:560px){
  .ilt-kart{padding:var(--a4)}
  .ilt-sekme button{font-size:13.5px; padding-inline:6px}
}

/* ================================================================
   DÜĞME SİSTEMİ (tüm site) — kullanıcının seçtiği model (Keşfet ·
   Süzgeçler düğmesi): beyaz zemin, ince açık mor çerçeve, 12px köşe,
   koyu 600 yazı. Ana eylem aynı biçimde mor dolgulu (seçili çip gibi).
   Koyu/mor zeminde ana düğme beyaz dolgu + mor yazı, ikincil düğme
   şeffaf + beyaz çerçeve. Boy: telefonda 48px, masaüstünde 44px.
   Sayfalardaki eski yerel ayarları ezmek için !important kullanılır.
   ================================================================ */
:root{--dg-ana:#6D2FBF; --dg-ana-ust:#5A23A8; --dg-ana-yazi:#fff; --dg-r:12px}

.btn{
  justify-content:center; min-height:44px; border-radius:var(--dg-r) !important;
  font-weight:600 !important; letter-spacing:0 !important; text-transform:none !important;
}
.btn-primary,.btn-brass{background:var(--btn-bg,var(--dg-ana)) !important; color:var(--btn-ink,var(--dg-ana-yazi)) !important; border:1px solid var(--btn-bg,var(--dg-ana)) !important}
.btn-primary:hover:not([disabled]),.btn-brass:hover:not([disabled]){background:var(--btn-bg-hover,var(--dg-ana-ust)) !important}
.btn-ghost{background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line-strong) !important}
.btn-ghost:hover:not([disabled]){border-color:var(--mor) !important; background:var(--mor-soft) !important}
.btn-ghost svg{stroke:var(--mor)}
.btn-primary svg{stroke:currentColor}
/* Koyu/mor zeminde ikincil düğme: şeffaf, beyaz çerçeve ve yazı. */
:is(.band,.giris,.kapanis,.an,.kbas,.auth-side,.mk-bas,.mk-kapanis) .btn-ghost{background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.6) !important}
:is(.band,.giris,.kapanis,.an,.kbas,.auth-side,.mk-bas,.mk-kapanis) .btn-ghost:hover:not([disabled]){background:rgba(255,255,255,.12) !important; border-color:#fff !important}
.btn:focus-visible{outline:3px solid #EFCB63; outline-offset:2px}
.btn-lg{min-height:50px; font-size:16px !important}
.btn-sm{min-height:34px; border-radius:10px !important}
.btn-quiet{min-height:40px}
td .btn,th .btn{min-height:36px}
@media (max-width:940px){
  .btn:not(.btn-sm):not(.btn-quiet){min-height:48px; font-size:15px !important; padding-inline:18px}
  td .btn{min-height:40px}
}

/* ================================================================
   ASKIDA MUTLULUK BAŞLAT (baslat.html) — telefon/tablet (≤940px).
   Başlık çipleri yana kaydırma yerine ızgarada (on iki kategori de
   görünür, ok düğmesi yok); çipler ve alanlar seçim düğmesi modelinde
   (12px köşe, açık mor çerçeve); seçili çip mor. Alttaki orta düğme
   bu sayfadayken sarı halkayla seçili görünür.
   ================================================================ */
@media (max-width:940px){
  .bs-vesile{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px;
    overflow:visible; margin:0; padding:0; scroll-snap-type:none;
  }
  .bs-vesile-sar::before,.bs-vesile-sar::after,.bs-ok{display:none !important}
  .bs-vesile button{
    min-height:44px; padding:0 4px; border:1px solid var(--line-strong); border-radius:12px;
    font-size:13.5px; font-weight:600; white-space:nowrap; letter-spacing:-.005em; text-align:center;
  }
  .bs-vesile button[aria-pressed="true"]{background:var(--mor); border-color:var(--mor); color:#fff}
  .bs .label{color:var(--ink); font-size:15px}
  .bs .input{min-height:52px; border:1px solid var(--line-strong); border-radius:12px}
  .altcubuk .altcubuk-orta[aria-current="page"] i{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--lamba), 0 6px 14px -8px rgba(42,15,82,.6)}
}

/* Alt çubuk orta düğmesi küçük telefonda orantılı: 60px daire 360px ekranda
   içeriğin üstüne fazla taşıyordu. */
@media (max-width:400px){
  .altcubuk-orta i{width:54px; height:54px; margin-top:-18px}
  .altcubuk-orta i svg{width:24px; height:24px}
}

/* ================================================================
   MARKA BAŞVURU PENCERESİ (markalar.html #mbModal) — telefon/tablet.
   Alanlar seçim modelinde (beyaz, ince açık mor çerçeve, 12px köşe),
   aralıklar sıkı; kısa alanlar ikili (Yetkili+Şehir, Sektör+Mağaza
   sayısı), e-posta/telefon tam genişlik. Vazgeç / Gönder pencerenin
   altına yapışık: uzun formda gönder düğmesi hep görünür.
   ================================================================ */
@media (max-width:940px){
  .mb-kutu{padding-bottom:0}
  .mb-bas{margin-bottom:var(--a3)}
  .mb-bas p{font-size:13.5px}
  .mb-kutu .field{margin-bottom:var(--a3)}
  .mb-kutu .label{margin-bottom:6px; font-size:14px; color:var(--ink)}
  .mb-kutu .input,.mb-kutu .select,.mb-kutu .textarea{
    min-height:50px; background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; font-size:16px;
  }
  .mb-kutu .input:focus,.mb-kutu .select:focus,.mb-kutu .textarea:focus{border-color:var(--mor); box-shadow:0 0 0 3px var(--mor-soft)}
  .mb-kutu .textarea{min-height:88px}
  .mb-kutu .row2{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--a2)}
  .mb-kutu .row2:nth-of-type(2){grid-template-columns:1fr}
  .mb-kutu .check{font-size:13px; line-height:1.5; color:var(--ink-muted)}
  .mb-alt{
    position:sticky; bottom:0; z-index:2; margin:var(--a2) calc(-1 * var(--a5)) 0;
    padding:var(--a3) var(--a5) calc(var(--a3) + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line);
  }
}


/* ================================================================
   KULLANICI PANELİ · TELEFON VE TABLET BAŞLIKLARI (≤940px)
   panel.html (body.k-panel). Bölüm adı mor uygulama çubuğunda durur;
   sayfada yalnız tek satırlık bağlam notu kalır. Gösterge kutuları tek
   özet kartında, durum şeridi alt alta, katkı hareketleri tablosu
   satır = kart. Masaüstü değişmez.
   ================================================================ */
@media (max-width:940px){
  /* Bölüm üst notu: tek tip, kenar boşluklu, sakin */
  .k-panel .pnl-sol > section > .pnl-baslik:first-child{margin:0 0 12px; padding:0 2px; gap:0}
  .k-panel .pnl-sol > section > .pnl-baslik:first-child .pb-not{
    display:block; font-size:13.5px; line-height:1.45; color:var(--ink-muted);
  }
  .k-panel .pnl-sol > section > .pnl-baslik:first-child .pb-not:empty{display:none}
  .k-panel .pnl-sol > section > .pnl-baslik:first-child:has(.pb-not:empty){display:none}

  /* Gösterge kutuları (Gelen dekontlar): tek özet kartı, 2 sütun */
  .k-panel .tk-ozet{
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; margin-bottom:0;
    padding:4px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kart, 12px);
  }
  .k-panel .tk-kpi{padding:12px 0; border:0; border-radius:0; background:none; box-shadow:none !important; min-width:0}
  .k-panel .tk-kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .k-panel .tk-kpi:last-child:nth-child(odd){grid-column:1 / -1}
  .k-panel .tk-kpi span{font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--ink-faint)}
  .k-panel .tk-kpi b{font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .k-panel .tk-kpi small{font-size:12px; line-height:1.35}
  .k-panel .tk-kpi.dikkat b{color:var(--warn)}

  /* Süzgeç: bölümlü seçici; arama tam genişlik */
  .k-panel .tk-arac{display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin:16px 0 12px}
  .k-panel .tk-arac > *,.k-panel .tk-arac input{width:100%; max-width:none}
  .k-panel .tk-suzgec{
    display:flex; flex-wrap:nowrap; gap:2px; padding:3px; overflow-x:auto; scrollbar-width:none;
    border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  }
  .k-panel .tk-suzgec::-webkit-scrollbar{display:none}
  .k-panel .tk-suzgec button{
    flex:1 0 auto; min-height:38px; padding:0 12px; border:0; border-radius:8px; background:none;
    font-size:13.5px; color:var(--ink-muted); white-space:nowrap;
  }
  .k-panel .tk-suzgec button.etkin{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(36,19,56,.14)}
  .k-panel .tk-ara{min-height:46px; font-size:16px}

  /* Listelerim kartı: başlık uygulama dilinde (altı çizgisiz, belirgin) */
  .k-panel .ls-liste{border-radius:var(--r-kart, 12px)}
  .k-panel .ls-baslik{font-size:16.5px; font-weight:700; line-height:1.3; text-decoration:none; color:var(--ink)}
  .k-panel .ls-kunye div{grid-template-columns:84px minmax(0,1fr); font-size:13px}
  .k-panel .ls-eylem .btn{min-height:44px}

  /* Katkı hareketleri: tablo → kart listesi (yatay kaydırma yok) */
  .k-panel #bolumHareket .pnl-tablo{background:none; border:0; border-radius:0; overflow:visible}
  .k-panel #bolumHareket .sar{overflow:visible}
  .k-panel #bolumHareket table,.k-panel #bolumHareket tbody{display:block; width:100%; min-width:0 !important}
  .k-panel #bolumHareket thead{display:none}
  .k-panel #bolumHareket tbody{display:grid; gap:10px}
  .k-panel #bolumHareket tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:center;
    padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-kart, 12px);
  }
  .k-panel #bolumHareket td{display:block; padding:0; border:0; min-width:0}
  .k-panel #bolumHareket td:nth-child(1){grid-column:1; grid-row:1}
  .k-panel #bolumHareket td:nth-child(3){grid-column:2; grid-row:1; font-size:16px; font-weight:700; color:var(--ink)}
  .k-panel #bolumHareket td:nth-child(2){grid-column:1; grid-row:2; margin:10px 0 0 38px; font-size:13.5px}
  .k-panel #bolumHareket td:nth-child(4){grid-column:2; grid-row:2 / span 2; align-self:end; justify-self:end}
  .k-panel #bolumHareket td:nth-child(5){grid-column:1; grid-row:3; margin:2px 0 0 38px; font-size:12.5px}
  .k-panel #bolumHareket td:nth-child(2) b{font-weight:600}
  .k-panel #bolumHareket td:nth-child(2) .hr-alt{display:inline; margin:0 0 0 6px}
  .k-panel #bolumHareket .hr-ad b{font-size:15px}
  .k-panel #bolumHareket .hr-ad > span:last-child{min-width:0}
  .k-panel #bolumHareket .hr-ad .hr-alt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .k-panel #bolumHareket td.bos{grid-column:1 / -1; grid-row:auto; margin:0; padding:12px 4px; text-align:center; white-space:normal}
}

/* ================================================================
   HESAP BİLGİLERİM · TELEFON VE TABLET (≤940px, kullanıcı paneli)
   Pencere tam ekran uygulama sayfası olur: üstte başlık + kapat,
   sekmeler, kutusuz alanlar, bildirimlerde anahtar, altta sabit Kaydet.
   ================================================================ */
@media (max-width:940px){
  .k-panel #pModal{padding:0; align-items:stretch; background:var(--surface)}
  .k-panel #pModal .hmodal-kutu{
    width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; border:0; border-radius:0; box-shadow:none;
    display:flex; flex-direction:column; padding:0; overflow:hidden;
  }
  .k-panel #pModal .ayar-bas{align-items:center; min-height:56px; padding:env(safe-area-inset-top) 8px 0 16px; border-bottom:0}
  .k-panel #pModal .ayar-bas h2{font-size:18px; font-weight:700}
  .k-panel #pModal .hmodal-kapat{width:44px; height:44px}
  .k-panel #pModal .ayar-sekme{padding:0 8px; border-bottom:1px solid var(--line)}
  .k-panel #pModal .ayar-sekme button{min-height:44px; font-size:14px}
  .k-panel #pModal .ayar-govde{flex:1; padding:20px 16px 24px}
  .k-panel #pModal .field{margin-bottom:18px}
  .k-panel #pModal .input,.k-panel #pModal .textarea{font-size:16px; min-height:48px}
  .k-panel #pModal .row2{display:block}

  /* Profil fotoğrafı: kutusuz tek satır */
  .k-panel #pModal .ayar-foto{flex-direction:row; align-items:center; gap:14px; padding:0 0 20px; margin:0 0 20px;
    background:none; border:0; border-bottom:1px solid var(--line); border-radius:0}
  .k-panel #pModal .ayar-foto-oniz{width:64px; height:64px; border-radius:50%; flex:none}
  .k-panel #pModal .ayar-foto-yazi > b{font-size:15px}
  .k-panel #pModal .ayar-foto-dugme{margin-top:6px; gap:4px 16px}
  .k-panel #pModal .ayar-foto-dugme .btn{padding:0; min-height:32px; border:0 !important; background:none !important; box-shadow:none !important;
    font-size:14px; font-weight:600; color:var(--mor)}
  .k-panel #pModal .ayar-foto-dugme .btn-quiet{color:var(--ink-muted)}

  /* Bildirimler: tek kart, satır başına anahtar */
  .k-panel #pModal .ayar-secim{gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .k-panel #pModal .ayar-secim li{padding:0; border:0; border-radius:0; background:var(--surface)}
  .k-panel #pModal .ayar-secim li + li{border-top:1px solid var(--line)}
  .k-panel #pModal .ayar-secim .check{display:flex; flex-direction:row-reverse; align-items:center; gap:12px; min-height:64px; padding:10px 14px; cursor:pointer}
  .k-panel #pModal .ayar-secim .check span{flex:1; min-width:0; font-size:13px; line-height:1.4; color:var(--ink-muted)}
  .k-panel #pModal .ayar-secim .check span b{font-size:15px; font-weight:600; margin-bottom:2px}
  .k-panel #pModal .ayar-secim input[type=checkbox]{
    appearance:none; -webkit-appearance:none; flex:none; position:relative; width:46px; height:28px; margin:0;
    border-radius:99px; background:var(--surface); background:color-mix(in srgb,var(--ink) 22%,var(--surface)); cursor:pointer; transition:background .2s ease;
  }
  .k-panel #pModal .ayar-secim input[type=checkbox]::after{
    content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease;
  }
  .k-panel #pModal .ayar-secim input[type=checkbox]:checked{background:var(--mor)}
  .k-panel #pModal .ayar-secim input[type=checkbox]:checked::after{transform:translateX(18px)}
  .k-panel #pModal .ayar-secim input[type=checkbox]:disabled{opacity:.55; cursor:default}

  /* Alt: sabit tek eylem; kapatma üstteki × ile */
  .k-panel #pModal .ayar-alt{padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface)}
  .k-panel #pModal #p_vazgec{display:none}
  .k-panel #pModal #p_kaydet{width:100%; min-height:50px}
}
@media (max-width:940px){
  /* Hesap bilgilerim alanları: beyaz, ince çerçeve, kurumsal */
  .k-panel #pModal .label{font-size:13px; font-weight:600; color:var(--ink-muted)}
  .k-panel #pModal .input,.k-panel #pModal .select,.k-panel #pModal .textarea{
    background-color:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:none;
  }
  .k-panel #pModal .input:focus,.k-panel #pModal .select:focus,.k-panel #pModal .textarea:focus{
    border-color:var(--mor); box-shadow:0 0 0 3px transparent; box-shadow:0 0 0 3px color-mix(in srgb,var(--mor) 16%,transparent); outline:0;
  }
  .k-panel #pModal .select:disabled{opacity:.6}
  .k-panel #pModal .textarea{min-height:88px}
  .k-panel #pModal .row2:has(#p_ilce){display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
}

/* ================================================================
   UYGULAMA MODELİ (≤940px) — gezinme, geçiş, yenileme.
   Masaüstü etkilenmez: tüm kurallar telefon/tablet aralığında ya da
   yalnız ana ekrandan açılan uygulamada (uyg-standalone) geçerlidir.
   1. İç sayfa çubuğu: geri · sayfa adı · menü (kök sekmeler logoyu taşır)
   2. Sayfa geçişi: ileri → yeni ekran sağdan gelir; geri → soldan döner;
      sekme değişimi kısa solma. Üst çubuk ve alt sekme çubuğu yerinde kalır.
   3. Aşağı çekerek yenileme (yalnız ana ekran uygulamasında).
   ================================================================ */
@media (max-width:940px){
  .topbar.ic-sayfa .brand{display:none}
  .topbar.ic-sayfa .app-baslik{flex:1; max-width:100%}
}

@media (max-width:940px) and (prefers-reduced-motion:no-preference){
  .topbar{view-transition-name:ep-ustbar}
  .altcubuk{view-transition-name:ep-altcubuk}
  ::view-transition-group(ep-altcubuk){animation:none}
  ::view-transition-old(ep-ustbar),::view-transition-new(ep-ustbar){animation-duration:.2s}

  html:active-view-transition-type(ileri)::view-transition-old(root){animation:.34s cubic-bezier(.32,.72,0,1) both ep-cik-sol}
  html:active-view-transition-type(ileri)::view-transition-new(root){animation:.34s cubic-bezier(.32,.72,0,1) both ep-gir-sag; box-shadow:-10px 0 24px -12px rgba(36,19,56,.35)}
  html:active-view-transition-type(geri)::view-transition-old(root){animation:.3s cubic-bezier(.32,.72,0,1) both ep-cik-sag; z-index:1; box-shadow:-10px 0 24px -12px rgba(36,19,56,.35)}
  html:active-view-transition-type(geri)::view-transition-new(root){animation:.3s cubic-bezier(.32,.72,0,1) both ep-gir-sol}
  html:active-view-transition-type(sekme)::view-transition-old(root),
  html:active-view-transition-type(sekme)::view-transition-new(root){animation-duration:.14s}
}
@keyframes ep-gir-sag{from{transform:translateX(100%)}}
@keyframes ep-cik-sol{to{transform:translateX(-26%); opacity:.7}}
@keyframes ep-gir-sol{from{transform:translateX(-26%); opacity:.7}}
@keyframes ep-cik-sag{to{transform:translateX(100%)}}

/* Aşağı çekerek yenileme göstergesi (uygulama.js yalnız standalone'da ekler). */
.ptr{
  position:fixed; left:50%; top:calc(56px + env(safe-area-inset-top)); z-index:64;
  width:40px; height:40px; margin-left:-20px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); color:var(--mor);
  box-shadow:0 4px 14px -4px rgba(36,19,56,.35);
  transform:translateY(-60px); opacity:0; pointer-events:none;
}
.ptr svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ptr.hazir{color:var(--lamba-koyu)}
.ptr.donuyor svg{animation:ptr-don .8s linear infinite}
.ptr.birak{transition:transform .22s ease, opacity .22s ease}
@keyframes ptr-don{to{transform:rotate(360deg)}}
@media (min-width:941px){.ptr{display:none}}