/* ===========================

   slotguncel.com — Global CSS

   =========================== */



/* Theme tokens */

:root {

  color-scheme: dark;



  --bg: #0b0b0f;

  --panel: #121219;

  --panel-2: #0f0f16;

  --border: #232336;

  --muted: #aab;

  --text: #ffffff;



  --accent: #8b5cf6;         /* mor */

  --accent-2: #3b82f6;       /* mavi */

  --glow: rgba(139,92,246,.25);



  /* Sponsor standart yükseklikleri */

  --sponsor-header-h: 120px;

  --sponsor-footer-h: 100px;

}



/* Base reset-ish */

* { box-sizing: border-box; }

html, body { margin:0; padding:0; }

body {

  background: var(--bg);

  color: var(--text);

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

img { max-width: 100%; display: block; }

a { color: #9ae6b4; text-decoration: none; }

a:hover { text-decoration: underline; }

.muted { color: var(--muted); }



/* Layout helpers */

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.pad { padding: 24px 0; }



/* ===========================

   Header / Topbar (metin logo ortada, menü hemen altında)

   =========================== */

.topbar {

  position: sticky;

  top: 0;

  z-index: 50;

  backdrop-filter: blur(12px);

  background: linear-gradient(180deg,#0b0b12e6,#0b0b12cc);

  border-bottom: 1px solid var(--border);

}

.topbar-inner{

  display:flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0;

  padding: 8px 0 6px;           /* minimum boşluk */

}

.brand{

  display:flex; align-items:center; justify-content:center;

  gap:0; line-height:0;

}

.brand > img, #brandLogo { display:none !important; } /* varsa eski img’yi gizle */



/* Metin marka: SLOT GÜNCEL */

.brand-text{

  font-weight: 900;

  font-size: clamp(40px, 6.5vw, 88px);

  line-height: .9;

  letter-spacing: -0.02em;

  text-transform: uppercase;

  display:inline-block;

  background: linear-gradient(90deg, #ffffff 0%, #dfe7ff 40%, #9ae6b4 100%);

  -webkit-background-clip: text; background-clip: text;

  -webkit-text-fill-color: transparent; color: transparent;

  text-shadow: 0 0 12px rgba(139,92,246,.15);

}

.brand-strong{

  background: linear-gradient(90deg, var(--accent) 0%, #a78bfa 60%, #dfe7ff 100%);

  -webkit-background-clip: text; background-clip: text;

  -webkit-text-fill-color: transparent;

}



.nav{

  order: 2; width: 100%;

  display:flex; align-items:center; justify-content:center;

  gap: 14px; flex-wrap: wrap; margin-top: 0; line-height: 1;

}

.nav a{

  display:inline-flex; align-items:center; justify-content:center;

  font-size: 15px; color:#e6e6e6;

  padding: 4px 10px; border-radius: 10px;

  border: 1px solid transparent; text-decoration: none;

  transition: background .15s ease, color .15s ease, border-color .15s ease;

}

.nav a:hover{ background: rgba(255,255,255,.06); border-color: var(--border); color:#fff; }



/* ===========================

   SPONSOR (standart boyut)

   =========================== */

.sponsor { border-top: 1px solid var(--border); margin-top: 8px; }

.sponsor a { display:block; }



/* Ortalanmış, oran koruyan kutu */

.sponsor .sponsor-box{

  width: 100%;

  height: var(--sponsor-header-h);    /* default header yüksekliği */

  background: #0e0e13;

  border: 1px solid var(--border);

  border-radius: 12px;

  display:flex; align-items:center; justify-content:center;

  overflow:hidden;

}

.sponsor-header .sponsor-box{ height: var(--sponsor-header-h); }

.sponsor-footer .sponsor-box{ height: var(--sponsor-footer-h); }



.sponsor img{

  height: 100%; width: auto;          /* oran koru */

  max-width: 100%;

  object-fit: contain;                 /* kırpma yok */

  display:block;

  filter: none;

  transform: translateZ(0);            /* crisp render */

}



/* Mobilde daha küçük standart */

@media (max-width: 900px){

  :root{

    --sponsor-header-h: 100px;

    --sponsor-footer-h: 80px;

  }

  .sponsor { margin-top: 6px; }

}



/* ===========================

   Hero + Search Bar

   =========================== */

.hero {

  background:

    radial-gradient(600px 200px at 20% 0%, var(--glow), transparent 60%),

    radial-gradient(600px 200px at 80% 0%, rgba(59,130,246,.2), transparent 60%);

  border-bottom: 1px solid var(--border);

}

.hero-inner { text-align: center; padding: 34px 0 26px; }

.hero h1 { font-size: 32px; margin: 0 0 8px; letter-spacing: -0.01em; }

.lead { color: var(--muted); margin: 0 auto 16px; max-width: 680px; }



/* Search strip — full width, mobil uyumlu */

.search-wrap{

  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;

  width: 100%; max-width: 100%;

  gap: 10px; margin: 0 auto;

  background: rgba(255,255,255,.05);

  border: 1px solid var(--border);

  border-radius: 20px;

  padding: 12px 14px;

  box-shadow: 0 12px 40px rgba(0,0,0,.25);

}

.search-ico{ width: 16px; height: 16px; color: #bbb; margin-left: 6px; flex: 0 0 16px; }

.search-wrap input{

  flex: 1 1 420px; min-width: 200px;

  background: transparent; border: 0; color: #fff;

  font-size: 17px; padding: 14px 12px; outline: none;

}

.search-wrap select{

  flex: 0 0 220px;

  background: #0f0f17; color: #fff; border: 1px solid var(--border);

  border-radius: 12px; padding: 14px 12px; font-size: 16px;

}

.search-wrap input:focus, .search-wrap select:focus {

  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);

}

@media (max-width: 640px){

  .search-wrap { border-radius: 16px; padding: 10px 12px; }

  .search-wrap input, .search-wrap select { flex-basis: 100%; }

}



/* ===========================

   Cards / Grid (kartlar %15 büyütüldü)

   =========================== */

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* 280 → 320 */

  gap: 16px; /* 14 → 16 */

}

.card {

  position: relative; overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 28px;

  background: linear-gradient(180deg, var(--panel), var(--panel-2));

  padding: 16px;               /* 14 → 16 */

  padding-bottom: 28px;        /* Tarih için alt boşluk */

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

}

.card:hover {

  transform: translateY(-2px);

  border-color: #2e2e46;

  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);

}

.card .row { display: flex; align-items: top; gap: 14px; } /* 12 → 14 

.card h3 { margin: 2px 0 4px; font-size: 8px; line-height: 1.25; }

.card .tags { font-size: 12px; color: #aab; margin-top: 2px; } 

.card .note { font-size: 12px; color: #cbd; margin-top: 6px; }



/* Tarih sabit kalsın ama içerikle üst üste binmesin */

 .card .date { 

  position: absolute; right: 12px; bottom: 12px;

  font-size: 11px; color: #98a; pointer-events: none;

}



/* Logo alanı (yatay) — %15 büyük */

.logo{

  width: 500px;               /* 140 → 160 */

  height: 200px;               /* 56  → 64  */

  flex: 0 0 500px;

  border-radius: 12px; overflow: hidden; border: 1px solid var(--border);

  background: #0c0c12;

  display: flex; align-items: center; justify-content: center;

  padding: 6px;

}

.logo img{

  max-width: 100%; max-height: 100%;

  width: auto; height: auto;

  object-fit: contain; display: block;

}

@media (max-width: 640px){

  .logo{ width: 400px; height: 150px; flex-basis: 380px; }

}



/* ===========================

   Footer

   =========================== */

.footer { border-top: 1px solid var(--border); padding: 20px 0; color: #bbb; }



/* ===========================

   Prose / Blog content

   =========================== */

.prose h1, .prose h2, .prose h3 { letter-spacing: -0.01em; }

.prose h1 { font-size: 28px; margin: 0 0 8px; }

.prose h2 { font-size: 22px; margin: 18px 0 6px; }

.prose h3 { font-size: 18px; margin: 14px 0 6px; }

.prose p  { line-height: 1.7; margin: 10px 0; }

.prose ul { margin: 10px 0 10px 18px; }

.prose li { margin: 6px 0; }

.prose a  { color:#9ae6b4; text-decoration: underline; }

.prose blockquote {

  margin: 14px 0; padding: 12px 14px;

  border-left: 3px solid var(--accent);

  background: rgba(255,255,255,.04);

  border-radius: 8px;

}

.prose code {

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  background: #0e0e16;

  border: 1px solid var(--border);

  padding: 2px 6px; border-radius: 6px; font-size: .95em;

}



/* ===========================

   Bonus Grid (detay sayfası)

   =========================== */

.bonus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}

.bonus-card{position:relative;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,#141421,#0f0f16);padding:14px}

.bonus-badge{position:absolute;top:10px;right:10px;font-size:11px;background:#3b82f6;color:#fff;padding:4px 8px;border-radius:999px}

.bonus-amount{font-size:20px;font-weight:800;margin:2px 0 4px}

.bonus-title{font-size:14px;color:#ddd;margin-bottom:8px}

.bonus-code{display:flex;align-items:center;gap:8px;margin:8px 0}

.bonus-code code{background:#0e0e16;border:1px solid var(--border);padding:4px 6px;border-radius:6px}

.copy-btn{padding:6px 10px;border-radius:8px;border:1px solid #2a2a2a;background:#1b1b1b;color:#ddd;cursor:pointer}

.copy-btn:hover{background:#222}

.bonus-exp{font-size:12px;margin-bottom:8px}



/* ===========================

   Toast (auto-refresh / kopyala bildirimi)

   =========================== */

.toast{

  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);

  background: rgba(20,20,30,.9); color:#fff; border:1px solid var(--border);

  padding:10px 14px; border-radius:12px; font-size:14px;

  box-shadow: 0 8px 30px rgba(0,0,0,.35);

  opacity: 0; pointer-events: none; transition: opacity .25s ease;

}

.toast.show{ opacity: 1; }

.toast.hidden{ opacity: 0; }



/* ===========================

   Utilities

   =========================== */

.hidden { display: none !important; }

.center { text-align: center; }

.card a { text-decoration: none; }

.card a:hover { text-decoration: none; }

/* === SABİT 728x90 ORTALI SPONSOR BANNER === */

.sponsor { border-top: 1px solid var(--border); margin-top: 8px; }

.sponsor a { display:block; }



/* Kutuyu sabit 728x90 yapıp ortala */

.sponsor .sponsor-box{

  width: 728px;

  height: 90px;

  margin: 8px auto;                 /* yatayda ortala */

  background: #0e0e13;

  border: 1px solid var(--border);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



/* Görsel oranı bozulmadan alanı doldursun (yükseklik 90px) */

.sponsor img{

  height: 100%;

  width: auto;

  max-width: 728px;

  object-fit: contain;

  display: block;

  transform: translateZ(0);

}



/* İsteğe bağlı: çok dar mobilde taşmayı önlemek için kırp (istersen kaldır) */

@media (max-width: 760px){

  .sponsor .sponsor-box{ width: 100%; max-width: 728px; height: auto; aspect-ratio: 728 / 90; }

  .sponsor img{ height: 100%; width: 100%; }

}

/* ==== HEADER 728x90: tam ortalı ve alta yapışmayı engelle ==== */



/* Header sponsor kapsayıcıyı flex merkez yap */

.sponsor-header{

  display: flex !important;

  justify-content: center !important;   /* yatay merkez */

  align-items: center !important;        /* dikey merkez */

  padding: 10px 0 !important;            /* üst-alt tampon; dibe yapışmasın */

  margin: 0 auto !important;

  border-top: 1px solid var(--border);

}



/* Link de merkezlesin (bazı temalarda a blok davranır) */

#sponsorHeaderLink{

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  width: 100%;

}



/* Sabit kutu: 728x90 ve ortalı */

.sponsor-header .sponsor-box{

  width: 728px !important;

  height: 90px !important;

  margin: 0 auto !important;            /* yatay merkez */

  background: #0e0e13;

  border: 1px solid var(--border);

  border-radius: 12px;

  display: flex !important;

  align-items: center !important;        /* kutu içinde dikey merkez */

  justify-content: center !important;    /* kutu içinde yatay merkez */

  overflow: hidden;

}



/* Görsel: oran koru, kutu içinde tam ortada */

#sponsorHeaderImg{

  height: 100% !important;

  width: auto !important;

  max-width: 728px !important;

  object-fit: contain !important;

  display: block !important;             /* baseline boşluğu yok */

}



/* Dar ekranda taşma olmasın (isteğe bağlı) */

@media (max-width: 760px){

  .sponsor-header .sponsor-box{

    width: 100% !important;

    max-width: 728px !important;

    aspect-ratio: 728 / 90;              /* oranı koru */

    height: auto !important;

  }

  #sponsorHeaderImg{

    width: 100% !important;

    height: 100% !important;

  }

}

/* Şikayet sayfaları küçük ek */

.qa-form label{font-size:12px;color:#bbb;display:block;margin:10px 0 6px}

.catpill{display:inline-block;font-size:12px;padding:3px 8px;border-radius:999px;background:#1b1b1b;border:1px solid #2a2a2a;margin-right:6px;color:#ddd}



/* === Site Detay CTA Butonları (tam mobil uyum) === */

.cta-row{

  display:flex;

  gap:12px;

  flex-wrap:wrap;

}



.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:12px 18px;

  border-radius:14px;

  text-decoration:none;

  font-weight:800;

  line-height:1;

  border:1px solid transparent;

  transition:transform .08s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;

  box-shadow: 0 6px 18px rgba(0,0,0,.25);

  will-change: transform;

}

.btn:active{ transform:translateY(1px); }



.btn-lg{ min-height:48px; font-size:16px; }



.btn-ico{

  width:1.1em;

  height:1.1em;

  opacity:.9;

  flex:0 0 auto;

}



.btn-primary{

  color:#fff;

  background: linear-gradient(90deg, #22c55e, #16a34a);

  border-color:#15803d;

}

.btn-primary:hover{

  filter:brightness(1.05);

  box-shadow:0 10px 28px rgba(22,163,74,.35);

}

.btn-primary:focus{ outline:2px solid #34d399; outline-offset:2px; }



.btn-secondary{

  color:#fff;

  background:#1b1b22;

  border-color:#2a2a36;

}

.btn-secondary:hover{

  background:#23232c;

  box-shadow:0 10px 28px rgba(0,0,0,.35);

}

.btn-secondary:focus{ outline:2px solid #64748b; outline-offset:2px; }



/* Mobil: butonlar alt alta ve tam genişlik */

@media (max-width: 640px){

  .cta-row{ flex-direction:column; }

  .btn{ width:100%; }

}



/* Yüksek çözünürlüklü ekranlarda hafif büyütme (opsiyonel) */

@media (min-width: 1280px){

  .btn-lg{ min-height:52px; font-size:17px; }

}