/* =====================================================================
   WEB DANIŞMANI BULUT LİSANS — KURUMSAL MARKA SİSTEMİ
   Tanıtım sitesi + üyelik sayfaları.

   Palet kararı: indigo/mor bilinçli olarak KULLANILMIYOR. Kurumsal lacivert
   (#0A2540) marka mürekkebi, sinyal mavisi (#0570DE) eylem rengi, turkuaz
   (#00B8A9) yalnız doğrulama/başarı işareti. Başlıklar da lacivert — marka
   rengi metnin kendisinde yaşar, süs olarak değil.

   Ritim: beyaz ve lacivert bölümler dönüşümlü. Kontrast dramayı kurar.
   ===================================================================== */

:root{
  /* Marka */
  --lacivert:#0A2540;
  --lacivert-2:#0E2E4F;
  --lacivert-orta:#12395F;
  --lacivert-acik:#1C5180;
  --marka:#0570DE;
  --marka-koyu:#0459B0;
  --marka-acik:#3B92F5;
  --marka-sis:#EAF4FE;
  --marka-cizgi:#BCDBFA;
  --turkuaz:#00B8A9;
  --turkuaz-sis:#E6FAF8;

  /* Nötr */
  --beyaz:#FFFFFF;
  --zemin:#FFFFFF;
  --zemin-2:#F7F9FC;
  --zemin-3:#EDF2F7;
  --cizgi:#E3E9F0;
  --cizgi-koyu:#D2DBE5;
  --murekkep:#0A2540;
  --metin:#3C4A5C;
  --metin-2:#5B6B7F;
  --metin-3:#8A9AAC;

  /* Durum */
  --basari:#0A8A5F;  --basari-sis:#E7F7F1;
  --uyari:#B4690E;   --uyari-sis:#FDF5E7;
  --tehlike:#C7322B; --tehlike-sis:#FDEFEE;

  /* Yükseklik */
  --y-1:0 1px 2px rgba(10,37,64,.05),0 1px 1px rgba(10,37,64,.03);
  --y-2:0 2px 5px rgba(10,37,64,.05),0 6px 14px -3px rgba(10,37,64,.07);
  --y-3:0 4px 10px -2px rgba(10,37,64,.06),0 14px 32px -8px rgba(10,37,64,.11);
  --y-4:0 8px 18px -4px rgba(10,37,64,.07),0 28px 56px -14px rgba(10,37,64,.16);
  --y-5:0 14px 28px -8px rgba(10,37,64,.09),0 48px 96px -24px rgba(10,37,64,.24);
  --y-marka:0 6px 18px -5px rgba(5,112,222,.42),0 2px 5px -1px rgba(5,112,222,.24);

  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px; --r-5:30px; --r-tam:999px;
  --hiz:.2s cubic-bezier(.4,0,.2,1);
  --hizli:.14s cubic-bezier(.4,0,.2,1);
  --yumusak:.55s cubic-bezier(.22,1,.36,1);
  /* Eski ad — bazı bileşenler (ipuc, panel katmanı) bu adla başvurur. */
  --sinyal:var(--marka);

  --sar:1200px;
  --ust-yuk:74px;
  --yazi:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tek:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}

/* ---------- Temel ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font-family:var(--yazi);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv02","cv03","cv04","ss01";overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--murekkep);letter-spacing:-.03em;text-wrap:balance;font-weight:640}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--marka-sis);color:var(--lacivert)}
:focus-visible{outline:2px solid var(--marka);outline-offset:3px;border-radius:6px}

.sar{width:min(var(--sar),100%);margin:0 auto;padding:0 26px}
.gizle{display:none!important}
.tek{font-family:var(--tek);letter-spacing:-.02em}

/* ---------- Tipografi ---------- */
.dev{font-size:clamp(36px,4.6vw,62px);line-height:1.06;letter-spacing:-.042em;font-weight:680}
.buyuk{font-size:clamp(30px,3.9vw,47px);line-height:1.09;letter-spacing:-.036em;font-weight:660}
.orta{font-size:clamp(21px,2.3vw,28px);line-height:1.22;letter-spacing:-.028em;font-weight:640}
.spot{font-size:clamp(17px,1.4vw,19.5px);line-height:1.62;color:var(--metin-2);text-wrap:pretty}
.et{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:640;
  letter-spacing:.11em;text-transform:uppercase;color:var(--marka);margin-bottom:18px;
}
.et::before{content:"";width:18px;height:2px;border-radius:2px;flex:0 0 18px;background:var(--marka)}

