/* Calpera - koyu yesil tema */
:root{
  --zemin:#0a0f0c;
  --zemin-2:#0f1613;
  --kart:#131c17;
  --kart-2:#18231d;
  --cizgi:#20302a;
  --cizgi-2:#2b3f36;
  --metin:#e9f2ec;
  --metin-2:#8fa89a;
  --metin-3:#6b8578;
  --yesil:#2fd07f;
  --yesil-2:#7ff0b8;
  --yesil-koyu:#1d8f57;
  --uyari:#f0b45e;
  --hata:#f07575;
  --r:14px;
  --r-s:10px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--zemin);
  color:var(--metin);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--yesil);text-decoration:none;transition:color .15s}
a:hover{color:var(--yesil-2)}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.025em;font-weight:660;text-wrap:balance}
h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:0 0 .5em}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:2.6em 0 .6em}
h3{font-size:1.15rem;letter-spacing:-.012em;margin:2em 0 .5em}
h4{font-size:1rem;margin:1.6em 0 .4em}
/* Bir bolumun ilk basligi ustten bosluk almaz; bosluk bolumun kendisinde. */
section > h1:first-child, section > h2:first-child, section > h3:first-child,
main > h1:first-child, main > h2:first-child,
.kart > h2:first-child, .kart > h3:first-child{margin-top:0}
p{margin:0 0 1.1em;max-width:68ch}
.kucuk{font-size:.88rem;color:var(--metin-2);line-height:1.65}
.vurgu{color:var(--yesil)}
.sonmuk{color:var(--metin-2)}

/* --- ust menu --- */
.ust{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--zemin) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--cizgi);
}
.ust-ic{
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem clamp(1rem,4vw,2rem);
}
.marka{display:flex;align-items:center;gap:.6rem;font-weight:680;font-size:1.1rem;color:var(--metin)}
.marka:hover{color:var(--metin)}
.marka-kutu{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(140deg,var(--yesil),var(--yesil-koyu));
  display:grid;place-items:center;color:#04140c;font-weight:800;font-size:1rem;
  box-shadow:0 0 22px color-mix(in srgb,var(--yesil) 30%,transparent);
}
.ust nav{display:flex;align-items:center;gap:1.4rem}
.ust nav a{color:var(--metin-2);font-size:.93rem}
.ust nav a:hover{color:var(--metin)}
@media(max-width:760px){.ust nav a:not(.dugme){display:none}}

/* --- butonlar --- */
.dugme{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:999px;
  background:var(--yesil);color:#04140c;font-weight:640;font-size:.97rem;
  border:none;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .2s,filter .15s;
  box-shadow:0 6px 24px -8px color-mix(in srgb,var(--yesil) 60%,transparent);
}
.dugme:hover{color:#04140c;filter:brightness(1.07);transform:translateY(-1px)}
.dugme-kucuk{padding:.5rem 1.15rem;font-size:.9rem;box-shadow:none}
.ust .dugme{color:#04140c;font-weight:680}
.ust .dugme:hover{color:#04140c}
.dugme-ikincil{
  background:transparent;color:var(--metin);
  border:1px solid var(--cizgi-2);box-shadow:none;
}
.dugme-ikincil:hover{color:var(--metin);background:var(--kart);border-color:var(--yesil-koyu)}
.dugme-tehlike{background:transparent;color:var(--hata);border:1px solid color-mix(in srgb,var(--hata) 45%,transparent);box-shadow:none}
.dugme-tehlike:hover{color:var(--hata);background:color-mix(in srgb,var(--hata) 10%,transparent)}

/* --- yerlesim --- */
.sarmal{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2rem)}
/* Dar sayfalar daraltilmaz, yalnizca metin olcusu sinirlanir: sol kenar
   ust menudeki markayla ayni hizada kalir, icerik sola kaymaz. */
.dar > *, .hukuki > *{max-width:780px}
.dar > .tablo-sarmal, .hukuki > .tablo-sarmal{max-width:100%}
.bolum{padding-top:clamp(3rem,6vw,5rem)}
section[id]{scroll-margin-top:92px}

/* --- kahraman --- */
.kahraman{display:grid;gap:3rem;align-items:center}
@media(min-width:940px){.kahraman{grid-template-columns:1.08fr .92fr;gap:4rem}}
.rozet{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem 1rem;border:1px solid var(--cizgi-2);border-radius:999px;
  font-size:.83rem;color:var(--metin-2);margin-bottom:1.6rem;background:var(--kart);
}
.rozet::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yesil);box-shadow:0 0 10px var(--yesil)}
.spot{font-size:1.08rem;color:var(--metin-2);max-width:54ch;margin-bottom:1.8rem}
.kahraman-butonlar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem}

