:root{
  --bg:#f7f8f7; --yuzey:#fff; --yuzey2:#eef1ef;
  --murekkep:#1b2220; --sonuk:#5f6b68; --cizgi:#d8dedb;
  --vurgu:#0f6b5c; --vurgu-zemin:#e4efeb;
  --uyari:#a8621a; --uyari-zemin:#f6ece0; --kirmizi:#9d3427;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121614; --yuzey:#191f1d; --yuzey2:#212927;
  --murekkep:#e6ece9; --sonuk:#93a19d; --cizgi:#2c3733;
  --vurgu:#4fbfa8; --vurgu-zemin:#16302b;
  --uyari:#d99149; --uyari-zemin:#33251a; --kirmizi:#e08477;
}}
:root[data-theme="dark"]{
  --bg:#121614; --yuzey:#191f1d; --yuzey2:#212927;
  --murekkep:#e6ece9; --sonuk:#93a19d; --cizgi:#2c3733;
  --vurgu:#4fbfa8; --vurgu-zemin:#16302b;
  --uyari:#d99149; --uyari-zemin:#33251a; --kirmizi:#e08477;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--murekkep);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.sar{max-width:940px;margin:0 auto;padding:0 24px 80px}
h1{font-family:Newsreader,Georgia,serif;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;margin:0;text-wrap:balance}
h2{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:1.25rem;margin:0}
p{margin:0}
.etiket{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sonuk)}

header{padding:56px 0 0}
.rozet{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  background:var(--vurgu-zemin);color:var(--vurgu);border-radius:2px;
  font-size:.8rem;font-weight:500;margin-bottom:20px}
.rozet svg{width:14px;height:14px;flex:none}
.alt{margin-top:16px;color:var(--sonuk);max-width:560px}

/* birak alani */
.birak{margin-top:36px;border:2px dashed var(--cizgi);background:var(--yuzey);
  padding:44px 28px;text-align:center;transition:border-color .15s,background .15s}
.birak.uzerinde{border-color:var(--vurgu);background:var(--vurgu-zemin)}
.birak h2{margin-bottom:6px}
.birak p{color:var(--sonuk);font-size:.92rem}
.dugmeler{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button{font:inherit;font-size:.92rem;padding:9px 18px;border:1px solid var(--vurgu);
  background:var(--vurgu);color:#fff;cursor:pointer;border-radius:2px}
button.ikincil{background:transparent;color:var(--vurgu)}
button:disabled{opacity:.5;cursor:default}
button:focus-visible{outline:2px solid var(--uyari);outline-offset:2px}
input[type=file]{display:none}

/* akis — "islem yaparken sonuc aksin" standardi: yuzde YETMEZ, ne olduguu yaz */
.akis{margin-top:26px;display:none;flex-direction:column;gap:2px;
  background:var(--yuzey);border:1px solid var(--cizgi);padding:16px 18px;
  font-family:"IBM Plex Mono",monospace;font-size:.82rem;max-height:210px;overflow-y:auto}
.akis.acik{display:flex}
.akis div{color:var(--sonuk)}
.akis div.son{color:var(--murekkep)}
.akis div.hata{color:var(--kirmizi)}

/* sonuc */
.sonuc{margin-top:30px;display:none}
.sonuc.acik{display:block}
.ozet{display:flex;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);flex-wrap:wrap}
.ozet div{background:var(--bg);padding:14px 18px;flex:1;min-width:120px}
.ozet b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.35rem;
  color:var(--vurgu);font-variant-numeric:tabular-nums;line-height:1.1}
.ozet span{font-size:.76rem;color:var(--sonuk)}
.dogrulama{margin-top:16px;padding:13px 16px;background:var(--vurgu-zemin);
  border-left:3px solid var(--vurgu);font-size:.9rem}
.dogrulama.kismi{background:var(--uyari-zemin);border-left-color:var(--uyari)}
.kaydir{overflow-x:auto;margin-top:18px;border:1px solid var(--cizgi);background:var(--yuzey)}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--cizgi);white-space:nowrap}
th{font-family:"IBM Plex Mono",monospace;font-size:.67rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sonuk);background:var(--yuzey2);position:sticky;top:0}
td.n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
tbody tr:hover{background:var(--yuzey2)}
.kilit{padding:18px;background:var(--uyari-zemin);border-left:3px solid var(--uyari);
  margin-top:14px;font-size:.9rem}
