:root{
  --bg0:#000000;
  --bg2:#2a0016;
  --text:#fff7fb;
  --muted:rgba(255,247,251,.78);
  --muted2:rgba(255,247,251,.62);
  --stroke:rgba(255,255,255,.18);
  --cta:#ff2a7a;
  --cta2:#c61558;
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --shadow2:0 10px 28px rgba(0,0,0,.42);
  --r:16px;
  --r2:22px;
  --max:1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: var(--bg0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit}
.container{max-width:var(--max);margin:auto;padding:0 16px}

header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); }
.topbar{
  /* Tek renk header: iki renkli/çift ton hissini azaltır */
  background: var(--header1, var(--bg0));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar-inner{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 0;
  flex-wrap:wrap;
}

.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:850;
  font-size:13px;
  text-decoration:none;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.btn:hover{
  transform: translateY(-1px);
  background: var(--hover, rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.26);
}
.btn.cta{
  background:
    radial-gradient(220px 120px at 15% 20%, rgba(255,255,255,.14), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--cta) 92%, transparent), color-mix(in srgb, var(--cta2) 92%, transparent));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(255,42,122,.18);
}
.btn.dark{ background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.16); }

.mbar{ display:none; }
.hamb{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamb i{ width:18px;height:2px;background: rgba(255,247,251,.86); display:block; border-radius:99px; position:relative; }
.hamb i:before,.hamb i:after{ content:""; width:18px;height:2px;background: rgba(255,247,251,.86); position:absolute;left:0;border-radius:99px; }
.hamb i:before{ top:-6px; }
.hamb i:after{ top:6px; }

.mnav{ display:none; padding:12px 0 14px; border-top:1px solid rgba(255,255,255,.10); }
#mToggle{ display:none; }
#mToggle:checked ~ .mnav{ display:block; }
.mnav .mgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.mnav .btn{ width:100%; justify-content:center; }

main{ padding: 22px 0 34px; }
.hero{ text-align:center; padding: 10px 0 12px; }
.hero h1{ margin:0 0 10px; font-size: clamp(26px, 5.2vw, 40px); font-weight: 950; letter-spacing:.3px; }
.hero .sub{ margin:0 auto; max-width: 72ch; color: var(--muted); font-size: 14.6px; line-height: 1.65; }

.surface{
  margin-top: 14px;
  padding: 16px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 480px at 18% 0%, rgba(255,42,122,.06), transparent 62%),
    radial-gradient(900px 480px at 85% 10%, rgba(139,11,78,.08), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.55));
  box-shadow: 0 22px 70px rgba(0,0,0,.46);
}

.grid{ display:grid; grid-template-columns: 1fr 420px; gap: 22px; margin-top: 0; }
@media(max-width:1120px){ .grid{ grid-template-columns: 1fr 400px; } }
@media(max-width:980px){ .surface{ padding: 12px; } .grid{ grid-template-columns:1fr; } }

.panel{
  background: linear-gradient(180deg, rgba(90,27,63,.35), rgba(74,23,53,.30));
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--r2);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  overflow:hidden;
  /* admin > tasarım > orta panel arkaplan */
  background-color: var(--panelbg, rgba(0,0,0,.30));
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); }
.panel-head .title{ font-weight: 950; letter-spacing:.2px; }
.pill{ font-size:12px; padding: 6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.26); color: rgba(255,255,255,.86); white-space:nowrap; }
.panel-body{ padding: 14px; }

.intro-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.42);
  margin-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.52)),
    radial-gradient(600px 300px at 10% 0%, rgba(255,42,122,.14), transparent 60%),
    radial-gradient(600px 300px at 90% 20%, rgba(139,11,78,.18), transparent 60%);
  background-color: var(--panelbg, rgba(0,0,0,.30));
}

