@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Titan+One&family=Nunito:wght@400;600;700;800&display=swap');

/* ekid-design-kit — tema "bayram" (Tribün Şenliği). Dart üreteciyle oluşturuldu; elle düzenleme. */

:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-2: #eef4fc;
  --card: #ffffff;
  --ink: #2b2d4a;
  --ink-soft: #5d6080;
  --red: #e30a17;
  --mustard: #ffc93c;
  --pine: #2fa66c;
  --sky: #3f8fe0;
  --blush: #ff8fb0;
  --sage: #bfe0cc;
  --crimson: #7d0a12;
  --navy: #1b2150;
  --skylight: #e9f2fc;
  --lemon: #fff6d6;
  --gold: #f2b705;
  --bd: 2px solid #2b2d4a;
  --line: rgba(43, 45, 74, .16);
  --hard: 0 5px 0 rgba(43, 45, 74, .14);
  --hard-sm: 0 3px 0 rgba(43, 45, 74, .14);
  --radius: 6px;
  --radius-sm: 3px;
  --splash: #e30a17;
  --splash-ink: #ffffff;
  --font-head: 'Titan One', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

/* ═══════════ YAPI (ortak) — reset & temel ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
/* Metin seçimi = dünyanın tam rengi (splash); tema kendi nesnesiyle ezebilir
   (c tebeşir, pm-y mum boya). */
::selection { background: var(--splash); color: var(--splash-ink); }

.wrap { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
/* Nav boşluk kuralı (varyanttan bağımsız): kenar boşluğu --nav-gutter
   (toplam; yan-başına yarısı → web 24px / mobil 16px) + öğe arası --nav-gap
   (web 16px / mobil 12px). Mobil değerleri aşağıda 700px media'sı ezer.
   :root'ta durur ki EkidHead'in :root `--nav-w` style'ındaki
   var(--nav-gutter) da aynı yerde çözülsün. */
:root { --nav-gutter: 48px; --nav-gap: 16px; }
/* Nav'ın wrap'i daha geniş nefes alır. Dart kaynağı:
   `EkidHead.themeSetup(navWidth:)` (1280 varsayılan; null/<=0 → px sınırı
   kalkar = tam genişlik). Consumer CSS'le de TÜM ifadeyi ezebilir: ör.
   `:root { --nav-w: 100% }` → kenardan-kenara. Nav varyantından bağımsız —
   mascot da bar da bu wrap'i kullanır. */
.nav .wrap { width: var(--nav-w, min(1280px, calc(100% - var(--nav-gutter)))); }
.wrap-narrow { width: min(760px, calc(100% - 48px)); }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; letter-spacing: -.01em; }
/* em.squiggle ALTÇİZGİ iskeleti (varsayılan): ::after absolute şeridin referans
   kutusunu font-size'a sabitler; fontun descent metriği (Baloo 2 ~.52em!) şerit
   konumunu kaydıramaz. bottom değeri temanın işidir (şerit kalınlığına göre,
   checklist accent satırı). KUTU-EM / hayalet-baskı / padding'li istisnalar bu
   iskeleti kendi accent() bloklarında display/line-height yazarak ezer (paint
   structure'dan sonra gelir — !important gerekmez). */
em.squiggle { display: inline-block; line-height: 1; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
.section-sub { max-width: 640px; color: var(--ink-soft); margin: 14px 0 40px; font-size: 1.06rem; }

/* ═══════════ Bölümler / kapsayıcı ═══════════ */
section[id], .cta-band { scroll-margin-top: 118px; }
.section { padding: 90px 0; }
.section-tint { background: var(--paper-2); }

/* ═══════════ Nav bar düzeni (paint temada) ═══════════ */
.nav { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 2px solid var(--ink); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); padding: 13px 0; }
/* Nav sekme sırası: KONUM mekanik (base) — deri/gap/dekor temada.
   Tema `.nav-links{gap;padding-top}` ile paydeder; farklı hizalama (ör. rafa
   oturan kitaplar) `align-items` override'ıyla. */
.nav-links { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; }

/* Burger + drawer mekaniği */
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.nav-burger span { width: 24px; height: 3px; border-radius: 3px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-drawer[hidden] { display: none; }
.nav-drawer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 20px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.nav-drawer a {
  text-decoration: none;
  font-weight: 800;
  color: var(--ink);
  padding: 10px 4px;
  border-bottom: 2px dashed var(--line);
}
.nav-drawer .btn { margin-top: 14px; border-bottom: 2px solid var(--ink); }

/* ═══════════ data-nav="bar": maskotsuz tek-katman nav (Faz 0) ═══════════
   <html data-nav="bar"> → maskot yok; sekmeler barın İÇİNDE, sağa hizalı
   (Flutter: Row[Logo, Expanded(Align.centerRight: NavLinks), CTA, Burger]).
   Attribute yoksa görünüm/davranış birebir eski (maskotlu, asılı sekmeler). */
html[data-nav="bar"] .mascot { display: none; }
html[data-nav="bar"] .nav-links {
  position: static;
  transform: none;
  flex: 1 1 auto; /* GERÇEK Expanded: ortadaki boş bandın sahibi .nav-links */
  justify-content: flex-end; /* Align.centerRight: linkler bandın sağında */
  align-items: center;
  padding-top: 0; /* temaların asılı-sekme nefesi barda gereksiz */
}

/* Nav grubu (dropdown): düğme .nav-links'in DOĞRUDAN çocuğu bir <a> — tema
   sekme derisini (nth-child rengi dahil) bedavaya giyer. Panel ise descendant
   bleed olmasın diye .nav-links DIŞINDA kardeş durur (.menu derisi, admin'le
   ortak); konumunu NavController verir (offsetParent = .nav, sticky). */
.nav-group-btn { cursor: pointer; }
.nav-caret { display: inline-block; margin-left: 5px; font-size: .72em; transform: translateY(-1px); }
.menu.nav-menu { right: auto; } /* .menu{right:0} sonra geldiğinden çift-sınıfla ez; yoksa left+right panel gerer */
/* Bar modunda scrollspy vurgusu — mütevazı; tema isterse kendi derisiyle ezer */
html[data-nav="bar"] .nav-links a.is-active { text-decoration: underline; text-underline-offset: 4px; }
/* Drawer'da grup düzleşir; adı küçük bölüm başlığı olur. */
.nav-drawer .drawer-group-label {
  margin-top: 10px;
  font: 800 .78rem/1.2 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ═══════════ Maskot mekaniği: konum + keyframe (gövde paint temada) ═══════════ */
.mascot {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 56px;
  height: 54px;
  cursor: pointer;
  z-index: 3;
  transform: translateX(-50%);
  /* --walk süresini JS her yürüyüşte mesafeye göre ayarlar */
  transition: left var(--walk, .8s) cubic-bezier(.45, .05, .55, .95);
}
.mascot.walk { animation: mashop .3s ease-in-out infinite; }
@keyframes mashop {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%      { transform: translateX(-50%) translateY(-6px) rotate(2deg); }
}
.mascot.press { animation: maspress .75s ease; }
@keyframes maspress {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1, 1); }
  35%, 60% { transform: translateX(-50%) translateY(8px) scale(1.06, .9); }
}
.mascot.party { animation: masparty .9s ease; }
@keyframes masparty {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg); }
  30%  { transform: translateX(-50%) translateY(-13px) rotate(-11deg); }
  55%  { transform: translateX(-50%) translateY(0) rotate(7deg); }
  75%  { transform: translateX(-50%) translateY(-6px) rotate(-4deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}
@keyframes masbreathe {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  50%      { transform: translateX(-50%) scale(1.02, .97); }
}
@keyframes masblink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 97%      { transform: scaleY(.12); }
}
@keyframes maswave {
  0%, 100% { transform: rotate(-105deg); }
  50%      { transform: rotate(-155deg); }
}
@keyframes heartup {
  0%   { transform: translateY(0) scale(.5) rotate(-8deg); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(-24px) scale(1.15) rotate(10deg); opacity: 0; }
}


/* ═══════════ Merkezîleşen mekanik (port artefaktı → base) ═══════════ */
/* — Maskot iskelet/animasyon tetikleyici — */
.mas-eye-l { left: 10px; }
.mas-eye-r { right: 10px; }
.mas-cheek-l { left: 4px; }
.mas-cheek-r { right: 4px; }
.mascot:hover .mas-arm, .mascot.party .mas-arm { animation: maswave .889s ease infinite; }
.mas-hearts b:nth-child(1) { margin-left: -18px; }
.mas-hearts b:nth-child(2) { margin-left: -3px; animation-delay: .28s !important; }
.mas-hearts b:nth-child(3) { margin-left: 12px; animation-delay: .55s !important; }
.mascot:hover .mas-hearts b, .mascot.party .mas-hearts b { animation: heartup 1.1s ease-out infinite; }
/* — Deck kart durumları (deck.js sözleşmesi) — */
.deck:not(.deck-ready) .fcard-cta .fcard-scene { grid-row: 1 / 3; height: 150px; margin: 0; }
.deck:not(.deck-ready) .fcard-cta h3 { align-self: end; }
.deck:not(.deck-ready) .fcard-cta p { align-self: start; }
.deck:not(.deck-ready) .fcard-cta .btn { grid-column: 3; grid-row: 1 / 3; margin: 0; }
/* — Showcase demo animasyon koreografisi — */
.m-ticker span { display: inline-block; animation: ticker 18s linear infinite; }
.sc-duyuru .sc-ring.r2 { animation-delay: .3s; }
.sc-duyuru .l1 { --w: 92%; }
.sc-duyuru .l2 { --w: 68%; animation-delay: .3s; }
.sc-duyuru .l3 { --w: 80%; animation-delay: .6s; margin-bottom: 0; }
.sc-galeri .p1 { --r: -10deg; --x: -60px; }
.sc-galeri .p2 { --r: 3deg;   --x: -4px;  animation-delay: .45s; }
.sc-galeri .p3 { --r: 11deg;  --x: 52px;  animation-delay: .9s; }
.sc-galeri .sc-heart {
  position: absolute; right: 20px; top: 16px;
  font-size: 1.25rem;
  animation: pop 4.2s ease infinite;
}
.sc-takvim svg {
  position: absolute; left: 50%; top: 50%;
  width: 138px; height: 114px;
  transform: translate(-50%, -47%);
  overflow: visible;
}
.sc-takvim .flag {
  position: absolute; right: 18px; bottom: 12px;
  font-size: 1.4rem;
  animation: pop 3.6s ease infinite;
}
.sc-panel .t2, .sc-panel .t2::after { animation-delay: .4s; }
.sc-panel .ms-l.s { width: 70%; }
.sc-ekran .dev i:nth-child(3) { width: 68%; }


/* ═══════════ Ortak bileşen layout (blog/demo/nav — 33/33 aynı → base) ═══════════ */
.btn-block { width: 100%; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-cta { padding: 10px 20px; font-size: .9rem; }
.m-hero-txt { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.m-line-md { width: 65%; }
.m-line-sm { width: 45%; }
.m-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 16px;
}
.m-card-gallery {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-content: center;
  gap: 6px;
}
.split-copy .btn { margin-top: 20px; }
.feed-item > div { flex: 1; min-width: 0; }
.feed-item small { color: var(--ink-soft); font-size: .8rem; display: block; }
.serp-bar i { font-style: normal; }
.serp-hit span { font-size: .82rem; color: var(--ink-soft); }
.serp-line-sm { height: 8px; width: 88%; }
.price-big s {
  font-size: 1.6rem;
  color: var(--ink-soft);
  opacity: .55;
  margin-right: 10px;
  vertical-align: middle;
}
.price-head p { color: var(--ink-soft); font-weight: 700; margin-top: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.page-head h1 { margin: 12px 0 8px; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.post-body h3 { font-size: 1.2rem; }
.post h1 { margin: 14px 0 0; }
.post-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 24px;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: .9rem;
}
.post-cover-lg img { width: 100%; height: 340px; object-fit: cover; display: block; }
.post-content { font-size: 1.03rem; }
.post-content ul { margin: 0 0 18px; padding-left: 26px; }

/* ═══════════ Hero düzeni ═══════════ */
.hero-in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}
/* nowrap ticker içeriği grid hücresini şişirmesin */
.hero-in > *, .split > * { min-width: 0; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ═══════════ Hero imleç durumu (kit JS basar — HeroPointerController) ═══════════
   Değişkenler: --hx/--hy (px), --hxr/--hyr (0..1), --px/--py (son tık, px),
   .hero[data-pointer="in"], .hero.is-pulse. Tema hero()'da yalnız BOYAR:
   data-pointer'da --hr'yi açar (yarıçap), --hero-feather ile kenarı yumuşatır,
   ::before'a kendi dokusunu verir, --hx/--hy/--hr'ye kendi geçiş süresini yazar.
   @property kayıtları geçişi mümkün kılar; desteklenmeyen tarayıcıda .hero
   fallback'leri (--hr: 0px) katmanı görünmez tutar — ANİMASYONSUZ ama bozuk
   değil. Boyamayan 45 temada --hr 0 kalır → etki sıfır. */
@property --hx  { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --hy  { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --hxr { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --hyr { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --hr  { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --hold { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --near { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero {
  --hx: 50%; --hy: 50%; --hxr: .5; --hyr: .5; --px: 50%; --py: 50%;
  --hr: 0px; --hero-feather: 0px; --hold: 0; --near: 0;
  --sv: 0; --sva: 0; --kx: 0; --panx: 0; --pany: 0;
}
/* Tema `--hero-fx: draw` isterse kit `.hero-decor` içine tek svg açar; vuruş
   = polyline (biçim temanın). Çizerken metin seçimi kapalı. */
.hero[data-drawing] { user-select: none; }
.hero-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-ink polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Tema `--hero-fx: trail` isterse kit bunları üretir (bkz. HeroPointerController);
   biçim/animasyon temanın. */
.hero-trace {
  position: absolute;
  left: var(--tx); top: var(--ty);
  translate: -50% -50%;
  pointer-events: none;
}
.hero-decor::before {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) - var(--hero-feather)), transparent var(--hr));
  mask-image: radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) - var(--hero-feather)), transparent var(--hr));
}

/* Hero varyantı (wcard.is-bold ile aynı desen): .hero.is-bold = TAM RENKLİ
   hero. Bu fallback güvenlik-ağıdır: zemin --splash'ın kendisi, mürekkep
   --splash-ink; yüksek specificity temanın normal hero dokusunu da ezer.
   Asıl görünüm tema paint'inin .hero.is-bold bloğudur — tema, dünyasına uygun
   BAŞKA bir tam rengi zemin seçebilir (ör. hardal afiş); o zaman mürekkebi de
   kendi verir. Badge/CTA: temaların kendi-zeminli badge'i olduğu gibi çalışır;
   kontrast gereken CTA'da .btn-light / .btn-outline-light kullanılabilir. */
.hero.is-bold { background: var(--splash); color: var(--splash-ink); }
.hero.is-bold .hero-sub, .hero.is-bold .fineprint { color: inherit; opacity: .88; }
/* Başlık vurgu kelimesi (em) temalarda çoğunlukla --red — splash zeminde
   kaybolabilir; fallback tek renge çeker, tema .is-bold bloğu geri boyayabilir. */
.hero.is-bold h1 em { color: inherit; }

/* Nav "saydamlaşma şeridi" (.nav::after, tüm temalarda paper→saydam degrade)
   ile is-bold hero etkileşimi:
   1) BAR modunda sekme sarkmadığı için şerit işlevsizdir; renkli (is-bold)
      hero'da krem sis olarak ifşa oluyordu → kapat (specificity temanın
      (0,1,1) kuralını yener, sıra önemsiz).
   2) MASKOT modunda şerit asılı sekmelerin fonu — bold hero SAYFANIN İLK
      section'ıysa paper yerine bold zemin rengine boyanır ki header bold
      dünyaya eriyerek insin. Renk: tema .is-bold bloğunda set edilen
      --bold-fade (yoksa --splash; bold zemini splash olan temalar set etmez). */
html[data-nav="bar"] .nav::after { content: none; }
html:has(.hero.is-bold:first-of-type) .nav::after {
  background: linear-gradient(var(--bold-fade, var(--splash)), transparent);
}

/* ═══════════ Ortak hareket ═══════════ */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}
@keyframes pop {
  0%, 55%  { transform: scale(0); opacity: 0; }
  63%      { transform: scale(1.3); opacity: 1; }
  70%, 92% { transform: scale(1); opacity: 1; }
  100%     { transform: scale(1); opacity: 0; }
}

/* Kayan şerit rayı (pastil paint temada) */
.strip-track { display: flex; gap: 14px; width: max-content; animation: ticker 26s linear infinite; }

/* ═══════════ Deste (deck) mekaniği + kart durumları — deck.js sözleşmesi ═══════════ */
.deck { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.deck-stack { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.deck-ui { display: none; align-items: center; gap: 18px; }
.deck-dots { display: flex; gap: 8px; }
.deck-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: var(--hard-sm);
  font: 800 1.15rem/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.deck-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.deck-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.deck-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 0;
  cursor: pointer;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc { position: absolute; inset: 0; }

/* ═══════════ Split / adım / fiyat / SSS düzeni ═══════════ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-rev .split-copy { order: 2; }
.split-rev .split-art { order: 1; }
.ticks { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ticks li { padding-left: 34px; position: relative; font-weight: 600; color: var(--ink); }
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 40px;
}
/* 4 adımlı consumer (7 çocuk: step,ok,step,ok,step,ok,step) — ek sütun çifti.
   3 adımlı görünüm DEĞİŞMEZ (additive; :has desteklenmeyen eski tarayıcıda
   4. adım alt satıra düşer, kırılmaz). */
.steps:has(> :nth-child(7)) { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
/* Çoklu fiyat kartı desteği: tek kart ortalanmış kalır (gap tek çocukta
   etkisiz), 2+ kart yan yana dizilir, dara sığmazsa alt alta sarar. */
.price-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 26px;
  margin-top: 40px;
}
.faq { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
/* Akordeon açılış animasyonu: ::details-content yüksekliği 0→auto akar
   (interpolate-size sayesinde auto'ya animasyon). Desteklemeyen tarayıcıda
   (eski Safari/Firefox) sessizce anında açılır — kırılmaz. */
html { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .38s ease, content-visibility .38s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* ═══════════ Form temelleri (mekanik — paint temanın forms()'unda) ═══════════
   Sözleşme: .field > .label(.required) + .input/.textarea/.select + .field-hint;
   hata = .field.is-error (renk paint'te: --red guaranti accent, structure'a giremez). */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font: 800 .92rem/1.3 var(--font-body); color: var(--ink); }
.required { color: var(--ink-soft); }
.input, .textarea, .select {
  width: 100%;
  font: 600 1rem/1.4 var(--font-body);
  color: var(--ink);
  background-color: var(--card);
  padding: 12px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-soft); opacity: .75; }
.textarea { min-height: 120px; resize: vertical; }
/* Native select; ok = var(--ink)'li çift gradient chevron (sarmalayıcı gerekmez) */
.select {
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 24px) calc(50% - 2px), calc(100% - 18px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.input:disabled, .textarea:disabled, .select:disabled { opacity: .55; cursor: not-allowed; }
/* Erişilebilirlik fallback'i — tema focus jestini forms()'ta zenginleştirir */
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--ink);
  box-shadow: var(--hard-sm);
}
.field-hint { font: 600 .82rem/1.4 var(--font-body); color: var(--ink-soft); }

/* Onay kutusu / radyo / switch — sınıf saran <label>'da, native input içinde.
   İşaret/nokta/topuz = input'un ::before'u; renk paint temada. */
.check, .radio, .switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.check input, .radio input, .switch input {
  appearance: none;
  margin: 0;
  flex: none;
  cursor: pointer;
  background: var(--card);
  border: 2px solid var(--line);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.check input {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
}
.check input::before {
  content: "";
  width: 13px; height: 13px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 81% 0%, 43% 65%);
  background: var(--ink);
  transform: scale(0);
  transition: transform .15s ease;
}
.radio input {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.radio input::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform .15s ease;
}
.check input:checked, .radio input:checked { border-color: var(--ink); }
.check input:checked::before, .radio input:checked::before { transform: scale(1); }
.switch input {
  width: 48px; height: 27px;
  border-radius: 999px;
  position: relative;
}
.switch input::before {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  translate: 0 -50%;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: left .18s ease, background .18s ease;
}
.switch input:checked { background: var(--ink); border-color: var(--ink); }
.switch input:checked::before { left: 24px; background: var(--paper); }
.check input:disabled, .radio input:disabled, .switch input:disabled { opacity: .55; cursor: not-allowed; }
.check:has(input:disabled), .radio:has(input:disabled), .switch:has(input:disabled) { cursor: not-allowed; color: var(--ink-soft); }
.check input:focus-visible, .radio input:focus-visible, .switch input:focus-visible {
  border-color: var(--ink);
  box-shadow: var(--hard-sm);
}

/* — Girdi grubu (ön/son ek) — */
.input-group { display: flex; align-items: stretch; }
.input-group > span {
  display: inline-flex; align-items: center;
  padding: 0 14px;
  font: 700 .95rem/1 var(--font-body);
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.input-group > span:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.input-group > span:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* — Kaydırıcı (range) — */
.range { appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--line); }
.range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--paper-2); border: 2px solid var(--line); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: var(--hard-sm); }
.range:focus-visible::-moz-range-thumb { box-shadow: var(--hard-sm); }

/* — Sayı girdisi (stepper; ± davranışı runEkidBehavior) — */
.stepper { display: inline-flex; align-items: stretch; gap: 8px; }
.stepper .input { width: 76px; text-align: center; appearance: textfield; }
.stepper .input::-webkit-outer-spin-button, .stepper .input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.stepper button {
  width: 44px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: 800 1.2rem/1 var(--font-body);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.stepper button:focus-visible { border-color: var(--ink); box-shadow: var(--hard-sm); outline: none; }

/* — Tarih & saat: native input (renkler :root color-scheme'den) — */
.datepicker::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }

/* — Arama (büyüteç saf CSS; öneri listesi = native <datalist>) — */
.search { position: relative; }
/* appearance:none → type=search'ün native "chrome"u sol büyüteci ÖRTMESİN;
   ikon pseudo'ları z-index ile input zeminin ÜSTÜNDE kalır. */
.search .input { appearance: none; padding-left: 46px; padding-right: 16px; }
.search::before, .search::after { z-index: 2; }
/* Native arama-temizle × gizle (datalist okuyla çakışıp sıkışıyordu) */
.search .input::-webkit-search-cancel-button,
.search .input::-webkit-search-decoration { appearance: none; display: none; }
/* Datalist açılış oku: tek başına, hizalı, yumuşak */
.search .input::-webkit-calendar-picker-indicator { margin-right: 2px; opacity: .5; cursor: pointer; }
.search::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -9px;
  border: 2.5px solid var(--ink-soft);
  border-radius: 50%;
  pointer-events: none;
}
.search::after {
  content: "";
  position: absolute;
  left: 27px; top: 50%;
  width: 7px; height: 2.5px;
  margin-top: 3px;
  transform: rotate(45deg);
  background: var(--ink-soft);
  border-radius: 2px;
  pointer-events: none;
}

/* — Etiket girdisi (chips; ekleme/silme runEkidBehavior) — */
.tags-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: text;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tags-input input { border: 0; outline: 0; background: none; flex: 1; min-width: 120px; font: 600 1rem/1.4 var(--font-body); color: var(--ink); padding: 4px; }
.tags-input input::placeholder { color: var(--ink-soft); opacity: .75; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 12px;
  font: 700 .85rem/1.3 var(--font-body);
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: 999px;
}
.tag button { border: 0; background: none; color: var(--ink-soft); font: 800 1rem/1 var(--font-body); cursor: pointer; padding: 0 2px; }
.tag button:hover { color: var(--ink); }
.tags-input:focus-within { border-color: var(--ink); box-shadow: var(--hard-sm); }

/* — Yıldız derecelendirme (saf CSS: DOM 5→1 sıralı + row-reverse) — */
.rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rating input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rating label {
  width: 30px; height: 30px;
  cursor: pointer;
  background: var(--line);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: background .12s ease, transform .12s ease;
}
.rating label:hover { transform: scale(1.12); }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { background: var(--ink); }
.rating input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 3px; }