/* --- konusma gorseli --- */
.konusma{
  background:linear-gradient(165deg,var(--kart),var(--zemin-2));
  border:1px solid var(--cizgi);border-radius:20px;padding:1.4rem;
  box-shadow:0 30px 70px -40px #000;
}
.konusma-ust{display:flex;align-items:center;gap:.6rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--cizgi)}
.canli{width:8px;height:8px;border-radius:50%;background:var(--yesil);animation:nabiz 2s infinite}
@keyframes nabiz{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--yesil) 60%,transparent)}50%{opacity:.75;box-shadow:0 0 0 7px transparent}}
.balon{padding:.65rem .95rem;border-radius:15px;margin-bottom:.55rem;max-width:86%;font-size:.93rem;line-height:1.55}
.balon-pera{background:color-mix(in srgb,var(--yesil) 13%,var(--kart-2));border:1px solid color-mix(in srgb,var(--yesil) 22%,transparent);border-bottom-left-radius:5px}
.balon-siz{background:var(--kart-2);border:1px solid var(--cizgi);margin-left:auto;border-bottom-right-radius:5px;color:var(--metin-2)}
.konusan{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--metin-3);margin:.7rem 0 .25rem}
.konusan.sag{text-align:right}

/* --- kartlar --- */
.izgara{display:grid;gap:1.1rem}
@media(min-width:700px){.izgara-2{grid-template-columns:repeat(2,1fr)}.izgara-3{grid-template-columns:repeat(3,1fr)}}
.kart{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1.6rem;transition:border-color .2s,transform .2s;
}
.kart:hover{border-color:var(--cizgi-2);transform:translateY(-2px)}
.kart h3{margin-bottom:.45rem}
.kart p:last-child{margin-bottom:0}
.kart-ikon{
  width:36px;height:36px;border-radius:10px;margin-bottom:1rem;
  background:color-mix(in srgb,var(--yesil) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--yesil) 25%,transparent);
  display:grid;place-items:center;color:var(--yesil);font-size:1.05rem;
}

/* --- adimlar --- */
.adim{display:flex;gap:1.2rem;align-items:flex-start;margin-bottom:2rem}
.adim-no{
  flex:0 0 2.1rem;height:2.1rem;border-radius:50%;
  background:color-mix(in srgb,var(--yesil) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--yesil) 35%,transparent);
  color:var(--yesil);display:grid;place-items:center;font-weight:700;font-size:.88rem;
}
.adim h3{margin-bottom:.25rem}
.adim p{margin-bottom:0}

/* --- akis serisi --- */
.akis{display:grid;gap:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.87rem;color:var(--metin-2)}
.akis-satir{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-s)}
.akis-ok{color:var(--yesil);flex:0 0 auto}

/* --- sss --- */
.sss{border-top:1px solid var(--cizgi)}
.sss details{border-bottom:1px solid var(--cizgi);padding:1.1rem 0}
.sss summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";color:var(--yesil);font-size:1.3rem;font-weight:400;line-height:1}
.sss details[open] summary::after{content:"−"}
.sss details p{margin:.9rem 0 0;color:var(--metin-2);font-size:.95rem}

/* --- tablo --- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.75rem .6rem;border-bottom:1px solid var(--cizgi);vertical-align:top}
th{color:var(--metin-3);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}
.tablo-sarmal{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- form --- */
label{display:block;font-size:.88rem;color:var(--metin-2);margin-bottom:.4rem}
input,select,textarea{
  width:100%;padding:.75rem .95rem;border-radius:var(--r-s);
  border:1px solid var(--cizgi-2);background:var(--zemin-2);color:var(--metin);
  font-size:.98rem;font-family:inherit;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--yesil);box-shadow:0 0 0 3px color-mix(in srgb,var(--yesil) 15%,transparent)}
.alan{margin-bottom:1.15rem}
.satir{display:grid;gap:1rem}
@media(min-width:640px){.satir-2{grid-template-columns:1fr 1fr}.satir-3{grid-template-columns:1fr 1fr 1fr}}
.onay{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.1rem}
.onay input{width:auto;margin-top:.35rem;flex:0 0 auto;accent-color:var(--yesil)}
.onay label{margin:0;color:var(--metin);font-size:.94rem;line-height:1.6}

/* --- etiket ve kutular --- */
.etiket{display:inline-block;padding:.22rem .7rem;border-radius:999px;font-size:.78rem;border:1px solid var(--cizgi-2);color:var(--metin-2)}
.etiket-acik{color:var(--yesil);border-color:color-mix(in srgb,var(--yesil) 45%,transparent);background:color-mix(in srgb,var(--yesil) 10%,transparent)}
.etiket-kapali{color:var(--metin-3)}
.etiket-uyari{color:var(--uyari);border-color:color-mix(in srgb,var(--uyari) 45%,transparent)}
.uyari-kutu{border-left:2px solid var(--uyari);background:var(--kart);padding:1.1rem 1.3rem;border-radius:0 var(--r-s) var(--r-s) 0;margin:1.6rem 0}
.bilgi-kutu{border-left:2px solid var(--yesil);background:var(--kart);padding:1.1rem 1.3rem;border-radius:0 var(--r-s) var(--r-s) 0;margin:1.6rem 0}
.uyari-kutu p:last-child,.bilgi-kutu p:last-child{margin-bottom:0}

