/* Shine Cafe — base.css: token'lar, sıfırlama, tipografi, düzen, doku (duman + ışık lekeleri), reveal, odak, sayfa geçişi.
   Konsept "Gece ışıkları": koyu sıcak zemin, kırmızı neon marka, mavi neon vurgu, amber ampul ışığı. */
/* Not: satır uzunluğu sınırları ch yerine em (≈ ch × 0.63; Inter ve Playfair'de "0" ≈ 0.63em): ch birimi o an
   kullanılan fonta bağlı olduğundan yedek → web fontu geçişinde max-width değişip satır kırılımı kayıyordu (CLS). */
/* Metrik uyumlu yedek fontlar (font-display: swap sırasında satır kırılımı/yükseklik değişmesin → CLS). Değerler
   Google Fonts TTF'leri ile macOS Arial/Georgia arasında Türkçe örnek metinden hesaplandı (ortalama genişlik → size-adjust;
   hhea ascent/descent → override). Yerel font yoksa tarayıcı yığındaki sonraki aileye düşer. */
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 300 500; src: local('Arial'), local('ArialMT'); size-adjust: 105.58%; ascent-override: 91.76%; descent-override: 22.85%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-style: normal; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 102.36%; ascent-override: 94.64%; descent-override: 23.56%; line-gap-override: 0%; }
@font-face { font-family: 'Playfair Fallback'; font-style: normal; font-weight: 400 800; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 88.6%; ascent-override: 122.12%; descent-override: 28.33%; line-gap-override: 0%; }
@font-face { font-family: 'Playfair Fallback'; font-style: italic; font-weight: 400 800; src: local('Georgia Bold Italic'), local('Georgia-BoldItalic'); size-adjust: 85%; ascent-override: 127.29%; descent-override: 29.53%; line-gap-override: 0%; }

:root {
  /* Renk */
  --bg: #0b0a0a;
  --bg-2: #100d0e;
  --surface: #141212;
  --surface-2: #1c1919;
  --red: #E3121B;
  --red-dark: #B30E16;
  --neon: #38BDF8;
  --neon-soft: rgba(56,189,248,.18);
  --amber: #F2A33C;
  --cream: #F5EFE6;
  --gray: #8a8580;
  --gray-light: #b8b2ab;
  --glow-red: 0 0 24px rgba(227,18,27,.45);
  --glow-neon: 0 0 24px rgba(56,189,248,.45);
  /* Plan 1'den kalanlar */
  --red-glow: rgba(227,18,27,.45);
  --amber-glow: rgba(242,163,60,.35);
  --glass: rgba(255,255,255,.04);
  --glass-border: rgba(255,255,255,.08);
  --radius: 16px;
  --radius-sm: 10px;
  --gutter: 16px;
  /* Düzen ve hareket */
  --max: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --header-h: 64px;
  --header-h-sm: 56px; /* kaydırınca küçülen başlık; yapışkan alt şeritler bunun altına yapışır */
  --tabbar-h: 64px;
  --announce-h: 38px; /* duyuru şeridi yuvası (≤600px: 46px, iki satır) */
  /* Tipografi */
  --font-head: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

/* ---------- Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-sm) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: #2b2626 var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 860px) {
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
img, svg, video, iframe { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: rgba(227,18,27,.38); color: #fff; }

/* ---------- Tipografi ---------- */
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0 0 .3em; }
p { margin: 0 0 1em; }
h1 em, h2 em, h3 em, .script {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 600;
  color: var(--red);
  text-shadow: 0 0 18px rgba(227,18,27,.35);
}
.price, .cd-num, .tabular { font-variant-numeric: tabular-nums; }
strong, b { font-weight: 600; }

/* ---------- Düzen (8 pt ızgara) ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (max-width: 600px) { :root { --announce-h: 46px; } }
.section { position: relative; padding: 72px 0; }
@media (min-width: 900px) { .section { padding: 96px 0; } }
.section-alt { background: var(--bg-2); box-shadow: inset 0 1px 0 var(--glass-border), inset 0 -1px 0 var(--glass-border); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.section-head h2 { margin: 0; }
.section-head .label + h2, .section-head .label + h1 { margin-top: 12px; }
.section-head p { margin: 8px 0 0; max-width: 37.8em; /* ≈60ch */ }

.muted { color: var(--gray); }
.small { font-size: .875rem; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Odak ---------- */
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; box-shadow: 0 0 0 4px var(--neon-soft); }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Doku: duman katmanı ----------
   Kullanım: <section class="hero smoke blobs"> — dokular z-index:-1'de, içerik üstte; .hero-media (varsa) z-index:-2.
   Yoğunluk sayfa başına --smoke-opacity ile ayarlanır (varsayılan .06). */
.smoke, .blobs { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.smoke::before {
  content: '';
  position: absolute;
  inset: -25% -40%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--smoke-opacity, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .94 0 0 0 0 .9 3.2 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: 640px 640px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 25%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 55%, #000 25%, transparent 80%);
  animation: smoke-drift 60s linear infinite alternate;
  will-change: transform;
}
@keyframes smoke-drift {
  from { transform: translate3d(-6%, 2%, 0) scale(1); }
  to { transform: translate3d(6%, -3%, 0) scale(1.08); }
}

/* ---------- Doku: ışık lekeleri (amber ampul + kırmızı neon) ---------- */
.blobs::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 42% at 14% 18%, rgba(242,163,60,.16), transparent 70%),
    radial-gradient(30% 38% at 88% 26%, rgba(227,18,27,.20), transparent 70%),
    radial-gradient(42% 36% at 62% 100%, rgba(242,163,60,.10), transparent 72%),
    radial-gradient(22% 26% at 40% 60%, rgba(56,189,248,.05), transparent 70%);
  animation: blob-breathe 9s ease-in-out infinite alternate;
}
@keyframes blob-breathe { from { opacity: .72; } to { opacity: 1; } }
/* Destekleyen tarayıcılarda bölüm ekrandan çıkarken lekeler söner (scroll'a bağlı, JS'siz). */
@supports (animation-timeline: view()) {
  .blobs::after {
    animation: blob-breathe 9s ease-in-out infinite alternate, blob-exit linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }
  @keyframes blob-exit { to { filter: opacity(.25); } }
}
.hero-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

/* ---------- Reveal (ShineUI.revealStagger: .reveal → .in, kademe --i) ----------
   translate + opacity animasyonu: kartların hover'daki transform'u ve kendi transition'larıyla çakışmaz. */
.reveal:not(.in) { opacity: 0; translate: 0 24px; }
.reveal.in { animation: reveal-up .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes reveal-up { from { opacity: 0; translate: 0 24px; } }

/* ---------- Sayfa geçişi ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal:not(.in) { opacity: 1; transform: none; translate: none; animation: none; }
  .smoke::before { animation: none; transform: none; }
  .blobs::after { animation: none; }
  @view-transition { navigation: none; }
}