/* — Renk seçici (native swatch) — */
.colorpicker {
  appearance: none;
  width: 52px; height: 38px;
  padding: 4px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.colorpicker::-webkit-color-swatch-wrapper { padding: 0; }
.colorpicker::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 3px); }
.colorpicker::-moz-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 3px); }
.colorpicker:focus-visible { border-color: var(--ink); box-shadow: var(--hard-sm); outline: none; }

/* — Dosya yükleme (dropzone; sürükle + ad yazma runEkidBehavior) — */
.upload {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 22px;
  text-align: center;
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.upload b { font: 800 1rem/1.3 var(--font-body); color: var(--ink); }
.upload > span { font-weight: 600; color: var(--ink-soft); font-size: .92rem; }
.upload .upload-note { font-size: .8rem; }
.upload.is-drag, .upload:hover { border-color: var(--ink); }
.upload:has(input:focus-visible) { border-color: var(--ink); box-shadow: var(--hard-sm); }

/* — Kod / OTP (odak akışı runEkidBehavior) — */
.otp { display: flex; gap: 10px; }
.otp .input { width: 52px; padding: 12px 0; text-align: center; font: 800 1.3rem/1.2 var(--font-head); }

/* — Çok adımlı form (wizard; gezinme runEkidBehavior) — */
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; counter-reset: wiz; }
.wizard-steps li {
  counter-increment: wiz;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font: 700 .88rem/1.2 var(--font-body);
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: 999px;
}
.wizard-steps li::before {
  content: counter(wiz);
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  font: 800 .72rem/1 var(--font-body);
  color: var(--ink);
}
.wizard-steps li.is-active { color: var(--ink); border-color: var(--ink); background: var(--card); }
.wizard-steps li.is-done::before { content: "✓"; }
.wizard-panel { display: none; }
.wizard-panel.is-active { display: flex; flex-direction: column; gap: 18px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wizard-nav button { cursor: pointer; }
.wizard-nav button:disabled { opacity: .45; cursor: not-allowed; }

/* ═══════════ Geri bildirim & Overlay (mekanik — paint temanın feedback()'inde) ═══════════
   Sözleşme: specs/feedback-spec.md. Modal = native <dialog> (odak tuzağı+ESC+inert
   bedava); açma/kapama + toast kuyruğu FeedbackController'da. */
dialog.modal {
  margin: auto;
  width: min(560px, calc(100% - 40px));
  max-height: min(82vh, 640px);
  overflow: auto;
  border: 0;
  padding: 26px 26px 24px;
  background: var(--card);
  color: var(--ink);
  position: relative;
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }
/* Açılış/kapanış geçişi — @starting-style destekleyen tarayıcıda yumuşak,
   desteklemeyende anında (kırılmaz). */
dialog.modal {
  transition: opacity .22s ease, transform .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}
dialog.modal[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style {
  dialog.modal[open] { opacity: 0; transform: translateY(14px) scale(.97); }
}
dialog.modal:not([open]) { opacity: 0; transform: translateY(14px) scale(.97); }
.modal-close {
  position: absolute;
  right: 14px; top: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font: 800 1.1rem/1 var(--font-body);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.modal h3 { margin-bottom: 8px; padding-right: 34px; }
.modal p { color: var(--ink-soft); }
/* Onay varyantı: dar + ortalı + rozet */
.modal.confirm { width: min(400px, calc(100% - 40px)); text-align: center; }
.modal.confirm h3 { padding-right: 0; }
.modal.confirm .modal-actions { justify-content: center; }
.confirm-ico {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper-2);
}

/* — Toast: host + yığılma + giriş (deri/renkler temada) — */
.toast-host {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 13px 18px;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  pointer-events: auto;
  animation: toast-in .28s cubic-bezier(.2, .8, .3, 1.1);
}
.toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-msg { flex: 1; min-width: 0; }
.toast-close, .alert-close {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font: 800 1rem/1 var(--font-body);
  cursor: pointer;
}
.toast-close:hover, .alert-close:hover { color: var(--ink); }

/* — Alert: satır düzeni (tür renkleri temada) — */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.alert > div { flex: 1; min-width: 0; }
.alert-ico { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; }
/* Tür glifi — renkten bağımsız ayırt edilebilirlik (renk körü erişilebilirliği).
   Renk/zemin temada; glif seti evrensel. */
.alert-ico::before { content: "i"; font: 800 .78rem/1 var(--font-body); }
.alert.is-ok .alert-ico::before { content: "✓"; }
.alert.is-warn .alert-ico::before { content: "!"; }
.alert.is-error .alert-ico::before { content: "×"; font-size: .95rem; }

/* — Spinner + yüklenen düğme — */
.spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--ink);
  animation: spin .7s linear infinite;
}
/* Dolgulu (koyu/renkli zeminli) birincil butonda beyaz halka */
.btn-primary.is-loading::after { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }

/* — Boş durum — */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px;
}
.empty p { color: var(--ink-soft); max-width: 380px; }
.empty .btn { margin-top: 12px; }
.empty-art { display: block; width: 88px; height: 88px; margin-bottom: 10px; position: relative; }

/* Çerçevesiz dünya fotoğrafı (media-spec §wphoto) — çerçeve/mat YOK;
   fotoğrafın KENDİSİ temanın kesimini (radius/clip/eğim) ve üzerine
   süslemesini (dikiş, bant, damla…) alır. Tema media()'da boyar;
   fallback = yumuşak köşeli düz fotoğraf. */
.wphoto { position: relative; display: block; margin: 18px 0; }
.wphoto img { width: 100%; display: block; object-fit: cover; border-radius: var(--radius); }

/* Dünya kartı — nesne-kart varyantı (specs/wcard-spec.md). `.card`/`.post-card`
   AİLESİNDEN AYRI token seti; tema worldCard() ile kartı kendi dünyasının
   nesnesine çevirir (lolipop tabela, mandallı pano, vagon...). ROLLOUT
   (type:yeni): paint'siz temalarda bu sade dik kart görünür. */
.wcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 18px; }
.wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.wcard-media { margin: -22px -22px 6px; }
.wcard-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
.wcard-ico { width: 58px; height: 58px; display: grid; place-items: center; font-size: 1.7rem; border-radius: 50%; background: var(--paper-2); }
.wcard-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.wcard h3 { margin: 4px 0 0; }
.wcard-tag { align-self: flex-start; font: 700 .72rem/1.3 var(--font-body); padding: 4px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); }
.wcard p { margin: 0; color: var(--ink-soft); }
.wcard-more { margin-top: auto; font-weight: 800; text-decoration: none; color: var(--ink); }

/* Dünya kartı varyantları (specs/wcard-spec.md):
   .is-soft = pastel zemin + beyaz dikiş çerçevesi (temanın --wc döngüsünden
   türetilir; tema süsleri üstünde kalır). .is-bold = TAM RENKLİ program
   kartı (zemin --wc'nin kendisi, mürekkep kontrast --wc-ink — temanın
   paint'i döngü başına doğru mürekkebi verir; bu fallback açık-beyaz varsayar).
   .wcard-date = takvim yaprağı (etkinlik kartı — :has ile yatay düzene
   geçer). .wcard-meta = saat/yer satırı. .wcard-list = tek kolon etkinlik
   dizilimi. */
.wcard.is-soft {
  background: color-mix(in srgb, var(--wc, var(--splash)) 26%, #fff);
  border-color: transparent;
  outline: 2px dashed rgba(255, 255, 255, .92);
  outline-offset: -9px;
}
.wcard.is-soft .wcard-ico { background: #fff; }
.wcard.is-soft .wcard-tag { background: rgba(255, 255, 255, .72); }
.wcard.is-bold {
  background: var(--wc, var(--splash));
  color: var(--wc-ink, color-mix(in srgb, #fff 90%, var(--wc, var(--splash))));
  border-color: color-mix(in srgb, var(--ink) 30%, var(--wc, var(--splash)));
}
.wcard.is-bold h3, .wcard.is-bold .wcard-more { color: inherit; }
.wcard.is-bold p { color: inherit; opacity: .92; }
.wcard.is-bold .wcard-tag {
  background: transparent;
  border: 2px solid currentColor;
  color: inherit;
}
.wcard.is-bold .wcard-ico { background: rgba(255, 255, 255, .92); }
.wcard-list { display: grid; gap: 18px; margin-top: 18px; }
.wcard-date {
  position: relative;
  align-self: flex-start;
  min-width: 88px;
  padding: 20px 14px 12px;
  text-align: center;
  background: color-mix(in srgb, var(--wc, var(--splash)) 24%, #fff);
  border-radius: 9px;
  transform: rotate(-2deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
  font: italic 700 .82rem/1.3 var(--font-body);
  color: var(--ink);
}
.wcard-date::before {
  content: "";
  position: absolute;
  top: 8px; left: 12px; right: 12px;
  height: 6px;
  background: radial-gradient(circle, rgba(0, 0, 0, .3) 2.5px, transparent 3px) left center / 14px 6px repeat-x;
}
.wcard-date b { display: block; font: 800 1.75rem/1.15 var(--font-head); font-style: normal; }
.wcard-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-soft); font-size: .92rem; }
.wcard:has(> .wcard-date) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 8px;
  align-items: start;
}
.wcard:has(> .wcard-date) > :not(.wcard-date) { grid-column: 2; }
.wcard:has(> .wcard-date) > .wcard-tag, .wcard:has(> .wcard-date) > .wcard-more { justify-self: start; }
.wcard:has(> .wcard-date) > .wcard-date { grid-row: 1 / span 6; }

/* Grup kartı — başlık sekmeli içerik kutusu (specs/gcard-spec.md).
   Fallback = sekmeli klasör; tema groupCard() ile kenarı+tab'ı kendi
   dünyasının nesnesine çevirir (sandık+pirinç plaka, kâğıt+maskeleme bandı…). */
.gcard {
  position: relative;
  margin-top: 14px;
  padding: 18px 16px 14px;
  background: var(--card);
  border: var(--hard-sm, 2px solid var(--line));
  border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) var(--radius-sm, 10px);
}
.gcard-tab {
  position: absolute;
  bottom: calc(100% - 2px);
  left: -2px;
  margin: 0;
  padding: 4px 16px 3px;
  font-size: .88rem;
  background: color-mix(in srgb, var(--splash) 16%, var(--paper));
  border: var(--hard-sm, 2px solid var(--line));
  border-bottom: 0;
  border-radius: var(--radius-sm, 10px) var(--radius-sm, 10px) 0 0;
}

/* Vitrin nesnesi — temanın props() sanatı çizer (specs/props-spec.md).
   Sabit sahne kutusu: tema içine ::before/::after ile nesneyi kurar. */
.prop {
  display: inline-block;
  width: 56px;
  height: 56px;
  position: relative;
  flex: none;
  font-style: normal;
  pointer-events: none;
}

/* ═══════════ Pazarlama & ikna (mekanik — paint temanın marketing()'inde) ═══════════
   Sözleşme: specs/marketing-spec.md; davranış MarketingController. */
.topbar { background: var(--paper-2); border-bottom: 2px solid var(--line); }
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 0;
  font-weight: 700;
  font-size: .92rem;
}
.topbar a { font-weight: 800; }
.topbar-close {
  border: 0; background: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-soft);
  font: 800 1rem/1 var(--font-body);
  cursor: pointer;
}
.topbar-close:hover { color: var(--ink); }

/* Üst haber/reklam şeridi (kayan) — .topbar'ın marquee kardeşi; nav'ın ÜSTÜNE
   konur (topbar ile birlikteyse en üstte tickerbar). Kesintisiz döngü için
   consumer içerik setini İKİ kez basar (2. kopya aria-hidden, linkleri
   tabindex="-1"); ray @keyframes ticker ile -%50 kayar. Hover/odakta durur.
   Paint temanın marketing()'inde (35/35 gerçek paint), burası nötr fallback. */
.tickerbar { overflow: hidden; background: var(--paper-2); border-bottom: 2px solid var(--line); }
.tickerbar-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 9px 0;
  font-weight: 700;
  font-size: .9rem;
  animation: ticker 32s linear infinite;
}
.tickerbar-track span { flex: none; display: inline-flex; align-items: center; white-space: nowrap; }
.tickerbar-track span::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  margin: 0 22px;
}
.tickerbar a { font-weight: 800; }
.tickerbar:hover .tickerbar-track,
.tickerbar:focus-within .tickerbar-track { animation-play-state: paused; }
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper-2);
  font: 800 .68rem/1.2 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: middle;
}
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
.quote-card { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); }
.quote-card blockquote { font-size: 1.02rem; line-height: 1.6; }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; }
.quote-card figcaption b { display: block; line-height: 1.25; }
.quote-card figcaption small { color: var(--ink-soft); font-weight: 600; }
.avatar {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--paper-2);
  font: 800 .95rem/1 var(--font-body);
  color: var(--ink);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 84px; height: 84px; font-size: 1.5rem; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; margin-top: 36px; }
