/* ============================================================
   MİSALİ2 TEMASI — Feda Wiki'yi Misali2 tasarım diline giydirir
   styles.css'ten SONRA yüklenir; token + bileşen düzeyinde ezer.
   ============================================================ */

@font-face{
  font-family:'Fenomen Slab';
  src:url('assets/Fenomen Slab SCN Light.otf') format('opentype');
  font-display:swap;
}

:root{
  /* zemin */
  --bg:#0b0807;
  --bg-deep:#080605;
  --bg-elevated:#171110;
  --bg-soft:#201814;
  --panel:rgba(23,17,16,.92);
  --panel-strong:#1e1613;
  --panel-hover:#241a14;
  /* çizgiler */
  --line:rgba(89,67,46,.42);
  --line-strong:rgba(232,179,75,.45);
  /* metin */
  --text:#ece0cb;
  --text-soft:#c9b8a0;
  --text-muted:#a8947c;
  /* vurgu */
  --gold:#e8b34b;
  --gold-bright:#f6d98d;
  --gold-deep:#a97e35;
  --teal:#8fce6a;        /* ikincil vurgu: Misali yeşili */
  --teal-soft:#b5e096;
  --green:#8fce6a;
  --red:#e0704e;         /* Misali köz turuncusu */
  /* biçim */
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --shadow-soft:0 10px 30px rgba(0,0,0,.4);
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
  --radius-sm:9px;
}

/* ---------- zemin ---------- */
body{
  background:
    radial-gradient(circle at 15% -10%, rgba(232,120,50,.10), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(232,140,50,.06), transparent 31rem),
    var(--bg);
}

/* ---------- tipografi ---------- */
h1,h2,h3,h4,.brand,.hero-copy h1,.panel-kicker ~ h3{
  font-family:'Fenomen Slab','Trajan Pro',Georgia,serif !important;
  letter-spacing:.6px;
}
.hero-copy h1 span{color:var(--gold-bright)}

/* ---------- üst bar ---------- */
.site-header{
  background:linear-gradient(180deg, rgba(13,9,7,.97), rgba(13,9,7,.9));
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
}

/* ---------- altın butonlar ---------- */
.hero-gear-cta,
.btn-primary,
button.primary{
  background:linear-gradient(180deg,#f0c264,#c8912f) !important;
  color:#241708 !important;
  border:none !important;
  font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  box-shadow:0 3px 16px rgba(232,179,75,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s, box-shadow .25s;
}
.hero-gear-cta:hover,
.btn-primary:hover,
button.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(232,179,75,.5), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- paneller / kartlar: köz üst çizgisi ---------- */
.system-summary-panel,
.category-card,
.hero-panel{
  position:relative;overflow:hidden;
}
.system-summary-panel::after,
.category-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(232,179,75,.55),transparent);
  pointer-events:none;
}

/* ---------- tablolar: Misali tablo dili ---------- */
.enchant-table th,
table th{
  color:var(--gold);
  letter-spacing:2px;text-transform:uppercase;font-size:11.5px;
}
tbody tr:hover td{background:rgba(232,179,75,.045)}

/* ---------- eşya ikonları: slot kutusu + aura ---------- */
.item-icon-img{image-rendering:pixelated}
[class*="item-icon"]{position:relative}

/* aura dalgası — %20 opaklık, kart ikonlarının arkasında */
@keyframes misaliAura{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.12)}
  to{transform:rotate(360deg) scale(1)}
}
.misali-aura::before{
  content:'';position:absolute;left:50%;top:50%;width:84px;height:84px;
  margin:-42px 0 0 -42px;border-radius:50%;pointer-events:none;opacity:.2;z-index:0;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(232,140,40,.9) 40deg, transparent 95deg,
    rgba(190,70,25,.8) 150deg, transparent 210deg,
    rgba(232,179,75,.9) 265deg, transparent 330deg);
  filter:blur(9px);
}
.misali-aura > *{position:relative;z-index:1}

/* ---------- köz kanvası ---------- */
#misali-embers{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}
/* NOT: .site-header buraya EKLENMEZ — position:relative, styles.css'teki
   position:sticky'yi ezip üst barın kaydırmada kaybolmasına yol açıyordu. */
main,footer,.site-footer{position:relative;z-index:1}