.intro-cta{
  position: relative;
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  /* Background image for Hemen Oyna (intro CTA).
     Image is layered under subtle gradients for readability. */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.52)),
    radial-gradient(520px 240px at 20% 10%, rgba(255,42,122,.16), transparent 55%),
    url('/assets/img/hemen-oyna-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* admin > tasarım > Hemen Oyna (giriş kutusu) rengi */
  background-color: var(--introcta, rgba(0,0,0,.22));
  padding: 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.intro-cta .cta-title{ margin:0; font-weight: 950; letter-spacing:.2px; font-size: 15px; color: rgba(255,247,251,.92); }

/* Intro top button: "UYGULAMA İNDİR" */
.cta-app-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-decoration:none;
  font-weight: 950;
  letter-spacing: .45px;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  height: var(--introAppBtnH, 40px);
  width: var(--introAppBtnW, auto);
  min-width: 0;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(220px 120px at 25% 30%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, var(--cta, #ff2a7a), var(--cta2, #c61558));
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.cta-app-btn::before{
  /* Arrow is rendered inside the button markup (.cta-app-icon).
     Keep only one arrow to avoid double-icon and mobile horizontal overflow. */
  content: none;
}
.cta-app-btn:hover{ filter: brightness(1.06); }
.cta-app-btn:active{ filter: brightness(.98); }

/* Buton, intro kartındaki üst başlık konumunu kullansın (Hemen Oyna alanı) */
.intro-cta .cta-title.cta-app-btn{ cursor:pointer; }
/* IMPORTANT: .cta-title is positioned with left:50% + translateX(-50%).
   If we reset transform on hover/active, it will visually slide left/right.
   Keep the centering transform in all states and avoid transform transitions. */
.intro-cta .cta-title.cta-app-btn{
  transform: translateX(-50%) !important;
  transition: filter .15s ease, box-shadow .15s ease;
}
.intro-cta .cta-title.cta-app-btn:hover{ transform: translateX(-50%) !important; }
.intro-cta .cta-title.cta-app-btn:active{ transform: translateX(-50%) !important; }
.intro-cta .cta-sub{ margin:-6px 0 6px; font-size: 12.8px; font-weight: 900; color: #fff; line-height: 1.5; }
.cta-actions{ display:flex; flex-direction:column; gap:12px; }
.cta-actions .btn{ width:100%; justify-content:center; }
.btn.big{ padding: 16px 16px; border-radius: 18px; font-size: 15.5px; font-weight: 950; letter-spacing: .35px; }
.btn.big.secondary{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)); border-color: rgba(255,255,255,.16); }

.article{
  /* Wrap text around thumbnail (desktop+mobile): float-based layout */
  display:block;
  padding: 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(93,27,65,.28);
  /* admin > tasarım > Blog Sıralama Kart rengi */
  background-color: var(--articlebg, rgba(93,27,65,.28));
  transition:.18s ease;
  margin-bottom: 14px;
  text-decoration:none;
  color: inherit;
}
.article:hover{ transform: translateY(-2px); background-color: var(--hover, rgba(107,32,80,.34)); border-color: rgba(255,255,255,.26); }

/* Blog sayfalarında kart hover'ı devre dışı (makale rengi sabit kalsın) */
.page-blog .article:hover{
  transform: none;
  background-color: var(--articlebg);
  border-color: rgba(255,255,255,.18);
}
.thumb{ border-radius: var(--thumbRadius, 16px); border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(200px 140px at 20% 20%, rgba(255,42,122,.20), transparent 60%),
    radial-gradient(200px 140px at 80% 80%, rgba(139,11,78,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  width: var(--thumbSize, 120px);
  height: var(--thumbSize, 120px);
  min-height: var(--thumbSize, 120px);
  float:left;
  margin: 2px 16px 10px 0;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.thumb img{ border-radius: var(--thumbRadius, 16px); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.05) contrast(1.02); }

/* Blog detay sayfasında kapak görseli sabit kalsın (zıplama/flicker olmasın) */
.thumb.thumb--post{ width:120px; height:120px; min-height:120px; }
.tag{ position:absolute; left:10px; top:10px; font-size: 11px; font-weight: 950; padding: 5px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.38); z-index:2; }
.article h2{ margin:0 0 6px; font-size:16px; font-weight:950; }
.article p{ margin:0; color: var(--muted2); font-size:14px; line-height:1.65; }
/* Clear floats so the card height expands */
.article::after{ content:""; display:block; clear:both; }

/* Single-post content: preserve spacing/paragraphs as entered in admin */
.post-content{ line-height: 1.85; }
.post-content p{ margin: 0 0 14px; }
.post-content p:last-child{ margin-bottom: 0; }
.post-content br{ line-height: 1.85; }
@media(max-width:620px){
  .thumb{ width:var(--thumbSize, 120px); height:var(--thumbSize, 120px); min-height:var(--thumbSize, 120px); margin: 2px 14px 10px 0; }
  .article h2{ font-size: 15.5px; line-height: 1.25; }
  .article p{ font-size: 13.6px; line-height: 1.65; }
}

/* Anasayfa sol panel başlık etiketi (www.cepokey.com) */
.brand-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--brandbadge, rgba(0,0,0,.18));
  color: rgba(255,247,251,.92);
}

.panel.sidebar{ padding:0; background-color: var(--sidebarbg, rgba(0,0,0,.22)); }
.panel.sidebar .panel-body{ padding:14px 0 14px; }
.panel.sidebar .sidebar-title{ margin: 8px 0 10px; padding: 0 12px; font-weight: 950; letter-spacing: .25px; font-size: 13px; color: rgba(255,247,251,.90); display:flex; align-items:center; gap:10px; }
.panel.sidebar .sidebar-title::after{ content:""; height:1px; flex:1; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); }
/* Sidebar link list styling: only apply to navigation links, not tag chips */
.panel.sidebar a.sidebar-link{ display:block; margin: 8px 0; padding: 12px 12px 12px 38px; border-radius: 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); border-left:0;border-right:0; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)); text-decoration:none; color: rgba(255,247,251,.90); font-weight: 900; font-size: 13.5px; position:relative; transition:.16s ease; }
.panel.sidebar a.sidebar-link::before{ content:""; width:10px;height:10px; border-radius:999px; background: var(--hover, rgba(255,42,122,.78)); box-shadow: 0 0 0 4px rgba(255,42,122,.14); position:absolute; left:14px; top:50%; transform: translateY(-50%); }
.panel.sidebar a.sidebar-link:hover{ background: var(--hover, rgba(255,42,122,.12)); }