/* ---------- Düğmeler ---------- */
.dug{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 21px;border-radius:var(--r-1);border:1px solid var(--cizgi-koyu);
  background:var(--beyaz);color:var(--murekkep);font-size:14.5px;font-weight:560;
  white-space:nowrap;box-shadow:var(--y-1);
  transition:transform var(--hiz),box-shadow var(--hiz),border-color var(--hiz),background var(--hiz);
}
.dug:hover{transform:translateY(-1px);box-shadow:var(--y-2);border-color:var(--metin-3)}
.dug:active{transform:translateY(0)}
.dug svg{width:16px;height:16px;flex:0 0 16px}
.dug.ana{background:var(--marka);border-color:var(--marka);color:#fff;box-shadow:var(--y-marka)}
.dug.ana:hover{background:var(--marka-koyu);border-color:var(--marka-koyu)}
.dug.koyu{background:var(--lacivert);border-color:var(--lacivert);color:#fff;box-shadow:var(--y-3)}
.dug.koyu:hover{background:var(--lacivert-orta);border-color:var(--lacivert-orta)}
.dug.sade{background:transparent;border-color:transparent;box-shadow:none;color:var(--metin-2)}
.dug.sade:hover{background:var(--zemin-3);color:var(--murekkep);box-shadow:none;transform:none}
.dug.buyuk{padding:14px 28px;font-size:15.5px;border-radius:var(--r-2)}
.dug.tam{width:100%}
.dug[disabled]{opacity:.5;pointer-events:none}
.dug .ok{transition:transform var(--hiz)}
.dug:hover .ok{transform:translateX(3px)}

/* ---------- Beliriş ---------- */
.gorun{opacity:0;transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
.gorun.acik{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.gorun{opacity:1;transform:none;transition:none}}

/* ---------- Marka kilidi ---------- */
.marka{display:inline-flex;align-items:center;gap:12px}
.marka .im{display:grid;place-items:center;filter:drop-shadow(0 4px 10px rgba(10,37,64,.18))}
.marka .ad{line-height:1.12}
.marka .ad b{display:block;font-size:16.5px;font-weight:680;letter-spacing:-.032em;color:var(--murekkep)}
.marka .ad small{
  display:block;font-size:10px;font-weight:620;letter-spacing:.16em;
  text-transform:uppercase;color:var(--metin-3);margin-top:1px;
}
.marka.ters .ad b{color:#fff}
.marka.ters .ad small{color:rgba(255,255,255,.5)}

/* ---------- Üst çubuk ---------- */
.ust{
  position:sticky;top:0;z-index:70;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color var(--hiz),box-shadow var(--hiz);
}
.ust.kaydi{border-bottom-color:var(--cizgi);box-shadow:0 1px 4px rgba(10,37,64,.05)}
/* Üst çubuk kendi genişliğini kullanır.
   Sayfa gövdesi 1200px'de okunabilirlik için sınırlı ama gezinti METİN
   değil: logo + 7 öğe + dil + iki düğme 1200'e sığmıyordu ve öğeler iki
   satıra kırılıyordu. Gövdenin ölçüsünü değiştirmeden yalnız çubuğu
   genişletmek, satır uzunluğu kararını bozmaz. */
.ust .sar{width:min(1400px,100%)}
.ust .ic{display:flex;align-items:center;gap:10px;height:var(--ust-yuk)}
.ust nav{display:flex;align-items:center;gap:2px;margin-left:clamp(16px,2.2vw,34px)}
.ust nav a{
  position:relative;padding:8px 11px;border-radius:var(--r-1);font-size:14px;
  font-weight:520;color:var(--metin-2);transition:color var(--hiz),background var(--hiz);
  /* Kırılmasın: yer yetmediğinde ikinci satıra taşmak yerine çubuk
     kendi kırılma noktasında mobil menüye geçer. */
  white-space:nowrap;
}
.ust nav a:hover{color:var(--murekkep);background:var(--zemin-3)}
/* Kaydırma takibi: görünürdeki bölümün bağlantısı işaretlenir (uygulama.js). */
.ust nav a.etkin{color:var(--marka);background:var(--marka-sis)}
.ust .sag{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Klavye kullanıcısı için içeriğe atlama — yalnız odaklanınca görünür. */
.atla{
  position:fixed;left:18px;top:-64px;z-index:120;padding:11px 20px;
  border-radius:var(--r-1);background:var(--lacivert);color:#fff;
  font-size:14px;font-weight:580;box-shadow:var(--y-4);transition:top var(--hiz);
}
.atla:focus-visible{top:14px;outline-offset:2px}

.dil{display:flex;background:var(--zemin-3);border-radius:var(--r-tam);padding:3px}
.dil a{padding:5px 12px;border-radius:var(--r-tam);font-size:11.5px;font-weight:640;
  letter-spacing:.05em;color:var(--metin-3);transition:all var(--hiz)}
.dil a:hover{color:var(--murekkep)}
.dil a.etkin{background:var(--beyaz);color:var(--marka);box-shadow:var(--y-1)}

/* ---------- Bölüm ---------- */
.bolum{padding:clamp(76px,10vw,136px) 0;position:relative}
.bolum.dar{padding:clamp(44px,5vw,68px) 0}
.bolum.sis{background:var(--zemin-2);border-block:1px solid var(--cizgi)}

/* Koyu bölüm — marka mürekkebi zemin olur */
.bolum.koyu{background:var(--lacivert);color:rgba(255,255,255,.72);overflow:hidden}
.bolum.koyu::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:
    radial-gradient(760px 480px at 12% 0%,rgba(5,112,222,.28),transparent 62%),
    radial-gradient(680px 460px at 92% 100%,rgba(0,184,169,.16),transparent 60%);
}
.bolum.koyu::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000,transparent 76%);
}
.bolum.koyu>*{position:relative;z-index:1}
.bolum.koyu h1,.bolum.koyu h2,.bolum.koyu h3,.bolum.koyu h4{color:#fff}
.bolum.koyu .spot{color:rgba(255,255,255,.66)}
.bolum.koyu .et{color:var(--marka-acik)}
.bolum.koyu .et::before{background:var(--marka-acik)}

.bolum-bas{max-width:700px;margin-bottom:clamp(46px,5vw,68px)}
.bolum-bas.ortala{margin-inline:auto;text-align:center}
.bolum-bas.ortala .et{justify-content:center}
.bolum-bas p{margin-top:18px}

/* ---------- Kahraman ---------- */
.kahraman{padding:clamp(60px,7vw,96px) 0 0;position:relative;overflow:hidden}
.kahraman::before{
  content:"";position:absolute;top:-460px;left:52%;translate:-50% 0;
  width:1240px;height:880px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,112,222,.11),rgba(0,184,169,.05) 48%,transparent 72%);
}
/* İnce nokta ızgarası — düz beyazı kırar, aşağı doğru eriyerek kaybolur. */
.kahraman::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,rgba(10,37,64,.07) 1px,transparent 1.5px) 0 0/28px 28px;
  mask-image:radial-gradient(ellipse 85% 72% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 72% at 50% 0%,#000 30%,transparent 78%);
}
.kahraman .sar{position:relative;z-index:1}
.kahraman .ic{position:relative;z-index:1;max-width:1080px;margin:0 auto;text-align:center}
.duyuru{
  display:inline-flex;align-items:center;gap:11px;padding:6px 17px 6px 7px;
  border:1px solid var(--cizgi);border-radius:var(--r-tam);background:var(--beyaz);
  font-size:13.5px;color:var(--metin-2);margin-bottom:30px;box-shadow:var(--y-1);
  transition:box-shadow var(--hiz),transform var(--hiz);
}
.duyuru:hover{box-shadow:var(--y-2);transform:translateY(-1px)}
.duyuru b{padding:3px 11px;border-radius:var(--r-tam);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;background:var(--lacivert);color:#fff}
.kahraman h1{margin-bottom:24px;max-width:16ch;margin-inline:auto}
@media (min-width:760px){.kahraman h1{max-width:none}}
@media (max-width:760px){.kahraman h1 br{display:none}}
/* Vurgulu kelime: dil dosyaları hem <em> hem .vurgu-metin kullanır.
   Alt üçte bire binen açık mavi şerit fosforlu kalem izi verir. */
.kahraman h1 em,.kahraman h1 .vurgu-metin{
  font-style:normal;color:var(--marka);
  background:linear-gradient(transparent 64%,rgba(5,112,222,.14) 64%);
}
.kahraman .spot{max-width:720px;margin:0 auto 38px}
.kahraman .eylem{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.kahraman .not{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  font-size:13.5px;color:var(--metin-3)}
.kahraman .not span{display:inline-flex;align-items:center;gap:7px}
.kahraman .not svg{width:15px;height:15px;color:var(--turkuaz)}

/* ---------- Panel maketi ---------- */
.sahne{position:relative;margin-top:clamp(52px,6vw,80px);z-index:1}
.sahne::after{
  content:"";position:absolute;left:50%;bottom:-46px;translate:-50% 0;
  width:74%;height:130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,37,64,.24),transparent 72%);filter:blur(30px);
}
.maket{
  position:relative;z-index:1;border-radius:var(--r-4);overflow:hidden;background:var(--beyaz);
  box-shadow:var(--y-5),0 0 0 1px rgba(10,37,64,.07);text-align:left;
}
.maket-cerceve{
  display:flex;align-items:center;gap:8px;padding:13px 18px;
  background:var(--zemin-2);border-bottom:1px solid var(--cizgi);
}
.maket-cerceve i{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--cizgi-koyu)}
.maket-cerceve .url{
  margin-left:12px;padding:5px 14px;border-radius:var(--r-tam);background:var(--beyaz);
  border:1px solid var(--cizgi);font-family:var(--tek);font-size:11.5px;color:var(--metin-3);
  display:inline-flex;align-items:center;gap:7px;
}
.maket-cerceve .url svg{width:12px;height:12px;color:var(--turkuaz)}

.maket-govde{display:grid;grid-template-columns:196px minmax(0,1fr);min-height:420px}
.maket-yan{background:var(--lacivert);padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.maket-yan .mk{display:flex;align-items:center;gap:9px;padding:4px 8px 16px}
.maket-yan .mk b{font-size:12.5px;color:#fff;font-weight:650;letter-spacing:-.02em}
.maket-yan a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  font-size:12px;color:rgba(255,255,255,.55);
}
.maket-yan a svg{width:14px;height:14px;flex:0 0 14px}
.maket-yan a.etkin{background:rgba(255,255,255,.1);color:#fff}
.maket-yan .kota{margin-top:auto;padding:12px;border-radius:9px;background:rgba(255,255,255,.06)}
.maket-yan .kota span{display:block;font-size:10px;color:rgba(255,255,255,.5);margin-bottom:7px}
.maket-yan .ray{height:5px;border-radius:var(--r-tam);background:rgba(255,255,255,.14);overflow:hidden}
.maket-yan .ray i{display:block;height:100%;width:62%;border-radius:var(--r-tam);
  background:linear-gradient(90deg,var(--marka-acik),var(--turkuaz))}

.maket-ana{padding:22px;background:var(--zemin-2)}
.maket-ust{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.maket-ust b{font-size:15px;color:var(--murekkep);letter-spacing:-.025em}
.maket-ust .dug-mini{margin-left:auto;padding:6px 13px;border-radius:7px;background:var(--marka);
  color:#fff;font-size:11.5px;font-weight:580}
.maket-ist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:16px}
.maket-ist>div{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:10px;padding:13px}
.maket-ist span{display:block;font-size:10.5px;color:var(--metin-3);margin-bottom:5px}
.maket-ist b{font-size:19px;color:var(--murekkep);letter-spacing:-.035em;font-weight:670;
  font-variant-numeric:tabular-nums}
.maket-ist em{font-style:normal;font-size:10.5px;color:var(--basari);font-weight:600;margin-left:5px}

.maket-tablo{background:var(--beyaz);border:1px solid var(--cizgi);border-radius:10px;overflow:hidden}
.maket-tablo .bas{padding:11px 15px;border-bottom:1px solid var(--cizgi);font-size:11px;
  color:var(--metin-3);font-weight:620;letter-spacing:.06em;text-transform:uppercase}
.maket-tablo .sat{display:flex;align-items:center;gap:12px;padding:11px 15px;
  border-bottom:1px solid var(--cizgi)}
.maket-tablo .sat:last-child{border-bottom:0}
.maket-tablo .nk{width:26px;height:26px;flex:0 0 26px;border-radius:7px;display:grid;
  place-items:center;background:var(--marka-sis);color:var(--marka)}
.maket-tablo .nk svg{width:13px;height:13px}
.maket-tablo .gv{flex:1;min-width:0}
.maket-tablo .gv b{display:block;font-size:12px;color:var(--murekkep);font-weight:580}
.maket-tablo .gv small{display:block;font-size:10.5px;color:var(--metin-3);font-family:var(--tek)}

.pul{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-tam);
  font-size:10.5px;font-weight:650;white-space:nowrap}
.pul i{width:5px;height:5px;border-radius:50%;flex:0 0 5px;background:currentColor}
.pul.iyi{background:var(--basari-sis);color:var(--basari)}
.pul.bekle{background:var(--uyari-sis);color:var(--uyari)}
.pul.kotu{background:var(--tehlike-sis);color:var(--tehlike)}
.pul.marka{background:var(--marka-sis);color:var(--marka-koyu)}

/* Yüzen kartlar */
.yuzen{
  position:absolute;z-index:2;background:var(--beyaz);border-radius:var(--r-2);
  padding:13px 17px;box-shadow:var(--y-4);border:1px solid var(--cizgi);
  display:flex;align-items:center;gap:12px;animation:suzul 7s ease-in-out infinite;
}
@keyframes suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.yuzen .ik{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center}
.yuzen b{display:block;font-size:13.5px;font-weight:650;color:var(--murekkep);letter-spacing:-.022em}
.yuzen small{display:block;font-size:11px;color:var(--metin-3)}
.yuzen.sol{left:-42px;top:26%;animation-delay:-2.5s}
.yuzen.sag{right:-42px;bottom:22%}
@media (max-width:1180px){.yuzen{display:none}}

/* ---------- Rakamlar şeridi ---------- */
.rakamlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-3);overflow:hidden;
  background:rgba(255,255,255,.04)}
