/* =====================================================================
   METINHARD — Pazar / İlanlar
   Tema: kömür karası + ateş + altın (oriental)
   ===================================================================== */
:root{
  --kml:      #100d0a;
  --kml-2:    #191410;
  --kml-3:    #211a13;
  --kml-4:    #2b2118;
  --cizgi:    rgba(240,192,64,.16);
  --cizgi-2:  rgba(240,192,64,.30);
  --altin:    #f0c040;
  --altin-2:  #c99a34;
  --altin-koyu:#8a5e1e;
  --ates:     #ff6a1a;
  --ates-2:   #ff3b00;
  --metin:    #ece2ce;
  --soluk:    #9c917d;
  --iyi:      #56c46a;
  --kotu:     #e0533f;
  --golge:    0 10px 30px rgba(0,0,0,.55);
  --r:        14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,Arial,sans-serif;
  background:
    radial-gradient(1100px 600px at 50% -10%, #2a1a0e 0%, transparent 60%),
    var(--kml);
  color:var(--metin);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:var(--ates);color:#1a1008}

/* ------- Ateş / altın metin efekti (yedekli) ------- */
.altin,.marka__ad,.banner__baslik h1,.kart__fiyat,.alt__marka{
  color:var(--altin);                 /* eski tarayıcı yedeği */
}
.altin{
  background:linear-gradient(180deg,#fff2c0 0%,var(--altin) 40%,var(--altin-2) 70%,var(--altin-koyu) 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .altin,.marka__ad,.banner__baslik h1,.kart__fiyat,.alt__marka{
    -webkit-text-fill-color:transparent;
  }
}

/* =====================================================================
   BANNER (gif gibi animasyon)
   ===================================================================== */
.banner{
  position:relative;
  min-height:clamp(320px,46vw,560px);
  overflow:hidden;
  border-bottom:2px solid var(--altin-koyu);
  isolation:isolate;
}
.banner__img{
  position:absolute;inset:-3% -3% -3% -3%;
  background-size:cover;background-position:center 40%;
  z-index:-3;
  animation:banner-zoom 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes banner-zoom{
  from{transform:scale(1.02) translateY(0)}
  to  {transform:scale(1.10) translateY(-1.5%)}
}
/* nabız gibi atan ateş parıltısı */
.banner__glow{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 78%, rgba(255,120,20,.55), transparent 70%),
    radial-gradient(40% 40% at 20% 60%, rgba(255,70,0,.35), transparent 70%),
    radial-gradient(45% 45% at 82% 55%, rgba(255,150,30,.30), transparent 72%);
  mix-blend-mode:screen;
  animation:ates-nabiz 3.2s ease-in-out infinite;
  will-change:opacity,filter;
}
@keyframes ates-nabiz{
  0%,100%{opacity:.55;filter:brightness(1)}
  45%    {opacity:.95;filter:brightness(1.25)}
  70%    {opacity:.7;filter:brightness(1.05)}
}
.banner__vignette{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,13,10,.35) 0%, transparent 22%, transparent 55%, rgba(16,13,10,.85) 100%),
    linear-gradient(90deg, rgba(16,13,10,.5), transparent 30%, transparent 70%, rgba(16,13,10,.5));
}
.banner__embers{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}