/* ---------- harita GS banner'ları (gear sayfası) ---------- */
.misali-maps{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:18px}
.misali-map{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  min-width:0;gap:10px;padding:0 clamp(14px,3vw,30px);
  aspect-ratio:1920/400;min-height:96px;
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  background-size:cover;background-position:center;
  transition:border-color .18s, box-shadow .18s;
}
.misali-map::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(8,5,4,.82), rgba(8,5,4,.25) 38%, rgba(8,5,4,.15) 62%, rgba(8,5,4,.8));
}
.misali-map:hover{border-color:rgba(232,179,75,.5);box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 18px rgba(232,140,40,.15)}
.misali-map .ad{
  position:relative;font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(19px,3.4vw,34px);color:#f7ecd4;letter-spacing:1px;
  text-shadow:0 2px 6px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8);
}
.misali-map .mgs{
  position:relative;font-size:clamp(13px,1.9vw,19px);font-weight:700;color:var(--gold);
  background:rgba(10,7,5,.62);border:1px solid rgba(232,179,75,.45);border-radius:999px;
  padding:.35em 1em;text-shadow:0 1px 4px rgba(0,0,0,.9);white-space:nowrap;
  box-shadow:0 0 16px rgba(232,140,40,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.misali-map .mgs b{font-family:'Fenomen Slab',Georgia,serif;font-size:1.25em;letter-spacing:.5px}
@media (max-width:560px){
  .misali-map{flex-direction:column;justify-content:center;aspect-ratio:auto;padding:16px 12px;gap:8px;text-align:center}
  .misali-map::before{background:rgba(8,5,4,.55)}
}

/* ---------- drop sayfası header banner ---------- */
.misali-banner{
  position:relative;display:flex;align-items:flex-end;
  aspect-ratio:1522/563;min-height:180px;
  padding:clamp(14px,3vw,28px);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  margin:0 0 22px;
}
.misali-banner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,5,4,.05) 40%, rgba(8,5,4,.72) 82%, rgba(8,5,4,.88));
}
.misali-banner .bn-inner{position:relative}
.misali-banner .bn-title{
  font-family:'Fenomen Slab',Georgia,serif;
  font-size:clamp(24px,4.2vw,42px);color:#f7ecd4;letter-spacing:1.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.95), 0 0 30px rgba(190,80,232,.45);
}
.misali-banner .bn-sub{margin-top:4px;font-size:clamp(12px,1.6vw,14.5px);color:var(--text-muted);text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* ---------- Nesne Market bağlantı rozeti ---------- */
.misali-market-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:var(--gold-bright);padding:7px 14px;border-radius:999px;
  border:1px solid rgba(232,179,75,.4);background:rgba(20,13,9,.72);
  transition:border-color .2s, box-shadow .2s;white-space:nowrap;
}
.misali-market-link:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(232,179,75,.25)}
.header-inner > .misali-market-link{margin-left:auto}  /* üst satırın sağ ucuna yasla */
.category-nav .misali-market-link{display:none;margin:10px 14px}
@media (max-width:900px){
  .header-inner > .misali-market-link{display:none}
  .category-nav .misali-market-link{display:inline-flex}
}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion: no-preference){
  .misali-aura::before{animation:misaliAura 7s linear infinite}
}
@media (prefers-reduced-motion: reduce){
  .misali-aura::before{animation:none}
  #misali-embers{display:none}
}

/* ---------- Drop listesi eşya ikonları ---------- */
.drop-esya{display:inline-flex;align-items:center;gap:9px;min-width:0;text-align:left}
.drop-esya .ad{min-width:0}
.drop-ikon{
  flex:0 0 26px;width:26px;height:26px;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%, rgba(229,166,61,.12), rgba(20,12,9,.6));
  border:1px solid rgba(229,166,61,.18);
}
.drop-ikon img{
  width:22px;height:22px;object-fit:contain;display:block;
  image-rendering:pixelated;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.drop-ikon img.siluet{opacity:.45;image-rendering:auto}
.drop-card > header h3 .drop-esya{gap:10px}
.drop-card > header .drop-ikon{flex:0 0 30px;width:30px;height:30px}
.drop-card > header .drop-ikon img{width:25px;height:25px}
.drop-detay-baslik h2 .drop-esya{gap:12px}
.drop-detay-baslik .drop-ikon{flex:0 0 42px;width:42px;height:42px;border-radius:9px}
.drop-detay-baslik .drop-ikon img{width:34px;height:34px}
@media (max-width:520px){
  .drop-ikon{flex:0 0 22px;width:22px;height:22px}
  .drop-ikon img{width:19px;height:19px}
}

/* ============================================================
   AAA RÖTUŞLARI — panel çerçeveleri, başlık rozetleri, ikon yığını
   ============================================================ */

/* ---------- gövdeli panel: metin artık boşlukta durmuyor ---------- */
.system-summary-panel{
  padding:clamp(24px,3vw,38px) clamp(20px,3vw,36px) clamp(24px,3vw,34px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(130% 85% at 50% 0%, rgba(232,140,50,.10), transparent 62%),
    linear-gradient(168deg, rgba(36,23,18,.94), rgba(18,12,10,.95));
  box-shadow:0 28px 72px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,224,160,.07);
}
/* köşelerde ince altın köşebent yok — yalnızca üstteki hairline (yukarıda tanımlı) */

/* ---------- başlık rozeti ---------- */
.panel-kicker,
.section-heading .eyebrow{
  display:inline-flex !important;align-items:center;gap:8px;
  padding:5px 14px 5px 11px;border-radius:999px;
  background:rgba(232,179,75,.09);
  border:1px solid rgba(232,179,75,.3);
  color:var(--gold-bright);
  font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}
.panel-kicker::before,
.section-heading .eyebrow::before{
  content:'';flex:0 0 5px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 9px rgba(232,179,75,.9);
}
.section-heading .eyebrow .eyebrow-dot{display:none}

/* ---------- başlık altı altın ayraç ---------- */
.system-summary-head::after{
  width:186px;height:2px;margin:19px auto 0;border-radius:2px;
  background:linear-gradient(90deg,
    transparent, rgba(232,179,75,.12) 16%, var(--gold-bright) 50%,
    rgba(232,179,75,.12) 84%, transparent);
  box-shadow:0 0 14px rgba(232,179,75,.4);
}
.system-summary-head h3{
  color:var(--gold-bright) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.7), 0 0 34px rgba(232,160,60,.16);
}
.section-heading h2{
  color:var(--text);
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.section-heading h2::after{
  content:'';display:block;width:64px;height:2px;margin:16px 0 0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bright),rgba(232,179,75,0));
}

