/* Yazı tipleri yerel. Google Fonts bağlantısı render'ı blokluyordu
   (renderBlockingStatus: blocking, 91 ms) ve ikinci bir sunucuya zincirleme
   bağlantı gerektiriyordu. Değişken eksenler korundu: Archivo'nun wdth'i
   font-stretch aralığıyla geliyor.
   Lisans: SIL Open Font License 1.1 — bkz. fonts/OFL.txt */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('fonts/archivo-400-900-latin-ext.71d20b06.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('fonts/archivo-400-900-latin.5c93f6b1.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/jetbrains-400-800-latin-ext.1ed23cec.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/jetbrains-400-800-latin.6d1aaa89.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/source-serif-400-600-latin-ext.d75f0935.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/source-serif-400-600-latin.26803a6c.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Yanar Yazılım — site stil sistemi
   Marka sisteminden birebir: petrol zemin, amber sinyal,
   Archivo / Source Serif 4 / JetBrains Mono.

   Bu dosyanın üst yarısı temel katman (renk, tipografi, ritim, bileşen).
   Alt yarısı efekt katmanı, ürüne özgü göstergeler ve mobil. */

:root{
  /* --- zemin ve mürekkep --- */
  --ink:#0C2E33;
  --ink-deep:#071E22;
  --ink-soft:#123338;
  --amber:#F2A43A;
  --amber-hi:#FFC271;
  --amber-ink:#8F540B;
  --paper:#F2F5F4;
  --paper-2:#E7ECEA;          /* komşu açık bölümleri ayıran ikinci kâğıt tonu */
  --surface:#FFFFFF;
  --surface-2:#EAEFED;
  --text:#0E2529;
  --muted:#566D70;
  --line:#D8E0DE;
  --line-soft:#E4EAE8;
  --line-strong:#B3C3C0;
  --ok:#2C7A68;
  --alert:#B5431F;
  --band-text:#EDF2F0;
  --band-muted:#96AFB0;

  /* --- yükseklik: üç kademe, hepsi çift katmanlı --- */
  --sh-1:0 1px 1px rgba(12,46,51,.04), 0 2px 6px -2px rgba(12,46,51,.08);
  --sh-2:0 1px 2px rgba(12,46,51,.05), 0 12px 28px -14px rgba(12,46,51,.24);
  --sh-3:0 2px 4px rgba(0,0,0,.18), 0 30px 70px -34px rgba(0,0,0,.62);
  --shadow:var(--sh-2);

  /* --- aralık ölçeği: bölüm ritmi buradan çıkar --- */
  --s-1:8px;  --s-2:16px; --s-3:26px;
  --s-4:44px; --s-5:72px; --s-6:116px;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f-body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:var(--amber-ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:780px}

/* ---------------- tipografi ----------------
   Archivo değişken; genişlik ekseni burada bir araç:
   başlıklar geniş (112), etiketler dar (86). İkisi arasındaki
   fark sayfaya ölçek duygusu veriyor. */
h1,h2,h3,h4,.eyebrow,.btn,.nav a,.wm,.kicker{font-family:var(--f-display)}
h1{
  font-size:clamp(38px,5.4vw,70px);line-height:1.02;font-weight:700;
  letter-spacing:-.032em;margin:0;text-wrap:balance;
  font-variation-settings:"wdth" 108;
}
h2{
  font-size:clamp(29px,4.1vw,45px);line-height:1.08;font-weight:700;
  letter-spacing:-.028em;margin:0 0 var(--s-2);text-wrap:balance;
  font-variation-settings:"wdth" 106;
}
h3{font-size:20px;line-height:1.24;font-weight:700;letter-spacing:-.014em;margin:0 0 6px}
h4{font-size:15px;font-weight:700;letter-spacing:-.006em;margin:0 0 4px}
p{margin:0 0 var(--s-2);max-width:66ch}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-ink);margin:0 0 var(--s-3);
  font-variation-settings:"wdth" 86;
}
.lede{font-size:clamp(19px,2.3vw,23px);line-height:1.48;color:var(--muted);max-width:54ch}
.mono{font-family:var(--f-mono);font-size:.88em}

/* ---------------- bölüm ritmi ----------------
   Tek tip 78px yerine değişken nefes: bölümler geniş,
   açıklama blokları dar, beyan bölümleri en geniş. */
section{padding:var(--s-6) 0}
section.tight{padding:var(--s-5) 0}

/* ---------------- dikey ritim ----------------
   Boşluk bir ilişki bildirir. Her sınır aynı genişlikteyse hiçbiri bir
   şey söylemez; sayfa eşit aralıklı bloklar dizisi gibi okunur.

   Kural: bir düşünceyi sürdüren bölümler dar bir sınır paylaşır, register
   değiştiren bölümler tam ölçüyü korur. Bölüm İÇİ blok aralığı ise her
   zaman bölümler arası sınırdan küçük olmalı — aynı boşluk iki farklı
   hiyerarşi seviyesini anlatamaz.

   Ölçüler: bölüm sınırı 232 (116+116) · sürdüren çift 144 (72+72)
            bölüm içi blok 72 · beyan kendi clamp'iyle en geniş nefes  */

/* "Nasıl çalışır" ve "Yaklaşım" tek bir argümanın iki yarısı: nasıl
   çalıştığı ve neden var olduğu. Aralarındaki yüzey farkı da en zayıf
   olan (%4 aydınlık), yani ayırma işini boşluk yapıyordu ve fazla
   yapıyordu. Yaklaştırılınca tek hareket olarak okunuyorlar. */
