/* ═══════════════════════════════════════════════════════════
   SHARED STYLESHEET — turkiyecasinolar.com vitrin
   index.php + firma.php tarafından kullanılır
═══════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:        #09090f;
  --bg-1:      #10101a;
  --bg-2:      #161620;
  --bg-3:      #1e1e2c;

  --gold:      #c8a84b;
  --gold-2:    #e8c96a;
  --gold-3:    #f5e09a;
  --gold-dim:  #7a6230;
  --gold-glow: rgba(200,168,75,.18);
  --gold-soft: rgba(200,168,75,.08);

  --teal:      #00c9a7;
  --teal-soft: rgba(0,201,167,.08);

  --t1: #f0ece0;
  --t2: #9a9080;
  --t3: #5a5448;

  --b1: rgba(200,168,75,.15);
  --b2: rgba(200,168,75,.30);
  --b3: rgba(200,168,75,.50);

  --ff-display: 'Cinzel', serif;
  --ff-body:    'Inter', sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;

  --radius:    8px;
  --radius-sm: 4px;
  --shadow:    0 4px 24px rgba(0,0,0,.6);
  --glow:      0 0 32px rgba(200,168,75,.12);
  --nav-h:     60px;
  --bot-h:     64px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--t1);
  min-height: 100dvh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 100% 45% at 50% 0%, rgba(200,168,75,.06) 0%, transparent 70%),
    linear-gradient(rgba(200,168,75,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,168,75,.025) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed;
}
::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:2px }
a { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:var(--ff-body) }
img { display:block; max-width:100% }

/* ─── DESKTOP TOP NAV ────────────────────────────────────── */
.top-nav {
  display: none;
  height: var(--nav-h);
  background: rgba(9,9,15,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b1);
  position: sticky; top:0; z-index:100;
}
.top-nav-inner {
  max-width: 1200px; margin:0 auto;
  height: 100%;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 36px; gap:24px;
}
.nav-logo {
  font-family: var(--ff-display);
  font-size: 14px; font-weight:700;
  color: var(--gold); letter-spacing:.12em;
  white-space: nowrap;
  display: flex; align-items:center; gap:10px;
  flex-shrink: 0;
}
.nav-logo-img { height:28px; width:auto; display:block; flex-shrink:0; opacity:.9; transition:opacity .2s }
.nav-logo:hover .nav-logo-img { opacity:1 }

.nav-search { position:relative; flex:1; max-width:380px }
.nav-search input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--radius-sm);
  padding: 10px 40px 10px 16px;
  font-family: var(--ff-body);
  font-size: 14px; color:#111;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.nav-search input::placeholder { color:#999 }
.nav-search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft) }
.nav-search-ico {
  position: absolute; right:12px; top:50%; transform:translateY(-50%);
  color: #888; pointer-events:none;
}
.nav-search-ico svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.nav-links { display:flex; align-items:center; gap:2px }
.nav-btn {
  background: none; border:none;
  padding: 8px 14px;
  font-size: 12px; font-weight:500;
  color: var(--t2); letter-spacing:.04em;
  border-radius: var(--radius-sm);
  display: flex; align-items:center; gap:7px;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-btn:hover { color:var(--gold); background:var(--gold-soft) }
.nav-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.nav-btn.tg-nav svg { fill:currentColor; stroke:none }

/* ─── BOTTOM NAV (mobil) ─────────────────────────────────── */
.bottom-nav {
  display: flex;
  position: fixed; bottom:0; left:0; right:0;
  height: var(--bot-h);
  background: rgba(9,9,15,.96);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--b1);
  align-items: stretch; justify-content:space-around;
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex; flex-direction:column;
  align-items: center; justify-content:center; gap:5px;
  background: none; border:none;
  color: var(--t3);
  font-size: 9px; font-weight:500;
  letter-spacing: .1em; text-transform:uppercase;
  font-family: var(--ff-body);
  transition: color .2s;
  padding: 0 4px 6px;
  position: relative;
  text-decoration: none;
}
.nav-item::after {
  content: '';
  position: absolute; top:0; left:25%; right:25%;
  height: 2px; background:var(--gold);
  border-radius: 0 0 2px 2px;
  opacity: 0; transition:opacity .2s;
}
.nav-item.active,.nav-item:hover { color:var(--gold) }
.nav-item.active::after { opacity:1 }
.nav-item svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.nav-item.tg-nav svg, .nav-item.tg-item svg { fill:currentColor; stroke:none }

