/* =========================================================
   NİZAM VAKFI — Tasarım Sistemi
   Holding sitesinden bağımsızdır.
   Tema: Krem & Derin Yeşil  ·  Newsreader + Inter
   ========================================================= */

/* ---------- 1. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Krem yüzeyler */
  --paper:#F8F5ED;
  --paper-2:#F0ECE0;
  --line:#E3DDCD;
  --line-2:#D2CAB4;

  /* Derin yeşil */
  --forest:#14322A;
  --forest-2:#1B4033;
  --forest-line:#27543F;

  /* Metin */
  --ink:#14322A;
  --ink-mute:#5E6B62;
  --on-forest:#EFEBDE;
  --on-forest-mute:#9CB5A5;
  --on-forest-dim:#7A9585;

  /* Vurgu */
  --accent:#2F6B51;
  --accent-soft:rgba(47,107,81,.10);
  --accent-light:#8FC3A6;

  /* Tipografi */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --fs-display:clamp(2.5rem,6vw,4.6rem);
  --fs-h2:clamp(1.7rem,3.1vw,2.5rem);
  --fs-h3:clamp(1.1rem,1.6vw,1.35rem);
  --fs-lead:clamp(1.05rem,1.4vw,1.24rem);
  --fs-sm:.875rem;
  --fs-xs:.75rem;
  --fs-label:.688rem;

  --wrap:1120px;
  --wrap-narrow:720px;
  --gut:clamp(1.25rem,4vw,3.25rem);
  --sp:clamp(4.25rem,8vw,7.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 3. TABAN ---------- */
body{
  font-family:var(--sans);
  font-size:1.0625rem;      /* holdingden bir tık büyük — daha okunur, daha "insani" */
  line-height:1.78;
  color:var(--ink);
  background:var(--paper);
  font-weight:400;
}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- 4. DÜZEN ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sp)}
.surface-forest{background:var(--forest);color:var(--on-forest)}
.surface-paper-2{background:var(--paper-2)}

.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:1.75rem}}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
@media (max-width:880px){.grid-3{grid-template-columns:1fr}}

/* ---------- 5. TİPOGRAFİ ---------- */
.display,.h2,.h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.08}
.display{font-size:var(--fs-display);line-height:1.04}
.h2{font-size:var(--fs-h2);line-height:1.14}
.h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:0}
.display em,.h2 em{font-style:italic;color:var(--accent)}
.surface-forest .h2 em{color:var(--accent-light)}

.lead{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-mute);max-width:60ch}
.surface-forest .lead{color:var(--on-forest-mute)}

.body-text{max-width:62ch}
.body-text p+p{margin-top:1.15em}

.label{
  font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--accent);display:block;
}
.surface-forest .label{color:var(--accent-light)}