@media (min-width:561px){
  #nasil{padding-bottom:var(--s-5)}
  #yaklasim{padding-top:var(--s-5)}
}

/* Bölüm içindeki ikinci blok (ör. Ürünler'in altındaki Hizmetler)
   bölüm sınırıyla aynı boşluğu alıyordu; kendi başına bir bölümmüş
   gibi duruyordu. */
.ic-blok{margin-top:var(--s-5)}
@media (max-width:560px){.ic-blok{margin-top:44px}}
.rule-top{border-top:1px solid var(--line)}
section[id]{scroll-margin-top:74px}

/* komşu açık bölümler tonla ayrışsın; malzeme hissi buradan gelir */
.tone{background:var(--paper-2)}

.band{background:var(--ink);color:var(--band-text)}
.band .eyebrow{color:var(--amber)}
.band .lede,.band p{color:var(--band-muted)}
.band h1,.band h2,.band h3{color:var(--band-text)}

.split{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:var(--s-4)}}
.split.rev > *:first-child{order:2}
@media (max-width:880px){.split.rev > *:first-child{order:0}}

/* ---------------- başlık çubuğu ---------------- */
.site-head{
  position:sticky;top:0;z-index:40;background:rgba(12,46,51,.92);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(237,242,240,.09);
}
.head-in{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:26px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{
  position:relative;font-size:14px;font-weight:500;letter-spacing:.004em;
  color:var(--band-muted);text-decoration:none;padding:9px 13px;border-radius:7px;
  transition:color .16s var(--ease);
}
.nav a:hover{color:var(--band-text)}
.nav a[aria-current="page"]{color:var(--band-text)}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .22s var(--ease);
}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------------- düğmeler ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;letter-spacing:.004em;text-decoration:none;
  padding:14px 24px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:transform .14s var(--ease), background .14s var(--ease),
             border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--amber);color:#241304;border-color:var(--amber)}