/* ─── DRAWER ─────────────────────────────────────────────── */
.overlay {
  display: none; position:fixed; inset:0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 200; align-items:flex-end;
}
.overlay.open { display:flex; animation:fade-in .2s ease }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.drawer {
  width: 100%; max-height:80dvh;
  background: var(--bg-1);
  border-top: 1px solid var(--b1);
  border-radius: 12px 12px 0 0;
  overflow-y: auto;
  padding: 0 20px 32px;
  transform: translateY(100%);
  animation: slide-up .3s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes slide-up { to{transform:translateY(0)} }
.drawer-handle {
  width: 32px; height:3px;
  background: var(--b2); border-radius:2px;
  margin: 14px auto 18px;
}
.drawer-title {
  font-family: var(--ff-display);
  font-size: 14px; font-weight:700;
  color: var(--gold);
  display: flex; align-items:center; gap:8px;
  margin-bottom: 14px; padding-bottom:12px;
  border-bottom: 1px solid var(--b1); letter-spacing:.06em;
}
.drawer-title svg { width:15px; height:15px; fill:currentColor }
.tg-row {
  display: flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(200,168,75,.05);
}
.tg-row:last-child { border-bottom:none }
.tg-row-name { font-size:14px; font-weight:500; color:var(--t1) }
.tg-row-btn {
  display: flex; align-items:center; gap:6px;
  padding: 7px 14px;
  background: var(--gold-soft);
  border: 1px solid var(--b2);
  border-radius: var(--radius-sm);
  font-size: 11px; font-weight:600;
  color: var(--gold); transition:all .2s;
}
.tg-row-btn:hover { background:rgba(200,168,75,.15) }
.tg-row-btn svg { width:11px; height:11px; fill:currentColor }
.info-text { font-size:13px; line-height:1.75; color:var(--t2) }
.info-text h3 { font-family:var(--ff-display); font-size:13px; font-weight:700; color:var(--gold); margin:14px 0 5px; letter-spacing:.06em }
.info-text p { margin-bottom:8px }
.info-text strong { color:var(--t1) }

/* ─── TG STRIP ───────────────────────────────────────────── */
.tg-strip { display: flex; gap:8px; overflow-x:auto; padding: 0 0 14px; scrollbar-width:none; justify-content: center !important;}
.tg-strip::-webkit-scrollbar { display:none }
.tg-chip {
  flex-shrink: 0;
  display: flex; align-items:center; gap:6px;
  background: var(--bg-2);
  border: 1px solid var(--b1);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px; font-weight:500;
  color: var(--t2) !important; /* <a> tag override */
  text-decoration: none;
  transition: all .2s; letter-spacing:.03em;
  white-space: nowrap;
}
.tg-chip:hover { border-color:var(--gold); color:var(--gold) !important; background:var(--gold-soft) }
.tg-chip svg { width:14px; height:14px; fill:currentColor; flex-shrink:0 }

/* ─── SECTION HEADER ─────────────────────────────────────── */
.sec-head {
  display: flex; align-items:center; justify-content:space-between;
  margin-bottom: 16px;
}
.sec-title-wrap { display:flex; align-items:center; gap:10px }
.sec-bar { width:2px; height:16px; background:var(--gold); border-radius:1px; flex-shrink:0 }
.sec-title {
  font-family: var(--ff-mono);
  font-size: 10px; font-weight:500;
  color: var(--t2); letter-spacing:.16em; text-transform:uppercase;
}
.sec-count { font-family:var(--ff-mono); font-size:10px; color:var(--t3); letter-spacing:.06em }

/* ─── FIRMA KARTLARI ─────────────────────────────────────── */
.firms { display:flex; flex-direction:column; gap:10px }
.card {
  background: var(--bg-1);
  border: 1px solid var(--b1);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: border-color .25s, box-shadow .25s, transform .15s;
}
.card::before {
  content: '';
  position: absolute; top:0; left:0; bottom:0; width:2px;
  background: linear-gradient(180deg,var(--gold-2),var(--teal));
  opacity: 0; transition:opacity .25s;
}
.card:hover { border-color:var(--b2); box-shadow:var(--shadow),var(--glow) }
.card:hover::before { opacity:1 }

.card-top {
  display: flex; gap:14px;
  padding: 16px 16px 0;
  align-items: center;
}
.card-logo {
  width: 140px; height:60px; flex-shrink:0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--b1);
  position: relative;
  display: flex; align-items:center; justify-content:center;
}
.card-logo img {
  width: 100%; height:100%;
  object-fit: contain;
  padding: 8px;
  opacity: 0; transition:opacity .35s;
  position: relative; z-index:1;
}
.card-logo img.visible { opacity:1 }
.card-logo-init {
  position: absolute; inset:0;
  display: flex; align-items:center; justify-content:center;
  font-family: var(--ff-display);
  font-size: 22px; font-weight:900;
  color: var(--gold);
  background: linear-gradient(135deg,var(--bg-3),var(--bg-2));
  z-index: 0;
}
.card-body {
  flex: 1; min-width:0;
  display: flex; flex-direction:column;
  justify-content: center; gap:6px;
}
.card-name {
  font-family: var(--ff-display);
  font-size: 18px; font-weight:700;
  color: var(--t1); letter-spacing:.02em;
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom: 0;
}
.card-tagline {
  font-size: 12px; font-weight:300;
  color: var(--t3);
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height: 16px;
}
.card-cta {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px; font-weight:500;
  color: var(--gold-2); letter-spacing:.07em;
  background: rgba(200,168,75,.07);
  border-top: 1px solid rgba(200,168,75,.12);
  border-bottom: 1px solid rgba(200,168,75,.12);
  padding: 8px 16px;
  overflow: hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-top: 12px;
  text-align: center;
}
.card-bottom {
  display: flex; align-items:center; justify-content:space-between;
  gap: 8px;
  padding: 12px 16px 14px;
  margin-top: 0;
  border-top: 1px solid rgba(200,168,75,.07);
}
.card-socials { display:flex; align-items:center; gap:6px }
.social-ico {
  width: 32px; height:32px;
  display: flex; align-items:center; justify-content:center;
  border: 1px solid var(--b1);
  border-radius: var(--radius-sm);
  color: var(--t3);
  transition: all .2s;
  text-decoration: none;
  flex-shrink: 0;
}
.social-ico:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-soft) }
.social-ico svg { width:15px; height:15px }
.social-ico.tg svg { fill:currentColor; stroke:none }
.social-ico.ig svg,.social-ico.tw svg { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

.card-btns { display:flex; gap:6px; flex-shrink:0 }
.btn-go {
  background: var(--gold);
  border: none; border-radius:var(--radius-sm);
  padding: 9px 18px;
  font-family: var(--ff-display);
  font-size: 11px; font-weight:700;
  color: #09090f;
  letter-spacing: .08em; text-transform:uppercase;
  display: flex; align-items:center; gap:6px;
  transition: background .2s, box-shadow .2s, transform .1s;
  white-space: nowrap;
}
.btn-go:hover { background:var(--gold-2); box-shadow:0 4px 20px rgba(200,168,75,.35) }
.btn-go:active { transform:scale(.97) }
.btn-go svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round }
.btn-profile {
  background: transparent;
  border: 1px solid var(--b2);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-family: var(--ff-display);
  font-size: 11px; font-weight:600;
  color: var(--t2); letter-spacing:.06em; text-transform:uppercase;
  transition: all .2s; white-space:nowrap;
}
.btn-profile:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-soft) }