.side-section{ margin: 14px 0 0; padding: 12px; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); background: radial-gradient(520px 220px at 10% 0%, rgba(255,42,122,.09), transparent 55%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.30)); background-color: var(--sidebarbg, rgba(0,0,0,.22)); }
.side-section-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.side-section-title{ font-weight: 950; letter-spacing:.25px; font-size: 13.5px; color: rgba(255,247,251,.94); }
.side-badge{ font-size: 11px; font-weight: 950; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,42,122,.22), rgba(0,0,0,.18)); color: rgba(255,247,251,.86); }



/* Sidebar post list (kategori/post sağ blok) */
.side-posts{ display:flex; flex-direction:column; gap:10px; padding-top:10px; }
.side-post{
  /*
    Desktop behavior: let the excerpt wrap around the thumbnail (as in the reference screenshot).
    Using float keeps a stable, magazine-like layout and prevents awkward flex wrapping.
  */
  display:block;
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  color: inherit;
}
.side-post:hover{ border-color: rgba(255,42,122,.35); }
.side-thumb{
  width: var(--sideThumbSize, 72px);
  height: var(--sideThumbSize, 72px);
  float:left;
  margin: 0 12px 8px 0;
  border-radius: var(--sideThumbRadius, 14px);
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.side-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.side-post::after{ content:""; display:block; clear:both; }
/* Sidebar post list text wrap */
.side-title{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 13px;
  line-height: 1.25;
  color: rgba(255,247,251,.96);
  display:inline;
}
.side-excerpt{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,247,251,.78);
  display:inline;
}

/* Mobile: keep sidebar compact */
@media (max-width: 520px){
  .side-excerpt{
    display:-webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }
}

/* --- Uygulama İndir (CTA title konumunda) --- */
.intro-cta .cta-title.cta-app-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: var(--introAppBtnW, auto) !important;
  min-width: 0 !important;
  height: var(--introAppBtnH, 28px) !important;
  padding: 0 16px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  background: linear-gradient(180deg, rgba(255,198,46,.92), rgba(186,122,14,.92)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.20) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.55) !important;
}

.intro-cta .cta-title.cta-app-btn .cta-app-icon{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 14px;
  line-height: 1;
}

.mini-table{ border-radius: 14px; border:1px solid rgba(255,255,255,.10); overflow:hidden; background: rgba(0,0,0,.18); }
.mini-row{ display:grid; grid-template-columns: 44px 1fr 140px; gap:10px; padding:10px; align-items:center; border-top:1px solid rgba(255,255,255,.06); }
.mini-row:first-child{ border-top:0; }
.mini-row.head{ background: rgba(0,0,0,.26); font-size: 11px; font-weight: 950; letter-spacing:.25px; color: rgba(255,247,251,.76); }
.mini-rank{ width:32px;height:32px; border-radius:12px; display:flex;align-items:center;justify-content:center; font-weight:950; font-size: 12.5px; background: radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.10), transparent 65%), linear-gradient(180deg, rgba(255,42,122,.22), rgba(0,0,0,.18)); border:1px solid rgba(255,255,255,.12); }
.mini-name{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:900; font-size:13px; }
.mini-score{ text-align:right; font-variant-numeric: tabular-nums; font-weight:950; font-size:13px; }
.mini-score small{ display:block; margin-top:2px; font-size:10.5px; font-weight:850; color: rgba(255,247,251,.60); }