.btn-primary:hover{background:var(--amber-hi);box-shadow:0 6px 22px -8px rgba(242,164,58,.6)}
.btn-ghost{background:transparent;color:var(--band-text);border-color:rgba(237,242,240,.28)}
.btn-ghost:hover{background:rgba(237,242,240,.08);border-color:rgba(237,242,240,.45)}
.btn-quiet{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn-quiet:hover{background:var(--surface-2);border-color:var(--muted)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}

/* ---------------- hero ---------------- */
.hero{padding:clamp(84px,12vh,140px) 0 clamp(76px,11vh,124px)}
/* Başlık iki sütunun üstünde tam genişlikte durur. Dar sütunda 70px'lik
   başlık beş satıra kırılıyor ve "gereken" tek başına kalıyordu; tam
   genişlikte iki cümle iki satır oluyor. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  column-gap:var(--s-5);row-gap:var(--s-4);align-items:start}
.hero-bas{grid-column:1/-1}
.hero-sol{align-self:center}
@media (max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:var(--s-4)}}
@media (max-width:1040px){.hero .lede{max-width:56ch}}
.hero h1 .lit{color:var(--amber)}
.hero .lede{margin-top:var(--s-3);color:var(--band-muted);max-width:46ch}

/* ---------------- örnek ekran ----------------
   Panelin bir alet gibi durması için: ince dış halka, iç üst
   ışık çizgisi, altında künye. */
.demo{
  position:relative;background:var(--surface);border-radius:16px;overflow:hidden;
  box-shadow:var(--sh-3), 0 0 0 1px rgba(0,0,0,.1);
}
.demo::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.demo-top{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  background:var(--ink-deep);color:var(--band-text);
  box-shadow:inset 0 -1px 0 rgba(237,242,240,.08);
}
.demo-top .t{font-family:var(--f-display);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-top .t span{font-weight:500;letter-spacing:.16em;font-size:11px;color:var(--band-muted);margin-left:9px}
.demo-row{
  display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:15px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);color:var(--text);
}
.demo-row:last-child{border-bottom:0}
.lamp{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.lamp.on{background:var(--amber);box-shadow:0 0 0 4px rgba(242,164,58,.2)}
.lamp.late{background:var(--alert);box-shadow:0 0 0 4px rgba(181,67,31,.16)}
.demo-row .lbl{font-size:15px;line-height:1.34}
.demo-row .lbl em{font-style:normal;display:block;font-size:13px;color:var(--muted);margin-top:2px}
.demo-row .val{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.demo-foot{padding:12px 18px;background:var(--surface-2);color:var(--muted);font-size:13px}

/* panel künyesi: ekranın altında, mono, sessiz */
.demo-cap{
  display:flex;align-items:baseline;gap:10px;margin-top:14px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:var(--muted);
}
.band .demo-cap{color:var(--band-muted)}
.demo-cap b{
  font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.02em;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.band .demo-cap b{color:var(--band-text)}

/* ---------------- ürün dizini ----------------
   Kart ızgarası yerine künye satırları: her ürün bir gösterge
   satırı gibi duruyor, sayfanın dilinden kopmuyor. */
.index{margin-top:var(--s-4);border-top:1px solid var(--line)}
.index a{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:var(--s-3);align-items:center;
  padding:26px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:background .18s var(--ease), padding .18s var(--ease), opacity .22s var(--ease);
}
.index a:hover{background:rgba(12,46,51,.035);padding-left:14px;padding-right:14px}

/* Markanın cümlesini sayfa da uygulasın: listeye gelindiğinde bakılan
   satır yanar, diğerleri söner. Ürünün ekranda yaptığı şeyin birebir
   aynısı — anlatmak yerine gösteriyor. Klavye için :focus-within de
   aynı davranışı veriyor; dokunmatikte hover olmadığı için sessizce
   eski hâline düşüyor. */
/* Kuralı :has() ile kuruyoruz: sönme YALNIZCA gerçekten yanan bir satır
   varken uygulanıyor. Konteyner sözde-sınıfına (:hover/:focus-within)
   dayanan sürüm, pencere odağını kaybettiğinde ":focus-within eşleşiyor
   ama :focus eşleşmiyor" durumuna düşüyor ve hepsi sönük kalıyordu —
   etkinin tam tersi. :has() desteklenmezse kural tümden yok sayılır,
   satırlar normal görünür; sessiz ve güvenli geri düşüş. */
.index:has(a:hover) a,
.index:has(a:focus-visible) a{opacity:.38}
.index a:hover,
.index a:focus-visible{opacity:1}
.index a:hover .no,
.index a:focus-visible .no{color:var(--amber-ink)}
.index .no{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.index .ad{
  font-family:var(--f-display);font-size:clamp(24px,3vw,34px);font-weight:700;
  letter-spacing:-.026em;line-height:1;white-space:nowrap;
}
.index .ad b{font-variation-settings:"wdth" 122;font-weight:700}
.index .ad span{color:var(--muted);font-weight:500}
.index p{margin:0;font-size:15px;color:var(--muted);line-height:1.45;max-width:46ch}
.index .ok{
  font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--amber-ink);
  transition:transform .18s var(--ease);
}
.index a:hover .ok{transform:translateX(5px)}
@media (max-width:860px){
  .index a{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px}
  .index p{grid-column:1 / -1}
}

/* ---------------- beyan bölümü ----------------
   Sayfanın durduğu yer. Tek cümle, tam genişlik, serif. */
.beyan{padding:clamp(96px,16vh,180px) 0}
.beyan .soz{
  font-family:var(--f-body);font-weight:400;
  font-size:clamp(28px,4.6vw,54px);line-height:1.16;letter-spacing:-.014em;
  color:var(--band-text);margin:0;max-width:20ch;text-wrap:balance;
}
.beyan .soz i{font-style:normal;color:var(--amber)}
.beyan .alt{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--band-muted);margin:var(--s-4) 0 0;
}

/* ---------------- özellik listesi ---------------- */
.feat{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:var(--s-4)}
.feat > div{padding:24px 30px 24px 0;border-top:1px solid var(--line)}
.feat h4,.feat h3{font-size:16px;font-family:var(--f-display)}
.feat p{font-size:15px;color:var(--muted);margin:0;line-height:1.5}
.feat .n{font-family:var(--f-mono);font-size:12px;color:var(--amber-ink);display:block;margin-bottom:9px}
.feat.one{grid-template-columns:1fr}

/* Dört öğeli gruplar üç sütuna dizilince ikinci sırada tek öğe öksüz
   kalıyor, yanında iki boş göz duruyordu (beş sayfada birden). Dörtlü
   gruplar 2x2 diziliyor; üçlüler üç sütunda kalıyor. Sayı seçiciyle
   ayrıldığı için işaretlemeye dokunmak gerekmiyor. */
.feat:not(.one):has(> div:nth-child(4)):not(:has(> div:nth-child(5))){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:720px){
  .feat:not(.one):has(> div:nth-child(4)):not(:has(> div:nth-child(5))){
    grid-template-columns:1fr;
  }
}
.feat.one > div{padding-right:0}

/* ---------------- modül künyeleri ---------------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s-3)}
.chip{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.01em;
  border:1px solid var(--line);border-radius:6px;padding:6px 11px;color:var(--muted);
  background:var(--surface);
}
.band .chip{border-color:rgba(237,242,240,.18);color:var(--band-muted);background:rgba(237,242,240,.04)}

/* ---------------- adımlar ---------------- */
.steps{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.steps li:last-child{border-bottom:0}
.band .steps li{border-color:rgba(237,242,240,.13)}
.steps .num{font-family:var(--f-mono);font-size:12px;color:var(--amber-ink)}
.band .steps .num{color:var(--amber)}
.steps h3{margin-bottom:5px}
.steps p{margin:0;font-size:16px;color:var(--muted);max-width:62ch}
.band .steps p{color:var(--band-muted)}

/* ---------------- form ---------------- */
.form{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:30px;box-shadow:var(--sh-2);
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.01em}
.field .hint{font-size:13px;color:var(--muted)}
input,select,textarea{
  font-family:var(--f-body);font-size:16px;color:var(--text);background:var(--paper);
  border:1px solid var(--line-strong);border-radius:9px;padding:12px 14px;width:100%;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
textarea{resize:vertical;min-height:112px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber);background:var(--surface)}
.form-note{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.5}
.sent{
  display:none;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;
  box-shadow:var(--sh-1);
}
.sent.show{display:flex}
.sent .lamp{margin-top:8px}
.sent p{margin:0;font-size:15px}

/* ---------------- alt bilgi ---------------- */
.site-foot{background:var(--ink-deep);color:var(--band-muted);padding:var(--s-5) 0 var(--s-4);font-size:15px}
.foot-grid{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(150px,1fr))}
.site-foot img{height:24px;width:auto}
.site-foot h4,.site-foot h3{
  color:var(--band-text);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 14px;font-variation-settings:"wdth" 86;
}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-foot a{color:var(--band-muted);text-decoration:none;transition:color .14s var(--ease)}
.site-foot a:hover{color:var(--band-text)}
.foot-note{
  margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid rgba(237,242,240,.1);
  font-size:12px;line-height:1.6;color:var(--band-muted);opacity:.8;
}

/* ---------------- sayfa başı / yardımcılar ---------------- */
.page-head{padding:var(--s-5) 0 var(--s-4)}
.page-head .lede{margin-top:var(--s-2)}
.crumb{font-family:var(--f-mono);font-size:12px;color:var(--band-muted);margin:0 0 var(--s-2);letter-spacing:.02em}
.crumb a{color:var(--band-muted);text-decoration:none}
.crumb a:hover{color:var(--band-text)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-top:var(--s-3)}
table{border-collapse:collapse;width:100%;min-width:480px}
th,td{text-align:left;padding:13px 17px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{font-family:var(--f-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);background:var(--surface-2)}
td{font-size:15px}

.prod-h{display:flex;align-items:baseline;gap:.34em;flex-wrap:wrap;margin-bottom:var(--s-2)}
.prod-h .wm{font-variation-settings:"wdth" 122;font-weight:700}
.prod-h .sfx{font-weight:500;color:var(--muted)}
.band .prod-h .sfx{color:var(--band-muted)}
.anchor-note{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:var(--s-2)}
.band .anchor-note{color:var(--band-muted)}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.band .jump{border-color:rgba(237,242,240,.16)}
.jump a{
  font-family:var(--f-display);font-size:13px;font-weight:700;text-decoration:none;
  color:var(--amber-ink);border:1px solid var(--line-strong);border-radius:999px;padding:7px 15px;
  transition:border-color .14s var(--ease);
}
.band .jump a{color:var(--amber);border-color:rgba(237,242,240,.26)}
.jump a:hover{border-color:var(--amber)}

/* koyu bant içindeki açık zemin kuralları geçersiz kalmasın */
.band .feat > div{border-top-color:rgba(237,242,240,.14)}
.band .feat p{color:var(--band-muted)}
.band .feat .n{color:var(--amber)}
.band .feat h4,.band .feat h3{color:var(--band-text)}
.band .tablewrap{border-color:rgba(237,242,240,.16)}
.band .index{border-top-color:rgba(237,242,240,.14)}
.band .index a{border-bottom-color:rgba(237,242,240,.14)}
.band .index a:hover{background:rgba(237,242,240,.05)}
.band .index p{color:var(--band-muted)}
.band .index .ok{color:var(--amber)}

/* ===================================================================
   EFEKT KATMANI
   Fikir: sayfa, kaydırdıkça çalışmaya başlayan bir gösterge paneli.
   Tamamı JS varken devreye girer; JS yoksa her şey son hâliyle durur.
   =================================================================== */

/* --- filaman: üstte kaydırma ilerlemesiyle yanan çizgi --- */
.filament{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:rgba(237,242,240,.09);
}
.filament .fil-dolgu{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,#C97A1D 0%,var(--amber) 70%,#FFC978 100%);
}
.filament .fil-uc{
  position:absolute;top:-3px;left:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 10px 3px rgba(242,164,58,.55);opacity:0;
  transition:opacity .2s linear;will-change:transform;
}

/* --- başlık: kaydırınca daralır --- */
.site-head{transition:height .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, background .22s ease}
.site-head .head-in{transition:height .22s cubic-bezier(.2,.7,.3,1)}
.site-head.kucuk{box-shadow:0 8px 26px -18px rgba(0,0,0,.85)}
.site-head.kucuk .head-in{height:56px}
.site-head.kucuk .brand img{height:23px}
.brand img{transition:height .22s cubic-bezier(.2,.7,.3,1)}

/* --- gösterge tarlası: koyu bantların arkasındaki sönük LED ızgarası --- */
.band{position:relative;overflow:hidden}
.band > .wrap{position:relative;z-index:1}
.led{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(237,242,240,.055) 1.1px, transparent 1.2px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.led canvas{position:absolute;inset:0;display:block}

/* --- bölüm girişleri: dinlenme hâli zaten okunur, giriş yalnızca netleştirir --- */
.js .acilir{transform:translateY(9px);transition:transform .62s cubic-bezier(.2,.7,.3,1)}
.js .acilir:nth-child(2){transition-delay:.06s}
.js .acilir:nth-child(3){transition-delay:.12s}
.js .acilir.acik{transform:none}

/* --- panel derinliği --- */
.demo{will-change:transform}

/* --- lambaların sırayla yanması: renk hep doğru, yalnızca hâle açılır --- */
@keyframes yanma{
  0%{box-shadow:0 0 0 0 rgba(242,164,58,0)}
  55%{box-shadow:0 0 0 8px rgba(242,164,58,.34)}
  100%{box-shadow:0 0 0 4px rgba(242,164,58,.2)}
}
@keyframes yanmaGec{
  0%{box-shadow:0 0 0 0 rgba(181,67,31,0)}
  55%{box-shadow:0 0 0 8px rgba(181,67,31,.3)}
  100%{box-shadow:0 0 0 4px rgba(181,67,31,.16)}
}
.js .demo.yandi .demo-row:nth-child(2) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .05s both}
.js .demo.yandi .demo-row:nth-child(3) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .19s both}
.js .demo.yandi .demo-row:nth-child(4) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .33s both}
.js .demo.yandi .demo-row:nth-child(5) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .47s both}
.js .demo.yandi .demo-row:nth-child(2) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .05s both}
.js .demo.yandi .demo-row:nth-child(3) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .19s both}
.js .demo.yandi .demo-row:nth-child(4) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .33s both}
.js .demo.yandi .demo-row:nth-child(5) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .47s both}