/* --- hukuki sayfalar --- */
.hukuki h2{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--cizgi);font-size:1.45rem}
.hukuki h2:first-of-type{margin-top:2.4rem}
.hukuki h3{margin-top:2rem;font-size:1.05rem;color:var(--metin)}
.hukuki li{margin-bottom:.55rem;color:var(--metin-2)}
.hukuki p{color:var(--metin-2)}
.hukuki strong{color:var(--metin)}
.tamamlanacak{background:color-mix(in srgb,var(--uyari) 20%,transparent);color:var(--uyari);padding:.1rem .45rem;border-radius:5px;font-weight:600;font-size:.9em}
code{background:var(--kart-2);padding:.15rem .4rem;border-radius:5px;font-size:.88em;color:var(--yesil-2);border:1px solid var(--cizgi)}

/* --- video --- */
.video-kutu{
  border-radius:18px;overflow:hidden;border:1px solid var(--cizgi);
  background:var(--kart);box-shadow:0 30px 70px -45px #000;
}
.video-kutu video{width:100%;display:block}

/* --- alt bilgi --- */
.alt{border-top:1px solid var(--cizgi);background:var(--zemin-2);margin-top:5rem}
.alt-ic{max-width:var(--max);margin:0 auto;padding:3rem clamp(1rem,4vw,2rem) 2rem;display:grid;gap:2.5rem}
@media(min-width:760px){.alt-ic{grid-template-columns:1.2fr 1fr 1fr}}
.alt-baglantilar{display:flex;flex-direction:column;gap:.6rem;font-size:.9rem}
.alt-baglantilar a{color:var(--metin-2)}
.alt-baglantilar a:hover{color:var(--yesil)}
.alt-baslik{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--metin-3);margin-bottom:.9rem}
.alt-sonu{max-width:var(--max);margin:0 auto;padding:1.4rem clamp(1rem,4vw,2rem);border-top:1px solid var(--cizgi);font-size:.85rem;color:var(--metin-3)}

/* --- acik tema --- */
@media (prefers-color-scheme: light){
  :root{
    --zemin:#fbfdfc; --zemin-2:#f2f7f4; --kart:#ffffff; --kart-2:#f6faf8;
    --cizgi:#dfe9e3; --cizgi-2:#c9d9d0;
    --metin:#0f1a14; --metin-2:#4d6559; --metin-3:#728a7d;
    --yesil:#0f9a5a; --yesil-2:#0b7a46; --yesil-koyu:#0b7a46;
  }
  .dugme:not(.dugme-ikincil):not(.dugme-tehlike){color:#fff}
  .dugme:not(.dugme-ikincil):not(.dugme-tehlike):hover{color:#fff}
  .dugme-ikincil{color:var(--metin);border-color:var(--cizgi-2)}
  .dugme-ikincil:hover{color:var(--metin);background:var(--kart-2);border-color:var(--yesil)}
  .marka-kutu{color:#fff}
  .konusma{box-shadow:0 20px 50px -35px #93a89c}
}

/* tanitim videosu */
.video-sarmal{max-width:960px;margin:0 auto}
.tanitim-video{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--cizgi-2);
  background:#0a1210;box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* --- fiyat karti --- */
.fiyat-kart{
  max-width:440px;margin:0 auto;text-align:center;
  padding:2.2rem 1.8rem;
}
/* Sola hizali sayfalarda kart da sola yaslanir. */
.fiyat-kart.sol{margin-left:0;margin-right:0}
.fiyat-rakam{
  margin:0 0 .2rem;font-size:clamp(2.2rem,5vw,2.8rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;
}
.fiyat-alt{margin:0 0 1.8rem}
.fiyat-liste{
  margin:0 0 1.8rem;padding:0;list-style:none;
  text-align:left;display:inline-block;
}
.fiyat-liste li{
  position:relative;padding-left:1.6rem;line-height:1.8;
}
.fiyat-liste li::before{
  content:"";position:absolute;left:.25rem;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--yesil);
}
.fiyat-not{margin:1.4rem auto 0;max-width:36ch}
@media(max-width:520px){
  .fiyat-kart{padding:1.8rem 1.2rem}
  .fiyat-liste{display:block}
}

/* Ortalanmis bolumlerde paragraf olcusu de ortalanir. */
[style*="text-align:center"] > p, .ortali > p{margin-left:auto;margin-right:auto}

/* Panel basligi ve yan baglanti. */
.panel-ust{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;
}