.member {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 26px 18px 22px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.member .avatar { margin-bottom: 8px; }
.member h3 { font-size: 1.08rem; }
.member p { color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
/* Foto varyantı — "polaroid" öğretmen kartı: büyük fotoğraf kartı doldurur,
   isim + branş altta. Avatar'lı varsayılanın alternatifi; tema marketing()'de
   çerçeve/eğim/süsleme boyar. */
.member.has-photo { padding: 12px 12px 18px; gap: 4px; }
.member-photo {
  width: 100%;
  aspect-ratio: 1 / 1.06;
  margin-bottom: 10px;
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  position: relative;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facts { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 36px; text-align: center; }
.fact {
  flex: 1 1 150px;
  max-width: 240px;
  padding: 22px 16px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.fact .counter { display: block; font: 800 2.4rem/1.1 var(--font-head); color: var(--ink); }
.fact small { color: var(--ink-soft); font-weight: 700; }
.timeline { list-style: none; margin-top: 36px; display: flex; flex-direction: column; }
.timeline li { display: flex; gap: 18px; position: relative; padding-bottom: 26px; }
.timeline li:last-child { padding-bottom: 0; }
/* dikey hat + düğüm: tema boyar; konum burada */
.timeline li::before {
  content: "";
  position: absolute;
  left: 74px; top: 26px; bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline li:last-child::before { display: none; }
.tl-time {
  flex: none;
  width: 62px;
  text-align: right;
  font: 800 .92rem/1.6 var(--font-body);
  color: var(--ink-soft);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 68px; top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
}
.tl-body { padding-left: 24px; }
.tl-body b { display: block; }
.tl-body p { color: var(--ink-soft); font-size: .95rem; }
.newsletter { display: flex; gap: 12px; align-items: stretch; max-width: 480px; }
.newsletter .input { flex: 1; min-width: 0; }
.cookie {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 290;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 720px;
  margin-inline: auto;
  padding: 16px 20px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.cookie[hidden] { display: none; }
.cookie p { flex: 1 1 320px; font-size: .92rem; font-weight: 600; }
.cookie p a { font-weight: 800; }
.cookie-actions { display: flex; gap: 10px; }
.countdown { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }
.cd-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 74px;
  padding: 12px 10px 10px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.cd-cell b { font: 800 1.7rem/1.1 var(--font-head); color: var(--ink); }
.cd-cell small { color: var(--ink-soft); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 26px; }
.trust li {
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  font-weight: 700;
  font-size: .88rem;
}
.pricing-tiers { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 26px; margin-top: 40px; }
.pricing-tiers .price-card { flex: 1 1 260px; max-width: 360px; }

/* ═══════════ Medya (mekanik — paint temanın media()'sında) ═══════════
   Sözleşme: specs/media-spec.md; davranış MediaController. */
.carousel { position: relative; overflow: hidden; }
.carousel-track { display: flex; transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.carousel-slide { flex: 0 0 100%; min-width: 0; }
.carousel-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}
.carousel-prev, .carousel-next {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 800 1.1rem/1 var(--font-body);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 0;
  cursor: pointer;
}
/* Mozaik galeri: sabit foto sayısı YOK — 12'lik nth-child desen döngüsü
   (12n+1 ve 12n+8 büyük 2x2) + dense akış her N'de dengeli dizer; 4 kart
   hedef sayılarda (5/10/15…) satırlar tam dolar. 4'ten az fotoda :has
   kapısı devreye girmez, düz eşit grid kalır. */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 16vw, 170px); grid-auto-flow: dense; gap: 14px; margin-top: 36px; }
.gallery:has(> :nth-child(4)) a:nth-child(12n+1),
.gallery:has(> :nth-child(4)) a:nth-child(12n+8) { grid-column: span 2; grid-row: span 2; }
.gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery a:hover img { transform: scale(1.05); }
dialog.lightbox {
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1080px);
  max-height: 92vh;
  overflow: visible;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox figure { margin: 0; }
.lightbox img { max-width: 100%; max-height: 80vh; display: block; border-radius: var(--radius-sm); }
.lightbox figcaption { color: #fff; text-align: center; padding: 12px 4px 0; font-weight: 700; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 800 1.15rem/1 var(--font-body);
  cursor: pointer;
}
.lightbox-close { top: -16px; right: -16px; }
.lightbox-prev { left: -18px; top: 50%; translate: 0 -50%; }
.lightbox-next { right: -18px; top: 50%; translate: 0 -50%; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--paper-2); }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.audio { width: 100%; }
.logocloud { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 38px; margin-top: 30px; }
.logocloud img { height: 40px; width: auto; }
.beforeafter { position: relative; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid var(--line); --ba-pos: 50%; }
.beforeafter img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.beforeafter .ba-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.beforeafter .ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
  margin: 0;
}
.beforeafter .ba-range::-webkit-slider-thumb { appearance: none; width: 4px; height: 100vh; background: transparent; }
.beforeafter::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--card);
  pointer-events: none;
}
.errpage {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 90px 24px;
}
.errpage .err-code { font: 800 clamp(4rem, 12vw, 7rem)/1 var(--font-head); color: var(--ink); letter-spacing: .02em; }
.errpage p { color: var(--ink-soft); max-width: 420px; }
.errpage .btn { margin-top: 16px; }
/* Tooltip — saf CSS balon; kritik bilgi İÇİN KULLANILMAZ (mobil hover yok) */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) scale(.94);
  background: var(--ink);
  color: var(--paper);
  font: 700 .8rem/1.35 var(--font-body);
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 50;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* ═══════════ Navigasyon: sayfalama (paint temanın navigation()'ında) ═══════════ */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination a, .page-gap {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: 800 .95rem/1 var(--font-body);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.page-gap { border-color: transparent; background: none; color: var(--ink-soft); }
.pagination a.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ═══════════ Navigasyon parça 2: tabs + to-top + skip-link (mekanik) ═══════════ */
.tabs-bar { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid var(--line); padding-bottom: 10px; }
.tabs-bar [role="tab"] {
  border: 2px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font: 800 .92rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.tabs-bar [role="tab"].is-active { background: var(--card); color: var(--ink); border-color: var(--ink); }
.tab-panel { display: none; padding-top: 20px; }
.tab-panel.is-active { display: block; }
.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 280;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 800 1.15rem/1 var(--font-body);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.to-top.is-show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.skip-link {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 400;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-64px);
  opacity: 0;
}
.skip-link:focus-visible { transform: translateY(0); opacity: 1; }

/* ═══════════ Admin paneli (mekanik — paint temanın admin()'inde; yalnız b+d boyalı) ═══════════
   Sözleşme: specs/admin-spec.md; davranış ExtrasController. */
.dash { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.dash-side { position: sticky; top: 96px; }
.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-nav a {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  color: var(--ink-soft);
  border: 2px solid transparent;
}
.dash-nav a.is-active { color: var(--ink); background: var(--paper-2); border-color: var(--line); }
.dash-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.widget { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.widget-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--line);
}
.widget-head h3 { font-size: 1.02rem; }
.widget-body { padding: 18px; }
.stat {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.stat b { font: 800 1.9rem/1.1 var(--font-head); color: var(--ink); }
.stat small { color: var(--ink-soft); font-weight: 700; }
.stat-delta {
  position: absolute;
  right: 14px; top: 14px;
  font: 800 .78rem/1.2 var(--font-body);
  padding: 3px 8px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper-2);
}
.table-wrap { overflow-x: auto; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 12px 16px; white-space: nowrap; }
.table th {
  font: 800 .78rem/1.3 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
}
.table td { border-bottom: 1px solid var(--line); }
.table tbody tr:last-child td { border-bottom: 0; }
.notif { list-style: none; display: flex; flex-direction: column; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item .dot { margin-top: 7px; opacity: 0; }
.notif-item.is-unread .dot { opacity: 1; }
.notif-item small { display: block; color: var(--ink-soft); }
.status { display: inline-flex; align-items: center; gap: 7px; font: 700 .85rem/1.2 var(--font-body); }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft); border: 2px solid var(--line); }
.menu-host { position: relative; display: inline-block; }
.usermenu {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 700 .95rem/1.2 var(--font-body);
  cursor: pointer;
}
.usermenu .avatar { width: 34px; height: 34px; font-size: .8rem; }
.menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  z-index: 120;
  min-width: 180px;
  display: flex; flex-direction: column;
  padding: 8px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.menu[hidden] { display: none; }
.menu a { padding: 9px 12px; border-radius: 8px; text-decoration: none; font-weight: 700; color: var(--ink); }
.menu a:hover { background: var(--paper-2); }
.menu hr { border: 0; border-top: 2px solid var(--line); margin: 6px 4px; }
.settings { display: flex; flex-direction: column; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row small { display: block; color: var(--ink-soft); }
.gsearch { max-width: 420px; }
.gsearch .kbd {
  position: absolute;
  right: 14px; top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.kbd {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 7px;
  background: var(--paper-2);
  font: 700 .75rem/1.2 var(--font-body);
  color: var(--ink-soft);
}
.locked { position: relative; opacity: .6; pointer-events: none; user-select: none; }
.locked::after {
  content: "🔒";
  position: absolute;
  right: 12px; top: 12px;
  font-size: 1.05rem;
  filter: grayscale(1);
}
.readonly { opacity: .7; cursor: not-allowed; }
.skeleton {
  height: 14px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -100% 0;
  background: rgba(255, 255, 255, .35);
  animation: skshimmer 1.3s ease-in-out infinite;
}
@keyframes skshimmer { to { translate: 100% 0; } }
.progress {
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper-2);
  overflow: hidden;
}
.progress i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.copybtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: 700 .88rem/1.2 var(--font-body);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}

/* ═══════════ Blog ekleri (mekanik — paint temanın blogExtras()'ında; yalnız b+d boyalı) ═══════════
   Sözleşme: specs/blog-extras-spec.md. */
.post-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.post-filter a {
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
  font: 800 .88rem/1.2 var(--font-body);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.post-filter a.is-active { background: var(--card); color: var(--ink); border-color: var(--ink); }
.related { margin-top: 54px; }
.related h2 { font-size: 1.5rem; margin-bottom: 18px; }
.author {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  margin: 34px 0;
}
.author small { display: block; color: var(--ink-soft); font-weight: 700; margin-bottom: 6px; }
.author p { color: var(--ink-soft); font-size: .95rem; }
.share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 26px 0; }
.share a {
  padding: 8px 16px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font: 700 .88rem/1.2 var(--font-body);
  text-decoration: none;
  color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease;
}
.readbar {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 260;
  height: 5px;
  background: transparent;
  pointer-events: none;
}
.readbar i { display: block; height: 100%; width: 0; background: var(--ink); }
.pullquote {
  margin: 30px 0;
  padding: 6px 0 6px 22px;
  border-left: 5px solid var(--line);
  font: 700 1.35rem/1.5 var(--font-head);
  color: var(--ink);
}
.inline-cta {
  margin: 30px 0;
  padding: 22px 24px;
  background: var(--paper-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.inline-cta b { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.inline-cta p { color: var(--ink-soft); margin-bottom: 14px; }
.comments { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.comment { display: flex; gap: 12px; align-items: flex-start; }
.comment-body {
  flex: 1; min-width: 0;
  padding: 12px 16px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}
.comment-body small { color: var(--ink-soft); margin-left: 8px; font-weight: 600; }
.comment-body p { margin-top: 4px; font-size: .96rem; }

/* ═══════════ Reveal ═══════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }


/* ---------- Butonlar: KALDIRILMIŞ KART ----------
   Düz renk kare-köşeli kart; hover'da hafifçe KALDIRILIR (2px yukarı + minik
   eğim, gölge büyür), basınca yere iner (gölge sıfır). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 4px;
  border: 2px solid var(--navy);
  font: 800 1rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.btn:hover { transform: translateY(-2px) rotate(-1.2deg); }
.btn:active { transform: translateY(3px) rotate(0); box-shadow: 0 0 0 0 transparent !important; }
.btn-lg { padding: 16px 32px; font-size: 1.08rem; }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--hard-sm); }
.btn-primary:hover { box-shadow: var(--hard); }
.btn-ghost { background: #fff; color: var(--navy); box-shadow: var(--hard-sm); }
.btn-ghost:hover { background: var(--lemon); box-shadow: var(--hard); }
/* gece stadyumu (CTA) kartları: beyaz kart / beyaz kontur */
.btn-light { background: #fff; color: var(--navy); border-color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); box-shadow: none; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }


/* Kicker = KART SIRASI etiketi: metnin önünde 4 kaldırılmış mini kart */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 .74rem/1 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 9px; height: 13px;
  border-radius: 1.5px;
  background: var(--red);
  box-shadow: 12px 0 0 var(--sky), 24px 0 0 var(--mustard), 36px 0 0 var(--pine);
  margin-right: 36px;
  transform: rotate(-6deg);
}


/* Başlıklar bayrak kırmızısı, gövde lacivert */
h1, h2, h3 { color: var(--red); }
/* Vurgu: kırmızı kelime + altında KART ZİNCİRİ (renkli mini kartlar dizisi) */
em.squiggle {
  font-style: normal;
  color: var(--red);
  position: relative;
  white-space: nowrap;
}
em.squiggle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.24em;
  height: .2em;
  background: repeating-linear-gradient(90deg, var(--red) 0 .5em, transparent .5em .62em, var(--sky) .62em 1.12em, transparent 1.12em 1.24em, var(--mustard) 1.24em 1.74em, transparent 1.74em 1.86em, var(--pine) 1.86em 2.36em, transparent 2.36em 2.48em);
  border-radius: 1px;
}
.asterisk-link { text-decoration: none; color: var(--sky); font-size: .6em; vertical-align: super; font-weight: 800; }
.asterisk-light { color: var(--mustard); }
.fineprint { font-size: .82rem; color: var(--ink-soft); margin-top: 14px; max-width: 480px; }


/* Nav = beyaz tören barı; alt kenar KALDIRILMIŞ KART SIRASI (renkli karolar) —
   bayrak direkleri bu sıradan yükselir */
.nav { border-bottom: none; }
.nav::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, #3f8fe0 0 14px, transparent 14px 28px, #ffc93c 28px 42px, transparent 42px 70px, #2fa66c 70px 84px, transparent 84px 98px), repeating-linear-gradient(0deg, #ff8fb0 0 14px, transparent 14px 42px, #e30a17 42px 56px, transparent 56px 70px, #3f8fe0 70px 84px, transparent 84px 112px), repeating-linear-gradient(90deg, #2fa66c 0 14px, transparent 14px 56px, #ffc93c 56px 70px, transparent 70px 84px), #ff8fb0;
  background-size: 98px 8px, 112px 8px, 84px 8px, auto;
  border-bottom: 1.5px solid var(--navy);
  pointer-events: none;
}
.nav.is-stuck { box-shadow: 0 8px 20px rgba(43, 45, 74, .14); }
/* Logo işareti = kaldırılmış KIRMIZI KART üstünde beyaz ay-yıldız */
.logo-mark {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22200 180 640 440%22%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 50% 50% / 30px auto, var(--red);
  color: transparent;
  font: 400 1rem/1 var(--font-head);
  box-shadow: var(--hard-sm);
  transform: rotate(-4deg);
}
.logo-name { font: 400 1.35rem/1 var(--font-head); letter-spacing: .01em; color: var(--red); }
.logo-dot { color: var(--sky); }


/* Sekmeler = GÖNDERE ÇEKİLEN BAYRAKLAR: her sekme bir DİREK (::before, kordondan
   yükselir; tepesinde alem ::after) + ay-yıldızlı kırmızı BAYRAK (a'nın kendisi;
   metin bayrağın üstünde). Sayfa açılınca bayraklar sırayla göndere çekilir
   (mt23-gonder), hover'da rüzgârda dalgalanır (direk tarafı sabit), maskot
   basınca yeniden çekilip coşkuyla dalgalanır. Aktif bayrağın alemi ALTIN. */
.nav-links { gap: 16px; align-items: flex-start; }
.nav-links a {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  padding: 10px 14px 10px 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22200 180 640 440%22%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 13px 50% / 17px auto, var(--red);
  color: #fff;
  font: 800 .82rem/1 var(--font-body);
  letter-spacing: .03em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0 3px 3px 0;
  box-shadow: 3px 3px 0 rgba(227, 10, 23, .18);
  transform-origin: 0 50%;
  /* İKİ animasyon yuvası: 1 = göndere çekilme (giriş, bir kez), 2 = hover dalga /
     maskot çekme. Hover'da yalnız 2. yuva eklenir (longhand) — shorthand ile liste
     değişince tarayıcı girişi YENİDEN oynatıyordu (bayrak inip tekrar çekiliyordu). */
  animation-name: mt23-gonder;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.2, .9, .3, 1);
  animation-fill-mode: both;
}
.nav-links a:nth-child(2) { animation-delay: .08s; }
.nav-links a:nth-child(3) { animation-delay: .16s; }
.nav-links a:nth-child(4) { animation-delay: .24s; }
.nav-links a:nth-child(5) { animation-delay: .32s; }
.nav-links a:nth-child(6) { animation-delay: .4s; }
@keyframes mt23-gonder {
  0%   { transform: translateY(18px) skewY(0); opacity: 0; }
  55%  { transform: translateY(-3px) skewY(-3deg); opacity: 1; }
  100% { transform: translateY(0) skewY(0); opacity: 1; }
}
/* direk: bayrağın solunda, kordondan çıkar, bayrağın altına iner */
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; top: -14px; bottom: -12px;
  width: 3px;
  background: var(--crimson);
  border-radius: 0 0 2px 2px;
}
/* alem: direğin tepesinde küre — aktifte ALTIN (tek altın vurgu) */
.nav-links a::after {
  content: "";
  position: absolute;
  left: -2.5px; top: -20px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  border: 1.5px solid var(--crimson);
}
.nav-links a.is-active::after, .nav-links a[aria-current="page"]::after {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, .35);
}
.nav-links a.is-active, .nav-links a[aria-current="page"] { background-color: var(--crimson); }
/* hover: rüzgârda dalgalanır (2. yuva; giriş yuvası aynen kalır) */
.nav-links a:hover {
  animation-name: mt23-gonder, mt23-dalga;
  animation-duration: .9s, 1.1s;
  animation-timing-function: cubic-bezier(.2, .9, .3, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}
@keyframes mt23-dalga {
  0%, 100% { transform: skewY(-3deg); }
  50%      { transform: skewY(3deg); }
}
/* maskot basınca: yeniden göndere çekilir + coşkuyla dalgalanır (2. yuva) */
.nav-links a.tab-pressed {
  animation-name: mt23-gonder, mt23-cek;
  animation-duration: .9s, .9s;
  animation-timing-function: cubic-bezier(.2, .9, .3, 1), ease-in-out;
  animation-iteration-count: 1, 1;
  animation-fill-mode: both, both;
}
@keyframes mt23-cek {
  0%   { transform: translateY(0) skewY(0); }
  25%  { transform: translateY(10px) skewY(-6deg); }
  55%  { transform: translateY(-4px) skewY(6deg); }
  80%  { transform: translateY(1px) skewY(-3deg); }
  100% { transform: translateY(0) skewY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a, .nav-links a:hover, .nav-links a.tab-pressed { animation: none; }
}

/* NAV GRUP PANELİ = TÖREN PROGRAMI: beyaz kâğıt, kırmızı çizgiler, üstte kordon;
   hover satırının başına mini bayrak konur */
.menu.nav-menu {
  padding: 16px 12px 14px;
  gap: 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(227, 10, 23, .14) 27px 28.5px),
    #fff;
  border: var(--bd);
  border-top: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #e30a17 0 5px, #fff 5px 10px) 6;
  box-shadow: var(--hard);
}
.menu.nav-menu a {
  position: relative;
  padding-left: 28px;
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .04em;
  font-size: .82rem;
}
.menu.nav-menu a::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 14px; height: 10px;
  margin-top: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .16s ease, transform .16s ease;
}
.menu.nav-menu a:hover { background: var(--rose); color: var(--red); }
.menu.nav-menu a:hover::before { opacity: 1; transform: scale(1); }


/* ---------- Nav maskotu: tribün amigosu MEGAFON "Amigo" ----------
   .mas-face = kırmızı ÇAN (megafonun ağzı; beyaz halka, yüz burada);
   ::before = sola uzanan KONİ gövde; ::after = sağa yayılan SES DALGALARI
   (sevinince). .mas-hat = tepede kırmızı "canlı" ışığı. .mas-arm = lacivert
   tutma sapı (altta). */