/* sönük lambalar da sıraya girer ama yalnızca hafifçe belirir */
@keyframes sonukBelir{from{opacity:.25}to{opacity:1}}
.js .demo.yandi .lamp:not(.on):not(.late){animation:sonukBelir .5s ease both}

/* --- düğmelerde mıknatıs değil, ölçülü bir kalkma --- */
.btn{transition:transform .16s cubic-bezier(.2,.7,.3,1), background .16s ease, border-color .16s ease}
.btn-primary:hover,.btn-quiet:hover,.btn-ghost:hover{transform:translateY(-1px)}

/* --- sade mod: hareketin tamamı kapalı, her şey son hâlinde --- */
.sade .acilir,.js.sade .acilir{transform:none !important;transition:none !important}
.sade .demo{transform:none !important}
.sade .led canvas{display:none}
.sade .demo.yandi .lamp{animation:none !important}
@media (prefers-reduced-motion:reduce){
  .js .acilir{transform:none !important;transition:none !important}
  .demo{transform:none !important}
  .led canvas{display:none}
  .demo.yandi .lamp{animation:none !important}
  .site-head,.site-head .head-in,.brand img{transition:none}
}

/* henüz açılmamış panel: buton görünümünde ama tıklanmaz */

/* ===================================================================
   ÜRÜNE ÖZGÜ GÖSTERGELER
   Üç panel aynı çerçeveyi paylaşır, içindeki alet farklıdır:
   okulda nöbet çizelgesi, işletmede vade yaşlandırma, bütçede kalem
   çubukları. Her birinde yanan/sönük dili aynı.
   =================================================================== */

