/* ==========================================================================
   cocuklarneisyapacak.com
   Görsel dil: defter kâğıdı + fosforlu kalem.
   İki renk bir işi taşır: çam yeşili = yapı/gelecek, kiremit = insan/karar.
   ========================================================================== */

:root{
  --paper:#EFF1EE;
  --card:#FFFFFF;
  --ink:#14201C;
  --muted:#556660;
  --faint:#7F8C85;
  --rule:#D9E0DA;
  --rule-soft:#E5EAE5;
  --pine:#0F5C4E;
  --pine-soft:#14786A;
  --verm:#C8441C;
  --verm-soft:#E4572E;
  --mark:#FBEFA3;
  --mark-paint:linear-gradient(180deg,transparent 58%,#FBEFA3 58%,#FBEFA3 94%,transparent 94%);
  --mark-fg:inherit;
  --btn-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(20,32,28,.05), 0 18px 40px -28px rgba(20,32,28,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1512;
    --card:#161E19;
    --ink:#E7EDE9;
    --muted:#9BAAA3;
    --faint:#76847C;
    --rule:#243029;
    --rule-soft:#1E2822;
    --pine:#5BC9AC;
    --pine-soft:#7FD9C0;
    --verm:#FF8558;
    --verm-soft:#FF9A73;
    --mark:rgba(251,239,163,.22);
    --mark-paint:#FBEFA3;
    --mark-fg:#12100E;
    --btn-fg:#0F1512;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"]{
  --paper:#0F1512;
  --card:#161E19;
  --ink:#E7EDE9;
  --muted:#9BAAA3;
  --faint:#76847C;
  --rule:#243029;
  --rule-soft:#1E2822;
  --pine:#5BC9AC;
  --pine-soft:#7FD9C0;
  --verm:#FF8558;
  --verm-soft:#FF9A73;
  --mark:rgba(251,239,163,.22);
  --mark-paint:#FBEFA3;
  --mark-fg:#12100E;
  --btn-fg:#0F1512;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -28px rgba(0,0,0,.8);
}

/* --------------------------------------------------------------- temel -- */

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope","Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

p{margin:0 0 1em}
strong{font-weight:700}
em{font-style:italic}

a{color:var(--pine);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--verm)}

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

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;z-index:50;
}
.skip:focus{left:12px;top:12px}

/* fosforlu kalem — sayfanın imza hareketi */
mark{
  /* Acik temada kalem izi, koyu temada tam blok. Fark renkte degil BICIMDE
     oldugu icin boyanin tamami token: koyu zeminde yari saydam sari alt-cizgi
     olu bir olive lekeye donusuyor ve vurgu gibi degil kusur gibi okunuyor. */
  background:var(--mark-paint);
  color:var(--mark-fg);
  padding:.02em .14em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.wrap{max-width:980px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.wrap.narrow{max-width:720px}

/* ------------------------------------------------------------- üst bar -- */

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:980px;margin:0 auto;
  padding:22px clamp(20px,5vw,32px);
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.8125rem;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
}
.brand-mark{
  width:12px;height:12px;border-radius:3px;
  background:var(--pine);
  box-shadow:5px 0 0 var(--verm);
  margin-right:5px;
}
.brand .dim{color:var(--faint)}
.topbar nav{display:flex;gap:22px;flex-wrap:wrap}
.topbar nav a{
  font-size:.875rem;font-weight:500;color:var(--muted);text-decoration:none;
}
.topbar nav a:hover{color:var(--verm)}

/* ---------------------------------------------------------------- hero -- */

.hero{
  max-width:980px;margin:0 auto;
  padding:clamp(36px,7vw,80px) clamp(20px,5vw,32px) clamp(48px,8vw,88px);
}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--verm);margin:0 0 22px;
}
.deck{
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.2rem,3vw,1.6rem);
  line-height:1.45;
  margin:0 0 .9em;
  max-width:24ch;
}
.deck-sub{
  font-size:1.0625rem;color:var(--muted);
  max-width:56ch;margin:0 0 34px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-block;
  background:var(--pine);color:var(--btn-fg);
  font-weight:600;font-size:.9375rem;
  padding:12px 22px;border-radius:2px;
  text-decoration:none;
  border:1px solid var(--pine);
}
.btn:hover{background:var(--pine-soft);border-color:var(--pine-soft);color:var(--btn-fg)}
.btn.ghost{
  background:transparent;color:var(--ink);border-color:var(--rule);
}
.btn.ghost:hover{border-color:var(--verm);color:var(--verm);background:transparent}

