/* ──────────────────────────────────────────────────────────────
   GreyGroupe · ortak arayüz katmanı
   1) Aydınlık / koyu tema değişkenleri
   2) Üç çizgili menü (her ekran boyutunda tek düğme)
   Tek dosya, tüm sayfalarda ortak. Sayfaların kendi <style> bloğuna
   dokunmadan çalışır: html[data-theme="light"] seçicisi :root'tan
   daha özgüldür, sıradan bağımsız kazanır.
   ────────────────────────────────────────────────────────────── */

/* ═══ 1. AYDINLIK TEMA ═══════════════════════════════════════ */
html[data-theme="light"]{
  --bg:#F7F6F2; --bg-soft:#EFEEE9; --panel:#FFFFFF;
  --ink:#14151A; --ink-soft:#4A4D57; --ink-faint:#63666F;
  --silver:#5A5E66; --silver-bright:#2B2E35; --silver-dim:#C9CBD0;
  --gold:#6E7279; --gold-bright:#22252B; --gold-dim:#C9CBD0;
  --gold-grad:linear-gradient(135deg,#22252B 0%,#43464E 45%,#6E7279 100%);
  --line:#DFDEDA;
  /* Sayfa başına tanımlı vurgu renkleri de koyu zemine göre seçilmişti;
     aydınlıkta okunur karşılıklarına çevriliyor (mavi · yeşil · çelik). */
  --blue:#2C5876; --blue-bright:#274C66; --blue-dim:#B7C7D4;
  --green:#1B6B4F; --green-dim:#CFE7DC;
  color-scheme:light;
}
html[data-theme="dark"]{ color-scheme:dark; }

/* Sayfalara gömülü sabit renklerin aydınlık karşılıkları */
html[data-theme="light"] body{ background:var(--bg); color:var(--ink); }
html[data-theme="light"] body::before{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(120,110,60,.06), transparent 60%),
    radial-gradient(900px 500px at 100% 20%, rgba(90,94,102,.05), transparent 55%);
}
html[data-theme="light"] header{
  background:rgba(247,246,242,.84);
  border-bottom:1px solid rgba(0,0,0,.08);
}
html[data-theme="light"] ::selection{ background:#22252B; color:#F7F6F2; }
html[data-theme="light"] .footer-kunye{ color:#6A6D75 !important; }
html[data-theme="light"] footer{ border-top-color:var(--line); }
html[data-theme="light"] .nav-logo{ color:var(--ink); }
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .lang-toggle{ color:var(--ink-soft); border-color:var(--line); }
html[data-theme="light"] .nav-cta:hover,
html[data-theme="light"] .lang-toggle:hover{ border-color:var(--gold); color:var(--gold-bright); }
/* Sayfaya gömülü yarı saydam koyu zeminler (dil düğmesi, giriş atla, lightbox) */
html[data-theme="light"] .lang-toggle{ background:rgba(255,255,255,.78); }
html[data-theme="light"] .intro-skip{ background:rgba(247,246,242,.78); }
html[data-theme="light"] .lightbox{ background:rgba(247,246,242,.95); }
/* Koyu metin bekleyen açık zeminler aydınlıkta ters döner */
/* Ana sayfadaki degrade düğme aydınlıkta koyu zemin alır → yazısı açık kalmalı.
   Ambalaj sayfasındaki .btn-primary ise açık zeminli; ona dokunulmuyor. */
html[data-theme="light"] .btn-primary:not(.btn){ color:#F7F6F2; box-shadow:0 6px 20px rgba(40,44,52,.16); }
html[data-theme="light"] .faq-tab.active{ background:#22252B; border-color:#22252B; color:#F7F6F2; }
/* ── Silik yazı düzeltmesi ────────────────────────────────────
   Alt sayfalar gövde metnini değişkenle değil, koyu zemine göre
   seçilmiş sabit açık grilerle yazıyor (#C9C9D2 · #D3D3DA · #E8E8ED).
   Aydınlık zeminde bunlar okunmuyor; burada karşılıklarına çeviriyoruz. */
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] dd,
html[data-theme="light"] blockquote,
html[data-theme="light"] table.t th,
html[data-theme="light"] table.t td,
html[data-theme="light"] tbody td,
html[data-theme="light"] .kunye td,
html[data-theme="light"] .prod-body p,
html[data-theme="light"] .section-lead,
html[data-theme="light"] section.block p,
html[data-theme="light"] .contact-lines .v,
html[data-theme="light"] .meta-box div,
html[data-theme="light"] .lede,
html[data-theme="light"] .aciklama{
  color:var(--ink-soft);
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] strong,
html[data-theme="light"] b,
html[data-theme="light"] .meta-box strong{ color:var(--ink); }
html[data-theme="light"] .updated,
html[data-theme="light"] .section-num,
html[data-theme="light"] .catbox .meta,
html[data-theme="light"] .etiket,
html[data-theme="light"] .kicker,
html[data-theme="light"] footer.site a,
html[data-theme="light"] footer.site .footer-links{
  color:var(--ink-faint);
}
/* Metin içindeki bağlantılar — düğmelere dokunmadan */
html[data-theme="light"] :is(p, li, td, .meta-box, section.block, .contact-lines) a{
  color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px;
}
html[data-theme="light"] footer.site a:hover{ color:var(--gold-bright); }

/* Koyu zemine göre seçilmiş vurgu renkleri aydınlıkta koyulaştırılır */
html[data-theme="light"] .eyebrow{ color:var(--ink-faint); }
html[data-theme="light"] .prow span,
html[data-theme="light"] .pinfo span{ color:var(--ink-soft); }
html[data-theme="light"] .work-cat{ color:color-mix(in srgb, var(--accent, #6E7279) 60%, #14151A); }
html[data-theme="light"] .work-status,
html[data-theme="light"] .store-badge-slot .store-badge-sub,
html[data-theme="light"] .store-badge-slot.live .store-badge-sub{ color:#1B6B4F; }
/* Sayfalara gömülü koyu kutular — aydınlıkta zemin de dönmeli,
   yoksa içindeki yazı koyu üstüne koyu kalıp kayboluyor. */
html[data-theme="light"] .meta-box{ background:#FFFFFF; border-color:var(--line); }
html[data-theme="light"] .note-box{ background:#FBF7E8; border-color:#E3DCC2; }
html[data-theme="light"] .mgmt-card:hover,
html[data-theme="light"] .docbox:hover{ background:#FFFFFF; border-color:var(--gold); }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea{ background:#FFFFFF; color:var(--ink); border-color:var(--line); }
html[data-theme="light"] .fix-tag{ color:#7A5A06; background:rgba(122,90,6,.10); border-color:rgba(122,90,6,.30); }
html[data-theme="light"] .pc-badge.update{ color:#1B6B4F; background:#E6F5EE; border-color:rgba(27,107,79,.3); }
/* Koyu zemin için yapılmış kart/panel yüzeyleri */
html[data-theme="light"] .kart,
html[data-theme="light"] .card,
html[data-theme="light"] .panel{ background:var(--panel); border-color:var(--line); }

/* ═══ 2. ÜÇ ÇİZGİLİ MENÜ ═════════════════════════════════════ */
.gg-menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; width:42px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:9px;
  color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s, color .15s;
}
.gg-menu-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.gg-menu-btn svg{ width:18px; height:18px; display:block; }

.gg-tema-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; width:42px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:9px;
  color:var(--ink-soft); cursor:pointer;
  transition:border-color .15s, color .15s;
}
.gg-tema-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.gg-tema-btn svg{ width:17px; height:17px; display:block; }
html[data-theme="light"] .gg-tema-ay{ display:none; }
html:not([data-theme="light"]) .gg-tema-gunes{ display:none; }

.gg-ortu{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.gg-ortu.acik{ opacity:1; pointer-events:auto; }

.gg-cekmece{
  position:fixed; top:0; right:0; z-index:91;
  width:min(360px, 88vw); height:100%;
  background:var(--bg-soft);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(0,0,0,.35);
  transform:translateX(102%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
}
.gg-cekmece.acik{ transform:translateX(0); }
@media (prefers-reduced-motion:reduce){
  .gg-cekmece{ transition:none; } .gg-ortu{ transition:none; }
}

.gg-cekmece-ust{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg-soft); z-index:2;
}
.gg-cekmece-marka{
  display:flex; align-items:center; gap:9px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em;
  color:var(--ink);
}
.gg-cekmece-marka img{ height:26px; width:auto; display:block; }
a.gg-cekmece-marka{ transition:color .14s; }
a.gg-cekmece-marka:hover{ color:var(--gold-bright); }
.gg-kapat{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; width:34px; background:transparent;
  border:1px solid var(--line); border-radius:8px;
  color:var(--ink-soft); cursor:pointer; transition:border-color .15s,color .15s;
}
.gg-kapat:hover{ border-color:var(--gold); color:var(--gold-bright); }
.gg-kapat svg{ width:16px; height:16px; }

.gg-grup{ padding:18px 22px 6px; }
.gg-grup-baslik{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;
}
.gg-cekmece a.gg-bag{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; margin:0 -12px;
  border-radius:9px; color:var(--ink);
  font-family:'Sora',sans-serif; font-weight:600; font-size:15px;
  transition:background .14s, color .14s;
}
.gg-cekmece a.gg-bag:hover{ background:var(--panel); color:var(--gold-bright); }
.gg-bag .gg-not{
  font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10.5px;
  letter-spacing:.08em; color:var(--ink-faint); white-space:nowrap;
}
.gg-cekmece a.gg-bag.gg-kucuk{ font-family:'Inter',sans-serif; font-weight:400; font-size:13.5px; padding:8px 12px; color:var(--ink-soft); }
.gg-ayrac{ height:1px; background:var(--line); margin:14px 22px; }
.gg-cekmece-alt{
  margin-top:auto; padding:16px 22px 26px;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.7;
  color:var(--ink-faint);
}
.gg-cekmece-alt a{ color:inherit; }
.gg-cekmece-alt a:hover{ color:var(--gold-bright); }
body.gg-kilit{ overflow:hidden; }