/* --- hero başlığı: ikinci cümle gerçekten sönük --- */
.hero h1 .lit{color:var(--amber);text-shadow:0 0 26px rgba(242,164,58,.28)}
.hero h1 .sonuk{color:var(--band-muted)}

/* --- okul: nöbet çizelgesi --- */
.nobet{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.nb-satir{display:grid;grid-template-columns:74px repeat(5,minmax(0,1fr));gap:6px;align-items:center}
.nb-bas span{
  font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}
.nb-ad{
  font-family:var(--f-display);font-size:12px;font-weight:700;color:var(--text);
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nb-h{
  font-family:var(--f-mono);font-size:12px;text-align:center;color:var(--muted);
  background:var(--surface-2);border-radius:6px;padding:7px 2px;line-height:1;
}
.nb-h.bos{
  color:#7A4A08;background:rgba(242,164,58,.2);
  box-shadow:inset 0 0 0 1px rgba(242,164,58,.55);font-weight:600;
}

/* --- işletme ve bütçe: ölçek çubukları --- */
.olcek{padding:16px;display:flex;flex-direction:column;gap:12px}
.ol-satir{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;gap:12px;align-items:center}
.ol-et{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);white-space:nowrap;
}
.ol-satir.gec .ol-et,.ol-satir.asti .ol-et{color:var(--alert);font-weight:600}
.ol-satir.dikkat .ol-et{color:var(--amber-ink);font-weight:600}
.ol-cub{display:block;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.ol-cub i{display:block;height:100%;border-radius:99px;background:var(--line-strong)}
.ol-satir.gec .ol-cub i,.ol-satir.asti .ol-cub i{background:var(--alert)}
.ol-satir.dikkat .ol-cub i{background:var(--amber)}
.ol-tut{
  font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;color:var(--text);
}
.ol-toplam{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-top:4px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--f-display);font-size:13px;font-weight:700;
}
.ol-toplam span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.olcek.kategori .ol-satir{grid-template-columns:minmax(84px,auto) minmax(0,1fr) auto}

/* yeni göstergeler de sırayla yansın */
.js .demo.yandi .olcek .ol-satir:nth-child(1) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .05s both}
.js .demo.yandi .olcek .ol-satir:nth-child(2) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .19s both}
.js .demo.yandi .olcek .ol-satir:nth-child(3) .lamp.on{animation:yanma .78s cubic-bezier(.2,.7,.3,1) .33s both}
.js .demo.yandi .olcek .ol-satir:nth-child(1) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .05s both}
.js .demo.yandi .olcek .ol-satir:nth-child(2) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .19s both}
.js .demo.yandi .olcek .ol-satir:nth-child(3) .lamp.late{animation:yanmaGec .78s cubic-bezier(.2,.7,.3,1) .33s both}