.secnum{display:flex;align-items:center;gap:1rem;margin-bottom:1.35rem;
  font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.secnum b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.secnum span{color:var(--ink-mute)}
.secnum::after{content:"";flex:1;height:1px;background:var(--line);max-width:170px}
.surface-forest .secnum b{color:var(--accent-light)}
.surface-forest .secnum span{color:var(--on-forest-dim)}
.surface-forest .secnum::after{background:var(--forest-line)}

/* ---------- 6. BAĞLANTI & BUTON ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:1rem 1.7rem;border:1px solid transparent;cursor:pointer;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.btn--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn .arw{transition:transform .28s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--accent);padding-bottom:.4rem;border-bottom:1px solid var(--accent-soft);
  transition:border-color .28s var(--ease)
}
.tlink:hover{border-color:var(--accent)}
.tlink .arw{transition:transform .28s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

/* ---------- 7. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 26px -22px rgba(20,50,42,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:80px}
.brand{display:block;color:var(--forest);flex:none}
.brand svg{width:clamp(148px,17vw,178px);height:auto}
.nav-links{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.1rem)}
.nav-links a{
  font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  color:var(--ink-mute);padding-block:.5rem;position:relative;transition:color .25s var(--ease);white-space:nowrap
}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.ext{color:var(--accent);font-weight:600}
@media (max-width:720px){ .nav-links a:not(.ext){display:none} }

/* ---------- 8. HERO ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(780px 420px at 82% 8%,rgba(47,107,81,.09),transparent 70%)
}
.hero-inner{position:relative;z-index:1;padding-block:clamp(4rem,9vw,7.5rem)}
.hero .display{max-width:13ch}
.hero .lead{margin-top:1.5rem;max-width:52ch}
.hero .btn{margin-top:2.25rem}

/* ---------- 9. KART ---------- */
.card{
  border:1px solid var(--forest-line);background:var(--forest-2);
  padding:clamp(1.75rem,3vw,2.4rem);display:flex;flex-direction:column;min-height:100%;
  transition:border-color .35s var(--ease),transform .35s var(--ease)
}
.card:hover{border-color:var(--accent-light);transform:translateY(-3px)}
.card .num{
  font-family:var(--serif);font-size:1.6rem;color:var(--accent-light);line-height:1;
  margin-bottom:1.35rem;display:flex;align-items:center;gap:.8rem
}
.card .num s{flex:1;height:1px;background:var(--forest-line);text-decoration:none}
.card h3{margin-bottom:.75rem}
.card p{color:var(--on-forest-mute);font-size:.97rem;line-height:1.72}

/* ---------- 9b. FAALİYET ALANLARI (kartlı, kaydırmalı düzen) ---------- */
.areas{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,4vw,3.75rem);align-items:center
}
.area-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.7rem,1.5vw,1.15rem);
  padding-bottom:clamp(1.5rem,3vw,2.75rem)   /* ortadaki kartın kayması için pay */
}
.area-card{
  background:var(--paper);color:var(--ink);
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(.75rem,1.4vw,1.1rem) clamp(1.25rem,2.2vw,1.7rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.5rem,3vw,2.4rem);text-align:center;
  min-height:clamp(200px,22vw,252px);
  box-shadow:0 22px 44px -30px rgba(0,0,0,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}
/* Ortadaki kart aşağı kayar — referanstaki ritim */
.area-card:nth-child(2){transform:translateY(clamp(1.5rem,3vw,2.75rem))}
.area-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(0,0,0,.6)}
.area-card:nth-child(2):hover{transform:translateY(calc(clamp(1.5rem,3vw,2.75rem) - 4px))}

.area-card svg{width:clamp(48px,5.4vw,64px);height:auto;color:var(--accent);flex:none}
.area-card .cap{
  font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;line-height:1.55;color:var(--ink);
  min-height:3.1em;display:flex;align-items:center;justify-content:center
}

@media (max-width:880px){
  .areas{grid-template-columns:1fr;gap:2.5rem}
  .areas-text{order:-1}                      /* mobilde önce açıklama, sonra kartlar */
  .area-cards{padding-bottom:0}
  .area-card:nth-child(2){transform:none}
  .area-card:nth-child(2):hover{transform:translateY(-4px)}
}
@media (max-width:600px){
  .area-cards{grid-template-columns:1fr;gap:.65rem}
  .area-card{
    flex-direction:row;justify-content:flex-start;gap:1.35rem;text-align:left;
    min-height:0;padding:1.35rem 1.5rem
  }
  .area-card svg{width:44px}
  .area-card .cap{min-height:0;justify-content:flex-start}
}

/* ---------- 10. ALINTI / İMZA ---------- */
.quote blockquote{
  font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.34;
  letter-spacing:-.01em;color:var(--ink)
}
.quote blockquote em{font-style:italic;color:var(--accent)}
.sign{margin-top:2.25rem;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600}
.sign b{display:block;color:var(--ink);letter-spacing:.16em;margin-bottom:.3rem}

/* ---------- 11. KÜNYE LİSTESİ ---------- */
.deflist{border-top:1px solid var(--line)}
.deflist div{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1fr);gap:1.5rem;
  padding-block:1.1rem;border-bottom:1px solid var(--line)}
.deflist dt{font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--ink-mute)}
.deflist dd{font-size:.97rem}
.deflist a{color:var(--accent);border-bottom:1px solid var(--accent-soft)}
.deflist a:hover{border-color:var(--accent)}
@media (max-width:600px){.deflist div{grid-template-columns:1fr;gap:.3rem}}

/* ---------- 12. FOOTER ---------- */
.site-footer{background:var(--forest);color:var(--on-forest)}
.footer-top{
  display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:start;
  padding-block:clamp(3rem,5.5vw,4.5rem)
}
@media (max-width:720px){.footer-top{grid-template-columns:1fr;gap:2.5rem}}
.footer-note{max-width:42ch;font-size:.925rem;color:var(--on-forest-mute)}
.footer-holding{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.footer-holding .cap{
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-forest-dim);font-weight:600
}
.footer-holding a{color:var(--on-forest);display:block;transition:opacity .25s var(--ease)}
.footer-holding a:hover{opacity:.72}
.footer-holding svg{width:164px;height:auto}
.footer-bottom{
  border-top:1px solid var(--forest-line);padding-block:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap
}
.footer-bottom p{font-size:var(--fs-xs);color:var(--on-forest-dim)}