/* ---------- madde listesi: soldaki altın kenar + hover ---------- */
.system-summary-list li{
  background:linear-gradient(100deg, rgba(46,29,20,.72), rgba(22,15,12,.6)) !important;
  border-left-width:3px !important;
  transition:border-color .22s, transform .18s, box-shadow .25s;
}
.system-summary-list li:hover{
  border-color:rgba(232,179,75,.4);
  border-left-color:var(--gold-bright) !important;
  transform:translateX(3px);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}

/* ---------- efsun tabloları ---------- */
.enchant-table-wrap{
  background:linear-gradient(168deg, rgba(32,21,16,.85), rgba(18,12,10,.8)) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.enchant-table tbody tr{transition:background .16s}
.enchant-table tbody tr:hover{background:rgba(232,179,75,.07)}
.enchant-table tbody td:last-child{color:var(--gold-bright);font-weight:700}
.enchant-table thead th{background:linear-gradient(180deg,#33200f,#241610) !important}

/* ---------- kategori kartı: gerçek eşya ikonu yığını ---------- */
.category-card-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.category-card-stack{position:relative;z-index:1;display:flex;padding-right:2px}
.category-card-stack .ccs{
  display:grid;place-items:center;
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;
  background:radial-gradient(circle at 50% 34%, rgba(var(--category-accent-rgb),.18), rgba(12,8,6,.92));
  border:1px solid rgba(var(--category-accent-rgb),.32);
  box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  transform:rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * -2px));
  transition:transform .3s cubic-bezier(.2,.9,.3,1), border-color .25s, box-shadow .3s, margin .3s cubic-bezier(.2,.9,.3,1);
}
.category-card-stack .ccs + .ccs{margin-left:-16px}
.category-card-stack .ccs img{
  width:32px;height:32px;object-fit:contain;
  image-rendering:pixelated;filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));
}
.category-card:hover .category-card-stack .ccs,
.category-card:focus-visible .category-card-stack .ccs{
  transform:rotate(0) translateY(-3px);
  border-color:rgba(var(--category-accent-rgb),.6);
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 18px rgba(var(--category-accent-rgb),.24);
}
.category-card:hover .category-card-stack .ccs + .ccs,
.category-card:focus-visible .category-card-stack .ccs + .ccs{margin-left:-5px}
/* karta ışık süzülmesi */
.category-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg, transparent 38%, rgba(255,225,170,.07) 50%, transparent 62%);
  transform:translateX(-120%);transition:transform .65s ease;
}
.category-card:hover::before{transform:translateX(120%)}
@media (max-width:520px){
  .category-card-stack .ccs{flex-basis:38px;width:38px;height:38px;border-radius:10px}
  .category-card-stack .ccs img{width:26px;height:26px}
}

/* ============================================================
   ÖRNEK ARTI BASMA + EFSUN DEĞİŞTİRME PANELİ
   Tanıtım sayfasından taşındı; token'lar panele özel tanımlanır.
   ============================================================ */