.mas-face {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  width: 34px; height: 34px;
  background: var(--red);
  border: 2px solid var(--navy);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--red), var(--hard-sm);
  animation: masbreathe 2.8s ease-in-out infinite;
}
/* koni gövde: çanın arkasından sola daralır */
.mas-face::before {
  content: "";
  position: absolute;
  right: 22px; top: 9px;
  width: 22px; height: 16px;
  background: var(--red);
  border: 2px solid var(--navy);
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
  z-index: -1;
}
/* ses dalgaları: sağa açılan iki yay */
.mas-face::after {
  content: "";
  position: absolute;
  right: -18px; top: 4px;
  width: 16px; height: 26px;
  background: radial-gradient(circle at 0 50%, transparent 5px, var(--navy) 5px 6.5px, transparent 6.5px 10.5px, var(--navy) 10.5px 12px, transparent 12px);
  opacity: 0;
  transform: scale(.6);
  transform-origin: 0 50%;
}
.mas-eye { position: absolute; top: 10px; width: 5px; height: 5px; z-index: 1; }
.mas-eye i { display: block; width: 5px; height: 5px; background: var(--navy); border-radius: 50%; animation: masblink 4.6s ease infinite; }
.mas-cheek { position: absolute; top: 17px; width: 6px; height: 4px; background: rgba(255, 255, 255, .55); border-radius: 50%; z-index: 1; }
.mas-mouth {
  position: absolute;
  left: 50%; top: 17px;
  transform: translateX(-50%);
  width: 9px; height: 4px;
  border: 2px solid var(--navy);
  border-top: none;
  border-radius: 0 0 9px 9px;
  z-index: 1;
  transition: width .15s ease, height .15s ease, background .15s ease;
}
.mascot:hover .mas-mouth, .mascot.party .mas-mouth { width: 12px; height: 9px; background: var(--navy); border-radius: 0 0 12px 12px; }
/* canlı ışığı */
.mas-hat {
  position: absolute;
  left: 50%; bottom: 40px;
  width: 7px; height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--mustard);
  border: 1.5px solid var(--navy);
}
/* tutma sapı: altta lacivert kısa çubuk */
.mas-arm {
  position: absolute;
  right: 14px; bottom: -4px;
  width: 7px; height: 14px;
  background: var(--navy);
  border-radius: 2px;
  transform: rotate(-105deg);
  transform-origin: 50% 0;
}
/* sevinç: fırlayan konfeti */
.mas-hearts { position: absolute; left: 0; right: 0; top: -4px; pointer-events: none; }
.mas-hearts b { position: absolute; left: 50%; font: 800 11px/1 var(--font-body); color: transparent; opacity: 0; }
.mas-hearts b::before { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 9px; border-radius: 1.5px; background: var(--sky); transform: rotate(20deg); }
.mas-hearts b:nth-child(2)::before { background: var(--mustard); transform: rotate(-30deg); }
.mas-hearts b:nth-child(3)::before { background: var(--pine); width: 5px; height: 8px; transform: rotate(50deg); }
html[data-mascot="cocuk"] .mascot:hover .mas-face::after,
html[data-mascot="cocuk"] .mascot.party .mas-face::after { animation: mt23-ses .7s ease-out infinite; }
@keyframes mt23-ses {
  0%   { opacity: 0; transform: scale(.5); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}
html[data-mascot="cocuk"] .mascot:hover .mas-hat,
html[data-mascot="cocuk"] .mascot.party .mas-hat { animation: mt23-isik .5s step-end infinite; }
@keyframes mt23-isik {
  0%, 100% { background: var(--red); box-shadow: 0 0 0 3px rgba(227, 10, 23, .3); }
  50%      { background: var(--mustard); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .mas-face::after, .mas-hat { animation: none !important; } }


/* ---------- Bölümler: limon / gök tören kâğıdı ---------- */
.section-tint { position: relative; background: var(--lemon); }
.section-tint:nth-of-type(4n+3) { background: var(--skylight); }

/* ---------- Hero: TRİBÜN KART GÖSTERİSİ ----------
   Tüm zemin KARELİ BAYRAK: her kare bir tribün kartı (16px), kırmızı kartlar
   yarı saydam, ay-yıldız BEYAZ kartlardan (piksel PNG, basamaklı kenar).
   Gökte bayrak ipleri + balon demetleri + konfeti (korunanlar). Bayrak soluk;
   imlecin geldiği yerde YUVARLAK alanda TAM RENK görünür (.hero-decor::before
   mercek: --hr yarıçapı içinde opak bayrak, aynı ızgara); tıkla dalga. Arada
   bir soldan başlayıp tüm bayrak yavaşça tam renge döner, sonra yine soldan
   başlayıp soluklaşır (ikinci maske: 3× genişlik bant tek geçiş). */
.hero {
  position: relative;
  padding: 168px 0 120px; /* üstte kutlama pankartı bandı (ip birleşimi ~90px + kart) */
  --hero-fx: trail repel;
  --hero-trail-step: 28px;
  /* KARELİ BAYRAK zemini: derz rengi (kart araları) + bayrak PNG (cover) */
  background-color: #dfe8f5;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFACAYAAABkyK97AAAIo0lEQVR42u3dza3q2BaFUdokQDLESTi0yIEACMTQcQchbyFr/02PT6rG6D2dg+4se/Hqnl7ny3X95/SJmZmZ69sPhJmZ2QAzMzMfZIAlSVKH/BsJMzOzV9DMzMwGmJmZmd2AJUlyA2ZmZmavoJmZmQ0wMzMzuwFLkuQGzMzMzH4AzMzMBpiZmdkNWJIkuQEzMzN7Bc3MzMwGmJmZ2Q1YkiS5ATMzM3sFzczMzAaYmZnZDViSJDdgZmZm9gqamZnZADMzM7MbsCRJbsDMzMzsFTQzM7MBZmZmZjdgSZLcgJmZmb2CZmZmZgPMzMzsBixJktyAmZmZvYJmZmZmA8zMzOwGLEmS3ICZmZm9gmZmZjbAzMzM7AYsSZIbMDMzM3sFzczMbICZmZnZDViSJDdgZmZm9gqamZnZADMzM7sBS5IkN2BmZmavoJmZmdkAMzMzuwFLkiQ3YGZmZq+gmZmZ2QAzMzO7AUuS5Abs30iYmZm9gmZmZjbAzMzM7AYsSZIbMDMzM3sFzczMbICZmZnZDViSJDdgZmZmr6D9QJiZmQ0wMzOzG7AkSXIDZmZm9gqamZmZDTAzM7MbsCRJcgNmZmb2CpqZmdkA+4EwMzO7AUuS5AbM/I+X++O2/vPTy/Jc/2niwv8evz9m9gqaDbABZmYDzGyAmZndgCVJcgPmQz/Rtn6C7W1PzMzsFTQbYAPMzAaYDbABZmZ2A5YkyQ2YPeF6Qvb5YmavoNkAG2BmNsBsgA0wM7MkSXID5hZPvJ5gm9rnj5m9gmYDbICZ2QCzATbAzOwGLEmS3IDZE++43zre+61xn09m9graABtgA8zMBpgNsAFmZjdgSZLkBszRT7zh/yWp0hOzzy+zV9B+IAbYABtgZjbAbIANMDO7AUuSJDdgnvmJ1+9v+/fn58PsFTQbYANsgJnZALMBNsDM7AYsSZLcgD3x+lZz7rem/XyYvYJmA2yADTAzG2ADbIANMDO7AUuSJDdgT7yeeJmZvYJmA8zMzAbYABtgZmY3YEmS3ID9G8kcf3uOJ15mZq+g2QD7/TEzG2ADbICZmd2AJUmSG7BvPXviZWb2CpoNMDOzAfYDMcAGmJnZDViSJDdg9q1nvy9/G5OfD7NX0AbYALMBZjbAbIDZADOzG7AkSW7A7FvPnPl59PNi9graABtgNsDMBpgNMBtgZnYDliTJDZh965mD3sh4Q8LsFbQBNsBsgJkNMBtgNsDM7AYsSZIbMPvWM8d+Pv2Xupi9gjbABpgNMLMBZgPMBtgAM7sBS5LkBuwJw7eeOffzWf3/FeAJmL2CZgPMPp8GmNkAG2ADzAaY2Q1YkiS5AXsC9gTMvqXP7BU0G2D2+TTAzAbYH3B+P2yAmd2AJUlyA+bUv/3IEwV7Q8PsFbQBNsBsgA0wG2A/EAPMPq8GmNkNWJIkN2D2BMwZn7/RPo+eeNkraD8QA+z3ZYANMLMBNsAGmA0wsxuwJElyA/YE7AnY52nYJ1ifR2avoP2B6Q88nycDzGyA/YFpgNkA+zwyuwFLkuQG7InFEwd7AvZ5ZK+g2QCzz5PPI7MB9gemP/DYADO7AUuSJDdgTyyeONh/CYvZK2g2wGyADTCzATbABpgNMLMbsCRJcgP2BOwJmDc+r56Imb2CNsAGmA2w3w8bYDbAbIANMLMbsCRJbsDsCYN9Pr2xYfYK2h9wBpgNMLMBZgPMPp8GmNkNWJIkN2BPGJ6AOe7zWf3/JeCJmL2CZgPMPp8GmNkAG2ADzAaY2Q1YkiS5AXsC9kTB1T6fvf/Lcn5/7BU0G2A2wAaY2QAbYAPMBpjZDViSJLkB+9uRfCuadzwBewJl9graABtgNsDMBpgNMBtgZnYDliTJDZh9K5pjPo9+XsxeQRtgA8wGmNkAswFmA8zMbsCSJLkBs29F87yfRz8fZq+gDbABZgPMbIDZALMBZmY3YEmS3IDZt6KZmdkraANsgJmZDTAbYGZmdgOWJMkNmOf4VrQnYmZmr6ANsAFmZjbAbICZmdkNWJIkN2AO+la0J2JmZq+gDbABZmY2wGyA/b6Ymd2AJUlyA2ZPxH5//jYiZvYK2gAbYAPMzAaYDTAbYGY3YEmS5AbM8z8Rf9nvb/v35+fD7BU0G2ADbICZ2QCzATbAzOwGLEmS3IB55ifi9G/9lv52K59fZq+g/UAMsAE2wMxsgNkAG2BmdgOWJEluwBz9RDz4E3Ppida3wJnZK2g2wAaYmQ0wG2AD7PPIzG7AkiS5AbMn4lz7/DGzV9BsgA0wMxtgNsAGmJndgCVJkhswz/St3sM7/L/kxcxeQbMBNsDMbIDZALMBZmY3YEmS3IDZE7InXGZmr6DZABtgZjbAbIANMDOzG7AkSW7AHPrE3PsJuvC/x++Pmb2CZgNsgJnZADMbYGZmN2BJktyAmZmZ2StoZmZmA8zMzMxuwJIkuQEzMzOzV9DMzMwGmJmZ2Q1YkiS5ATMzM3sFzczMzAaYmZnZDViSJLkBMzMzewXNzMzMBpiZmdkNWJIkN2BmZmb2CpqZmdkAMzMzsxuwJEluwMzMzOwVNDMzswFmZmZmN2BJktyAmZmZvYJmZmZmA8zMzOwGLEmS3ICZmZm9gmZmZmYDzMzM7AYsSZLcgJmZmb2CZmZmNsB+IMzMzG7AkiS5ATMzM7NX0MzMzAaYmZmZ3YAlSXIDZmZmZq+gmZmZDTAzM7MbsCRJcgNmZmb2CpqZmZkNMDMzsxuwJElyA2ZmZvYKmpmZmQ0wMzOzG7AkSW7A/o2EmZnZK2hmZmYDzMzMzG7AkiS5ATMzM7NX0MzMzAaYmZmZ3YAlSXIDZmZm9graD4SZmdkAMzMzuwFLkiQ3YGZmZq+gmZmZ2QAzMzO7AUuSJDdgZmZmr6CZmZnZD4CZmdkNWJIkN2BmZmb2CpqZmdkAMzMzsxuwJEluwMzMzOwVNDMzswFmZmZm798lSerUG0S0NNmUgjV2AAAAAElFTkSuQmCC");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  transition: --hr .4s ease, --hero-feather .4s ease;
  cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2230%22 height=%2230%22 viewBox=%220 0 30 30%22%3E%3Crect x=%224%22 y=%223%22 width=%223%22 height=%2226%22 rx=%221.5%22 fill=%22%237d0a12%22/%3E%3Crect x=%227%22 y=%223%22 width=%2221%22 height=%2214%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%2214.5%22 cy=%2210%22 r=%223.6%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2215.4%22 cy=%2210%22 r=%222.9%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%2219.7,10 22.6,10.9 20.8,8.5 20.8,11.5 22.6,9.1%22 fill=%22%23fff%22/%3E%3C/svg%3E") 4 4, auto;
}
.hero a, .hero button { cursor: pointer; }
.hero-in { position: relative; z-index: 1; }
.hero h1 { color: var(--navy); }
.hero h1 em { color: var(--red); }
.hero .hero-sub, .hero .fineprint { color: var(--navy); }
/* MERCEK: imleç çevresinde tribün kartları çevrilir → renkli karolar (kit
   maskeler; tema yalnız dokuyu + yarıçapı verir). Tıkta dalga: yarıçap büyür. */
.hero-decor::before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFACAYAAABkyK97AAAInElEQVR42u3dPa7q2BaFUcd0gP4HZPSKhhgSSwghb1nW/psen/SCkZXOQXeWvXh1l9ftvm7/Wz4xMzNzffuBMDMzG2BmZuaLDLAkSeqQfyNhZmb2CpqZmdkAMzMzsxuwJEluwMzMzOwVNDMzswFmZmZmN2BJktyAmZmZ2Q+AmZnZADMzM7sBS5IkN2BmZmavoJmZmdkAMzMzuwFLkiQ3YGZmZq+gmZmZ2QAzMzO7AUuS5AbMzMzMXkEzMzMbYGZmZnYDliTJDZiZmZm9gmZmZjbAzMzM7AYsSZIbMDMzs1fQzMzMbICZmZndgCVJkhswMzOzV9DMzMxsgJmZmd2AJUmSGzAzM7NX0MzMzAaYmZmZ3YAlSXIDZmZmZq+gmZmZDTAzMzO7AUuS5AbMzMzMXkEzMzMbYGZmZjdgSZLkBszMzOwVNDMzMxtgZmZmN2BJkuQGzMzM7BU0MzMzG2BmZmY3YEmS3ID9GwkzM7NX0MzMzAaYmZmZ3YAlSXIDZmZmZq+gmZmZDTAzMzO7AUuS5AbMzMzsFbQfCDMzswFmZmZ2A5YkSW7AzMzMXkEzMzOzAWZmZnYDliRJbsDMzMxeQTMzMxtgPxBmZmY3YEmS3ICZj3h9PNftf3/9VRMX/nn8/pjZK2g2wAaYmQ0wswFmZnYDliTJDZgv/UTb+gm2tz0xM7NX0GyADTAzG2A2wAaYmdkNWJIkN2D2hOsJ2eeLmb2CZgNsgJnZALMBNsDMzJIkyQ2YWzzxeoJtap8/ZvYKmg2iAWZmA8wG2AAzsxuwJElyA2ZPvON+6/jst8Z9PpnZK2gDbIANMDMbYDbABpiZ3YAlSZIbMEc/8Yb/l6RKT8w+v8xeQfuBGGADbICZ2QCzATbAzOwGLEmS3IB55idev7/935+fD7NX0GyADbABZmYDzAbYADOzG7AkSXID9sTrW82535r282H2CpoNsAE2wMxsgA2wATbAzOwGLEmS3IA98XriZWb2CpoNMDMzG2ADbICZmd2AJUlyA/ZvJHP87TmeeJmZvYJmA+z3x8xsgA2wAWZmdgOWJEluwL717ImXmdkraDbAzMwG2A/EABtgZmY3YEmS3IDZt579vvxtTH4+zF5BG2ADzAaY2QCzAWYDzMxuwJIkuQGzbz1z5ufRz4vZK2gDbIDZADMbYDbAbICZ2Q1YkiQ3YPatZw56I+MNCbNX0AbYALMBZjbAbIDZADOzG7AkSW7A7FvPHPv59F/qYvYK2gAbYDbAzAaYDTAbYAPM7AYsSZIbsCcM33rm3M9n9f9XgCdg9gqaDTD7fBpgZgNsgA0wG2BmN2BJkuQG7AnYEzD7lj6zV9BsgNnn0wAzG2B/wPn9sAFmdgOWJMkNmFP/9iNPFOwNDbNX0AbYALMBNsBsgP1ADDD7vBpgZjdgSZLcgNkTMGd8/kb7PHriZa+g/UAMsN+XATbAzAbYABtgNsDMbsCSJMkN2BOwJ2Cfp2GfYH0emb2C9gemP/B8ngwwswH2B6YBZgPs88jsBixJkhuwJxZPHOwJ2OeRvYJmA8w+Tz6PzAbYH5j+wGMDzOwGLEmS3IA9sXjiYP8lLGavoNkAswE2wMwG2AAbYDbAzG7AkiTJDdgTsCdg3vm8eiJm9graABtgNsB+P2yA2QCzATbAzG7AkiS5AbMnDPb59MaG2Stof8AZYDbAzAaYDTD7fBpgZjdgSZLcgD1heALmuM9n9f+XgCdi9gqaDTD7fBpgZgNsgA0wG2BmN2BJkuQG7AnYEwVX+3z2/i/L+f2xV9BsgNkAG2BmA2yADTAbYGY3YEmS5Absb0fyrWg+8QTsCZTZK2gDbIDZADMbYDbAbICZ2Q1YkiQ3YPataI75PPp5MXsFbYANMBtgZgPMBpgNMDO7AUuS5AbMvhXN834e/XyYvYI2wAaYDTCzAWYDzAaYmd2AJUlyA2bfimZmZq+gDbABZmY2wGyAmZnZDViSJDdgnuNb0Z6ImZm9gjbABpiZ2QCzAWZmZjdgSZLcgDnoW9GeiJmZvYI2wAaYmdkAswH2+2JmdgOWJMkNmD0R+/3524iY2StoA2yADTAzG2A2wGyAmd2AJUmSGzDP/0T8Y7+//d+fnw+zV9BsgA2wAWZmA8wG2AAzsxuwJElyA+aZn4jTv/Vb+tutfH6ZvYL2AzHABtgAM7MBZgNsgJnZDViSJLkBc/QT8eBPzKUnWt8CZ2avoNkAG2BmNsBsgA2wzyMzuwFLkuQGzJ6Ic+3zx8xeQbNBNMDMbIDZABtgZnYDliRJbsA807d6L+/w/5IXM3sFzQbYADOzAWYDzAaYmd2AJUlyA2ZPyJ5wmZm9gmYDbICZ2QCzATbAzMxuwJIkuQFz6BNz7yfowj+P3x8zewXNBtgAM7MBZjbAzMxuwJIkuQEzMzOzV9DMzMwGmJmZmd2AJUlyA2ZmZmavoJmZmQ0wMzOzG7AkSXIDZmZm9gqamZmZDTAzM7MbsCRJcgNmZmb2CpqZmZkNMDMzsxuwJEluwMzMzOwVNDMzswFmZmZmN2BJktyAmZmZ2StoZmZmA8zMzMxuwJIkuQEzMzN7Bc3MzMwGmJmZ2Q1YkiS5ATMzM3sFzczMzAaYmZnZDViSJLkBMzMzewXNzMxsgP1AmJmZ3YAlSXIDZmZmZq+gmZmZDTAzMzO7AUuS5AbMzMzMXkEzMzMbYGZmZjdgSZLkBszMzOwVNDMzMxtgZmZmN2BJkuQGzMzM7BU0MzMzG2BmZmY3YEmS3ID9GwkzM7NX0MzMzAaYmZmZ3YAlSXIDZmZmZq+gmZmZDTAzMzO7AUuS5AbMzMzsFbQfCDMzswFmZmZ2A5YkSW7AzMzMXkEzMzOzAWZmZnYDliRJbsDMzMxeQTMzM7MfADMzsxuwJEluwMzMzOwVNDMzswFmZmZmN2BJktyAmZmZ2StoZmZmA8zMzMzev0uS1Kk3sPBP4alonbIAAAAASUVORK5CYII=");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  /* iki maske: (1) kitin imleç dairesi + (2) DALGA — arada bir soldan başlayarak
     yavaşça tüm bayrak tam renge döner, sonra yine soldan başlayarak eski
     soluk hâline döner (mask-composite add). Teknik: hero'nun 5 katı genişlikte
     bir bant (5× genişlik; ortası opak ≈ hero, kenarları 30° eğik + yumuşak) soldan sağa tek
     seferde kayar: önce sağ kenarı soldan girip kaplar, sonra sol kenarı soldan
     girip açar. */
  -webkit-mask-image:
    radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) - var(--hero-feather)), transparent var(--hr)),
    linear-gradient(var(--dalga-aci), transparent 0 34%, #000 38% 62%, transparent 66% 100%);
  mask-image:
    radial-gradient(circle at var(--hx) var(--hy), #000 calc(var(--hr) - var(--hero-feather)), transparent var(--hr)),
    linear-gradient(var(--dalga-aci), transparent 0 34%, #000 38% 62%, transparent 66% 100%);
  --dalga-aci: 120deg; /* kenar 30° eğik; mobilde dik (dar+uzun hero'da taşma olmasın) */
  -webkit-mask-size: auto, 500% 100%;
  mask-size: auto, 500% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  animation: mt23-dalga-bayrak 11s linear infinite;
}
/* 7.5s bekleme (bant tamamen sol dışında; 5× genişlik: 30° eğik kenar dahil
   hero'ya taşmaz) + 3.5s geçiş: soldan sağa tek geçiş, ilk yarısı kaplar
   (tam kırmızı), ikinci yarısı soldan açar */
@keyframes mt23-dalga-bayrak {
  0%, 68.2% { -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; }
  100%    { -webkit-mask-position: 0 0, 0% 0; mask-position: 0 0, 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-decor::before { animation: none; } }
.hero[data-pointer] { --hr: 170px; --hero-feather: 40px; }
.hero.is-pulse { --hr: 700px; --hero-feather: 120px; }
/* BAYRAK İPLERİ: köşeden ortaya sarkan ip + ipte mini bayraklar */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  top: 54px;
  width: 52%;
  height: 18px;
  background:
    linear-gradient(180deg, var(--crimson) 0 2px, transparent 2px) 0 0 / 100% 2px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") 0 3px / 20px 13px repeat-x;
  background-size: 100% 2px, 40px 13px;
  pointer-events: none;
}
.hero::before { left: -1%; transform: rotate(3deg); transform-origin: 0 0; }
.hero::after { right: -1%; transform: rotate(-3deg); transform-origin: 100% 0; }

/* BALONLAR: oval kâğıt balon (düz renk + kontur + beyaz parlama); imleçten
   kaçış vektörü (--rx/--ry, repel) translate ile */
.blob {
  position: absolute;
  border: 2px solid var(--crimson);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(ellipse 22% 16% at 32% 22%, rgba(255, 255, 255, .85) 96%, transparent), var(--red);
  translate: var(--rx, 0px) var(--ry, 0px);
  transition: translate .6s cubic-bezier(.2, .8, .3, 1);
  animation: float 5s ease-in-out infinite;
}
/* DEMET: ana kırmızı balon + box-shadow ikizleri (mavi/sarı/yeşil, her biri
   renk + kontur katmanı); ipler ve düğüm ::after'daki SVG */
.blob-1 {
  right: 10%; top: 5%;
  width: 54px; height: 66px;
  box-shadow:
    62px 26px 0 -2px var(--sky), 62px 26px 0 0 var(--crimson),
    -58px 34px 0 -4px var(--mustard), -58px 34px 0 -2px var(--crimson),
    10px 74px 0 -8px var(--pine), 10px 74px 0 -6px var(--crimson);
}
.blob-1::after {
  content: "";
  position: absolute;
  left: -70px; top: 60px;
  width: 200px; height: 112px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 112%22%3E%3Cg stroke=%22%237d0a12%22 stroke-width=%221.6%22 fill=%22none%22%3E%3Cline x1=%2297%22 y1=%226%22 x2=%2297%22 y2=%22100%22/%3E%3Cline x1=%22159%22 y1=%2232%22 x2=%2297%22 y2=%22100%22/%3E%3Cline x1=%2239%22 y1=%2236%22 x2=%2297%22 y2=%22100%22/%3E%3Cline x1=%22107%22 y1=%2272%22 x2=%2297%22 y2=%22100%22/%3E%3C/g%3E%3Ccircle cx=%2297%22 cy=%22100%22 r=%223.2%22 fill=%22%237d0a12%22/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
/* küçük çift: sol alt, mavi + sarı */
.blob-2 {
  left: 2%; bottom: 5%;
  width: 34px; height: 42px;
  background: radial-gradient(ellipse 22% 16% at 32% 22%, rgba(255, 255, 255, .85) 96%, transparent), var(--sky);
  box-shadow: 26px 10px 0 -3px var(--mustard), 26px 10px 0 -1px var(--crimson);
  animation-delay: -2.2s;
}
.blob-2::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 2px; height: 28px;
  background: var(--crimson);
  box-shadow: 26px 8px 0 0 var(--crimson);
}

/* ---------- İmleç: KONFETİ (--hero-fx: trail) ----------
   Gezdikçe her 28 px'de bir renkli kâğıt parçası düşer (renk nth-of-type, yön
   data-side), düşerken döner ve solar. Tıklayınca (.is-pulse) tıklanan noktadan
   sekiz parça saçılır. */
/* renk = kitin her ize bastığı --n sayacından (mod 4): dört renkli şerit, hücre
   kaydırma. nth-of-type KULLANILMAZ — eski izler silinince sıra kayıyor, mevcut
   parçaların rengi değişiyordu (renk titremesi). */
.hero-trace {
  width: 7px; height: 11px;
  border-radius: 1.5px;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--mustard) 25% 50%, var(--sky) 50% 75%, var(--pine) 75%) no-repeat;
  background-size: 400% 100%;
  background-position-x: calc(mod(var(--n, 0), 4) * -33.3334%);
  rotate: var(--ang, 0deg);
  animation: mt23-konfeti 1.5s ease-in forwards;
}
.hero-trace[data-side="l"] { animation-name: mt23-konfeti-l; }
@keyframes mt23-konfeti {
  0%   { translate: -50% -50%; opacity: 1; transform: rotate(0); }
  100% { translate: calc(-50% + 14px) calc(-50% + 64px); opacity: 0; transform: rotate(300deg); }
}
@keyframes mt23-konfeti-l {
  0%   { translate: -50% -50%; opacity: 1; transform: rotate(0); }
  100% { translate: calc(-50% - 16px) calc(-50% + 60px); opacity: 0; transform: rotate(-320deg); }
}
.hero-decor::after {
  content: "";
  position: absolute;
  left: var(--px); top: var(--py);
  width: 7px; height: 11px;
  margin: -6px 0 0 -4px;
  border-radius: 1.5px;
  background: var(--red);
  box-shadow:
    -22px -18px 0 var(--mustard), 24px -14px 0 var(--sky), -18px 20px 0 var(--pine),
    22px 18px 0 var(--red), 0 -28px 0 var(--pine), -30px 4px 0 var(--sky), 30px 2px 0 var(--mustard);
  opacity: 0;
  z-index: 3;
}
.hero.is-pulse .hero-decor::after { animation: mt23-patlama .7s ease-out; }
@keyframes mt23-patlama {
  0%   { opacity: 1; scale: .2; rotate: 0deg; }
  100% { opacity: 0; scale: 1.9; rotate: 70deg; }
}