/* ---------- 12b. GİRİŞ EKRANI (gate) ---------- */
.gate-body{background:var(--paper)}
.gate{
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:clamp(2rem,5vw,2.75rem) var(--gut) clamp(1.5rem,3vw,2rem);
  position:relative;overflow:hidden
}
.gate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 460px at 50% 0%,rgba(47,107,81,.10),transparent 68%)
}
.gate-inner{
  position:relative;z-index:1;width:100%;max-width:440px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-block:auto
}
.gate-logo{width:clamp(168px,22vw,196px);height:auto;margin-bottom:clamp(1.5rem,3vw,2rem)}
.gate-title{
  font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;
  font-size:clamp(2.4rem,6.5vw,3.4rem);color:var(--ink)
}
.gate-title em{font-style:italic;color:var(--accent)}
.gate-sub{
  margin-top:.95rem;font-size:.97rem;line-height:1.68;color:var(--ink-mute);max-width:40ch
}

.gate-box{
  width:100%;margin-top:clamp(1.75rem,3.5vw,2.25rem);
  border:1px solid var(--line);background:var(--paper-2);
  padding:clamp(1.6rem,3.4vw,2.1rem);text-align:left
}
.gate-box-label{
  display:block;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-bottom:.85rem
}
.gate-box-note{font-size:.875rem;line-height:1.66;color:var(--ink-mute);margin-bottom:1.35rem}

.gate-field{display:grid;gap:.45rem;margin-bottom:.95rem}
.gate-field label{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-mute)
}
.gate-field input{
  width:100%;background:var(--paper);border:1px solid var(--line-2);
  padding:.9rem 1rem;font-size:.97rem;border-radius:0;
  transition:border-color .25s var(--ease),background .25s var(--ease)
}
.gate-field input:focus{outline:none;border-color:var(--accent);background:#fff}
.has-error .gate-field input{border-color:#A6503C}

.gate-error{
  display:none;font-size:.85rem;color:#A6503C;line-height:1.6;
  margin:-.25rem 0 1rem
}
.gate-error.is-visible{display:block}

.gate-submit{width:100%;justify-content:center;margin-top:.35rem}

.gate-footer{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:.75rem;text-align:center;margin-top:clamp(2rem,4vw,2.75rem);padding-top:clamp(1.5rem,3vw,1.9rem);
  border-top:1px solid var(--line);width:100%;max-width:440px
}
.gate-footer .cap{
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink-mute)
}
.gate-footer a{color:var(--forest);transition:opacity .25s var(--ease)}
.gate-footer a:hover{opacity:.7}
.gate-footer img{width:132px;height:auto}
.gate-copy{font-size:var(--fs-xs);color:var(--ink-mute);opacity:.8}

/* Alçak ekranlarda giriş ekranı tek görüntüye sığsın */
@media (max-height:980px){
  .gate{padding-block:clamp(1.25rem,3vh,1.9rem) clamp(1rem,2.5vh,1.4rem)}
  .gate-logo{width:clamp(150px,18vw,166px);margin-bottom:1.2rem}
  .gate-title{font-size:clamp(2rem,4.6vw,2.65rem)}
  .gate-sub{margin-top:.75rem;font-size:.92rem;line-height:1.62}
  .gate-box{margin-top:1.45rem;padding:1.45rem}
  .gate-box-label{margin-bottom:.7rem}
  .gate-box-note{margin-bottom:1.1rem;line-height:1.6}
  .gate-field{margin-bottom:.8rem}
  .gate-field input{padding:.8rem .95rem}
  .gate-footer{margin-top:1.45rem;padding-top:1.2rem;gap:.55rem}
  .gate-footer img{width:118px}
}
@media (max-height:780px){
  .gate-logo{width:136px;margin-bottom:.9rem}
  .gate-title{font-size:1.9rem}
  .gate-sub{margin-top:.6rem;font-size:.875rem}
  .gate-box{margin-top:1.15rem;padding:1.25rem}
  .gate-box-note{margin-bottom:.95rem}
  .gate-footer{margin-top:1.15rem;padding-top:1rem}
  .gate-footer img{width:104px}
  .gate-copy{font-size:.66rem}
}

/* ---------- 13. HAREKET ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- 14. YARDIMCILAR ---------- */
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}.mt-4{margin-top:3rem}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--forest);color:var(--paper);
  padding:.75rem 1.25rem;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.skip-link:focus{left:0}