/* -------------------------------------------------------------- bantlar -- */

.band{padding:clamp(48px,8vw,92px) 0;border-top:1px solid var(--rule-soft)}
.band.alt{background:var(--card)}

.label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;
}
h2.big{
  font-family:"Literata",Georgia,serif;
  font-weight:600;
  font-size:clamp(1.9rem,4.6vw,2.9rem);
  line-height:1.14;letter-spacing:-.018em;
  margin:0 0 .5em;text-wrap:balance;
}
h2.big em{color:var(--verm);font-style:normal}
h2.mid{
  font-family:"Literata",Georgia,serif;
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.2;letter-spacing:-.015em;
  margin:0 0 .55em;text-wrap:balance;
}
.lede{font-size:1.0625rem;color:var(--muted);max-width:62ch;margin:0 0 2em}

.pull{
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.15rem,2.6vw,1.45rem);
  line-height:1.42;
  margin:2.2em 0 0;
  padding-left:22px;
  border-left:3px solid var(--verm);
  max-width:44ch;
  text-wrap:balance;
}

/* ---------------------------------------------------------------- kart -- */

.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin:36px 0 0}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--paper);padding:26px 24px 22px}
.band.alt .card{background:var(--card)}
.cnum{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.75rem;color:var(--verm);margin:0 0 14px;
  font-variant-numeric:tabular-nums;
}
.card h3{
  font-family:"Literata",Georgia,serif;
  font-size:1.1875rem;font-weight:600;line-height:1.25;
  margin:0 0 .5em;
}
.card p{font-size:.9375rem;color:var(--muted);margin:0}

/* ------------------------------------------------------- üç ayak (leg) -- */

.legs{
  display:grid;gap:0;
  border-top:1px solid var(--rule);
  margin:32px 0 0;
}
.leg{
  display:grid;grid-template-columns:56px 1fr;gap:0 20px;
  padding:26px 0;border-bottom:1px solid var(--rule-soft);
  align-items:start;
}
.lnum{
  /* numara iki satiri da kapsar; baslik ve paragraf ayni sutunda kalir.
     aksi halde ucuncu cocuk 56px'lik sutuna dusup metni ezer. */
  grid-column:1;grid-row:1 / span 2;
  font-family:"Literata",Georgia,serif;
  font-size:2rem;line-height:1;color:var(--pine);
  margin:0;font-variant-numeric:tabular-nums;
}
.leg h3,
.leg p{grid-column:2}
.leg h3{
  font-family:"Literata",Georgia,serif;
  font-size:1.25rem;font-weight:600;margin:0 0 .35em;
}
.leg p{margin:0;color:var(--muted);font-size:.9375rem;max-width:58ch}

.callout{
  margin:36px 0 0;padding:24px 26px;
  background:var(--paper);
  border-left:3px solid var(--pine);
}
.band.alt .callout{background:var(--paper)}
.callout .label{color:var(--pine)}
.callout p:last-child{margin:0;font-size:.9375rem;color:var(--muted)}

/* ------------------------------------------------- meslek kayma tablosu -- */

.shift{margin:32px 0 0;border-top:1px solid var(--rule)}
.shift-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr);
  gap:0 20px;padding:12px 0;
  border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.shift .row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.5fr);
  gap:4px 20px;padding:16px 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.shift .job{font-weight:700;font-size:.9375rem}