/* KUTLAMA PANKARTI: iki bayrak ipinin birleştiği noktadan sarkan KORDON çerçeveli
   beyaz kart — yazı temanın kendisinden gelir (content), site metinlerine
   dokunmaz; tema takvimle açılınca gelir, kapanınca gider. Yazı, kitin bastığı
   `<html data-occasion>`'a göre GÜNE ÖZGÜ (yalnız Türkçe, kullanıcı kararı);
   attribute yoksa (yalnız `?t=bayram`) genel kutlama. */
html[data-occasion="23-nisan"] .hero-in::before { content: "23 Nisan Ulusal Egemenlik ve Çocuk Bayramınız Kutlu Olsun"; }
html[data-occasion="19-mayis"] .hero-in::before { content: "19 Mayıs Atatürk'ü Anma, Gençlik ve Spor Bayramınız Kutlu Olsun"; }
html[data-occasion="30-agustos"] .hero-in::before { content: "30 Ağustos Zafer Bayramınız Kutlu Olsun"; }
html[data-occasion="29-ekim"] .hero-in::before { content: "29 Ekim Cumhuriyet Bayramınız Kutlu Olsun"; }
.hero-in::before {
  content: "Bayramınız Kutlu Olsun";
  position: absolute;
  left: 50%; top: -80px;
  transform: translateX(-50%);
  transform-origin: 50% -12px;
  width: max-content;
  max-width: min(520px, 90vw);
  padding: 11px 24px 12px;
  /* TÖREN KORDONU: kenarı kırmızı-beyaz çapraz çizgili ip, içi beyaz, lacivert yazı */
  background: #fff;
  color: var(--navy);
  border: 7px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #e30a17 0 5px, #fff 5px 10px) 7;
  box-shadow: 0 0 0 1.5px var(--navy), 0 5px 0 1.5px rgba(43, 45, 74, .18);
  font: 800 1rem/1.35 var(--font-body);
  letter-spacing: .02em;
  text-align: center;
  animation: mt23-pankart 4s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
/* askı ipleri: pankartın iki üst köşesinden ip düğümüne (üstte ortada) */
.hero-in::after {
  content: "";
  position: absolute;
  left: 50%; top: -92px;
  width: 80px; height: 14px;
  margin-left: -40px;
  background:
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--crimson) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat 0 0 / 50% 100%,
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--crimson) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat 100% 0 / 50% 100%;
  z-index: 2;
  pointer-events: none;
}
@keyframes mt23-pankart {
  0%, 100% { transform: translateX(-50%) rotate(-1.2deg); }
  50%      { transform: translateX(-50%) rotate(1.2deg); }
}
.hero.is-bold .hero-in::before { box-shadow: 0 0 0 1.5px #fff, 0 5px 0 1.5px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .hero-in::before { animation: none; } }

/* Hero dalgası = tribün korkuluğu: lacivert çizgi */
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; line-height: 0; z-index: 1; background: var(--navy); }
.hero-wave svg { display: none; }

/* .is-bold: GECE ŞENLİĞİ hero — lacivert gök, beyaz metin, tribün mozaiği ışıklı */
.hero.is-bold {
  background-color: var(--navy);
  color: #fff;
}
.hero.is-bold::before, .hero.is-bold::after {
  background:
    linear-gradient(180deg, #fff 0 2px, transparent 2px) 0 0 / 100% 2px no-repeat,
    linear-gradient(to bottom right, transparent 49.5%, #fff 50%) 0 3px / 20px 13px repeat-x,
    linear-gradient(to bottom left, transparent 49.5%, #fff 50%) 10px 3px / 20px 13px repeat-x;
  background-size: 100% 2px, 20px 13px, 20px 13px;
}
.hero.is-bold .hero-sub { color: rgba(255, 255, 255, .88); }
.hero.is-bold h1, .hero.is-bold h1 em { color: #fff; }
.hero.is-bold .hero-badge { background: #fff; color: var(--navy); border-color: #fff; }
.hero.is-bold .btn-primary { background: var(--mustard); color: var(--navy); border-color: var(--mustard); }
.hero.is-bold .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); box-shadow: none; }
.hero.is-bold .fineprint { color: rgba(255, 255, 255, .8); }
.hero.is-bold .asterisk-link { color: var(--mustard); }
.hero.is-bold .hero-mock-note { background: var(--mustard); color: var(--navy); }
.hero.is-bold .hero-wave { background: #fff; }
html:has(.hero.is-bold:first-of-type) { --bold-fade: #1b2150; } /* maskot şeridi bold zemine boyansın */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--navy);
  box-shadow: var(--hard-sm);
  color: var(--navy);
  font-weight: 800;
  font-size: .9rem;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 22px;
  transform: rotate(-1deg);
}
.hero-sub { color: var(--ink-soft); font-size: 1.12rem; margin: 20px 0 28px; max-width: 520px; }
@media (prefers-reduced-motion: reduce) { .blob, .doodle { animation: none; } }


/* Tarayıcı maketi = STADYUM EKRANI (skorbord): lacivert çerçeve, üst şeritte
   LED noktaları, altında "CANLI" etiketi */
.hero-mock { position: relative; }
.browser {
  background: #fff;
  border: 3px solid var(--navy);
  border-radius: 8px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--navy), 0 12px 0 rgba(27, 33, 80, .18);
  overflow: hidden;
  transform: rotate(.6deg);
  position: relative;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: var(--navy);
  /* LED sırası */
  background-image: radial-gradient(circle 1.5px at 50% 50%, rgba(255, 255, 255, .35) 1.2px, transparent 2px);
  background-size: 8px 8px;
}
.b-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px rgba(227, 10, 23, .8); }
.b-dot:nth-child(2) { background: var(--mustard); box-shadow: 0 0 6px rgba(255, 201, 60, .8); }
.b-dot:nth-child(3) { background: var(--pine); box-shadow: 0 0 6px rgba(47, 166, 108, .8); }
.b-url {
  margin-left: 10px;
  background: #fff;
  border-radius: 4px;
  padding: 4px 14px;
  font: 800 .78rem/1 var(--font-body);
  color: var(--navy);
  flex: 1;
  text-align: center;
}
.browser-body { padding: 0 0 16px; }
.m-ticker {
  overflow: hidden;
  background: var(--navy);
  color: var(--mustard);
  font: 800 .78rem/1 var(--font-body);
  padding: 8px 0;
  white-space: nowrap;
  border-top: 2px solid rgba(255, 255, 255, .2);
}
.m-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 18px;
  background: var(--skylight);
  margin: 14px 16px;
  border-radius: 6px;
}
.m-hero-art { font-size: 3rem; animation: float 4s ease-in-out infinite; }
.m-line { display: block; height: 10px; border-radius: 3px; background: #dbe6f3; }
.m-line-lg { width: 82%; height: 14px; background: #c5d5ea; }
.m-btn { width: 92px; height: 26px; border-radius: 4px; background: var(--red); box-shadow: 0 3px 0 rgba(43, 45, 74, .2); margin-top: 4px; }
.m-card {
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--hard-sm);
}
.m-tag { align-self: flex-start; font: 800 .62rem/1 var(--font-body); color: #fff; background: var(--pine); padding: 4px 8px; border-radius: 3px; }
.m-cal { display: flex; flex-direction: column; align-items: center; align-self: flex-start; background: var(--red); border-radius: 4px; padding: 4px 9px; }
.m-cal b { font: 400 .9rem/1.1 var(--font-head); color: #fff; }
.m-cal i { font: 800 .5rem/1 var(--font-body); font-style: normal; color: rgba(255, 255, 255, .85); letter-spacing: .1em; }
.m-ph { width: 34px; height: 34px; display: grid; place-items: center; background: var(--lemon); border-radius: 4px; font-size: .95rem; }
/* canlı rozeti = CANLI LED etiketi */
.hero-mock-note {
  position: absolute;
  right: -6px;
  bottom: -24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  border-radius: 4px;
  box-shadow: 0 4px 0 rgba(27, 33, 80, .25);
  padding: 9px 16px;
  font: 800 .78rem/1.2 var(--font-body);
  letter-spacing: .06em;
  color: #fff;
  transform: rotate(-1.4deg);
}
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px rgba(227, 10, 23, .9); animation: pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 10, 23, .7); }
  60%      { box-shadow: 0 0 0 7px rgba(227, 10, 23, 0); }
}


/* ---------- Kayan şerit: TRİBÜNDE SALLANAN EL BAYRAKLARI (korundu) ---------- */
.strip {
  position: relative;
  background: var(--skylight);
  padding: 30px 0 22px;
  overflow: hidden;
  border-block: 1.5px solid rgba(63, 143, 224, .35);
}
.strip-track { gap: 26px; align-items: flex-start; }
/* pastiller = el bayrakları: direk (::before) + ay-yıldızlı kırmızı bayrak;
   her biri farklı fazda sallanır (tribün dalgası) */
.strip-track span {
  flex: none;
  position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22200 180 640 440%22%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 11px 50% / 15px auto, var(--red);
  color: #fff;
  font: 800 .86rem/1 var(--font-body);
  padding: 11px 16px 11px 32px;
  border-radius: 0 3px 3px 0;
  box-shadow: 3px 3px 0 rgba(227, 10, 23, .18);
  white-space: nowrap;
  margin-bottom: 16px;
  transform-origin: 0 100%;
  animation: mt23-tribun 1.9s ease-in-out infinite;
}
.strip-track span::before {
  content: "";
  position: absolute;
  left: -4px; top: -8px; bottom: -16px;
  width: 4px;
  background: var(--crimson);
  border-radius: 2px;
}
.strip-track span:nth-child(4n+2) { animation-delay: -.45s; }
.strip-track span:nth-child(4n+3) { animation-delay: -.9s; }
.strip-track span:nth-child(4n)   { animation-delay: -1.35s; }
@keyframes mt23-tribun {
  0%, 100% { transform: rotate(-5deg) skewY(-2deg); }
  50%      { transform: rotate(4deg) skewY(2deg); }
}
@media (prefers-reduced-motion: reduce) { .strip-track span { animation: none; } }


/* ---------- Özellik kartları: TRİBÜN BLOĞU ----------
   Beyaz blok; üst kenarı KALDIRILMIŞ KART SIRASI (::before — blok başına
   renk, kartlar hafif farklı yükseklikte "elle tutulmuş" hissi), altında
   korkuluk çizgisi; hover'da kart sırası dalgalanır. */
.fcard {
  --fc: var(--sky);
  --fc2: var(--mustard);
  position: relative;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 6px;
  box-shadow: var(--hard);
  padding: 44px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fcard::before {
  content: "";
  position: absolute;
  top: -10px; left: 10px; right: 10px;
  height: 22px;
  background:
    linear-gradient(180deg, var(--fc) 0 100%) 0 2px / 14px 18px repeat-x,
    linear-gradient(180deg, var(--fc2) 0 100%) 16px 0 / 14px 18px repeat-x,
    linear-gradient(180deg, #fff 0 100%) 32px 4px / 14px 18px repeat-x;
  background-repeat: repeat-x;
  background-size: 48px 20px, 48px 20px, 48px 20px;
  filter: drop-shadow(0 1.5px 0 rgba(43, 45, 74, .45));
  pointer-events: none;
}
/* korkuluk çizgisi */
.fcard::after {
  content: "";
  position: absolute;
  top: 24px; left: 0; right: 0;
  height: 2px;
  background: var(--navy);
  pointer-events: none;
}
.fcard:nth-child(4n+2) { --fc: var(--mustard); --fc2: var(--pine); }
.fcard:nth-child(4n+3) { --fc: var(--pine); --fc2: var(--blush); }
.fcard:nth-child(4n+4) { --fc: var(--blush); --fc2: var(--sky); }
.fcard h3 { font-size: 1.1rem; font-family: var(--font-head); font-weight: 400; letter-spacing: .01em; }
.fcard p { color: var(--ink-soft); font-size: .93rem; }
.fcard .btn { margin-top: 6px; align-self: center; }
.deck:not(.deck-ready) .fcard { transition: transform .18s ease, box-shadow .18s ease; }
.deck:not(.deck-ready) .fcard:hover { transform: translateY(-4px); box-shadow: 0 9px 0 rgba(43, 45, 74, .14); }
.deck:not(.deck-ready) .fcard:hover::before { animation: mt23-kart-dalga .6s ease; }
@keyframes mt23-kart-dalga {
  0%, 100% { background-position: 0 2px, 16px 0, 32px 4px; }
  50%      { background-position: 0 0, 16px 4px, 32px 1px; }
}
.deck:not(.deck-ready) .fcard-cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 300px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 30px;
  row-gap: 4px;
}
.deck-dot.is-active { background: var(--red); }


/* ---------- Kart sahneleri: TRİBÜN ZEMİNİ — kart tonunda karolar (derzli) ---------- */
.fcard-scene {
  height: 185px;
  flex: none;
  border: 2px solid var(--navy);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, .8) 12px 14px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, .8) 12px 14px),
    color-mix(in srgb, var(--fc, var(--sky)) 18%, #fff);
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
}