/* Üst menü */
.ust-menu{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(16px,4vw,42px);
}
.marka{display:flex;flex-direction:column;line-height:1}
.marka__ad{
  font-family:'Cinzel',serif;font-weight:900;letter-spacing:2px;
  font-size:clamp(22px,3vw,34px);
  background:linear-gradient(180deg,#fff2c0,#f0c040 45%,#a8792a);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 2px 14px rgba(255,120,20,.35);
}
.marka__slogan{
  font-size:10px;letter-spacing:3px;color:var(--altin-2);margin-top:4px;font-weight:600;
}
.menu-linkler{display:flex;align-items:center;gap:8px}
.menu-linkler a{
  padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;
  color:var(--metin);transition:.18s;letter-spacing:.3px;
}
.menu-linkler a:hover{background:rgba(255,255,255,.06);color:#fff}
.menu-linkler a.aktif{color:var(--altin)}
.menu-linkler a.aktif::after{content:"";display:block;height:2px;margin-top:5px;
  background:linear-gradient(90deg,transparent,var(--altin),transparent)}
.btn-giris{
  background:linear-gradient(180deg,var(--ates),var(--ates-2));
  color:#fff!important;box-shadow:0 6px 18px rgba(255,60,0,.35);
}
.btn-giris:hover{filter:brightness(1.08)}
.menu-toggle{display:none;background:none;border:1px solid var(--cizgi-2);color:var(--altin);
  font-size:20px;border-radius:10px;padding:6px 12px;cursor:pointer}

.banner__baslik{
  position:relative;z-index:2;
  padding:clamp(20px,6vw,70px) clamp(16px,4vw,42px) clamp(28px,5vw,54px);
}
.banner__baslik h1{
  font-family:'Cinzel',serif;font-weight:900;letter-spacing:6px;
  font-size:clamp(30px,6vw,68px);line-height:1;
  background:linear-gradient(180deg,#fff5d0,#f0c040 50%,#9a6a1e);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 4px 30px rgba(255,90,0,.4);
}
.banner__baslik p{margin-top:10px;color:var(--metin);font-weight:600;letter-spacing:1px;
  font-size:clamp(13px,1.6vw,17px);text-shadow:0 2px 8px #000}

/* =====================================================================
   KABUK / IZGARA
   ===================================================================== */
.kabuk{max-width:1320px;margin:0 auto;padding:clamp(20px,3vw,36px) clamp(14px,3vw,28px) 60px}
.demo-uyari{
  background:linear-gradient(180deg,var(--kml-3),var(--kml-2));
  border:1px solid var(--cizgi-2);border-left:4px solid var(--ates);
  border-radius:12px;padding:12px 16px;margin-bottom:22px;font-size:13.5px;color:var(--soluk);
}
.demo-uyari strong{color:var(--altin);letter-spacing:1px}
.demo-uyari code{background:#000;color:var(--altin);padding:1px 7px;border-radius:5px;font-size:12.5px}

.izgara{display:grid;grid-template-columns:290px 1fr;gap:24px;align-items:start}

/* =====================================================================
   FİLTRE
   ===================================================================== */
.filtre{
  background:linear-gradient(180deg,var(--kml-2),var(--kml));
  border:1px solid var(--cizgi);border-radius:var(--r);
  box-shadow:var(--golge);overflow:hidden;position:sticky;top:16px;
}
.filtre__baslik{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;
  color:var(--altin);
  background:linear-gradient(180deg,rgba(240,192,64,.10),transparent);
  border-bottom:1px solid var(--cizgi);
}
.filtre__kapat{display:none;background:none;border:none;color:var(--soluk);font-size:18px;cursor:pointer}
.filtre__form{padding:16px 18px 20px;display:flex;flex-direction:column;gap:16px}

.alan{display:flex;flex-direction:column;gap:7px}
.alan>span{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--soluk);font-weight:700}
.alan input,.alan select{
  background:#0c0906;border:1px solid var(--cizgi-2);border-radius:10px;
  color:var(--metin);padding:10px 12px;font-family:inherit;font-size:14px;font-weight:500;
  transition:.16s;width:100%;
}
.alan input:focus,.alan select:focus{
  outline:none;border-color:var(--ates);box-shadow:0 0 0 3px rgba(255,90,0,.15);
}
.alan input::placeholder{color:#5c5344}
.alan select{cursor:pointer}
.alan-cift{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.sinif-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sinif-sec{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:#0c0906;border:1px solid var(--cizgi);border-radius:10px;padding:7px 8px;
  transition:.16s;position:relative;
}
.sinif-sec:hover{border-color:var(--cizgi-2)}
.sinif-sec.secili{border-color:var(--ates);background:rgba(255,90,0,.10)}
.sinif-sec input{position:absolute;opacity:0;pointer-events:none}
.sinif-sec img{border-radius:50%;flex:0 0 auto}
.sinif-sec em{font-style:normal;font-size:12px;font-weight:600;line-height:1.15}
.sinif-sec em small{color:var(--soluk);font-weight:500;font-size:10.5px}

.filtre__butonlar{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;margin-top:2px}

/* Butonlar */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.4px;
  padding:11px 16px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:.16s;text-align:center;
}
.btn-ates{
  background:linear-gradient(180deg,var(--ates),var(--ates-2));color:#fff;
  box-shadow:0 6px 16px rgba(255,60,0,.32);
}
.btn-ates:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-bos{background:#140f0a;color:var(--metin);border-color:var(--cizgi-2)}
.btn-bos:hover{border-color:var(--altin-2);color:var(--altin)}
.btn-blok{width:100%}

/* =====================================================================
   İÇERİK / SIRALAMA
   ===================================================================== */
.icerik__ust{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--cizgi);
}
.icerik__baslik h2{
  font-family:'Cinzel',serif;font-weight:800;letter-spacing:1px;font-size:24px;color:var(--altin);
}
.sonuc-sayi{font-size:13px;color:var(--soluk)}
.sonuc-sayi strong{color:var(--metin)}
.araclar{display:flex;align-items:center;gap:12px}
.filtre-ac{display:none}
.sirala{display:flex;align-items:center;gap:8px}
.sirala span{font-size:12px;color:var(--soluk);letter-spacing:.5px}
.sirala select{
  background:#0c0906;border:1px solid var(--cizgi-2);border-radius:10px;color:var(--metin);
  padding:9px 12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.sirala select:focus{outline:none;border-color:var(--ates)}

/* =====================================================================
   KARTLAR
   ===================================================================== */
.kartlar{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.kart{
  background:linear-gradient(180deg,var(--kml-3),var(--kml-2));
  border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;position:relative;
}
.kart::before{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.kart:hover{transform:translateY(-4px);border-color:var(--ates);
  box-shadow:0 14px 34px rgba(255,60,0,.18)}
.kart__gorsel{
  position:relative;aspect-ratio:16/10;display:grid;place-items:center;
  background:
    radial-gradient(70% 80% at 50% 30%, rgba(255,110,20,.20), transparent 70%),
    linear-gradient(180deg,#241c14,#140f0a);
  border-bottom:1px solid var(--cizgi);
}
.kart__gorsel img{width:74px;height:74px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.kart__seviye{
  position:absolute;top:10px;left:10px;
  background:linear-gradient(180deg,var(--ates),var(--ates-2));color:#fff;
  font-size:12px;font-weight:800;padding:3px 9px;border-radius:8px;letter-spacing:.5px;
  box-shadow:0 4px 10px rgba(255,60,0,.4);
}
.kart__govde{padding:13px 14px 15px;display:flex;flex-direction:column;gap:4px;flex:1}
.kart__ad{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kart__sinif{font-size:12.5px;color:var(--soluk);font-weight:600}
.kart__fiyat{
  font-family:'Cinzel',serif;font-weight:700;font-size:19px;margin-top:4px;
  background:linear-gradient(180deg,#fff2c0,#f0c040 55%,#b1801f);
  -webkit-background-clip:text;background-clip:text;
}
.kart__zaman{font-size:11px;color:#6f6555;margin-top:2px}
.btn-incele{margin-top:11px}

/* =====================================================================
   SAYFALAMA
   ===================================================================== */
.sayfalama{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:30px}
.syf{
  min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;
  background:var(--kml-2);border:1px solid var(--cizgi);border-radius:10px;
  color:var(--metin);font-weight:700;font-size:14px;transition:.15s;
}
.syf:hover{border-color:var(--altin-2);color:var(--altin)}
.syf.aktif{background:linear-gradient(180deg,var(--ates),var(--ates-2));color:#fff;border-color:transparent;
  box-shadow:0 6px 14px rgba(255,60,0,.32)}
.syf-nokta{color:var(--soluk);padding:0 4px;align-self:center}

/* Boş durum */
.bos-durum{text-align:center;padding:70px 20px;color:var(--soluk)}
.bos-durum__ikon{font-size:52px;margin-bottom:10px;filter:drop-shadow(0 4px 16px rgba(255,90,0,.4))}
.bos-durum h3{font-family:'Cinzel',serif;color:var(--altin);margin-bottom:6px}
.bos-durum a{color:var(--ates);font-weight:700}

/* =====================================================================
   FOOTER
   ===================================================================== */
.alt{border-top:2px solid var(--altin-koyu);background:linear-gradient(180deg,var(--kml),#0a0706);margin-top:30px}
.alt__ic{max-width:1320px;margin:0 auto;padding:26px clamp(16px,4vw,42px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.alt__marka{font-family:'Cinzel',serif;font-weight:900;letter-spacing:2px;
  background:linear-gradient(180deg,#fff2c0,#f0c040,#a8792a);
  -webkit-background-clip:text;background-clip:text;font-size:20px}
.alt__telif{font-size:12.5px;color:var(--soluk)}
.alt__sosyal{display:flex;gap:10px}
.alt__sosyal a{font-size:13px;font-weight:600;color:var(--altin-2);padding:7px 14px;
  border:1px solid var(--cizgi-2);border-radius:9px;transition:.15s}
.alt__sosyal a:hover{border-color:var(--ates);color:var(--altin)}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.acik{display:grid;place-items:center}
.modal__perde{position:absolute;inset:0;background:rgba(6,4,2,.78);backdrop-filter:blur(3px)}
.modal__kutu{
  position:relative;width:min(460px,92vw);max-height:90vh;overflow:auto;
  background:linear-gradient(180deg,var(--kml-3),var(--kml));
  border:1px solid var(--cizgi-2);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.7);
  padding:24px;animation:modal-gir .22s ease;
}
@keyframes modal-gir{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__kapat{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--soluk);
  font-size:20px;cursor:pointer;line-height:1}
.modal__kapat:hover{color:var(--ates)}
.modal__ust{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.modal__ust img{border-radius:50%;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.modal__ad{font-family:'Cinzel',serif;font-weight:800;font-size:20px;color:#fff}
.modal__sinif{color:var(--soluk);font-weight:600;font-size:13.5px}
.modal__ozet{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.modal__ozet>div{background:#0c0906;border:1px solid var(--cizgi);border-radius:12px;padding:12px 14px}
.modal__ozet span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--soluk)}
.modal__ozet b{font-family:'Cinzel',serif;font-size:20px;font-weight:700}
.modal__stat{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:20px}
.stat{background:#0c0906;border:1px solid var(--cizgi);border-radius:10px;padding:10px 4px;text-align:center}
.stat span{display:block;font-size:10px;letter-spacing:1px;color:var(--soluk)}
.stat i{font-style:normal;font-weight:800;font-size:17px;color:var(--altin)}
.modal__aciklama{color:var(--soluk);font-size:13.5px;margin-bottom:16px}
.modal__adim .alan{margin-bottom:14px}
.modal__bakiye{font-size:13px;font-weight:600;padding:10px 12px;border-radius:10px;margin:4px 0 16px}
.modal__bakiye.yeterli{background:rgba(86,196,106,.12);color:var(--iyi);border:1px solid rgba(86,196,106,.3)}
.modal__bakiye.yetersiz{background:rgba(224,83,63,.12);color:var(--kotu);border:1px solid rgba(224,83,63,.3)}
.modal__butonlar{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.gizli{display:none!important}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .izgara{grid-template-columns:1fr}
  .filtre{
    position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);z-index:90;
    border-radius:0;transform:translateX(-105%);transition:transform .25s ease;
    max-height:100vh;overflow:auto;
  }
  .filtre.acik{transform:none}
  .filtre__kapat{display:block}
  .filtre-ac{display:inline-flex}
}
@media (max-width:640px){
  .menu-linkler{display:none;position:absolute;top:66px;right:16px;flex-direction:column;
    background:var(--kml-2);border:1px solid var(--cizgi-2);border-radius:12px;padding:8px;min-width:180px;z-index:5}
  .menu-linkler.acik{display:flex}
  .menu-toggle{display:block}
  .kartlar{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .kart__gorsel img{width:58px;height:58px}
  .icerik__baslik h2{font-size:20px}
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .banner__img{animation:none}
  .banner__glow{animation:none;opacity:.7}
  *{scroll-behavior:auto}
}