/* AKABE GOLD — paylaşılan tasarım token'ları + ortak bileşenler.
 * Tüm sayfalar <link rel="stylesheet" href="/app.css"> ile yükler (sayfaya özel <style>'dan ÖNCE).
 * Sayfalarda ham hex KULLANILMAZ — sadece --c-* semantik tokenlar.
 * data-akabe-theme="dark" (vitrin) / "light" (firma, tema) <html> üstünde sabit yazılır.
 */

/* ============================== KATMAN 1 — İLKEL ============================== */
:root{
  /* altın rampası — kaynak: shop/shop.css + styles.css (eski sistem) + Velina referansı */
  --gold-50:#FFF7CF;  --gold-100:#F3EAD6; --gold-200:#E8C874; --gold-300:#D7B55C;
  --gold-400:#BFA46A; --gold-500:#B98A38; --gold-600:#9B7D3E; --gold-700:#7A5517; --gold-800:#4E3510;

  /* onyx rampası */
  --onyx-900:#060605; --onyx-850:#0A0A09; --onyx-800:#121110; --onyx-700:#17140F; --onyx-600:#1E1A13;

  /* fildişi rampası (açık taraf) */
  --ivory-0:#FFFFFF; --ivory-50:#FBFBFA; --ivory-100:#F7F2EA; --ivory-200:#ECECEA; --ivory-300:#E6D9C5;

  /* mürekkep */
  --ink-900:#161616; --ink-700:#3A3A38; --ink-500:#6F675E; --ink-300:#9A9A95;

  /* durum */
  --green-500:#2F8F5F; --green-300:#4ADE80;
  --red-500:#C0625F;   --red-300:#F87171; --red-700:#A64232;

  /* gradyanlar */
  --grad-gold-text: linear-gradient(180deg,#FFF7CF 0%,#F0C861 34%,#B98A2E 58%,#6F4A12 78%,#FFE6A0 100%);
  --grad-gold-fill: linear-gradient(180deg,#F7E6AF 0%,#D7B55C 45%,#9B6E22 100%);
  --grad-gold-hair: linear-gradient(90deg,transparent,rgba(191,164,106,.38) 14%,rgba(255,232,163,.78) 50%,rgba(191,164,106,.38) 86%,transparent);
  --grad-onyx-page:
    radial-gradient(circle at 20% -5%, rgba(232,200,116,.10), transparent 34vw),
    radial-gradient(circle at 92% 8%, rgba(191,164,106,.07), transparent 40vw),
    linear-gradient(180deg,#0B0A08 0%,#060605 100%);

  /* tipografi */
  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script:"Great Vibes", "Cormorant Garamond", cursive;
  --font-body:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-2xs:.6875rem; --fs-xs:.75rem;  --fs-sm:.8125rem; --fs-base:.9375rem;
  --fs-md:1.0625rem; --fs-lg:1.25rem; --fs-xl:1.5rem;
  --fs-2xl:clamp(1.75rem,1.2rem + 2vw,2.5rem);
  --fs-3xl:clamp(2.25rem,1.3rem + 4vw,3.75rem);
  --fs-hero:clamp(2.5rem,1rem + 6.5vw,5.5rem);

  --lh-tight:1.08; --lh-head:1.18; --lh-body:1.55; --lh-loose:1.7;

  --ls-hero:.16em; --ls-eyebrow:.34em; --ls-nav:.14em;
  --ls-head:.02em; --ls-body:0; --ls-num:.01em;

  --fw-light:300; --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700;

  /* aralık — 4px tabanlı */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --sp-section:clamp(56px,7vw,120px);
  --shell-max:1240px;
  --shell-pad:clamp(16px,4vw,40px);

  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:22px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(0,0,0,.06);
  --sh-2:0 8px 24px rgba(23,23,23,.10);
  --sh-3:0 18px 48px rgba(23,23,23,.12);
  --sh-glow:0 0 0 1px rgba(191,164,106,.18), 0 18px 60px rgba(0,0,0,.55);
  --sh-lift:0 24px 70px rgba(0,0,0,.6);

  --d-instant:90ms; --d-fast:180ms; --d-base:280ms; --d-slow:480ms;
  --d-reveal:760ms; --d-marquee:44s;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-lux:cubic-bezier(.22,.61,.36,1);
}

/* ============================== KATMAN 2 — SEMANTİK ============================== */
:root, [data-akabe-theme="light"]{
  --c-bg:#FBFBFA; --c-bg-page:#FBFBFA;
  --c-surface:#FFFFFF; --c-surface-2:#F7F2EA; --c-surface-sunken:#F3F2EF;
  --c-hair:#ECECEA; --c-hair-strong:#E6D9C5;
  --c-text:#161616; --c-text-soft:#6F675E; --c-text-faint:#6F675E;
  --c-accent:#7A5517;        /* metin/rakam altını — 6.46:1 AA */
  --c-accent-hi:#4E3510;     /* hover/basılı */
  --c-accent-line:#BFA46A;   /* SADECE çizgi/kenarlık/ayraç — metin DEĞİL */
  --c-accent-wash:rgba(191,164,106,.12);
  --c-on-accent:#FFFFFF;
  --c-up:#2F8F5F; --c-down:#C0625F; --c-danger:#A64232;
  --c-focus:#7A5517; --c-scrim:rgba(22,22,22,.55);
}

[data-akabe-theme="dark"]{
  --c-bg:#0A0A09; --c-bg-page:var(--grad-onyx-page);
  --c-surface:#17140F; --c-surface-2:#1E1A13; --c-surface-sunken:#060605;
  --c-hair:rgba(191,164,106,.22); --c-hair-strong:rgba(191,164,106,.40);
  --c-text:#F3EAD6; --c-text-soft:#B7AC96; --c-text-faint:#8A8172;
  --c-accent:#E8C874;        /* 12.21:1 AAA */
  --c-accent-hi:#FFF7CF;
  --c-accent-line:#BFA46A;   /* 8.24:1 — koyuda metin olarak da güvenli */
  --c-accent-wash:rgba(191,164,106,.14);
  --c-on-accent:#0A0A09;
  --c-up:#4ADE80; --c-down:#F87171; --c-danger:#E0765F;
  --c-focus:#E8C874; --c-scrim:rgba(0,0,0,.78);
}

/* ============================== TEMEL ============================== */
[data-akabe-theme] *{box-sizing:border-box}
[data-akabe-theme] :focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================== ORTAK BİLEŞENLER ============================== */

/* kur şeridi (marquee) */
.ak-marq{overflow:hidden;white-space:nowrap;background:var(--c-surface-sunken);color:var(--c-text);
  padding:9px 0;border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair)}
.ak-marq .run{display:inline-block;white-space:nowrap;animation:ak-scroll var(--d-marquee) linear infinite}
.ak-marq:hover .run{animation-play-state:paused}
@keyframes ak-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ak-marq .it{display:inline-flex;align-items:center;gap:6px;margin:0 16px;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.ak-marq .it .l{color:var(--c-text-faint);font-weight:500}
.ak-marq .up{color:var(--c-up)} .ak-marq .down{color:var(--c-down)}
.ak-marq .it svg{width:8px;height:8px}

/* marka başlığı */
.ak-brand{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:.04em;line-height:1;color:var(--c-text)}
.ak-brand b{font-weight:600}
.ak-sub{font-size:.62rem;letter-spacing:.34em;color:var(--c-text-faint);font-weight:600}
.ak-mark{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--c-hair);border-radius:var(--r-lg);background:var(--c-surface)}

/* butonlar */
.ak-btn{font-family:var(--font-body);font-weight:600;font-size:.82rem;letter-spacing:.02em;
  border:none;border-radius:var(--r-pill);padding:14px 28px;cursor:pointer;
  background:var(--c-accent);color:var(--c-on-accent);
  transition:background var(--d-base) var(--e-out), transform var(--d-base) var(--e-out)}
.ak-btn:hover{transform:translateY(-1px)}
.ak-btn-ghost{background:transparent;border:1px solid var(--c-hair-strong);color:var(--c-accent);
  transition:background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out)}
.ak-btn-ghost:hover{background:var(--c-accent-wash);border-color:var(--c-accent)}
.ak-btn-round{width:46px;height:46px;border-radius:50%;border:1px solid var(--c-hair-strong);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out)}
.ak-btn-round:hover{border-color:var(--c-accent);transform:translateX(3px)}
.ak-btn-round svg{width:15px;height:15px;stroke:var(--c-accent)}