/* çubuklar soldan dolsun */
@keyframes dolum{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .demo.yandi .ol-cub i{transform-origin:left center;animation:dolum .8s cubic-bezier(.2,.7,.3,1) both}
.js .demo.yandi .olcek .ol-satir:nth-child(2) .ol-cub i{animation-delay:.09s}
.js .demo.yandi .olcek .ol-satir:nth-child(3) .ol-cub i{animation-delay:.18s}
.js .demo.yandi .olcek .ol-satir:nth-child(4) .ol-cub i{animation-delay:.27s}

/* boş nöbet gözü belirsin */
@keyframes bosYan{
  0%{box-shadow:inset 0 0 0 1px rgba(242,164,58,.55), 0 0 0 0 rgba(242,164,58,0)}
  55%{box-shadow:inset 0 0 0 1px rgba(242,164,58,.55), 0 0 0 7px rgba(242,164,58,.3)}
  100%{box-shadow:inset 0 0 0 1px rgba(242,164,58,.55), 0 0 0 0 rgba(242,164,58,0)}
}
.js .demo.yandi .nb-h.bos{animation:bosYan 1s cubic-bezier(.2,.7,.3,1) .25s both}
.sade .demo.yandi .nb-h.bos,.sade .demo.yandi .ol-cub i{animation:none !important;transform:none !important}
@media (prefers-reduced-motion:reduce){
  .demo.yandi .nb-h.bos,.demo.yandi .ol-cub i{animation:none !important;transform:none !important}
}

/* panel kendi metin rengini kurar: koyu bandın içindeyken beyaz üstüne
   beyaz yazmasın (toplam satırı bu yüzden görünmüyordu) */
.demo{color:var(--text)}
.band .demo,.band .demo .ol-toplam{color:var(--text)}

/* ===================================================================
   MOBİL
   =================================================================== */

/* CTA artık nav'ın dışında; masaüstünde görünüm aynı kalsın */
.head-in > .cta{
  font-family:var(--f-display);font-size:14px;font-weight:700;text-decoration:none;
  color:var(--ink);background:var(--amber);padding:9px 16px;border-radius:7px;
  white-space:nowrap;flex:0 0 auto;
}
.head-in > .cta:hover{background:#FFB552}
.nav{margin-left:auto}

/* hamburger — yalnızca dar ekranda */
.menu-dugme{
  display:none;flex:0 0 auto;width:40px;height:36px;padding:9px 8px;
  background:transparent;border:1px solid rgba(237,242,240,.24);border-radius:8px;
  cursor:pointer;flex-direction:column;justify-content:space-between;
}
.menu-dugme span{display:block;height:2px;background:var(--band-text);border-radius:2px}
.menu-dugme span:nth-child(2){width:70%}

@media (max-width:860px){
  .head-in{gap:12px}
  .menu-dugme{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-deep);border-bottom:1px solid rgba(237,242,240,.12);
    padding:6px 18px 14px;display:none;
  }
  .nav.acik{display:flex}
  .nav a{padding:13px 6px;font-size:16px;border-radius:0}
  .nav a + a{border-top:1px solid rgba(237,242,240,.09)}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--amber)}
  .site-head{position:sticky}
  .head-in{position:relative}
  .brand img{height:22px}
  .head-in > .cta{padding:8px 13px;font-size:13px}
}

@media (max-width:560px){
  body{font-size:16px}
  section{padding:56px 0}
  .wrap{padding:0 18px}
  .hero{padding:52px 0 56px}
  .page-head{padding:48px 0 40px}

  /* nöbet çizelgesi dar ekranda yatay kayar */
  .nobet-sarmal{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nobet{min-width:420px}

  /* ölçek satırı ikiye bölünür: etiket + tutar üstte, çubuk altta */
  .ol-satir,.olcek.kategori .ol-satir{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"etiket tutar" "cubuk cubuk";
    gap:7px 12px;
  }
  .ol-et{grid-area:etiket;white-space:normal}
  .ol-tut{grid-area:tutar}
  .ol-cub{grid-area:cubuk}

  /* panel satırları: tutar alta insin, sıkışmasın */
  .demo-row{grid-template-columns:9px minmax(0,1fr);gap:12px}
  .demo-row .val{grid-column:2;text-align:left;font-size:13px;padding-top:2px}

  .btn{padding:12px 18px;font-size:15px}
  .btn-row{gap:10px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .feat > div{padding:20px 0}
  .steps li{grid-template-columns:auto minmax(0,1fr);gap:14px}
}

/* ---------------- hakkımızda: köken dizisi ----------------
   Üç ürünün üç ayrı ihtiyaçtan çıktığını yapı olarak anlatır;
   her blok bir yer, bir sorun ve ondan çıkan ürün. */
.koken{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:var(--s-5);border-top:1px solid rgba(237,242,240,.14);
}
.koken .ko{
  padding:26px 30px 26px 0;border-top:0;
  display:flex;flex-direction:column;gap:12px;
}
@media (min-width:861px){
  .koken .ko + .ko{border-left:1px solid rgba(237,242,240,.14);padding-left:30px}
}
@media (max-width:860px){
  .koken .ko + .ko{border-top:1px solid rgba(237,242,240,.14)}
  .koken .ko{padding-right:0}
}
.ko-yer{
  font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);font-variation-settings:"wdth" 86;
}
.koken .ko p{margin:0;font-size:15px;line-height:1.5;color:var(--band-muted)}
.ko-cikti{
  margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.016em;
  color:var(--band-text);
}
.koken-son{
  margin-top:var(--s-4);font-size:clamp(18px,2vw,21px);line-height:1.5;
  color:var(--band-muted);max-width:62ch;
}
.koken-son strong{color:var(--band-text);font-weight:600}

/* ---------------- hakkımızda: amblemin iki hâli ---------------- */
.amblem-an{
  display:grid;gap:var(--s-5);grid-template-columns:auto minmax(0,1fr);align-items:center;
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid rgba(237,242,240,.14);
}
@media (max-width:860px){.amblem-an{grid-template-columns:1fr;gap:var(--s-4)}}
.amblem-ikili{display:flex;gap:22px}
.amblem-ikili figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:11px}
.amblem-ikili svg{display:block;border-radius:15px;box-shadow:0 0 0 1px rgba(237,242,240,.1)}
.amblem-ikili figcaption{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--band-muted);
}
.amblem-an h3{margin-bottom:var(--s-2)}