.ab{
  --gold2:var(--gold-bright);
  --gold-dim:rgba(232,179,75,.5);
  --txt:var(--text);
  --txt-dim:var(--text-soft);
  --txt-faint:var(--text-muted);
  --line2:rgba(232,179,75,.3);
  --radius:var(--radius-lg);
  max-width:580px;margin:30px auto 0;
}
.ab button{
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
/* ============================ ARTI BASMA + EFSUN DEĞİŞTİRME ============================ */
.ab{
  position:relative;padding:18px 16px 18px;border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,140,50,.07), transparent 60%),
    linear-gradient(168deg,#1e1613,#141010);
  border:1px solid var(--line);
}
.ab-kicker{
  text-align:center;font-family:'Fenomen Slab',Georgia,serif;
  font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  text-shadow:0 0 22px rgba(232,179,75,.35);
}
.ab-kicker::after{
  content:'';display:block;width:56px;height:1px;margin:9px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
/* eşya seçici şeridi */
/* uyarı rozeti */
.ab-uyari{
  display:block;width:fit-content;max-width:100%;margin:11px auto 0;
  padding:6px 14px;border-radius:999px;text-align:center;
  font-size:10.5px;letter-spacing:.9px;line-height:1.45;font-weight:700;
  color:var(--txt-dim);
  background:rgba(224,112,78,.09);border:1px solid rgba(224,112,78,.34);
}
.ab-secici{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;justify-items:center;
  margin-top:13px;padding-bottom:13px;border-bottom:1px solid var(--line);
}
.ab-esya{
  position:relative;width:42px;height:42px;padding:3px;border-radius:9px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%, #2a1f18, #14100d);
  border:1px solid var(--line);
  transition:border-color .2s, transform .16s, box-shadow .22s;
}
.ab-esya img{width:auto;height:auto;max-width:30px;max-height:36px;image-rendering:pixelated}
.ab-esya:hover{transform:translateY(-2px);border-color:var(--gold-dim)}
.ab-esya.on{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(232,179,75,.3), 0 0 16px rgba(232,160,60,.35);
  background:radial-gradient(circle at 50% 36%, #3a2a19, #17120e);
}
/* oyun içi tooltip görünümü */
.ab-tip{
  position:relative;margin-top:13px;padding:13px 14px 12px;
  background:rgba(16,16,18,.9);border:2px solid rgba(96,88,70,.85);
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05);
}
.ab-tip .ko{
  position:absolute;width:14px;height:14px;
  background-size:100% 100%;background-repeat:no-repeat;
  image-rendering:pixelated;pointer-events:none;
  filter:invert(1) sepia(.55) saturate(2.4) hue-rotate(-8deg) brightness(1.02);
  opacity:.85;
}
.ab-tip .ko.su{left:2px;top:2px;background-image:url('assets/esya/kose_su.png')}
.ab-tip .ko.sa{right:2px;top:2px;background-image:url('assets/esya/kose_sa.png')}
.ab-tip .ko.au{left:2px;bottom:2px;background-image:url('assets/esya/kose_au.png')}
.ab-tip .ko.aa{right:2px;bottom:2px;background-image:url('assets/esya/kose_aa.png')}
/* basma anındaki altın flaş */
@keyframes abFlas{0%{box-shadow:0 0 0 0 rgba(255,214,120,.65), 0 14px 34px rgba(0,0,0,.6)}100%{box-shadow:0 0 0 16px rgba(255,214,120,0), 0 14px 34px rgba(0,0,0,.6)}}
.ab-tip.flas{animation:abFlas .7s ease-out}

.ab-bas{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.07)}
.ab-ikon{
  flex:0 0 40px;width:40px;height:40px;padding:3px;border-radius:8px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%, #2a1f18, #14100d);
  border:1px solid rgba(96,88,70,.7);
}
.ab-ikon img{width:auto;height:auto;max-width:30px;max-height:34px;image-rendering:pixelated}
.ab-adblok{display:flex;flex-direction:column;min-width:0}
.ab-adblok b{font-size:14px;color:#ffd21e;text-shadow:1px 1px 0 rgba(0,0,0,.55)}
.ab-adblok b span{color:#ffd21e}
.ab-adblok small{font-size:11px;color:#cfc4a8}
.ab-dal{
  margin-left:auto;flex:0 0 auto;
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.ab-dal.yuksek{color:#ffe6ae;background:rgba(232,179,75,.18);border:1px solid rgba(232,179,75,.6)}
.ab-dal.dusuk{color:#9fd6a8;background:rgba(143,206,106,.12);border:1px solid rgba(143,206,106,.4)}

.ab-govde{padding-top:8px}
.ab-bos{font-size:12px;color:#a89e88;text-align:center;padding:10px 8px 4px}
.ab-bos b{color:#cfc4a8}
.ab-sat.onizleme{color:#8d8574;font-weight:600;font-size:11.5px}
.ab-sat.onizleme b{color:#b9ad92}
.ab-ayrac{
  display:flex;align-items:center;gap:8px;margin:8px 0 5px;
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:#f3e6c8;
}
.ab-ayrac small{letter-spacing:1px;color:#b4a88c;font-weight:700}
.ab-ayrac::before,.ab-ayrac::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.ab-sat{
  font-size:12.5px;font-weight:700;padding:2px 0;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  display:flex;align-items:center;gap:7px;
}
.ab-sat.sabit{color:#ffca6a}
.ab-sat.efsun{color:#8fd07a;animation:abSatIn .32s ease both}
@keyframes abSatIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.ab-sat .lv{
  flex:0 0 auto;font-size:9px;letter-spacing:.8px;font-weight:800;
  color:#d9cba6;padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
/* butonlar */
.ab-butonlar{display:flex;gap:9px;margin-top:14px}
.ab-btn{
  flex:1;padding:11px 12px;border-radius:10px;
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
  transition:transform .15s, box-shadow .25s, border-color .2s, opacity .2s;
}
.ab-btn.bas{
  color:#241708;background:linear-gradient(180deg,#f0c264,#c8912f);border:none;
  box-shadow:0 3px 16px rgba(232,179,75,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.ab-btn.bas:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,179,75,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.ab-btn.efsun{
  color:var(--gold2);background:rgba(24,16,11,.85);
  border:1px solid rgba(232,179,75,.45);
}
.ab-btn.efsun:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 18px rgba(232,179,75,.28)}
.ab-btn:disabled{opacity:.4;cursor:not-allowed}
.ab-not{margin-top:11px;text-align:center;font-size:11.5px;color:var(--txt-dim);line-height:1.5}
.ab-not b{color:var(--gold2)}

@media (max-width:520px){
  .ab-secici{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .ab-esya{width:38px;height:38px}
  .ab-esya img{max-width:26px;max-height:32px}
  .ab-sat{font-size:11.5px}
  .ab-butonlar{flex-direction:column}
}

/* ============================================================
   KULLANIM KOLAYLIKLARI
   ============================================================ */

/* ---------- üst bar gerçekten yapışkan kalsın ---------- */
.site-header{position:sticky !important;top:0;z-index:1000}
/* çapa ile atlayınca başlık üst barın altında kalmasın */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
main [id]{scroll-margin-top:calc(var(--bar-h,76px) + 22px)}

/* ---------- okuma ilerlemesi ---------- */
.misali-ilerleme{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#a97e35,var(--gold),var(--gold-bright));
  box-shadow:0 0 12px rgba(232,179,75,.6);
  pointer-events:none;z-index:2;
}

/* ---------- yukarı çık ---------- */
.misali-yukari{
  position:fixed;right:22px;bottom:22px;z-index:1200;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 15px 11px 12px;border-radius:999px;
  color:var(--gold-bright);
  background:linear-gradient(180deg, rgba(38,25,17,.96), rgba(20,13,10,.96));
  border:1px solid rgba(232,179,75,.4);
  box-shadow:0 12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,224,160,.12);
  font:inherit;font-size:12px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .28s, transform .28s, visibility .28s, border-color .2s, box-shadow .3s;
}
.misali-yukari.gor{opacity:1;visibility:visible;transform:none}
.misali-yukari:hover{border-color:var(--gold);box-shadow:0 14px 38px rgba(0,0,0,.6), 0 0 22px rgba(232,179,75,.3)}
.misali-yukari svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .misali-yukari{right:14px;bottom:14px;padding:11px;gap:0}
  .misali-yukari span{display:none}
}

/* ---------- kısayol düğmesi ---------- */
.misali-kisayol-btn{
  position:fixed;right:22px;bottom:74px;z-index:1200;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  font:inherit;font-size:15px;font-weight:800;line-height:1;
  color:var(--text-muted);
  background:rgba(20,13,10,.9);border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  cursor:pointer;transition:color .2s, border-color .2s, transform .2s;
}
.misali-kisayol-btn:hover{color:var(--gold-bright);border-color:rgba(232,179,75,.5);transform:translateY(-2px)}
@media (max-width:860px){ .misali-kisayol-btn{display:none} }

/* ---------- kısayol yardım katmanı ---------- */
.misali-kisayol{
  position:fixed;inset:0;z-index:1400;
  display:grid;place-items:center;padding:20px;
  background:rgba(6,4,3,.72);backdrop-filter:blur(6px);
  animation:mkIn .2s ease both;
}
.misali-kisayol[hidden]{display:none !important}
@keyframes mkIn{from{opacity:0}to{opacity:1}}
.misali-kisayol .mk-kutu{
  width:min(420px,100%);padding:20px 22px 16px;border-radius:var(--radius-lg);
  background:linear-gradient(168deg, rgba(38,25,19,.98), rgba(18,12,10,.98));
  border:1px solid rgba(232,179,75,.32);
  box-shadow:0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,224,160,.1);
  animation:mkKutu .26s cubic-bezier(.2,1,.3,1) both;
}
@keyframes mkKutu{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.misali-kisayol .mk-ust{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:'Fenomen Slab',Georgia,serif;font-size:14px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--gold-bright);
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.misali-kisayol .mk-kapat{
  font:inherit;font-size:13px;line-height:1;color:var(--text-muted);
  background:none;border:0;cursor:pointer;padding:4px;
}
.misali-kisayol .mk-kapat:hover{color:var(--gold-bright)}
.misali-kisayol dl{margin:0;display:grid;gap:7px}
.misali-kisayol dl > div{display:flex;align-items:center;gap:12px}
.misali-kisayol dt{flex:0 0 62px}
.misali-kisayol kbd{
  display:inline-grid;place-items:center;min-width:30px;padding:4px 7px;
  border-radius:7px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;font-weight:700;
  color:var(--gold-bright);background:rgba(232,179,75,.1);
  border:1px solid rgba(232,179,75,.32);box-shadow:0 2px 0 rgba(0,0,0,.4);
}
.misali-kisayol dd{margin:0;font-size:12.5px;color:var(--text-soft)}
.misali-kisayol .mk-alt{margin:14px 0 0;font-size:11px;color:var(--text-muted);text-align:center}

/* ---------- "bu sayfada" hızlı gezinme ---------- */
.misali-toc{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:1100;
  display:flex;flex-direction:column;gap:3px;
  padding:11px 10px;border-radius:14px;
  background:linear-gradient(168deg, rgba(24,16,12,.72), rgba(14,10,8,.72));
  border:1px solid rgba(232,179,75,.14);
  backdrop-filter:blur(8px);
  transition:border-color .25s, background .25s;
}
.misali-toc:hover{border-color:rgba(232,179,75,.34);background:linear-gradient(168deg, rgba(30,20,15,.94), rgba(16,11,9,.94))}
.misali-toc-baslik{
  font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-muted);
  padding:0 4px 7px;margin-bottom:2px;border-bottom:1px solid var(--line);
  opacity:0;max-height:0;overflow:hidden;transition:opacity .22s, max-height .22s, padding .22s;
}
.misali-toc:hover .misali-toc-baslik{opacity:1;max-height:24px}
.misali-toc a{
  display:flex;align-items:center;gap:9px;
  padding:5px 4px;border-radius:8px;text-decoration:none;
  color:var(--text-muted);font-size:12px;
  transition:color .2s, background .2s;
}
.misali-toc a i{
  flex:0 0 7px;width:7px;height:7px;border-radius:50%;
  background:rgba(236,224,203,.24);
  transition:background .25s, box-shadow .25s, transform .25s;
}
.misali-toc a span{
  max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;transition:max-width .28s cubic-bezier(.2,.9,.3,1), opacity .22s;
}
.misali-toc:hover a span{max-width:190px;opacity:1}
.misali-toc a:hover{color:var(--gold-bright);background:rgba(232,179,75,.08)}
.misali-toc a:hover i{background:var(--gold)}
.misali-toc a.etkin{color:var(--gold-bright)}
.misali-toc a.etkin i{
  background:var(--gold-bright);transform:scale(1.25);
  box-shadow:0 0 10px rgba(232,179,75,.85);
}
@media (max-width:1180px){ .misali-toc{display:none} }

/* ---------- başlık yanındaki bağlantı kopyalama ---------- */
.misali-baglanti{
  margin-left:10px;vertical-align:middle;
  width:26px;height:26px;border-radius:8px;
  display:inline-grid;place-items:center;
  color:var(--text-muted);background:rgba(232,179,75,.06);
  border:1px solid transparent;
  opacity:0;cursor:pointer;
  transition:opacity .2s, color .2s, border-color .2s, background .2s;
}
.misali-baglanti svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
h2:hover .misali-baglanti,h3:hover .misali-baglanti,
.misali-baglanti:focus-visible{opacity:1}
.misali-baglanti:hover{color:var(--gold-bright);border-color:rgba(232,179,75,.34);background:rgba(232,179,75,.12)}
.misali-baglanti.tamam{
  opacity:1;color:#8fce6a;border-color:rgba(143,206,106,.45);background:rgba(143,206,106,.14);
}
.misali-baglanti.tamam::after{
  content:'Kopyalandı';position:absolute;transform:translate(0,-30px);
  font-size:10px;letter-spacing:.8px;white-space:nowrap;color:#8fce6a;
}
@media (hover:none){ .misali-baglanti{opacity:.55} }

/* ---------- tablo canlı filtresi ---------- */
.misali-tfiltre{
  display:flex;align-items:center;gap:10px;
  max-width:520px;margin:0 auto 16px;
  padding:9px 14px;border-radius:999px;
  background:rgba(14,10,8,.7);border:1px solid var(--line);
  transition:border-color .2s, box-shadow .25s;
}
.misali-tfiltre:focus-within{border-color:rgba(232,179,75,.5);box-shadow:0 0 20px rgba(232,179,75,.14)}
.misali-tfiltre.bos{border-color:rgba(224,112,78,.5)}
.misali-tfiltre .mt-ikon{display:grid;place-items:center;flex:0 0 16px;color:var(--text-muted)}
.misali-tfiltre .mt-ikon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.misali-tfiltre input{
  flex:1;min-width:0;font:inherit;font-size:13px;color:var(--text);
  background:none;border:0;outline:none;
}
.misali-tfiltre input::placeholder{color:var(--text-muted)}
.misali-tfiltre input::-webkit-search-cancel-button{filter:invert(.7) sepia(.4)}
.misali-tfiltre .mt-sonuc{
  flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-bright);white-space:nowrap;
}
.misali-tfiltre.bos .mt-sonuc{color:#e0704e}

/* ---------- tüm tablolarda satır vurgusu ---------- */
.drop-card tbody tr:not(.drop-altbaslik):hover td,
table tbody tr:hover > td{background:rgba(232,179,75,.055)}

/* ---------- yapışkan araç şeridi (drop & üretim) ---------- */
.misali-arac{
  position:sticky;top:var(--bar-h,var(--header-height,76px));z-index:900;
  padding:13px 15px 4px;margin:0 0 20px;border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(17,11,9,.97), rgba(12,8,7,.95));
  border:1px solid var(--line);
  box-shadow:0 16px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,224,160,.05);
  backdrop-filter:blur(10px);
  transition:border-color .25s, box-shadow .3s;
}
.misali-arac .drop-tabs-ust{margin-bottom:11px}
.misali-arac .drop-controls{margin:0}
.misali-arac .drop-sonuc{margin:9px 0 8px;font-size:.74rem}
/* şerit üst bara yapışınca altın kenar belirir */
.misali-arac.yapisti{
  border-color:rgba(232,179,75,.34);
  box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 22px rgba(232,179,75,.1);
}
@media (max-width:640px){
  .misali-arac{padding:11px 12px 2px;border-radius:var(--radius-sm)}
}

/* ---------- sekme düğmelerine AAA rötuşu ---------- */
.drop-tabs button{
  border-radius:999px;letter-spacing:.06em;
  transition:color .2s, background .2s, border-color .2s, box-shadow .25s, transform .16s;
}
.drop-tabs button:hover:not(.active){transform:translateY(-1px);border-color:rgba(232,179,75,.42)}
.drop-tabs button.active{
  color:#241708 !important;
  background:linear-gradient(180deg,#f0c264,#c8912f) !important;
  border-color:transparent !important;
  box-shadow:0 3px 15px rgba(232,179,75,.34), inset 0 1px 0 rgba(255,255,255,.32);
}

/* ============================================================
   HERO — Misali2 Feda Wiki girişi (premium)
   Sol: logo + başlık + arama + butonlar · Sağ: kahraman
   ============================================================ */
.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(400px,1.04fr) !important;
  align-items:center;
  gap:clamp(20px,2.4vw,44px) !important;
  padding:clamp(44px,5vw,68px) 0 clamp(52px,6vw,78px) !important;
  min-height:0 !important;
}
.hero{min-height:0 !important}
.hero-copy{max-width:660px !important}

/* ---------- logo solda ---------- */
.hero-logo{
  display:block;width:min(74%,236px);margin:0 0 22px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.6));
  transition:filter .3s, transform .3s;
}
.hero-logo img{width:100%;height:auto;display:block}
.hero-logo:hover{transform:translateY(-2px);filter:drop-shadow(0 18px 34px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(232,160,60,.28))}

/* ---------- başlık: küçük, dengeli, altın vurgulu ---------- */
.hero-copy .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 14px 5px 11px;border-radius:999px;
  background:rgba(232,179,75,.08);border:1px solid rgba(232,179,75,.28);
  font-size:.63rem;letter-spacing:.15em;
}
.hero-copy .eyebrow-dot{
  width:5px;height:5px;box-shadow:0 0 9px rgba(232,179,75,.9);
}
.hero-copy h1{
  margin:16px 0 0 !important;
  font-size:clamp(2.25rem,4vw,3.5rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.02em !important;
  font-weight:500;
  color:var(--text);
  text-shadow:0 3px 24px rgba(0,0,0,.75);
}
.hero-copy h1 span{
  font-style:normal !important;font-weight:500 !important;
  background:linear-gradient(180deg,#fff0c9,#e8b34b 58%,#b9822a);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 26px rgba(232,160,60,.32));
}
/* başlık altı altın ayraç */
.hero-copy h1::after{
  content:'';display:block;width:96px;height:2px;margin:18px 0 0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bright),rgba(232,179,75,.05));
  box-shadow:0 0 14px rgba(232,179,75,.35);
}
.hero-copy > p{
  margin-top:18px !important;max-width:560px !important;
  font-size:clamp(.92rem,1.1vw,1.02rem) !important;line-height:1.68 !important;
}

/* ---------- arama: kompakt ve rafine ---------- */
.hero-search{
  width:min(100%,540px) !important;margin-top:24px !important;
  border-radius:13px !important;
  background:linear-gradient(180deg, rgba(34,20,15,.95), rgba(20,12,10,.92)) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,224,160,.06) !important;
}
.hero-search input{height:52px !important;font-size:.92rem !important}
.hero-search-icon{width:19px !important;height:19px !important;margin-left:16px !important}
.hero-search .search-shortcut{margin-right:14px !important}
.search-suggestions{margin-top:12px !important}
.search-suggestions button{font-size:.71rem;padding:6px 11px}

/* ---------- butonlar solda, kompakt ızgara ---------- */
.hero-cta-row{
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px !important;margin-top:22px !important;max-width:540px;
}
.hero-cta-row .hero-gear-cta{
  padding:12px 14px !important;font-size:.7rem !important;text-align:center;
  border-radius:11px !important;line-height:1.3;
}
.hero-cta-row .hero-gear-cta{display:flex;align-items:center;justify-content:center}
.hero-panel-note{
  margin-top:20px !important;max-width:540px;
  padding:13px 15px !important;border-radius:12px !important;
}
.hero-panel-note p{font-size:.735rem !important;line-height:1.5 !important}

/* ---------- sağ: kahraman ---------- */
.hero-kahraman{
  position:relative;display:flex;justify-content:center;align-items:flex-start;
  align-self:start;min-height:0;
}
.hk-sahne{
  position:relative;width:100%;max-width:none;
  will-change:transform;
}
.hk-img{
  position:relative;z-index:2;display:block;width:100%;height:auto;
  /* DİKKAT: mask-image ile birlikte GENİŞ drop-shadow kullanma — ışıma görselin
     kutusunda kesilip keskin dikdörtgen kenar bırakıyor. Işımayı .hk-taban veriyor. */
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.7));
  /* bölüm kenarında sert kesim yerine yumuşak geçiş */
  -webkit-mask-image:linear-gradient(to bottom, #000 0 78%, rgba(0,0,0,.55) 91%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0 78%, rgba(0,0,0,.55) 91%, transparent 100%);
}
/* arkadaki sıcak taban ışığı */
.hk-taban{
  position:absolute;z-index:1;left:50%;top:46%;
  width:86%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(232,150,60,.3), rgba(190,78,28,.13) 42%, rgba(150,60,20,.04) 60%, transparent 74%);
  filter:blur(34px);
}







/* ---------- çevresinde dönen eşya ikonları ---------- */
.hk-yorunge{
  position:absolute;z-index:1;left:50%;top:45%;
  width:110%;aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;
}
.hk-yorunge i{position:absolute;inset:5%;transform:rotate(var(--a))}
.hk-yorunge .w{
  position:absolute;left:50%;top:0;
  transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));
  opacity:0;
}
.hk-yorunge .s{
  position:relative;display:grid;place-items:center;
  width:clamp(54px,5vw,74px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(150,108,56,.95), rgba(52,36,23,.96) 58%, rgba(22,15,11,.97)),
    linear-gradient(180deg, rgba(255,232,180,.12), transparent 62%);
  border:1px solid rgba(255,216,140,.55);
  box-shadow:
    0 8px 22px rgba(0,0,0,.7),
    0 0 26px rgba(255,200,100,.34),
    inset 0 1px 0 rgba(255,244,210,.28),
    inset 0 0 18px rgba(255,196,90,.2);
}
/* dış altın hale — kare kenar çizgisi yerine yumuşak ışık */
.hk-yorunge .s::before{
  content:'';position:absolute;inset:-26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,130,.3), rgba(255,170,60,.1) 46%, transparent 68%);
  filter:blur(6px);
}
.hk-yorunge img{
  position:relative;z-index:1;
  width:64%;height:64%;object-fit:contain;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))
         drop-shadow(0 0 9px rgba(255,236,180,.85))
         brightness(1.14) saturate(1.1);
}
@keyframes hkTur{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes hkTurTers{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@keyframes hkBelir{0%,100%{opacity:0}9%{opacity:1}30%{opacity:1}42%{opacity:0}}

@media (prefers-reduced-motion: no-preference){
  .hk-yorunge{animation:hkTur 38s linear infinite}
  .hk-yorunge .s{animation:hkTurTers 38s linear infinite}
  .hk-yorunge .w{animation:hkBelir 9s ease-in-out infinite;animation-delay:var(--d)}
  .hk-sahne{animation:hkSuzul 6.4s ease-in-out infinite}
}
@keyframes hkSuzul{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@keyframes hkNabiz{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
@keyframes hkHalka{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}

/* ---------- duyarlı ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr !important;gap:26px !important}
  .hero-copy{max-width:none !important;order:2}
  .hero-kahraman{order:1;justify-content:flex-start}
  .hk-sahne{max-width:360px;margin:0 auto}
  .hero-copy h1{font-size:clamp(2.1rem,7vw,3rem) !important}
}
@media (max-width:620px){
  .hero-logo{width:min(64%,190px);margin-bottom:18px}
  .hero-cta-row{grid-template-columns:1fr !important}
  .hk-sahne{max-width:290px}
  .hk-yorunge{width:112%}
  .hk-yorunge .s{width:32px}
  .hero-copy h1::after{margin-top:14px}
}

/* ---------- hero: kare ızgara deseni kaldırıldı (kenarlarda ışık çizgisi gibi duruyordu) ---------- */
.hero::before{background-image:none !important;opacity:0 !important}
/* alt geçiş: PNG'nin kendi solması var, maske daha geç başlasın */
.hk-img{
  -webkit-mask-image:linear-gradient(to bottom, #000 0 90%, rgba(0,0,0,.6) 97%, transparent 100%) !important;
  mask-image:linear-gradient(to bottom, #000 0 90%, rgba(0,0,0,.6) 97%, transparent 100%) !important;
  -webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important;
  -webkit-mask-size:100% 100% !important;mask-size:100% 100% !important;
}

/* ---------- hero: eş merkezli sert halkalar → yumuşak ışık ----------
   styles.css'teki .hero::after üç adet blursuz box-shadow spread halkası çiziyordu;
   koyu zeminde bunlar "glowun kenarı" gibi keskin yaylar olarak görünüyordu. */
.hero::after{
  right:-12% !important;bottom:-46% !important;width:88% !important;
  border:0 !important;box-shadow:none !important;
  background:radial-gradient(circle, rgba(232,150,60,.09), rgba(196,88,30,.045) 40%, transparent 72%) !important;
  filter:blur(46px) !important;
}

/* ---------- üst gezinme: geniş ekranda tek satıra sığsın ----------
   'Üretim & F11' sağdan kırpılıyordu (içerik kutudan 11px genişti).
   Yalnızca yatay çubuk hâlinde (>=901px) sıkılaştırılır; mobil açılır menü etkilenmez. */
@media (min-width:901px){
  /* arama kutusu ESNEMESIN: barSar hesabı çocukların doğal genişliğine dayanıyor,
     büzülen bir çocuk hesabı olduğundan küçük gösterip sarmalamayı geciktiriyordu */
  .header-search{flex:0 0 auto}
  .category-nav{gap:2px}
  .category-nav a{padding:10px 6px;gap:6px;letter-spacing:0}
  .category-nav a span{width:15px;height:15px}
  .header-inner{gap:14px}
}
@media (min-width:901px) and (max-width:1500px){
  .category-nav a{font-size:.735rem;padding:10px 5px}
  .header-search{max-width:230px}
}

/* ---------- üst bar: gezinme sığmıyorsa ikinci satıra iner ----------
   Sabit piksel bandı kırılgan (yazı tipi/zoom değişince kayıyor); .bar-sar sınıfını
   JS taşmayı ÖLÇEREK ekliyor. styles.css'in 1041–1500 bandıyla uyumlu davranır. */
.site-header.bar-sar{height:auto}
.site-header.bar-sar .header-inner{flex-wrap:wrap;height:auto;padding:8px 0;row-gap:2px}
.site-header.bar-sar .category-nav{
  order:5;width:100%;flex-wrap:wrap;overflow:visible;margin-left:0;justify-content:center;
}