/* Blog detay içerik (paragraf/boşluk düzeni) */
.post-content p{ margin: 0 0 20px; }
.post-content p:last-child{ margin-bottom: 0; }
.post-content p:last-child{ margin-bottom: 0; }
.post-content img{ max-width: 100%; height: auto; display: block; border-radius: 18px; margin: 10px 0; }
.post-content ul, .post-content ol{ margin: 0 0 14px 22px; }

.mini-list{ display:flex; flex-direction:column; gap:8px; }
.mini-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); }
.mini-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.dot{ width:10px;height:10px;border-radius:999px; background: var(--hover, rgba(255,42,122,.78)); box-shadow: 0 0 0 4px rgba(255,42,122,.14); }
.mini-meta{ min-width:0; }
.mini-meta b{ display:block; font-weight:950; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-meta span{ display:block; margin-top:2px; font-size:11.5px; font-weight:800; color: rgba(255,247,251,.64); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-right{ font-weight:950; font-size:13px; font-variant-numeric: tabular-nums; text-align:right; white-space:nowrap; min-width:64px; }

.tagcloud-wrap{ margin-top: 18px; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); background: radial-gradient(900px 420px at 10% 0%, rgba(255,42,122,.09), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.34)); }
.tagcloud{ padding: 18px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start; }
.tagcloud-title{ flex: 0 0 100%; margin:0 0 6px; color: rgba(255,247,251,.78); font-weight: 950; letter-spacing:.25px; font-size: 13px; }
.chip{ display:inline-flex; align-items:center; justify-content:flex-start; gap:8px; padding: 8px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: radial-gradient(120px 60px at 25% 20%, rgba(255,42,122,.10), transparent 60%), rgba(255,255,255,.04); color: rgba(255,247,251,.86); font-weight: 850; font-size: 12px; text-decoration:none; transition:.16s ease; white-space:nowrap; min-width: 0; }
.chip:before{ content:""; width:8px;height:8px;border-radius:999px; background: var(--hover, rgba(255,42,122,.78)); box-shadow: 0 0 0 4px rgba(255,42,122,.12); }
.chip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: var(--hover, rgba(255,255,255,.06)); }

/* Sidebar tag chips: denser layout (more tags per row) */
.sidebar .tagcloud{ gap:6px; padding: 14px 0; justify-content:flex-start; }
.sidebar .chip{ padding: 6px 9px; font-size: 11px; max-width: 100%; overflow:hidden; text-overflow:ellipsis; }
.sidebar .chip:before{ width:7px; height:7px; box-shadow: 0 0 0 3px rgba(255,42,122,.12); }

.footer{ border-top:1px solid rgba(255,255,255,.10); background: radial-gradient(900px 420px at 10% 0%, rgba(255,42,122,.10), transparent 60%), linear-gradient(180deg, var(--footer1, rgba(42,0,22,.70)), var(--footer2, rgba(18,0,10,.95))); }
.footer-contact{ padding: 18px 0 0; color: rgba(255,247,251,.70); font-size: 13.5px; }
.footer-contact a{ color: rgba(255,247,251,.86); text-decoration:none; }
.footer-contact a:hover{ color: rgba(255,247,251,.96); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; padding: 26px 0; }
@media(max-width:900px){ .footer-grid{ grid-template-columns:1fr; } }
.footer h4{ margin:0 0 10px; font-size:14px; font-weight: 950; letter-spacing:.2px; }
.footer p, .footer a{ color: rgba(255,247,251,.72); font-size: 13.5px; line-height: 1.7; text-decoration:none; }
.footer a:hover{ color: rgba(255,247,251,.92); }
.brand{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
.logo{ width:44px;height:44px;border-radius:14px; background: radial-gradient(26px 26px at 30% 30%, rgba(255,255,255,.16), transparent 60%), linear-gradient(180deg, var(--cta), rgba(139,11,78,.55)); border:1px solid rgba(255,255,255,.14); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.brand b{ font-weight: 950; letter-spacing:.2px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding: 14px 0 18px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color: rgba(255,247,251,.55); font-size: 12.5px; }

@media(max-width:720px){
  .topbar-inner{ display:none; }
  .mbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
  .mbrand{ display:flex; align-items:center; gap:10px; font-weight:950; letter-spacing:.2px; }
  .mbrand .dotlogo{ width:34px;height:34px;border-radius:12px; background: radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.14), transparent 60%), linear-gradient(180deg, var(--cta), rgba(139,11,78,.55)); border:1px solid rgba(255,255,255,.14); }
}