.rakamlar>div{padding:30px 28px;border-right:1px solid rgba(255,255,255,.1)}
.rakamlar>div:last-child{border-right:0}
.rakamlar b{display:block;font-size:clamp(28px,3vw,38px);font-weight:680;letter-spacing:-.04em;
  color:#fff;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.rakamlar span{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);display:block}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.hucre{
  position:relative;overflow:hidden;background:var(--beyaz);border:1px solid var(--cizgi);
  border-radius:var(--r-3);padding:32px 30px;box-shadow:var(--y-1);
  transition:transform var(--yumusak),box-shadow var(--yumusak),border-color var(--hiz);
}
.hucre:hover{transform:translateY(-4px);box-shadow:var(--y-3);border-color:var(--marka-cizgi)}
.hucre.genis{grid-column:span 3}
.hucre.orta-h{grid-column:span 2}
.hucre .ik{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px;
  background:var(--lacivert);color:#fff;box-shadow:var(--y-2);
  transition:transform var(--yumusak);
}
.hucre:hover .ik{transform:scale(1.06) rotate(-5deg)}
.hucre .ik svg{width:20px;height:20px}
.hucre h3{font-size:18px;margin-bottom:11px;letter-spacing:-.026em}
.hucre p{font-size:14.5px;color:var(--metin-2);line-height:1.66;text-wrap:pretty}
.hucre .parilti{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--yumusak);
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(5,112,222,.07),transparent 62%);
}
.hucre:hover .parilti{opacity:1}

/* ---------- Dönüşümlü satır ---------- */
.satir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(38px,5vw,76px);align-items:center}
.satir+.satir{margin-top:clamp(68px,8vw,110px)}
.satir.ters .gv{order:2}
.satir .gv h3{margin-bottom:18px}
.satir .gv p{color:var(--metin-2);font-size:16.5px;line-height:1.72}
.satir .liste{display:flex;flex-direction:column;gap:15px;margin-top:28px}
.satir .liste div{display:flex;gap:13px;font-size:15px;color:var(--metin-2);line-height:1.55}
.satir .liste svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;color:var(--turkuaz)}
.bolum.koyu .satir .gv p,.bolum.koyu .satir .liste div{color:rgba(255,255,255,.66)}

/* ---------- Fotoğraf yuvası ---------- */
.foto-sar{position:relative;border-radius:var(--r-3);overflow:hidden;box-shadow:var(--y-4);
  background:var(--zemin-3)}
.foto-sar img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.foto-sar:hover img{transform:scale(1.035)}
.foto-sar .kaplama{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(10,37,64,.82) 100%);
}
.foto-sar .yazi{position:absolute;left:24px;right:24px;bottom:22px;color:#fff}
.foto-sar .yazi b{display:block;font-size:17px;font-weight:640;letter-spacing:-.026em}
.foto-sar .yazi small{display:block;font-size:13.5px;color:rgba(255,255,255,.76);margin-top:4px}
/* Fotoğraf eklenmediğinde gösterilen persona kartı. Ziyaretçiye dosya adı
   değil, tasarlanmış bir kart görünür; foto-sar ile aynı tipografiyi taşır
   ki gerçek görsel eklendiğinde geçiş kesintisiz olsun. Hangi dosyanın
   beklendiği varliklar/gorsel/OKU.md'de yazılıdır. */
.foto-yer{
  position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-3);
  padding:26px 24px;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;gap:5px;text-align:left;color:#fff;
  background:var(--lacivert);box-shadow:var(--y-4);
}
.foto-yer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background:
    radial-gradient(420px 300px at 18% 0%,rgba(5,112,222,.4),transparent 62%),
    radial-gradient(360px 260px at 96% 100%,rgba(0,184,169,.2),transparent 60%);
}
.foto-yer::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 90% 85% at 50% 20%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 20%,#000,transparent 80%);
}
.foto-yer>*{position:relative;z-index:1}
.foto-yer .nk{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:auto;background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.foto-yer .nk svg{width:20px;height:20px}
.foto-yer b{font-size:17px;font-weight:640;letter-spacing:-.026em}
.foto-yer small{font-size:13.5px;color:rgba(255,255,255,.76);line-height:1.5}
/* Kartlar arasında ışık yönü hafifçe değişir — üçüz kopya hissi kırılır. */
.foto-uclu>div:nth-child(2) .foto-yer::before{
  background:
    radial-gradient(420px 300px at 82% 0%,rgba(5,112,222,.38),transparent 62%),
    radial-gradient(360px 260px at 4% 100%,rgba(0,184,169,.2),transparent 60%);
}
.foto-uclu>div:nth-child(3) .foto-yer::before{
  background:
    radial-gradient(420px 300px at 50% -10%,rgba(0,184,169,.3),transparent 64%),
    radial-gradient(380px 280px at 90% 100%,rgba(5,112,222,.3),transparent 62%);
}
.foto-uclu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* ---------- Mimari ---------- */
.mimari{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.mimari .bag{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--lacivert);border:1px solid rgba(255,255,255,.14);box-shadow:var(--y-3);color:#fff;
}
.mimari .bag svg{width:19px;height:19px;animation:nabiz-ok 2.8s ease-in-out infinite}
@keyframes nabiz-ok{0%,100%{transform:translateX(-2px);opacity:.65}50%{transform:translateX(2px);opacity:1}}

.taraf{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-3);overflow:hidden;backdrop-filter:blur(8px)}
.taraf.one{background:rgba(255,255,255,.09);border-color:rgba(59,146,245,.42)}
.taraf-bas{padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:13px}
.taraf-bas .ik{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:grid;
  place-items:center;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.taraf.one .taraf-bas .ik{background:var(--marka);color:#fff;box-shadow:var(--y-marka)}
.taraf-bas .ik svg{width:19px;height:19px}
.taraf-bas h3{font-size:16.5px;letter-spacing:-.024em}
.taraf-bas small{display:block;font-size:12.5px;color:rgba(255,255,255,.45);margin-top:2px;
  font-family:var(--tek)}
.taraf ul{list-style:none;margin:0;padding:22px 26px 26px;display:flex;flex-direction:column;gap:15px}
.taraf li{display:flex;gap:12px;font-size:14.5px;color:rgba(255,255,255,.66);line-height:1.58}
.taraf li svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:rgba(255,255,255,.35)}
.taraf.one li svg{color:var(--turkuaz)}
.mimari-not{
  margin-top:28px;padding:20px 24px;border-radius:var(--r-2);
  background:rgba(0,184,169,.1);border:1px solid rgba(0,184,169,.28);
  font-size:14.5px;color:rgba(255,255,255,.8);line-height:1.65;display:flex;gap:14px;
}
.mimari-not svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px;color:var(--turkuaz)}

/* ---------- Fiyatlar ---------- */
.fiyatlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.fiyat{
  position:relative;display:flex;flex-direction:column;padding:32px 28px;background:var(--beyaz);
  border:1px solid var(--cizgi);border-radius:var(--r-3);box-shadow:var(--y-1);
  transition:transform var(--yumusak),box-shadow var(--yumusak);
}
.fiyat:hover{transform:translateY(-5px);box-shadow:var(--y-3)}
.fiyat.one{background:var(--lacivert);border-color:var(--lacivert);box-shadow:var(--y-4)}
.fiyat.one:hover{box-shadow:var(--y-5)}
.fiyat.one h3,.fiyat.one .tutar b{color:#fff}
.fiyat.one .tutar span,.fiyat.one .kdv{color:rgba(255,255,255,.5)}
.fiyat.one li{color:rgba(255,255,255,.74)}
.fiyat.one li svg{color:var(--turkuaz)}
.fiyat .sanci{
  position:absolute;top:0;left:50%;translate:-50% -50%;padding:5px 15px;border-radius:var(--r-tam);
  background:var(--turkuaz);color:#04302C;font-size:10.5px;font-weight:720;letter-spacing:.08em;
  box-shadow:var(--y-2);
}
.fiyat h3{font-size:16px;letter-spacing:-.022em}
/* Tutar tek satırda kalmalı: "3.899,00 ₺" dar kutuda "₺"yi alta atıyordu.
   Yazı boyu kutu genişliğine göre daralır, birim asla kopmaz. */
.fiyat .tutar{display:flex;align-items:baseline;gap:6px;margin:18px 0 4px;flex-wrap:nowrap;min-width:0}
.fiyat .tutar b{
  font-size:clamp(26px,2.4vw + 8px,38px);font-weight:690;letter-spacing:-.05em;line-height:1.05;
  color:var(--murekkep);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.fiyat .tutar b.ozel{font-size:clamp(22px,1.2vw + 14px,27px)}
.fiyat .tutar span{font-size:14px;color:var(--metin-3);white-space:nowrap}
.fiyat .tasarruf-not{font-size:12px;font-weight:640;color:var(--basari);margin-top:2px}
.fiyat.one .tasarruf-not{color:var(--turkuaz)}
.fiyat .kdv{font-size:12.5px;color:var(--metin-3);margin-bottom:26px}
.fiyat ul{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px;flex:1}
.fiyat li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--metin-2);line-height:1.5}
.fiyat li>span:first-of-type{min-width:0;overflow-wrap:anywhere}
.fiyat li>svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--turkuaz)}
/* Pakette BULUNMAYAN özellik: sönük metin + gri çarpı. Satır listeden
   çıkarılmaz — eksik olan da bilgidir. */