.shift .was{color:var(--faint);font-size:.9375rem}
.shift .now{font-size:.9375rem;position:relative}
.shift .now strong{color:var(--verm)}
.shift .now::before{
  content:"→";
  color:var(--pine);
  margin-right:8px;
  font-weight:700;
}

/* ------------------------------------------------------------- adımlar -- */

.steps{list-style:none;counter-reset:s;margin:32px 0 0;padding:0;border-top:1px solid var(--rule)}
.steps li{
  position:relative;
  padding:24px 0 24px 62px;
  border-bottom:1px solid var(--rule-soft);
}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:26px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.8125rem;color:var(--verm);
  font-variant-numeric:tabular-nums;
}
.steps h3{
  font-family:"Literata",Georgia,serif;
  font-size:1.1875rem;font-weight:600;margin:0 0 .35em;line-height:1.25;
}
.steps p{margin:0;color:var(--muted);font-size:.9375rem;max-width:60ch}

/* ------------------------------------------------------ yanlış inanışlar -- */

.myths{display:grid;gap:0;margin:28px 0 0;border-top:1px solid var(--rule)}
.myth{padding:24px 0;border-bottom:1px solid var(--rule-soft)}
.claim{
  font-family:"Literata",Georgia,serif;
  font-size:1.125rem;line-height:1.35;margin:0 0 .55em;
  color:var(--faint);
  text-decoration:line-through;
  text-decoration-color:var(--verm);
  text-decoration-thickness:1.5px;
}
.fix{margin:0;font-size:.9375rem;color:var(--muted)}
.fix strong{color:var(--ink)}

/* ----------------------------------------------------------- alışkanlık -- */

.habits{list-style:none;margin:0 0 1.4em;padding:0;border-top:1px solid var(--rule)}
.habits li{
  padding:14px 0 14px 22px;position:relative;
  border-bottom:1px solid var(--rule-soft);
  font-size:.9375rem;color:var(--muted);
}
.habits li strong{color:var(--ink)}
.habits li::before{
  content:"";position:absolute;left:0;top:1.5em;
  width:8px;height:2px;background:var(--pine);
}

/* ----------------------------------------------------------------- sss -- */

.faq{margin:28px 0 0;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  cursor:pointer;list-style:none;
  padding:18px 34px 18px 0;position:relative;
  font-weight:600;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:16px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  color:var(--verm);font-size:1.125rem;
}
.faq details[open] summary::after{content:"–"}
.faq details p{
  margin:0 0 20px;color:var(--muted);font-size:.9375rem;max-width:62ch;
}

/* -------------------------------------------------------------- kapanış -- */

.closing{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(56px,9vw,104px) 0;
}
.closing h2.big{color:var(--paper);margin-bottom:.3em}
.closing-sub{
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.2rem,3vw,1.7rem);
  line-height:1.35;margin:0 0 1.1em;
  color:var(--paper);
}
.closing-sub mark{
  background:linear-gradient(180deg, transparent 58%, var(--verm) 58%, var(--verm) 94%, transparent 94%);
  color:var(--paper);
}
.closing-body{color:#B9C6BF;max-width:56ch;margin:0;font-size:1.0625rem}

.band.soon{background:var(--card)}
.band.soon .btn{margin-top:8px}

/* --------------------------------------------------------------- footer -- */

.foot{
  border-top:1px solid var(--rule);
  padding:40px 0 56px;
  background:var(--paper);
}
.foot-brand{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.8125rem;margin:0 0 8px;
}
.foot-brand .dim{color:var(--faint)}
.foot-note{color:var(--muted);font-size:.875rem;margin:0 0 16px;max-width:46ch}
.foot-meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.75rem;color:var(--faint);margin:0;
}

/* --------------------------------------------------------------- mobil -- */