/* admin minimal */
.admin-wrap{max-width:1200px;margin:0 auto;padding:18px 16px}
.admin-card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px}
.admin-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.admin-nav a{padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);text-decoration:none;background:rgba(255,255,255,.05);font-weight:900}
.admin-nav a.active{background:rgba(255,42,122,.20)}
.field{margin:10px 0}
.field label{display:block;font-weight:900;margin-bottom:6px;color:rgba(255,247,251,.88)}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:var(--text)}
.field textarea{min-height:90px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.row2{grid-template-columns:1fr}}
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.10)}
.table th,.table td{padding:10px;border-top:1px solid rgba(255,255,255,.06);text-align:left}
.table thead th{background:rgba(0,0,0,.25);font-size:12px;letter-spacing:.2px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);font-size:12px}

/* ---------------- Admin Panel ---------------- */
body.admin{background:#0b0010}
.admin-wrap{min-height:100vh;display:flex}
.admin-sidebar{width:250px;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78));border-right:1px solid rgba(255,255,255,.10);position:sticky;top:0;align-self:flex-start;height:100vh;overflow:auto}
.admin-sidebar .brand{padding:16px 16px 12px;font-weight:950;letter-spacing:.3px;color:rgba(255,247,251,.94)}
.admin-sidebar .menu{display:flex;flex-direction:column;padding:6px 10px 14px}
.admin-sidebar .menu a{display:block;padding:11px 12px;border-radius:12px;margin:4px 0;text-decoration:none;color:rgba(255,247,251,.88);font-weight:900;border:1px solid transparent;background:rgba(255,255,255,.02)}
.admin-sidebar .menu a:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
.admin-sidebar .menu a.active{background:linear-gradient(180deg, rgba(255,42,122,.22), rgba(0,0,0,.22));border-color:rgba(255,255,255,.10)}
.admin-main{flex:1;min-width:0}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(139,11,78,.35), rgba(0,0,0,.35));position:sticky;top:0;z-index:10;backdrop-filter: blur(8px)}
.admin-view{padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);text-decoration:none;color:rgba(255,247,251,.92);font-weight:900}
.admin-card{max-width:1150px;margin:16px auto 28px;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.50));box-shadow:0 18px 55px rgba(0,0,0,.55)}
.admin-card h1{margin:0 0 12px;font-size:30px;letter-spacing:.2px}
.admin-card .notice{padding:10px 12px;border-radius:14px;background:rgba(16,255,170,.10);border:1px solid rgba(16,255,170,.22);margin:10px 0 14px;color:rgba(235,255,247,.92);font-weight:850}
.admin-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-card .field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.admin-card label{font-weight:900;color:rgba(255,247,251,.82);font-size:13px}
.admin-card input, .admin-card textarea, .admin-card select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:rgba(255,247,251,.92);padding:10px 12px;outline:none}
.admin-card textarea{min-height:96px}
.admin-card input[type=color]{padding:0;height:44px;width:100%;border-radius:12px}
.admin-card .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,247,251,.92);font-weight:950;text-decoration:none;cursor:pointer}
.admin-card .btn.cta{background:linear-gradient(180deg, rgba(255,42,122,.92), rgba(198,21,88,.92));border-color:rgba(255,255,255,.12)}
@media(max-width:980px){.admin-sidebar{display:none}.admin-card{margin:12px}}


/* Load more / pagination bar */
.morebar{
  margin-top:16px;
  padding:12px;
  border-radius:12px;
  background: var(--morebg);
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
}
.morebar a.morebtn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  color: var(--morebtntext, #ffffff);
  text-decoration:none;
  background: var(--morebtnbg, var(--cta));
  border:1px solid rgba(255,255,255,.10);
}
}
.morebar a.morebtn:hover{ filter: brightness(1.05); }

/* RADIO: header slot should not push layout */
.panel-head{ position: relative; }
.panel-head .title{ flex:1; position:relative; min-height:70px; }
.panel-head .title #radio-slot[data-mini="1"]{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
}

/* RADIO MOBILE FIT: make player flush to panel edges without horizontal scroll */
.panel-head .title #radio-slot[data-mini="1"]{
  left:-16px;
  right:-16px;
}
@media(max-width: 520px){
  .panel-head .title #radio-slot[data-mini="1"]{
    left:-12px;
    right:-12px;
  }
}

/* MOBILE FLUSH + RADIO SLOT FLOW FIX */
@media(max-width: 720px){
  /* remove side padding so site sits flush */
  .container{ padding-left:0 !important; padding-right:0 !important; }
  .hero{ padding-left:0 !important; padding-right:0 !important; }
  /* surface/card wrappers flush */
  .surface{ margin-left:0 !important; margin-right:0 !important; }
  .panel{ margin-left:0 !important; margin-right:0 !important; width:100% !important; }
  .panel-head{ padding-left:10px !important; padding-right:10px !important; }
  .panel-body{ padding-left:10px !important; padding-right:10px !important; }

  /* On mobile, do NOT absolute-position header radio (prevents overlap) */
  .panel-head .title{ min-height:0 !important; }
  .panel-head .title #radio-slot[data-mini="1"]{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    margin:8px 0 0 0 !important;
  }
}