/* ─── MOBILE SEARCH ──────────────────────────────────────── */
.mob-search { position:relative; margin-bottom:18px }
.mob-search input {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-sm);
  padding: 14px 48px 14px 18px;
  font-family: var(--ff-body);
  font-size: 15px; color:#111;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.mob-search input::placeholder { color:#999 }
.mob-search input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft),0 2px 12px rgba(0,0,0,.3) }
.mob-search .s-ico { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#888; pointer-events:none }
.mob-search .s-ico svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.mob-search .s-clear {
  display: none; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background: var(--bg-3); border:none; border-radius:50%;
  width: 22px; height:22px; font-size:11px;
  color: var(--t2); align-items:center; justify-content:center;
  transition: all .2s;
}
.mob-search .s-clear:hover { background:var(--b1); color:var(--t1) }

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--b1);
  padding: 24px 20px; text-align:center;
  margin-top: 32px;
}
.footer-brand {
  font-family: var(--ff-display);
  font-size: 11px; font-weight:600;
  color: var(--gold-dim);
  letter-spacing: .2em; text-transform:uppercase;
  margin-bottom: 6px;
}
.footer-sub { font-size:11px; color:var(--t3) }

/* ─── EMPTY / SKELETON ───────────────────────────────────── */
.empty-state { text-align:center; padding:48px 20px; color:var(--t3) }
.empty-ico { font-size:28px; margin-bottom:10px; opacity:.5 }
.empty-lbl { font-size:13px; color:var(--t2) }
.skel {
  background: var(--bg-1); border:1px solid var(--b1);
  border-radius: var(--radius); height:116px;
  position: relative; overflow:hidden;
}
.skel::after {
  content: ''; position:absolute; inset:0;
  background: linear-gradient(90deg,transparent 0%,var(--gold-soft) 50%,transparent 100%);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(min-width:768px) {
  body { padding-bottom:0 }
  .top-nav { display:block }
  .bottom-nav { display:none }
  .mob-search { display:none }
  .overlay { align-items:center; justify-content:flex-end }
  .drawer {
    width: 360px; max-height:100dvh; height:100dvh;
    border-radius: 0; border-top:none;
    border-left: 1px solid var(--b1);
    animation: slide-right .3s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes slide-right { from{transform:translateX(100%)} to{transform:translateX(0)} }
  .card:hover { transform:translateY(-3px) }
}