/* Nexarith STEM — sayfa stilleri.
   Renk, tipografi ve boşluk değişkenleri css/tokens.css'te; burası sadece
   sayfa düzeni ve bileşenler. Tek breakpoint: 860px (ara adım 1100px).
   Tasarım referansı: design_handoff_nexarith_stem/README.md */

:root{
  color-scheme: light;   /* telefon koyu temadayken sayfayi ters cevirmesin */
  /* kablo renkleri — semalar.html ile birebir aynı olmalı */
  --w-vcc:#d63b3a; --w-gnd:#4a4945; --w-sig:#2b6fc4; --w-sig2:#c47c0a;
  --modA:#e3f6ef; --modAs:#1d9e75; --modAt:#0b5943;
  --modB:#f1efe8; --modBs:#8b8981; --modBt:#4a4945;
}
html{-webkit-text-size-adjust:100%}
/* Gizli demek gizli: .devam gibi display'i sinifla verilen kutular
   hidden ozniteligini tek basina yenmesin. */
[hidden]{display:none !important}
body{text-wrap:pretty}
.wrap{max-width:1160px;margin-inline:auto}
.wrap.dar{max-width:calc(760px + 2 * var(--pad-x))}
p{max-width:none}
em{font-style:italic;color:var(--terracotta)}
strong{color:var(--ink);font-weight:800}
h3{font-weight:600}
.btnler{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn--inline{width:auto}
.btn--primary{box-shadow:0 4px 0 #9c4224}
.btn--wa{box-shadow:0 3px 0 #24513c}
.btn--dark:hover{background:#000}
.chip--paper{background:var(--paper);color:var(--olive);letter-spacing:.12em;
  text-transform:uppercase;font-size:12px;font-weight:800}
.cip{display:inline-flex;align-items:center;padding:6px 11px;border-radius:9px;
  background:var(--cream-2);color:var(--soft);font:700 12.5px/1 var(--sans)}
.cip--kit{background:color-mix(in srgb,var(--kit,var(--olive)) 12%,white);
  color:var(--kit,var(--olive))}
.ph{border-radius:18px;text-transform:none;letter-spacing:.06em}
.foto{display:block;overflow:hidden;background:var(--cream)}
.foto img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- başlık çubuğu ---------- */
.nav{background:var(--paper);position:relative;z-index:20}
.nav__ic{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:20px}
.logo{display:flex;align-items:center;gap:11px;font:700 19px/1 var(--serif);
  color:var(--ink);letter-spacing:-.01em}
.logo:hover{text-decoration:none;color:var(--ink)}
.logo span:not(.logo__isaret){color:var(--olive)}
.logo__isaret{flex:none;width:30px;height:30px;border-radius:11px;
  background:linear-gradient(150deg,#e9a53c,var(--terracotta));
  display:flex;align-items:center;justify-content:center}
.logo__isaret::after{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--paper)}
.nav__links{display:flex;align-items:center;gap:30px;
  font:600 14.5px/1 var(--sans)}
.nav__links a{color:var(--body);font-weight:600}
.nav__links a:hover{color:var(--ink);text-decoration:none}
.nav__links .btn{font-weight:700;font-size:14px;min-height:44px;padding:11px 20px;
  color:var(--paper)}
.nav__links .btn:hover{color:var(--paper)}
.nav__burger{display:none;width:44px;height:44px;border:1px solid var(--line);
  border-radius:12px;background:var(--paper);cursor:pointer;
  align-items:center;justify-content:center;padding:0}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  content:"";position:relative}
.nav__burger span::before{position:absolute;top:-6px}
.nav__burger span::after{position:absolute;top:6px}

/* ---------- ana sayfa ---------- */
.hero{background:linear-gradient(180deg,#fdf3e3 0%,var(--paper) 100%)}
.hero .split{padding-block:48px 60px;gap:50px;align-items:center}
.hero__chip{background:var(--paper);border:1px solid #f0e2c9;
  box-shadow:0 2px 8px rgba(201,150,68,.12);padding:8px 15px;margin-bottom:24px}
.hero__chip i{width:7px;height:7px;border-radius:50%;background:var(--olive)}
.hero h1{font-size:66px;line-height:1.02;margin:0 0 22px}
.hero p{font-size:18.5px;line-height:1.62;max-width:490px;margin:0 0 32px}
.hero .btn{font-size:16.5px;padding:17px 30px;font-weight:800}
.hero .btn--ghost{font-weight:700;padding-inline:28px}
.hero__not{font-size:14px!important;color:#8a8172;margin:26px 0 0!important}
.hero__ph{display:none;height:200px;border-radius:18px}

.sistem{background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:30px 28px;box-shadow:0 18px 50px rgba(180,140,80,.16)}
.sistem>.label{display:block;font:800 12px/1 var(--sans);letter-spacing:.13em;
  margin-bottom:22px}
.sistem__adimlar{list-style:none;margin:0;padding:0}
.sistem__adimlar li{display:flex;gap:16px;align-items:center;position:relative}
.sistem__adimlar li+li{margin-top:20px}
.sistem__adimlar li+li::before{content:"";position:absolute;left:21px;top:-20px;
  width:2px;height:20px;background:#f0e2c9}
.sistem__ikon{flex:none;width:44px;height:44px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:20px}
.sistem__adimlar h3{font-size:20px;line-height:1.2;margin:0}
.sistem__adimlar p{font-size:14px;line-height:1.45;color:var(--muted);
  margin:2px 0 0;max-width:none}
.sistem__not{margin:24px 0 0;background:var(--cream);border-radius:16px;
  padding:16px 18px;font-size:14px;line-height:1.55;color:var(--muted)}

.guven{padding-block:0 56px}
.guven>div{background:var(--cream);border-radius:18px;padding:20px 22px}
.guven h3{font-size:23px;font-weight:400;margin:0}
.guven p{font-size:13.5px;color:var(--soft);margin:4px 0 0}

.kitler{padding-block:4px 64px}
.bolum__bas{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px}
.bolum__bas h2{font-size:40px;margin:0 0 6px}
.bolum__bas p{font-size:15.5px;color:var(--soft);margin:0}
.bolum__link{font:700 14.5px/1.3 var(--sans);color:var(--terracotta);
  border-bottom:2px solid #f0cdbb;padding-bottom:2px;white-space:nowrap}
.bolum__link:hover{color:var(--terracotta-dark);text-decoration:none}
.kizgara{gap:20px}
.kkart{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 10px 30px rgba(180,140,80,.10);color:var(--body);font-weight:400;
  transition:transform .15s ease,box-shadow .15s ease}
.kkart:hover{text-decoration:none;color:var(--body);transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(180,140,80,.16)}
.kkart__foto{height:150px;border-radius:0}
.kkart__ic{display:flex;flex-direction:column;padding:24px;flex:1}
.kad{font:400 26px/1.15 var(--serif);color:var(--ink);letter-spacing:-.02em;
  margin-bottom:7px}
.kvaat{font-size:15px;line-height:1.55;color:var(--muted);min-height:46px}
.kkart__cipler{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 18px}
.kkart__alt{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-top:18px;border-top:1px solid var(--line-2);margin-top:auto}
.kfiyat{font:400 22px/1 var(--serif);color:var(--ink)}
.kbas.btn{min-height:40px;padding:11px 18px;font-size:13.5px;box-shadow:none}
.yakinda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin-top:20px}
.yakinda__kart{display:flex;align-items:center;gap:13px;
  border:1.5px dashed #e6d7bd;border-radius:18px;padding:18px 22px;
  color:var(--body);font-weight:400}
.yakinda__kart:hover{text-decoration:none;border-color:var(--terracotta);color:var(--body)}
.yakinda__simge{font-size:22px;line-height:1}
.yakinda__ic{flex:1;min-width:0}
.yakinda__ad{display:block;font:700 15.5px/1.3 var(--sans);color:var(--ink)}
.yakinda__ad .label{margin-left:6px;color:#b09a72;font-weight:500;font-size:11px}
.yakinda__vaat{display:block;font-size:13.5px;color:var(--soft);line-height:1.4}
.yakinda__ok{font:700 13.5px/1 var(--sans);color:var(--terracotta);white-space:nowrap}

.ucretsiz{background:var(--cream)}
.ucretsiz .split{padding-block:64px;grid-template-columns:.92fr 1.08fr;
  gap:50px;align-items:center}
.ucretsiz .chip--paper{margin-bottom:20px}
.ucretsiz h2{font-size:42px;margin:0 0 16px}
.ucretsiz p{font-size:17px;line-height:1.65;margin:0 0 26px}
.ucretsiz .btn{font-size:15.5px;padding:15px 26px;border-radius:13px}
.ornek{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;box-shadow:0 18px 46px rgba(180,140,80,.16);
  color:var(--body);font-weight:400}
.ornek:hover{text-decoration:none;color:var(--body)}
.ornek__bas{display:flex;align-items:center;gap:10px;padding:16px 22px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-2)}
.ornek__rozet{background:var(--olive);color:#fff;font:800 11px/1 var(--sans);
  text-transform:uppercase;padding:5px 10px;border-radius:7px}
.ornek__ad{font:400 19px/1.2 var(--serif);color:var(--ink)}
.ornek__sure{margin-left:auto;font:700 12.5px/1 var(--sans);color:var(--gold);
  white-space:nowrap}
.ornek__ic{display:block;padding:22px}
.ornek__p{display:block;font-size:15px;line-height:1.62;margin-bottom:16px}
.ornek__kod{display:block;background:var(--ink);border-radius:13px;padding:16px 18px;
  font:400 13px/1.75 var(--mono);color:#a9d4ba;white-space:pre}
.ornek__olcum{display:flex;gap:10px;margin-top:14px}
.ornek__olcum>span{flex:1;background:var(--cream);border-radius:13px;padding:12px 14px;
  display:flex;flex-direction:column;gap:3px}
.ornek__olcum i{font:800 10.5px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);font-style:normal}
.ornek__olcum b{font-size:15px;color:var(--ink)}
.ornek__olcum .olive{background:var(--olive-bg)}
.ornek__olcum .olive i{color:#6f9b7f}
.ornek__olcum .olive b{color:var(--olive)}

.sss{padding-block:64px}
.sss h2{font-size:38px;margin:0 0 24px}
.sss .grid-3{gap:20px}
.sss__kart{background:var(--cream);border-radius:20px;padding:26px}
.sss__kart h3{font-size:20px;font-weight:400;color:var(--terracotta);
  line-height:1.3;margin:0 0 11px}
.sss__kart p{font-size:15px;line-height:1.62;margin:0}

.qr{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:40px 44px;border-radius:26px;margin-bottom:60px}
.qr h2{font-size:28px;margin:0 0 6px}
.qr__kitler{font-size:15px;color:var(--soft);margin:0}
.qr__kitler a{color:var(--olive)}
.qr .btn{font-size:15px;padding:14px 22px;border-radius:13px}

.dipnot{padding-block:0 56px;color:var(--soft);font-size:14.5px}
.dipnot p{margin:0 0 6px}

/* ---------- kit detay sayfası (/kit/<slug>.html) ---------- */
.ustbar__ic{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-block:18px;font:700 14.5px/1 var(--sans)}
.ustbar__geri{color:var(--soft);min-height:44px;display:inline-flex;align-items:center}
.ustbar__geri:hover{color:var(--ink);text-decoration:none}
.ustbar__sag{color:var(--terracotta);min-height:44px;display:inline-flex;align-items:center}
.ustbar__sag:hover{color:var(--terracotta-dark);text-decoration:none}

.kithero{padding-block:20px 56px;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center}
.kithero .chip--olive{margin-bottom:22px;font-size:12.5px;font-weight:800;
  text-transform:uppercase;padding:8px 15px}
.kithero h1{font-size:56px;line-height:1.02;margin:0 0 14px}
.vaat{font-size:19px;line-height:1.55;margin:0 0 28px}
.kithero__foto{border-radius:26px;min-height:430px;height:100%;max-height:520px}
.kithero__foto.ph{min-height:430px}
.fiyatkutu{background:var(--cream);border-radius:22px;padding:26px}
.fiyatkutu__ust{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.fiyatkutu__tl{font:800 34px/1.1 var(--sans);color:var(--ink)}
.fiyatkutu__ad{font-size:14.5px;color:var(--soft)}
.fiyatkutu__devam{font-size:14px;color:var(--soft);margin:7px 0 20px}
.fiyatkutu__btn{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fiyatkutu__btn .btn{font-weight:800;font-size:14.5px;padding:16px 8px;width:100%}
.fiyatkutu__not{font-size:13.5px;color:var(--gold);margin:14px 0 0;text-align:center}
.bilgi{margin-bottom:40px;font-size:15.5px;line-height:1.65}
.bilgi p{margin:0}

.bolum{padding-block:0 56px}
.bolum h2{font-size:34px;margin:0 0 22px}
.gorevozet{list-style:none;padding:0;margin:0;gap:14px}
.gkart{display:flex;align-items:center;gap:13px;background:var(--cream);
  border-radius:16px;padding:18px 20px;font:700 15px/1.3 var(--sans);color:var(--ink)}
.gno{flex:none;width:30px;height:30px;border-radius:50%;background:var(--olive);
  color:var(--paper);font:800 12.5px/1 var(--sans);
  display:flex;align-items:center;justify-content:center}
.gkart--ornek{background:var(--terra-bg);padding:0}
.gkart--ornek a{display:flex;align-items:center;width:100%;min-height:66px;
  padding:18px 20px;color:#a8461f;font:800 14.5px/1.3 var(--sans)}
.gkart--ornek a:hover{text-decoration:none;color:var(--terracotta-dark)}
.gkart--ac{display:none;padding:0}
.gkat{width:100%;min-height:52px;border:1.5px dashed #e6d7bd;border-radius:16px;
  background:none;color:var(--terracotta);font:700 14.5px var(--sans);cursor:pointer}

.kutu-ev{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:start}
.kutu-ev h2{font-size:30px;margin-bottom:18px}
.parcalist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.parca{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px 15px;font:600 14.5px/1.3 var(--sans);color:#4f4940}
.urunvideo{display:block;width:100%;height:auto;border-radius:18px;
  margin-top:20px;background:var(--cream)}
.evde h3{font-size:22px;margin:0 0 18px}
.gerek{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.gerek li{margin:0}
.gerek strong{display:block;font:800 15px/1.3 var(--sans);color:var(--ink)}
.gerek span{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.5}
.gereknot{font-size:14px;color:var(--muted);margin:0 0 14px}
.gerek li.var{padding-left:24px;position:relative}
.gerek li.var::before{content:"✓";position:absolute;left:0;top:0;color:var(--olive);font-weight:800}
.gerek li.var strong{color:var(--olive)}

/* Alıcı ebeveyn, kullanan çocuk. Bu blok ödeyene yazılmış. */
.ebeveyn{padding:28px 30px}
.ebeveyn .label{display:block;margin-bottom:12px}
.ebeveyn p{font-size:16.5px;line-height:1.65;max-width:720px}
.ebeveyn p:last-child{margin:0}
.capa{padding-top:14px;border-top:1px solid #ecdfc6;color:var(--muted);font-size:15px}

.fiyatlar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fkart{display:flex;flex-direction:column;gap:6px;padding:26px;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--sh-card)}
.fkart.onerilen{border-color:#dccfb6;background:var(--cream)}
.ftl{font:800 34px/1.1 var(--sans);color:var(--ink)}
.fkim{font-size:14.5px;color:var(--muted);line-height:1.5}
.fharic{font:400 11.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--gold);margin-top:2px}
.fbtnler{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.fbtnler .btn{width:100%;padding-inline:12px;font-size:14.5px}
.fbtnler .btn:only-child{grid-column:1/-1}
.fnot{color:var(--muted);font-size:14.5px;margin:16px 0 0}
.ekpaket{display:flex;flex-direction:column;gap:4px;margin-top:14px;
  padding:18px 20px;border:1.5px dashed #e6d7bd;border-radius:18px}
.ekbas{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:800 16px var(--sans);color:var(--ink)}
.ektl{color:var(--olive);white-space:nowrap}
.ekic{font-size:15px}
.ekaciklama{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.satici{color:var(--gold);font-size:13px;line-height:1.6}

/* Mobilde fiyat kutusu akıştan çıkıp sabit alt çubuk oluyor. */
.orderbar{display:none}
.orderbar__fiyat{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.orderbar__fiyat b{font:800 22px/1 var(--sans);color:var(--ink)}
.orderbar__fiyat span{font-size:13px;color:var(--gold)}
.orderbar__actions .btn{width:100%;padding-inline:8px;font-size:14.5px;min-height:48px}

/* satış önizleme sayfası (kit/<slug>-onizleme.html) */
.onizle{padding:22px 24px;background:var(--olive-bg);border-radius:20px;margin:0 0 2rem}
.onizle p{margin:0 0 14px;font-size:15.5px}
.onizle .fbtnler{margin-top:0}

/* ---------- dar sayfalar: sipariş, kurs listesi, 404 ---------- */
.sayfa{padding-block:40px 34px}
.sayfa h1{font-size:44px;line-height:1.05;margin:0 0 12px}
.giris{font-size:16.5px;line-height:1.6;max-width:520px;margin:0 0 30px}
.alizgara{display:flex;flex-direction:column;gap:14px}
.alkart{background:var(--cream);border-radius:22px;padding:24px 26px}
.alkart__ust{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:18px}
.alad{display:block;font:400 25px/1.15 var(--serif);color:var(--ink);letter-spacing:-.02em}
.alvaat{display:block;font-size:14.5px;color:var(--muted);margin-top:3px}
.alfiyat{text-align:right;flex:none}
.altl{display:block;font:400 25px/1.15 var(--serif);color:var(--ink)}
.aldevam{display:block;font-size:13px;color:var(--gold);margin-top:3px}
.alkart .fbtnler{margin-top:0}
.alkart .fbtnler .btn{border-radius:13px;padding-block:13px;min-height:46px}
.allink{display:inline-block;margin-top:14px;font:700 13.5px/1 var(--sans);color:var(--olive)}
.toplu{display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:20px}
.toplu .label{display:block;margin-bottom:7px}
.toplu h2{font-size:24px;margin:0 0 5px}
.toplu p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.toplu .btn{flex:none;font-size:14.5px}
.altserit{background:var(--cream);border-top:1px solid var(--line)}
.altserit__ic{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:16px;font-size:13.5px;color:var(--soft)}
.altserit a{color:var(--olive)}

/* ---------- görev listesi (/<slug>/index.html — QR buraya geliyor) ---------- */
.ustbar--krem{background:var(--cream);border-bottom:1px solid var(--line)}
.ustbar--krem .ustbar__ic{padding-block:8px}
.liste-sayfa{padding-block:40px 34px}
.liste-sayfa .chip--olive{margin-bottom:18px;font-size:12.5px;font-weight:800;
  text-transform:uppercase;padding:8px 15px}
.liste-sayfa h1{font-size:46px}
.liste-sayfa .vaat{font-size:18px;line-height:1.6;max-width:520px;margin-bottom:20px}
.etiketler{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.liste-sayfa .bilgi{margin-bottom:22px}
.liste-sayfa .bilgi p{margin:0 0 10px}
.liste-sayfa .bilgi p:last-child{margin:0}
.liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.liste li{margin:0}
.liste a{display:flex;align-items:center;gap:16px;background:var(--cream);
  border-radius:16px;padding:16px 20px;color:var(--body);font-weight:400;
  min-height:66px;transition:background .13s}
.liste a:hover{text-decoration:none;background:var(--cream-2);color:var(--body)}
.liste .no{flex:none;width:34px;height:34px;border-radius:12px;background:var(--stone);
  color:#5a5145;display:flex;align-items:center;justify-content:center;
  font:800 14px/1 var(--sans)}
.liste li:first-child .no{background:var(--olive);color:var(--paper)}
.liste li.bitti .no{background:var(--olive);color:var(--paper);font-size:0}
.liste li.bitti .no::after{content:"✓";font-size:14px}
.liste .no.ekno{background:none;border:1.5px dashed var(--input-line);
  color:var(--gold);font-size:18px;font-weight:400}
.liste .ic{flex:1;min-width:0}
.liste .bas{display:block;font:800 16px/1.3 var(--sans);color:var(--ink)}
.liste .oz{display:block;font-size:14px;color:var(--muted);margin-top:2px;line-height:1.45}
.liste .sr{font:700 13px/1 var(--sans);color:var(--gold);white-space:nowrap}
.ekrozet{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;
  background:var(--cream-2);color:var(--gold);font:500 10.5px/1 var(--mono);
  text-transform:uppercase;letter-spacing:.08em;vertical-align:2px}
.yardim{margin:22px 0 0;font-size:15px;color:var(--muted)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px}
.cta h2{font-size:24px;margin:0 0 5px}
.cta p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.cta .btn{flex:none;font-size:14.5px}

/* kaldığın yerden devam et */
.devam{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.devambtn{display:block;padding:13px 20px;background:var(--terracotta);color:var(--paper);
  border-radius:14px;font-weight:800;font-size:16px;line-height:1.3;box-shadow:0 4px 0 #9c4224}
.devambtn:hover{background:var(--terracotta-dark);color:var(--paper);text-decoration:none}
.devambtn span{display:block;font:500 11px/1 var(--mono);opacity:.9;margin-bottom:4px;
  text-transform:uppercase;letter-spacing:.1em}
.sifirla{background:none;border:0;color:var(--soft);font:600 13.5px var(--sans);
  cursor:pointer;text-decoration:underline;padding:6px;min-height:44px}

/* ---------- görev ekranı (/<slug>/gorev-NN.html) ---------- */
.gust{background:var(--cream);border-bottom:1px solid var(--line)}
.gust__ic{max-width:1160px;margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:12px 44px}
.gust__sol,.gust__sag{display:flex;align-items:center;gap:14px}
.gust__geri{color:var(--body);font:700 14.5px/1 var(--sans);min-height:44px;
  display:inline-flex;align-items:center}
.gust__geri:hover{color:var(--ink);text-decoration:none}
.gust__cip{background:var(--olive-bg);color:var(--olive);font:500 11.5px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:7px}
.gust__sayac{font-size:13px;color:var(--soft)}
.gust__bar{width:160px}
.gbody{max-width:1160px;margin-inline:auto;display:grid;
  grid-template-columns:268px minmax(0,1fr)}
.gbody--tek{grid-template-columns:minmax(0,1fr)}
.gbody--tek .gicerik{margin-inline:auto}

.task-rail{padding:28px 22px;background:var(--cream);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;align-self:stretch}
.task-rail>.label{display:block;font-size:11px;margin-bottom:8px}
.adimlar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.adimlar a{display:flex;align-items:center;gap:12px;padding:11px 13px;
  border-radius:13px;font:600 14.5px/1.3 var(--sans);color:#9a9184;min-height:44px}
.adimlar a:hover{text-decoration:none;color:var(--body)}
.ray__no{flex:none;width:24px;height:24px;border-radius:9px;background:var(--stone);
  color:var(--gold);display:flex;align-items:center;justify-content:center;
  font:800 12px/1 var(--sans)}
.adimlar a.bitti{color:var(--soft)}
.adimlar a.bitti .ray__no{background:var(--olive);color:var(--paper);font-size:0}
.adimlar a.bitti .ray__no::after{content:"✓";font-size:12px}
.adimlar a.simdi{background:var(--paper);box-shadow:var(--sh-card);color:var(--ink);
  font-weight:800}
.adimlar a.simdi .ray__no{background:var(--terracotta);color:var(--paper)}
.ray__yardim{margin-top:20px;background:var(--paper);border-radius:18px;padding:18px;
  box-shadow:var(--sh-card)}
.ray__yardim h3{font-size:19px;font-weight:400;margin:0 0 6px}
.ray__yardim p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 12px}
.ray__yardim .btn{width:100%;min-height:44px;padding:10px 14px;font-size:13.5px;
  border-radius:11px;box-shadow:none}

.gicerik{max-width:760px;padding:40px 56px 48px;min-width:0}
.gicerik>.label{display:block;margin-bottom:14px}
.gicerik h1{font-size:48px;line-height:1.05;margin:0 0 12px}
.ozet{font-size:19px;line-height:1.55;margin:0 0 26px}
.hedef{background:var(--olive-bg);border-radius:20px;padding:22px 24px;margin:0 0 34px}
.hedef .label{display:block;font-size:11px;margin-bottom:7px}
.hedef p{font-size:16.5px;line-height:1.6;color:#33402f;margin:0}
.gicerik h2,.gicerik h3{font-size:28px;line-height:1.15;letter-spacing:-.015em;
  margin:34px 0 12px}
.gicerik h3{font-size:26px}
.gicerik h4{font:800 17px/1.3 var(--sans);color:var(--ink);margin:26px 0 8px}
.gicerik p{font-size:16.5px;line-height:1.7;margin:0 0 18px}
.gicerik ul,.gicerik ol{padding-left:1.3em;margin:0 0 18px;font-size:16.5px;line-height:1.7}
.gicerik li{margin-bottom:6px}
.gicerik blockquote{margin:0 0 24px;padding:18px 22px;background:var(--cream);
  border-radius:18px;color:var(--body);font-size:15.5px;line-height:1.65}
.gicerik blockquote p{font-size:15.5px;margin:0 0 10px}
.gicerik blockquote p:last-child{margin:0}
.gicerik hr{border:0;border-top:1px solid var(--line-2);margin:34px 0}
.gicerik img{border-radius:18px}
code{font-family:var(--mono)}
p code,li code,td code{background:var(--cream-2);padding:2px 7px;border-radius:7px;
  font-size:.88em;color:#4f4940}

.tablo{overflow-x:auto;margin:0 0 32px}
.tablo table{margin:0}
.tablo th{white-space:nowrap}
.tablo td:first-child strong{color:var(--ink)}
/* "Şimdi sen yap" tablosu: boş hücre = deftere yazılacak kesikli kutu */
.tablo td:empty{padding:10px 16px;min-width:170px}
.tablo td:empty::after{content:"";display:block;height:34px;border:1px dashed var(--input-line);
  border-radius:10px;background:var(--paper)}

.kod{border-radius:20px;overflow:hidden;margin:0 0 34px;box-shadow:var(--sh-raised)}
.kod__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;
  background:var(--cream);font:500 11.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}
.kopya{background:none;border:0;color:var(--olive);font:inherit;cursor:pointer;
  padding:8px 0;min-height:44px}
.kopya.oldu{color:var(--terracotta)}
.kod pre{margin:0;background:var(--ink);color:#f3ead9;padding:20px 22px;
  font:400 13.5px/1.8 var(--mono);overflow-x:auto}
.kod code{background:none;padding:0;color:inherit;font-size:inherit}

.kutu{border-radius:20px;padding:20px 24px;margin:0 0 34px}
.kutu h3{font-size:22px;margin:0 0 8px}
.kutu p{font-size:16px;margin:0 0 8px}
.kutu p:last-child{margin:0}
.kutu.ok{background:var(--olive-bg);color:#33402f}
.kutu.ok h3{color:var(--olive)}
.semauyari{display:flex;gap:14px;background:var(--terra-bg);border-radius:20px;
  padding:20px 24px;margin:0 0 34px;color:var(--warn-ink)}
.semauyari b{font-size:20px;line-height:1;color:var(--terracotta)}
.semauyari span{font-size:15.5px;line-height:1.6}

.lejant{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 14px;
  font:600 13px/1 var(--sans);color:var(--muted)}
.lejant span{display:flex;align-items:center;gap:7px}
.lejant i{width:20px;height:4px;border-radius:2px;flex:0 0 20px}
.gorsel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
.gorsel.genis{grid-template-columns:1fr}
.gorsel.genis .foto{aspect-ratio:2/1}
.gorsel figure{margin:0;min-width:0}
.gorsel figcaption{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.gorsel .foto{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--cream)}
.gorsel .foto img{object-fit:contain}
.gorsel .foto.ph{aspect-ratio:4/3;height:auto}
.gorsel svg{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px}

.gicerik details{background:var(--cream);border-radius:22px;padding:22px 26px;margin:0 0 34px}
.gicerik summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  min-height:44px;padding:0 18px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;font:700 14.5px/1 var(--sans);color:var(--ink)}
.gicerik summary::-webkit-details-marker{display:none}
.gicerik summary::after{content:" ▾";margin-left:6px}
.gicerik details[open] summary::after{content:" ▴"}
.gicerik details>*:not(summary){margin-top:16px}
.gicerik details p{font-size:16px}

.alt{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line-2);padding-top:22px;margin-top:40px}
.alt__geri{font:700 14.5px/1.3 var(--sans);color:var(--gold);min-height:44px;
  display:inline-flex;align-items:center}
.alt__geri:hover{color:var(--body);text-decoration:none}
.alt .ileri{font-size:15px;padding:15px 24px;text-align:right}
.gicerik hr+.alt{border-top:0;padding-top:0;margin-top:0}
.gicerik .yardim{display:none}
/* Kursun son görevini kapatan şerit. .gicerik'in kendi h2/p kuralları
   (28px, üstten 34px boşluk) kutunun içini dağıtıyor — burada geri alıyoruz. */
.gicerik .cta{margin-top:40px}
.gicerik .cta h2{font-size:24px;margin:0 0 5px}
.gicerik .cta p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}

/* ---------- ücretsiz eğitim kartları ---------- */
.egitimler{padding-block:64px 0}
.egrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ekart{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:22px;padding:24px;
  box-shadow:var(--sh-card);color:var(--body);font-weight:400;
  transition:transform .15s ease,box-shadow .15s ease}
.ekart:hover{text-decoration:none;color:var(--body);transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(180,140,80,.16)}
.ekart__ust{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:14px}
.ekart__simge{font-size:30px;line-height:1}
.ekart .chip--olive{font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;padding:7px 12px}
.ekart .kvaat{min-height:0}
.ekart__kaz{font-size:14px;color:var(--soft);line-height:1.5;margin-top:6px}
.ekart__not{font-size:13.5px;color:var(--soft)}

/* ---------- alt bilgi ---------- */
.footer{background:var(--cream);border-top:1px solid var(--line);margin-top:auto}
.footer__ic{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-block:44px 28px}
.footer__marka p{font-size:14.5px;line-height:1.55;color:var(--muted);
  max-width:320px;margin:14px 0 10px}
.footer__wa{font:700 14.5px/1 var(--sans);color:var(--olive)}
.footer__kol .label{display:block;margin-bottom:14px}
.footer__links{display:flex;flex-direction:column;gap:2px}
.footer__links a{font:600 14.5px/1.3 var(--sans);color:var(--body);
  min-height:36px;display:inline-flex;align-items:center}
.footer__links a:hover{color:var(--ink);text-decoration:none}
.footer__alt{padding-block:18px 28px;border-top:1px solid #ecdfc6;
  font-size:13px;color:var(--soft)}
body.ana,body.satis,body.gorevliste{min-height:100vh;display:flex;flex-direction:column}
body.ana>*,body.satis>*,body.gorevliste>*{width:100%}
.yasal>p:first-of-type{font:500 11.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin:-4px 0 28px}
.yasal h2{font-size:26px;margin:32px 0 10px}
.yasal strong{font-weight:700}
.yasal p,.yasal li{font-size:16px;line-height:1.7}
.yasal ul,.yasal ol{padding-left:1.3em;margin:0 0 16px}

/* ---------- şemalar (semalar.html'den gelen SVG) ---------- */
.mA rect{fill:var(--modA);stroke:var(--modAs)}
.mB rect{fill:var(--modB);stroke:var(--modBs)}
.mA text{fill:var(--modAt)}
.mB text{fill:var(--modBt)}
.gorsel svg{width:100%;height:auto;display:block}
/* SVG yazısı viewBox ile ölçekleniyor: 560 birimlik şema telefonda ~325px'e
   iner, yani 0.58 kat. 21 birim orada ~12px demek — daha küçüğü okunmuyor. */
.gorsel text{font-family:var(--sans);font-size:21px}
.gorsel .ttl{font-size:24px;font-weight:700}
.gorsel .bolum{font-size:21px;font-weight:700;fill:var(--muted)}

/* ======== responsive ======== */
@media (max-width:1100px){
  .hero h1{font-size:54px}
  .kizgara{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav__ic{padding-block:14px}
  .nav__burger{display:flex}
  .nav__links{display:none}
  .nav.acik .nav__links{display:flex;flex-direction:column;align-items:stretch;
    gap:0;position:absolute;left:0;right:0;top:100%;background:var(--paper);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:8px var(--pad-x) 16px;box-shadow:var(--sh-card)}
  .nav.acik .nav__links a{padding:14px 0;font-size:16px;min-height:44px;
    border-bottom:1px solid var(--line-2)}
  .nav.acik .nav__links .btn{margin-top:12px;border-bottom:0}

  .hero .split{padding-block:24px 36px;gap:24px}
  .hero h1{font-size:40px;line-height:1.04;margin-bottom:14px}
  .hero p{font-size:16.5px;margin-bottom:22px}
  .hero .btn{font-size:16px;padding:15px 22px}
  .hero__chip{margin-bottom:18px}
  .hero__not{margin-top:18px!important}
  .hero__ph{display:flex;height:210px}
  .hero__ph:not(.ph){display:block}
  .sistem{padding:22px 20px;box-shadow:var(--sh-card)}
  .sistem__adimlar h3{font-size:18px}

  .guven{padding-bottom:36px}
  .guven>div{padding:16px 18px}
  .guven h3{font-size:20px}

  .kitler{padding-bottom:40px}
  .bolum__bas{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .bolum__bas h2{font-size:28px}
  .kizgara{grid-template-columns:1fr;gap:14px}
  .kkart__foto{height:190px}
  .kad{font-size:23px}
  .kvaat{min-height:0}
  .yakinda{grid-template-columns:1fr;gap:12px}
  .yakinda__kart{flex-wrap:wrap}
  .yakinda__ok{width:100%;padding-top:4px}

  .hero .split,.ucretsiz .split{grid-template-columns:1fr}
  .ucretsiz .split{padding-block:36px;gap:24px}
  .ucretsiz h2{font-size:28px}
  .ucretsiz p{font-size:16px}
  .ucretsiz .btn{width:100%}
  .ornek__olcum{flex-direction:column}

  .sss{padding-block:36px}
  .sss h2{font-size:26px;margin-bottom:16px}
  .sss .grid-3{gap:12px}
  .sss__kart{padding:20px}
  .sss__kart h3{font-size:19px}

  .qr{flex-direction:column;align-items:stretch;padding:24px 22px;margin-bottom:36px}
  .qr h2{font-size:24px}
  .qr .btnler{flex-direction:column;gap:10px}
  .qr .btn,.qr .btnler{width:100%}

  .dipnot{padding-bottom:36px;font-size:14px}

  .egitimler{padding-top:36px}
  .egrid{grid-template-columns:1fr;gap:14px}
  .ekart{padding:20px}
  .footer__ic{grid-template-columns:1fr;gap:26px;padding-block:32px 20px}
  .footer__links{flex-direction:column}
  .footer__links a{min-height:44px}
  .footer__alt{padding-block:14px 24px}

  /* kit detayı */
  .kithero{grid-template-columns:1fr;padding-block:8px 32px;gap:20px}
  .kithero__foto{order:-1;min-height:0;height:210px;border-radius:20px}
  .kithero__foto.ph{min-height:210px}
  .kithero h1{font-size:38px}
  .vaat{font-size:16.5px;margin-bottom:0}
  .kithero .fiyatkutu{display:none}
  .bilgi{margin-bottom:28px}
  .bolum{padding-bottom:34px}
  .bolum h2{font-size:26px;margin-bottom:14px}
  .gorevozet{gap:8px}
  .gkart--kat{display:none}
  .gkart--ac{display:block}
  .gorevozet.acik .gkart--kat{display:flex}
  .gorevozet.acik .gkart--ac{display:none}
  .kutu-ev{grid-template-columns:1fr;gap:24px}
  .kutu-ev h2{font-size:24px}
  .ebeveyn{padding:22px 20px}
  .ebeveyn p{font-size:15.5px}
  .fiyatlar{grid-template-columns:1fr}
  .fkart{padding:20px}
  .ftl{font-size:30px}
  .fbtnler{grid-template-columns:1fr}
  .orderbar{display:block;position:sticky;bottom:0;z-index:10;box-shadow:var(--sh-bar)}
  .orderbar__actions{grid-template-columns:1fr 1fr}

  /* dar sayfalar */
  .sayfa{padding-block:24px 28px}
  .sayfa h1{font-size:36px}
  .giris{font-size:16px;margin-bottom:22px}
  .alkart{padding:20px}
  .alkart__ust{flex-direction:column;gap:6px;margin-bottom:16px}
  .alfiyat{text-align:left}
  .alad{font-size:23px}
  .alkart .fbtnler{grid-template-columns:1fr}
  .toplu{flex-direction:column;align-items:stretch;padding:22px 20px}
  .toplu .btn{width:100%}
  .altserit__ic{flex-direction:column;gap:6px}

  /* görev listesi */
  .liste-sayfa{padding-block:24px 28px}
  .liste-sayfa h1{font-size:36px}
  .liste-sayfa .vaat{font-size:16.5px}
  .liste a{padding:14px 16px;gap:12px}
  .liste .bas{font-size:15.5px}
  .cta{flex-direction:column;align-items:stretch;padding:22px 20px}
  .cta .btn{width:100%}

  /* görev ekranı */
  .gust__ic{flex-wrap:wrap;padding:10px var(--pad-x) 12px;gap:8px}
  .gust__sag{width:100%}
  .gust__sayac{display:none}
  .gust__bar{width:100%}
  .gbody{grid-template-columns:1fr}
  .task-rail{display:none}
  .gicerik{padding:24px var(--pad-x) 36px}
  .gicerik h1{font-size:36px}
  .ozet{font-size:16.5px;margin-bottom:18px}
  .hedef{padding:18px 20px;margin-bottom:24px}
  .hedef p{font-size:16px}
  .gicerik h2,.gicerik h3{font-size:24px;margin-top:26px}
  .gicerik p,.gicerik ul,.gicerik ol{font-size:16px}
  .gorsel{grid-template-columns:1fr;gap:12px;margin-bottom:22px}
  .tablo,.kod,.kutu,.semauyari,.gicerik details{margin-bottom:24px}
  .tablo td:empty{min-width:120px}
  .kod pre{font-size:12.5px;padding:16px 18px}
  .alt{flex-direction:column-reverse;align-items:stretch;gap:10px;margin-top:28px}
  .alt .ileri{width:100%;text-align:center}
  .alt__geri{justify-content:center}
  .gicerik .yardim{display:block;margin-top:26px;padding:18px 20px;background:var(--cream);
    border-radius:18px;font-size:15px}
  .gicerik .yardim p{font-size:15px;margin:0 0 6px}
  .gicerik .yardim p:last-child{margin:0}
}

/* ---------- bitirme belgesi ---------- */
/* Kursu bitirenin elinde kalan sayfa. Satış yüzeyi değil — o yüzden burada
   ne kit kartı var ne fiyat. Kâğıda basılabilsin diye ölçüler sabit: ekran
   genişliğiyle oynayan bir belge yazdırılınca dağılıyor. */
.belgesayfa{padding-bottom:64px}
.belgeyok h1{font-size:34px;margin:0 0 10px}

.belge{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:22px;
  padding:44px 48px 36px;margin:0 0 26px;
  box-shadow:0 10px 34px rgba(42,37,32,.07);
  text-align:center;overflow:hidden;
}
.belge::before{
  content:"";position:absolute;inset:0 0 auto;height:8px;background:var(--ac);
}
.belge__ust{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-bottom:30px;text-align:left;
}
.belge__marka{font:800 16px/1 var(--sans);color:var(--ink);letter-spacing:-.01em}
.belge__marka span{color:var(--ac)}
.belge__simge{display:block;font-size:44px;line-height:1;margin-bottom:12px}
.belge h1{font-size:42px;line-height:1.08;margin:0 0 18px;letter-spacing:-.02em}
.belge__kim{font-size:17.5px;line-height:1.6;color:var(--body);margin:0 auto 24px;max-width:46ch}
.belge__ad{
  display:inline-block;min-width:170px;padding:0 6px 3px;
  border-bottom:2px solid var(--input-line);
  font:800 20px/1.4 var(--sans);color:var(--ink);
  word-break:break-word;
}
.belge__liste{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 26px;margin:0 0 22px;padding:22px 0 0;list-style:none;
  border-top:1px solid var(--line-2);text-align:left;
}
.belge__liste li{
  font:500 13.5px/1.45 var(--sans);color:var(--body);
  padding-left:17px;position:relative;
}
.belge__liste li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--ac);font-size:12px;font-weight:700;
}
.belge__kaz{font-size:15px;line-height:1.55;color:var(--muted);margin:0 0 28px}
.belge__alt{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:18px;border-top:1px solid var(--line-2);
  font:500 12px/1 var(--mono);color:var(--gold);
}

.belgeislem{
  display:flex;flex-direction:column;gap:9px;
  background:var(--cream);border-radius:20px;padding:24px 26px;
}
.belgeislem label{font:700 13.5px/1 var(--sans);color:var(--ink)}
.belgeislem input{
  font:600 17px/1.3 var(--sans);color:var(--ink);
  background:var(--paper);border:1.5px solid var(--input-line);
  border-radius:13px;padding:13px 16px;min-height:48px;width:100%;
}
.belgeislem input:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.belgeislem__not{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.belgeislem__btn{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
.belgeislem__btn .btn{flex:1 1 180px;text-align:center}

/* Ders listesindeki "Belgeni al" — devam butonunun yanında, ikincil. */
.belgebtn{
  display:inline-flex;align-items:center;min-height:44px;padding:11px 18px;
  border:1.5px solid var(--input-line);border-radius:14px;
  font:700 15px/1.3 var(--sans);color:var(--ink);background:var(--paper);
}
.belgebtn:hover{border-color:var(--ac);color:var(--ac);text-decoration:none}

@media (max-width:640px){
  .belge{padding:30px 22px 26px;border-radius:18px}
  .belge h1{font-size:31px}
  .belge__liste{grid-template-columns:1fr;gap:5px}
  .belge__alt{flex-direction:column;gap:6px;align-items:flex-start}
  .belgeislem{padding:20px}
}

@media print{
  /* Kâğıda yalnızca belge gitsin: başlık çubuğu, alt bilgi, düğmeler yok. */
  .ustbar,.footer,.belgeislem,.nav,.belgeyok{display:none !important}
  body{background:#fff}
  .belgesayfa{padding:0}
  .belge{
    border:1px solid #ddd6c6;border-radius:0;box-shadow:none;
    margin:0;padding:38px 40px 30px;break-inside:avoid;
  }
  .belge::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .belge__ad{border-bottom-color:#b9ae97}
}