/* 1 — Duyuru & Blog: tribün anonsu */
.sc-duyuru .sc-mega { position: absolute; left: 20px; top: 50%; margin-top: -22px; font-size: 2rem; transform-origin: 70% 80%; animation: megawig 3.8s ease-in-out infinite; }
@keyframes megawig { 0%, 20%, 100% { transform: rotate(-8deg); } 8% { transform: rotate(10deg); } 14% { transform: rotate(-2deg); } }
.sc-duyuru .sc-ring { position: absolute; left: 48px; top: 50%; margin-top: -34px; width: 22px; height: 22px; border: 2px solid var(--navy); border-radius: 50%; opacity: 0; animation: ring 3.8s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.4); opacity: 0; } 6% { opacity: .8; } 24% { transform: scale(2.6); opacity: 0; } 25%, 100% { opacity: 0; } }
.sc-duyuru .sc-note { position: absolute; left: 78px; right: 16px; top: 50%; transform: translateY(-52%); background: #fff; border: 2px solid var(--navy); border-radius: 4px; padding: 15px 13px 17px; box-shadow: var(--hard-sm); }
.sc-duyuru .l { display: block; height: 8px; border-radius: 3px; background: #dbe6f3; margin-bottom: 9px; width: 0; animation: typeline 3.8s ease-out infinite; }
@keyframes typeline { 0% { width: 0; } 16%, 100% { width: var(--w); } }
/* damga = kaldırılmış kırmızı kart */
.sc-stamp { position: absolute; right: -12px; bottom: -13px; background: var(--red); color: #fff; padding: 5px 10px; border-radius: 3px; border: 2px solid var(--navy); font: 800 .68rem/1 var(--font-body); animation: stamp 3.8s ease infinite; }
@keyframes stamp { 0%, 34% { transform: rotate(-9deg) scale(0); opacity: 0; } 41% { transform: rotate(-9deg) scale(1.25); opacity: 1; } 47%, 94% { transform: rotate(-9deg) scale(1); opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 0; } }

/* 2 — Galeri: tribünde kaldırılan fotoğraf kartları */
.sc-galeri .ph { position: absolute; left: 50%; top: 54%; width: 64px; height: 76px; background: #fff; border: 2px solid var(--navy); border-radius: 3px; padding: 3px 3px 14px; box-shadow: var(--hard-sm); opacity: 0; animation: dealph 4.2s ease infinite; }
.sc-galeri .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.sc-galeri .ph::after { content: ""; position: absolute; bottom: 4px; left: 8px; right: 8px; height: 6px; background: var(--mustard); border-radius: 3px; }
@keyframes dealph { 0% { transform: translate(40px, -150px) rotate(35deg); opacity: 0; } 7% { opacity: 1; } 15%, 90% { transform: translate(calc(-50% + var(--x)), -50%) rotate(var(--r)); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), -50%) rotate(var(--r)); opacity: 0; } }

/* 3 — Takvim: skorbord takvimi */
.sc-takvim .cal { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 98px; background: #fff; border: 2px solid var(--navy); border-radius: 6px; overflow: hidden; box-shadow: var(--hard-sm); text-align: center; }
.sc-takvim .cal b { display: block; background: var(--navy); color: var(--mustard); font: 800 .6rem/1 var(--font-body); letter-spacing: .14em; padding: 6px 0; }
.sc-takvim .cal i { display: block; font: 400 2rem/1.25 var(--font-head); font-style: normal; color: var(--red); padding: 8px 0 10px; animation: datebounce 3.6s ease infinite; }
@keyframes datebounce { 0%, 42%, 58%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sc-takvim ellipse { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 330; stroke-dashoffset: 330; animation: drawcirc 3.6s ease infinite; }
@keyframes drawcirc { 0%, 12% { stroke-dashoffset: 330; opacity: 1; } 46%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 4 — Kampanya: skorbord + yağan konfeti */
.sc-popup .mini-browser { position: absolute; inset: 18px 20px 14px; background: #fff; border: 2px solid var(--navy); border-radius: 6px; overflow: hidden; }
.sc-popup .mb-bar { display: block; height: 16px; background: var(--navy); }
.sc-popup .mb-dim { position: absolute; inset: 16px 0 0; background: rgba(27, 33, 80, .3); opacity: 0; animation: dim 4s ease infinite; }
@keyframes dim { 0%, 16% { opacity: 0; } 28%, 88% { opacity: 1; } 100% { opacity: 0; } }
.sc-popup .mb-pop { position: absolute; left: 50%; top: 56%; width: 70%; background: var(--mustard); border: 2px solid var(--navy); border-radius: 4px; box-shadow: var(--hard-sm); padding: 10px; text-align: center; transform: translate(-50%, -50%) scale(0); animation: popin 4s cubic-bezier(.2, 1.5, .4, 1) infinite; }
.sc-popup .mb-pop b { display: block; font: 400 1.15rem/1.2 var(--font-head); color: var(--red); }
.sc-popup .mb-pop i { font: 800 .68rem/1.4 var(--font-body); font-style: normal; color: var(--navy); }
@keyframes popin { 0%, 22% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 36%, 88% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.sc-popup .conf { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 1.5px; opacity: 0; animation: conf 4s ease-in infinite; }
.sc-popup .c1 { left: 18%; background: var(--mustard); animation-delay: .5s; }
.sc-popup .c2 { left: 34%; background: var(--sky); animation-delay: .66s; }
.sc-popup .c3 { left: 52%; background: var(--red); animation-delay: .56s; }
.sc-popup .c4 { left: 68%; background: var(--pine); animation-delay: .74s; }
.sc-popup .c5 { left: 84%; background: var(--blush); animation-delay: .6s; }
@keyframes conf { 0%, 6% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 52% { transform: translateY(190px) rotate(340deg); opacity: 1; } 53%, 100% { transform: translateY(190px) rotate(340deg); opacity: 0; } }

/* 5 — Panel */
.sc-panel .pnl { position: absolute; left: 16px; top: 52%; transform: translateY(-50%); width: 43%; background: #fff; border: 2px solid var(--navy); border-radius: 6px; padding: 13px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--hard-sm); }
.sc-panel .tgl { position: relative; width: 42px; height: 21px; border: 2px solid var(--navy); border-radius: 4px; background: #fff; animation: tglbg 4s step-end infinite; }
.sc-panel .tgl::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 13px; height: 13px; border-radius: 2px; background: var(--red); animation: tglknob 4s ease infinite; }
@keyframes tglbg { 0%, 16% { background: #fff; } 20%, 92% { background: var(--sage); } 100% { background: #fff; } }
@keyframes tglknob { 0%, 14% { transform: translateX(0); } 22%, 90% { transform: translateX(20px); } 100% { transform: translateX(0); } }
.sc-panel .sld { position: relative; height: 12px; border: 2px solid var(--navy); border-radius: 3px; overflow: hidden; background: #fff; }
.sc-panel .sld i { position: absolute; inset: 0; width: 0; background: var(--sky); animation: sldfill 4s ease infinite; }
@keyframes sldfill { 0%, 26% { width: 0; } 46%, 92% { width: 78%; } 100% { width: 0; } }
.sc-panel .sv { align-self: flex-start; font: 800 .66rem/1 var(--font-body); background: var(--red); color: #fff; border: 2px solid var(--navy); border-radius: 3px; padding: 5px 9px; box-shadow: 0 3px 0 rgba(43, 45, 74, .3); animation: svpress 4s ease infinite; }
@keyframes svpress { 0%, 52% { transform: none; box-shadow: 0 3px 0 rgba(43, 45, 74, .3); } 58% { transform: translateY(3px); box-shadow: 0 0 0 rgba(43, 45, 74, .3); } 64%, 100% { transform: none; box-shadow: 0 3px 0 rgba(43, 45, 74, .3); } }
.sc-panel .mini-site { position: absolute; right: 16px; top: 52%; transform: translateY(-50%); width: 38%; height: 70%; background: #fff; border: 2px solid var(--navy); border-radius: 6px; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.sc-panel .ms-head { height: 18px; border-radius: 3px; background: #dbe6f3; animation: mshead 4s step-end infinite; }
@keyframes mshead { 0%, 62% { background: #dbe6f3; } 66%, 96% { background: var(--mustard); } 100% { background: #dbe6f3; } }
.sc-panel .ms-l { height: 7px; border-radius: 3px; background: #dbe6f3; }
.sc-panel .ms-check { position: absolute; right: 9px; bottom: 7px; font: 800 1rem/1 var(--font-body); color: var(--pine); animation: pop 4s ease infinite; }

/* 6 — Her ekranda */
.sc-ekran .dev { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--navy); border-radius: 6px; box-shadow: var(--hard-sm); display: flex; flex-direction: column; gap: 7px; padding: 10px; width: 170px; height: 104px; overflow: hidden; animation: devmorph 5.4s ease infinite; }
@keyframes devmorph { 0%, 24% { width: 170px; height: 104px; border-radius: 6px; } 33%, 57% { width: 118px; height: 124px; border-radius: 9px; } 66%, 91% { width: 74px; height: 130px; border-radius: 13px; } 100% { width: 170px; height: 104px; border-radius: 6px; } }
.sc-ekran .dev i { display: block; flex: none; border-radius: 3px; background: #dbe6f3; height: 9px; }
.sc-ekran .dev i:first-child { background: var(--red); height: 16px; }
.sc-ekran .dv-check { position: absolute; right: 22%; top: 20px; font: 800 1.05rem/1 var(--font-body); color: var(--pine); animation: pop 5.4s ease infinite; }

/* 7 — CTA kartı: 0₺ kaldırılmış SARI KART üstünde */
.fcard-cta { background: var(--lemon); overflow: hidden; }
.sc-cta { display: grid; place-items: center; }
.sc-cta .big { font-size: 3.2rem; animation: float 3s ease-in-out infinite; }
.sc-cta .zero { position: absolute; right: 18%; bottom: 14px; width: 54px; height: 62px; display: grid; place-items: center; border-radius: 4px; background: var(--mustard); border: 2px solid var(--navy); box-shadow: var(--hard-sm); font: 400 1.1rem/1 var(--font-head); color: var(--red); transform: rotate(8deg); }


/* ---------- Vitrin nesneleri ----------
   props: 1=el bayrağı 2=kaldırılmış kart (elle) 3=konfeti tabancası 4=balon demeti */
.prop[data-prop="1"]::before { content: ''; position: absolute; left: 10px; top: 4px; width: 4px; height: 48px; border-radius: 2px; background: var(--crimson); }
.prop[data-prop="1"]::after {
  content: ''; position: absolute; left: 14px; top: 6px; width: 36px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%;
  box-shadow: 2px 2px 0 rgba(43, 45, 74, .2);
  transform-origin: 0 50%;
  animation: mt23-prop-dalga 1.6s ease-in-out infinite;
}
@keyframes mt23-prop-dalga { 0%, 100% { transform: skewY(-5deg) scaleX(1); } 50% { transform: skewY(5deg) scaleX(.94); } }
/* 2 — kaldırılmış kart: mavi kart + altında tutan el (ten rengi yerine lacivert eldiven) */
.prop[data-prop="2"]::before {
  content: ''; position: absolute; left: 12px; top: 4px; width: 32px; height: 38px;
  background: var(--sky); border: 2px solid var(--navy); border-radius: 3px;
  box-shadow: var(--hard-sm);
  transform: rotate(-8deg); transform-origin: 50% 100%;
  animation: mt23-kart-kaldir 2.6s ease-in-out infinite;
}
.prop[data-prop="2"]::after {
  content: ''; position: absolute; left: 22px; top: 38px; width: 12px; height: 16px;
  background: var(--navy); border-radius: 4px 4px 2px 2px;
}
@keyframes mt23-kart-kaldir { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-3px); } }
/* 3 — konfeti tabancası: sarı koni + fırlayan konfeti */
.prop[data-prop="3"]::before {
  content: ''; position: absolute; left: 8px; top: 22px; width: 34px; height: 26px;
  background: repeating-linear-gradient(-45deg, var(--mustard) 0 5px, var(--red) 5px 10px);
  border: 2px solid var(--navy);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  transform: rotate(-30deg);
}
.prop[data-prop="3"]::after {
  content: ''; position: absolute; left: 38px; top: 6px; width: 6px; height: 9px; border-radius: 1.5px;
  background: var(--sky);
  box-shadow: 8px -4px 0 var(--pine), -6px -6px 0 var(--red), 12px 6px 0 var(--mustard), 2px -12px 0 var(--blush);
  animation: mt23-konfeti-uc 1.8s ease-out infinite;
}
@keyframes mt23-konfeti-uc { 0% { transform: translate(-10px, 10px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(4px, -8px) rotate(60deg); opacity: 0; } }
/* 4 — balon demeti: kırmızı + mavi + sarı, ipleri düğümde */
.prop[data-prop="4"]::before {
  content: ''; position: absolute; left: 16px; top: 2px; width: 22px; height: 28px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle 3px at 32% 24%, rgba(255, 255, 255, .85) 2.6px, transparent 3.4px), var(--red);
  border: 2px solid var(--navy);
  box-shadow: 14px 10px 0 -3px var(--sky), 14px 10px 0 -1px var(--navy), -14px 12px 0 -4px var(--mustard), -14px 12px 0 -2px var(--navy);
  animation: mt23-suzul 3.4s ease-in-out infinite;
}
.prop[data-prop="4"]::after {
  content: ''; position: absolute; left: 26px; top: 30px; width: 2px; height: 22px; background: var(--navy);
  box-shadow: 12px 6px 0 -0px var(--navy), -12px 8px 0 0 var(--navy);
  animation: mt23-suzul 3.4s ease-in-out infinite;
}
@keyframes mt23-suzul { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .prop::before, .prop::after { animation: none !important; } }


/* ---------- Grup kartı: TRİBÜN BLOĞU + kaldırılmış KART etiketi ---------- */
.gcard {
  margin-top: 28px;
  padding: 34px 20px 24px;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 6px;
  box-shadow: var(--hard);
  position: relative;
}
.gcard::before {
  content: "";
  position: absolute;
  top: -8px; left: 10px; right: 10px;
  height: 18px;
  background:
    linear-gradient(180deg, var(--sky) 0 100%) 0 2px / 14px 16px repeat-x,
    linear-gradient(180deg, var(--mustard) 0 100%) 16px 0 / 14px 16px repeat-x,
    linear-gradient(180deg, var(--pine) 0 100%) 32px 3px / 14px 16px repeat-x;
  background-size: 48px 18px;
  filter: drop-shadow(0 1.5px 0 rgba(43, 45, 74, .45));
  pointer-events: none;
}
.gcard-tab {
  position: absolute;
  top: -22px;
  bottom: auto;
  left: 18px;
  padding: 10px 16px;
  font: 800 .76rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border: 2px solid var(--navy);
  border-radius: 4px;
  box-shadow: var(--hard-sm);
  transform: rotate(-3deg);
  z-index: 1;
}


/* ---------- Dünya kartı = RENKLİ KART: --wc tonunda zemin, üstte kalın kart bandı ---------- */
.wcard {
  --wc: var(--sky);
  background: color-mix(in srgb, var(--wc) 10%, #fff);
  border: 2px solid var(--navy);
  border-top: 10px solid var(--wc);
  border-radius: 6px;
  box-shadow: var(--hard);
  overflow: visible;
  position: relative;
  rotate: .4deg;
  transition: rotate .18s ease, translate .18s ease, box-shadow .18s ease;
}
.wcard:nth-child(2n) { rotate: -.4deg; }
.wcard:nth-child(4n+2) { --wc: var(--mustard); }
.wcard:nth-child(4n+3) { --wc: var(--pine); }
.wcard:nth-child(4n+4) { --wc: var(--blush); }
.wcard:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 9px 0 rgba(43, 45, 74, .14); }
.wcard:not(:has(> .wcard-date)) > .wcard-media { order: -4; }
.wcard:not(:has(> .wcard-date)) > .wcard-ico { order: -3; }
.wcard:not(:has(> .wcard-date)) > h3 { order: -2; }
.wcard:not(:has(> .wcard-date)) > .wcard-tag { order: -1; margin-top: -4px; }
.wcard-ico { background: #fff; border: 2px solid var(--navy); border-radius: 4px; }
.wcard-tag { background: var(--wc); color: var(--navy); padding: 4px 10px; border-radius: 3px; font: 800 .74rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.wcard p { color: var(--ink-soft); }
.wcard-more { font: 800 .9rem/1 var(--font-body); color: var(--red); }
.wcard-media img { border-radius: 0; }
.wcard.is-soft .wcard-tag { background: var(--wc); }
/* .is-bold = TAM RENKLİ KART: zemin --wc, metin lacivert/beyaz */
.wcard.is-bold { --wc-ink: #fff; background: var(--wc); color: var(--wc-ink); border-top-width: 2px; }
.wcard.is-bold:nth-child(4n+2), .wcard.is-bold:nth-child(4n+3) { --wc-ink: var(--navy); }
.wcard.is-bold h3 { color: inherit; }
.wcard.is-bold p { color: inherit; opacity: .92; }
.wcard.is-bold .wcard-tag { background: #fff; color: var(--navy); }
.wcard.is-bold .wcard-ico { background: #fff; }
.wcard.is-bold .wcard-more { color: inherit; }


/* ---------- Split bölümler (paint) ---------- */
.split-copy p:not(.kicker) { color: var(--ink-soft); margin: 16px 0 20px; }
/* tikler = kaldırılmış mini KARTLAR (renk döngüsü) içinde ✓ */
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 26px;
  display: grid; place-items: center;
  border-radius: 3px;
  background: var(--red);
  border: 2px solid var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  transform: rotate(-6deg);
}
.ticks li:nth-child(4n+2)::before { background: var(--sky); transform: rotate(5deg); }
.ticks li:nth-child(4n+3)::before { background: var(--mustard); color: var(--navy); transform: rotate(-4deg); }
.ticks li:nth-child(4n)::before { background: var(--pine); transform: rotate(6deg); }


/* Duyuru akışı maketi = STADYUM SKORBORDU: lacivert çerçeve, beyaz satırlar, LED saat */
.feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--navy);
  border: 3px solid var(--navy);
  border-radius: 8px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--navy), 0 12px 0 rgba(27, 33, 80, .18);
  padding: 14px;
  transform: rotate(-1deg);
}
.feed-item { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 4px; background: #fff; border: 2px solid transparent; }
.feed-item.feed-new { background: var(--mustard); border-color: #fff; animation: feedpop .6s ease both; }
@keyframes feedpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.feed-ava { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 4px; background: var(--skylight); border: 2px solid var(--navy); font-size: 1.2rem; }
.feed-item b { display: block; font-size: .92rem; color: var(--navy); }
.feed-time { flex: none; font: 800 .72rem/1 var(--font-body); color: var(--red); }


/* SERP maketi = beyaz kart; "siz" = kaldırılmış kırmızı kart */
.serp { background: #fff; border: 2px solid var(--navy); border-radius: var(--radius); box-shadow: var(--hard); padding: 22px; transform: rotate(1deg); display: flex; flex-direction: column; gap: 14px; }
.serp-bar { border: 2px solid var(--navy); border-radius: 4px; padding: 10px 18px; font: 800 .9rem/1 var(--font-body); color: var(--navy); background: #fff; }
.serp-hit { padding: 14px 16px; border-radius: 4px; display: flex; flex-direction: column; gap: 5px; border: 2px dashed var(--line); }
.serp-hit-you { background: var(--lemon); border: 2px solid var(--navy); box-shadow: var(--hard-sm); position: relative; }
.serp-url { font: 800 .74rem/1 var(--font-body); color: var(--pine); }
.serp-hit b { font-size: .98rem; color: var(--red); }
.serp-you { position: absolute; top: -14px; right: 14px; background: var(--red); border: 2px solid var(--navy); color: #fff; font: 800 .72rem/1 var(--font-body); font-style: normal; padding: 6px 12px; border-radius: 3px; transform: rotate(3deg); box-shadow: var(--hard-sm); }
.serp-line { display: block; height: 11px; border-radius: 3px; background: #dbe6f3; width: 70%; }


/* ---------- Adımlar: KOREOGRAFİ KARTLARI ----------
   Her adım numarası = çocuğun kaldırdığı renkli KART (1 mavi / 2 sarı / 3 yeşil),
   altında tutan el; kart sırayla kalkar. */
.step { background: #fff; border: 2px solid var(--navy); border-radius: 6px; box-shadow: var(--hard); padding: 30px 26px; position: relative; }
.step:nth-of-type(1) { transform: rotate(-.5deg); }
.step:nth-of-type(3) { transform: rotate(.4deg); }
.step:nth-of-type(5) { transform: rotate(-.3deg); }
.step-no {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px; height: 62px;
  margin: 0 0 22px 4px;
  background: var(--sky);
  border: 2px solid var(--navy);
  border-radius: 4px;
  color: #fff;
  font: 400 1.5rem/1 var(--font-head);
  box-shadow: var(--hard-sm);
  transform: rotate(-6deg);
  transform-origin: 50% 100%;
  animation: mt23-kart-kaldir 3s ease-in-out infinite;
}
/* tutan el: kartın altında lacivert eldiven */
.step-no::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 14px; height: 18px; margin-left: -7px; background: var(--navy); border-radius: 5px 5px 2px 2px; }
.step:nth-of-type(3) .step-no { background: var(--mustard); color: var(--navy); transform: rotate(5deg); animation-delay: -1s; }
.step:nth-of-type(5) .step-no { background: var(--pine); transform: rotate(-4deg); animation-delay: -2s; }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: .95rem; }
.step-arrow { align-self: center; font: 800 1.6rem/1 var(--font-body); color: var(--red); }
@media (prefers-reduced-motion: reduce) { .step-no { animation: none; } }


/* ---------- Fiyat: MOZAİK PANO ----------
   Kırmızı kart mozaiği (derzli) içinde beyaz ay-yıldız; altında beyaz pano, 0₺
   dev kırmızı; rozet = kaldırılmış sarı kart. */
.price-card {
  width: min(460px, 100%);
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--navy);
  border-radius: 6px;
  box-shadow: var(--hard);
  padding: 156px 34px 40px;
  text-align: center;
  position: relative;
  transform: rotate(-.5deg);
  overflow: hidden;
}
.price-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 130px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, .7) 12px 14px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 255, 255, .7) 12px 14px),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22200 180 640 440%22%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 50% 50% / auto 96px,
    var(--red);
  border-bottom: 2px solid var(--navy);
}
.price-head { margin-bottom: 24px; }
.price-badge {
  display: inline-block;
  background: var(--mustard);
  border: 2px solid var(--navy);
  color: var(--navy);
  font: 800 .76rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 4px;
  box-shadow: var(--hard-sm);
  transform: rotate(-2deg);
  margin-bottom: 18px;
}
.price-big { font: 400 3.6rem/1.2 var(--font-head); color: var(--red); }
.price-card .hero-sub, .price-card p { color: var(--ink-soft); }
.price-card .ticks { text-align: left; margin-bottom: 28px; }
.price-card .fineprint { max-width: none; }


/* ---------- SSS: KART ÇEVİRME ----------
   Kapalı soru = kaldırılmış KIRMIZI KART (beyaz yazı); açılınca kart ÇEVRİLİR:
   beyaza döner, yazı lacivert; sağdaki mini kart "+" → "×" döner. */
.faq details {
  background: var(--red);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 0 22px;
  box-shadow: var(--hard-sm);
  overflow: hidden;
  transition: background .3s ease, color .3s ease, transform .3s ease;
  transform-origin: 50% 0;
}
.faq details:nth-child(4n+2) { background: var(--sky); }
.faq details:nth-child(4n+3) { background: var(--pine); }
.faq details:nth-child(4n) { background: var(--mustard); color: var(--navy); }
.faq details[open] { background: #fff; color: var(--ink); animation: mt23-sss-cevir .5s ease; }
@keyframes mt23-sss-cevir { 0% { transform: perspective(700px) rotateX(-80deg); } 100% { transform: perspective(700px) rotateX(0); } }
.faq summary { list-style: none; cursor: pointer; font-weight: 800; font-family: var(--font-body); padding: 19px 56px 19px 0; position: relative; user-select: none; color: inherit; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  width: 30px; height: 30px;
  margin-top: -15px;
  display: grid; place-items: center;
  border-radius: 3px;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  font: 800 1.1rem/1 var(--font-body);
  transition: transform .3s ease, background .3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq details[open] summary { color: var(--red); }
.faq details p { color: var(--ink-soft); padding: 6px 0 20px; font-size: .96rem; }
@media (prefers-reduced-motion: reduce) { .faq details[open] { animation: none; } }


/* ---------- CTA bandı: GECE STADYUMU — lacivert gök, projektör konileri,
   tribünde ışıklı kart mozaiği (ay-yıldız), iki yanda balon demetleri ---------- */
.cta-band {
  margin: 90px 0 0;
  padding: 110px 0 160px;
  background-color: var(--navy);
  /* yıldız serpintisi */
  background-image:
    radial-gradient(circle 1.4px at 14% 22%, rgba(255, 255, 255, .7) 1px, transparent 2px),
    radial-gradient(circle 1px at 32% 12%, rgba(255, 255, 255, .5) .8px, transparent 1.6px),
    radial-gradient(circle 1.4px at 68% 18%, rgba(255, 255, 255, .6) 1px, transparent 2px),
    radial-gradient(circle 1px at 86% 30%, rgba(255, 255, 255, .45) .8px, transparent 1.6px);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* projektörler: iki köşeden inen düz ışık konileri (yarı saydam düz dolgu) */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 8%, rgba(255, 255, 255, .07) 8% 20%, transparent 20%),
    linear-gradient(-112deg, transparent 0 8%, rgba(255, 255, 255, .07) 8% 20%, transparent 20%);
  pointer-events: none;
}
/* tribün: ışıklı kart mozaiği + ay-yıldız */
.cta-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(27, 33, 80, .9) 12px 14px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(27, 33, 80, .9) 12px 14px),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22200 180 640 440%22%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 50% 50% / auto 96px,
    var(--red);
  border-top: 3px solid #fff;
  pointer-events: none;
}
.cta-in { position: relative; z-index: 1; }
/* iki yanda BALON DEMETLERİ (korunan nesne) */
.cta-in::before, .cta-in::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px; height: 50px;
  margin-top: -70px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: var(--sky);
  border: 2px solid #fff;
  box-shadow: 38px 26px 0 -4px var(--mustard), 38px 26px 0 -2px #fff, -6px 62px 0 -8px var(--pine), -6px 62px 0 -6px #fff, 30px 78px 0 -10px var(--red), 30px 78px 0 -8px #fff;
  animation: float 5s ease-in-out infinite;
  pointer-events: none;
}
.cta-in::before { left: 2%; }
.cta-in::after { right: 6%; transform: scaleX(-1); animation-delay: -2.5s; }
.cta-in h2 { color: #fff; }
.cta-in h2 em { font-style: normal; color: var(--mustard); }
.cta-in p { margin: 14px auto 30px; max-width: 520px; color: rgba(255, 255, 255, .85); font-size: 1.1rem; }


/* ---------- Footer: TRİBÜN SIRALARI + BAYRAK İPİ ---------- */
.footer {
  position: relative;
  background: var(--skylight);
  color: var(--ink);
  padding: 84px 0 40px;
  border-top: 2px solid var(--navy);
}
/* bayrak ipi (korunan nesne): ip + mini ay-yıldızlı bayraklar */
.footer::before {
  content: "";
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 14px;
  background:
    linear-gradient(180deg, var(--crimson) 0 1.5px, transparent 1.5px) 0 0 / 100% 2px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") 0 3px / 16px 10px repeat-x;
  background-size: 100% 2px, 34px 10px;
  pointer-events: none;
}
/* tribün sıraları: üç sıra renkli kart */
.footer::after {
  content: "";
  position: absolute;
  top: 32px; left: 0; right: 0;
  height: 26px;
  background:
    linear-gradient(var(--sky), var(--sky)) 0 0 / 14px 6px repeat-x,
    linear-gradient(var(--mustard), var(--mustard)) 16px 0 / 14px 6px repeat-x,
    linear-gradient(var(--red), var(--red)) 8px 10px / 14px 6px repeat-x,
    linear-gradient(var(--pine), var(--pine)) 24px 10px / 14px 6px repeat-x,
    linear-gradient(var(--blush), var(--blush)) 0 20px / 14px 6px repeat-x,
    linear-gradient(var(--sky), var(--sky)) 16px 20px / 14px 6px repeat-x;
  background-size: 32px 6px;
  opacity: .8;
  pointer-events: none;
}
.footer-in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer .logo-name { color: var(--red); }
.footer-note { max-width: 480px; font-size: .92rem; color: var(--ink-soft); }
.footer-copy { font-size: .8rem; opacity: .7; }


/* ---------- Sayfa başlığı: TRİBÜN PANKARTI ----------
   Beyaz kart pankart (üstünde kaldırılmış kart sırası), iki yanında el bayrağı
   (korunan nesne). */
.page-head { padding: 64px 0 40px; }
.page-head h1 {
  display: inline-block;
  position: relative;
  padding: 26px 34px 20px;
  margin-inline: 40px;
  background:
    linear-gradient(180deg, var(--sky) 0 100%) 0 0 / 14px 8px repeat-x,
    linear-gradient(180deg, var(--mustard) 0 100%) 16px 0 / 14px 8px repeat-x,
    linear-gradient(180deg, var(--pine) 0 100%) 32px 0 / 14px 8px repeat-x,
    linear-gradient(180deg, var(--blush) 0 100%) 48px 0 / 14px 8px repeat-x,
    #fff;
  background-size: 64px 8px, 64px 8px, 64px 8px, 64px 8px, auto;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
  border: 2px solid var(--navy);
  border-radius: 6px;
  box-shadow: var(--hard);
}
.page-head h1::before, .page-head h1::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 30px; height: 40px;
  border-left: 3px solid var(--crimson);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 0 0 / 27px 18px;
  transform-origin: 0 100%;
}
.page-head h1::before { left: -36px; transform: rotate(-10deg); }
.page-head h1::after { right: -36px; transform: rotate(8deg) scaleX(-1); }
.page-head p { color: var(--ink-soft); max-width: 560px; margin-top: 18px; }


.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; padding-bottom: 90px; }
/* Yazı kartı = TRİBÜN BLOĞU: üstte kaldırılmış kart sırası (blok başına renk) */
.post-card {
  --pc: var(--sky);
  --pc2: var(--mustard);
  position: relative;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 6px;
  box-shadow: var(--hard);
  overflow: visible;
  padding: 26px 12px 8px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  rotate: -.4deg;
  transition: rotate .18s ease, translate .18s ease, box-shadow .18s ease;
}
.post-card:nth-child(2n) { rotate: .4deg; }
.post-card:nth-child(4n+2) { --pc: var(--mustard); --pc2: var(--pine); }
.post-card:nth-child(4n+3) { --pc: var(--pine); --pc2: var(--blush); }
.post-card:nth-child(4n+4) { --pc: var(--blush); --pc2: var(--sky); }
.post-card:hover { rotate: 0deg; translate: 0 -5px; box-shadow: 0 10px 0 rgba(43, 45, 74, .14); }
.post-card::before {
  content: "";
  position: absolute;
  top: -9px; left: 10px; right: 10px;
  height: 18px;
  background:
    linear-gradient(180deg, var(--pc) 0 100%) 0 2px / 14px 16px repeat-x,
    linear-gradient(180deg, var(--pc2) 0 100%) 16px 0 / 14px 16px repeat-x,
    linear-gradient(180deg, #fff 0 100%) 32px 3px / 14px 16px repeat-x;
  background-size: 48px 18px;
  filter: drop-shadow(0 1.5px 0 rgba(43, 45, 74, .45));
  z-index: 2;
}
.post-card::after { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: var(--navy); }
.post-cover { height: 200px; border-bottom: 0; border-radius: 3px; overflow: hidden; }
.post-body { padding: 16px 10px 14px; }
.post-date { align-self: flex-start; font: 800 .76rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.post-body h3 { margin: 0; }
.post-body p { color: var(--ink-soft); font-size: .95rem; }
.post-more { font: 800 .9rem/1 var(--font-body); color: var(--red); }
/* Yazı sayfası */
.post { width: min(760px, calc(100% - 48px)); margin-inline: auto; padding: 56px 0 50px; }
.crumb { font-weight: 800; font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.crumb:hover { color: var(--red); }
.post-cover-lg { border: 2px solid var(--navy); border-radius: 6px; box-shadow: var(--hard); overflow: hidden; margin: 6px 0 32px; transform: rotate(-.4deg); }
.post-content p { margin: 0 0 18px; color: var(--ink); }
.post-content h2 { margin: 34px 0 12px; font-size: 1.35rem; }
.post-content li { margin-bottom: 8px; color: var(--ink); }
.post-content strong { color: var(--red); }
.post-note { border: 2px solid var(--navy); border-radius: 4px; background: var(--lemon); padding: 14px 18px; font-size: .9rem; color: var(--ink); margin: 26px 0; box-shadow: var(--hard-sm); }
/* yazı içi CTA = skorbord */
.post-ctabox { margin: 38px 0 10px; background: var(--navy); border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--navy); padding: 28px 26px; text-align: center; color: #fff; }
.post-ctabox h2 { margin: 0 0 8px; font-size: 1.4rem; color: var(--mustard); }
.post-ctabox p { color: rgba(255, 255, 255, .85); margin-bottom: 18px; }


/* ---------- Form temelleri: tribün kayıt kartı ---------- */
.label::before { content: ""; display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; margin-right: 8px; background: var(--red); transform: rotate(-8deg); vertical-align: -1px; }
.required { color: var(--red); }
.input, .textarea, .select { background: #fff; color: var(--ink); border-color: var(--navy); border-width: 2px; border-radius: 4px; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--sky); box-shadow: 0 4px 0 rgba(63, 143, 224, .35); }
/* Onay = kaldırılan kırmızı kart; radyo = mavi; switch = yeşil kart */
.check input, .radio input, .switch input { background: #fff; border-color: var(--navy); border-width: 2px; }
.check input { border-radius: 3px; }
.check input:checked { background: var(--red); border-color: var(--navy); transform: rotate(-6deg); }
.check input::before { background: #fff; }
.radio input:checked { background: #fff; border-color: var(--sky); }
.radio input::before { background: var(--sky); }
.switch input:checked { background: var(--pine); border-color: var(--navy); }
.switch input::before, .switch input:checked::before { background: #fff; border: 2px solid var(--navy); box-sizing: border-box; border-radius: 3px; }
.check input:focus-visible, .radio input:focus-visible, .switch input:focus-visible { box-shadow: 0 0 0 3px rgba(63, 143, 224, .3); }
.range::-webkit-slider-thumb { background: var(--red); border-color: var(--navy); border-radius: 3px; }
.range::-moz-range-thumb { background: var(--red); border-color: var(--navy); border-radius: 3px; }
.stepper button { background: var(--mustard); color: var(--navy); border-color: var(--navy); border-width: 2px; border-radius: 4px; box-shadow: 0 3px 0 rgba(43, 45, 74, .3); }
.stepper button:active { transform: translateY(3px); box-shadow: none; }
.tags-input { background: #fff; border-color: var(--navy); border-width: 2px; box-shadow: none; }
.tags-input:focus-within { box-shadow: 0 4px 0 rgba(63, 143, 224, .35); }
.tags-input input { color: var(--ink); }
.tag { background: var(--sky); border-color: var(--navy); color: #fff; border-radius: 3px; }
.tag:nth-child(2n) { background: var(--mustard); color: var(--navy); }
.tag:nth-child(3n) { background: var(--pine); color: #fff; }
.tag button { color: inherit; opacity: .8; }
.tag button:hover { opacity: 1; }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { background: var(--mustard); }
.colorpicker { background: #fff; border-color: var(--navy); }
.upload { background: var(--skylight); border-color: var(--navy); border-style: dashed; }
.upload b { color: var(--red); }
.upload.is-drag { background: var(--lemon); transform: translateY(-2px); box-shadow: var(--hard-sm); }
.wizard-steps li.is-active { background: var(--red); border-color: var(--navy); color: #fff; }
.wizard-steps li.is-active::before { border-color: rgba(255, 255, 255, .8); }
.wizard-steps li.is-done { background: var(--pine); border-color: var(--navy); color: #fff; }
.wizard-steps li.is-done::before { background: #fff; border-color: #fff; }
.input-group > span { background: var(--mustard); border-color: var(--navy); color: var(--navy); font-weight: 800; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--red); box-shadow: 0 4px 0 rgba(227, 10, 23, .3); }
.field.is-error .check input, .field.is-error .radio input, .field.is-error .switch input { border-color: var(--red); }
.field.is-error .label { color: var(--red); }
.field.is-error .field-hint { color: var(--red); font-weight: 800; }


/* ---------- Geri bildirim & Overlay: tribün kartları ---------- */
/* Modal = DEV KART: beyaz, üstte kaldırılmış kart sırası */
dialog.modal { background: #fff; color: var(--ink); border: 2px solid var(--navy); border-radius: 6px; box-shadow: 0 10px 0 rgba(27, 33, 80, .35), 0 30px 70px rgba(27, 33, 80, .4); position: relative; overflow: visible; }
dialog.modal::before {
  content: "";
  position: absolute;
  top: -10px; left: 12px; right: 12px;
  height: 18px;
  background:
    linear-gradient(180deg, var(--red) 0 100%) 0 2px / 14px 16px repeat-x,
    linear-gradient(180deg, var(--sky) 0 100%) 16px 0 / 14px 16px repeat-x,
    linear-gradient(180deg, var(--mustard) 0 100%) 32px 3px / 14px 16px repeat-x;
  background-size: 48px 18px;
  filter: drop-shadow(0 1.5px 0 rgba(43, 45, 74, .45));
  pointer-events: none;
}
dialog.modal::backdrop { background: rgba(27, 33, 80, .6); }
.modal-close { border: 2px solid var(--navy); border-radius: 3px; background: var(--red); color: #fff; }
.modal-close:hover { transform: rotate(90deg); }
.confirm-ico { border: 2px solid var(--navy); border-radius: 4px; background: var(--sky); color: #fff; transform: rotate(-6deg); }
.confirm.is-danger .confirm-ico { background: var(--red); }
.confirm.is-danger h3 { color: var(--red); }
/* Toast = eline tutuşturulan KART: solda kaldırılmış mini kart */
.toast { background: #fff; color: var(--ink); border: 2px solid var(--navy); border-radius: 4px; box-shadow: var(--hard); padding-left: 46px; position: relative; }
.toast::before { content: "★"; position: absolute; left: 10px; top: 50%; width: 22px; height: 26px; margin-top: -13px; border-radius: 3px; background: var(--sky); border: 2px solid var(--navy); display: grid; place-items: center; font: 800 .62rem/1 var(--font-body); color: #fff; transform: rotate(-6deg); }
.toast.is-ok::before { content: "✓"; background: var(--pine); }
.toast.is-error::before { content: "×"; background: var(--red); font-size: .8rem; }
.toast.is-warn::before { content: "!"; background: var(--mustard); color: var(--navy); }
.toast-close { color: var(--ink-soft); }
.toast-close:hover { color: var(--red); }
/* Alert = renkli kart şeridi */
.alert { background: #fff; border: 2px solid var(--navy); border-left: 12px solid var(--sky); border-radius: 4px; box-shadow: var(--hard-sm); }
.alert.is-ok { border-left-color: var(--pine); }
.alert.is-error { border-left-color: var(--red); }
.alert.is-warn { border-left-color: var(--mustard); }
.alert-ico { border: 2px solid var(--navy); border-radius: 3px; background: var(--sky); }
.alert-ico::before { color: #fff; }
.alert.is-ok .alert-ico { background: var(--pine); }
.alert.is-error .alert-ico { background: var(--red); }
.alert.is-warn .alert-ico { background: var(--mustard); }
.alert.is-warn .alert-ico::before { color: var(--navy); }
/* Spinner = dönen dört renkli kart */
.spinner { border: 2px solid var(--navy); border-radius: 4px; background: conic-gradient(var(--red) 0 25%, var(--sky) 25% 50%, var(--mustard) 50% 75%, var(--pine) 75%); }
/* Boş durum = boş tribün: gri karolar */
.empty-art::before { content: ""; position: absolute; inset: 12px; border: 2px solid var(--navy); border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 12px, #fff 12px 14px), repeating-linear-gradient(0deg, transparent 0 12px, #fff 12px 14px), #dfe4ee; }
.empty-art::after { content: ""; position: absolute; left: 50%; top: 40%; width: 22px; height: 28px; margin: -14px 0 0 -11px; border-radius: 3px; background: var(--red); border: 2px solid var(--navy); transform: rotate(-10deg); opacity: .8; }


/* ---------- Pazarlama & ikna: tribün ---------- */
.topbar { background: var(--navy); color: #fff; }
.topbar a { color: var(--mustard); }
.topbar-close { color: rgba(255, 255, 255, .8); }
.topbar-close:hover { color: #fff; }
/* Üst haber şeridi = SKORBORD LED bandı */
.tickerbar { position: relative; background: var(--navy); border-bottom: 3px solid var(--mustard); }
.tickerbar-track { padding: 13px 0; color: #fff; font-weight: 800; }
.tickerbar-track span::after { width: 8px; height: 11px; border: none; border-radius: 1.5px; background: var(--mustard); transform: rotate(-10deg); }
.tickerbar a { color: var(--mustard); }
/* rozet = kaldırılmış mini kart */
.badge { border: 2px solid var(--navy); background: var(--red); color: #fff; border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 2px 0 rgba(43, 45, 74, .3); }
.dot { background: var(--red); border: 2px solid var(--navy); width: 12px; height: 12px; border-radius: 3px; }
/* Veli görüşü = TRİBÜN BLOĞU (renkli üst kart sırası) */
.quote-card { --qc: var(--sky); border: 2px solid var(--navy); border-top: 10px solid var(--qc); box-shadow: var(--hard); border-radius: 6px; position: relative; background: #fff; }
.quote-card:nth-child(3n+2) { --qc: var(--mustard); }
.quote-card:nth-child(3n) { --qc: var(--pine); }
/* Avatar = renkli kart */
.avatar { border: 2px solid var(--navy); background: var(--red); border-radius: 4px; transform: rotate(-4deg); }
.member { --mc: var(--sky); border: 2px solid var(--navy); border-top: 10px solid var(--mc); box-shadow: var(--hard); border-radius: 6px; background: #fff; }
.member:nth-child(3n+2) { --mc: var(--mustard); }
.member:nth-child(3n) { --mc: var(--pine); }
.member .avatar { background-color: var(--mc); }
/* Fotolu kart = kaldırılmış fotoğraf kartı + tepede mini bayrak; hafif eğik */
.member.has-photo { position: relative; transform: rotate(-1deg); transition: transform .18s ease; }
.member.has-photo:nth-child(2n) { transform: rotate(.8deg); }
.member.has-photo:hover { transform: rotate(0); }
.member.has-photo .member-photo { border: 2px solid var(--navy); border-radius: 4px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--mc), var(--hard-sm); }
.member.has-photo::before { content: ""; position: absolute; top: -20px; left: 50%; width: 30px; height: 34px; margin-left: -4px; border-left: 3px solid var(--crimson); background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 0 0 / 27px 18px; transform: rotate(8deg); transform-origin: 0 100%; z-index: 1; }
/* Sayaçlar = tribünde KALDIRILMIŞ DEV KARTLAR (renkli, eğik, altında el) */
.facts { align-items: flex-start; }
.fact { --kc: var(--sky); position: relative; padding: 30px 18px 26px; background: var(--kc); color: #fff; border: 2px solid var(--navy); border-radius: 6px; box-shadow: var(--hard); transition: transform .18s ease; transform: rotate(-4deg); margin-bottom: 18px; }
.fact:nth-child(3n+2) { --kc: var(--mustard); color: var(--navy); transform: rotate(3deg); }
.fact:nth-child(3n) { --kc: var(--red); transform: rotate(-2deg); }
.fact:hover { transform: translateY(-6px) rotate(0); }
.fact::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 16px; height: 20px; margin-left: -8px; background: var(--navy); border-radius: 6px 6px 2px 2px; }
.fact .counter { color: inherit; font-family: var(--font-head); font-weight: 400; }
.fact small { display: inline-block; margin-top: 4px; color: inherit; opacity: .9; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
/* Zaman çizelgesi = kart dizisi */
.timeline li::before { background: var(--navy); width: 3px; border-radius: 2px; }
.timeline li::after { width: 12px; height: 16px; background: var(--red); border: 2px solid var(--navy); border-radius: 2px; transform: rotate(-8deg); }
.timeline li:nth-child(2n)::after { background: var(--sky); }
.timeline li:nth-child(3n)::after { background: var(--mustard); }
.tl-time { color: var(--red); font-family: var(--font-body); font-weight: 800; letter-spacing: .06em; }
.cookie { border: 2px solid var(--navy); box-shadow: 0 8px 0 rgba(27, 33, 80, .25); border-radius: 6px; background: #fff; }
/* Geri sayım = renkli kartlar */
.cd-cell { border: 2px solid var(--navy); box-shadow: var(--hard-sm); border-radius: 4px; background: var(--red); color: rgba(255, 255, 255, .85); }
.cd-cell b { color: #fff; font-family: var(--font-head); font-weight: 400; }
.cd-cell:nth-child(2) { background: var(--sky); }
.cd-cell:nth-child(3) { background: var(--pine); }
.cd-cell:nth-child(4) { background: var(--mustard); color: rgba(27, 33, 80, .8); }
.cd-cell:nth-child(4) b { color: var(--navy); }
.trust li { border: 2px solid var(--navy); background: #fff; color: var(--ink); box-shadow: 0 2px 0 rgba(43, 45, 74, .3); border-radius: 4px; }
/* Öne çıkan fiyat = "EN SEVİLEN" kartı */
.pricing-tiers .price-card.is-featured { box-shadow: 0 8px 0 rgba(43, 45, 74, .18); transform: translateY(-6px) rotate(-.5deg); position: relative; overflow: visible; }
.pricing-tiers .price-card.is-featured::after { content: "EN SEVİLEN"; position: absolute; top: -16px; right: 18px; left: auto; bottom: auto; width: auto; height: auto; margin: 0; background: var(--mustard); border: 2px solid var(--navy); color: var(--navy); padding: 7px 12px; font: 800 .68rem/1.2 var(--font-body); letter-spacing: .14em; border-radius: 3px; box-shadow: var(--hard-sm); transform: rotate(3deg); }


/* ---------- Medya: stadyum ekranı + tribün fotoğrafları ---------- */
/* Karusel = STADYUM EKRANI */
.carousel { border: 3px solid var(--navy); border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--navy), 0 12px 0 rgba(27, 33, 80, .18); background: var(--navy); position: relative; padding-top: 14px; }
.carousel::before { content: ""; position: absolute; top: 3px; left: 8px; right: 8px; height: 6px; background: radial-gradient(circle 2px at 50% 50%, rgba(255, 255, 255, .5) 1.6px, transparent 2.4px); background-size: 10px 6px; pointer-events: none; }
.carousel-prev, .carousel-next { border: 2px solid var(--navy); background: var(--mustard); color: var(--navy); border-radius: 4px; box-shadow: var(--hard-sm); }
.carousel-prev:hover, .carousel-next:hover { transform: translateY(-1px); }
.carousel-dot { border: 2px solid #fff; border-radius: 2px; background: transparent; }
.carousel-dot.is-active { background: var(--mustard); }
.carousel-ui { padding-bottom: 16px; }
/* Galeri = TRİBÜNDE KALDIRILAN FOTO KARTLARI: renkli çerçeve, eğik, altında el */
.gallery { row-gap: 34px; }
.gallery a { --gc: var(--sky); position: relative; overflow: visible; padding: 8px; border: 2px solid var(--navy); border-radius: 4px; background: var(--gc); box-shadow: var(--hard-sm); rotate: -2deg; transition: rotate .18s ease, translate .18s ease, box-shadow .18s ease; }
.gallery a:nth-child(4n+2) { --gc: var(--mustard); rotate: 1.5deg; }
.gallery a:nth-child(4n+3) { --gc: var(--pine); rotate: -1deg; }
.gallery a:nth-child(4n) { --gc: var(--blush); rotate: 2deg; }
.gallery a::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 16px; height: 20px; margin-left: -8px; background: var(--navy); border-radius: 6px 6px 2px 2px; z-index: -1; }
.gallery img { border: 2px solid var(--navy); border-radius: 2px; }
.gallery a:hover { rotate: 0deg; translate: 0 -4px; box-shadow: var(--hard); }
.gallery a:hover img { transform: none; }
.lightbox img { border: 4px solid #fff; box-shadow: 0 18px 60px rgba(27, 33, 80, .6); border-radius: 4px; }
.lightbox figcaption { display: none; }
.lightbox-close, .lightbox-prev, .lightbox-next { border: 2px solid var(--navy); background: var(--mustard); color: var(--navy); border-radius: 4px; }
.video { border: 3px solid var(--navy); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--navy); border-radius: 8px; }
.audio { accent-color: var(--red); }
.logocloud li { padding: 10px 16px; border: 2px solid var(--navy); border-radius: 4px; background: #fff; color: var(--ink); box-shadow: 0 2px 0 rgba(43, 45, 74, .3); }
.beforeafter { border: 2px solid var(--navy); box-shadow: var(--hard); border-radius: 6px; }
.beforeafter::after { background: var(--mustard); border-inline: 2px solid var(--navy); width: 8px; margin-left: -4px; }
/* 404 = boş tribün skoru */
.errpage .err-code { color: var(--red); text-shadow: 6px 6px 0 rgba(63, 143, 224, .35); transform: rotate(-2deg); font-family: var(--font-head); font-weight: 400; }
[data-tip]::after { background: var(--navy); color: #fff; border-radius: 3px; box-shadow: 0 3px 0 rgba(27, 33, 80, .35); }
/* Çerçevesiz foto = kaldırılmış foto kartı */
.wphoto { padding: 10px; background: var(--mustard); border: 2px solid var(--navy); border-radius: 4px; box-shadow: var(--hard); }
.wphoto img { border-radius: 2px; border: 2px solid var(--navy); }
.wphoto::before { content: ""; position: absolute; top: -12px; left: 14px; width: 30px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 800%22%3E%3Crect width=%221200%22 height=%22800%22 fill=%22%23e30a17%22/%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 50% 50% / 100% 100%; border-left: 3px solid var(--crimson); transform: rotate(-6deg); z-index: 1; pointer-events: none; }


/* ---------- Sayfalama: küçük renkli KARTLAR — aktif kırmızı ay-yıldızlı ---------- */
.pagination a { border: 2px solid var(--navy); background: #fff; color: var(--navy); border-radius: 3px; box-shadow: 0 2px 0 rgba(43, 45, 74, .3); transform: rotate(-3deg); }
.pagination a:nth-child(2n) { transform: rotate(3deg); background: var(--lemon); }
.pagination a:hover { transform: translateY(-3px) rotate(0); }
.pagination a.is-current { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22200 180 640 440%22%3E%3Ccircle cx=%22425%22 cy=%22400%22 r=%22200%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22475%22 cy=%22400%22 r=%22160%22 fill=%22%23e30a17%22/%3E%3Cpolygon points=%22583.334,400 764.235,458.779 652.431,304.894 652.431,495.106 764.235,341.221%22 fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat 4px 50% / 10px auto, var(--red); color: #fff; padding-left: 16px; }
.page-gap { box-shadow: none; color: var(--ink-soft); }
/* Sekmeler = kart sırası; yukarı çık = kaldırılan kart */
.tabs-bar { border-bottom: 2px solid var(--navy); }
.tabs-bar [role="tab"] { border: 2px solid var(--navy); background: #fff; border-radius: 3px 3px 0 0; color: var(--navy); }
.tabs-bar [role="tab"]:hover { background: var(--lemon); }
.tabs-bar [role="tab"].is-active { background: var(--red); color: #fff; }
.to-top { background: var(--red); border: 2px solid var(--navy); color: #fff; box-shadow: var(--hard-sm); border-radius: 4px; transform: rotate(-6deg); }
.to-top:hover { transform: translateY(-8px) rotate(0); box-shadow: var(--hard); }


/* ---------- Blog ekleri: tribün köşesi ---------- */
.post-filter a { border: 2px solid var(--navy); background: #fff; color: var(--navy); box-shadow: 0 2px 0 rgba(43, 45, 74, .3); border-radius: 3px; }
.post-filter a:hover { transform: translateY(-2px) rotate(-3deg); background: var(--lemon); }
.post-filter a.is-active { background: var(--red); color: #fff; transform: rotate(-3deg); }
.author { border: 2px solid var(--navy); border-left: 8px solid var(--sky); box-shadow: var(--hard-sm); background: #fff; border-radius: 4px; }
.share a { border: 2px solid var(--navy); background: var(--sky); color: #fff; border-radius: 3px; transform: rotate(-4deg); }
.share a:nth-child(2n) { background: var(--mustard); color: var(--navy); transform: rotate(4deg); }
.share a:nth-child(3n) { background: var(--pine); }
.share a:hover { transform: translateY(-2px) rotate(0); }
.readbar i { background: var(--red); }
.pullquote { border-left: 8px solid var(--mustard); color: var(--navy); }
.pullquote::before { content: ""; display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; background: var(--red); margin-right: 10px; transform: rotate(-8deg); }
.inline-cta { border: 2px solid var(--navy); background: var(--lemon); box-shadow: var(--hard-sm); border-radius: 4px; }
.comment-body { border: 2px solid var(--navy); border-radius: 4px 4px 4px 0; box-shadow: var(--hard-sm); background: #fff; }
.comment:nth-child(2n) .avatar { background-color: var(--sky); }
.comment:nth-child(3n) .avatar { background-color: var(--pine); }


/* ═══════════ Duyarlılık (@media — en sonda: paint'i override eder) ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .mascot, .mas-face, .mas-eye i, .mas-arm, .mas-hearts b { animation: none !important; }
}

@media (max-width: 980px) {
  .deck-stack { grid-template-columns: 1fr; } /* JS yoksa tek sütun liste */
  .deck.deck-ready .deck-ui { display: flex; }
  .deck-ready .deck-stack {
    display: block;
    position: relative;
    width: min(400px, 100%);
    margin-inline: auto;
    transition: height .3s ease;
  }
  .deck-ready .fcard {
    position: absolute;
    top: 0; left: 0; right: 0;
    transition: transform .38s cubic-bezier(.2, .8, .3, 1.15), opacity .3s ease;
    touch-action: pan-y;
    cursor: grab;
    will-change: transform;
  }
  .deck-ready .fcard.is-top   { z-index: 4; }
  .deck-ready .fcard.is-b1    { z-index: 3; transform: translateY(16px) scale(.955) rotate(2deg); }
  .deck-ready .fcard.is-b2    { z-index: 2; transform: translateY(30px) scale(.91) rotate(-2.4deg); }
  .deck-ready .fcard.is-under { z-index: 1; transform: translateY(30px) scale(.91); opacity: 0; pointer-events: none; }
  .deck-ready .fcard.is-b1, .deck-ready .fcard.is-b2, .deck-ready .fcard.is-under { cursor: default; }
  .deck-ready .fcard.is-b1 > *, .deck-ready .fcard.is-b2 > * { visibility: hidden; }
  .deck-ready .fcard.is-dragging { transition: none; cursor: grabbing; }
  .deck-ready .fcard.is-flying { z-index: 5; transition: transform .42s ease-in, opacity .42s ease-in; }
  .deck-ready .fcard.is-returning { transition: none; transform: translate(-130%, -8%) rotate(-22deg); opacity: 0; }

  .deck-ready .fcard-cta .fcard-scene { height: 96px; }
  .deck-ready .fcard-cta .big { display: none; }
  .deck-ready .fcard-cta .zero { position: static; font-size: 1.5rem; padding: 8px 18px; transform: rotate(-3deg); }

  .hero-in { grid-template-columns: 1fr; gap: 56px; }
  .hero { padding-top: 76px; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .fineprint { margin-inline: auto; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split-rev .split-copy { order: 1; }
  .split-rev .split-art { order: 2; }
  /* :has'li 4-adım kuralı (0,2,0) düz .steps'i (0,1,0) ezer — mobilde tek
     sütuna dönmesi için burada da :has'li seçiciyle yazılmalı. */
  .steps, .steps:has(> :nth-child(7)) { grid-template-columns: 1fr; }
  .step-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 700px) {
  :root { --nav-gutter: 32px; --nav-gap: 12px; } /* mobil nav boşlukları: 16px kenar + 12px öğe arası */
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: none !important; } /* açık kalmış grup paneli mobile taşmasın */
  .nav-burger { display: flex; }
  .mascot { display: none; }
  .hero { padding-top: 44px; }
  .deck-ready .deck-stack { width: min(340px, 100%); }
  .section { padding: 64px 0; }
  .hero-mock-note { right: 8px; }
  .m-cards { grid-template-columns: 1fr 1fr; }
  .m-card-gallery { grid-column: span 2; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(110px, 28vw, 150px); }
  .blob-1, .doodle-heart { display: none; }
  .post-cover-lg img { height: 210px; }
}

@media (min-width: 701px) {
  .nav-drawer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .doodle, .m-hero-art, .strip-track, .tickerbar-track, .m-ticker span { animation: none !important; }
  .fcard-scene *, .fcard-scene *::after { animation: none !important; opacity: 1 !important; }
  .prop, .prop::before, .prop::after { animation: none !important; }
  .fcard { transition: none; }
  /* Geri bildirim: dönme yerine yumuşak nabız; modal/toast geçişsiz */
  dialog.modal { transition: none; }
  .toast { animation: none; }
  .spinner, .btn.is-loading::after { animation: fbpulse 1.4s ease-in-out infinite; }
  /* Medya: karusel kaydırması ve galeri zoom'u anında */
  .carousel-track { transition: none; }
  .gallery a:hover img { transform: none; }
  /* Admin: iskelet parlaması sabit */
  .skeleton::after { animation: none; }
}

@media (max-width: 980px) {
  /* Panel dar ekranda tek kolon; kenar nav yatay şeride döner */
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; }
}
@keyframes fbpulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

@media (max-width: 700px) {
  /* Toast dar ekranda tam genişlik alta yaslanır */
  .toast-host { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}


/* Pankart bandı her genişlikte: structure'ın ≤980px responsive kuralı
   (.hero { padding-top: 76px }) paint'ten SONRA geldiği için burada (en sonda)
   yeniden yazılır — aksi hâlde 700–980px arası pankart nav bayraklarının
   altına giriyordu. */
.hero { padding-top: 168px; }

/* ---------- Mobil hero: kareli bayrak GENİŞLİĞE sığar (kartlar ~yarı boyut,
   derzler yarı), dikeyde tribün sıraları gibi yinelenir; mercek aynı ızgara ---------- */
@media (max-width: 700px) {
  .hero, .hero-decor::before {
    background-size: 100% auto;
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  .hero-decor::before { --dalga-aci: 90deg; }
  .hero { padding-top: 176px; }
  .hero-in::before { top: -96px; font-size: .84rem; padding: 9px 14px 10px; max-width: 86vw; }
  .hero-in::after { top: -108px; }
}

/* ---------- Seyrek ziyaretçi: TRİBÜNDE KALKAN TEK KART ----------
   Bölüm köşesinde arada bir bir çocuk kartını kaldırır (yükselir, sallanır,
   iner); döngü 44s, jest ~4s, z-index:-1; nth ile konum+faz+renk değişir. */
.section { position: relative; z-index: 0; }
.section::after {
  content: "";
  position: absolute;
  left: var(--t23visit-x, 6%); bottom: 12%;
  z-index: -1;
  width: 26px; height: 32px;
  border-radius: 3px;
  background: var(--sky);
  border: 2px solid var(--navy);
  box-shadow: 0 34px 0 -6px var(--navy);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: t23visit-kart 44s linear infinite;
  pointer-events: none;
}
.section:nth-of-type(3n+2)::after { --t23visit-x: 60%; background: var(--mustard); animation-delay: -15s; }
.section:nth-of-type(3n)::after { --t23visit-x: 90%; background: var(--red); animation-delay: -30s; }
@keyframes t23visit-kart {
  0%, 90%     { opacity: 0; transform: translateY(30px) rotate(0); }
  91%         { opacity: 1; transform: translateY(0) rotate(-8deg); }
  93%         { opacity: 1; transform: translateY(-6px) rotate(8deg); }
  95%         { opacity: 1; transform: translateY(0) rotate(-6deg); }
  97%         { opacity: 1; transform: translateY(-4px) rotate(4deg); }
  99%, 100%   { opacity: 0; transform: translateY(30px) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .section::after { content: none; } }