/* RADIO: desktop align to right edge only (do not affect mobile) */
@media(min-width: 721px){
  .panel-head .title #radio-slot[data-mini="1"]{
    left: 0 !important;
    right: -16px !important;
  }
}


/* === Desktop only: radio bar flush to panel edges (no mobile change) === */
@media (min-width: 768px) {
  .panel-head .title { flex: 1; width: 100%; }
  .panel-head .title #radio-slot{
    display:block;
    width: calc(100% + 32px) !important; /* cancel panel-head left/right padding (16px + 16px) */
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
}


/* === Intro (üst giriş bölümü) full width panel kenarlarına kadar === */
@media (min-width: 768px){
  .panel-body > .intro-row{
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-top: -16px !important;
  }
}


/* === Intro background full-bleed (desktop only) === */
@media (min-width:768px){
  .panel-body > .intro-row{
    margin-left:-16px !important;
    margin-right:-16px !important;
    margin-top:-16px !important;
    margin-bottom:-16px !important;
  }

  .panel-body > .intro-row .intro-cta{
    border-radius:0 !important;
    background-size:cover !important;
    background-position:center !important;
  }
}


/* === FIX: restore radio normal position === */
@media (min-width:768px){
  .panel-body > .intro-row{
    margin-bottom:0 !important;
  }
}

/* === Oval intro image perfectly fitted === */
.intro-cta{
  background-image:url('/assets/img/intro-bg.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-radius:28px !important;
  overflow:hidden !important;
}

.intro-cta::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px;
}



/* === PERFECT INTRO IMAGE FIT (FULLY VISIBLE, NO CROP) === */
.intro-cta{
    background-image:url('/assets/img/intro-bg.png') !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    border-radius:28px !important;
    overflow:hidden !important;
}


/* === HEMEN OYNA CENTER + BIG === */
.intro-cta h1,
.intro-cta .title,
.intro-cta h2{
    text-align:center !important;
    width:100% !important;
    font-size:32px !important;
    font-weight:700 !important;
}


/* === TRUE FULL OVAL BACKGROUND FIX (NO SIDE GAPS DESKTOP + MOBILE) === */
.intro-cta{
    background-image:url('/assets/img/intro-bg.png') !important;
    background-size:cover !important;          /* fill fully */
    background-position:center center !important;
    background-repeat:no-repeat !important;
    border-radius:28px !important;
    overflow:hidden !important;
    padding:0 !important;                      /* remove inner spacing causing gaps */
}

/* ensure inner content does not create side gaps */
.intro-cta > *{
    padding:18px !important;                   /* restore inner spacing only for content */
}