/* ---------------- hakkımızda: bugün nerede ---------------- */
.bugun{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid rgba(237,242,240,.14);max-width:70ch;
}
.bugun p{margin:0}

/* ---------------- sık sorulanlar ----------------
   details/summary: JavaScript yok, klavyeyle çalışır, arama
   motoru içeriği açık hâliyle okur. */
.sss{margin-top:var(--s-4);border-top:1px solid var(--line)}
.sss details{border-bottom:1px solid var(--line)}
.sss summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;
  padding:22px 0;font-family:var(--f-display);font-size:18px;font-weight:700;
  letter-spacing:-.012em;line-height:1.35;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;
  font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1;
  color:var(--amber-ink);transition:transform .22s var(--ease);
}
.sss details[open] summary::after{transform:rotate(45deg)}
.sss summary:hover{color:var(--amber-ink)}
.sss summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
.sss-c{padding:0 40px 24px 0}
.sss-c p{margin:0;color:var(--muted);font-size:16px;line-height:1.6;max-width:64ch}
.band .sss{border-top-color:rgba(237,242,240,.14)}
.band .sss details{border-bottom-color:rgba(237,242,240,.14)}
.band .sss summary::after{color:var(--amber)}
.band .sss-c p{color:var(--band-muted)}

/* ---------------- bölüm omurgası ----------------
   Soldan aşağı inen ışık: her nokta bir bölüm. Üstteki filamanın
   tekrarı değil — konum bilgisi taşıyor ve tıklanabiliyor.
   Nokta rengi hem kâğıt hem petrol zeminde okunacak ara tonda. */
.omurga{
  position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:35;
  display:none;flex-direction:column;align-items:center;
}
@media (min-width:1180px){ .js .omurga{display:flex} }
.omurga::before{
  content:"";position:absolute;top:9px;bottom:9px;width:1px;
  background:currentColor;color:#8FA3A2;opacity:.35;
}
.om-nokta{
  position:relative;width:24px;height:26px;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;
}
.om-nokta i{
  display:block;width:7px;height:7px;border-radius:50%;background:#8FA3A2;
  opacity:.5;transition:background .22s var(--ease), opacity .22s var(--ease),
    box-shadow .22s var(--ease), transform .22s var(--ease);
}
.om-nokta.gecti i{opacity:.85}
.om-nokta[aria-current="true"] i{
  background:var(--amber);opacity:1;transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(242,164,58,.22);
}
.om-nokta:hover i{opacity:1}
.om-etiket{
  position:absolute;left:26px;white-space:nowrap;
  font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--amber-ink);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:4px 9px;
  opacity:0;transform:translateX(-4px);pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.om-nokta:hover .om-etiket,
.om-nokta:focus-visible .om-etiket{opacity:1;transform:none}
.om-nokta:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:50%}
@media (prefers-reduced-motion:reduce){
  .om-nokta i,.om-etiket,.index a{transition:none}
}

/* durum şeridi (gizlilik ve oyunlar sayfaları) */
.durum-serit{
  display:flex;gap:12px;align-items:flex-start;margin:var(--s-3) 0 var(--s-2);
  padding:14px 16px;border:1px solid rgba(242,164,58,.35);border-radius:11px;
  background:rgba(242,164,58,.08);font-size:15px;line-height:1.5;color:var(--band-muted);
  max-width:60ch;
}
.durum-serit .lamp{margin-top:6px}
.durum-serit strong{color:var(--band-text);display:block;margin-bottom:2px}

/* klavyeyle gezenler menüyü atlayabilsin */
.atla{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amber);color:var(--ink);font-weight:600;
  padding:12px 18px;border-radius:0 0 10px 0;text-decoration:none;
}
.atla:focus{left:0}

/* dokunma hedefleri: iOS ölçüsü 44px */
@media (max-width:900px){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav a{min-height:44px;display:flex;align-items:center}
  .jump a{min-height:44px;display:inline-flex;align-items:center}
}

/* aydınlatma metni: okuma sütunu */
.hukuk{padding:var(--s-5) 0}
.hukuk h2{font-size:20px;margin:var(--s-4) 0 10px}
.hukuk h2:first-of-type{margin-top:var(--s-3)}
.hukuk p{max-width:64ch;margin:0 0 12px;line-height:1.62}
.hukuk a{color:var(--amber-ink);text-underline-offset:3px}
.hukuk-not{margin-top:var(--s-4);padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}

