/* =====================================================================
   QR MENÜ PRO — Tanıtım ve Satış Sitesi
   Palet, yarıçap ve gölgeler yönetim panelinin admin.css dosyasından
   birebir alınmıştır: "Gece Laciverti + Altın".
   ===================================================================== */

:root{
  /* Zemin ve yüzeyler */
  --zemin:#071527; --zemin2:#0a1c33;
  --kart:#0e2340; --kart2:#12294a; --kart3:#173458;
  --cizgi:#1c3a63; --cizgi2:#26497a;

  /* Yazı */
  --metin:#e9f1fb; --metin2:#8ba6c8; --metin3:#63819f;

  /* Marka rengi — altın */
  --altin:#e9b83c; --altin-a:#f7d276; --altin-k:#c08f22;

  /* Vurgu ve durum renkleri */
  --ana:#3d8bfd; --ana-koyu:#2568e0; --ana-acik:#68a6ff;
  --basari:#2ec27e; --uyari:#efa93a; --hata:#f05252; --mor:#a78bfa; --turkuaz:#2dd4bf;

  --r:14px; --r-k:10px; --r-b:20px;
  --golge:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.28);
  --golge-k:0 2px 8px rgba(0,0,0,.30);
  --golge-b:0 24px 70px rgba(0,0,0,.5);

  --govde:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --baslik:'Playfair Display',Georgia,'Times New Roman',serif;

  --en:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{
  font-family:var(--govde);
  background:var(--zemin);color:var(--metin);
  font-size:15.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(61,139,253,.13), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(233,184,60,.07), transparent 60%);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ana-acik);text-decoration:none;transition:color .15s}