/* kart */
.ak-card{background:var(--c-surface);border:1px solid var(--c-hair);border-radius:var(--r-md);
  transition:border-color var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out)}
.ak-card:hover{border-color:var(--c-hair-strong)}
.ak-hair{height:1px;background:var(--c-hair)}

/* iskelet (yükleme) */
.ak-skeleton{position:relative;overflow:hidden;background:var(--c-surface-2)}
.ak-skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--c-hair-strong),transparent);
  animation:ak-shimmer 1.6s linear infinite}
@keyframes ak-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* lightbox */
.ak-lightbox{position:fixed;inset:0;background:var(--c-scrim);z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px}
.ak-lightbox.on{display:flex}
.ak-lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-md);box-shadow:var(--sh-lift)}
.ak-lightbox .x{position:absolute;top:16px;right:18px;width:40px;height:40px;border:none;border-radius:50%;
  background:#ffffff22;color:#fff;font-size:20px;cursor:pointer}

/* kıvılcım (SVG işaret, karakter değil — hiçbir fontta ✦ glifi yok) */
.ak-sparkle{display:inline-block}
.ak-sparkle.anim{animation:ak-pulse 2.4s ease-in-out infinite}
@keyframes ak-pulse{0%,100%{opacity:.85}50%{opacity:1}}

/* hareket azaltma — reveal opacity:0 ile başlıyorsa burada geri alınmalı */
@media (prefers-reduced-motion:reduce){
  [data-akabe-theme] *,[data-akabe-theme] *::before,[data-akabe-theme] *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
  .ak-marq .run{animation:none;transform:none}
  .ak-sparkle.anim{animation:none;opacity:1}
}