.indir{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--cizgi);
  color:var(--sonuk);font-size:.83rem}
@media(max-width:600px){.sar{padding:0 18px 60px}.birak{padding:32px 18px}}

/* ---- site iskeleti (Kademe 5) ---- */
nav{display:flex;gap:22px;align-items:center;padding:20px 0;flex-wrap:wrap;
  border-bottom:1px solid var(--cizgi)}
nav a{color:var(--sonuk);text-decoration:none;font-size:.9rem}
nav a:hover,nav a[aria-current]{color:var(--vurgu)}
nav .marka{font-family:Newsreader,Georgia,serif;font-size:1.05rem;font-weight:600;
  color:var(--murekkep);margin-right:auto}
.kartlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;margin-top:28px}
.kart{background:var(--yuzey);border:1px solid var(--cizgi);padding:20px 22px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.kart:hover{border-color:var(--vurgu)}
.kart h3{font-family:Newsreader,Georgia,serif;font-size:1.1rem;margin:0}
.kart p{font-size:.89rem;color:var(--sonuk)}
.kart .fiyat{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vurgu)}
.kart .fiyat.ucretli{color:var(--uyari)}
.plan{margin-top:44px;background:var(--yuzey);border:1px solid var(--cizgi);padding:26px}
.plan h2{margin-bottom:8px}
.plan .tutar{font-family:"IBM Plex Mono",monospace;font-size:2rem;color:var(--vurgu);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:10px 0 4px}

/* ═══════════ ARAÇ KABUĞU — üretilen araç sayfalarının ortak parçaları ═══════════ */
.girdi,.cikti{width:100%;box-sizing:border-box;margin-top:18px;min-height:150px;
  padding:14px 16px;background:var(--yuzey);border:1px solid var(--cizgi);
  color:var(--murekkep);font-family:"IBM Plex Mono",monospace;font-size:.85rem;
  line-height:1.65;resize:vertical}
.girdi:focus{outline:none;border-color:var(--vurgu)}
.cikti{background:var(--vurgu-zemin);border-color:var(--vurgu)}
.baglanti{background:none;border:none;padding:6px 0;margin-top:8px;color:var(--vurgu);
  font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ayarlar{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end}
.ayar{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--sonuk)}
.ayar b{color:var(--vurgu);font-family:"IBM Plex Mono",monospace}
.ayar select,.ayar input[type=text],.ayar input[type=number]{padding:8px 10px;
  background:var(--yuzey);border:1px solid var(--cizgi);color:var(--murekkep);
  font-family:inherit;font-size:.88rem;min-width:150px}
.ayar input[type=range]{accent-color:var(--vurgu);min-width:170px}
.ayar:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:8px;padding-bottom:9px}
.ayar input[type=checkbox]{accent-color:var(--vurgu);width:16px;height:16px}
button.calistir{margin-top:20px;padding:12px 26px;background:var(--vurgu);color:#fff;
  border:none;font-family:inherit;font-size:.94rem;cursor:pointer}
button.calistir:hover{filter:brightness(1.1)}
button.calistir:disabled{opacity:.5;cursor:default}
.akis div.tamam{color:var(--vurgu)}
.birak svg{width:26px;height:26px;color:var(--sonuk);margin-bottom:10px}
.birak strong{display:block;font-family:Newsreader,Georgia,serif;font-size:1.1rem;font-weight:600}
.birak span{display:block;margin-top:5px;color:var(--sonuk);font-size:.9rem}
.birak.dolu{border-style:solid;border-color:var(--vurgu)}
.birak.dolu svg{color:var(--vurgu)}
.onizleme{display:block;max-width:100%;max-height:340px;margin-top:20px;
  border:1px solid var(--cizgi);background:
    repeating-conic-gradient(var(--yuzey) 0 25%,transparent 0 50%) 50%/18px 18px}