/* bot filtresi: gerçek kullanıcıya görünmez, ekran okuyucudan da gizli */
.kupe{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- panellerin dışındaki iş ----------------
   Web sitesi hizmeti ürün dizininde numaralı bir satırdı; aynı listede
   durunca panellerle eşitleniyor ve ürün hattını hafifletiyordu. Ayrı
   bir blok olarak, daha sakin bir malzemeyle duruyor. */
.ayri-is{
  border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;max-width:62ch;background:var(--surface);
}
.ayri-is h3{font-size:20px;margin:6px 0 10px}
.ayri-is p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.ayri-bag{
  display:inline-block;margin-top:14px;font-family:var(--f-display);
  font-size:15px;font-weight:600;color:var(--amber-ink);text-decoration:none;
}
.ayri-bag:hover{text-decoration:underline;text-underline-offset:3px}
.ayri-bag span{transition:transform .18s var(--ease);display:inline-block}
.ayri-bag:hover span{transform:translateX(4px)}

/* kurucu bloğu: koyu bandın içinde, kökene bağlı bir dipnot değil,
   markanın en güçlü kanıtı */
.kurucu{margin-top:var(--s-5);padding-top:var(--s-3);
  border-top:1px solid rgba(237,242,240,.14);max-width:70ch}
.kurucu p{font-size:16px;line-height:1.62;margin:0 0 12px}
.kurucu p:last-child{margin-bottom:0}
.kurucu strong{color:var(--band-text)}
@media (prefers-reduced-motion:reduce){.ayri-bag span{transition:none}}

/* ---------------- sizi arayalım ----------------
   Uzun formu doldurmak istemeyen için kısa yol. Ana formun yanında
   ikincil durması gerekiyor: daha sakin zemin, küçük alanlar. */
.ara-kutu{
  margin-top:var(--s-4);padding:22px 24px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
}
.ara-kutu h4{font-size:16px;margin:0 0 6px}
.ara-kutu > p{margin:0 0 16px;font-size:15px;color:var(--muted);line-height:1.5}
.ara-form .field{margin-bottom:12px}
.ara-form .btn{width:100%;margin-top:4px}
.ara-sonuc{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
.ara-sonuc strong{display:block;margin-bottom:2px}
.ara-sonuc a{color:var(--amber-ink)}
@media (min-width:720px){
  .ara-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:end}
  .ara-form .btn{grid-column:1/-1}
  .ara-form .form-note{grid-column:1/-1}
}

/* panellerin dışındaki iki iş yan yana */
.ayri-ikili{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;margin-top:var(--s-3);
}
.ayri-ikili .ayri-is{max-width:none;margin:0}
.ayri-is strong{color:var(--text);font-weight:600}

/* oyun adları: bölüm içinde ikinci düzey başlık */
.oyun-ad{font-family:var(--f-display);font-size:20px;margin:var(--s-3) 0 6px;
  display:flex;align-items:center;gap:11px}
.oyun-rozet{width:38px;height:38px;border-radius:10px;flex:0 0 auto;
  box-shadow:0 3px 9px rgba(12,46,51,.22)}
.oyun-ad.ikinci{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line)}
.band .oyun-ad.ikinci{border-top-color:rgba(237,242,240,.14)}

/* Oyun ekran görüntüsü. Telefon oranında (640x1280), .feat ızgarasının yanında.
   Dar ekranda üstte ortalanır, geniş ekranda solda sabit sütun olur. */
.oyun-sahne{margin-top:var(--s-4)}
.oyun-ekran{margin:0 auto;max-width:224px}
.oyun-ekran img{
  display:block;width:100%;height:auto;
  border-radius:13px;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(12,46,51,.18);
  background:#0d1420;
}
.oyun-ekran figcaption{
  font-family:var(--f-mono);font-size:12px;color:var(--muted);
  text-align:center;margin-top:10px;
}
.oyun-sahne .feat{margin-top:var(--s-4)}
@media (min-width:900px){
  .oyun-sahne{display:grid;grid-template-columns:224px minmax(0,1fr);gap:var(--s-4);align-items:start}
  .oyun-sahne .feat{margin-top:0}
  .oyun-sahne .feat > div:nth-child(-n+2){border-top:0;padding-top:0}
}
.band .oyun-ekran img{border-color:rgba(237,242,240,.18);box-shadow:0 14px 34px rgba(0,0,0,.32)}
.band .oyun-ekran figcaption{color:var(--band-muted)}

/* Oyun düğmeleri: ikon + ad. Girişte dört oyun yan yana (dar ekranda 2x2),
   her oyunun ekran görüntüsünün altında o oyunu açan amber düğme. */
.btn-oyun{padding:11px 18px 11px 12px;gap:10px}
.btn-oyun img{width:26px;height:26px;border-radius:7px;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.oyun-dugmeler{gap:10px}
.oyun-ac{margin-top:14px;width:100%;justify-content:center;padding:12px 16px 12px 12px}
@media (max-width:560px){
  /* uzun adlar 2x2'de satır kırıyordu; tek sütun, hepsi aynı boy */
  .oyun-dugmeler .btn-oyun{flex:1 1 100%;justify-content:flex-start;padding:12px 14px}
}

/* Köken kartlarının görselleri: seri hâlinde dört illüstrasyon, tek amber vurgu. */
.ko-gorsel{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:12px;
  border:1px solid rgba(237,242,240,.14);background:#0d2a2f;margin-bottom:2px}

/* Sayfa girişindeki sahne illüstrasyonu (web sitesi) */
.sahne{margin:0}
.sahne img{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:16px;
  border:1px solid rgba(237,242,240,.16);box-shadow:0 18px 44px rgba(0,0,0,.35);background:#0d2a2f}
.sahne figcaption{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;color:var(--band-muted);margin-top:12px}

/* ---------------- Rafta indirme kutusu ---------------- */
/* form koyu bandın içinde beyaz kart: bandın açık yazı rengini devralmasın */
#rafta-form{color:var(--text)}
#rafta-form a{color:inherit}
#rafta-sonuc{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.rafta-okul{font-family:var(--f-display);font-weight:700;font-size:15px;margin:0 0 12px}
.rafta-dosyalar{display:flex;flex-direction:column;gap:12px}
.rafta-dosya{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}