a:hover{color:var(--altin)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
::selection{background:rgba(233,184,60,.28)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1d3a60;border-radius:8px;border:2px solid var(--zemin)}
::-webkit-scrollbar-thumb:hover{background:#2b5384}

:focus-visible{outline:2px solid var(--altin);outline-offset:3px;border-radius:4px}

/* ---------- Tipografi ---------- */
h1,h2,h3{font-family:var(--baslik);font-weight:600;letter-spacing:-.4px;line-height:1.18;color:#fff}
h1{font-size:clamp(34px,5.1vw,58px);letter-spacing:-1.2px}
h2{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.7px}
h3{font-size:20px;letter-spacing:-.2px}
h4{font-family:var(--govde);font-size:16px;font-weight:650;color:#fff;letter-spacing:-.1px}
p{color:var(--metin2)}
strong{color:var(--metin);font-weight:650}
.altin{color:var(--altin)}
.iri{font-size:17.5px;line-height:1.65}
.kucuk{font-size:13px;color:var(--metin3)}

/* Bölüm etiketi — panelin .yan-grup öğesinin sitedeki karşılığı */
.goz-ustu{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--altin);margin-bottom:14px;
}
.goz-ustu:before{content:'';width:22px;height:2px;border-radius:2px;background:var(--altin);flex-shrink:0}

/* ---------- Yerleşim ---------- */
.sarmal{max-width:var(--en);margin:0 auto;padding:0 22px}
.bolum{padding:96px 0;position:relative}
.bolum-cizgili{border-top:1px solid var(--cizgi)}
.bolum-koyu{background:linear-gradient(180deg,rgba(7,21,39,0),rgba(4,12,23,.75),rgba(7,21,39,0))}
.bolum-basi{max-width:660px;margin-bottom:44px}
.bolum-basi.orta{margin-left:auto;margin-right:auto;text-align:center}
.bolum-basi.orta .goz-ustu{justify-content:center}
.bolum-basi h2 + p{margin-top:15px;font-size:16.5px}

.izgara{display:grid;gap:20px}
.iz-2{grid-template-columns:repeat(2,1fr)}
.iz-3{grid-template-columns:repeat(3,1fr)}
.iz-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Düğmeler ---------- */
.dg{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-k);
  font-size:14.5px;font-weight:650;letter-spacing:.1px;
  border:1px solid transparent;transition:transform .14s,box-shadow .16s,background .16s,border-color .16s;
  white-space:nowrap;
}
.dg:active{transform:translateY(1px)}
.dg-altin{
  background:linear-gradient(150deg,var(--altin-a),var(--altin-k));
  color:#22314b;box-shadow:0 4px 18px rgba(233,184,60,.26);
}
.dg-altin:hover{color:#22314b;box-shadow:0 8px 26px rgba(233,184,60,.38)}
.dg-mavi{background:var(--ana);color:#fff;box-shadow:0 4px 18px rgba(61,139,253,.28)}
.dg-mavi:hover{background:var(--ana-koyu);color:#fff}
.dg-hat{border-color:var(--cizgi2);color:var(--metin);background:rgba(255,255,255,.03)}
.dg-hat:hover{border-color:var(--altin);color:var(--altin);background:rgba(233,184,60,.07)}
.dg-buyuk{padding:15px 28px;font-size:15.5px}
.dg-kucuk{padding:8px 15px;font-size:13px;border-radius:8px}
.dg .ikon{width:17px;height:17px}
.dg-grup{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- İkonlar (ikonlar.php ile aynı sınıflar) ---------- */
.ikon{width:18px;height:18px;flex-shrink:0;display:inline-block;vertical-align:-3.5px}
.ik-14{width:14px;height:14px}.ik-16{width:16px;height:16px}.ik-20{width:20px;height:20px}
.ik-22{width:22px;height:22px}.ik-24{width:24px;height:24px}.ik-28{width:28px;height:28px}
.ik-36{width:36px;height:36px}

.ikon-kutu{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;flex-shrink:0;border:1px solid transparent}
.ikon-kutu.ik-mavi   {background:rgba(61,139,253,.14);color:#68a6ff;border-color:rgba(61,139,253,.28)}
.ikon-kutu.ik-altin  {background:rgba(233,184,60,.14);color:#e9b83c;border-color:rgba(233,184,60,.30)}
.ikon-kutu.ik-yesil  {background:rgba(46,194,126,.14);color:#4ad695;border-color:rgba(46,194,126,.28)}
.ikon-kutu.ik-mor    {background:rgba(167,139,250,.14);color:#c4b0ff;border-color:rgba(167,139,250,.28)}
.ikon-kutu.ik-kirmizi{background:rgba(240,82,82,.14);color:#ff8b8b;border-color:rgba(240,82,82,.28)}
.ikon-kutu.ik-turkuaz{background:rgba(45,212,191,.13);color:#5fe3d3;border-color:rgba(45,212,191,.26)}
.ikon-kutu.ik-gri    {background:rgba(255,255,255,.06);color:var(--metin2);border-color:rgba(255,255,255,.10)}

/* ---------- Kartlar ---------- */
.kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:24px;box-shadow:var(--golge-k);transition:border-color .18s,transform .18s,box-shadow .18s;
}
.kart:hover{border-color:var(--cizgi2)}
.kart h4{margin:14px 0 7px}
.kart p{font-size:14px;line-height:1.6}
.kart p.kucuk,.kart .kucuk{font-size:13px;color:var(--metin3)}

.rozet{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:20px;
  background:rgba(233,184,60,.13);color:var(--altin);border:1px solid rgba(233,184,60,.26);
}
.rozet-yesil{background:rgba(46,194,126,.13);color:#4ad695;border-color:rgba(46,194,126,.26)}
.rozet-mavi{background:rgba(61,139,253,.13);color:#68a6ff;border-color:rgba(61,139,253,.26)}
.rozet-mor{background:rgba(167,139,250,.13);color:#c4b0ff;border-color:rgba(167,139,250,.26)}
.rozet-kirmizi{background:rgba(240,82,82,.13);color:#ff8b8b;border-color:rgba(240,82,82,.26)}
.rozet-gri{background:rgba(255,255,255,.05);color:var(--metin2);border-color:rgba(255,255,255,.10)}

/* =====================================================================
   ÜST MENÜ
   ===================================================================== */
.tepe{
  position:sticky;top:0;z-index:60;
  background:rgba(7,21,39,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s;
}
.tepe.kayan{border-bottom-color:var(--cizgi);background:rgba(7,21,39,.92)}
.tepe-ic{max-width:var(--en);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:16px}

.marka{display:flex;align-items:center;gap:11px;flex-shrink:0}
.marka .tac{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(150deg,#f7d276,#c08f22);color:#22314b;
  box-shadow:0 4px 14px rgba(233,184,60,.24);
}
.marka .tac .ikon{width:22px;height:22px}
.marka b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:.2px;font-family:var(--govde);
  text-transform:none}
.marka span{display:block;font-size:9.5px;color:var(--metin3);letter-spacing:1.1px;text-transform:uppercase;font-weight:700}
/* Sarmalayıcı span, içindeki başlığın biçimini bozmamalı */
.marka .yazi{min-width:0;flex:1;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}

.tepe nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.tepe nav a{
  padding:8px 13px;border-radius:9px;font-size:14px;font-weight:550;color:var(--metin2);
  transition:background .14s,color .14s;
}
.tepe nav a:hover{background:rgba(255,255,255,.055);color:#fff}
.tepe nav a.aktif{color:var(--altin-a);background:rgba(233,184,60,.10)}
.tepe .sag{display:flex;align-items:center;gap:10px;margin-left:14px}

.menu-dugme{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--cizgi);
  align-items:center;justify-content:center;color:var(--metin);margin-left:auto}
.menu-dugme:hover{border-color:var(--altin);color:var(--altin)}

/* =====================================================================
   HERO — imza bölüm
   ===================================================================== */
.hero{padding:64px 0 84px;position:relative;overflow:hidden}
.hero:before{
  content:'';position:absolute;left:50%;top:-260px;width:1100px;height:640px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(233,184,60,.10),transparent 70%);pointer-events:none;
}
.hero-ic{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center;position:relative}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--altin-a)}
.hero .giris{font-size:17.5px;line-height:1.66;max-width:540px;margin-bottom:28px}
.hero .dg-grup{margin-bottom:26px}

.hero-notlar{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--metin3)}
.hero-notlar span{display:inline-flex;align-items:center;gap:7px}
.hero-notlar .ikon{width:15px;height:15px;color:var(--basari)}

/* --- Telefon maketi --- */
.telefon-alan{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.telefon{
  width:302px;flex-shrink:0;position:relative;
  border-radius:38px;padding:9px;
  background:linear-gradient(160deg,#2b4a76,#0d1e36 45%,#1b3557);
  box-shadow:var(--golge-b),0 0 0 1px rgba(255,255,255,.06);
}
.telefon:after{
  content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:96px;height:20px;border-radius:0 0 12px 12px;background:#0d1e36;z-index:4;
}
.telefon-ekran{
  --bg:#ffffff;--bg2:#f6f6f7;--bg3:#ededef;--metin-t:#16181d;--metin2-t:#6b7280;
  --cizgi-t:#e4e4e7;--ana-t:#d92c2c;--ana-metin:#ffffff;
  border-radius:30px;overflow:hidden;background:var(--bg);color:var(--metin-t);
  height:600px;overflow-y:auto;scrollbar-width:none;position:relative;
  transition:background .3s,color .3s;
}
.telefon-ekran::-webkit-scrollbar{display:none}

.tf-durum{display:flex;align-items:center;justify-content:space-between;padding:11px 20px 6px;
  font-size:11px;font-weight:700;color:var(--metin-t);opacity:.75;position:relative;z-index:5}
.tf-durum .sag{display:flex;gap:4px;align-items:center}
.tf-durum i{display:block;width:14px;height:8px;border:1.3px solid currentColor;border-radius:2px;opacity:.8}

.tf-kapak{height:104px;position:relative;overflow:hidden;background:var(--bg3)}
.tf-kapak img{width:100%;height:100%;object-fit:cover}
.tf-kapak:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45))}

.tf-marka{text-align:center;padding:0 16px 12px;margin-top:-28px;position:relative;z-index:2}
.tf-marka .logo{width:58px;height:58px;border-radius:16px;object-fit:cover;margin:0 auto 8px;
  border:3px solid var(--bg);box-shadow:0 4px 14px rgba(0,0,0,.25);background:var(--bg2)}
.tf-marka b{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px}
.tf-marka span{display:block;font-size:11.5px;color:var(--metin2-t);margin-top:1px}
.tf-marka .tf-durum-rozet{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  padding:3px 10px;border-radius:20px;margin-top:8px;
  background:rgba(46,194,126,.15);color:#1a9a63}

.tf-masa{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:700;
  background:var(--ana-t);color:var(--ana-metin);padding:7px 14px}

.tf-bilgi{margin:0 14px 12px;padding:11px 13px;border-radius:12px;background:var(--bg2);
  border:1px solid var(--cizgi-t);font-size:11.5px;display:grid;gap:7px}
.tf-bilgi div{display:flex;align-items:center;gap:8px;color:var(--metin2-t)}
.tf-bilgi b{color:var(--metin-t);font-weight:650}
.tf-bilgi .nk{width:18px;height:18px;border-radius:6px;background:var(--bg3);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:10px}

.tf-kat{display:flex;gap:6px;overflow-x:auto;padding:0 14px 11px;scrollbar-width:none}
.tf-kat::-webkit-scrollbar{display:none}
.tf-kat a{flex-shrink:0;padding:5px 12px;border-radius:20px;font-size:11.5px;font-weight:650;
  background:var(--bg3);color:var(--metin2-t);white-space:nowrap}
.tf-kat a.aktif{background:var(--ana-t);color:var(--ana-metin)}

.tf-baslik{padding:6px 16px 8px;font-size:11px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--metin2-t)}

.tf-urun{padding:10px 14px;border-bottom:1px solid var(--cizgi-t)}
.tf-urun .ic{min-width:0}
.tf-urun .ad{font-size:13px;font-weight:650;letter-spacing:-.1px}
.tf-urun .olcu{font-size:10.5px;color:var(--metin2-t);margin-top:1px}
.tf-urun .aciklama{font-size:11px;color:var(--metin2-t);margin-top:3px;line-height:1.45}
.tf-etiketler{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tf-etiketler i{font-style:normal;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:5px;
  background:var(--bg3);color:var(--metin2-t)}
.tf-etiketler i.v{background:rgba(46,194,126,.16);color:#1a8f5c}
.tf-etiketler i.a{background:rgba(240,82,82,.14);color:#c93b3b}
.tf-etiketler i.y{background:rgba(233,184,60,.2);color:#9a7212}
.tf-urun .tf-fiyat-satiri{display:flex;align-items:center;justify-content:space-between;
  margin-top:7px;gap:8px;background:none;border:0;padding:0}
.tf-urun .fiyat{font-size:13.5px;font-weight:800;color:#1a9a63;letter-spacing:-.2px}
.tf-arti{width:26px;height:26px;border-radius:50%;background:var(--ana-t);color:var(--ana-metin);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0;line-height:1}
.tf-urun.tukendi{opacity:.55}
.tf-urun.tukendi .fiyat{text-decoration:line-through;color:var(--metin2-t)}
.tf-tukendi-serit{display:inline-block;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:5px;
  background:rgba(240,82,82,.15);color:#c93b3b;margin-top:5px}

.tf-alt{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--cizgi-t);padding:10px 14px;
  display:flex;align-items:center;gap:10px}
.tf-alt .sepet{flex:1;background:var(--ana-t);color:var(--ana-metin);border-radius:11px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700}
.tf-alt .yan{width:40px;height:40px;border-radius:11px;border:1px solid var(--cizgi-t);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;color:var(--metin2-t)}
.tf-kod{margin:12px 14px;padding:14px;border-radius:12px;border:1.5px dashed var(--ana-t);text-align:center}
.tf-kod span{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--metin2-t)}
.tf-kod b{display:block;font-size:26px;font-weight:800;letter-spacing:4px;color:var(--ana-t);margin-top:4px;
  font-family:var(--govde)}

/* Mod sekmeleri */
.mod-sekme{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:340px}
.mod-sekme button{
  padding:6px 12px;border-radius:20px;font-size:12px;font-weight:650;
  border:1px solid var(--cizgi);color:var(--metin2);background:rgba(255,255,255,.02);
  transition:all .15s;
}
.mod-sekme button:hover{border-color:var(--cizgi2);color:var(--metin)}
.mod-sekme button.aktif{background:rgba(233,184,60,.14);border-color:rgba(233,184,60,.42);color:var(--altin-a)}

/* Tema noktaları */
.tema-nokta{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:340px}
.tema-nokta button{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--cizgi);
  position:relative;transition:transform .14s,border-color .14s;
}
.tema-nokta button:hover{transform:scale(1.14)}
.tema-nokta button.aktif{border-color:var(--altin);transform:scale(1.14)}
.tema-etiket{font-size:11.5px;color:var(--metin3);text-align:center;letter-spacing:.3px}

/* =====================================================================
   ŞERİT — rakamlar
   ===================================================================== */
.rakamlar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--cizgi);
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden}
.rakamlar > div{background:var(--kart);padding:24px 20px;text-align:center}
.rakamlar b{display:block;font-family:var(--baslik);font-size:34px;font-weight:600;color:var(--altin);
  letter-spacing:-1px;line-height:1.1}
.rakamlar span{display:block;font-size:12.5px;color:var(--metin2);margin-top:5px}

/* =====================================================================
   MODLAR
   ===================================================================== */
.mod-kart{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}
.mod-kart .ust{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.mod-kart h4{margin:0 0 4px;font-size:16.5px}
.mod-kart .ust .rozet{margin-top:2px}
.mod-kart ul{list-style:none;margin-top:auto;padding-top:16px;border-top:1px dashed var(--cizgi);
  display:grid;gap:6px}
.mod-kart li{font-size:12.5px;color:var(--metin3);display:flex;align-items:center;gap:8px}
.mod-kart li:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--altin-k);flex-shrink:0}

/* =====================================================================
   AKIŞ — QR'dan teslimata
   ===================================================================== */
.akis{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.akis-adim{padding:0 14px;position:relative;text-align:center}
.akis-adim:not(:last-child):after{
  content:'';position:absolute;top:29px;left:calc(50% + 34px);right:calc(-50% + 34px);height:1px;
  background:linear-gradient(90deg,var(--cizgi2),var(--cizgi));
}
.akis-yuvarlak{
  width:58px;height:58px;border-radius:18px;margin:0 auto 14px;display:flex;align-items:center;
  justify-content:center;background:var(--kart2);border:1px solid var(--cizgi2);color:var(--altin);
  position:relative;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.akis-yuvarlak .ikon{width:26px;height:26px}
.akis-adim b{display:block;font-size:14.5px;color:#fff;font-weight:650;margin-bottom:5px}
.akis-adim p{font-size:12.5px;line-height:1.55}
.akis-no{position:absolute;top:-6px;right:calc(50% - 40px);font-size:10px;font-weight:800;
  color:var(--metin3);letter-spacing:.5px}

/* =====================================================================
   ÖZELLİK LİSTELERİ
   ===================================================================== */
.ozellik-kart{display:flex;flex-direction:column}
.ozellik-kart h4{margin:16px 0 8px}

.satirli{display:grid;gap:11px;list-style:none}
.satirli li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--metin2)}
.satirli li .ikon{color:var(--basari);margin-top:3px;width:16px;height:16px;flex-shrink:0}
.satirli li b{color:var(--metin);font-weight:650}

/* İki sütunlu anlatım blokları */
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ikili.ters .gorsel{order:-1}
.ikili + .ikili{margin-top:88px}
.ikili h3{font-size:clamp(23px,2.6vw,31px);margin-bottom:14px}
.ikili > div > p{margin-bottom:20px}

/* =====================================================================
   PANEL MAKETİ (SVG çerçeve)
   ===================================================================== */
.pencere{
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;
  background:var(--zemin2);box-shadow:var(--golge);
}
.pencere-cubuk{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--kart);
  border-bottom:1px solid var(--cizgi)}
.pencere-cubuk i{width:10px;height:10px;border-radius:50%;background:#2b4a76;display:block}
.pencere-cubuk i:nth-child(1){background:#f05252;opacity:.65}
.pencere-cubuk i:nth-child(2){background:#efa93a;opacity:.65}
.pencere-cubuk i:nth-child(3){background:#2ec27e;opacity:.65}
.pencere-cubuk span{margin-left:10px;font-size:11.5px;color:var(--metin3);
  background:var(--zemin2);padding:3px 12px;border-radius:20px;border:1px solid var(--cizgi)}
.pencere-govde{padding:0}
.pencere svg{display:block;width:100%;height:auto}

/* =====================================================================
   ABONELİK AŞAMALARI
   ===================================================================== */
.asama{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.asama-kart{border-radius:var(--r);padding:22px;border:1px solid var(--cizgi);background:var(--kart);
  position:relative;overflow:hidden}
.asama-kart:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.asama-kart.uyari:before{background:var(--uyari)}
.asama-kart.opsiyon:before{background:var(--hata)}
.asama-kart.kapali:before{background:var(--metin3)}
.asama-kart .ne{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;
  color:var(--metin3);margin-bottom:9px}
.asama-kart h4{margin-bottom:8px}
.asama-kart .ornek{margin-top:14px;padding:11px 13px;border-radius:var(--r-k);font-size:12.5px;line-height:1.5}
.asama-kart.uyari .ornek{background:rgba(239,169,58,.10);border:1px solid rgba(239,169,58,.26);color:#f5c778}
.asama-kart.opsiyon .ornek{background:rgba(240,82,82,.10);border:1px solid rgba(240,82,82,.26);color:#ff9c9c}
.asama-kart.kapali .ornek{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:var(--metin2)}

/* =====================================================================
   KASA HESAPLAYICI
   ===================================================================== */
.kasa{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.kasa-alan label{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--metin3);margin-bottom:8px}
.kasa-alan input{
  width:100%;padding:13px 15px;border-radius:var(--r-k);border:1px solid var(--cizgi2);
  background:var(--zemin2);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;
}
.kasa-alan input:focus{outline:0;border-color:var(--altin)}
.banknot{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.banknot button{
  padding:8px 13px;border-radius:9px;border:1px solid var(--cizgi2);background:var(--kart2);
  color:var(--metin);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;transition:all .14s;
}
.banknot button:hover{border-color:var(--altin);color:var(--altin);background:rgba(233,184,60,.08)}
.banknot button.doviz{border-style:dashed;color:var(--turkuaz);border-color:rgba(45,212,191,.4)}
.banknot button.doviz:hover{background:rgba(45,212,191,.08);color:#5fe3d3}

.kasa-sonuc{background:var(--kart2);border:1px solid var(--cizgi2);border-radius:var(--r);padding:22px}
.kasa-satir{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-size:14px}
.kasa-satir + .kasa-satir{border-top:1px dashed var(--cizgi)}
.kasa-satir span{color:var(--metin2)}
.kasa-satir b{font-variant-numeric:tabular-nums;font-weight:700}
.kasa-ustu{margin-top:16px;padding-top:16px;border-top:1px solid var(--cizgi2)}
.kasa-ustu .etiket{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--metin3)}
.kasa-ustu .tutar{font-family:var(--baslik);font-size:40px;font-weight:600;letter-spacing:-1.4px;
  color:var(--basari);line-height:1.15;font-variant-numeric:tabular-nums}
.kasa-ustu .tutar.eksik{color:var(--hata)}
.kasa-dokum{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.kasa-dokum i{font-style:normal;font-size:12px;font-weight:700;padding:4px 10px;border-radius:7px;
  background:rgba(233,184,60,.11);color:var(--altin);border:1px solid rgba(233,184,60,.22);
  font-variant-numeric:tabular-nums}
.kasa-kur{font-size:12px;color:var(--metin3);margin-top:12px;display:flex;align-items:center;gap:7px}
.kasa-kur .ikon{width:14px;height:14px;color:var(--turkuaz)}
.kasa-kalemler{display:grid;gap:6px;margin-top:12px}
.kasa-kalem{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;
  background:var(--zemin2);border:1px solid var(--cizgi);border-radius:9px;padding:7px 11px}
.kasa-kalem em{font-style:normal;color:var(--metin3);font-size:11.5px}
.kasa-kalem button{color:var(--metin3);font-size:16px;line-height:1;padding:0 3px}
.kasa-kalem button:hover{color:var(--hata)}

/* =====================================================================
   FİYATLANDIRMA
   ===================================================================== */
.fiyat-izgara{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.fiyat-kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:26px 22px;
  display:flex;flex-direction:column;position:relative;transition:border-color .2s,transform .2s;
}
.fiyat-kart:hover{border-color:var(--cizgi2);transform:translateY(-3px)}
.fiyat-kart.one-cikan{
  border-color:rgba(233,184,60,.45);
  background:linear-gradient(170deg,rgba(233,184,60,.07),var(--kart) 45%);
  box-shadow:0 0 0 1px rgba(233,184,60,.14),var(--golge);
}
.fiyat-kart .tepe-rozet{position:absolute;top:-11px;left:50%;transform:translateX(-50%)}
.fiyat-kart .ad{font-family:var(--baslik);font-size:23px;color:#fff;font-weight:600;letter-spacing:-.3px}
.fiyat-kart .ozet{font-size:13px;color:var(--metin3);margin-top:5px;min-height:38px;line-height:1.5}
.fiyat-kart .tutar{margin:16px 0 4px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.fiyat-kart .tutar b{font-family:var(--baslik);font-size:38px;font-weight:600;color:var(--altin);
  letter-spacing:-1.4px;line-height:1}
.fiyat-kart .tutar span{font-size:13.5px;color:var(--metin3)}
.fiyat-kart .tutar .eski{font-size:13px;color:var(--metin3);text-decoration:line-through}
.fiyat-kart ul{list-style:none;display:grid;gap:9px;margin:20px 0 24px;padding-top:20px;
  border-top:1px solid var(--cizgi)}
.fiyat-kart li{display:flex;gap:9px;font-size:13.5px;color:var(--metin2);align-items:flex-start}
.fiyat-kart li .ikon{width:15px;height:15px;color:var(--basari);margin-top:3px;flex-shrink:0}
.fiyat-kart .dg{margin-top:auto;width:100%}

/* Karşılaştırma tablosu */
.tablo-sarmal{overflow-x:auto;border:1px solid var(--cizgi);border-radius:var(--r);background:var(--kart)}
table.kiyas{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.kiyas th,table.kiyas td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--cizgi)}
table.kiyas thead th{background:var(--kart2);color:#fff;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
table.kiyas tbody th{font-weight:550;color:var(--metin2)}
table.kiyas td{text-align:center;color:var(--metin2)}
table.kiyas tbody tr:last-child th,table.kiyas tbody tr:last-child td{border-bottom:0}
table.kiyas tbody tr:hover{background:rgba(255,255,255,.02)}
table.kiyas .var{color:var(--basari)}
table.kiyas .yok{color:var(--metin3)}

/* =====================================================================
   SSS
   ===================================================================== */
.sss{display:grid;gap:10px;max-width:820px;margin:0 auto}
.sss details{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-k);
  overflow:hidden;transition:border-color .18s}
.sss details[open]{border-color:var(--cizgi2)}
.sss summary{padding:16px 20px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  font-size:15px;font-weight:600;color:#fff}
.sss summary::-webkit-details-marker{display:none}
.sss summary:after{content:'';margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:1.8px solid var(--altin);border-bottom:1.8px solid var(--altin);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.sss details[open] summary:after{transform:rotate(-135deg) translateY(-2px)}
.sss .cevap{padding:0 20px 18px;font-size:14.5px;color:var(--metin2);line-height:1.68}
.sss .cevap p + p{margin-top:10px}

/* =====================================================================
   REFERANSLAR
   ===================================================================== */
.referans{display:flex;flex-direction:column;gap:14px}
.referans .yildiz{display:flex;gap:3px;color:var(--altin)}
.referans .yildiz .ikon{width:15px;height:15px}
.referans blockquote{font-size:14.5px;line-height:1.68;color:var(--metin2);font-style:normal}
.referans .kim{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:6px}
.referans .bas-harf{width:38px;height:38px;border-radius:11px;background:var(--kart3);color:var(--altin);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;
  border:1px solid var(--cizgi2)}
.referans .kim b{display:block;font-size:13.5px;color:#fff}
.referans .kim span{display:block;font-size:12px;color:var(--metin3)}

/* =====================================================================
   FORM / İLETİŞİM
   ===================================================================== */
.form-kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);padding:30px}
.alan{margin-bottom:16px}
.alan label{display:block;font-size:12.5px;font-weight:650;color:var(--metin2);margin-bottom:7px}
.alan label .zorunlu{color:var(--altin)}
.alan input,.alan select,.alan textarea{
  width:100%;padding:11px 14px;border-radius:var(--r-k);border:1px solid var(--cizgi);
  background:var(--zemin2);color:var(--metin);font-size:14.5px;transition:border-color .15s;
}
.alan input:focus,.alan select:focus,.alan textarea:focus{outline:0;border-color:var(--altin)}
.alan textarea{min-height:110px;resize:vertical;line-height:1.6}
.alan select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238ba6c8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.alan-ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.uyari-kutu{border-radius:var(--r-k);padding:14px 17px;font-size:14px;margin-bottom:20px;
  display:flex;gap:11px;align-items:flex-start;line-height:1.55}
.uyari-kutu .ikon{flex-shrink:0;margin-top:2px}
.uyari-basari{background:rgba(46,194,126,.10);border:1px solid rgba(46,194,126,.30);color:#7ce2b4}
.uyari-hata{background:rgba(240,82,82,.10);border:1px solid rgba(240,82,82,.30);color:#ffa3a3}
.uyari-bilgi{background:rgba(61,139,253,.10);border:1px solid rgba(61,139,253,.28);color:#a8ccff}

/* İletişim yan sütunu */
.iletisim-satir{display:flex;gap:14px;align-items:flex-start;padding:15px 0}
.iletisim-satir + .iletisim-satir{border-top:1px solid var(--cizgi)}
.iletisim-satir .ic b{display:block;font-size:11px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--metin3);margin-bottom:3px}
.iletisim-satir .ic a,.iletisim-satir .ic span{font-size:15px;color:var(--metin);font-weight:550}

/* =====================================================================
   KAPANIŞ ÇAĞRISI
   ===================================================================== */
.kapanis{
  border:1px solid rgba(233,184,60,.28);border-radius:var(--r-b);padding:52px 44px;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(233,184,60,.12), transparent 65%),
    linear-gradient(160deg,var(--kart2),var(--kart));
  text-align:center;position:relative;overflow:hidden;
}
.kapanis h2{margin-bottom:14px}
.kapanis p{max-width:560px;margin:0 auto 26px;font-size:16.5px}
.kapanis .dg-grup{justify-content:center}

/* =====================================================================
   ALT BİLGİ
   ===================================================================== */
.alt{border-top:1px solid var(--cizgi);background:rgba(4,12,23,.5);padding:56px 0 26px;margin-top:0}
.alt-ic{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.alt h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--metin3);margin-bottom:15px}
.alt ul{list-style:none;display:grid;gap:9px}
.alt ul a{font-size:14px;color:var(--metin2)}
.alt ul a:hover{color:var(--altin)}
.alt .tanim{font-size:13.5px;color:var(--metin3);margin-top:14px;line-height:1.65;max-width:320px}
.alt-kapanis{margin-top:40px;padding-top:22px;border-top:1px solid var(--cizgi);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--metin3)}

/* =====================================================================
   ÜST DUYURU ŞERİDİ
   ===================================================================== */
.duyuru{background:var(--zemin2);border-bottom:1px solid var(--cizgi);overflow:hidden;position:relative;z-index:41}
.duyuru-ic{max-width:var(--en);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:18px;height:34px}
.duyuru-kaydir{display:flex;gap:34px;white-space:nowrap;overflow:hidden;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);
  animation:duyuruKaydir 24s linear infinite}
.duyuru-kaydir span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--metin2);flex-shrink:0}
.duyuru-kaydir .ikon{width:13px;height:13px;color:var(--altin);flex-shrink:0}
@keyframes duyuruKaydir{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.duyuru-sag{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--metin3);flex-shrink:0}
.duyuru-sag a{color:var(--metin2)}
.duyuru-sag a:hover{color:var(--altin)}
.duyuru-sag .ikon{width:13px;height:13px;flex-shrink:0}
.duyuru-sag .ayrac{opacity:.5}
@media (max-width:860px){.duyuru-sag{display:none}}

/* =====================================================================
   HERO — YÜZEN BİLDİRİM ROZETLERİ
   ===================================================================== */
.telefon-sarmal{position:relative}
.yuzen-rozet{position:absolute;display:flex;flex-direction:column;gap:1px;background:var(--kart);
  border:1px solid var(--cizgi2);border-radius:var(--r-k);padding:9px 14px 9px 30px;box-shadow:var(--golge-k);
  font-size:11.5px;z-index:5;max-width:190px;animation:yuzenSallan 5s ease-in-out infinite}
.yuzen-rozet .ikon{width:13px;height:13px;color:var(--basari);position:absolute;top:10px;left:9px}
.yuzen-rozet b{font-size:12px;color:#fff;font-weight:650}
.yuzen-rozet span{color:var(--metin3)}
.yr-1{top:10%;left:-38px}
.yr-2{bottom:9%;right:-34px;animation-delay:1.4s}
@keyframes yuzenSallan{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:1040px){.yuzen-rozet{display:none}}

/* =====================================================================
   İŞLETME TÜRÜ ŞERİDİ (kayan)
   ===================================================================== */
.tur-serit{border-top:1px solid var(--cizgi);border-bottom:1px solid var(--cizgi);overflow:hidden;
  padding:20px 0;background:var(--zemin2)}
.tur-serit-ic{display:flex;align-items:center}
.tur-serit .etiket{flex-shrink:0;padding:0 26px;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--metin3);border-right:1px solid var(--cizgi);white-space:nowrap}
.tur-kaydir{display:flex;gap:38px;white-space:nowrap;animation:turKaydir 32s linear infinite;padding-left:30px}
.tur-kaydir span{font-family:var(--baslik);font-size:18px;color:var(--metin2);font-weight:600;
  flex-shrink:0;display:flex;align-items:center;gap:10px}
.tur-kaydir span:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--altin);opacity:.75;flex-shrink:0}
@keyframes turKaydir{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:860px){.tur-serit .etiket{display:none}}

/* =====================================================================
   3 ADIMDA BAŞLAYIN
   ===================================================================== */
.adim-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.adim-3-kart{position:relative;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:28px 24px 24px}
.adim-3-no{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,var(--altin-a),var(--altin-k));
  color:#22314b;font-family:var(--baslik);font-weight:700;font-size:16.5px;display:flex;align-items:center;
  justify-content:center;margin-bottom:16px}
.adim-3-kart h4{margin-bottom:8px;font-size:16.5px}
.adim-3-kart p{font-size:13.5px;color:var(--metin2);margin-bottom:16px}
.adim-3-etiketler{display:flex;flex-wrap:wrap;gap:8px}
.adim-3-etiketler span{font-size:11px;color:var(--metin3);background:rgba(255,255,255,.04);
  border:1px solid var(--cizgi);border-radius:20px;padding:4px 10px 4px 8px;display:inline-flex;align-items:center;gap:5px}
.adim-3-etiketler .ikon{width:11px;height:11px;color:var(--basari)}
@media (max-width:860px){.adim-3{grid-template-columns:1fr}}

/* =====================================================================
   KAĞIT MENÜYE GÖRE TASARRUF HESABI
   ===================================================================== */
.tasarruf-kart{max-width:640px;margin:0 auto;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r);padding:30px 30px 26px}
.tasarruf-kart > label{display:block;font-size:13.5px;color:var(--metin2);margin-bottom:10px}
.tasarruf-kart > label b{color:var(--altin);font-family:var(--baslik);font-size:17px}
.tasarruf-kart input[type=range]{width:100%;accent-color:var(--altin);margin-bottom:24px;cursor:pointer}
.tasarruf-izgara{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.tasarruf-kutu{border:1px solid var(--cizgi);border-radius:var(--r-k);padding:16px}
.tasarruf-kutu.vurgu{border-color:rgba(233,184,60,.35);background:rgba(233,184,60,.06)}
.tasarruf-kutu .ad{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--metin2);margin-bottom:8px}
.tasarruf-kutu .ad .ikon{width:14px;height:14px;color:var(--altin);flex-shrink:0}
.tasarruf-kutu b{display:block;font-family:var(--baslik);font-size:25px;color:#fff}
.tasarruf-kutu .alt{display:block;font-size:11.5px;color:var(--metin3);margin-top:5px}
.tasarruf-sonuc{text-align:center;font-weight:650;font-size:14.5px;color:#4ad695;background:rgba(46,194,126,.10);
  border:1px solid rgba(46,194,126,.28);border-radius:var(--r-k);padding:12px;margin-bottom:14px;transition:.2s}
.tasarruf-sonuc.notr{color:var(--metin2);background:rgba(255,255,255,.04);border-color:var(--cizgi)}
.tasarruf-not{font-size:11.5px;color:var(--metin3);text-align:center;line-height:1.6}
@media (max-width:600px){.tasarruf-izgara{grid-template-columns:1fr}}

/* =====================================================================
   DUYARLI
   ===================================================================== */
@media (max-width:1040px){
  .hero-ic{grid-template-columns:1fr;gap:44px;justify-items:center;text-align:center}
  .hero .giris{margin-left:auto;margin-right:auto}
  .hero .dg-grup,.hero-notlar{justify-content:center}
  .iz-4{grid-template-columns:repeat(2,1fr)}
  .fiyat-izgara{grid-template-columns:repeat(2,1fr)}
  .akis{grid-template-columns:repeat(3,1fr);gap:32px 0}
  .akis-adim:after{display:none}
  .alt-ic{grid-template-columns:1fr 1fr}
  .adim-3{grid-template-columns:1fr}
}
@media (max-width:860px){
  .bolum{padding:70px 0}
  .tepe nav{display:none}
  .tepe nav.acik{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;background:var(--zemin2);
    border-bottom:1px solid var(--cizgi);padding:12px 18px 18px;box-shadow:var(--golge);
  }
  .tepe nav.acik a{padding:11px 13px;font-size:15px}
  .menu-dugme{display:flex}
  .tepe .sag{display:none}
  .iz-2,.iz-3,.iz-4{grid-template-columns:1fr}
  .ikili{grid-template-columns:1fr;gap:32px}
  .ikili.ters .gorsel{order:0}
  .ikili + .ikili{margin-top:60px}
  .rakamlar{grid-template-columns:repeat(2,1fr)}
  .asama{grid-template-columns:1fr}
  .kasa{grid-template-columns:1fr}
  .fiyat-izgara{grid-template-columns:1fr}
  .akis{grid-template-columns:1fr;gap:26px}
  .alan-ikili{grid-template-columns:1fr}
  .kapanis{padding:38px 24px}
  .alt-ic{grid-template-columns:1fr;gap:28px}
}
@media (max-width:400px){
  .telefon{width:100%;max-width:302px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}

/* Kaydırınca beliren bölümler */
.beliren{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.beliren.gorundu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.beliren{opacity:1;transform:none}}

/* =====================================================================
   TELEFON MAKETİ — moda göre değişen parçalar
   Beş mod aynı menüyü farklı davranışla gösterir; maket de öyle yapar.
   ===================================================================== */
.tf-masa,.tf-kod,.tf-teslimat,
.tf-alt-siparis,.tf-alt-qr,.tf-alt-secim,.tf-alt-vitrin{display:none}

.telefon-ekran[data-mod="qr_menu"]     .tf-masa,
.telefon-ekran[data-mod="online"]      .tf-masa{display:flex}
.telefon-ekran[data-mod="teslimat"]    .tf-teslimat{display:flex}
.telefon-ekran[data-mod="secim"]       .tf-kod{display:block}

.telefon-ekran[data-mod="online"]      .tf-alt-siparis,
.telefon-ekran[data-mod="teslimat"]    .tf-alt-siparis{display:flex}
.telefon-ekran[data-mod="qr_menu"]     .tf-alt-qr{display:flex}
.telefon-ekran[data-mod="secim"]       .tf-alt-secim{display:flex}
.telefon-ekran[data-mod="goruntuleme"] .tf-alt-vitrin{display:flex}

/* Sipariş almayan modlarda + düğmesi hiç çizilmez */
.telefon-ekran[data-mod="qr_menu"]     .tf-arti,
.telefon-ekran[data-mod="goruntuleme"] .tf-arti{display:none}

.tf-teslimat{align-items:center;gap:8px;margin:0 14px 11px;padding:9px 12px;border-radius:11px;
  background:var(--bg2);border:1px dashed var(--cizgi-t);font-size:11.5px;color:var(--metin2-t)}
.tf-teslimat b{color:var(--metin-t);font-weight:650}
.tf-alt-qr{gap:8px}
.tf-alt-qr button{flex:1;padding:10px;border-radius:11px;font-size:12px;font-weight:700;
  border:1px solid var(--cizgi-t);background:var(--bg2);color:var(--metin-t)}
.tf-alt-qr button.birincil{background:var(--ana-t);color:var(--ana-metin);border-color:var(--ana-t)}
.tf-alt-vitrin{justify-content:center}
.tf-alt-vitrin span{font-size:12px;font-weight:650;color:var(--metin2-t);display:flex;align-items:center;gap:7px}

/* Mod açıklaması (telefonun altında) */
.mod-aciklama{max-width:340px;text-align:center;font-size:13px;color:var(--metin2);line-height:1.6;
  min-height:62px}
.mod-aciklama b{display:block;color:#fff;font-size:14px;margin-bottom:3px;font-weight:650}

/* Ayarlar şeridi */
.telefon-ayar{display:grid;gap:12px;justify-items:center}
.telefon-ayar .baslik{font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--metin3)}

/* Ürün kartındaki geniş görsel — fiyat satırının üstü */
.tf-urun .tf-gorsel{display:block;width:100%;height:auto;margin-top:8px;border-radius:10px;
  object-fit:cover;background:var(--bg3)}
.tf-urun.tukendi .tf-gorsel{filter:grayscale(.45)}