@media (max-width:680px){
  body{font-size:16px}
  .shift-head{display:none}
  .shift .row{grid-template-columns:1fr;gap:2px;padding:18px 0}
  .shift .was{font-size:.875rem}
  .leg{grid-template-columns:1fr;gap:2px}
  .lnum{grid-row:auto}
  .leg h3,
  .leg p{grid-column:1}
  .lnum{font-size:1.25rem;margin-bottom:4px}
  .topbar nav{gap:16px}
  .steps li{padding-left:40px}
  .pull{font-size:1.15rem}
}

/* ==========================================================================
   POSTER AÇILIŞ — bilinçli tek görünüm.
   Bu blok her iki temada da KOYU kalır; renkleri :root'ta bir kez tanımlanır
   ve tema bloklarında yeniden tanımlanmaz. Sayfanın geri kalanı temayı izler.
   ========================================================================== */

:root{
  --hero-bg:#0E1411;
  --hero-fg:#F3F6F3;
  --hero-dim:#7E8F86;
  --hero-ghost:rgba(243,246,243,.22);
  --hero-accent:#FF6A3D;
}

/* üst bar açılışa yapışır: iki koyu yüzey tek blok gibi okunur */
.topbar{
  background:var(--hero-bg);
  max-width:none;
  padding-left:0;padding-right:0;
}
.topbar > *{max-width:980px}
.topbar{
  display:grid;
  grid-template-columns:1fr;
  justify-items:stretch;
}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:980px;margin:0 auto;width:100%;
  padding:0 clamp(20px,5vw,32px);
}
.topbar .brand{color:var(--hero-fg)}
.topbar .brand .dim{color:var(--hero-dim)}
.topbar nav a{color:var(--hero-dim)}
.topbar nav a:hover{color:var(--hero-accent)}
.brand-mark{background:var(--hero-accent);box-shadow:5px 0 0 #3FA88E}

/* ------------------------------------------------------------- açılış -- */

.hero{
  background:var(--hero-bg);
  color:var(--hero-fg);
  border-bottom:1px solid rgba(243,246,243,.12);
  max-width:none;
  padding:clamp(20px,4vw,44px) 0 clamp(48px,8vw,84px);
}
.hero-in{max-width:980px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.hero .eyebrow{color:var(--hero-accent);margin-bottom:18px}

.poster{
  font-family:"Anton",Impact,"Haettenschweiler",sans-serif;
  font-weight:400;
  font-size:clamp(2.9rem,11.8vw,9rem);
  /* 0.88 poster icin ideal ama TURKCE'yi kirar: ust satirin altina inen
     C sedillasi ile alt satirin I noktasi ust ustre binip yutuluyor.
     "COCUKLAR NE IS" diye okunuyordu. 1.06 ikisine de yer birakir. */
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--hero-fg);
  margin:0 0 clamp(26px,4vw,44px);
  text-wrap:balance;
}
.poster .l1,.poster .l2{display:block}
.poster .qm{color:var(--hero-accent)}

/* ------------------------------------------- meslek şeridi (imza hareket) --
   İki satır ters yönde akar. Her satır aynı listeyi iki kez taşır; -50%
   ötelenince dikişsiz döner. Sayfa "ne iş yapacak?" diye sorarken cevap
   arka planda zaten akıyor. */

.marquee{
  border-top:1px solid rgba(243,246,243,.12);
  border-bottom:1px solid rgba(243,246,243,.12);
  padding:clamp(10px,2vw,18px) 0;
  margin:0 0 clamp(30px,5vw,52px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.track{display:flex;width:max-content}
.track .run{
  display:flex;align-items:center;
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(1.7rem,5.4vw,3.6rem);
  line-height:1.18;
  white-space:nowrap;
}
.track .run > span{padding:0 .16em}
.track .sep{color:var(--hero-accent);opacity:.55;padding:0 .1em}

.track.a .run > span:not(.sep){color:rgba(243,246,243,.30)}
@supports (-webkit-text-stroke: 1px #000){
  .track.a .run > span:not(.sep){
    -webkit-text-stroke:1px var(--hero-ghost);
    color:transparent;
  }
}
.track.b .run > span:not(.sep){color:rgba(243,246,243,.42)}

.track.a{animation:mq-sol 52s linear infinite}
.track.b{animation:mq-sag 68s linear infinite}
@keyframes mq-sol{from{transform:translateX(0)}   to{transform:translateX(-50%)}}
@keyframes mq-sag{from{transform:translateX(-50%)} to{transform:translateX(0)}}

@media (prefers-reduced-motion: reduce){
  .track.a,.track.b{animation:none}
  .track.b{transform:translateX(-18%)}
}

/* ------------------------------------------------------- açılış metni -- */

.answer{
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.45rem,4.4vw,2.7rem);
  line-height:1.18;
  color:var(--hero-fg);
  margin:0 0 .7em;
  text-wrap:balance;
}
.answer .qa{color:var(--hero-accent)}

.hero .deck{color:var(--hero-fg);max-width:30ch}
.hero .deck mark{
  /* koyu zeminde kalem izi ise yaramaz: harfin ust yarisi zeminle ayni renge
     dusup okunmaz oluyordu. Acilista vurgu TAM BLOK. */
  background:#FBEFA3;
  color:#12100E;
  padding:.04em .2em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero .deck-sub{color:var(--hero-dim);max-width:58ch}

.hero .btn{background:var(--hero-accent);border-color:var(--hero-accent);color:#12100E}
.hero .btn:hover{background:#FF8560;border-color:#FF8560;color:#12100E}
.hero .btn.ghost{background:transparent;color:var(--hero-fg);border-color:rgba(243,246,243,.28)}
.hero .btn.ghost:hover{border-color:var(--hero-accent);color:var(--hero-accent)}
.hero :focus-visible{outline-color:var(--hero-accent)}

/* --------------------------------------------------------- yön ekseni -- */

.axis{
  display:flex;align-items:center;gap:clamp(12px,2vw,20px);
  margin:0 0 clamp(26px,4vw,38px);
}
.ax-a,.ax-b{
  font-family:"Anton",Impact,sans-serif;
  font-size:clamp(1rem,2.8vw,1.75rem);
  letter-spacing:.01em;line-height:1;
}
.ax-a{color:var(--faint)}
.ax-b{color:var(--verm)}
.ax-line{
  flex:1;height:2px;position:relative;
  background:linear-gradient(90deg,var(--rule),var(--verm));
}
.ax-line i{
  position:absolute;right:-1px;top:-5px;
  width:0;height:0;
  border-left:11px solid var(--verm);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}

/* --------------------------------------------- kapanış: yeşil bitiriş -- */

.closing{background:var(--pine)}
:root:not([data-theme="light"]) .closing,
:root[data-theme="dark"] .closing{background:#0C3F35}
.closing h2.big,.closing .closing-sub{color:#F3F6F3}
.closing-body{color:rgba(243,246,243,.78)}
.closing-sub mark{
  /* koyu yesil zeminde de kalem izi ise yaramiyor: koyu metnin ust yarisi
     zemine karisip vurgu USTU CIZILI gibi okunuyordu. Tam blok. */
  background:var(--hero-accent);
  color:#12100E;
  padding:.02em .16em;
}

/* ------------------------------------------------------- footer: kim yazdi -- */

.foot-who{
  margin:22px 0 20px;
  padding:18px 0 0;
  border-top:1px solid var(--rule);
  max-width:46ch;
}
.who-label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;
}
.who-name{
  font-family:"Literata",Georgia,serif;
  font-size:1.0625rem;font-weight:600;color:var(--ink);margin:0;line-height:1.3;
}
.who-role{
  font-size:.875rem;color:var(--pine);font-weight:600;margin:2px 0 8px;
}
.who-note{font-size:.875rem;color:var(--muted);margin:0}