/* === Intro BG from admin (home_intro_bg) === */
.intro-cta{
  background-image: var(--introbgimg, url('/assets/img/intro-bg.png')) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* === Intro BG admin controlled (home_intro_bg) === */
.intro-cta{
  background-image: var(--introbgimg, url('/assets/img/intro-bg.png')) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  /* auto height by image ratio (works for any size uploaded) */
  aspect-ratio: var(--introbgAR, 2.5000) !important; /* fallback */
}


/* === CTA buttons fit (mobile) === */
@media (max-width: 520px){
  .intro-cta{ padding: 12px !important; gap: 10px !important; justify-content: flex-start !important; }
  .intro-cta .cta-title{ font-size: 16.5px !important; text-align:center !important; }
  .intro-cta{ padding-bottom: 86px !important; } /* alttaki tek butona yer */
  .intro-cta .cta-actions{ 
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .intro-cta .cta-actions .btn{ 
    width: min(320px, 86%) !important;
    padding: 12px 14px !important; 
    font-size: 14.5px !important; 
    border-radius: 16px !important;
  }
}

/* Desktop: giriş + kayıt ol yan yana, en altta sabit */
@media (min-width: 521px){
  .intro-cta{
    padding-bottom: 96px !important; /* alttaki butonlara yer */
  }
  .intro-cta .cta-actions{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 16px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .intro-cta .cta-actions .btn{
    width: auto !important;
    min-width: 180px !important;
    max-width: 240px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }
}


/* === Mobile: CTA buttons layout (OKEY'E GİRİŞ + Kayıt Ol) === */
@media(max-width: 520px){
  .intro-cta{
    position: relative !important;
    /* leave space for stacked buttons so nothing gets pushed off-screen */
    padding: 14px !important;
    padding-bottom: 118px !important;
  }
  .intro-cta .cta-title{
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;
    margin: 6px 0 0 !important;
  }
  .intro-cta .cta-actions{
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    z-index: 3 !important;
  }
  .intro-cta .cta-actions > *{
    width: 100% !important;
  }
  .intro-cta .cta-actions a,
  .intro-cta .cta-actions button{
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap;
  }
}




/* === CTA button layout tweak (desktop+mobile) === */
.intro-cta .cta-actions{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  /* push buttons a bit lower without affecting background */
  padding-top: 140px;
  padding-bottom: 18px;
}
.intro-cta .cta-actions a{
  width:100%;
}
/* Ensure register sits at the bottom, login just above */
.intro-cta .cta-actions a:first-child{ order: 1; } /* OKEY'E GİRİŞ */
.intro-cta .cta-actions a:nth-child(2){ order: 2; } /* Kayıt Ol */

@media (max-width:520px){
  .intro-cta .cta-actions{
    padding-top: 120px;
    padding-bottom: 14px;
    gap: 10px;
  }
  /* Mobile: hide only the 'Kayıt Ol' text, keep button box */
  .intro-cta .cta-actions a:nth-child(2){
    color: transparent !important;
    text-shadow: none !important;
  }
  .intro-cta .cta-actions a:nth-child(2)::after{
    content: "";
  }
}
/* === end CTA button layout tweak === */




/* === CTA layout: desktop keep both, mobile hide register + full-bleed background === */

/* Desktop/tablet: keep two buttons, push lower a bit */
.intro-cta{ position: relative; }
.intro-cta .cta-actions{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  padding-top: 140px;
  padding-bottom: 18px;
}
.intro-cta .cta-actions a{ width:100%; }

@media (max-width:520px){
  /* Make the intro background touch all sides (no inner gaps) */
  .intro-cta{
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Place ONLY login button at the bottom */
  .intro-cta .cta-actions{
    position:absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* Hide "Kayıt Ol" button completely on mobile */
  .intro-cta .cta-actions a:nth-child(2){
    display:none !important;
  }

  /* Ensure the remaining button is full width and not tiny */
  .intro-cta .cta-actions a:nth-child(1){
    width:100% !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 16px !important;
  }
}
/* === end CTA layout === */

/* === Mobile: compact side-by-side CTA buttons (match widths) === */
@media (max-width:520px){
  /* Place both buttons on one row, centered at the bottom */
  .intro-cta .cta-actions{
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure both buttons are visible and have the same compact sizing */
  .intro-cta .cta-actions a{
    display: inline-flex !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 140px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Override any earlier mobile rules that hide/blank the register button */
  .intro-cta .cta-actions a:nth-child(2){
    display: inline-flex !important;
    color: var(--introRegisterText, #ffffff) !important;
    text-shadow: none !important;
  }
  .intro-cta .cta-actions a:nth-child(2)::after{ content: none !important; }
}
/* === end mobile compact CTA === */


/* === Desktop: pin CTA buttons to the bottom (login above, register at very bottom) === */
@media (min-width: 521px){
  .intro-cta{
    position: relative !important;
  }
  .intro-cta .cta-actions{
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  .intro-cta .cta-actions a,
  .intro-cta .cta-actions button{
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Ensure order: login above, register at bottom */
  .intro-cta .cta-actions a:first-child{ order: 1 !important; }
  .intro-cta .cta-actions a:nth-child(2){ order: 2 !important; }
}

/* ==========================================================
   Intro CTA son düzen (Desktop + Mobile)
   - "Hemen Oyna" üst-ortada
   - Butonlar daha dar (logo/yazı kapanmasın)
   - Mobilde yalnız "OKEYE GİRİŞ" görünür ve en altta durur
   ========================================================== */

/* Ortak */
.intro-cta{ position: relative; }
.intro-cta .cta-sub{ display:none !important; }

/* Desktop */
@media (min-width: 521px){
  .intro-cta{
    /* butonlar altta absolute; içerik üstte kalabilsin */
    padding: 16px 16px 110px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .intro-cta .cta-title{
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
    background: rgba(0,0,0,.30) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }

  .intro-cta .cta-actions{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .intro-cta .cta-actions .btn{
    width: 66% !important;      /* logo/yazı görünür, daha şık */
    max-width: 420px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }
}

/* Mobile */
@media (max-width: 520px){
  /* intro alanı daha geniş dursun */
  .intro-row{ padding: 0 !important; }

  .intro-cta{
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .intro-cta .cta-title{
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: rgba(255,255,255,.96) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.60) !important;
    background: rgba(0,0,0,.32) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }

  .intro-cta .cta-actions{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* mobilde yalnız OKEYE GİRİŞ */
  .intro-cta .cta-actions .intro-register{ display:inline-flex !important; }

  .intro-cta .cta-actions .btn{
    width: 86% !important;
    max-width: 360px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }
}

/* Intro buton renkleri (panelden yönetilebilir) */
.intro-cta .btn--login{
  background: linear-gradient(180deg, var(--introLoginBg, var(--cta)) 0%, rgba(0,0,0,.25) 100%) !important;
  color: var(--introLoginText, #ffffff) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.intro-cta .btn--register{
  background: linear-gradient(180deg, var(--introRegisterBg, var(--cta2)) 0%, rgba(0,0,0,.25) 100%) !important;
  color: var(--introRegisterText, #ffffff) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* Intro CTA yerleşim düzeltmeleri (desktop + mobil) */
.intro-cta{ position: relative !important; }
.intro-cta .cta-title{
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 3 !important;
}
.intro-cta .cta-actions{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 16px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 3 !important;
}
.intro-cta .cta-actions .btn{
  width: auto !important;
  min-width: 170px !important;
  max-width: 210px !important;
  padding: 10px 16px !important;
  border-radius: 14px !important;
}

@media (max-width: 520px){
  /* Mobilde intro alanı kenarlara tam otursun */
  .intro-row{ padding-left: 0 !important; padding-right: 0 !important; }
  .intro-cta{
    width: 100% !important;
    border-radius: 22px !important;
    padding: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  /* Mobilde sadece giriş butonu */
  .intro-cta .btn--register{ display: inline-flex !important; }
  .intro-cta .cta-actions{
    bottom: 12px !important;
    gap: 0 !important;
  }
  .intro-cta .cta-actions .btn{
    min-width: 0 !important;
    width: 58% !important;
    max-width: 260px !important;
    padding: 9px 14px !important;
    font-size: 14px !important;
  }
}

/* === FINAL: Intro CTA layout (desktop + mobile) === */
/* This block intentionally overrides older rules above. */

.intro-cta{ position: relative !important; }
.intro-cta .cta-actions{ padding-top: 0 !important; }
.intro-cta .cta-actions a{ order: 0 !important; }

@media (min-width: 521px){
  .intro-cta{ padding-bottom: 96px !important; }
  .intro-cta .cta-actions{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 18px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
  }
  .intro-cta .cta-actions a{
    width: auto !important;
    min-width: 180px !important;
    max-width: 240px !important;
    padding: 10px 18px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* Desktop: make "OKEYE GİRİŞ" button same compact width as "Kayıt Ol" */
  .intro-cta .cta-actions a.btn--login{
    min-width: 180px !important;
    max-width: 180px !important;
  }
}

@media (max-width: 520px){
  /* full-bleed background inside the rounded box */
  .intro-cta{
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* title at the very top (like your screenshot) */
  .intro-cta .cta-title{
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 3 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  /* two buttons side-by-side at the bottom */
  .intro-cta{ padding-bottom: 0 !important; }
  .intro-cta .cta-actions{
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 3 !important;
  }
  .intro-cta .cta-actions a{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: calc(50% - 5px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* ensure register is visible and not forced transparent by older rules */
  .intro-cta .cta-actions a:nth-child(2){
    display: inline-flex !important;
    color: var(--introRegisterText, #fff) !important;
    text-shadow: none !important;
  }
}
/* === END FINAL === */

/* === Admin-controlled intro button sizes (px) === */
@media (min-width: 521px){
  .intro-cta .cta-actions a.btn--login{
    min-width: var(--introLoginBtnW, 180px) !important;
    max-width: var(--introLoginBtnW, 180px) !important;
    height: var(--introLoginBtnH, 32px) !important;
  }
  .intro-cta .cta-actions a.btn--register{
    min-width: var(--introRegisterBtnW, 180px) !important;
    max-width: var(--introRegisterBtnW, 180px) !important;
    height: var(--introRegisterBtnH, 32px) !important;
  }
}

@media (max-width: 520px){
  .intro-cta .cta-actions a.btn--login{
    width: var(--introLoginBtnW, calc(50% - 5px)) !important;
    height: var(--introLoginBtnH, 28px) !important;
    min-height: var(--introLoginBtnH, 28px) !important;
  }
  .intro-cta .cta-actions a.btn--register{
    width: var(--introRegisterBtnW, calc(50% - 5px)) !important;
    height: var(--introRegisterBtnH, 28px) !important;
    min-height: var(--introRegisterBtnH, 28px) !important;
  }
}