.dosyalar{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.dosyalar button{padding:7px 12px;font-size:.8rem;font-family:"IBM Plex Mono",monospace}
.palet{margin-top:20px;display:flex;gap:1px;background:var(--cizgi);
  border:1px solid var(--cizgi);flex-wrap:wrap}
.renk{flex:1;min-width:96px;height:96px;border:none;cursor:pointer;position:relative;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}
.renk span{font-family:"IBM Plex Mono",monospace;font-size:.68rem;padding:3px 6px;
  background:rgba(0,0,0,.55);color:#fff;letter-spacing:.04em}
.renk.kopyalandi span::after{content:" ✓"}

/* ---- araç ızgarası (ana sayfa ve grup sayfaları) ---- */
.grup{margin-top:40px}
.grup > h2{font-family:Newsreader,Georgia,serif;font-size:1.35rem;margin:0 0 4px}
.grup > p{color:var(--sonuk);font-size:.9rem;margin:0}
.izgara{margin-top:16px;display:grid;gap:1px;background:var(--cizgi);
  border:1px solid var(--cizgi);grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.oge{background:var(--bg);padding:16px 18px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:5px;transition:background .12s}
.oge:hover{background:var(--vurgu-zemin)}
.oge b{font-size:.96rem;font-weight:600}
.oge span{font-size:.83rem;color:var(--sonuk);line-height:1.5}
.oge .rozetcik{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--uyari);margin-top:2px}
.sss{margin-top:44px;border-top:1px solid var(--cizgi);padding-top:8px}
.sss details{border-bottom:1px solid var(--cizgi);padding:14px 0}
.sss summary{cursor:pointer;font-weight:500;list-style:none}
.sss summary::-webkit-details-marker{display:none}
.sss summary::before{content:"+ ";color:var(--vurgu);font-family:"IBM Plex Mono",monospace}
.sss details[open] summary::before{content:"− "}
.sss p{margin:10px 0 0;color:var(--sonuk);font-size:.92rem;max-width:640px}
.gizlilik{margin-top:30px;padding:14px 18px;background:var(--vurgu-zemin);
  border-left:3px solid var(--vurgu);font-size:.88rem;color:var(--sonuk)}

/* ═══════════ İKON · SÜZGEÇ · KATEGORİ BLOĞU (01.09 rakip incelemesinden) ═══════════ */
.oge{position:relative;padding-left:18px}
.oge .ikon{margin-bottom:2px}
.oge[hidden]{display:none}
.grup[hidden]{display:none}

.suzgec{margin-top:28px}
.suzgec input[type=search]{width:100%;box-sizing:border-box;padding:13px 16px;
  background:var(--yuzey);border:1px solid var(--cizgi);color:var(--murekkep);
  font-family:inherit;font-size:.95rem}
.suzgec input[type=search]:focus{outline:none;border-color:var(--vurgu)}
.cipler{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.cip{padding:6px 14px;background:transparent;border:1px solid var(--cizgi);
  color:var(--sonuk);font-family:inherit;font-size:.83rem;cursor:pointer;border-radius:999px}
.cip:hover{border-color:var(--vurgu);color:var(--vurgu)}
.cip.secili{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.bulunan{margin:12px 0 0;font-size:.85rem;color:var(--sonuk);
  font-family:"IBM Plex Mono",monospace}

.bloklar{margin-top:32px;display:grid;gap:1px;background:var(--cizgi);
  border:1px solid var(--cizgi);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.blok{background:var(--bg);padding:22px 20px 20px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:4px;border-top:2px solid var(--renk);
  transition:background .12s}
.blok:hover{background:var(--vurgu-zemin)}
.blok b{font-family:Newsreader,Georgia,serif;font-size:1.15rem;font-weight:600;margin-top:6px}
.blok .sayi{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--renk)}
.blok .one{font-size:.85rem;color:var(--sonuk);margin-top:6px}
.blok .one em{font-style:normal;color:var(--murekkep)}
.hepsiBag{margin-top:16px;font-size:.92rem}
.hepsiBag a{color:var(--vurgu);text-decoration:none}
.hepsiBag a:hover{text-decoration:underline;text-underline-offset:3px}

/* ═══════════ YASAL SAYFALAR ═══════════ */
.yasal-satir{margin-bottom:10px}
.yasal-satir a{color:var(--sonuk);text-decoration:none;font-size:.84rem}
.yasal-satir a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:3px}
.yasal{margin-top:34px;max-width:660px}
.yasal-bolum{padding:22px 0;border-top:1px solid var(--cizgi)}
.yasal-bolum h2{font-family:Newsreader,Georgia,serif;font-size:1.18rem;margin:0 0 10px}
.yasal-bolum p{margin:0 0 12px;color:var(--sonuk);font-size:.94rem;line-height:1.75}
.yasal-bolum p:last-child{margin-bottom:0}