.fiyat li.yok{color:var(--metin-3)}
.fiyat li.yok>svg{color:var(--metin-3);opacity:.7}
.fiyat.one li.yok{color:rgba(255,255,255,.45)}
.fiyat.one li.yok>svg{color:rgba(255,255,255,.45)}
.fiyat.one .dug{background:#fff;border-color:#fff;color:var(--lacivert)}
.fiyat-not{
  display:flex;gap:10px;align-items:flex-start;justify-content:center;margin:34px auto 0;
  max-width:640px;text-align:left;font-size:13px;color:var(--metin-3);line-height:1.6;
}
.fiyat-not svg{flex:0 0 15px;margin-top:3px;color:var(--turkuaz)}

/* ---------- Dönem seçici (aylık / yıllık) ---------- */
.donem-sec{
  display:inline-flex;gap:4px;margin:26px auto 0;padding:4px;border-radius:var(--r-tam);
  background:var(--beyaz);border:1px solid var(--cizgi);box-shadow:var(--y-1);
}
.donem-sec button{
  display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border:0;cursor:pointer;
  border-radius:var(--r-tam);background:transparent;color:var(--metin-2);
  font:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  transition:background var(--hizli),color var(--hizli);white-space:nowrap;
}
.donem-sec button:hover{color:var(--murekkep)}
.donem-sec button.etkin{background:var(--lacivert);color:#fff;box-shadow:var(--y-1)}
.donem-sec .tasarruf{
  padding:2px 8px;border-radius:var(--r-tam);background:rgba(0,184,169,.16);
  color:#04635B;font-size:10.5px;font-weight:720;letter-spacing:.02em;
}
.donem-sec button.etkin .tasarruf{background:var(--turkuaz);color:#04302C}

/* ---------- Kayıt: seçilen paket özeti ---------- */
.secili-paket{
  margin:0 0 22px;padding:14px 16px;border-radius:var(--r-2);
  background:var(--marka-sis);border:1px solid var(--marka-cizgi);
}
.secili-paket .sp-ust{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.secili-paket .sp-et{
  font-size:10.5px;font-weight:720;letter-spacing:.08em;color:var(--marka-koyu);text-transform:uppercase;
}
.secili-paket .sp-degis{margin-left:auto;font-size:12px;font-weight:600;color:var(--marka)}
.secili-paket .sp-alt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.secili-paket .sp-alt b{font-size:17px;font-weight:660;letter-spacing:-.02em;color:var(--murekkep)}
.secili-paket .sp-fiyat{margin-left:auto;display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.secili-paket .sp-fiyat em{font-style:normal;font-size:17px;font-weight:680;color:var(--murekkep)}
.secili-paket .sp-fiyat i{font-style:normal;font-size:12px;color:var(--metin-3)}
.secili-paket .sp-not{margin-top:8px;font-size:12px;color:var(--metin-2);line-height:1.55}

/* ---------- İpucu balonu ---------- */
.ipuc-sar{
  position:relative;display:inline-flex;flex:0 0 auto;margin-left:auto;cursor:help;
  color:var(--metin-3);opacity:.65;transition:opacity var(--hizli),color var(--hizli);
}
.ipuc-sar:hover,.ipuc-sar:focus-visible{opacity:1;color:var(--sinyal);outline:none}
.fiyat.one .ipuc-sar{color:rgba(255,255,255,.6)}
.fiyat.one .ipuc-sar:hover,.fiyat.one .ipuc-sar:focus-visible{color:#fff}
.ipuc-balon{
  position:absolute;bottom:calc(100% + 9px);right:-6px;z-index:40;width:max-content;max-width:246px;
  padding:9px 12px;border-radius:var(--r-1);background:var(--murekkep);color:#fff;
  font-size:12px;font-weight:450;line-height:1.5;letter-spacing:0;text-align:left;
  box-shadow:var(--y-3);opacity:0;visibility:hidden;translate:0 4px;pointer-events:none;
  transition:opacity var(--hizli),translate var(--hizli),visibility var(--hizli);
}
.ipuc-balon::after{
  content:"";position:absolute;top:100%;right:12px;border:6px solid transparent;
  border-top-color:var(--murekkep);
}
.ipuc-sar:hover .ipuc-balon,.ipuc-sar:focus-visible .ipuc-balon{opacity:1;visibility:visible;translate:0 0}

/* ---------- SSS ---------- */
.sss{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.sss details{border:1px solid var(--cizgi);border-radius:var(--r-2);background:var(--beyaz);
  box-shadow:var(--y-1);transition:box-shadow var(--hiz),border-color var(--hiz)}
.sss details:hover{box-shadow:var(--y-2)}
.sss details[open]{border-color:var(--marka-cizgi);box-shadow:var(--y-2)}
.sss summary{padding:21px 26px;font-size:16px;font-weight:580;color:var(--murekkep);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:16px;letter-spacing:-.02em}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 9px;
  border-right:2px solid var(--metin-3);border-bottom:2px solid var(--metin-3);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--hiz),border-color var(--hiz)}
.sss details[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--marka)}
.sss .gv{padding:0 26px 24px;font-size:15px;color:var(--metin-2);line-height:1.76;max-width:70ch;
  text-wrap:pretty}

/* ---------- Kapanış ---------- */
.cagri{position:relative;overflow:hidden;border-radius:var(--r-5);padding:clamp(52px,7vw,86px);
  text-align:center;color:#fff;background:var(--lacivert);box-shadow:var(--y-5)}
.cagri::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background:
    radial-gradient(680px 460px at 14% 8%,rgba(5,112,222,.4),transparent 62%),
    radial-gradient(620px 420px at 88% 96%,rgba(0,184,169,.24),transparent 60%);
}
.cagri>*{position:relative}
.cagri h2{color:#fff;margin-bottom:16px}
.cagri p{color:rgba(255,255,255,.72);font-size:17px;max-width:560px;margin:0 auto 34px;line-height:1.65}
.cagri .dug{background:#fff;border-color:#fff;color:var(--lacivert);box-shadow:var(--y-3)}
.cagri .dug:hover{transform:translateY(-2px);box-shadow:var(--y-4)}

/* ---------- Alt bilgi ---------- */
.alt{border-top:1px solid var(--cizgi);padding:64px 0 36px;background:var(--zemin-2)}
.alt .kolonlar{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:42px;margin-bottom:50px}
.alt .tanim{font-size:14.5px;color:var(--metin-2);line-height:1.7;max-width:34ch;margin-top:20px}
.alt h4{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--metin-3);
  margin-bottom:17px;font-weight:650}
.alt nav{display:flex;flex-direction:column;gap:11px}
.alt nav a{font-size:14.5px;color:var(--metin-2);transition:color var(--hiz),transform var(--hiz)}
.alt nav a:hover{color:var(--marka);transform:translateX(2px)}
.alt .telif{
  padding-top:30px;border-top:1px solid var(--cizgi);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--metin-3);
}
.alt .telif-sag{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.alt .telif-sag .tek{color:var(--metin-3)}

/* Kuruluş imzası — ana markaya bağlantı */
.alt .imza{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-tam);
  border:1px solid var(--cizgi);background:var(--beyaz);box-shadow:var(--y-1);
  font-size:12.5px;font-weight:570;color:var(--metin-2);white-space:nowrap;
  transition:border-color var(--hiz),background var(--hiz),color var(--hiz),box-shadow var(--hiz);
}
.alt .imza svg{width:14px;height:14px;flex:0 0 14px;color:var(--marka)}
.alt .imza:hover{
  border-color:var(--marka-cizgi);background:var(--marka-sis);
  color:var(--marka-koyu);box-shadow:var(--y-2);
}

@media (max-width:640px){
  .alt .telif{flex-direction:column;align-items:flex-start;gap:14px}
  .alt .telif-sag{flex-direction:column-reverse;align-items:flex-start;gap:12px}
}

/* ---------- Üyelik ---------- */
.uye{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
.uye-form{display:flex;flex-direction:column;padding:34px 38px;overflow:auto;background:var(--beyaz)}
.uye-form .ic{width:min(412px,100%);margin:auto;padding:36px 0}
.uye-form h1{font-size:31px;letter-spacing:-.038em;margin-bottom:9px}
.uye-form .alt-y{color:var(--metin-2);font-size:15.5px;margin-bottom:32px}
.uye-form form{display:flex;flex-direction:column}
.uye-form .dip{font-size:14.5px;color:var(--metin-2);margin-top:28px;text-align:center}
.uye-form .dip a{color:var(--marka);font-weight:580}
.uye-form .dip a:hover{text-decoration:underline}
.uye-ust{display:flex;align-items:center;gap:10px}

.uye-yan{position:relative;overflow:hidden;padding:56px;display:flex;flex-direction:column;
  justify-content:center;color:#fff;background:var(--lacivert)}
.uye-yan::before{
  content:"";position:absolute;inset:0;opacity:.85;pointer-events:none;
  background:
    radial-gradient(620px 440px at 18% 10%,rgba(5,112,222,.42),transparent 62%),
    radial-gradient(560px 400px at 92% 92%,rgba(0,184,169,.24),transparent 60%);
}
.uye-yan::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 74%);
}
.uye-yan .sozler{position:relative;max-width:40ch}
.uye-yan .sozler h2{color:#fff;font-size:clamp(24px,2.3vw,33px);line-height:1.18;
  letter-spacing:-.035em;margin-bottom:18px}
.uye-yan .sozler p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.7}
.uye-yan .liste{display:flex;flex-direction:column;gap:18px;margin-top:38px}
.uye-yan .liste div{display:flex;gap:13px;font-size:15px;color:rgba(255,255,255,.86);line-height:1.55}
.uye-yan .liste svg{width:19px;height:19px;flex:0 0 19px;margin-top:2px;color:var(--turkuaz)}

/* ---------- Form ---------- */
.alan{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.alan label{font-size:13.5px;font-weight:580;color:var(--murekkep)}
.alan .ipuc{font-size:12.5px;color:var(--metin-3);line-height:1.5}
.et-satir{display:flex;align-items:center;gap:10px}
.et-satir .unut{margin-left:auto;font-size:12.5px;color:var(--marka);font-weight:560}
.et-satir .unut:hover{text-decoration:underline}
.giris{width:100%;padding:11px 14px;border-radius:var(--r-1);background:var(--beyaz);
  border:1px solid var(--cizgi-koyu);outline:0;font-size:15px;color:var(--murekkep);
  box-shadow:var(--y-1);transition:border-color var(--hiz),box-shadow var(--hiz)}
.giris:hover{border-color:var(--metin-3)}
.giris:focus{border-color:var(--marka);box-shadow:0 0 0 4px rgba(5,112,222,.13)}
.giris::placeholder{color:var(--metin-3)}
.giris:disabled{background:var(--zemin-3);color:var(--metin-3);box-shadow:none}
textarea.giris{resize:vertical;min-height:88px}
select.giris{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9AAC' stroke-width='2.2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.gizli-alan{position:relative}
.gizli-alan .giris{padding-right:44px}
.gizli-alan .goster{position:absolute;right:6px;top:50%;translate:0 -50%;width:32px;height:32px;
  border-radius:7px;display:grid;place-items:center;color:var(--metin-3);transition:all var(--hiz)}
.gizli-alan .goster:hover{color:var(--murekkep);background:var(--zemin-3)}
.guc{display:flex;gap:5px;margin-top:9px}
.guc i{height:4px;flex:1;border-radius:var(--r-tam);background:var(--cizgi);transition:background var(--hiz)}
.guc.s1 i:nth-child(1){background:var(--tehlike)}
.guc.s2 i:nth-child(-n+2){background:var(--uyari)}
.guc.s3 i:nth-child(-n+3){background:var(--marka)}
.guc.s4 i{background:var(--turkuaz)}
.guc-yazi{font-size:12px;color:var(--metin-3);margin-top:7px}
.onay{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--metin-2);
  line-height:1.55;margin-bottom:22px;cursor:pointer}
.onay input{appearance:none;width:19px;height:19px;flex:0 0 19px;border-radius:6px;margin-top:1px;
  border:1.5px solid var(--cizgi-koyu);background:var(--beyaz);cursor:pointer;position:relative;
  transition:all var(--hiz)}
.onay input:hover{border-color:var(--marka-acik)}
.onay input:checked{background:var(--marka);border-color:var(--marka)}
.onay input:checked::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.onay a{color:var(--marka);font-weight:560}
.kutu{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-1);
  font-size:14px;line-height:1.55;margin-bottom:22px;border:1px solid var(--cizgi);
  background:var(--zemin-2)}
.kutu svg{width:17px;height:17px;flex:0 0 17px;margin-top:3px;color:var(--metin-3)}
.kutu ul{margin:0;padding-left:18px}
.kutu.hata{background:var(--tehlike-sis);border-color:#F0B3AF;color:#8E211C}
.kutu.hata svg{color:var(--tehlike)}
.kutu.basari{background:var(--basari-sis);border-color:#8FD9C1;color:#065F46}
.kutu.basari svg{color:var(--basari)}
.kutu.bilgi{background:var(--marka-sis);border-color:var(--marka-cizgi);color:var(--marka-koyu)}
.kutu.bilgi svg{color:var(--marka)}

/* ---------- Bildirim ---------- */
.toast-alan{position:fixed;bottom:22px;right:22px;z-index:130;display:flex;flex-direction:column;
  gap:11px;max-width:min(370px,calc(100vw - 44px))}
.toast{display:flex;gap:12px;align-items:flex-start;padding:14px 17px;border-radius:var(--r-2);
  background:var(--beyaz);border:1px solid var(--cizgi);box-shadow:var(--y-4);
  animation:toast-gir .4s cubic-bezier(.22,1,.36,1)}
.toast.cik{animation:toast-cik .25s forwards}
@keyframes toast-gir{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-cik{to{transform:translateX(26px);opacity:0}}
.toast .ik{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--marka)}
.toast b{font-size:14px;font-weight:600;display:block;color:var(--murekkep)}
.toast small{font-size:13px;color:var(--metin-2);line-height:1.5}

/* ---------- Hata sayfası ---------- */
.hata-sayfa{text-align:center;padding:clamp(80px,12vw,150px) 0}
.hata-sayfa .kod-no{font-size:clamp(72px,11vw,130px);font-weight:700;letter-spacing:-.06em;
  line-height:1;margin-bottom:20px;color:var(--zemin-3)}
.hata-sayfa h1{font-size:clamp(22px,3vw,32px);margin-bottom:14px}
.hata-sayfa p{color:var(--metin-2);font-size:16.5px;margin-bottom:32px}

/* ---------- Duyarlı ---------- */
/* Dört paket yan yanayken kutu içi sıkışıyordu: iç boşluk ve aralık daralır,
   tutar zaten clamp ile küçülür. */
@media (max-width:1280px){
  .fiyatlar{gap:14px}
  .fiyat{padding:28px 20px}
  .fiyat li{font-size:13px;gap:8px}
  .fiyat .kdv{font-size:12px;margin-bottom:22px}
}
@media (max-width:1100px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hucre.genis,.hucre.orta-h{grid-column:span 2}
  .fiyatlar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rakamlar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rakamlar>div:nth-child(2){border-right:0}
  .rakamlar>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
  .alt .kolonlar{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .uye{grid-template-columns:minmax(0,1fr)}
  .uye-yan{display:none}
  .maket-govde{grid-template-columns:minmax(0,1fr)}
  .maket-yan{display:none}
}
/* Gezintinin mobil menüye geçtiği nokta 900px'di; o ölçü beş menü öğesine
   göreydi. Altıncı öğeyle birlikte çubuk 1200px'de bile taşmaya başladı,
   yani "sığıyor" varsayımı artık 900'de değil burada bozuluyor. Üç kural
   (gezintiyi gizle, hamburgeri göster, düğmeleri gizle) BİRLİKTE
   taşınmalı: biri geride kalırsa aradaki genişliklerde hiç gezinti
   kalmayan bir bant oluşur. */
@media (max-width:1240px){
  .ust nav{display:none}
}
@media (max-width:900px){
  .satir,.satir.ters{grid-template-columns:minmax(0,1fr)}
  .satir.ters .gv{order:0}
  .mimari{grid-template-columns:minmax(0,1fr)}
  .mimari .bag{display:none}
  .foto-uclu{grid-template-columns:minmax(0,1fr)}
  .maket-ist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .bento{grid-template-columns:minmax(0,1fr);gap:14px}
  .hucre,.hucre.genis,.hucre.orta-h{grid-column:span 1;padding:26px 22px}
  .fiyatlar,.rakamlar{grid-template-columns:minmax(0,1fr)}
  .rakamlar>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .rakamlar>div:last-child{border-bottom:0}
  .alt .kolonlar{grid-template-columns:minmax(0,1fr)}
  .sar{padding:0 18px}
  .kahraman .eylem .dug{width:100%}
  .toast-alan{left:14px;right:14px;bottom:14px;max-width:none}
  .uye-form{padding:24px 22px}
  .fiyatlar{gap:16px}
  .fiyat{padding:30px 24px}
  /* Dar ekranda balon kutunun sağına taşmasın. */
  .ipuc-balon{max-width:min(246px,68vw)}
  .donem-sec{width:100%;justify-content:center}
  .donem-sec button{flex:1;justify-content:center;padding:10px 12px;font-size:13px}
  .donem-sec .tasarruf{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* =====================================================================
   MOBİL SERTLEŞTİRME
   Amaç: 320px genişliğe kadar yatay kaydırma olmadan, dokunmatikte
   rahat kullanılabilir bir yüzey.
   ===================================================================== */

/* ---------- Mobil gezinti düğmesi ---------- */
.menu-dug{
  display:none;width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-1);
  border:1px solid var(--cizgi-koyu);background:var(--beyaz);box-shadow:var(--y-1);
  place-items:center;gap:5px;flex-direction:column;
}
.menu-dug span{
  display:block;width:17px;height:2px;border-radius:2px;background:var(--murekkep);
  transition:transform var(--hiz),opacity var(--hiz);
}
.menu-dug[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-dug[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Mobil menü paneli ---------- */
.mobil-menu{
  position:fixed;inset:var(--ust-yuk) 0 0;z-index:65;overflow-y:auto;
  background:var(--beyaz);padding:22px 26px calc(34px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:26px;
  animation:menu-in .22s cubic-bezier(.22,1,.36,1);
}
/* DİKKAT: `hidden` özniteliği tarayıcının display:none kuralını uygular, ama
   yukarıdaki `display:flex` yazar stili onu ezer — menü kapalıyken bile açık
   görünür. Öznitelik seçicisiyle açıkça geçersiz kılınması ŞART. */
.mobil-menu[hidden]{display:none}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobil-menu nav{display:flex;flex-direction:column}
.mobil-menu nav a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 4px;font-size:17px;font-weight:540;color:var(--murekkep);
  border-bottom:1px solid var(--cizgi);
}
.mobil-menu nav a svg{width:17px;height:17px;color:var(--metin-3)}
.mobil-menu nav a:active{color:var(--marka)}
.mobil-eylem{display:flex;flex-direction:column;gap:10px}
body.menu-acik{overflow:hidden}

/* Bu ikisi .ust nav ile AYNI eşikte olmalı — bkz. yukarıdaki not. */
@media (max-width:1240px){
  .menu-dug{display:grid}
  .masaustu{display:none}
}
@media (min-width:1241px){
  .mobil-menu{display:none!important}
}

/* ---------- Uzun metin taşma koruması ----------
   Lisans anahtarları, e-posta adresleri ve alan adları dar ekranda
   kutudan taşıp yatay kaydırma yaratıyordu. */
body{overflow-wrap:break-word}
.tek,.kod,.maket-tablo .gv b,.maket-tablo .gv small,
.uye-form .dip,.alt nav a,.veri-satir b{overflow-wrap:anywhere}

/* ---------- Dokunmatik hedef boyutları ---------- */
@media (hover:none){
  .dil a{padding:8px 14px}
  .sss summary{padding:20px}
  .alt nav a{padding:4px 0}
}

/* ---------- iOS'ta form yakınlaştırmasını önle ----------
   16px altındaki alanlarda Safari otomatik yakınlaştırır ve düzeni bozar. */
@media (max-width:820px){
  .giris,.ara-kutu input{font-size:16px}
}

/* ---------- Güvenli alan (çentikli ekranlar) ---------- */
@media (max-width:900px){
  .sar{padding-left:max(18px,env(safe-area-inset-left));
       padding-right:max(18px,env(safe-area-inset-right))}
  .alt{padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Küçük ekran ince ayarları ---------- */
@media (max-width:520px){
  :root{--ust-yuk:64px}
  .marka .ad b{font-size:15px}
  .marka .ad small{font-size:9px;letter-spacing:.14em}
  .duyuru{font-size:12.5px;padding:5px 13px 5px 6px;margin-bottom:24px}
  .duyuru b{font-size:9.5px;padding:2px 8px}
  .kahraman .not{gap:12px;font-size:12.5px}
  .bolum-bas{margin-bottom:32px}
  .cagri{border-radius:var(--r-3)}
  .sss summary{font-size:15px;gap:12px}
  .sss .gv{font-size:14px;padding:0 20px 20px}
  .fiyat .tutar b{font-size:32px}
  .rakamlar b{font-size:28px}
  .foto-sar .yazi{left:18px;right:18px;bottom:16px}
  .foto-sar .yazi b{font-size:15.5px}
}

/* ---------- Panel maketi: dar ekranda okunur kalsın ---------- */
@media (max-width:640px){
  .maket{border-radius:var(--r-2)}
  .maket-cerceve{padding:10px 13px}
  .maket-cerceve .url{font-size:10.5px;padding:4px 10px;
    max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .maket-ana{padding:14px}
  .maket-ist{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .maket-ist>div{padding:10px}
  .maket-ist b{font-size:16px}
  .maket-tablo .sat{gap:9px;padding:10px 12px}
  .maket-tablo .gv b{font-size:11px}
  .maket-tablo .gv small{font-size:10px}
  .maket-tablo .nk{width:22px;height:22px;flex:0 0 22px;border-radius:6px}
  .maket-tablo .nk svg{width:11px;height:11px}
  .pul{font-size:9.5px;padding:3px 8px}
  .sahne::after{display:none}
}

/* ---------- Üyelik: küçük ekranda dikey nefes ---------- */
@media (max-width:520px){
  .uye-form{padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px))}
  .uye-form .ic{padding:24px 0}
  .uye-form h1{font-size:26px}
  .uye-form .alt-y{font-size:14.5px;margin-bottom:26px}
}

/* ---------- Yatay kaydırmaya karşı son emniyet ---------- */
html,body{max-width:100%}
.kahraman,.bolum{overflow-x:clip}


/* ── Yasal belge sayfaları ────────────────────────────────────────── */
.yasal-sayfa{padding:34px 0 64px}
.sinir.dar{max-width:820px;margin:0 auto;padding:0 20px}
.yol-izi{font-size:13px;opacity:.72;margin-bottom:14px}
.yol-izi a{color:inherit;text-decoration:none}
.yol-izi a:hover{text-decoration:underline}
.yasal-govde{line-height:1.75;font-size:15px}
.yasal-govde h2{font-size:19px;margin:32px 0 10px;padding-top:18px;
                border-top:1px solid var(--cizgi,rgba(128,128,128,.22))}
.yasal-govde h2:first-child{border-top:0;padding-top:0;margin-top:18px}
.yasal-govde ul{margin:10px 0 10px 20px}
.yasal-govde li{margin:6px 0}
.yasal-govde p{margin:10px 0}
.tablo-yasal{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.tablo-yasal th,.tablo-yasal td{padding:9px 12px;text-align:left;vertical-align:top;
     border-bottom:1px solid var(--cizgi,rgba(128,128,128,.18))}
.tablo-yasal th[scope=row]{width:38%;font-weight:600;opacity:.85}
.eksik-alan{background:#FFF3CD;color:#7A5B00;padding:1px 6px;border-radius:4px;
     font-size:13px;font-weight:600}
@media(prefers-color-scheme:dark){.eksik-alan{background:#4A3B00;color:#FFD666}}
.kart.tikla{display:block;text-decoration:none;color:inherit;transition:transform .15s}
.kart.tikla:hover{transform:translateY(-2px)}
@media(max-width:640px){.tablo-yasal th[scope=row]{width:auto}}

/* ═══════════════════════════════════════════════════════════════════
   ÜRÜNLER AÇILIR MENÜSÜ

   Sistem üç ayrı ürün sunuyor; tek bir başlık altında toplanınca ikisi
   görünmez kalıyordu. Açılır menü hem yer kazandırır hem de ürünleri
   birbirine eşit ağırlıkta gösterir.

   Hem :hover hem [aria-expanded] ile açılır: fare kullanıcısı üstüne
   gelince, klavye/dokunmatik kullanıcısı tıklayınca. Yalnız :hover
   olsaydı dokunmatik cihazda hiç açılmazdı.
   ═══════════════════════════════════════════════════════════════════ */
.urun-menu{position:relative}
.urun-dug{
  display:flex;align-items:center;gap:5px;padding:8px 14px;border:0;background:none;
  border-radius:var(--r-1);font-size:14.5px;font-weight:520;color:var(--metin-2);
  font-family:inherit;cursor:pointer;transition:color var(--hiz),background var(--hiz);
}
.urun-dug:hover,.urun-menu:hover .urun-dug,
.urun-dug[aria-expanded=true]{color:var(--murekkep);background:var(--zemin-3)}
.urun-dug svg{transition:transform var(--hiz)}
.urun-menu:hover .urun-dug svg,
.urun-dug[aria-expanded=true] svg{transform:rotate(180deg)}

.urun-acilir{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:330px;
  background:var(--zemin);border:1px solid var(--cizgi);border-radius:var(--r-2);
  box-shadow:var(--golge-2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--hiz),transform var(--hiz),visibility var(--hiz);
}
.urun-menu:hover .urun-acilir,
.urun-dug[aria-expanded=true]+.urun-acilir{opacity:1;visibility:visible;transform:none}

.urun-acilir a{
  display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:var(--r-1);
  text-decoration:none;transition:background var(--hiz);
}
.urun-acilir a:hover{background:var(--zemin-2)}
.urun-acilir .ik{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;
}
.urun-acilir b{
  display:block;font-size:14px;font-weight:600;color:var(--murekkep);margin-bottom:2px;
}
.urun-acilir small{
  display:block;font-size:12.5px;line-height:1.5;color:var(--metin-2);font-weight:400;
}

/* Mobil menüde ürünler ayrı bir grup olarak listelenir. */
.mobil-menu .mobil-baslik{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--metin-3);padding:18px 4px 6px;
}
.mobil-menu .mobil-baslik:first-child{padding-top:4px}

/* ═══════════════════════════════════════════════════════════════════
   ÜRÜN SAYFALARI

   Kendi kart sistemini kurmak yerine anasayfanın bento ızgarasını
   kullanır: ilk denemede uydurma sınıflar (.kartlar/.kart) yazılmış,
   CSS'te karşılığı olmadığı için sayfa stilsiz düz bir listeye
   dönmüştü. Buradaki kurallar yalnız bentonun EKSİĞİNİ tamamlar.
   ═══════════════════════════════════════════════════════════════════ */

/* Tıklanabilir hücre (ürün kartı) */
a.hucre.ur-bag{display:block;text-decoration:none;color:inherit}
a.hucre.ur-bag h3{color:var(--murekkep)}
.ur-git{
  display:inline-flex;align-items:center;gap:5px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:var(--marka);
}
.ur-git svg{transition:transform var(--hiz)}
a.hucre.ur-bag:hover .ur-git svg{transform:translateX(3px)}

/* Numaralı adımlar */
.ur-adimlar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
}
.ur-adim{
  position:relative;background:var(--beyaz);border:1px solid var(--cizgi);
  border-radius:var(--r-3);padding:28px 26px;box-shadow:var(--y-1);
  transition:transform var(--yumusak),box-shadow var(--yumusak),border-color var(--hiz);
}
.ur-adim:hover{transform:translateY(-4px);box-shadow:var(--y-3);border-color:var(--marka-cizgi)}
.ur-adim .sira{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  color:#fff;font-size:15px;font-weight:700;margin-bottom:18px;box-shadow:var(--y-2);
}
.ur-adim h3{font-size:17px;margin-bottom:9px;letter-spacing:-.024em}
.ur-adim p{font-size:14px;color:var(--metin-2);line-height:1.65;text-wrap:pretty}

/* "YENİ" rozeti — dar padding'de İ harfi kırpılıyordu. */
.urun-yeni{
  display:inline-block;background:var(--uyari);color:#fff;border-radius:99px;
  padding:2px 9px 3px;font-size:10.5px;font-weight:700;font-style:normal;
  line-height:1.35;margin-left:6px;vertical-align:middle;letter-spacing:.03em;
  white-space:nowrap;
}

@media(max-width:900px){
  .ur-adimlar{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   DOKÜMANTASYON
   Kenar menüsü + uzun metin. .yasal-govde tipografisini yeniden kullanır;
   ayrı bir metin ölçeği tanımlamak ikisini zamanla ayrıştırırdı.
   ══════════════════════════════════════════════════════════════════════ */
.dok{padding:26px 0 72px}
.dok-sar{display:grid;grid-template-columns:250px minmax(0,1fr);gap:38px;align-items:start}
.dok-yan{position:sticky;top:84px;max-height:calc(100vh - 108px);overflow-y:auto;
  padding-right:6px;font-size:14px}
.dok-yan h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;opacity:.55;
  margin:18px 0 7px;font-weight:650}
.dok-yan h4:first-child{margin-top:0}
.dok-yan a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  color:inherit;text-decoration:none;opacity:.82;line-height:1.35}
.dok-yan a:hover{background:color-mix(in srgb, currentColor 7%, transparent);opacity:1}
.dok-yan a.etkin{background:color-mix(in srgb, var(--marka) 12%, transparent);
  color:var(--marka);opacity:1;font-weight:600}
.dok-yan a svg{flex:0 0 auto;opacity:.75}
.dok-yan a.etkin svg{opacity:1}

.dok-govde{min-width:0}
/* Ön yüzdeki kavşak sayfası tek sütundur: bölüm menüsü panele taşındı,
   burada bağlanacak kenar menüsü kalmadı. Metin genişliği okunabilirlik
   için sınırlanır — .dok-sar ızgarası olmadan gövde tüm sarmalayıcıya
   yayılır ve satırlar 1200px'e kadar uzardı. */
.dok-tek{max-width:820px;margin:0 auto}
/* Kavşak sayfasının alt eylem çifti. */
.dok-cta{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 8px}
.dok-govde h1{font-size:31px;letter-spacing:-.03em;margin:0 0 8px}
.dok-govde .alt-y{font-size:15.5px;opacity:.72;margin:0 0 26px}
.dok-govde h2{font-size:21px;letter-spacing:-.02em;margin:38px 0 12px;padding-top:22px;
  border-top:1px solid var(--cizgi)}
.dok-govde h2:first-of-type{border-top:0;padding-top:0}
.dok-govde h3{font-size:16.5px;margin:24px 0 8px}
.dok-govde p{margin:11px 0;line-height:1.75;font-size:15px}
.dok-govde ul,.dok-govde ol{margin:11px 0 11px 22px;line-height:1.75;font-size:15px}
.dok-govde li{margin:6px 0}
.dok-govde a{color:var(--marka)}

/* Kod bloğu. Uzun komutlar taşmasın: kendi içinde kaydırılır. */
.dok-kod{background:var(--kod-zemin,#0f172a);color:#e2e8f0;border-radius:10px;
  padding:14px 16px;overflow-x:auto;font-family:var(--tek-yazi,ui-monospace,monospace);
  font-size:13px;line-height:1.65;margin:12px 0;white-space:pre}
.dok-kod .yorum{color:#7c8ba1}
.dok-kod .vurgu{color:#7dd3fc}
:root[data-tema="koyu"] .dok-kod{background:#0b1220}

/* Satır içi kod */
.dok-govde code{background:color-mix(in srgb, currentColor 9%, transparent);
  padding:2px 6px;border-radius:5px;font-family:var(--tek-yazi,ui-monospace,monospace);
  font-size:.88em}

/* Adım listesi */
.dok-adim{counter-reset:dokadim;list-style:none;margin:16px 0 16px 0;padding:0}
.dok-adim>li{counter-increment:dokadim;position:relative;padding:0 0 4px 42px;margin:0 0 18px}
.dok-adim>li::before{content:counter(dokadim);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--marka);color:#fff;font-size:13px;font-weight:700}
.dok-adim>li>b{display:block;margin-bottom:3px;font-size:15.5px}

/* Karşılaştırma / başvuru tabloları */
.dok-tablo{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.dok-tablo th,.dok-tablo td{text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--cizgi);vertical-align:top}
.dok-tablo th{font-weight:650;font-size:12.5px;letter-spacing:.03em;
  text-transform:uppercase;opacity:.6}
.dok-tablo td code{white-space:nowrap}

/* Bölüm kartları (kavşak sayfası) */
.dok-kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px;margin:16px 0 6px}
.dok-kart{display:block;padding:17px 18px;border:1px solid var(--cizgi);border-radius:13px;
  text-decoration:none;color:inherit;transition:border-color .16s,transform .16s}
.dok-kart:hover{border-color:var(--marka);transform:translateY(-2px)}
.dok-kart .ik{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--marka) 12%, transparent);color:var(--marka);
  margin-bottom:11px}
.dok-kart b{display:block;font-size:15px;margin-bottom:3px}
.dok-kart span{font-size:13px;opacity:.72;line-height:1.55}

/* Alt gezinme */
.dok-gez{display:flex;gap:12px;justify-content:space-between;margin-top:44px;
  padding-top:22px;border-top:1px solid var(--cizgi)}
.dok-gez a{flex:1;max-width:48%;padding:13px 16px;border:1px solid var(--cizgi);
  border-radius:11px;text-decoration:none;color:inherit;font-size:14px}
.dok-gez a:hover{border-color:var(--marka)}
.dok-gez a small{display:block;font-size:11.5px;opacity:.6;margin-bottom:2px}
.dok-gez a.sag{margin-left:auto;text-align:right}

@media(max-width:900px){
  .dok-sar{grid-template-columns:1fr;gap:22px}
  .dok-yan{position:static;max-height:none;border-bottom:1px solid var(--cizgi);
    padding-bottom:16px}
  .dok-govde h1{font-size:26px}
}
@media(max-width:520px){
  .dok-gez{flex-direction:column}
  .dok-gez a,.dok-gez a.sag{max-width:100%;text-align:left}
}

/* ══════════════════════════════════════════════════════════════════════
   CANLI TUR — kendiliğinden oynayan tanıtım bölümleri

   Video değil: her sahne HTML/CSS. Gerekçesi gorunum/parca/tur.php'nin
   başında. Oynatma listesi solda, sahne sağda; ilerleme çubuğu bölümün
   kendi süresiyle (--sure, JS tarafından yazılır) dolar.
   ══════════════════════════════════════════════════════════════════════ */
.tur{display:grid;grid-template-columns:302px minmax(0,1fr);gap:20px;align-items:start}

/* ── Oynatma listesi ── */
.tur-yan{display:flex;flex-direction:column;gap:8px}
.tur-og{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:13px 14px;border:1px solid var(--cizgi);border-radius:var(--r-3);
  background:var(--zemin);color:inherit;cursor:pointer;position:relative;
  overflow:hidden;transition:border-color .18s,background .18s,transform .18s}
.tur-og:hover{border-color:var(--marka-cizgi);transform:translateX(2px)}
.tur-og .nk{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;
  place-items:center;background:var(--zemin-3);color:var(--metin-2);transition:.18s}
.tur-og .gv{min-width:0}
.tur-og b{display:block;font-size:14.5px;letter-spacing:-.012em;margin-bottom:2px}
.tur-og small{display:block;font-size:12.5px;color:var(--metin-3);line-height:1.5}
.tur-og.etkin{border-color:var(--marka-cizgi);background:var(--marka-sis)}
.tur-og.etkin .nk{background:var(--marka);color:#fff}

/* İlerleme çubuğu — yalnız etkin bölümde dolar. Süre bölüm başına ayrı
   (bkz. tur_bolumler()'deki 'sure'); tek süre kısa sahneyi bekletiyordu. */
.tur-ilerle{position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:color-mix(in srgb, var(--marka) 16%, transparent);opacity:0}
.tur-og.etkin .tur-ilerle{opacity:1}
.tur-ilerle i{display:block;height:100%;width:0;background:var(--marka)}
.tur-og.etkin .tur-ilerle i{animation:tur-ilerle var(--sure,7000ms) linear forwards}
@keyframes tur-ilerle{from{width:0}to{width:100%}}

/* ── Sahne ── */
.tur-sahne{position:relative;border:1px solid var(--cizgi);border-radius:var(--r-4);
  background:var(--zemin-2);padding:22px;min-height:404px;
  display:flex;flex-direction:column;justify-content:center}
.tur-kare[hidden]{display:none}

/* ADIMLI BELİRİŞ.
   Sahnedeki her öğe satır içi --s (adım sırası) taşır; seçici de bunu
   yakalar. Öğe başına ayrı sınıf tanımlamak altı sahne × ~6 adım = kırk
   küsur kural demekti; --s zaten tek gerçek ve seçici onu okuyor. */
.tur-kare [style*="--s"]{opacity:0;transform:translateY(7px)}
.tur-kare.etkin [style*="--s"]{
  animation:tur-gir .5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--s) * .52s)}
@keyframes tur-gir{to{opacity:1;transform:none}}

/* ── Uçbirim ── */
.tur-uc{border-radius:var(--r-3);overflow:hidden;background:#0f172a;
  border:1px solid rgba(255,255,255,.08)}
.tur-uc.dar{margin-top:10px}
.tur-uc-bas{display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07)}
.tur-uc-bas i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.tur-uc-bas span{margin-left:8px;font-size:11.5px;color:#94a3b8}
.tur-uc-gv{padding:14px 16px;font-family:var(--tek,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:12.8px;line-height:1.9;color:#e2e8f0}
.tur-sat{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tur-sat .ist{color:#64748b;margin-right:8px}
.tur-sat.sol{color:#8fa0b6}
.tur-sat.iyi{color:#5eead4}

/* Daktilo. Tek satırda çalışır: genişlik 0'dan açılır, bu yüzden nowrap
   ve inline-block şart. steps() imleç sıçramasını gerçekçi kılar. */
.yaz{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  border-right:2px solid #5eead4;width:0}
.tur-kare.etkin .yaz{animation:tur-yaz 1.5s steps(30,end) forwards,
  tur-imlec .7s step-end infinite;animation-delay:calc(var(--s) * .52s),0s}
@keyframes tur-yaz{to{width:100%}}
@keyframes tur-imlec{50%{border-color:transparent}}

/* Süreç çubuğu */
.tur-bar{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.1);
  overflow:hidden;margin:5px 0}
.tur-bar i{display:block;height:100%;width:0;border-radius:4px;background:#5eead4}
.tur-kare.etkin .tur-bar i{animation:tur-dolu 1.7s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--s) * .52s)}
@keyframes tur-dolu{to{width:100%}}

/* ── Sahne parçaları ── */
.tur-ikili{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.tur-kart{border:1px solid var(--cizgi);border-radius:var(--r-3);background:var(--zemin);
  padding:15px 16px}
.tur-kart-bas{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.tur-kart-bas .nk{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;
  place-items:center;background:var(--marka-sis);color:var(--marka)}
.tur-kart-bas b{font-size:14px}
.tur-not{display:flex;gap:8px;margin:12px 0 0;font-size:12.8px;line-height:1.6;
  color:var(--metin-3)}
.tur-not svg{flex:0 0 auto;margin-top:2px}

.tur-akis{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.tur-akis.dikey{flex-direction:column;gap:12px}
.tur-kutu{flex:0 1 210px;text-align:center;padding:18px 16px;border-radius:var(--r-3);
  border:1px dashed var(--cizgi);background:var(--zemin)}
.tur-kutu.iyi{border-style:solid;border-color:var(--turkuaz);background:var(--turkuaz-sis)}
.tur-kutu .nk{width:38px;height:38px;margin:0 auto 9px;border-radius:11px;display:grid;
  place-items:center;background:var(--zemin-3);color:var(--metin-2)}
.tur-kutu.iyi .nk{background:var(--turkuaz);color:#fff}
.tur-kutu b{display:block;font-size:14px;margin-bottom:2px}
.tur-kutu small{font-size:12px;color:var(--metin-3)}
.tur-ok{color:var(--marka);display:grid;place-items:center}
.tur-ok.dondur svg{transform:rotate(90deg)}

.tur-blok{width:100%;max-width:430px;border:1px solid var(--cizgi);border-radius:var(--r-3);
  background:var(--zemin);padding:12px 14px}
.tur-blok.iyi{border-color:var(--turkuaz)}
.tur-blok .et-blok{display:block;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--metin-3);margin-bottom:7px}
.tur-blok code{display:block;white-space:pre;overflow-x:auto;font-size:11.4px;
  line-height:1.62;color:var(--metin-2);
  font-family:var(--tek,ui-monospace,SFMono-Regular,Menlo,monospace)}

.tur-maket{margin:0}
.tur-koltuk{display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;margin-bottom:10px;border-radius:var(--r-2);background:var(--zemin-3);
  font-size:13px}
.tur-koltuk b{font-size:15px}
/* Koltuk sayacı: iki rakam üst üste durur, ikincisi bırakma anında görünür.
   JS ile metin değiştirmek yerine CSS geçişi — sahne yeniden oynatıldığında
   kendiliğinden başa döner. */
.tur-say{position:relative;display:inline-block;min-width:.62em;text-align:right}
.tur-say i{font-style:normal}
.tur-say i:last-child{position:absolute;inset:0;opacity:0;color:var(--turkuaz)}
.tur-kare.etkin .tur-say i:first-child{animation:tur-sol .4s 3.1s forwards}
.tur-kare.etkin .tur-say i:last-child{animation:tur-gel .4s 3.1s forwards}
@keyframes tur-sol{to{opacity:0}}
@keyframes tur-gel{to{opacity:1}}
/* Bırakılan koltuğun satırı soluklaşır. */
.tur-kare.etkin .sat.birakildi{animation:tur-birak .5s 3s forwards}
@keyframes tur-birak{to{opacity:.4}}

/* ── Oynat / duraklat ── */
.tur-dug{position:absolute;right:14px;bottom:12px;display:inline-flex;align-items:center;
  gap:7px;padding:7px 13px;border-radius:var(--r-tam);border:1px solid var(--cizgi);
  background:var(--zemin);color:var(--metin-2);font-size:12.5px;cursor:pointer;
  transition:border-color .16s,color .16s}
.tur-dug:hover{border-color:var(--marka);color:var(--marka)}
.tur-dug .ikon-oynat{display:grid;place-items:center;width:14px;height:14px}
/* Oynarken "duraklat" simgesi: iki çubuk. Ayrı ikon eklemek yerine
   mevcut ok ikonu gizlenip çubuklar çizilir. */
.tur:not(.durdu) .tur-dug .ikon-oynat svg{display:none}
.tur:not(.durdu) .tur-dug .ikon-oynat::before{content:"";width:9px;height:11px;
  border-left:3px solid currentColor;border-right:3px solid currentColor}

/* Duraklatınca HER şey donar: ilerleme çubuğu da sahne animasyonu da. */
.tur.durdu .tur-ilerle i,
.tur.durdu .tur-kare [style*="--s"],
.tur.durdu .tur-kare .yaz,
.tur.durdu .tur-kare .tur-bar i,
.tur.durdu .tur-kare .tur-say i,
.tur.durdu .tur-kare .sat.birakildi{animation-play-state:paused}

@media(max-width:960px){
  .tur{grid-template-columns:1fr}
  /* Listede yatay kaydırma: altı bölümün başlığı dikey durunca sahne
     ekranın çok altına iniyordu. */
  .tur-yan{flex-direction:row;overflow-x:auto;padding-bottom:4px;
    scroll-snap-type:x mandatory}
  .tur-og{flex:0 0 236px;scroll-snap-align:start}
  .tur-sahne{min-height:0;padding:16px}
  .tur-dug{position:static;margin:14px 0 0 auto}
}
@media(max-width:520px){
  .tur-og{flex:0 0 200px}
  .tur-uc-gv{font-size:11.6px;padding:12px}
  .tur-akis{gap:12px}
}

/* Hareket azaltma: otomatik oynatma JS tarafında da kapatılır; burada
   sahne son hâliyle, animasyonsuz durur. */
@media(prefers-reduced-motion:reduce){
  .tur-kare [style*="--s"],
  .tur-kare.etkin [style*="--s"]{opacity:1;transform:none;animation:none}
  .tur-kare.etkin .yaz{animation:none;width:auto;border-right:0}
  .tur-kare.etkin .tur-bar i{animation:none;width:100%}
  .tur-og.etkin .tur-ilerle i{animation:none;width:100%}
  .tur-kare.etkin .tur-say i:first-child{animation:none;opacity:0}
  .tur-kare.etkin .tur-say i:last-child{animation:none;opacity:1}
  .tur-kare.etkin .sat.birakildi{animation:none;opacity:.4}
  .tur-og:hover{transform:none}
}