/* ============================================================================
   SAYFA STILLERI — ana sayfanin (index.html) <head>'indeki 3.328 satirlik satir-ici
   <style> blogu, BIREBIR buraya tasindi. Tek satir CSS degismedi.

   NEDEN DOSYAYA CIKTI: /kartini-tasarla ayri sayfasi AYNI gorunumu kullanacak.
   Satir-ici kalsaydi ya kopyalanacakti (iki gercek: biri degisir, oteki degismez)
   ya da sayfa bolunemezdi. Ayrica satir-ici CSS her istekte yeniden iner; dosya
   `?v=` ile onbelleklenir.

   YERI DEGISMEDI: index.html'de blok neredeyse orada <link> duruyor — yani diger
   stylesheet'lerden SONRA, sayfa markup'indan ONCE. Sira korunmazsa ozgulluk
   esitliginde "son kural kazanir" davranisi degisir ve gorunum sessizce kayar.
   ============================================================================ */
    /* =========================================================================
       60A — TASARIM SİSTEMİ TOKEN'LARI (TEK KAYNAK). Founder önizlemede ince ayar
       yapabilir — buradan kolayca değiştirilir. Yön (founder kanonu): siyah↔krem
       ritmi; TAM SİYAHTAN uzaklaş (katmanlı koyu); metin kontrastını artır.
       Koyu üstü metin: --on-ink (parlak) / --on-ink-dim (ikincil, min AA).
       Krem yüzeyler + krem bölüm teması: .tf-section--light (--l-*, WCAG AA ölçümlü).
       ====================================================================== */
    :root {
      color-scheme: dark;
      /* --- KOYU (ink) — katmanlı, tam siyah değil --- */
      /* TEK SİYAH AİLESİ (17 Eylül 2026): soğuk #0f1115/#171a21/#1e222b -> marka mürdümü (tf-koyu.css ile aynı). */
      --ink: #241C22; --ink-2: #2E2229; --ink-3: #382A33;   /* zemin → yükseltilmiş yüzey → adacık */
      --on-ink: #ECECEC; --on-ink-dim: #C6CAD2;  /* B4.3: govde kontrasti artirildi (eski #B9BCC4) */             /* koyu üstü ana / ikincil (AA) */
      /* --- KREM (okuma adacığı / krem bölüm ile hizalı) --- */
      --cream: #FFF6EC; --cream-2: #EAE3D2;
      /* --- ALTIN (marka; korunur) --- */
      --gold: #F4B860; --gold-2: #C9862B; --gold-dim: rgba(244,184,96, 0.12); --gold-text: #F7CB8A;
      --line: rgba(244,184,96, 0.25); --line-soft: rgba(255, 255, 255, 0.08);
      /* --- GERİYE UYUM: mevcut değişkenler token'lara BAĞLANIR (ikinci palet YOK) --- */
      --bg: var(--ink); --bg-2: var(--ink-2); --panel: var(--ink-2); --panel-2: #1D141B;
      --text: var(--on-ink); --muted: var(--on-ink-dim);
      --header-bg: rgba(36, 28, 34, 0.88); --footer-bg: #1D141B; --deep: #1D141B;
      --drawer-bg: rgba(46, 34, 41, 0.97); --drawer-foot-bg: rgba(36, 28, 34, 0.98);
      --radius: 16px; --header-h: 68px;
      /* B4.3 spacing sistemi: bolum dikey ritmi tek kaynaktan. */
      --sec-pad-m: 64px; --sec-pad-d: 104px;
    }
    /* FAZ 14F: açık tema token bloğu KALDIRILDI — site tek temalıdır (KOYU).
       Yarım kalmış açık tema, gömülü bölümü ve KART 1'i okunmaz hâle getiriyor,
       ayrıca Forge XI / üyelik / bekleme listesi sayfalarında hiç tanımlı değildi. */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    /* CAPA HEDEFI HEADER'IN ALTINDA DURUR (2 Eylul 2026).
       OLCULDU: scroll-padding-top `auto` idi; `/#sergile` capasina gidilince bolumun
       ust kenari 53px'e oturuyordu, oysa yapiskan header 77px yuksekliginde -> baslik
       header'in ALTINA giriyordu. Deger ELLE SAYI DEGIL: header yuksekligi zaten
       `--header-h` degiskeninde (.nav bu degiskenden yukseklik aliyor, kirilim
       noktasinda 68px -> 76px). 12px pay, baslik serite yapismasin diye.
       `scroll-padding-top` scrollIntoView() ve hash sicramasi dahil TUM kaydirma
       islemlerinde gecerlidir; JS'te ikinci bir hesap tutulmaz. */
    html { scroll-behavior: smooth; scrollbar-gutter: stable both-edges;
           scroll-padding-top: calc(var(--header-h, 68px) + 12px); }
    body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.3s ease; }
    /* FAZ 14D — `overflow-x: hidden` gövdeyi bir KAYDIRMA KABI yapar; bu yüzden
       gövdenin içindeki hiçbir `position: sticky` öğesi yapışmıyordu (yapışkan saha
       dahil, 14C'den beri sessizce). `clip` aynı yatay kırpmayı yapar ama kaydırma
       kabı YARATMAZ -> sticky çalışır. Desteklemeyen tarayıcı eski davranışta kalır. */
    @supports (overflow-x: clip) { html, body { overflow-x: clip; } }
    h1, h2, h3, h4 { font-family: 'Oswald', 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.01em; line-height: 1.08; text-transform: uppercase; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    ul { list-style: none; }
    .container { width: min(1240px, 92vw); margin: 0 auto; }
    .eyebrow { color: var(--gold-text); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; font-weight: 600; font-family: 'Inter', sans-serif; }

    /* BUTTONS */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; text-align: center; }
    .btn-gold { background: linear-gradient(135deg, #F7CE8E, var(--gold)); color: #1a1a1a; box-shadow: 0 8px 22px rgba(244,184,96, 0.24); }
    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(244,184,96, 0.4); }
    .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
    .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
    .btn-block { width: 100%; }
    .btn-sm { padding: 11px 18px; font-size: 0.86rem; }

    /* HEADER */
    header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -14px rgba(0,0,0,0.65); transition: background 0.3s ease, box-shadow 0.3s ease; }
    header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,184,96,0.55), transparent); pointer-events: none; }
    .nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 12px; }
    .brand { display: flex; align-items: center; flex-shrink: 0; }
    .nav .brand img { width: auto; height: 34px; }
    /* FAZ 14F: tema kalktigi icin acik-tema logo varyanti da kalkti (tek logo). */
    .nav-menu { display: none; }
    .nav-menu a { position: relative; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.02em; font-weight: 500; transition: color 0.25s ease; white-space: nowrap; padding: 4px 2px; }
    .nav-menu a::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -1px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; }
    .nav-menu a:hover { color: var(--gold); }
    /* CARD-FIRST BATCH 1: birincil nav CTA — altın hap ("Kartını Tasarla"). Alt çizgi animasyonu
       hap üstünde gereksiz; btn-gold reçetesiyle aynı dolgu/kontrast (koyu metin ~7.6:1). */
    /* B4.4: header CTA hero'dan HAFIF — ayni viewport'ta iki esit agirlikli altin buton olmasin. */
    .nav-menu a.nav-cta { background: linear-gradient(135deg, #F7CE8E, var(--gold)); color: #1a1a1a; font-weight: 600; font-size: 0.84rem; padding: 7px 14px; border-radius: 999px; }
    .nav-menu a.nav-cta:hover { color: #1a1a1a; filter: brightness(1.05); }
    .nav-menu a.nav-cta::after { display: none; }
    .mobile-menu a.nav-cta { color: var(--gold); font-weight: 700; }
    .nav-menu a:hover::after { transform: scaleX(1); }
    .nav-menu a.has-badge::after { display: none; }
    /* "Yeni" rozeti (nav linklerinin yanında) */
    .nav-badge { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #241A20; background: linear-gradient(135deg, #FBE3B8, var(--gold) 55%, var(--gold-2)); padding: 2.5px 8px; border-radius: 999px; line-height: 1.4; flex-shrink: 0; box-shadow: 0 1px 5px rgba(244,184,96,0.40), inset 0 1px 0 rgba(255,255,255,0.45); }
    .nav-menu a.has-badge { display: inline-flex; align-items: center; gap: 7px; }
    .mobile-menu a.has-badge { display: flex; align-items: center; gap: 8px; }
    .nav-actions { display: flex; align-items: center; gap: 6px; }
    .lang-toggle { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; margin-right: 4px; padding: 3px; background: rgba(0,0,0,0.32); }
    .lang-toggle button { background: transparent; color: var(--muted); border: none; cursor: pointer; padding: 5px 11px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; font-family: 'Inter', sans-serif; border-radius: 999px; transition: background 0.25s ease, color 0.25s ease; }
    .lang-toggle button:hover { color: var(--gold); }
    .lang-toggle button.active { background: linear-gradient(135deg, #F9D9A2, var(--gold)); color: #241A20; box-shadow: 0 1px 6px rgba(244,184,96,0.35); }
    .lang-toggle.in-drawer { margin: 6px 0 0; }
    /* Mobilde header TR/EN gizli (hamburger menüsünde mevcut) — tema düğmesine yer açar */
    @media (max-width: 939px) { .nav-actions > .lang-toggle { display: none; } .nav-actions { gap: 4px; } }
    .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: none; color: var(--text); cursor: pointer; position: relative; transition: background 0.2s, color 0.2s; }
    .icon-btn:hover { background: var(--gold-dim); color: var(--gold); }
    .icon-btn svg { width: 21px; height: 21px; }
    .cart-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: linear-gradient(135deg, #FBE3B8, var(--gold)); color: #241A20; font-size: 0.62rem; font-weight: 800; line-height: 1; display: grid; place-items: center; box-shadow: 0 1px 5px rgba(244,184,96,0.5); }
    .mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 8px 0 18px; border-top: 1px solid var(--line-soft); }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { padding: 13px 6px; color: var(--text); font-size: 1rem; border-bottom: 1px solid var(--line-soft); letter-spacing: 0.02em; }

    /* SECTION HELPERS */
    section { padding: var(--sec-pad-m, 64px) 0; }  /* B4.3: mobil ritim 64-80 bandi */
    .section-head { max-width: 720px; margin: 0 auto clamp(24px, 3.4vw, 34px); text-align: center; }
    .section-head h2 { font-size: clamp(2rem, 6vw, 3.1rem); margin: 10px 0 12px; }
    .section-head p { color: var(--muted); font-size: 1.05rem; }

    /* HERO */
    .hero { position: relative; padding: 30px 0 50px; overflow: hidden; }
    .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
        radial-gradient(620px 460px at 86% 32%, rgba(244,184,96, 0.16), transparent 60%),
        radial-gradient(520px 420px at 6% 92%, rgba(244,184,96, 0.06), transparent 60%); }
    .hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px;
        grid-template-areas: "head" "rest" "visual"; align-items: center; }
    .hero-head { grid-area: head; }
    .hero-visual { grid-area: visual; }
    .hero-rest { grid-area: rest; }
    .hero-head .badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: 0.72rem; color: var(--gold-text); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
    .hero-head .badge::before { content: ""; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 10px var(--gold); }
    .hero-head h1 { font-size: clamp(2.7rem, 11vw, 5.4rem); font-weight: 700; }
    .hero-head h1 .g { color: var(--gold); display: block; }
    .hero-rest p.lead { color: var(--muted); font-size: 1.12rem; margin: 0 0 26px; max-width: 44ch; }
    .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
    /* Müşteri bekletildiğinde görünür "yükleniyor" imleci (ör. özel kart sepete ekleme) */
    body.tf-busy, body.tf-busy * { cursor: progress !important; }
    .btn.is-loading { opacity: 0.85; }
    .hero-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; color: var(--muted); font-size: 0.84rem; }
    .hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
    .hero-trust svg { width: 16px; height: 16px; color: var(--gold); }

    .hero-visual { position: relative; display: grid; place-items: center; min-height: 320px; }
    .hero-board { width: min(560px, 96%); filter: drop-shadow(0 0 70px rgba(244,184,96, 0.2)) drop-shadow(0 26px 46px rgba(0, 0, 0, 0.7)); }
    .hero-cards { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .hero-cards img { width: clamp(96px, 27vw, 158px); height: auto; object-fit: contain; margin: 0 clamp(-22px, -4.5vw, -16px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6)); transition: transform 0.3s ease; }
    .hero-cards img:nth-child(1) { transform: rotate(-13deg) translateY(14px); z-index: 1; }
    .hero-cards img:nth-child(2) { transform: rotate(-5deg) translateY(-10px); z-index: 2; }
    .hero-cards img:nth-child(3) { transform: rotate(5deg) translateY(-10px); z-index: 2; }
    .hero-cards img:nth-child(4) { transform: rotate(13deg) translateY(14px); z-index: 1; }
    .hero-visual:hover .hero-cards img:nth-child(1) { transform: rotate(-16deg) translateY(8px) translateX(-10px); }
    .hero-visual:hover .hero-cards img:nth-child(4) { transform: rotate(16deg) translateY(8px) translateX(10px); }

    /* === NEREDEN BAŞLAMAK İSTERSİN? — başlangıç rehberi kartları (premium) === */
    .cat-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
    @media (min-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
    .cat { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--panel); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s ease, box-shadow 0.3s ease; }
    .cat:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 26px 52px -22px rgba(0,0,0,0.65), 0 0 30px -8px rgba(244,184,96,0.32); }
    .cat-media { position: relative; height: 224px; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; background: radial-gradient(420px 220px at 50% 18%, rgba(244,184,96,0.14), transparent 70%); }
    .cat-media > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.6)); transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    .cat:hover .cat-media > img { transform: scale(1.07); }
    .cat-fan img { position: absolute; top: 50%; height: 80%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,0.6)); transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    .cat-fan .cf1 { left: 27%; transform: translate(-50%,-50%) rotate(-11deg); z-index: 1; }
    .cat-fan .cf2 { left: 50%; transform: translate(-50%,-50%); z-index: 3; }
    .cat-fan .cf3 { left: 73%; transform: translate(-50%,-50%) rotate(11deg); z-index: 1; }
    .cat:hover .cat-fan .cf1 { transform: translate(-50%,-50%) rotate(-13deg) scale(1.05); }
    .cat:hover .cat-fan .cf2 { transform: translate(-50%,-50%) scale(1.06); }
    .cat:hover .cat-fan .cf3 { transform: translate(-50%,-50%) rotate(13deg) scale(1.05); }
    .cat-media .cat-default-card { width: 132px; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    .cat:hover .cat-media .cat-default-card { transform: scale(1.05); }
    .cat-body { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 24px; }
    .cat-body .cat-title { font-size: 1.36rem; line-height: 1.16; margin-bottom: 4px; }
    .cat-body .cat-sub2 { color: var(--gold); font-family: 'Oswald', sans-serif; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 12px; }
    .cat-body .cat-desc { color: var(--muted); font-size: 0.94rem; line-height: 1.6; margin-bottom: 16px; }
    .cat-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
    .cat-feats li { font-size: 0.75rem; color: var(--gold-text); background: var(--gold-dim); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; letter-spacing: 0.02em; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
    .cat:hover .cat-feats li { background: rgba(244,184,96,0.16); color: var(--gold-text); border-color: rgba(244,184,96,0.45); }
    .cat-cta { margin-top: auto; }
    .cat-cta:hover { background: linear-gradient(135deg, #F9D9A2, var(--gold)); color: #241A20; border-color: var(--gold); }
    .product .pimg-card { display: flex; align-items: center; justify-content: center; }
    .product .pimg-card .cat-default-card { width: auto; height: 90%; }

    /* PRODUCTS */
    .product-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
    .product { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; transition: transform 0.22s ease, border-color 0.22s ease; }
    .product:hover { transform: translateY(-5px); border-color: var(--gold); }
    .product .pimg { position: relative; aspect-ratio: 4 / 5; padding: 16px; background: radial-gradient(300px 220px at 50% 14%, rgba(244,184,96, 0.1), transparent 70%); }
    .product .pimg img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)); }
    .product .tag { position: absolute; top: 12px; left: 12px; z-index: 5; background: rgba(0, 0, 0, 0.62); border: 1px solid var(--line); color: #efd98c; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; }
    .product .pbody { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
    .product .pbody h3 { font-size: 1.08rem; letter-spacing: 0.01em; margin-bottom: 6px; line-height: 1.18; }
    .product .pbody .pdesc { color: var(--muted); font-size: 0.86rem; margin-bottom: 14px; flex: 1; }
    .product .ptype { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; background: var(--gold-dim); color: var(--gold-text); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 12px; }
    .product .pprice { font-family: 'Oswald', sans-serif; font-size: 1.6rem; color: var(--gold-text); margin-bottom: 14px; letter-spacing: 0.02em; }

    /* ===== ÜRÜNLER & PAKETLER (3 paket kartı) ===== */
    /* Faz 9: grid-auto-rows:1fr -> aynı satırdaki kartlar EŞİT yükseklikte olur
       (kapı kartlarında görsel alanı yok, aksi halde 350px'e karşı ~720px kalıyordu). */
    .pkg-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: stretch; grid-auto-rows: 1fr; }
    .pkg-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px 24px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
    .pkg-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 22px 46px -18px rgba(0,0,0,0.6), 0 0 24px -8px rgba(244,184,96,0.25); }
    .pkg-card.featured { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(244,184,96,0.5), 0 26px 60px -22px rgba(244,184,96,0.30); }
    .pkg-card.featured:hover { box-shadow: 0 0 0 1px var(--gold), 0 30px 64px -20px rgba(244,184,96,0.42); }
    /* Seçili koleksiyon görseli (sabit yükseklik -> layout zıplamaz) */
    .pkg-media { position: relative; height: 200px; display: grid; place-items: center; padding: 14px; margin-bottom: 20px; border-radius: 14px; background: radial-gradient(360px 180px at 50% 16%, rgba(244,184,96,0.14), transparent 70%), var(--panel-2); border: 1px solid var(--line-soft); overflow: hidden; }
    .pkg-media-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(0,0,0,0.6)); }
    .pkg-media-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--muted); }
    .pkg-media-img[hidden], .pkg-media-ph[hidden] { display: none; }
    .pkg-ph-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 10px 16px; border-radius: 10px;
      font-weight: 800; font-size: 1.15rem; letter-spacing: 0.06em; color: var(--gold); border: 1px solid rgba(244,184,96,0.45);
      background: rgba(244,184,96,0.10); box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
    .pkg-ph-name { color: var(--gold-text); font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.03em; font-size: 0.95rem; }
    .pkg-ph-note { font-size: 0.74rem; opacity: 0.8; }
    /* Premium Kart kartı: alt boşluğu dolduran "Kartını Tasarla" önizleme görseli */
    .pkg-media-card { flex: 1; display: grid; place-items: center; min-height: 150px; margin: 8px 0; }
    .pkg-media-card .cat-default-card { width: auto; height: 100%; max-height: 300px; }
    .pkg-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: linear-gradient(135deg, #FBE3B8, var(--gold) 55%, var(--gold-2)); color: #241A20; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(244,184,96,0.5); }
    .pkg-body { flex: 1; display: flex; flex-direction: column; }
    .pkg-title { font-size: 1.5rem; line-height: 1.12; margin-bottom: 6px; }
    .pkg-sub { color: var(--gold); font-family: 'Oswald', sans-serif; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }
    .pkg-desc { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
    .pkg-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
    .pkg-tags li { font-size: 0.76rem; color: var(--gold-text); background: var(--gold-dim); border: 1px solid var(--line); padding: 5px 11px; border-radius: 999px; letter-spacing: 0.02em; }
    .pkg-customnote { color: var(--muted); font-size: 0.88rem; font-style: italic; margin-bottom: 18px; }
    /* Koleksiyon seçici (dropdown) */
    .pkg-select { position: relative; margin-bottom: 14px; }
    .pkg-select-trigger { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 11px 14px; cursor: pointer; font-family: inherit; font-size: 0.92rem; transition: border-color 0.2s ease, background 0.2s ease; }
    .pkg-select-trigger:hover, .pkg-select.open .pkg-select-trigger { border-color: var(--gold); background: rgba(244,184,96,0.05); }
    .pkg-select-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .pkg-sysmark { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 2px 7px; border-radius: 5px; flex-shrink: 0;
      font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; color: var(--gold); border: 1px solid rgba(244,184,96,0.42); background: rgba(244,184,96,0.10); }
    .pkg-select-label { flex: 1; text-align: left; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pkg-caret { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; transition: transform 0.25s ease; }
    .pkg-select.open .pkg-caret { transform: rotate(180deg); }
    .pkg-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--panel-2); border: 1px solid var(--gold); border-radius: 12px; padding: 6px; max-height: 244px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 22px 48px -16px rgba(0,0,0,0.7); }
    .pkg-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
    .pkg-select.open .pkg-menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .pkg-option { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: var(--text); border-radius: 8px; padding: 9px 11px; cursor: pointer; font-family: inherit; font-size: 0.9rem; text-align: left; transition: background 0.18s ease, color 0.18s ease; }
    .pkg-option:hover, .pkg-option:focus-visible { background: var(--gold-dim); color: var(--gold); outline: none; }
    .pkg-option.on { background: rgba(244,184,96,0.14); color: var(--gold); }
    .pkg-opt-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; color: var(--gold); border: 1px solid rgba(244,184,96,0.38); background: rgba(244,184,96,0.08); }
    .pkg-option > span { flex: 1; }
    .pkg-check { margin-left: auto; color: var(--gold); opacity: 0; flex-shrink: 0; }
    .pkg-option.on .pkg-check { opacity: 1; }
    /* Seçili koleksiyon bilgisi */
    .pkg-selected { display: flex; flex-direction: column; gap: 3px; background: rgba(244,184,96,0.06); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold); border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; font-size: 0.85rem; }
    .pkg-sel-label { color: var(--muted); }
    .pkg-sel-name { color: var(--text); font-size: 0.98rem; }
    .pkg-sel-note { color: var(--gold); font-size: 0.8rem; }
    /* Alt: fiyat + buton (kartlar hizalı kalsın) */
    .pkg-foot { margin-top: auto; }
    .pkg-price { font-family: 'Oswald', sans-serif; font-size: 1.7rem; color: var(--gold-text); letter-spacing: 0.02em; margin-bottom: 14px; }
    /* 61-G2: KAPI 3 (7'li) paket fiyatı — "…'dan başlayan". pkg-price kalıbı ama setCard('field') hedefi DEĞİL. */
    .k3-price { font-family: 'Oswald', sans-serif; color: var(--gold-text); letter-spacing: 0.02em; margin-bottom: 14px; }
    .k3-price #k3PackagePrice { font-size: 1.7rem; }
    .k3-price .k3-price-suffix { font-size: 0.9rem; color: var(--muted, #9a958a); }
    /* FAZ 53A: KART 2 Manyetik Saha BOYUT seçici (katalogdan üretilir; DB fiyatı). */
    .k2-sizes { display: flex; gap: 9px; flex-wrap: wrap; margin: 10px 0 4px; }
    .k2-size { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.9rem; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.16); border-radius: 9px; }
    .k2-size:has(input:checked) { border-color: var(--gold); background: rgba(244,184,96,0.08); }
    .k2-size input { width: 15px; height: 15px; accent-color: var(--gold); }
    .k2-size-txt { color: var(--gold-text); font-weight: 600; white-space: nowrap; }
    .k2-soon { font-size: 0.85rem; color: var(--muted, #9a958a); margin: 6px 0 0; }
    /* Faz 7B-vitrin: Forge XI kapı kartları — hub'la tutarlı lacivert-altın vurgu.
       Vitrin iskeleti (.pkg-card kalıbı, grid, buton) DEĞİŞMEZ; yalnız zemin/kenar tonu. */
    .pkg-fx { background: linear-gradient(180deg, #0d1526, var(--panel-2)); border-color: rgba(244,184,96,0.28); }
    /* Faz 10: kapı kartı görsel yuvası — kart görseli VARSA doldurulur, yoksa hidden kalır. */
    .pkg-fxmedia { height: 186px; margin: -6px -4px 14px; display: flex; align-items: center; justify-content: center; }
    .pkg-fxmedia img { max-height: 100%; width: auto; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(0,0,0,0.85); }
    /* Faz 10b: Core Edition ikincil CTA + mini kutu seçici */
    .fxc-buy { margin-top: 10px; }
    .fxbox-back { position: fixed; inset: 0; z-index: 95; background: rgba(4,6,12,0.86); display: flex; align-items: center; justify-content: center; padding: 20px; }
    .fxbox { width: min(420px, 94vw); background: linear-gradient(180deg, #0d1526, var(--panel-2)); border: 1px solid rgba(244,184,96,0.4); border-radius: 18px; padding: 22px; }
    .fxbox h3 { margin: 0 0 4px; font-family: Oswald, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-text); font-size: 1.1rem; }
    .fxbox p.fxbox-sub { margin: 0 0 16px; font-size: 0.86rem; color: var(--muted, #a7a29a); }
    .fxbox-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin-bottom: 10px; padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--ink, #f4f2ec); }
    .fxbox-item:hover { border-color: var(--gold); background: rgba(244,184,96,0.08); }
    .fxbox-item b { font-family: Oswald, sans-serif; letter-spacing: 0.03em; font-weight: 600; }
    .fxbox-item span { font-family: Oswald, sans-serif; color: var(--gold-text); white-space: nowrap; }
    .fxbox-close { width: 100%; min-height: 44px; margin-top: 4px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted, #a7a29a); cursor: pointer; }
    .pkg-fx:hover { border-color: var(--gold); }
    .pkg-fx .pkg-title { color: var(--gold-text); }
    .pkg-fx .pkg-tags li { border-color: rgba(244,184,96,0.30); }
    @media (min-width: 720px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1000px) {
      /* Faz 14: görünür 3 kart -> masaüstünde 3 sütun yan yana. (Gizli data-pkg="cards"
         kartı display:none olduğu için grid akışına girmez.) Tablet 720-999px'te 2 sütun
         kalır -> 2+1 düzeni; mobilde tek sütun. */
      .pkg-grid { grid-template-columns: repeat(3, 1fr); }
      /* Faz 9: satır yükseklikleri eşitlenir; featured kart ÖLÇEKLENMEZ (hizasızlık yaratıyordu).
         Vurgu, düzeni kaydırmayan altın kenar + gölge ile korunur. */
      .pkg-card.featured { z-index: 2; }
    }
    @media (prefers-reduced-motion: reduce) { .pkg-card, .pkg-menu, .pkg-caret { transition: none !important; } }

    /* =====================================================================
       FAZ 14 — ÜRÜNLER 3'lü sadeleştirme: ortak görsel-alan hizası, KART 1
       yelpaze + satın alma bloğu, KART 2 varyant/önizleme/büyüteç, KART 3 hizası.
       Saf CSS/SVG animasyon; JS minimal. Kütüphane YOK.
       ===================================================================== */
    /* Ortak: üç kartın ana görsel alanı AYNI yükseklikte (gözü yoran fark giderilir).
       Ürün-giriş polish: bant 208px -> 236px (yelpaze ~%20 büyüdüğü için kırpmasız pay). */
    .pkg14 .pkg-title { font-size: 1.32rem; }
    .pkg14-media {
      height: 236px; min-height: 236px; margin-bottom: 16px; }

    /* ---- KART 1 (Forge XI) + Custom Card: 3-kartlık yelpaze — SAYDAM zemin, kartlar büyür.
       .fx-mini-fan/.fxmf-* KAPI 1 (Forge XI) ve KAPI 2 (Custom Card) TARAFINDAN PAYLAŞILIR
       (tek bileşen, farklı <img src>) -> iki kart AYNI görsel ölçek/yoğunlukta kalır. ---- */
    .pkg14-media { position: relative; display: grid; place-items: end center; background: none;
      border: none; overflow: hidden; padding: 0; }
    .fx-mini-fan { position: relative; width: 100%; height: 100%; }
    /* Ürün-giriş polish: yelpaze artık dominant (~%20 büyük) — width clamp + yanal ofsetler
       orantılı büyütüldü (84/106px -> 101/127px, ±48px -> ±58px), en-boy oranı DEĞİŞMEDİ (height:auto).
       bottom: 4px -> 30px: büyüyen kart + rotate(±16deg) dönüşü, bottom-center eksenli döndüğünde
       yan kartların ALT köşesini bandın dışına taşırıyordu (tarayıcıda ölçülüp doğrulandı — 30px
       her genişlikte/hover'da kırpmasız kalıyor). "Kırpma yok" şartı için gerekli; görsel biçimi değiştirmez. */
    .fxmf-slot { position: absolute; left: 50%; bottom: 30px; width: clamp(101px, 40%, 127px);
      transform-origin: bottom center; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    .fxmf-card { width: 100%; height: auto; display: block; border-radius: 8px;
      filter: drop-shadow(0 14px 24px rgba(0,0,0,0.62)); }
    .fxmf-l { transform: translateX(calc(-50% - 58px)) rotate(-16deg) translateY(10px); z-index: 1; }
    .fxmf-c { transform: translateX(-50%) rotate(0deg) translateY(-6px) scale(1.08); z-index: 3; }
    .fxmf-r { transform: translateX(calc(-50% + 58px)) rotate(16deg) translateY(10px); z-index: 1; }
    .pkg14-collection:hover .fxmf-l, .pkg14-premium:hover .fxmf-l { transform: translateX(calc(-50% - 72px)) rotate(-22deg) translateY(4px); }
    .pkg14-collection:hover .fxmf-c, .pkg14-premium:hover .fxmf-c { transform: translateX(-50%) rotate(0deg) translateY(-14px) scale(1.11); }
    .pkg14-collection:hover .fxmf-r, .pkg14-premium:hover .fxmf-r { transform: translateX(calc(-50% + 72px)) rotate(22deg) translateY(4px); }

    /* FAZ 14E — KART 1 artık KEŞİF kartıdır: kutu seçici, ona bağlı "Sepete Ekle" butonu,
       saha onay kutusu ve "çok yakında" satırı ile bunlara ait TÜM stiller kaldırıldı.
       Kalan iskelet: iki keşif butonu + tekil-kart notu, foot tabanında. */
    .k1-explore { display: grid; gap: 8px; margin-bottom: 12px; }
    .k1-explore .btn { min-height: 44px; }
    .k1-single { display: inline-block; font-size: 0.8rem; color: var(--muted); text-decoration: none;
      margin: 2px 0 0; transition: color 0.2s ease; }
    .k1-single:hover { color: var(--gold); }
    /* Item 7: fiyat+CTA bloğu üç kartta da kart tabanına sabit (buton hizası). */
    .pkg14 .pkg-foot { margin-top: auto; }

    /* ---- "Senin Forge XI" taktik butonu glifi (kod-çizili SVG saha ikonu) ----
       60B-2 G1b: kaldırılmış 4-3-3/3-5-2 formasyon şeridinin ölü stili (varyant konteyneri,
       varyant düğmeleri + durumları, ad/onay etiketleri, ilk-dokunuş tetikleyicisi ve
       mini-maç keyframe'leri) çıkarıldı — DOM'da hiçbir yerde kullanılmıyordu. Aşağıdaki
       dört kural hayatta kalan TEK glife (span.k2-var-anim > svg.k2g) aittir; korunur. */
    .k2-var-anim { width: 32px; height: 46px; color: currentColor; }
    .k2-var-anim svg.k2g { width: 100%; height: 100%; display: block; }
    .k2g-pitch { opacity: 0.34; }
    .k2g-dot { transition: none; }

    /* Nötr "SAHA + SET" etiketi (eski "En Avantajlı Paket" rozetinin yerine) */
    .pkg14-field { position: relative; }
    /* ============ B4.1 — #urunler SPLIT-BAND (yalniz KAPI 2 kapsaminda) ============
       Sola yasli kucuk kart + dev bos alan yerine: kompakt iki kolonlu urun bandi.
       Mobil: tek kolon, dogal akis (baslik/gorsel/aciklama/fiyat/CTA). */
    #urunler { padding: clamp(48px, 6vw, 64px) 0; }
    /* [hidden] GUVENCESI (14B dersi): bolum gercekten gizli kalsin. */
    #urunler[hidden] { display: none !important; }
    #urunler .pkg-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .pkg-head { display: flex; flex-direction: column; gap: 2px; }
    #custom-card-kapi { max-width: 460px; margin: 0 auto; width: 100%; }
    #custom-card-kapi .pkg-body { margin-top: 4px; }
    #custom-card-kapi .pkg-foot .btn-block { width: 100%; }
    @media (min-width: 900px) {
      #urunler .pkg-grid { display: block; }
      #custom-card-kapi { display: grid; max-width: 960px;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        grid-template-areas: "media chip" "media head" "media body" "media foot";
        align-items: start; align-content: center; column-gap: clamp(32px, 4.5vw, 60px); row-gap: 6px;
        padding: 28px 34px; }
      #custom-card-kapi .pkg-tagchip { grid-area: chip; }
      #custom-card-kapi .pkg-head { grid-area: head; }
      #custom-card-kapi .pkg14-media { grid-area: media; height: 100%; min-height: 348px; align-self: stretch; }
      #custom-card-kapi .fx-mini-fan { transform: scale(1.5); transform-origin: center; }
      #custom-card-kapi .pkg-body { grid-area: body; margin-top: 2px; }
      #custom-card-kapi .pkg-desc { max-width: 52ch; }
      #custom-card-kapi .pkg-foot { grid-area: foot; margin-top: 14px; }
      #custom-card-kapi .pkg-foot .btn-block { width: auto; align-self: flex-start; padding-inline: 34px; }
    }

    .pkg-tagchip { display: inline-block; align-self: flex-start; margin-bottom: 12px;
      font-family: 'Oswald', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
      color: var(--gold-text); background: var(--gold-dim); border: 1px solid rgba(244,184,96,0.35);
      border-radius: 999px; padding: 4px 12px; }

    /* ---- KART 2 (FAZ 14C/14E): GERÇEK ÜRÜN FOTOĞRAFI + sağ altta bindirilmiş 3'lü yelpaze ----
       Kartlar sahanın ÜZERİNE DİZİLMEZ; fotoğrafın üstünde ayrı bir kompozisyondur.

       FAZ 14E item 5 — fotoğraf "kategori alanı büyümeden" daha büyük görünür:
       · Kaynak PNG 1080x1080 kare, ama çerçeveli saha yalnız genişliğin ~%54'ünü kaplar.
         208px'lik ortak görsel bandında `contain` kare olarak sığdığı için saha eskiden
         ~112px genişlikte, bandın ORTASINDA, iki yanı boş duruyordu.
       · Çözüm: object-position ile fotoğraf SOLA yaslanır ve transform ile ölçeklenir.
         Ölçek payı, bandın üstündeki/altındaki mevcut boşluğa (etiket ve başlık marjları)
         taşar; overflow:visible olduğu için KIRPILMAZ ve bandın kendi yüksekliği (208px)
         DEĞİŞMEZ -> üç kartın görsel hizası ve taban hizası korunur.
       · Yelpaze sağ altta kalır ama küçülüp daha sağa/aşağı çekilir: sahayı örtme oranı
         düşer, saha çizgileri okunur kalır. */
    .k2-media { position: relative; display: block; overflow: visible; }
    /* 67: KAPI 3 saha + 3 kart GRUBU orantılı büyür — medya kutusu yükseltilir (saha object-fit + fan % birlikte
       ölçeklenir). Kapı ayakları .pkg-foot margin-top:auto + grid stretch ile hizalı kalır; tagchip'e değmez. */
    .pkg14-field .pkg14-media { height: 268px; min-height: 268px; }
    .k2-photo { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block;
      transform: scale(1.22); transform-origin: center center;
      filter: drop-shadow(0 16px 30px rgba(0,0,0,0.55)); }
    /* KAPI 3 (founder): yelpaze artık ORTADA, sahanın ÖNÜNDE (eski sağ-alt yerine). Kartlar
       kod-şekilli (ornate + şeffaf kenar) olduğu için border-radius YOK; CTA hover'da açılır. */
    .k2-fan { position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px;
      width: 82%; height: 78%; pointer-events: none; }
    .k2fan-slot { position: absolute; left: 50%; bottom: 0; width: clamp(56px, 38%, 84px);
      transform-origin: bottom center; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    .k2fan-card { width: 100%; height: auto; display: block;
      filter: drop-shadow(0 12px 22px rgba(0,0,0,0.72)); }
    .k2fan-l { transform: translateX(-96%) rotate(-15deg) translateY(10px); z-index: 1; }
    .k2fan-r { transform: translateX(-4%) rotate(15deg) translateY(10px); z-index: 1; }
    .k2fan-c { transform: translateX(-50%) rotate(0deg) translateY(-6px) scale(1.12); z-index: 3; }
    .pkg14-field:hover .k2fan-l { transform: translateX(-114%) rotate(-21deg) translateY(2px); }
    .pkg14-field:hover .k2fan-r { transform: translateX(14%) rotate(21deg) translateY(2px); }
    .pkg14-field:hover .k2fan-c { transform: translateX(-50%) rotate(0deg) translateY(-14px) scale(1.15); }

    /* Özet satırı: seçim + katalog fiyatı + küçük İKİNCİL sepete ekle (kararlı alıcı kısayolu) */
    .k2-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    .k2-add-mini { flex: 0 0 auto; margin-left: auto; min-height: 34px; padding: 6px 12px; border-radius: 9px;
      font-family: 'Oswald', sans-serif; font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
      background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease; }
    .k2-add-mini:hover { border-color: var(--gold); color: var(--gold); }
    .k2-add-mini:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .k2-build { min-height: 46px; }

    /* ---- KART 3 (Custom Card, .pkg14-premium): artık KAPI 1 ile AYNI yelpaze bileşenini
       kullanır (.fx-mini-fan, farklı <img src> — bkz. yukarıdaki paylaşılan blok). Eski tekil
       "örnek kart" + kutu-zemin tedavisi (54B-öncesi FAZ 14E item 6) KALDIRILDI; bu iki kart artık
       eşdeğer yoğunlukta bir "eşleşmiş çift". ---- */

    /* Ürün-giriş polish: Forge XI + Custom Card kartları KENDİ kutularında (max-width + ortala)
       büyütülmüş yelpazeye göre daralır — grid hücresi (KAPI 3/saha ile PAYLAŞILAN 1fr sütun)
       DEĞİŞMEZ, yalnız bu iki kart kendi hücresi içinde ortalanıp dar kalır. KAPI 3 (saha, .pkg14-field)
       bu kuralın DIŞINDA — mevcut tam-genişlik davranışı KORUNUR (görev kapsamı dışı). */
    @media (min-width: 720px) {
      .pkg14-collection, .pkg14-premium { max-width: 460px; margin-left: auto; margin-right: auto; }
    }

    @media (max-width: 719px) {
      .pkg14-media { height: 214px; min-height: 214px; }
      /* Dar ekranda bant 214px'e iner (mobil de yelpaze büyümesi payını korur). */
      .k2-photo { transform: scale(1.18); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fxmf-slot, .k2fan-slot { transition: none !important; }
      /* 60B-2 G1b: mini-maç (k2g-ball/press/shuttle/halo/odot) reset'leri kaldırıldı — o
         formasyon animasyonları artık YOK; hayatta kalan glifin animasyonu zaten yok. */
    }

    /* SPLIT */
    .split { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
    .split-copy h2 { font-size: clamp(1.9rem, 6vw, 2.9rem); margin-bottom: 16px; }
    .split-copy > p { color: var(--muted); font-size: 1.05rem; margin-bottom: 20px; }
    .feature-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
    .feature-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-size: 0.98rem; }
    .feature-list svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
    .split-media { position: relative; display: grid; place-items: center; }
    .pitch-compo { position: relative; width: 100%; }
    .pitch-compo .board { width: 100%; border-radius: 14px; filter: drop-shadow(0 0 50px rgba(244,184,96, 0.14)) drop-shadow(0 26px 46px rgba(0, 0, 0, 0.6)); }
    .pitch-compo .pc-card { position: absolute; width: clamp(78px, 17vw, 124px); height: auto; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.7)); }
    .pitch-compo .pc-card.c1 { top: 30%; left: 26%; transform: translate(-50%, -50%) rotate(-9deg); z-index: 1; }
    .pitch-compo .pc-card.c2 { top: 44%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
    .pitch-compo .pc-card.c3 { top: 30%; left: 74%; transform: translate(-50%, -50%) rotate(9deg); z-index: 1; }

    .frame-stage { position: relative; display: grid; place-items: center; padding: 10px; }
    .frame-stage img { width: min(300px, 74%); height: auto; object-fit: contain; filter: drop-shadow(0 0 50px rgba(244,184,96, 0.22)); }
    .soon-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--gold-dim); color: var(--gold-text); border-radius: 999px; padding: 7px 15px; font-size: 0.78rem; letter-spacing: 0.05em; margin-bottom: 16px; text-transform: uppercase; font-weight: 600; }
    .mini-trust { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--muted); font-size: 0.92rem; }
    .mini-trust svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }

    /* STEPS */
    .steps { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .step { position: relative; padding: 26px 22px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), transparent); transition: border-color 0.2s; }
    .step:hover { border-color: var(--line); }
    .step .snum { font-family: 'Oswald', sans-serif; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; }
    .step .sicon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-dim); color: var(--gold); margin: 10px 0 14px; }
    .step .sicon svg { width: 24px; height: 24px; }
    .step h3 { font-size: 1.18rem; margin-bottom: 6px; }
    .step p { color: var(--muted); font-size: 0.92rem; }

    /* STORY */
    .story { background: linear-gradient(180deg, var(--panel-2), var(--bg)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
    .story-wrap { max-width: 820px; margin: 0 auto; text-align: center; }
    .story-wrap .trust-grid { margin-top: clamp(24px, 3.4vw, 34px); text-align: left; }
    .story-wrap h2 { font-size: clamp(2rem, 6vw, 3rem); margin: 12px 0 18px; }
    .story-wrap p { color: var(--muted); font-size: 1.06rem; line-height: 1.7; max-width: 65ch; margin-inline: auto; }

    /* TRUST */
    .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    /* B4.3: [hidden] guvencesi (14B dersi) — tr5 dogrulanana kadar gizli kalabilmeli. */
    .trust-item[hidden] { display: none !important; }
    .trust-item { display: flex; align-items: center; gap: 12px; padding: 18px 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); }
    .trust-item svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
    .trust-item span { font-size: 0.9rem; font-weight: 500; }

    /* FAQ */
    .faq-sub { text-align: center; color: var(--muted); max-width: 56ch; margin: 12px auto 0; font-size: 1.02rem; }
    .faq-wrap { max-width: 800px; margin: 36px auto 0; display: flex; flex-direction: column; gap: 12px; }
    .faq-item { position: relative; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease; }
    .faq-item:hover { border-color: var(--line); }
    .faq-item[open] { border-color: rgba(244,184,96,0.45); box-shadow: 0 12px 32px -18px rgba(0,0,0,0.75); }
    .faq-item summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 1rem; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: color 0.2s ease; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: var(--gold); }
    .faq-item summary .faq-q { flex: 1; min-width: 0; }
    /* + / - ikon (açılınca - olur) */
    .faq-ic { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; position: relative; border: 1px solid var(--line); color: var(--gold); transition: background 0.2s ease, border-color 0.2s ease; }
    .faq-ic::before, .faq-ic::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; transition: transform 0.28s ease, opacity 0.28s ease; }
    .faq-ic::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
    .faq-ic::after { width: 2px; height: 11px; transform: translate(-50%, -50%); }
    .faq-item[open] .faq-ic { background: var(--gold-dim); border-color: var(--gold); }
    .faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
    .faq-item .faq-a { padding: 0 20px 18px; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
    .faq-item[open] .faq-a { animation: faqOpen 0.32s ease; }
    @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
    /* İlk 3 kritik soru: altın vurgu */
    .faq-item.faq-key { background: linear-gradient(180deg, rgba(244,184,96,0.06), var(--panel)); box-shadow: inset 3px 0 0 var(--gold); }
    .faq-key-tag { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #241A20; background: linear-gradient(135deg,#FBE3B8,var(--gold)); padding: 2px 8px; border-radius: 999px; margin-right: 9px; vertical-align: middle; }
    /* Güven mesajı */
    .faq-trust { max-width: 800px; margin: 22px auto 0; display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1px solid rgba(244,184,96,0.4); border-radius: 14px; background: linear-gradient(180deg, rgba(244,184,96,0.08), transparent); color: var(--text); font-size: 0.95rem; line-height: 1.55; }
    .faq-trust svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--gold); margin-top: 1px; }
    @media (max-width: 560px) { .faq-item summary { font-size: 0.94rem; padding: 16px; } .faq-item .faq-a { padding: 0 16px 16px; } }
    /* Faz 16b: ilk 3 soru hep görünür; kalanlar "Daha fazla" ile yelpaze gibi açılır. */
    .faq-item.faq-extra { display: none; }
    .faq-wrap.is-expanded .faq-item.faq-extra { display: block; animation: faqFan 0.42s cubic-bezier(0.2,0.7,0.2,1) both; }
    @keyframes faqFan { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    .faq-more-btn { display: inline-flex; align-items: center; gap: 10px; margin: 6px auto 0; padding: 12px 22px; cursor: pointer;
      font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--gold-text);
      background: rgba(244,184,96,0.06); border: 1px solid rgba(244,184,96,0.4); border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease; }
    .faq-more-btn:hover { background: rgba(244,184,96,0.12); border-color: var(--gold); }
    .faq-more-btn .faq-less-t { display: none; }
    .faq-wrap.is-expanded .faq-more-btn .faq-more-t { display: none; }
    .faq-wrap.is-expanded .faq-more-btn .faq-less-t { display: inline; }
    .faq-more-ic { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; margin-bottom: 3px; }
    .faq-wrap.is-expanded .faq-more-btn .faq-more-ic { transform: rotate(-135deg); margin-bottom: -3px; }
    @media (prefers-reduced-motion: reduce) { .faq-wrap.is-expanded .faq-item.faq-extra { animation: none; } .faq-more-ic { transition: none; } }

    /* CTA */
    .cta-strip { text-align: center; }
    .cta-card { border: 1px solid var(--line); border-radius: 24px; padding: 46px 26px; background: radial-gradient(620px 300px at 50% 0%, rgba(244,184,96, 0.16), transparent 70%), var(--panel); }
    .cta-card h2 { font-size: clamp(1.9rem, 6vw, 2.9rem); margin-bottom: 12px; }
    .cta-card p { color: var(--muted); max-width: 48ch; margin: 0 auto 24px; font-size: 1.04rem; }

    /* ===== YOL HARİTASI (ROADMAP) ===== */
    .roadmap { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--bg)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); overflow: hidden; }
    .roadmap::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
        radial-gradient(680px 360px at 50% -12%, rgba(244,184,96,0.10), transparent 65%),
        radial-gradient(520px 320px at 88% 112%, rgba(47,217,255,0.06), transparent 60%); }
    .roadmap .container { position: relative; }
    .rm-sub { color: var(--gold); font-family: 'Oswald', sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0 12px; }
    .rm-desc { color: var(--muted); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; margin: 0 auto; }

    .rm-timeline { list-style: none; position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; padding-left: 30px; }
    .rm-timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
        background: linear-gradient(180deg, transparent, var(--gold) 12%, rgba(47,217,255,0.5) 88%, transparent); }
    .rm-card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px;
        transition: transform 0.32s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.32s ease, border-color 0.32s ease, opacity 0.5s ease; }
    .rm-card::after { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), rgba(47,217,255,0)); opacity: 0.45; transition: opacity 0.32s ease; }
    .rm-year { display: inline-block; font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: 0.02em; margin-bottom: 10px;
        background: linear-gradient(180deg, #f7e7ac, var(--gold) 55%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
    .rm-card-title { font-size: 1.18rem; line-height: 1.22; margin-bottom: 8px; color: var(--text); }
    .rm-text { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
    .rm-dot { position: absolute; left: -30px; top: 26px; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #FBE3B8, var(--gold));
        box-shadow: 0 0 0 4px rgba(244,184,96,0.12), 0 0 10px rgba(244,184,96,0.6); transition: box-shadow 0.32s ease; }
    /* HOVER: kart hafif yükselir + ışık efekti (abartısız) */
    .rm-card:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.7), 0 0 30px -8px rgba(244,184,96,0.40); }
    .rm-card:hover::after { opacity: 1; }
    .rm-card:hover .rm-dot { box-shadow: 0 0 0 4px rgba(244,184,96,0.18), 0 0 16px rgba(244,184,96,0.85), 0 0 26px rgba(47,217,255,0.35); }

    /* Vurgu alanı */
    .rm-highlight { display: flex; align-items: center; gap: 14px; justify-content: center; text-align: left; max-width: 780px; margin: 40px auto 0; padding: 20px 26px; border: 1px solid var(--line); border-radius: 16px;
        background: radial-gradient(560px 200px at 50% 0%, rgba(244,184,96,0.10), transparent 70%), var(--panel); }
    .rm-hl-icon { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
    .rm-highlight span { color: #ececec; font-size: 1.02rem; font-weight: 500; line-height: 1.5; }

    @media (min-width: 1040px) {
      /* DESKTOP: 5 yıl kartı yan yana + yatay timeline çizgisi */
      .rm-timeline { grid-template-columns: repeat(5, 1fr); gap: 16px; padding-left: 0; padding-top: 48px; margin-top: 44px; }
      .rm-timeline::before { left: 9%; right: 9%; top: 17px; bottom: auto; width: auto; height: 2px;
          background: linear-gradient(90deg, transparent, var(--gold) 14%, rgba(47,217,255,0.5) 86%, transparent); }
      .rm-dot { left: 50%; top: -36px; transform: translateX(-50%); }
      .rm-card:hover .rm-dot { transform: translateX(-50%); }
      .rm-highlight { text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) { .rm-card { transition: none; } }

    /* FOOTER */
    footer { border-top: 1px solid var(--line); background: var(--footer-bg); padding: 50px 0 26px; transition: background 0.3s ease; }
    .foot-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
    .foot-brand .brand { margin-bottom: 14px; }
    .foot-brand .brand img { width: auto; height: 30px; }
    .foot-brand .brand .wm { font-family: 'Oswald'; font-size: 1.2rem; letter-spacing: 0.14em; margin-left: 10px; }
    .foot-brand .brand .wm b { color: var(--gold); }
    .foot-brand p { color: var(--muted); font-size: 0.9rem; max-width: 34ch; }
    .foot-social { display: flex; gap: 10px; margin-top: 16px; }
    /* [hidden] TUZAGI (olculdu 2 Eylul 2026): `data-bekleyen-sosyal hidden` index.html'de
       ZATEN VARDI ama ustteki sinif kurali (0,1,0) `[hidden]{display:none}` tarayici
       varsayilanini eziyordu -> uc olu sosyal ikon CANLIDA GORUNUYORDU. Ayni tuzak
       assets/css/tasarla-adimlar.css'te de yasandi. Karsi kural nitelik ozgullugu (0,2,0)
       tasir, yani sinif kuralini yener; !important gerekmez. */
    .foot-social[hidden] { display: none; }
    .foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-soft); display: grid; place-items: center; color: var(--muted); transition: all 0.2s; }
    .foot-social a:hover { border-color: var(--gold); color: var(--gold); }
    .foot-social svg { width: 18px; height: 18px; }
    .foot-col h4 { font-size: 0.82rem; letter-spacing: 0.12em; color: var(--gold-text); margin-bottom: 14px; }
    .foot-col ul { display: flex; flex-direction: column; gap: 9px; }
    .foot-col a { color: var(--muted); font-size: 0.9rem; transition: color 0.2s; }
    .foot-col a:hover { color: var(--text); }
    .foot-bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; color: var(--muted); font-size: 0.82rem; }
    /* FAZ 14F: tema düğmesi stilleri KALDIRILDI (düğme yok, koyu tema sabit). */

    /* TOAST */
    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: linear-gradient(135deg, #F7CE8E, var(--gold)); color: #1a1a1a; font-weight: 600; padding: 13px 24px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 200; font-size: 0.92rem; }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ===== Sipariş başarı pop-up'ı (checkout tamamlanınca) ===== */
    .osx-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .osx-overlay.open { opacity: 1; visibility: visible; }
    .osx-card { position: relative; width: min(440px, 94vw); background: var(--drawer-bg, #2E2229); border: 1px solid rgba(244,184,96,0.4);
      border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8); padding: 34px 28px 28px; text-align: center;
      transform: translateY(14px) scale(.97); transition: transform .28s ease; }
    .osx-overlay.open .osx-card { transform: translateY(0) scale(1); }
    .osx-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(244,184,96,0.7), transparent); }
    .osx-icon { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, #F7CE8E, var(--gold, #F4B860));
      color: #1a1a1a; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(244,184,96,0.35); }
    .osx-title { font-family: Oswald, sans-serif; font-size: 1.4rem; font-weight: 800; margin: 0 0 10px; color: var(--text, #f2f2f4); }
    .osx-body { font-size: 0.98rem; line-height: 1.5; color: var(--muted, #c8c8cf); margin: 0; }
    .osx-order { font-size: 0.85rem; color: var(--gold, #F4B860); font-weight: 600; margin: 10px 0 0; }
    .osx-ok { margin-top: 22px; min-width: 150px; }

    /* REVEAL */
    .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.28s ease, transform 0.28s ease; }  /* B4.4: 0.6s bandin disindaydi */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }
    .reveal.show { opacity: 1; transform: none; }

    /* RESPONSIVE */
    @media (min-width: 560px) {
      .product-grid { grid-template-columns: repeat(2, 1fr); }
      .trust-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 768px) {
      section { padding: var(--sec-pad-d, 104px) 0; }  /* B4.3: masaustu ritim 96-120 bandi */
      .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
      /* 5 adim (founder): sabit 4 kolon yerine esnek izgara -> dar ekranda 2-3, genis ekranda 5. */
      .steps { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
      .split { grid-template-columns: 1fr 1fr; gap: 50px; }
      .split.alt .split-media { order: -1; }
      .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
    }
    @media (min-width: 900px) {
      .trust-grid { grid-template-columns: repeat(3, 1fr); } /* B4.3: 6 madde 3x2 dengeli (4 kolonda 4+2 topal kaliyordu) */
    }
    @media (min-width: 940px) {
      :root { --header-h: 76px; }
      .nav-menu { display: flex; gap: 20px; }
      .hamburger { display: none; }
      .mobile-menu { display: none !important; }
      .lang-toggle.in-drawer { display: none; }
      .hero { padding: 26px 0 64px; }
      .hero-grid { grid-template-columns: 1.04fr 1fr; gap: 36px;
        grid-template-areas: "head visual" "rest visual"; }
      .hero-visual { min-height: 500px; }
      .nav .brand img { height: 44px; }
    }
    /* ===== HERO BANNER (yeniden tasarım: ortalanmış, sinematik) ===== */
    /* HERO 02: yukseklik ~720-800 (100vh DEGIL); zemin --deep koyu sistemiyle surekli. */
    .teamforge-hero { position: relative; overflow: hidden; isolation: isolate;
      min-height: clamp(600px, 78vh, 760px); display: grid; place-items: center;
      padding: clamp(48px, 7vw, 88px) 0; background: var(--deep); }
    /* Arka plan: gece stadyumu foto + CSS atmosferi — bilinçli blur (tek katman) */
    /* HERO 02: agir stadyum foto (~1.3MB) KALDIRILDI -> kontrollu CSS radyal isik alani.
       Kartin arkasinda/ustunde yumusak sicak isik; disa dogru cok hafif serin atmosfer derinligi.
       Bant/neon YOK; kart hero'nun kendisidir. --deep zemini uzerine cizer. */
    .th-stadium { position: absolute; inset: 0; z-index: -3; pointer-events: none;
      background:
        radial-gradient(48% 52% at 68% 30%, rgba(255,238,196,0.16), transparent 62%),
        radial-gradient(40% 46% at 66% 22%, rgba(244,184,96,0.12), transparent 66%),
        radial-gradient(90% 70% at 50% 8%, rgba(120,140,180,0.06), transparent 70%),
        linear-gradient(180deg, #0a0d12 0%, var(--deep) 46%, #090b0f 100%); }
    /* Ust kenar hafif isik hattı (spotlight ima) — dusuk opacite, dekoratif. */
    .th-stadium::before { content: ""; position: absolute; inset: 0;
      background: radial-gradient(60% 30% at 62% -6%, rgba(255,244,214,0.10), transparent 60%); }
    /* Alt vinyet: hero -> showcase koyu sureklilige yumusak gecis (kalin ayirac YOK). */
    .th-overlay { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
        radial-gradient(120% 80% at 50% 40%, transparent 56%, rgba(0,0,0,0.34) 100%),
        linear-gradient(180deg, transparent 62%, rgba(9,11,15,0.65) 100%); }

    .th-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: clamp(8px, 1.8vw, 14px); transform: scale(1.05); transform-origin: center center; }
    /* HERO 02 eyebrow: kucuk antik-altin etiket — H1'den daha sessiz (hap degil, duz label). */
    .th-eyebrow { display: inline-block; color: var(--gold-text); font-family: 'Inter', sans-serif;
      font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

    /* Başlık + kart yelpazesi tek kolon: FORGE / kartlar / YOUR TEAM */
    /* HERO 02 H1: temiz editoryal baslik — FIFA/gaming outline-stroke KALDIRILDI.
       Oswald (mevcut sistem), yakin-beyaz, hafif negatif harf araligi, kontrollu satir yuksekligi.
       clamp mobil ~38 -> masaustu ~72px. text-transform: none override (global h1 uppercase'i ezer). */
    .th-title { display: flex; flex-direction: column; align-items: center; gap: 2px;
      font-family: 'Oswald', sans-serif; text-transform: none; font-weight: 600;
      line-height: 1.02; letter-spacing: -0.01em; font-size: clamp(2.4rem, 6.2vw, 4.5rem);
      color: var(--text); margin: 0; max-width: 12ch; }
    .th-title .th-line { display: block; }

    /* KART YELPAZESİ — FORGE ile YOUR TEAM arasında, ortalı */
    .hero-card-fan { position: relative; display: block; width: clamp(216px, 56vw, 380px); height: clamp(120px, 33vw, 214px); margin: clamp(0px, 0.6vw, 4px) auto;
      --sp1: clamp(48px, 13.5vw, 100px); --sp2: clamp(17px, 4.6vw, 33px); }
    .card-slot { position: absolute; left: 50%; bottom: 0; width: clamp(94px, 24.5vw, 160px); transform-origin: bottom center; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
    /* Faz 12: 5 slotluk Forge XI yelpazesi. Merkez slot (TEMPO) en önde ve en yüksek z-index'te. */
    .slot-l2 { transform: translateX(calc(-50% - var(--sp1))) rotate(-19deg) translateY(4px);  z-index: 1; }
    .slot-l1 { transform: translateX(calc(-50% - var(--sp2))) rotate(-9deg)  translateY(-10px); z-index: 2; }
    .slot-c  { transform: translateX(-50%)                    rotate(0deg)   translateY(-24px); z-index: 3; }
    .slot-r1 { transform: translateX(calc(-50% + var(--sp2))) rotate(9deg)   translateY(-10px); z-index: 2; }
    .slot-r2 { transform: translateX(calc(-50% + var(--sp1))) rotate(19deg)  translateY(4px);  z-index: 1; }
    .card-anim { display: block; opacity: 0; will-change: transform, opacity; }
    /* FAZ 16A (revize): kartlar TEMİZ ve KESKİN — gölge/glow/blur/degrade katmanı YOK.
       Yalnız kendi çerçevelerinin doğal parlaklığı görünür (drop-shadow kaldırıldı). */
    .hero-card { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 9px; }
    /* Merkez kart hafif büyük — yelpazenin odağı odur (yalnız ölçek, gölge yok). */
    .slot-c .hero-card { transform: scale(1.06); }
    /* HOVER: yelpaze AÇILIR (kartlar öne kalkar) — animasyon KORUNUR. Gölge/glow YOK. */
    .hero-card-fan:hover .slot-l2 { transform: translateX(calc(-50% - var(--sp1) - 22px)) rotate(-27deg) translateY(2px); }
    .hero-card-fan:hover .slot-l1 { transform: translateX(calc(-50% - var(--sp2) - 10px)) rotate(-13deg) translateY(-15px); }
    .hero-card-fan:hover .slot-c  { transform: translateX(-50%) rotate(0deg) translateY(-32px) scale(1.03); }
    .hero-card-fan:hover .slot-r1 { transform: translateX(calc(-50% + var(--sp2) + 10px)) rotate(13deg)  translateY(-15px); }
    .hero-card-fan:hover .slot-r2 { transform: translateX(calc(-50% + var(--sp1) + 22px)) rotate(27deg)  translateY(2px); }

    .th-lead { color: var(--muted); font-size: 1.12rem; line-height: 1.58; margin: 0; max-width: 30ch; font-weight: 400; }
    .th-sub { color: #c7c7c7; font-size: 1.0rem; margin: 0; max-width: 46ch; }
    .th-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
    /* HERO 02: birincil CTA header CTA ile ayni aile — ~50px, radius 10px, antik-altin. */
    .teamforge-hero .btn-gold { height: 50px; padding: 0 28px; border-radius: 10px; font-weight: 600; }
    .teamforge-hero .btn-ghost { height: 50px; padding: 0 26px; border-radius: 10px; }
    .teamforge-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.42); background: rgba(0,0,0,0.18); }
    .teamforge-hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
    .th-trust { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 10px; color: var(--muted); font-size: 0.84rem; }
    /* CARD-FIRST BATCH 1 — hero medya yuvası mimarisi. Yuva 7:10 kart oranını BAŞTAN rezerve eder
       (aspect-ratio -> içerik takılınca CLS yok). Görünüm bilinçli NÖTR: düz panel + ince çizgi;
       çerçeve/kart taklidi YOK (founder frame-asset kuralı). Gelecek mount'lar (foto/video/3D)
       yalnız yuva İÇERİĞİNİ değiştirir — bölüm/grid mimarisi sabit kalır. */
    /* ===================== CUSTOM CARD SHOWCASE (#ornekler) — BATCH 2 =====================
       MOBIL-ONCE: her grup yatay bir scroll-snap rail'i (kart ~76vw, sonraki karttan bir
       parca gorunur -> yatay kaydirilabilirligi anlatir). Masaustunde ayni DOM 3'lu grid'e
       doner. JS carousel YOK — native touch + CSS scroll-snap.
       Kart sanati SAYDAM: object-fit CONTAIN (cover ASLA — cerceve/bayrak/ayak kirpilmaz),
       golge sanatin DISINDA CSS ile verilir, dosyaya BASILMAZ.
       Renkler mevcut tokenlardan gelir; bolume ozel yeni palet YOKTUR. */
    /* ============ CARD-FIRST SHOWCASE COVERFLOW ============ */
    .sc { background: var(--deep); padding: clamp(48px, 6vw, 72px) 0; border-top: 1px solid var(--line-soft); overflow: hidden;
      --sc-card-w: clamp(200px, 56vw, 300px); }
    .sc-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(20px, 3vw, 28px); }
    .sc-eyebrow { color: var(--gold-text); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px; }
    .sc-title { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.1; color: var(--text); margin: 0 0 12px; }
    .sc-lead { color: var(--muted); font-size: 0.98rem; line-height: 1.62; margin: 0; }

    /* Sahne: 3D perspektif; merkez kart onde, yanlar geride. overflow gizli -> yatay tasma yok. */
    .sc-stage { position: relative; width: 100%; overflow: hidden;
      perspective: 1500px; perspective-origin: 50% 46%;
      display: flex; align-items: center; justify-content: center;
      touch-action: pan-y; user-select: none; -webkit-user-select: none;
      min-height: clamp(340px, 50vh, 500px); }
    .sc-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 16px; }
    .sc-cf { position: relative; list-style: none; margin: 0; padding: 0;
      width: var(--sc-card-w); height: calc(var(--sc-card-w) * 1.4296); transform-style: preserve-3d; }
    /* Slaytlar mutlak konumlu; JS transform/opacity ile yerlestirir. Gecis 0.5sn. */
    .sc-slide { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; cursor: pointer;
      transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), opacity 0.5s ease, filter 0.5s ease;
      will-change: transform, opacity; }
    /* Kart sanati DEGISMEDEN: contain (kirpma yok). Cerceve geometrisi konteynir oranindan gelir. */
    .sc-art { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
    .sc-slide.is-active .sc-art { filter: drop-shadow(0 26px 46px rgba(0,0,0,0.66)) drop-shadow(0 0 2px rgba(201,169,104,0.6)); }
    .sc-slide:not(.is-active) .sc-art { filter: drop-shadow(0 16px 28px rgba(0,0,0,0.6)) brightness(0.72) saturate(0.9); }
    /* Odak karti arkasi kisitli sicak altin isik. */
    .sc-slide.is-active::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%; width: 88%; height: 80%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 50% 42%, rgba(255,236,190,0.16), rgba(201,169,104,0.06) 48%, transparent 72%);
      filter: blur(12px); pointer-events: none; }

    .sc-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: clamp(12px, 2.2vw, 20px); }
    .sc-dots { display: flex; gap: 8px; }
    .sc-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.24); border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
    .sc-dot.on { background: var(--gold); transform: scale(1.3); }
    .sc-cta { align-self: center; }

    /* Hareket azaltma: slayt gecisleri kapanir (JS yine anlik konumlar). */
    @media (prefers-reduced-motion: reduce) {
      .sc-slide { transition: none; }
    }

    .th-copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(8px, 1.8vw, 14px); min-width: 0; }
    .th-fan-l { transform: translate(-50%, -50%) translateX(-66%) translateY(4%) rotate(-13deg); }
    .th-fan-r { transform: translate(-50%, -50%) translateX(66%)  translateY(4%) rotate(11deg); }
    .th-media { position: relative; width: min(88vw, 380px); margin: 4px auto 2px; }
    /* B4.1: gercek kart mount'u — arka plandan net ayrisma icin kontrollu golge + cok hafif
       perspektif. Donusum STATIKTIR (animasyon degil) -> reduced-motion etkilenmez. */
    /* HERO 02: kart SUNUM yoluyla fiziksel obje — hafif donus (-5deg), yumusak golge,
       cok kisitli antik-altin rim, zemin temas golgesi. Efektler dosyaya BASILMAZ; object-fit:contain,
       cerceve geometrisi asla kirpilmaz. Idle float cok hafif; reduced-motion'da kapali. */
    .th-media { position: relative; }
    .th-media::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 44%;
      width: 92%; height: 92%; transform: translate(-50%, -50%);
      background: radial-gradient(circle at 50% 42%, rgba(255,238,196,0.16), rgba(244,184,96,0.07) 46%, transparent 70%);
      filter: blur(6px); pointer-events: none; }
    .th-media::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 2%;
      width: 66%; height: 34px; transform: translateX(-50%);
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 72%);
      filter: blur(9px); pointer-events: none; }
    /* Kart gorseli SEFFAF siluetli -> golge KUTUYA degil SILUETE uygulanmali; ama `filter` +
       `rotate` ayni elemanda olunca tarayici karti ayri katmanda rasterize edip donduruyor ve
       kart YUMUSUYOR (founder: "cozunurlugu bozuldu"). Bu yuzden ON KART FILTRESIZ kalir;
       siluet golgesi AYNI gorselin arka kopyasina verilir (ek indirme yok, ayni URL). */
    /* ÜÇLÜ SAHNE: merkez kart kabın TAMAMINI kaplamaz — yan kartların iki yandan
       görünebilmesi için %68'e çekildi ve ortalandı. Oran/örtme kuralları aynen durur. */
    .th-media-card { position: relative; z-index: 1; display: block; width: 68%; height: auto;
      margin-inline: auto;
      aspect-ratio: 1080 / 1544; object-fit: contain; transform: rotate(-5deg); }
    .th-media-shadow { position: absolute; left: 50%; top: 0; z-index: 0; width: 68%; height: auto;
      aspect-ratio: 1080 / 1544; object-fit: contain; pointer-events: none;
      transform: translateX(-50%) rotate(-5deg) translateY(16px) scale(0.99);
      filter: brightness(0) blur(15px); opacity: 0.62; }
    /* UCLU KART SAHNESI — yan kartlar (Kerem, 2026-08-21).
       Merkez kart akista durur ve kutunun yuksekligini belirler; yan kartlar MUTLAK
       konumlanir -> yer kaplamaz, CLS uretmez. z-index 0: siluet golgesinin (0) ustune,
       merkez kartin (1) altina duserler. DOM sirasi golge -> yan -> merkez oldugu icin
       esit z-index'te yan kartlar golgenin uzerine boyanir.
       pointer-events yok: sahne dekoratiftir, tiklama merkez karta gitmez. */
    .th-fan-card { position: absolute; top: 50%; left: 50%; z-index: 0;
      width: 56%; height: auto; aspect-ratio: 1080 / 1544; object-fit: contain;
      opacity: .9; pointer-events: none; }
    .th-fan-l { transform: translate(-50%, -50%) translateX(-72%) translateY(4%) rotate(-15deg); }
    .th-fan-r { transform: translate(-50%, -50%) translateX(72%)  translateY(4%) rotate(13deg); }

    .th-media-frame { aspect-ratio: 7 / 10; width: 100%; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)); }
    .th-media[data-hero-media="placeholder"] .th-media-frame { opacity: 0.55; }
    @media (min-width: 900px) {
      /* HERO 02: sol ~44% kopya (dikey ortali) / sag ~56% kart. H1 max-width ~580px. */
      .th-inner--cf { flex-direction: row; align-items: center; justify-content: center; gap: clamp(32px, 5vw, 72px); }
      .th-inner--cf .th-copy { align-items: flex-start; text-align: left; flex: 0 1 46%; gap: clamp(14px, 1.4vw, 20px); }
      /* A1 (KOMUT A) — MOTTO SOLA HIZALI. `.th-title` kendi ic ekseninde
         `align-items: center` tasiyor (satir 694, tum genislikler icin) ve
         iki satiri 365px'lik kutunun ORTASINA cekiyordu. OLCULDU (1920 ve
         1280): kopyanin butun ogeleri sapma=0 iken `.th-title .th-line`
         61.2 px SAGDA duruyordu. Kural YALNIZ bu masaustu blogunda: mobil
         (<=899px) ortali duzenini AYNEN koruyor. Tipografi/boyut/renk
         dokunulmadi -- yalnizca hizalama. */
      .th-inner--cf .th-copy .th-title { max-width: 580px; align-items: flex-start; }
      .th-inner--cf .th-copy .th-lead { max-width: 30ch; }
      .th-inner--cf .th-copy .th-trust { justify-content: flex-start; }
      .th-inner--cf .th-media { width: clamp(360px, 37vw, 540px); margin: 0; flex: 0 0 auto; }
    }
    @media (max-width: 899px) {
      /* HERO 02 mobil: kart ONCE (header'in hemen altinda), sonra kopya. Tek kolon. */
      .th-inner--cf { flex-direction: column; }
      .th-inner--cf .th-media { order: -1; }
      .th-cta { width: 100%; }
      .teamforge-hero .btn-gold { flex: 1 1 100%; }
      .teamforge-hero .btn-ghost { flex: 1 1 100%; }
    }
    .th-trust span { display: inline-flex; align-items: center; gap: 7px; }
    .th-trust svg { width: 16px; height: 16px; color: var(--gold); }

    /* INTRO ANİMASYON (sayfa açılınca) */
    .hero-reveal { opacity: 0; animation: thFadeUp 0.7s ease both; }
    .th-badge.hero-reveal { animation-delay: 0.05s; } .th-title.hero-reveal { animation-delay: 0.15s; }
    .th-lead.hero-reveal { animation-delay: 0.30s; } .th-sub.hero-reveal { animation-delay: 0.40s; }
    .th-cta.hero-reveal { animation-delay: 0.50s; } .th-trust.hero-reveal { animation-delay: 0.60s; }
    /* HERO MEDYASI GIRIS ANIMASYONUNDAN MUAF (Kerem, 2026-08-21).
       Sikayet: 'hero'nun sagindaki gorsel alani bos/bulanik geliyor.'
       Sebep gorsel YOLU ya da env DEGIL - dosya her ortamda 200 doner. Sebep bu
       animasyonun kendisi: .th-media de .hero-reveal tasidigi icin kart opacity 0
       ile basliyordu. O aralikta arkadaki .th-media::before (radial altin parilti,
       blur 6px) tek basina goruluyor -> 'bos ve bulanik' izlenimi tam olarak budur.

       Kart ayni zamanda sayfanin LCP ogesi. opacity 0 ile basladigi icin tarayici
       LCP'yi boyanana kadar ERTELIYOR; reklam trafiginin gelecegi yavas mobil
       baglantida bu dogrudan olculen bir gecikme. Metin animasyonlari KORUNUR -
       muafiyet yalniz medya yuvasina verilir: urun aninda ekranda, kopya etrafinda
       belirir.

       Geri almak icin bu iki bildirimi silmek yeterli; markup'a dokunulmadi
       (card-first-batch1 ve faz16a-hero-yelpaze testleri sinif dizisini kilitliyor). */
    .th-media.hero-reveal { opacity: 1; animation: none; }
    .card-anim { animation: thCardIn 0.8s cubic-bezier(0.2,0.7,0.2,1) both; }
    .slot-l2 .card-anim { animation-delay: 0.55s; } .slot-l1 .card-anim { animation-delay: 0.68s; }
    .slot-c  .card-anim { animation-delay: 0.81s; } .slot-r1 .card-anim { animation-delay: 0.94s; }
    .slot-r2 .card-anim { animation-delay: 1.07s; }
    /* FAZ 16A (revize): kartların arkasındaki radyal altın parıltı (glow) KALDIRILDI. */
    @keyframes thFadeUp { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: none; } }
    @keyframes thCardIn { 0% { opacity: 0; transform: translateY(-80px) scale(0.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes thFanFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    /* Yelpaze salınım animasyonu (dokunmatik) KORUNUR (founder kararı 1). */
    @media (hover: none) { .hero-card-fan { animation: thFanFloat 5s ease-in-out infinite; } }
    /* ============================================================================
       FAZ 16A (revize) — MOBİL HERO: BÜYÜK yelpaze, başlık altında, efektsiz.
       Yelpaze flex `order` ile başlık blogunun ALTINA taşınır -> "FORGE / YOUR TEAM"
       tek okunur blok kalır. Mobilde kartlar BÜYÜR (~%90 ekran); merkez (TEMPO) en
       büyük ve en önde -> rol adı + User Line küçük ekranda bile okunur. Web ile aynı
       5 kart; hiçbiri gizlenmez. Animasyon KORUNUR; efekt (gölge/glow) YOK.
       Masaustu (>=940px) ölçek olarak DEĞİŞMEZ. ========================================= */
    @media (max-width: 768px) {
      .th-inner { transform: none; }
      .th-title { gap: 2px; }
      .th-title .th-line:not(.th-gold) { order: 1; }
      .th-title .th-gold { order: 2; }
      .th-title .hero-card-fan { order: 3; margin-top: clamp(12px, 3vw, 20px); }
      /* BÜYÜK yelpaze: görsel span ~%90 ekran; kutu büyük kartları TAM içersin. */
      .hero-card-fan { width: min(92vw, 560px); height: clamp(215px, 64vw, 430px);
        --sp1: clamp(42px, 11.5vw, 82px); --sp2: clamp(20px, 6vw, 40px); }
      .card-slot { width: clamp(140px, 42vw, 250px); }
      /* Büyük kartlar -> yukarı taşma azaltıldı (kendi kutularında, başlığa değmez). */
      .slot-l2 { transform: translateX(calc(-50% - var(--sp1))) rotate(-18deg) translateY(6px); }
      .slot-l1 { transform: translateX(calc(-50% - var(--sp2))) rotate(-9deg)  translateY(-2px); }
      .slot-c  { transform: translateX(-50%)                    rotate(0deg)   translateY(-8px); }
      .slot-r1 { transform: translateX(calc(-50% + var(--sp2))) rotate(9deg)   translateY(-2px); }
      .slot-r2 { transform: translateX(calc(-50% + var(--sp1))) rotate(18deg)  translateY(6px); }
      /* Merkez kart mobilde daha da baskın (yalnız ölçek — gölge yok). */
      .slot-c .hero-card { transform: scale(1.1); }
    }
    @media (min-width: 940px) {
      .teamforge-hero { padding: 52px 0; min-height: clamp(620px, 86vh, 940px); }
      .hero-card-fan { width: clamp(330px, 34vw, 440px); height: clamp(192px, 20vw, 268px); --sp1: clamp(94px, 9.4vw, 134px); --sp2: clamp(30px, 3vw, 44px); }
      .card-slot { width: clamp(148px, 15.5vw, 198px); }
      .th-inner { transform: scale(1.1); }
    }
    /* FAZ 16A (revize): reduced-motion'da TÜM yelpaze hareketi kapanır — açılma
       (thCardIn), salınım (thFanFloat) ve hover-açılma (transition) dahil. */
    @media (prefers-reduced-motion: reduce) {
      .hero-reveal, .card-anim { opacity: 1 !important; animation: none !important; }
      .hero-card-fan, .hero-card-fan .card-slot { animation: none !important; transition: none !important; }
    }

    /* =====================================================================
       FAZ 14C — GÖMÜLÜ "TAKIMINI KUR" BÖLÜMÜ (#takimini-kur)
       Eski "Manyetik Saha Deneyimi" bölümünün (tanıtım + bağımsız demo) YERİNE geçer.
       Saha/havuz görselleri /assets/css/forge-xi-builder.css'ten gelir (.bx-*); burada
       yalnız gömülü kabuk, mıknatıs noktası görünümü ve yapışkan yerleşim tanımlanır.
       ===================================================================== */
    /* --fx-* tokenları zaten /assets/css/forge-xi.css ile yükleniyor (o dosya global
       gövdeye DOKUNMAZ, yalnız .fx-page'i boyar) — burada tekrarlanmaz.
       Eksik olan tek şey accent tokenlarıdır: forge-xi-tactic.css bu sayfaya
       yüklenmez, o yüzden sistem accent'leri (registry'deki accent alanı) burada
       tanımlanır. Üç satır, tam sayfa stil dosyasını çekmeye gerek yok. */
    #takimini-kur [data-accent="electric-green"] { --acc: #2fe08a; --acc-dim: rgba(47,224,138,0.16); }
    #takimini-kur [data-accent="copper"]         { --acc: #b87333; --acc-dim: rgba(184,115,51,0.18); }
    #takimini-kur [data-accent="gold"]           { --acc: var(--fx-gold); --acc-dim: rgba(244,184,96,0.18); }

    .tk { position: relative; background: #050506; border-top: 1px solid var(--line-soft);
      padding: clamp(40px, 6vw, 76px) 0 clamp(40px, 6vw, 76px); scroll-margin-top: 76px; }
    /* [hidden] KORUMASI (14B'de öğrenilen canlı hata): yazar display kuralları
       [hidden] özniteliğini ezmemeli — alt bloklar gerçekten gizli kalsın.
       FAZ 14E: bölümün KENDİ gizleme kuralı listeden ÇIKTI — bölüm artık hiç gizlenmiyor. */
    .tk-buy[hidden], .tk-addon[hidden], .tk-progress[hidden],
    .tk-soon[hidden], .tk-empty[hidden], .tk-auto[hidden], .tk-clear[hidden],
    .tk-samplenote[hidden] { display: none !important; }
    /* CARD-FIRST BATCH 1 — [hidden] koruması bölüm/kart seviyesine genişletildi (aynı 14B dersi):
       (a) .pkg-card { display:flex } hidden'ı EZİYORDU -> parked KAPI 3 markup'ta hidden olmasına
           rağmen canlıda görünür kalabiliyordu (canlı hata, founder onayıyla düzeltildi);
       (b) Card-First: KAPI 1 (Forge XI seti), #forge-xi-entry rayı ve #takimini-kur aktif ana sayfa
           akışından ÇIKARILDI ama SİLİNMEDİ — hidden ile taşınır; bu kurallar gizliliği garantiler.
       #takimini-kur yalnız istenerek açılır: /#takimini-kur derin bağlantısı ve .tk-open tıklaması
       ac() içinde hidden'ı kaldırır (studio-benzeri isteğe bağlı açılış; vercel.json yönlendirmeleri
       çalışır kalır). */
    .pkg-card[hidden] { display: none !important; }
    #forge-xi-entry[hidden], #takimini-kur[hidden] { display: none !important; }
    /* BATCH 1.1: SSS maddesi de aynı güvenceyle gizlenir (details UA display:block'u yazar
       kuralları ezmesin — .pkg-card'da yaşanan canlı hatanın tekrarını önler). */
    .faq-item[hidden] { display: none !important; }
    /* BATCH 3'te yorum bolumu GIZLENMISTI (onayli yorum yokken bos sosyal kanit gosteriyordu).
       FOUNDER KARARI (2026-08-17): bolum ACILDI. Guvence kurali KALIR — tekrar gizlemek
       gerekirse section'a `hidden` eklemek yeterli. Kartlar YALNIZ /api/reviews'ten gelen
       ONAYLI gercek yorumlarla dolar (sahte yorum/sosyal kanit YOK). */
    #reviews[hidden] { display: none !important; }
    .tk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
    .tk-head h2 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.04em; font-size: clamp(1.7rem, 4.4vw, 2.6rem); margin: 6px 0 0; }
    .tk-lead { color: var(--muted); font-size: 0.98rem; line-height: 1.6; margin: 10px 0 0; max-width: 56ch; }
    /* FAZ 14E — "Takımını Kur" CTA'ları bölümü AÇMAZ, buraya kaydırır. Kaydırma bittiğinde
       kullanıcı nereye geldiğini görsün diye bölüm kısa bir kez altın parlar. */
    /* Bildirilen hata: "Takımını Kur" (header) tıklanınca bölüm bir an KOYU görünüp krem
       rengine dönüyordu. Kök neden: bu animasyon .tk'nin ESKİ koyu temasından (background:
       #050506) kalmıştı; bölüm FAZ 16'da açık/krem temaya (.tf-section--light, var(--l-bg))
       geçince animasyon güncellenmedi ve CSS animation'lar cascade'i EZDİĞİ için 1.5sn boyunca
       zorla koyu arka plan çiziyordu. Amaç zaten hep sadece altın box-shadow parlamasıydı —
       background satırları kaldırıldı; artık .tf-section--light'ın kendi arka planı hiç bozulmaz. */
    .tk.is-flash { animation: tkFlash 1.5s ease-out 1; }
    @keyframes tkFlash {
      0%   { box-shadow: inset 0 0 0 0 rgba(244,184,96,0); }
      18%  { box-shadow: inset 0 0 0 2px rgba(244,184,96,0.55); }
      100% { box-shadow: inset 0 0 0 0 rgba(244,184,96,0); }
    }
    @media (prefers-reduced-motion: reduce) { .tk.is-flash { animation: none; } }

    .tk-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }

    /* ---- SOL: taktik seçici + önizleme saha (+ 11/11'de fiyat/sepet) ---- */
    .tk-tactics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
    .tk-tactics.tk-syswrap { display: block; }   /* 67b: sistem seçici dropdown -> tek sütun (grid değil) */
    .tk-sysselect { margin-bottom: 0; }
    .tk-tac { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
      border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,0.03);
      color: var(--muted); cursor: pointer; font-family: inherit;
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
    .tk-tac:hover { border-color: var(--gold); color: var(--gold); }
    .tk-tac:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .tk-tac[aria-checked="true"] { border-color: var(--gold); background: rgba(244,184,96,0.12); color: var(--gold); }
    .tk-tac-name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; }
    /* 60B-2 G1b: kaldırılmış formasyon butonlarının hover/seçili glif animasyonu (yalnız
       o butonlarda anlamlıydı) çıkarıldı; hayatta kalan tek buton aşağıdaki serbest gliftir. */
    /* Senin Forge XI: sabit nokta yok -> noktalar ızgarada serbestçe yer değiştirir. */
    .tk-tac:hover .tk-anim-free .tkg-free, .tk-tac[aria-checked="true"] .tk-anim-free .tkg-free { animation: tkfree 2.8s ease-in-out infinite; }
    .tk-anim-free .tkg-free:nth-of-type(2) { animation-delay: 0.5s; }
    .tk-anim-free .tkg-free:nth-of-type(3) { animation-delay: 1s; }
    @keyframes tkfree { 0%,100% { transform: translate(0,0); opacity: 0.55; } 50% { transform: translate(6px,-6px); opacity: 1; } }

    .tk-pitchbox { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; }
    .tk-pitch-title, .tk-pool-title, .tk-info-title { font-family: 'Oswald', sans-serif; text-transform: uppercase;
      letter-spacing: 0.08em; font-size: 0.84rem; color: var(--text); margin: 0 0 12px; }
    .tk-empty { color: var(--muted); font-size: 0.86rem; text-align: center; padding: 40px 8px; margin: 0; }
    .tk-progress { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.05em;
      font-size: 0.82rem; color: var(--muted); margin: 12px 0 0; text-align: center; }
    .tk-progress .tk-count { color: var(--gold); font-size: 1.2rem; }

    /* ÖNİZLEME MANYETİK SAHA — ürün fotoğrafındaki estetik: siyah zemin, BEYAZ çizgiler.
       FAZ 14D: saha HEYBETLİ. Genişlik üç sınırın en küçüğüdür:
         (1) sütunun kendisi, (2) sert üst sınır, (3) VİEWPORT payı — saha 68/104
       oranında olduğu için yükseklik payından genişlik türetilir (h × 0.65). Üçüncü
       sınır olmadan yapışkan saha uzun ekranlarda taşıyordu. */
    /* --tk-rezerv: sahanın ÜSTÜNDE/ALTINDA kalan yapışkan sütun içeriği (taktik seçici,
       başlık, dolgu ve — yan şerit yokken — sayaç/eylemler). Saha bu payı bırakacak kadar
       büyür; aksi hâlde yapışkan blok viewport'u aşıp kendi içinde kayıyor. */
    .tk-pitchbox { --tk-rezerv: 340px; }
    .tk-pitch .bx-pitch2 { max-width: min(100%, 520px, calc((100vh - var(--tk-rezerv)) * 0.65));
      background: linear-gradient(180deg, #101215 0%, #060708 100%);
      border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 0 60px rgba(0,0,0,0.8); }
    .tk-pitch .bx-pl { stroke: #ffffff; stroke-width: 0.55; opacity: 0.55; }
    /* OTOMATİK DİZ — taktik seçilince belirir; kısa bir gösteri anı başlatır. */
    .tk-auto { display: block; width: 100%; margin-top: 12px; padding: 11px 14px; cursor: pointer;
      font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem;
      color: var(--gold); background: rgba(244,184,96,0.08); border: 1px solid var(--gold-dim, rgba(244,184,96,0.4));
      border-radius: 10px; transition: background 0.2s ease, border-color 0.2s ease; }
    .tk-auto:hover { background: rgba(244,184,96,0.16); border-color: var(--gold); }
    .tk-auto:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    /* BOŞALT — yıkıcı olduğu için sessiz stil + iki basış onayı (motor sıfırlamasını çağırır). */
    .tk-clear { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; cursor: pointer;
      font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem;
      color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 10px;
      transition: color 0.2s ease, border-color 0.2s ease; }
    .tk-clear:hover { color: var(--text); border-color: var(--muted); }
    .tk-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .tk-clear.is-armed { color: #e0574e; border-color: #e0574e; }
    .tk-samplenote { margin: 8px 0 0; font-size: 0.76rem; color: var(--muted); text-align: center; font-style: italic; }
    /* FAZ 14D-1 — SAHA + META ŞERİT. Dar ekranda alt alta (varsayılan), geniş masaüstünde
       yan yana: sayaç/eylemler sahanın yanına geçince sol sütun kısalır ve "Sepete Ekle"
       kaydırmadan görünür. Saha KÜÇÜLMEZ; şerit sahanın kullanmadığı yatay boşluğu alır. */
    .tk-stage { display: block; }
    .tk-meta { margin-top: 12px; }
    /* MIKNATIS NOKTALARI — boş: soluk metalik daire (iç gölge). */
    .tk-pitch .bx-slot2-dot { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.20);
      background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 48%, rgba(0,0,0,0.6) 100%);
      box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), inset 0 -1px 2px rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.5); }
    .tk-pitch .bx-slot2-pos { color: rgba(255,255,255,0.55); }
    /* FAZ 14D — HEDEF NOKTA: gömülü yüzeyde ALTIN nabız/parıltı (mıknatıs halkasıyla aynı
       dil; sistem aksanı yerine ürünün altın çizgisi). Tam sayfa yüzeyi aksanını korur. */
    .tk-pitch .bx-slot2.is-target .bx-slot2-dot { border-color: var(--gold);
      box-shadow: 0 0 0 5px rgba(244,184,96,0.22), inset 0 2px 5px rgba(0,0,0,0.6); }
    .tk-pitch .bx-slot2.is-target .bx-slot2-dot::before { box-shadow: 0 0 18px 6px rgba(244,184,96,0.42); }
    .tk-pitch .bx-slot2.is-target .bx-slot2-pos { color: var(--gold); }
    /* Dolu: altın halka. Serbest modda (bx-free) kart bırakıldığı yerde AYNI halka oluşur. */
    .tk-pitch .bx-slot2.is-filled::before { content: ''; position: absolute; left: 50%; top: 50%;
      width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
      border: 2px solid rgba(244,184,96,0.85);
      box-shadow: 0 0 14px rgba(244,184,96,0.32), inset 0 2px 5px rgba(0,0,0,0.6); }
    /* FAZ 14D — sahadaki kart TAM görünür (14C'de alt %38'i kırpılıyordu) ve saha
       oranıyla birlikte büyür: kart okunur, çerçevesi seçilir. */
    /* KART BOYUTU SAHAYA BAĞLI (vw'ye değil): 11 kartın orantılı durması yalnız
       kart/saha oranına bakar. 839x1200 kart, 68x104 saha -> %23 genişlik = %21.5
       yükseklik. Canonical hat aralıkları 12-16 birim olduğundan örtüşme kartın
       ~%30'unu geçmez: kartlar birbirine yaslanır ama hiçbiri diğerini kapatmaz.
       vw tabanlı ölçek kısa/geniş pencerede oranı bozuyordu (saha yüksekliğe göre
       küçülürken kart büyümeye devam ediyordu) — cqw bu bağı kesin kurar. */
    .tk-pitch .bx-role.is-onpitch { width: clamp(58px, 5vw, 78px); }        /* cqw yoksa yedek */
    .tk-pitch .bx-role.is-onpitch.has-card { width: clamp(52px, 4.5vw, 70px); }
    @supports (width: 1cqw) {
      .tk-pitch .bx-pitch2 { container-type: inline-size; }
      .tk-pitch .bx-role.is-onpitch { width: 26cqw; }
      .tk-pitch .bx-role.is-onpitch.has-card { width: 23cqw; }
    }
    /* Kart büyüyünce en alttaki nokta (kaleci, y=6) kartın yarısını sahanın dışına
       taşıyor; saha `overflow:hidden` olduğu için kartın altı KESİLİYORDU. Gömülü
       yüzeyde kırpma kalkar: kart noktasının üstünde bütün durur (gerçek sahada da
       kenardaki mıknatıza konan kart tahtadan biraz taşar). Saha çerçevesi, zemini
       ve çizgileri kutunun kendisinde olduğu için görünüm değişmez. */
    .tk-pitch .bx-pitch2 { overflow: visible; }
    .tk-pitch .bx-role.is-onpitch.has-card .bx-card { aspect-ratio: 839 / 1200; }   /* kırpma YOK */
    .tk-pitch .bx-role.is-onpitch.has-card::after { display: none; }                /* alt gölge bandı gereksiz */
    .tk-pitch .bx-slot2.is-filled { z-index: 4; }
    /* FAZ 14D-1 — KALECİ DAİMA ÜSTTE: saha en altta olduğu için stoper kartları
       kalecinin üstüne biniyordu; kaleci kartı artık hep önde çizilir. */
    .tk-pitch .bx-slot2.is-gk { z-index: 7; }
    .tk-pitch .bx-slot2.is-filled:hover, .tk-pitch .bx-slot2.is-filled:focus-within { z-index: 9; }

    /* FİYAT + SEPET — 11/11'de belirir; katalog kapısı kapalıyken tek satır "çok yakında". */
    .tk-buy { margin-top: 14px; display: flex; flex-direction: column; gap: 10px;
      background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
    .tk-buy-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .tk-buy-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.9rem; }
    .tk-buy-price { font-family: 'Oswald', sans-serif; color: var(--gold-text); white-space: nowrap; font-size: 1.05rem; }
    /* FAZ 53A: Manyetik Saha BOYUT varyantı — onay kutusu satırı + boyut radioları (DB fiyatı). */
    .tk-addon { display: flex; flex-direction: column; gap: 7px; font-size: 0.85rem; color: var(--text); }
    .tk-addon-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
    /* FAZ 54A: magnet anahtarı + magnetsiz-saha bilgilendirmesi */
    .tk-magnet { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--text); cursor: pointer; }
    .tk-magnet input { width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
    .tk-magnet-price { color: var(--gold-text); font-weight: 600; white-space: nowrap; }
    .tk-magnet-note { font-size: 0.78rem; color: var(--muted, #9a958a); font-style: italic; margin: 2px 0 0; }
    .tk-addon input { width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
    .tk-addon-sizes { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 26px; }
    .tk-addon-sizes[hidden] { display: none; }
    .tk-size { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.8rem; padding: 4px 9px; border: 1px solid rgba(255,255,255,0.16); border-radius: 7px; white-space: nowrap; }
    .tk-size input { width: 14px; height: 14px; accent-color: var(--gold); }
    .tk-size-txt { color: var(--gold-text); font-weight: 600; }
    /* 61-G3: set akışında saha boyutu OTOMATİK — radio yerine bilgi metni ("Setine uygun boyut: …"). */
    .tk-size-auto { font-size: 0.82rem; color: var(--muted, #9a958a); }
    .tk-size-auto { display: inline-block; }
    .tk-add { min-height: 46px; }
    .tk-add[disabled] { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.35); box-shadow: none; }
    .tk-soon { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 0; }

    /* ---- SAĞ: taktik bilgisi + rol kartı havuzu ---- */
    .tk-info { background: var(--panel-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--gold);
      border-radius: 14px; padding: 16px; margin-bottom: 16px; }
    .tk-info-text { color: var(--muted); font-size: 0.94rem; line-height: 1.62; margin: 0; }

    /* ---- FAZ 15: katlanır kutular (Sistem hakkında · 3 soruluk test) ----
       Emekli /forge-xi/system/* ve /forge-xi/tactic sayfalarının içeriği buraya taşındı.
       Katlanır oldukları için bölümün ana akışını (saha + havuz) uzatmazlar. */
    .tk-fold { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 14px;
      margin-bottom: 16px; overflow: hidden; }
    .tk-fold[hidden] { display: none; }
    .tk-fold-sum { list-style: none; cursor: pointer; padding: 13px 16px; font-family: 'Oswald', sans-serif;
      text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--text);
      display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .tk-fold-sum::-webkit-details-marker { display: none; }
    .tk-fold-sum::after { content: "+"; color: var(--gold); font-size: 1.1rem; line-height: 1; flex: none; }
    .tk-fold[open] .tk-fold-sum::after { content: "−"; }
    .tk-fold-sum:hover { color: var(--gold-text); }
    .tk-fold-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
    .tk-fold-body { padding: 0 16px 16px; }

    /* Sistem hakkında: kart okuma sırası + kutu içeriği (canonical sets registry'sinden). */
    .tk-sa-label { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.14em;
      font-size: 0.66rem; color: var(--gold); margin: 12px 0 6px; }
    .tk-sa-text { color: var(--muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 6px; }
    .tk-sa-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: sa; }
    .tk-sa-order li { display: flex; gap: 8px; align-items: baseline; font-size: 0.85rem; color: var(--text); }
    .tk-sa-order li::before { counter-increment: sa; content: counter(sa); font-variant-numeric: tabular-nums;
      color: var(--gold-text); font-size: 0.72rem; min-width: 16px; }
    .tk-sa-order .n { color: var(--muted); font-size: 0.78rem; }
    .tk-sa-box { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
    .tk-sa-box li { font-size: 0.85rem; color: var(--text); display: flex; gap: 8px; }
    .tk-sa-box li::before { content: "·"; color: var(--gold); }

    /* 3 soruluk test */
    .tk-q { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
    .tk-q:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
    .tk-q-prompt { font-size: 0.9rem; color: var(--text); margin: 0 0 8px; line-height: 1.35; }
    .tk-q-opts { display: grid; gap: 7px; }
    .tk-q-opt { text-align: left; background: transparent; border: 1px solid var(--line-soft); border-radius: 10px;
      padding: 9px 13px; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
    .tk-q-opt:hover { border-color: var(--line); color: var(--text); }
    .tk-q-opt[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-text); }
    .tk-q-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .tk-q-result { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: 12px;
      background: rgba(244,184,96,0.06); }
    .tk-q-result[hidden] { display: none; }
    .tk-q-res-t { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.06em;
      font-size: 0.95rem; color: var(--gold-text); margin: 0 0 4px; }
    .tk-q-res-l { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin: 0; }
    .tk-q-reset { margin-top: 10px; background: transparent; border: 0; color: var(--gold-text); font: inherit;
      font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 2px; }

    .tk-poolbox { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; }
    /* Havuz POZİSYON GRUPLU: 4'lü satırlar (KALECİ / DEFANS / ORTA SAHA / FORVET).
       FAZ 14D: saha büyüdüğü için havuz SIKILAŞIR — 4'lü düzen korunur, aralıklar daralır. */
    .tk-pool .bx-pool-grouped { display: grid; grid-template-columns: 1fr; gap: 11px; }
    .tk-pool .bx-poolgrp-title { font-family: 'Oswald', sans-serif; text-transform: uppercase;
      letter-spacing: 0.14em; font-size: 0.7rem; color: var(--gold); margin: 0 0 6px;
      border-bottom: 1px solid var(--line-soft); padding-bottom: 5px; }
    .tk-pool .bx-poolgrp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px; align-items: start; }
    /* Kart genişliği sınırlanmazsa 4 sütun geniş ekranda ~195px'e şişip havuzu
       gereksiz uzatıyor (kart yüksekliği 839/1200 orana bağlı). */
    .tk-pool .bx-pool2 .bx-role { max-width: 124px; width: 100%; margin: 0 auto; }

    /* ---- Masaüstü: iki sütun + YAPIŞKAN saha ----
       FAZ 14D: sol sütun sabit 372px değil, alanın ~%46'sı ("duvarda sergilenecek ürün").
       Yapışkan sütun viewport'u aşarsa kendi içinde kayar — sayfa akışı bozulmaz. */
    @media (min-width: 900px) {
      /* align-items: start (taban kural) sol sütunu İÇERİĞİ kadar yüksek bırakıyordu;
         yapışkan çocuk kendi kabından uzun olamayacağı için sticky hiç devreye girmiyordu
         (14D bulgusu). Masaüstünde sütun satır yüksekliğine gerilir -> saha gerçekten yapışır. */
      .tk-grid { grid-template-columns: 46% minmax(0, 1fr); gap: 26px; align-items: stretch; }
      /* Havuzda kaydırdıkça sol saha ekranda kalır. */
      /* Taşma kontrolü güvenlik ağıdır; kaydırma çubuğu çizilmez (sütunun yanındaki
         ince çubuk arayüz hatası gibi okunuyordu). Tekerlek/klavye çalışmayı sürdürür. */
      /* FARE TEKERLEĞİ TUZAĞI (14D-3 hatası): `overscroll-behavior: contain` bu kutunun
         sonuna gelince kaydırmanın SAYFAYA devredilmesini engelliyordu -> imleç sahanın
         üzerindeyken sayfa hiç kaymıyordu. Devir açık; kutu zaten nadiren taşar. */
      .tk-sticky { position: sticky; top: 76px; max-height: calc(100vh - 88px);
        overflow-y: auto; scrollbar-width: none; }
      .tk-sticky::-webkit-scrollbar { width: 0; height: 0; }
      /* Alt pay: kaleci kartı en alttaki noktada durduğu için saha çerçevesinden
         biraz taşar (kart kırpılmasın diye kırpma kapalı). */
      .tk-pitchbox { padding: 10px 10px 32px; }
    }
    /* ≥1280px: sahanın genişliği zaten VİEWPORT YÜKSEKLİĞİ ile sınırlı olduğu için
       şeridin aldığı yatay yer sahayı küçültmez. `flex-basis: 0` şart: `auto` olsaydı
       .bx-pitch2'nin width:100%'i döngüye girip sahayı sıfıra çökertiyor. */
    @media (min-width: 1280px) {
      /* Şerit artık fiyat/sepet alanını da taşıyor -> sol sütun genişler, şerit 168px.
         Rezerv, yapışkan bloğun viewport'u aşmaması için ölçülerek seçildi. */
      .tk-grid { grid-template-columns: 52% minmax(0, 1fr); }
      .tk-pitchbox { --tk-rezerv: 340px; }
      .tk-stage { display: flex; align-items: flex-start; gap: 12px; }
      .tk-stage > .tk-pitch { flex: 1 1 0; min-width: 0; }
      .tk-meta { flex: 0 0 168px; margin-top: 0; }
      .tk-meta .tk-buy { margin-top: 12px; padding: 10px; gap: 8px; }
      .tk-meta .tk-buy-row { flex-direction: column; align-items: flex-start; gap: 2px; }
      .tk-meta .tk-add { min-height: 42px; font-size: 0.9rem; }
      .tk-meta .tk-addon { font-size: 0.76rem; align-items: flex-start; }
      .tk-progress { margin-top: 0; text-align: left; }
      .tk-samplenote { text-align: left; }
    }
    /* ---- Mobil: tek sütun, üstte küçük YAPIŞKAN mini saha ---- */
    @media (max-width: 899px) {
      /* FAZ 14D — mobil yapışkan blok EKRANI YUTMAMALI: 11/11'de fiyat paneli de bu
         bloğun içinde olduğu için yükseklik kontrolsüz büyüyordu (%80+). Blok ekranın
         2/3'ünü aşarsa kendi içinde kayar; saha ve taktik seçici hep görünür kalır. */
      .tk-left { position: sticky; top: 0; z-index: 6; background: #050506;
        padding: 8px 0 10px; border-bottom: 1px solid var(--line-soft);
        max-height: 66vh; overflow-y: auto; }   /* devir AÇIK: sayfa kaydırması hapsolmaz */
      .tk-tactics { grid-template-columns: repeat(3, 1fr); gap: 6px; }
      .tk-tac-name { font-size: 0.68rem; }
      .tk-pitchbox { padding: 8px 8px 20px; }   /* taşan kaleci kartı için alt pay */
      .tk-pitch-title { display: none; }
      /* Mini saha da büyür ama sticky kalabilmesi için viewport'un yarısını geçmez. */
      .tk-pitch .bx-pitch2 { max-width: min(192px, 46vw, calc((100vh - 300px) * 0.65)); }
      /* Mini sahada oran birazcık büyük tutulur (kart okunabilsin), yine sahaya bağlı. */
      .tk-pitch .bx-role.is-onpitch { width: 46px; }
      .tk-pitch .bx-role.is-onpitch.has-card { width: 41px; }
      .tk-pitch .bx-slot2-dot { width: 22px; height: 22px; }
      .tk-pitch .bx-slot2.is-filled::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
      .tk-auto { margin-top: 8px; padding: 9px 12px; font-size: 0.7rem; }
      .tk-pool .bx-poolgrp-row { grid-template-columns: repeat(3, 1fr); }
      /* Dokunmatikte × yerine mini seçenekler birincil yoldur: menü rahat okunsun. */
      .tk-pitch .bx-cardmenu-btn { font-size: 0.62rem; padding: 8px 10px; min-height: 32px; }
    }
    @media (max-width: 520px) {
      .tk-pool .bx-poolgrp-row { grid-template-columns: repeat(2, 1fr); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tk-tac { transition: none !important; }
      .tkg-free { animation: none !important; }   /* 60B-2 G1b: ölü .tk-tac formasyon glif reset'leri çıkarıldı; serbest glif reset'i korunur */
      .tk-auto { transition: none !important; }
    }

/* ===== 5 KATMANLI PREMIUM YAPI ===== */
    /* ============ B5 — METAL PANO + MANYETIK KARTLAR (#sergile / .mst) ============
       FOUNDER KARARI (motion'dan vazgecildi): sticky scrollytelling, zoom, 3 chapter, saha
       cizgileri ve scroll-linked hareket KALDIRILDI (kasma/yavaslik yapiyordu: her karede
       4 katmanli drop-shadow x 9 kart + mix-blend-mode + SVG grain + 5x scale yeniden
       hesaplaniyordu). KALAN: begenilen "urun gorunur" kismi.
       Bolum artik NORMAL akista, krem zeminde (.tf-section--light): solda kesilmis seffaf pano
       fotografi, uzerine ONAYLI 6 kart panonun yuzeyine TEKER TEKER manyetik yapisir,
       sagda tek metin + CTA.
       KART ORANLARI KORUNUR: perspektif carpitma (matrix3d homografi) KALDIRILDI — kartlari
       trapeze cevirip oranlarini bozuyordu (olculdu: 0.75 / 0.66 vs gercek 0.6995). Kartlar
       panonun yuzeyine 30 DERECE YATIK durur (rotateY, perspective YOK -> ortografik: tum
       kartlar ESIT olcude daralir, trapez olusmaz). Duzlem-ici "egri asilmis" donme YOK;
       konumlari panonun egik hattini izler -> temiz dizilim + yapisma hissi.
       TEMIZ: kart cevresinde cerceve/kontur ve genis yayilan golge YOK -> arkada bolme/raf
       hissi olusmaz.
       SCROLL ILE YAPISMA: CSS scroll-driven animation (animation-timeline: view()) — kartlar
       bolum ekrana girerken TEKER TEKER yapisir, scroll geri alininca tersine doner. Compositor'da
       calisir; scroll dinleyicisi / rAF / JS hesabi YOKTUR (kasma yok). Destek yoksa
       IntersectionObserver + transition yolu devreye girer.
       GOLGE, kart yuzeye OTURDUKTAN SONRA belirir ve KARTIN SILUETINE gore olusur (drop-shadow;
       kutu kirpma/box-shadow yok -> "dikdortgenin icinde" hissi olmaz). */
    /* Ekstra dikey nefes: yapisma efektinin okunmasi icin scroll yolu uzatildi. */
    #sergile.mst { overflow: clip; padding-block: clamp(56px, 9vh, 130px); }
    /* MOBIL SIRA (founder): YAZILAR -> PANO -> "Kartini Tasarla" butonu. */
    .mst-wrap { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3.2vw, 36px);
      align-items: center; justify-items: center;
      grid-template-areas: "copy" "pano" "aks" "cta"; }
    .mst-pano { grid-area: pano; }
    .mst-copy { grid-area: copy; }
    .mst-cta { grid-area: cta; }
    /* Pano kutusu: kesilmis PNG'nin dogal orani (1100x2798). Kartlar bunun icinde. */
    .mst-pano { position: relative; height: clamp(440px, 76vh, 700px); aspect-ratio: 1100 / 2798; flex: none;
      filter: drop-shadow(22px 26px 30px rgba(28, 22, 12, 0.26)); }
    .mst-pano-img { width: 100%; height: 100%; display: block; }
    /* Kart duzlemi: panonun ON YUZU (sol metal profil %6.1 olculdu -> left %8 guvenli).
       PERSPEKTIF CARPITMA YOK: homografi kartlari trapeze cevirip oranlarini bozuyordu.
       Kartlar yalniz DONDURULUR (rotate oranI korur) ve konumlari panonun egik hattini izler. */
    .mst-face { position: absolute; inset: 2% 3% 2% 8%; }

    /* Kartlar: panonun yuzeyine YATIK (30 derece), hepsi AYNI acida ve dosdogru — duzlem-ici
       ("egri asilmis") donme YOK. rotateY + perspective YOK (ortografik) => her kart ESIT olcude
       daralir, trapez/carpitma olusmaz -> oran bozulmasi yok. Varsayilan = OTURMUS durum
       (JS yoksa da dogru gorunur). TEMIZ: cerceve/kontur yok, golge kisa -> "bolme" hissi olusmaz. */
    .mst-card { position: absolute; left: var(--x); top: var(--y); width: var(--w, 40%);
      transform: rotateY(var(--tilt, 30deg));
      /* Golge KARTIN SILUETINE gore (drop-shadow) — kutu golgesi/kirpma YOK, yoksa kart bir
         dikdortgenin icinde duruyormus gibi gorunuyor (kart gorselleri seffaf siluetli). */
      filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 13px 16px rgba(0, 0, 0, 0.3)); }
    .mst-card img { width: 100%; height: auto; display: block; }   /* oran gorselden gelir, kirpma yok */
    /* JS varsa: yapisma oncesi durum (panonun birkac piksel onunde, hafif buyuk ve acili, GOLGESIZ) */
    .mst-anim .mst-card { opacity: 0;
      transform: translate3d(0, -30px, 0) rotateY(var(--tilt, 30deg)) scale(1.06);
      filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
      transition: opacity 0.4s ease var(--d, 0s),
                  transform 0.78s cubic-bezier(0.2, 1.16, 0.32, 1) var(--d, 0s),
                  filter 0.34s ease calc(var(--d, 0s) + 0.58s); }   /* golge YAPISTIKTAN SONRA */
    .mst-anim.is-on .mst-card { opacity: 1; transform: translate3d(0, 0, 0) rotateY(var(--tilt, 30deg)) scale(1);
      filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 13px 16px rgba(0, 0, 0, 0.3)); }
    /* SCROLL ILE YAPISMA (tercih edilen yol): CSS scroll-driven animation. Compositor'da calisir,
       scroll dinleyicisi/JS hesabi YOKTUR ve scroll geri alininca dogal olarak tersine doner.
       Her kartin animation-range'i farklidir -> bolum ekrana girerken kartlar TEKER TEKER yapisir.
       Golge, hareket bittikten SONRA (%78-100 arasi) belirir -> havada golge yok. */
    @keyframes mstYapis {
      0%   { opacity: 0; transform: translate3d(0, -30px, 0) rotateY(var(--tilt, 30deg)) scale(1.06);
             filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
      50%  { opacity: 1; }
      82%  { transform: translate3d(0, 0, 0) rotateY(var(--tilt, 30deg)) scale(1);
             filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(var(--tilt, 30deg)) scale(1);
             filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 13px 16px rgba(0, 0, 0, 0.3)); }
    }
    @supports (animation-timeline: view()) {
      .mst-sd .mst-card { animation: mstYapis linear both; animation-timeline: view(); }
      /* Her kart %28 cover birimi boyunca yapisir (YAVAS), kartlar arasi gecikme %8 (SIRALI).
         Once entry fazinda %62 birimdi ama entry fazi kisa oldugu icin efekt cok hizli geciyordu. */
      .mst-sd .mst-k1 { animation-range: cover 5% cover 33%; }
      .mst-sd .mst-k2 { animation-range: cover 13% cover 41%; }
      .mst-sd .mst-k3 { animation-range: cover 21% cover 49%; }
      .mst-sd .mst-k4 { animation-range: cover 29% cover 57%; }
      .mst-sd .mst-k5 { animation-range: cover 37% cover 65%; }
      .mst-sd .mst-k6 { animation-range: cover 45% cover 73%; }
    }

    /* Yapisma sirasi (JS fallback yolu) — teker teker gecikme */
    .mst-k1 { --x: 6%;  --y: 4%;    --d: 0s; }
    .mst-k2 { --x: 50%; --y: 8%;    --d: 0.30s; }
    .mst-k3 { --x: 6%;  --y: 33%;   --d: 0.60s; }
    .mst-k4 { --x: 50%; --y: 37%;   --d: 0.90s; }
    .mst-k5 { --x: 6%;  --y: 62%;   --d: 1.20s; }
    .mst-k6 { --x: 50%; --y: 66%;   --d: 1.50s; }

    /* Metin: tek blok (chapter/tekrar eden yazi YOK) */
    .mst-copy { max-width: 460px; text-align: center; }
    .mst-copy .eyebrow { margin-bottom: 12px; }
    .mst-copy h2 { font-size: clamp(1.8rem, 4.2vw, 2.7rem); line-height: 1.08; margin: 0 0 14px; text-wrap: balance; }
    .mst-copy p { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; margin: 0 0 22px; }
    .mst-feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0 0 24px; }
    .mst-feats li { font-size: 0.8rem; color: var(--l-gold-text); border: 1px solid var(--l-line); background: rgba(255, 255, 255, 0.4);
      padding: 6px 13px; border-radius: 999px; }

    /* ---- AKSESUAR SATIN ALMA (KATALOG-001) ----------------------------------
       DORMANT: bu blok yalnizca /api/catalog yaniti geldiginde VE urun satilabilir
       oldugunda JS ile doldurulup gorunur olur (bkz. tfRenderCanonical). Fiyat
       ASLA markup'ta durmaz — kanonik katalogtan gelir. Acik bolum tonlari. */
    .mst-aks { grid-area: aks; width: 100%; max-width: 460px; display: grid; gap: 12px; }
    .mst-aks[hidden] { display: none !important; }
    .mst-aks-head { font-family: 'Oswald', sans-serif; font-size: 0.78rem; font-weight: 600;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-gold-text); }
    .mst-aks-item { display: grid; gap: 10px; background: var(--l-panel); border: 1px solid var(--l-line);
      border-radius: 14px; padding: 14px 16px; }
    .mst-aks-title { font-family: 'Oswald', sans-serif; font-size: 1.02rem; font-weight: 600;
      letter-spacing: 0.02em; color: var(--l-heading); }
    .mst-aks-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
    .mst-aks-size { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      border: 1px solid var(--l-line); border-radius: 10px; padding: 7px 12px; font-size: 0.88rem;
      color: var(--l-body); background: rgba(255,255,255,0.5); }
    .mst-aks-size:has(input:checked) { border-color: var(--l-gold-fill); background: rgba(201,162,39,0.12); color: var(--l-heading); font-weight: 600; }
    .mst-aks-size input { accent-color: var(--l-gold-fill); width: 14px; height: 14px; }
    .mst-aks-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .mst-aks-price { font-family: 'Oswald', sans-serif; font-size: 1.34rem; color: var(--l-gold-text); letter-spacing: 0.02em; }
    .mst-aks-add { padding: 10px 18px; font-size: 0.88rem; }

    @media (min-width: 900px) {
      /* MASAUSTU: solda pano (satirlara yayilir), sagda kopya + buton + aksesuar. */
      .mst-wrap { grid-template-columns: max-content minmax(340px, 440px);
        grid-template-areas: "pano copy" "pano aks" "pano cta";
        column-gap: clamp(56px, 6vw, 104px); row-gap: 24px;
        justify-content: center; justify-items: start; align-content: center; }
      .mst-pano { height: clamp(520px, 88vh, 800px); }
      .mst-copy { text-align: left; }
      .mst-feats { justify-content: flex-start; }
    }

    /* Reduced motion: yapisma animasyonu YOK — kartlar dogrudan oturmus/golgeli gorunur */
    @media (prefers-reduced-motion: reduce) {
      .mst-anim .mst-card, .mst-sd .mst-card { opacity: 1; transition: none; animation: none;
        transform: rotateY(var(--tilt, 30deg));
        filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5)) drop-shadow(0 13px 16px rgba(0, 0, 0, 0.3)); }
    }

    .tfl-stage { perspective: 1500px; width: 100%; display: grid; place-items: center; min-height: 340px; margin: 0; }
    .tf-layer-stack { position: relative; width: clamp(300px, 90vw, 720px); aspect-ratio: 1 / 1; margin: 0 auto; }
    /* Faz 16b: tek büyük SAYDAM foto (kare değil) — kapsayıcı görselin oranına uysun, büyüsün. */
    /* FOUNDER (2026-08-17): yeni gorsel + onceki olcunun %15 KUCUGU (300/92vw/760 -> 255/78vw/646). */
    /* ANA-1: fotoğraf tek görsel; kare oran katman PNG yığını içindi. */
    .tf-layer-stack { aspect-ratio: auto; }
    .tfl-stage { min-height: 0; }
    .tf-layer { position: absolute; inset: 0; opacity: 0; transition: transform 0.85s cubic-bezier(0.2,0.7,0.2,1), opacity 0.6s ease; }
    .tf-layer img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s ease, filter 0.45s ease; filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5)); }
    .tf-layer-1 { z-index: 5; } .tf-layer-2 { z-index: 4; } .tf-layer-3 { z-index: 3; } .tf-layer-4 { z-index: 2; } .tf-layer-5 { z-index: 1; }
    /* başlangıç: katmanlar merkeze toplanmış (üst üste) */
    .tf-layer-1 { transform: translateX(20%) scale(0.95); } .tf-layer-2 { transform: translateX(10%) scale(0.97); }
    .tf-layer-3 { transform: translateX(0) scale(0.98); } .tf-layer-4 { transform: translateX(-10%) scale(0.97); } .tf-layer-5 { transform: translateX(-20%) scale(0.95); }
    /* açık (bölüm görününce): sırayla kendi konumuna yayılır */
    .tf-layer-stack.is-open .tf-layer { opacity: 1; transform: translateX(0) scale(1); }
    .tf-layer-stack.is-open .tf-layer-1 { transition-delay: 0.10s; } .tf-layer-stack.is-open .tf-layer-2 { transition-delay: 0.22s; }
    .tf-layer-stack.is-open .tf-layer-3 { transition-delay: 0.34s; } .tf-layer-stack.is-open .tf-layer-4 { transition-delay: 0.46s; } .tf-layer-stack.is-open .tf-layer-5 { transition-delay: 0.58s; }
    /* ayrılırken gold glow (img filter flash) */
    .tf-layer-stack.is-open .tf-layer-1 img { animation: tflGlow 0.9s ease 0.10s; } .tf-layer-stack.is-open .tf-layer-2 img { animation: tflGlow 0.9s ease 0.22s; }
    .tf-layer-stack.is-open .tf-layer-3 img { animation: tflGlow 0.9s ease 0.34s; } .tf-layer-stack.is-open .tf-layer-4 img { animation: tflGlow 0.9s ease 0.46s; }
    .tf-layer-stack.is-open .tf-layer-5 img { animation: tflGlow 0.9s ease 0.58s; }
    @keyframes tflGlow { 0% { filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 0 rgba(244,184,96,0)); } 45% { filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 26px rgba(244,184,96,0.8)); } 100% { filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 0 rgba(244,184,96,0)); } }
    /* marker aktif -> ilgili katman parlar */
    .tf-layer-stack[data-active="1"] .tf-layer-1 img, .tf-layer-stack[data-active="2"] .tf-layer-2 img, .tf-layer-stack[data-active="3"] .tf-layer-3 img, .tf-layer-stack[data-active="4"] .tf-layer-4 img, .tf-layer-stack[data-active="5"] .tf-layer-5 img { filter: brightness(1.12) drop-shadow(0 14px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 26px rgba(244,184,96,0.7)); }
    /* HOVER üfleme/dalga: her katman farklı süre/genlik (arkaya doğru azalır) */
    .tf-layer-1 img { --amp: 7px; } .tf-layer-2 img { --amp: 5px; } .tf-layer-3 img { --amp: 3.5px; } .tf-layer-4 img { --amp: 2px; } .tf-layer-5 img { --amp: 1px; }
    .tf-layer-stack:hover .tf-layer-1 img { animation: tflSway 2.8s ease-in-out infinite; }
    .tf-layer-stack:hover .tf-layer-2 img { animation: tflSway 3.1s ease-in-out infinite 0.05s; }
    .tf-layer-stack:hover .tf-layer-3 img { animation: tflSway 3.4s ease-in-out infinite 0.10s; }
    .tf-layer-stack:hover .tf-layer-4 img { animation: tflSway 3.7s ease-in-out infinite 0.15s; }
    .tf-layer-stack:hover .tf-layer-5 img { animation: tflSway 4.0s ease-in-out infinite 0.20s; }
    @keyframes tflSway { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(calc(var(--amp) * -1)) rotate(0.4deg); } }
    /* MARKERS (sağ taraf) */
    .tf-layer-markers { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
    .tf-layer-marker { display: flex; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; color: var(--muted); font-family: 'Inter', sans-serif; text-align: left; padding: 8px 6px; border-radius: 12px; transition: background 0.25s; }
    .tf-layer-marker:hover, .tf-layer-marker.on { background: rgba(244,184,96,0.06); }
    .tfm-line { width: 26px; height: 1px; background: var(--line); flex-shrink: 0; transition: width 0.3s ease, background 0.3s ease; }
    .tfm-num { font-family: 'Oswald', sans-serif; font-size: 1.2rem; color: var(--gold-text); width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: all 0.3s ease; }
    .tf-layer-marker:hover .tfm-num, .tf-layer-marker.on .tfm-num { background: var(--gold); color: #1a1a1a; border-color: var(--gold); box-shadow: 0 0 18px rgba(244,184,96,0.55); }
    .tf-layer-marker:hover .tfm-line, .tf-layer-marker.on .tfm-line { width: 42px; background: var(--gold); }
    /* Faz 16b: etiket yazıları HEP görünür (eskiden hover/aktifte açılıyordu). */
    .tfm-info { display: flex; flex-direction: column; gap: 2px; opacity: 1; overflow: visible; font-size: 0.84rem; line-height: 1.4; }
    .tfm-info b { color: var(--text); font-weight: 600; font-size: 0.92rem; }
    .tf-layer-marker:hover .tfm-info, .tf-layer-marker.on .tfm-info { max-height: 90px; opacity: 1; }
    /* intro: numaralar sırayla aktif */
    #katmanlar.seq .tfm-num { animation: tflNum 0.6s ease both; }
    #katmanlar.seq .tf-layer-marker:nth-child(1) .tfm-num { animation-delay: 0.25s; } #katmanlar.seq .tf-layer-marker:nth-child(2) .tfm-num { animation-delay: 0.4s; }
    #katmanlar.seq .tf-layer-marker:nth-child(3) .tfm-num { animation-delay: 0.55s; } #katmanlar.seq .tf-layer-marker:nth-child(4) .tfm-num { animation-delay: 0.7s; }
    #katmanlar.seq .tf-layer-marker:nth-child(5) .tfm-num { animation-delay: 0.85s; }
    @keyframes tflNum { 0% { transform: scale(0.6); opacity: 0; box-shadow: 0 0 0 rgba(244,184,96,0); } 55% { box-shadow: 0 0 20px rgba(244,184,96,0.6); } 100% { transform: scale(1); opacity: 1; } }
    /* ICONS */
    .tfl-icons { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 640px; margin: 46px auto 0; }
    .tfl-icon { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 16px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); font-size: 0.9rem; font-weight: 500; }
    .tfl-icon svg { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; }
    @media (max-width: 767px) { .tf-layer-stack { --sx: 42%; --sz: 70px; } }
    @media (min-width: 768px) {
      .tfl-icons { grid-template-columns: repeat(4, 1fr); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tf-layer { transition: none !important; opacity: 1 !important; transform: translateX(0) scale(1) !important; }
      .tf-layer img, #katmanlar.seq .tfm-num { animation: none !important; }
    }

    /* =====================================================================
       FAZ 16 — YENİDEN KULLANILABİLİR AÇIK BÖLÜM TEMASI (.tf-section--light)
       Koyu bölümlerin arasına açık bir "nefes" bölümü koymak için. Renkler
       WCAG AA'ya göre seçildi (ölçümlü): zemin fildişi #F3EAD7; başlık lacivert
       #0A1128 (15.6:1); gövde #3E4049 (8.6:1); soluk metin #5A5E68 (5.4:1).
       ALTIN NOTU: markanın #F4B860/#B87E3E altını açık zeminde METİN olarak
       okunmaz (#B87E3E = 2.4:1). Bu yüzden altın METİN bronz #6E4920 (6:1),
       altın GRAFİK/ikon/kenarlık #8A5E2E (>=3:1); parlak altın yalnız DOLGU
       (buton/rozet) içinde koyu metinle kullanılır. ================================= */
    .tf-section--light {
      --l-bg: #F3EAD7; --l-bg-2: #EDE1C6; --l-panel: #FBF6EC;
      --l-heading: #0A1128; --l-body: #3E4049; --l-muted: #5A5E68;
      --l-gold-text: #6E4920; --l-gold-graphic: #8A5E2E; --l-gold-fill: #C9862B;
      --l-line: rgba(138,106,46,0.42); --l-panel-line: rgba(10,17,40,0.14);
      position: relative; background: var(--l-bg); color: var(--l-body);
    }
    /* Geçiş: üst + alt ince altın ayırıcı (ortadan solan hairline). */
    .tf-section--light { border-top: 1px solid rgba(184,147,74,0.42); }
    .tf-section--light::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
      pointer-events: none; background: linear-gradient(90deg, transparent, rgba(184,147,74,0.5), transparent); }
    /* Genel bileşen varyantları (kontur/dolgu tersine) */
    .tf-section--light .eyebrow { color: var(--l-gold-text); }
    .tf-section--light h2, .tf-section--light h3 { color: var(--l-heading); }
    .tf-section--light p { color: var(--l-body); }
    .tf-section--light .btn-ghost { color: var(--l-heading); border-color: rgba(10,17,40,0.30); background: transparent; }
    .tf-section--light .btn-ghost:hover { border-color: var(--l-gold-graphic); color: var(--l-gold-text); }
    .tf-section--light .btn-gold { color: #241A20; }            /* dolgu altın + koyu metin (7.6:1) */
    .tf-section--light hr, .tf-section--light .tf-divider { border: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--l-line), transparent); }

    /* 60A-2: KREM bölüm içinde KOYU "SAHNE" paneli. Krem sıraya denk gelen ama koyu tasarlanmış
       etkileşimli bileşen (builder/saha, customizer) içeren bölümlerde: başlık/açıklama KREM görünür,
       bileşen kendi KOYU sahnesinde durur. Bileşenin iç stilleri DEĞİŞMEZ (yalnız kapsayıcı sarma).
       Sahne içindeki metin/başlık KOYU bağlamda kalır (krem bölüm kurallarını geçersiz kılar). */
    .tf-stage { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
      padding: clamp(18px, 3.5vw, 40px); color: var(--on-ink); position: relative;
      box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7); }
    .tf-section--light .tf-stage, .tf-section--light .tf-stage h1, .tf-section--light .tf-stage h2,
    .tf-section--light .tf-stage h3, .tf-section--light .tf-stage h4, .tf-section--light .tf-stage p,
    .tf-section--light .tf-stage li, .tf-section--light .tf-stage label, .tf-section--light .tf-stage span { color: var(--on-ink); }
    .tf-section--light .tf-stage .eyebrow, .tf-section--light .tf-stage .tk-lead-gold { color: var(--gold-text); }
    .tf-section--light .tf-stage .btn-ghost { color: var(--on-ink); border-color: var(--line); background: transparent; }
    .tf-section--light .tf-stage .btn-gold { color: #1a1a1a; }
    @media (max-width: 560px) { .tf-stage { padding: 16px 12px; border-radius: 12px; } }
    /* 60A-2: bölüm kendi (daha geç tanımlı) koyu zeminini set ediyorsa krem'i GERİ getir (özgüllük: 2 sınıf). */
    .tk.tf-section--light, .customizer-section.tf-section--light { background: var(--l-bg); }

    /* YENİ GÖRSEL: tek büyük ürün fotoğrafı (beyaz zeminli; açık temayla kaynaşır). */
    /* v3 (RELIGHT): görsel KESİLMİYOR. Beyaz/şeffaf bir ürün beyaz stüdyo zemininde
       eşikle kesilemez — v2'de bu yüzden gri hale + kirli gölge kaldı (görüntünün %8.6'sı
       "ne zemin ne nesne" ara banttaydı). v3'te nötr pikseller krem çarpanıyla yeniden
       ışıklandırıldı: zemin TAM --l-bg (#F3EAD7), stüdyo gölgesi sıcak griye döndü,
       kartın turkuaz/altın renkleri doygun oldukları için korundu. Üretici:
       scripts/katman-relight.py — master: assets/img/products/masters/.
       drop-shadow KALDIRILDI: o filtre saydam görsel içindi; v3 opak olduğu için
       silueti değil KUTUYU gölgeliyordu (yelpaze kartlarındaki dikdörtgen hatasının aynısı).
       Görsel kendi gerçek stüdyo gölgesini taşıyor; dış halka alfa ile eritildi. */
    .tfl-photo { width: 100%; max-width: min(720px, 100%); height: auto; display: block; margin: 0 auto;
      opacity: 0; transform: translateY(16px) scale(0.98);
      transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2,0.7,0.2,1); }
    .tf-layer-stack.is-open .tfl-photo { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .tfl-photo { transition: none !important; opacity: 1 !important; transform: none !important; } }

    /* =====================================================================
       FAZ 16b — KREM "NEFES" BÖLÜMLERİ (founder isteği): CTA bandı, Forge XI rol
       vitrini ve Yorumlar bölümü de açık temaya geçer. Bu bölümler kendi bileşen
       CSS'lerinde paylaşılan KOYU token'ları (--panel/--text/--muted/--gold-text…)
       kullandığından, token'ları YALNIZ bu 3 bölümde açık değerlere remapliyoruz;
       böylece kart/panel/metin tek noktadan açık temaya döner (yüzlerce override yerine).
       #takimini-kur (manyetik saha, koyu tasarlı) BİLİNÇLİ olarak koyu KALIR —
       yeşil/beyaz saha çizgileri krem zeminde okunmaz (okunabilirlik gerekçesi). */
    .cta-strip.tf-section--light, .tf-rv.tf-section--light {
      --panel: var(--l-panel); --panel-2: var(--l-bg-2); --bg: var(--l-bg); --deep: var(--l-bg);
      --text: var(--l-heading); --muted: var(--l-muted);
      --line: var(--l-line); --line-soft: var(--l-panel-line);
      --gold-text: var(--l-gold-text); --gold-dim: rgba(201,162,39,0.16);
    }
    /* Rol vitrini (fxh): zemin krem AMA portre kartları KOYU kalır (premium koleksiyon
       kartı hissi; kremde koyu kart iyi durur). Yalnız bölüm-seviyesi metni açığa çevrilir. */
    .fxh.tf-section--light .fxh-title { color: var(--l-heading); }
    /* fxh metinleri forge-xi-home.css'te hardcoded (token değil) — açıkça çevir. */
    .fxh.tf-section--light .fxh-lead, .fxh.tf-section--light .fxh-p-v { color: var(--l-body); }
    .fxh.tf-section--light .fxh-eyebrow, .fxh.tf-section--light .fxh-p-k { color: var(--l-gold-text); }
    /* 66g: Seç/Kur/Keşfet -> altın çerçeve (krem bölüm). */
    .fxh.tf-section--light .fxh-principles li { border: 1px solid rgba(184,147,74,0.55); border-radius: 12px; padding: 18px 20px; background: linear-gradient(180deg, rgba(244,184,96,0.08), transparent); }
    /* 66h: POP-UP koyu ada -> krem-bölümün h3/p renk kurallarını ID özgüllüğüyle GEÇ (yazılar açık okunur). */
    #fxh-panel .fxh-panel-name { color: #ffffff; }
    #fxh-panel .fxh-panel-story { color: #dcdce2; }
    #fxh-panel .fxh-panel-pos { color: #b9bcc4; }
    #fxh-panel .fxh-panel-role { color: #F7CB8A; }
    .fxh.tf-section--light .fxh-btn-ghost { color: var(--l-heading); border-color: rgba(10,17,40,0.30); background: transparent; }
    .fxh.tf-section--light .fxh-btn-ghost:hover { border-color: var(--l-gold-graphic); color: var(--l-gold-text); }
    /* ===== Faz 66: ROL KIZAĞI + hover paneli (fxh krem bölüm; kartlar hazır webp koyu tasarım) ===== */
    .fxh-rail-wrap { position: relative; margin: 6px 0 8px; padding: 0 46px; }   /* 66c: yan pay -> oklar kartların/etiketlerin dışında */
    .fxh-rail { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 16px; scrollbar-width: none; -ms-overflow-style: none; }   /* 66e: kart arası açıldı */
    .fxh-rail::-webkit-scrollbar { display: none; }   /* 66c: scrollbar GİZLİ — kızak tek şerit gibi görünmesin */
    .fxh-cell { position: relative; flex: 0 0 calc((100% - 78px) / 4); padding-left: 42px; scroll-snap-align: start; }   /* 66d: ilk 4 görünür; 66e: isim payı geniş + gap 26 (3x26=78) */
    .fxh-side { position: absolute; left: -2px; top: 0; bottom: 44px; width: 38px; display: flex; align-items: center; justify-content: center; }   /* 66e: geniş -> büyük isim sığar */
    .fxh-side-in { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; line-height: 1; }
    .fxh-side-name { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.9rem; letter-spacing: .03em; text-transform: uppercase; color: var(--l-heading); white-space: nowrap; }   /* 66e: %100 büyük */
    .fxh-side-pos { display: block; margin-top: 9px; font-size: 0.72rem; letter-spacing: .16em; color: var(--l-gold-text); font-weight: 700; }
    .fxh-art { -webkit-appearance: none; appearance: none; display: block; width: 100%; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: 11px; overflow: hidden; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: transform .15s ease; }
    .fxh-art:hover, .fxh-art:focus-visible { transform: translateY(-3px); outline: 2px solid rgba(244,184,96,.5); }
    .fxh-art img { width: 100%; height: auto; display: block; }
    .fxh-buy { display: block; width: 100%; margin-top: 8px; text-align: center; padding: 6px 4px; border-radius: 18px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: .02em; text-decoration: none; cursor: pointer; background: transparent; color: var(--l-gold-text); border: 1px solid rgba(138,106,46,.45); }
    .fxh-buy.is-live { background: linear-gradient(180deg, #e8c65a, #c99a2e); color: #1a1406; border-color: transparent; }
    .fxh-buy:hover { border-color: var(--l-gold-graphic); }
    .fxh-arrow { position: absolute; top: 42%; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(138,106,46,.5); background: var(--l-panel); color: var(--l-gold-text); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 15; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
    .fxh-arrow-l { left: 2px; } .fxh-arrow-r { right: 2px; }   /* 66c: yan payın içinde -> isim etiketlerinin dışında */
    .fxh-arrow:hover { border-color: var(--l-gold-graphic); }
    .fxh-all { display: inline-block; margin: 2px 0 24px; font-size: 0.86rem; color: var(--l-gold-text); text-decoration: none; font-weight: 600; }
    .fxh-all:hover { text-decoration: underline; }
    /* 66c: POP-UP artık O KARTIN ÜSTÜNDE açılır (tvplus tarzı) — backdrop YOK, kızak/diğer kartlar görünür/erişilebilir.
       Konum JS ile hover edilen karta göre (left/top inline). is-open PANEL üzerinde. */
    .fxh-panel { position: absolute; z-index: 30; display: flex; width: min(600px, 92vw); border-radius: 14px; overflow: hidden; background: var(--ink-2, #2E2229); border: 1px solid rgba(244,184,96,.34); box-shadow: 0 22px 54px -16px rgba(0,0,0,.72); opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.96); transform-origin: center top; transition: opacity .15s ease, transform .15s ease; }
    .fxh-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
    /* Kerem: masaüstünde ilk çıkışta pop-up %15 küçülür ve kendi genişliğinin %10'u kadar sağa kayar (mobil değişmez). */
    @media (min-width: 861px) {
      .fxh-panel { transform: translateX(10%) scale(.81); }
      .fxh-panel.is-open { transform: translateX(10%) scale(.85); }
    }
    .fxh-panel-close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .fxh-panel-close:hover { background: rgba(0,0,0,.7); }
    .fxh-panel-vidwrap { flex: 0 0 250px; background: #0d1119; }
    .fxh-panel-video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 9 / 16; cursor: pointer; }
    .fxh-panel-info { flex: 1; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: flex-start; color: #ececec; }   /* 66d: üstten hizala -> uzun hikaye kırpılmaz */
    .fxh-panel-role { font-size: 0.7rem; letter-spacing: .22em; color: #F7CB8A; font-weight: 700; text-transform: uppercase; }
    .fxh-panel-name { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.7rem; margin: 5px 0 2px; text-transform: uppercase; color: #fff; }
    .fxh-panel-pos { color: #b9bcc4; font-size: 0.74rem; letter-spacing: .16em; margin-bottom: 12px; text-transform: uppercase; }
    .fxh-panel-story { color: #dcdce2; font-size: 0.88rem; line-height: 1.55; margin: 0 0 14px; max-height: 168px; overflow-y: auto; scrollbar-width: thin; background: rgba(0,0,0,0.26); border: 1px solid rgba(244,184,96,0.16); border-radius: 10px; padding: 12px 14px; }   /* 66h: hikayeye arka plan kutusu */   /* 66d: TAM hikaye — uzunsa kaydırılır (yazı kaybolmaz) */
    .fxh-panel-story::-webkit-scrollbar { width: 5px; } .fxh-panel-story::-webkit-scrollbar-thumb { background: rgba(244,184,96,.4); border-radius: 999px; }
    .fxh-panel-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .fxh-panel-buy { padding: 10px 20px; border-radius: 22px; border: none; cursor: pointer; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.86rem; background: linear-gradient(180deg, #e8c65a, #c99a2e); color: #1a1406; }
    .fxh-panel-more { color: #F7CB8A; font-size: 0.82rem; text-decoration: none; border: 1px solid rgba(244,184,96,.35); padding: 9px 16px; border-radius: 22px; }
    .fxh-panel-more:hover { border-color: #F7CB8A; }
    @media (max-width: 860px) {
      .fxh-cell { flex-basis: 100%; }   /* 69b: mobil TEKLİ kart (founder isteği; step() görünen=1 -> 1'er kayar) */
      .fxh-panel { flex-direction: column; width: min(320px, 92%); }   /* mobil pop-up dikey */
      .fxh-panel-vidwrap { flex-basis: auto; }
      .fxh-panel-video { aspect-ratio: 9 / 16; height: auto; max-height: 300px; }
      .fxh-panel-info { padding: 14px 16px; }
      .fxh-panel-story { display: none; }   /* 66h: mobilde hikaye KALKAR -> yalnız video + Rolü İncele */
      .fxh-panel-buy { display: none !important; }   /* mobilde sadeleştir: video + Rolü İncele */
    }
    /* Yorum formu inputları var(--bg-2) [koyu] kullanıyor — açık formda beyaz zemine çek. */
    .tf-rv.tf-section--light .tf-rv-field input[type="text"],
    .tf-rv.tf-section--light .tf-rv-field select,
    .tf-rv.tf-section--light .tf-rv-field textarea { background: #fff; color: var(--l-heading); }
    /* Koyu tint kutu (uyarı) açık zeminde ince açık tint olsun. */
    .tf-rv.tf-section--light .tf-rv-warn { background: rgba(10,17,40,0.04); }

    /* ============ SEPET ÇEKMECESİ (CART DRAWER) ============ */
    .cart-drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 150;
    }
    .cart-drawer-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }
    .cart-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(400px, 100vw);
      background: var(--drawer-bg);
      border-left: 1px solid var(--line);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 151;
      display: flex;
      flex-direction: column;
      /* 2026-08-18b — `backdrop-filter: blur(12px)` KALDIRILDI. Panelin zemini --drawer-bg =
         rgba(23,26,33,0.97): arkasi %3 goruniyor, yani blur PRATIKTE GORUNMUYORDU. Bedeli ise
         gercek: tarayici paneli backdrop-filter yoluna sokar ve panel icinde bir sey degistikce
         (kaydirma, hover, fiyat tazeleme) tum panel bolgesi icin arka plan yeniden bulaniklastirilir.
         Overlay'in blur(4px)'i KORUNDU — o gercekten goruluyor ve sayfa artik altta kaymiyor. */
    }
    .cart-drawer.open {
      transform: translateX(0);
    }
    /* 70: DETAY PANELİ — drawer'ın SOL bitişiğinde açılır (masaüstü); kaleme tıklanınca. */
    .cart-detail { position: fixed; top: 0; bottom: 0; right: min(400px, 100vw); width: min(468px, calc(100vw - 400px)); z-index: 150;
      background: var(--drawer-bg); border-left: 1px solid var(--line); box-shadow: -12px 0 34px rgba(0,0,0,0.45);
      overflow-y: auto; overscroll-behavior: contain; transform: translateX(24px); opacity: 0; visibility: hidden;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.24s ease, visibility 0.3s; }
    .cart-detail.open { transform: translateX(0); opacity: 1; visibility: visible; }
    .cart-detail-inner { padding: 20px 22px; color: var(--text); }
    .cdx-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
    .cdx-title { font-family: 'Oswald', sans-serif; font-size: 1.4rem; text-transform: uppercase; color: #fff; margin: 3px 0 14px; }
    .cdx-preview { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
    .cdx-cardimg { width: 148px; height: auto; border-radius: 10px; display: block; box-shadow: 0 10px 26px -8px #000; background: #0c0f18; }
    /* Aksesuar (Metal Pano) gorseli — SABIT ORANLI kutu: iki varyant da birebir ayni yer kaplar.
       Yukseklik oranla degil SABIT verilir; boylece Standart <-> Futbol Sahasi arasinda gecerken
       panel yuksekligi degismez (kalem secince detay panelinin ziplamamasi icin). Kaynak PNG'ler
       ayni kanvasta oldugu icin `object-fit: contain` ikisini de AYNI olcekte oturtur. */
    .cdx-pano { height: 210px; margin: 2px 0 16px; display: flex; justify-content: center; }
    .cdx-pano picture { display: block; height: 100%; }
    .cdx-pano img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block;
      filter: drop-shadow(0 14px 26px rgba(0,0,0,0.55)); }
    @media (max-width: 860px) { .cdx-pano { height: 168px; margin-bottom: 12px; } }
    /* 71: sepet detayında TAM kart render'ı — tf-card responsive clamp yerine sabit genişlik (cqw ölçekler). */
    /* S-1: kartın HAZIR render'ı olduğu gibi küçültülür -- kart yeniden
       kurulmaz, fotoğraf penceresine bir şey konmaz. Oran render'ın kendi
       oranıdır; `height:auto` ile hiçbir yerde ezilmez. */
    .cdx-cardshot { flex: 0 0 auto; }
    .cdx-cardshot-img { display: block; width: 100%; height: auto; border-radius: 8px; }
    .cdx-cardwrap { flex: 0 0 auto; }
    .cdx-cardwrap .tf-custom-card { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; }
    .cdx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 9px; margin-bottom: 14px; }
    .cdx-grid img { width: 100%; height: auto; border-radius: 7px; box-shadow: 0 6px 16px -6px #000; background: #0c0f18; }
    .cdx-mini { text-align: center; }
    .cdx-mini span { display: block; font-size: 0.6rem; color: var(--gold-text); font-weight: 700; margin-top: 3px; letter-spacing: 0.06em; }
    .cdx-rows { width: 100%; border-collapse: collapse; }
    .cdx-rows td { padding: 6px 0; font-size: 0.84rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .cdx-rows td:first-child { color: var(--muted, #9aa0ad); }
    .cdx-rows td:last-child { text-align: right; color: var(--text); font-weight: 500; }
    .cdx-rows td.cdx-gold { color: var(--gold-text); }
    .cdx-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(244,184,96,0.28); margin-top: 14px; padding-top: 12px; }
    .cdx-total b { font-family: 'Oswald', sans-serif; color: var(--gold-text); font-size: 1.25rem; }
    .cart-item.is-selected { border-color: var(--gold) !important; background: rgba(244,184,96,0.10); }
    .cart-item { cursor: pointer; }
    .cart-detail-handle { display: none; }
    @media (max-width: 860px) {
      /* FAZ 79: alt sheet — İÇERİK KAYDIRILABİLİR (kesilmez) + tutamaçtan aşağı sürükle-kapat.
         Flex kolon: sabit tutamaç + kaydırılabilir gövde; yükseklik içerikle büyür (max 88vh). */
      .cart-detail { right: 0; left: 0; width: auto; top: auto; bottom: 0; height: auto; max-height: 88vh;
        display: flex; flex-direction: column; overflow: visible; z-index: 152;
        border-left: none; border-top: 1px solid var(--gold); border-radius: 18px 18px 0 0;
        transform: translateY(30px); box-shadow: 0 -12px 34px rgba(0,0,0,0.5); touch-action: none; }
      .cart-detail.open { transform: translateY(0); }
      .cart-detail.is-dragging { transition: none; }
      .cart-detail-handle { display: block; flex: 0 0 auto; padding: 10px 0 6px; text-align: center; cursor: grab; touch-action: none; }
      .cart-detail-handle span { display: inline-block; width: 42px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); }
      .cart-detail-inner { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 6px; }
      .cart-detail-close { top: 8px; }
    }
    .cart-drawer-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--line-soft);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cart-drawer-header h3 {
      font-size: 1.3rem;
      color: var(--text);
    }
    .cart-drawer-close {
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      transition: background 0.2s, color 0.2s;
    }
    .cart-drawer-close:hover {
      background: var(--gold-dim);
      color: var(--gold);
    }
    .cart-drawer-close svg {
      width: 20px;
      height: 20px;
    }
    .cart-drawer-items {
      flex: 1;
      overflow-y: auto;
      /* 2026-08-18b — KAYDIRMA ZINCIRLEMESI KESILDI. Sepet genelde kisa (1-2 kalem) olur; kutu
         kaydirilamaz durumdayken tekerlek/parmak jesti ALTTAKI SAYFAYA gecip ana sayfayi
         kaydiriyordu. Ana sayfa kayinca da tam-ekran bulanik overlay'in arka plani her karede
         yeniden hesaplaniyor + reveal IntersectionObserver'lari tetikleniyordu -> "kasma" hissi.
         Body kilidi (bkz. tfBodyScrollLock) ile birlikte iki katmanli guvence. */
      overscroll-behavior: contain;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .cart-empty-message {
      text-align: center;
      color: var(--muted);
      margin-top: 40px;
      font-size: 0.95rem;
    }
    .cart-item {
      display: flex;
      gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line-soft);
      align-items: center;
    }
    /* <picture> flex ogesi olur; olcuyu tasiyan ICINDEKI img oldugu icin kucultmeyi kapat. */
    .cart-item-pic { flex: 0 0 auto; line-height: 0; display: block; }
    /* Kart kurulan satırda görselin AYAK İZİ değişmiyor: 64x80 kutu korunur,
       kart (56x80, oran 0.70) ortalanır. Satır yüksekliği aynı kalsın diye --
       yoksa sepette her satır birkaç piksel uzar ve düzen kayar. */
    .cart-item-kart {
      width: 64px; height: 80px;
      display: flex; align-items: center; justify-content: center;
      flex: 0 0 auto;
    }
    .cart-item-kart .cdx-cardshot,
    .cart-item-kart .cdx-cardwrap { width: 56px !important; }

    .cart-item-img {
      width: 64px;
      height: 80px;
      object-fit: contain;
      background: var(--bg-2);
      border-radius: 8px;
      padding: 4px;
      border: 1px solid var(--line-soft);
    }
    .cart-item-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .cart-item-title {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }
    .cart-item-price {
      font-size: 0.95rem;
      color: var(--gold);
      font-family: 'Oswald', sans-serif;
    }
    .cart-item-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
    }
    .cart-qty-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid var(--line-soft);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 1rem;
      position: relative;   /* 60A: dokunma hedefi ::before ile ≥44px'e genişletilir (görsel değişmez) */
      transition: border-color 0.2s, color 0.2s;
    }
    /* 60A: görünür daire küçük kalır ama tıklanabilir alan ≥44px (dok.59 mobil dokunma hedefi). */
    .cart-qty-btn::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; }
    .cart-qty-btn:hover {
      border-color: var(--gold);
      color: var(--gold);
    }
    .cart-qty-val {
      font-size: 0.9rem;
      font-weight: 600;
      min-width: 16px;
      text-align: center;
    }
    .cart-item-remove {
      background: transparent;
      border: none;
      color: #eb5757;
      cursor: pointer;
      padding: 4px;
      display: grid;
      place-items: center;
      position: relative;   /* 60A: dokunma hedefi ≥44px */
      transition: transform 0.2s;
      opacity: 0.7;
    }
    .cart-item-remove::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; }
    .cart-item-remove:hover {
      transform: scale(1.1);
      opacity: 1;
    }
    .cart-item-remove svg {
      width: 18px;
      height: 18px;
    }
    /* E-1 — ÇEKMECEDE DÜZENLEME GİRİŞİ. Silme ikonuyla AYNI görsel dil:
       aynı kutu, aynı dokunma hedefi (>=44px), aynı hover. Ayrılan tek şey
       renk -- silme kırmızı (yıkıcı), düzenleme altın (birincil eylem).
       İkisi arasındaki 12px `gap` daraltılır: aynı kaleme ait iki eylem
       birbirine yakın dursun, satırın geri kalanından ayrılsın. */
    .cart-item-edit {
      background: transparent;
      border: none;
      color: var(--gold, #F4B860);
      cursor: pointer;
      padding: 4px;
      display: grid;
      place-items: center;
      position: relative;
      margin-right: -6px;
      transition: transform 0.15s ease, opacity 0.15s ease;
    }
    .cart-item-edit::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; }
    .cart-item-edit:hover { transform: scale(1.1); opacity: 1; }
    .cart-item-edit svg { width: 17px; height: 17px; }
    .cart-drawer-footer {
      padding: 20px 24px;
      border-top: 1px solid var(--line-soft);
      background: var(--drawer-foot-bg);
      /* KÜÇÜLMEZ: aksesuar kaydırma alanına taşındıktan sonra footer'da yalnız
         ara toplam + Siparişi Tamamla kalıyor. `0 1 auto` bırakılsaydı kısa
         ekranda ödeme düğmesi ezilebilirdi -- alan kazanmanın doğru yeri
         kaydırma alanı, ödeme düğmesi değil. */
      flex: 0 0 auto;
    }
    /* Aksesuar artık kaydırma alanının SON çocuğu: kalemlerden ayrılsın diye
       üstünde biraz nefes payı, altında da kaydırma sonu boşluğu. */
    .cart-drawer-items > .cart-aks { margin-top: 12px; }
    /* ÖDEMENİN HEMEN ÜSTÜNDEKİ BLOK (9 Eylül 2026). Çekmecenin doğrudan
       çocuğu; küçülmez ki açıldığında kaydırma alanı kısalsın -- blok
       YUKARI DOĞRU açılır. Çerçeve ve köşe yarıçapı kalkar: artık
       listenin içinde bir kutu değil, çekmecenin bir ŞERİDİ. */
    .cart-drawer > .cart-aks {
      flex: 0 0 auto; margin: 0; border: 0; border-radius: 0;
      /* KAYDIRMA SEÇENEĞİNİ BELİRTEN ÇİZGİ (Kerem: "bu kaydırma seçeneği o
         kısmın hemen üstünde bir çizgi ile belli edilmeli"). */
      border-top: 1px solid var(--line-soft);
      background: rgba(255, 255, 255, 0.03);
    }
    /* KULAKÇIK ÇİZGİSİ: dokunulabilir olduğunu söyleyen kısa tutamaç. */
    .cart-drawer > .cart-aks .cart-aks-handle::before {
      content: ""; position: absolute; left: 50%; top: 5px;
      width: 34px; height: 3px; border-radius: 999px;
      background: var(--line, rgba(255,255,255,.18)); transform: translateX(-50%);
    }
    .cart-drawer > .cart-aks .cart-aks-handle { position: relative; padding-top: 14px; }
    /* AÇIKKEN LİSTE KENDİ İÇİNDE KAYAR ama çekmecenin yüksekliğini aşmaz:
       üst sınır görünüm boyundan türer, sabit piksel değil. */
    .cart-drawer > .cart-aks .cart-aks-list { max-height: min(46svh, 340px); overflow-y: auto; }
    /* 61-G1: Aksesuar ekle şeridi (Manyetik Saha) — footer başında, sepet boşken de görünür. */
    /* ---- KATALOG-002: sepet KADEME ŞERİDİ (kart sayısı + aralık ayraçları + indirim mesajı) ----
       Yalnız adet kademesi tanımlıysa JS ile olusur; kademe yoksa DOM'da hic bulunmaz. */
    .cart-tier { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
    .cart-tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
      font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted, #9a958a); margin-bottom: 9px; }
    .cart-tier-count { font-size: 1.15rem; letter-spacing: 0; color: var(--gold-text); }
    /* G2 (1 Eylul 2026): KADEME KUTUCUKLARI KALDIRILDI. "1 adet / 6'li paket /
       12'li paket" seridi secim araci degildi, yalniz adedin hangi kademede
       oldugunu gosteriyordu. Musteri artik yalniz ADET seciyor; kural CSS'te de
       kaldirildi ki olu bicim kalmasin. Kalan: sepetteki kart sayaci + bir
       sonraki esigin ipucu. */
    /* Serit artik sepet detay panelinde yasiyor. */
    .cart-detail .cart-tier { margin-top: 12px; }
    .cart-tier-pct { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; color: #7ddc9a; }
    .cart-tier-msg { margin-top: 9px; font-size: 0.8rem; line-height: 1.45; color: var(--text);
      background: rgba(244,184,96,0.10); border: 1px solid rgba(244,184,96,0.28); border-radius: 9px; padding: 8px 10px; }
    .cart-tier-msg b { color: var(--gold); }
    .cart-tier-msg.is-max { background: rgba(125,220,154,0.10); border-color: rgba(125,220,154,0.30); color: #7ddc9a; }

    /* ---- SEPET AKSESUAR BOLUMU (acilir/kapanir) — founder 2026-08-18, 2026-08-18b ----
       2026-08-18b (Kerem): bolum "KIZAK OLMAYACAK sekilde" KUCULDU. Uc degisiklik:
       (1) SURUKLEME/KULAKCIK KALKTI — grip cizgisi, cursor:grab ve touch-action:none gitti; artik
           duz bir acilir-kapanir baslik (tikla). Eski kulakcik hem gorsel olarak "kizak" duygusu
           veriyordu hem de touch-action:none + pointer capture yuzunden uzerinden baslayan kaydirma
           jestini YUTUYORDU (sepette takilma hissinin kaynaklarindan biri; bkz. JS tarafi).
       (2) IC KAYDIRMA KUTUSU KALKTI — eski govde max-height:340px + overflow-y:auto idi: cekmecenin
           KENDI kaydirmasinin icinde IKINCI bir kaydirma alani (ic cubuk + zincirleme) demekti.
           Artik grid-template-rows 0fr<->1fr ile acilir/kapanir: sihirli piksel yok, ic scroller yok.
       (3) DAHA KOMPAKT + boyut secenekleri arasi ARALIK ACILDI (bkz. .cart-aks .acc-sizes). */
    .cart-aks { border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: rgba(255,255,255,0.02); }
    .cart-aks-handle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
      background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; text-align: left; }
    .cart-aks-handle .acc-head { flex: 1; margin: 0; font-family: 'Oswald', sans-serif; font-size: 0.72rem;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #9a958a); }
    .cart-aks-count { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
      background: var(--gold-dim); color: var(--gold-text); font-size: 0.66rem; font-weight: 800; }
    .cart-aks-handle::after { content: "▾"; color: var(--muted, #9a958a); font-size: 0.8rem; transition: transform 0.25s ease; }
    .cart-aks[data-state="collapsed"] .cart-aks-handle::after { transform: rotate(-90deg); }
    /* 0fr <-> 1fr acilis: yukseklik ICERIKTEN gelir (max-height tahmini YOK) ve ic scroller YARATMAZ. */
    .cart-aks-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.26s ease, opacity 0.2s ease; }
    .cart-aks-list { min-height: 0; overflow: hidden; display: grid; gap: 8px; padding: 0 10px 10px;
      transition: padding-bottom 0.26s ease; }
    .cart-aks[data-state="collapsed"] .cart-aks-body { grid-template-rows: 0fr; opacity: 0; }
    /* 0fr satiri icerigi sifirlar ama KUTU DOLGUSU satirda kalir -> kapali halde 10px hayalet
       bosluk kaliyordu; dolgu da kapaninca sifirlanir (kapali yukseklik = tam baslik yuksekligi). */
    .cart-aks[data-state="collapsed"] .cart-aks-list { padding-bottom: 0; }
    .cart-aks .acc-item { border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 10px; display: grid; gap: 7px; }
    @media (prefers-reduced-motion: reduce) { .cart-aks-body { transition: none; } }

    .cart-accessory { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
    .cart-accessory .acc-head { font-family: 'Oswald', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #9a958a); margin-bottom: 8px; }
    .cart-accessory .acc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
    .cart-accessory .acc-name { font-weight: 600; font-size: 0.95rem; }
    .cart-accessory .acc-price { font-family: 'Oswald', sans-serif; color: var(--gold-text); white-space: nowrap; }
    .cart-accessory .acc-sizes { display: flex; gap: 8px; margin-bottom: 12px; }
    .cart-accessory .acc-size { flex: 1; }
    .cart-accessory .acc-size input { position: absolute; opacity: 0; pointer-events: none; }
    .cart-accessory .acc-size span { display: block; text-align: center; border: 1px solid var(--line); border-radius: 9px; padding: 7px 4px; font-size: 0.82rem; color: var(--muted, #9a958a); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
    .cart-accessory .acc-size input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(244,184,96,0.12); }
    .cart-accessory .acc-size input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
    .cart-accessory .acc-add { min-height: 40px; }
    /* 2026-08-18b (Kerem): aksesuar bolumu KOMPAKT + boyut secenekleri arasi ARALIK ACIK.
       ONCE BIR TASIMA HATASI: yukaridaki .acc-* duzen kurallari YALNIZ eski .cart-accessory
       sinifina baglanmisti; aksesuar bolumu .cart-aks'a tasininca .acc-sizes flex OLMAKTAN CIKTI
       (computed display:block) -> iki boyut secenegi ne esit genislige yayiliyor ne de aralarindaki
       bosluk kontrol edilebiliyordu; gorunen ~13px'lik acikligi tamamen satir-ici bosluk karakteri
       veriyordu. Duzen kurallari artik IKI kapsayici icin de gecerli; aralik 8px -> 14px. */
    .cart-aks .acc-sizes { display: flex; gap: 14px; margin-bottom: 0; }
    .cart-aks .acc-size { flex: 1; }
    .cart-aks .acc-size input { position: absolute; opacity: 0; pointer-events: none; }
    .cart-aks .acc-size span { display: block; text-align: center; border: 1px solid var(--line); border-radius: 9px;
      padding: 6px 8px; font-size: 0.82rem; color: var(--muted, #9a958a); cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
    .cart-aks .acc-size input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(244,184,96,0.12); }
    .cart-aks .acc-size input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
    .cart-aks .acc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 0; }
    .cart-aks .acc-name { font-weight: 600; font-size: 0.9rem; }
    .cart-aks .acc-price { font-family: 'Oswald', sans-serif; color: var(--gold-text); white-space: nowrap; }
    .cart-aks .acc-add { min-height: 34px; padding-top: 7px; padding-bottom: 7px; font-size: 0.86rem; }
    .cart-summary-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      font-size: 1rem;
      font-weight: 500;
    }
    .cart-total-price {
      font-size: 1.4rem;
      color: var(--gold-text);
      font-family: 'Oswald', sans-serif;
    }

    .tff-actions {
      margin-top: 10px;
    }
    #tffTabs { scroll-margin-top: 86px; }   /* Devam Et geçişinde tablar header altında kalmasın */

    /* ===== CHECKOUT FRONT (Sipariş Bilgileri Formu) — Miqno premium ===== */
    .checkout-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 200; }
    .checkout-overlay.open { opacity: 1; visibility: visible; }
    .checkout-panel { position: fixed; z-index: 201; left: 50%; top: 50%; transform: translate(-50%, -47%); width: min(940px, 94vw); max-height: 90vh; overflow-y: auto; background: var(--drawer-bg); border: 1px solid rgba(244,184,96,0.4); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transition: opacity .28s ease, transform .28s ease, visibility .28s ease; }
    .checkout-panel.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
    .checkout-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(244,184,96,0.7), transparent); }
    .checkout-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--drawer-bg); z-index: 2; }
    .checkout-head h3 { font-family: 'Oswald', sans-serif; font-size: 1.3rem; letter-spacing: 0.02em; }
    .checkout-close { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; }
    .checkout-close:hover { color: var(--gold); }
    .checkout-close svg { width: 22px; height: 22px; display: block; }
    .checkout-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 24px; }
    /* Hesap geçidi (guest vs üye girişi) — yalnız gate-active iken görünür */
    .checkout-gate { display: none; }
    .checkout-body.gate-active { display: block; }
    .checkout-body.gate-active .checkout-form, .checkout-body.gate-active .checkout-aside { display: none; }
    .checkout-body.gate-active .checkout-gate { display: block; max-width: 420px; margin: 12px auto; text-align: center; }
    .checkout-gate-lead { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; line-height: 1.6; }
    .checkout-gate-btn { width: 100%; margin-bottom: 12px; }
    .checkout-gate-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.82rem; margin: 6px 0 14px; }
    .checkout-gate-or::before, .checkout-gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
    .checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .co-field { display: flex; flex-direction: column; gap: 6px; }
    .co-field.co-col2 { grid-column: 1 / -1; }
    .co-field label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
    .co-field input, .co-field textarea { background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text); border-radius: 10px; padding: 13px 14px; font-family: inherit; font-size: 0.98rem; width: 100%; transition: border-color .2s ease; }
    .co-field input:focus, .co-field textarea:focus { outline: none; border-color: var(--gold); }
    /* Giriş yapmış kullanıcıda hesap e-postası kilitli gelir (Phase 3 checkout ön-doldurma) */
    .co-field input.co-field-locked { opacity: .78; cursor: not-allowed; }
    .co-field textarea { resize: vertical; }
    .co-err { color: #ff8f8f; font-size: 0.78rem; }
    .co-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 0.88rem; color: var(--muted); cursor: pointer; line-height: 1.5; }
    .co-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
    .co-check a { color: var(--gold); text-decoration: underline; }
    .checkout-actions { display: flex; gap: 12px; margin-top: 22px; }
    .checkout-actions .btn { flex: 1; }
    .checkout-aside { border-left: 1px solid var(--line-soft); padding-left: 24px; }
    .checkout-aside h4 { font-family: 'Oswald', sans-serif; font-size: 1.05rem; margin-bottom: 12px; color: var(--gold-text); letter-spacing: 0.02em; }
    .checkout-sum-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .checkout-sum-img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--bg-2); }
    .checkout-sum-title { font-size: 0.9rem; font-weight: 600; }
    .checkout-sum-meta { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
    .checkout-sum-price { font-weight: 700; color: var(--gold-text); font-size: 0.9rem; white-space: nowrap; }
    .checkout-sum-tag { display: inline-block; margin-top: 6px; font-size: 0.68rem; color: var(--gold-text); background: var(--gold-dim); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; }
    .checkout-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--muted); padding: 2px 0; }
    .checkout-kv span:last-child { color: var(--text); text-align: right; word-break: break-word; }
    .checkout-acc-btn { background: transparent; border: none; color: var(--gold); font-size: 0.78rem; cursor: pointer; padding: 5px 0; font-family: inherit; }
    .checkout-sum-total { display: flex; justify-content: space-between; font-weight: 700; padding-top: 14px; font-size: 1rem; }
    .checkout-sum-total span:last-child { color: var(--gold-text); }
    @media (max-width: 760px) { .checkout-body { grid-template-columns: 1fr; gap: 22px; padding: 18px; } .checkout-aside { border-left: none; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 18px; } }
    @media (max-width: 480px) { .checkout-grid { grid-template-columns: 1fr; } }

    /* ============ KART ÖZELLEŞTİRİCİ (CARD CUSTOMIZER) ============ */
    /* ============ #ozel BASLIK: 3'LU YELPAZE + YAZI (founder 2026-08-17) ============
       Mobil: yelpaze USTTE, yazi altta (ortali). Masaustu: yelpaze SOLDA, yazi saginda. */
    #ozel .cu-head { display: grid; justify-items: center; gap: clamp(14px, 2.4vw, 26px); }
    #ozel .cu-head-fan { position: relative; width: clamp(210px, 62vw, 290px); aspect-ratio: 4 / 3; flex: none; }
    #ozel .cu-head-text > *:last-child { margin-bottom: 0; }
    @media (min-width: 900px) {
      #ozel .cu-head { grid-template-columns: auto minmax(0, 1fr); align-items: center;
        justify-items: start; text-align: left; column-gap: clamp(30px, 4vw, 68px);
        max-width: 1040px; margin-inline: auto; }
      #ozel .cu-head-fan { width: clamp(250px, 24vw, 330px); }
      #ozel .cu-head-text p { margin-inline: 0; }
    }
    /* Yelpaze kartlari acik krem zeminde: golge yumusatilir (koyu bolum icin ayarliydi) */
    /* Seffaf siluet: kutu yuvarlakligi/konturu YOK (yoksa kartin arkasinda dikdortgen hissi olur).
       Golge yalnizca drop-shadow ile SILUETE uygulanir. Kart asset'lerinin alfasi temizlendi
       (fan-*.webp): orijinal saha-kart-*.webp dosyalarinda hicbir piksel alfa=0 degildi (min 2),
       bu yuzden krem zeminde hafif opak bir DIKDORTGEN gorunuyordu. */
    #ozel .cu-head-fan .fxmf-card { border-radius: 0; filter: drop-shadow(0 10px 18px rgba(28, 22, 12, 0.34)); }

    .customizer-section {
      background: linear-gradient(180deg, var(--bg), var(--panel-2));
      border-top: 1px solid var(--line-soft);
      padding: 60px 0;
    }
    .customizer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: flex-start;
      margin-top: 40px;
    }
    @media (min-width: 940px) {
      .customizer-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 60px;
      }
      /* Sol önizleme: sayfa aşağı kaydıkça görünür kalır (formla birlikte ilerler) */
      .customizer-preview { position: sticky; top: 90px; align-self: start; }
    }
    
    /* FAZ 19v2 P2 / MOBİL UX — KART STİLİ SEÇİCİ: belirgin BÜYÜK KARTLAR (mini önizleme + seçili tik) */
    .cs-picker { margin-bottom: 20px; }
    .cs-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; text-align: center; }
    .cs-scroll { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    /* ÇERÇEVE KUTUSU KALDIRILDI (Kerem): stil kutusu SAYDAM — kartlar büyüdü, seçim vurgusu thumb'a taşındı. */
    .cs-style { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative;
      padding: 4px; border-radius: 14px; cursor: pointer; text-align: center;
      background: transparent; border: none; color: var(--text);
      font-weight: 700; font-family: Oswald, sans-serif; }
    .cs-style:hover .cs-thumb { border-color: rgba(244,184,96,.7); }
    .cs-style .cs-name { font-size: 1.02rem; color: var(--text); }
    .cs-style.active .cs-name { color: var(--gold, #F4B860); }
    /* #4: thumbnail = gerçek DEFAULT önizleme kartının küçültülmüş KLONU (JS enjekte eder). Kutu kalkınca büyüdü. */
    .cs-thumb { width: 110px; height: 156px; border-radius: 10px; flex-shrink: 0; border: 2px solid #333;
      overflow: hidden; position: relative; background: #0a0a0a; transition: border-color .15s, box-shadow .15s; }
    .cs-thumb--fifa { border-color: var(--gold, #F4B860); }
    .cs-thumb--forgexi { border-color: #2b6f9e; }
    .cs-thumb .tf-custom-card { width: 220px; transform: scale(.5); transform-origin: top left; position: absolute; top: 0; left: 0; pointer-events: none; margin: 0; }
    /* seçili kart belirgin: kutu çerçevesi yerine THUMB'da altın halka */
    .cs-style.active .cs-thumb { border-color: var(--gold, #F4B860); box-shadow: 0 0 0 3px rgba(244,184,96,.9), 0 0 16px rgba(244,184,96,.4); }
    .cs-check { position: absolute; top: 6px; right: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
      background: var(--gold, #F4B860); color: #241A20; font-size: 13px; font-weight: 800; display: none; align-items: center; justify-content: center; }
    .cs-style.active .cs-check { display: flex; }

    /* ESKI MOBIL ONIZLEME CEKMECESI CSS'I KALDIRILDI (Kerem, 25 Agustos 2026):
       "cs-drawer, cs-preview-handle, cs-preview-backdrop eleman ve CSS
        kurallari kaldirilir."
       Uc konumlu (collapsed/half/full) sheet, tutamaci, perdesi, secim ozeti ve
       sheet-ici Sepete Ekle dugmesi -- hepsi bu blokta yasiyordu. Motoru
       (csPreviewDrawer) tf-sayfa.js'ten, dugumleri tasarla.html'den silindi.
       Mobil duzenin yeni sahibi: assets/css/tasarla-mobil.css. */

    /* MOBIL #ozel DUZENI — CEKMECE DISI kurallar.
       DIKKAT: bunlar 25 Agustos 2026'da eski cekmece CSS'i silinirken yanlislikla
       birlikte gitmisti; ayni @media blogunda yasiyorlardi ama cekmeceyle
       ilgileri yok. index.html'deki #ozel bolumunu de besliyorlar -> geri
       konuldu. (/tasarla'nin mobil duzeni bunlarin uzerine tasarla-mobil.css
       ile yaziliyor; o dosya SONRA yukleniyor.)
       Yalniz cekmeceye ait olan `.customizer-preview{position:static}` KALDI
       DISARIDA: o kural sheet'i kok katmana cikarmak icindi, sheet artik yok
       ve yeni kanvas `position:fixed` olmak zorunda. */
    @media (max-width: 939px) {
      /* Yazilar ekran kenarina dayanmasin: form ic boslugu 16px -> basliga da
         AYNI 16px. Formun kenardan-kenara koyu bandi KORUNUR. */
      #ozel .section-head { padding-inline: 16px; }
      #ozel .customizer-grid { margin-top: 8px; border: none; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
      /* Form zemini KOYU KALIR (#ozel bolumu acik zeminli; saydam birakilirsa
         beyaz uzerine beyaz yazi kaliyordu). */
      #ozel .customizer-form { background: var(--panel); border: none; border-radius: 0; box-shadow: none; padding: 6px 16px 28px; }
      /* Sekme cubugu bolumde asagi indikce site header'inin altina yapisir. */
      #ozel .tff-tabs { position: sticky; top: var(--header-h, 64px); z-index: 30;
        background: rgba(10, 10, 12, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        margin: 0 -16px; padding: 4px 16px 0; }
    }


    /* TF-103 v2: Forge XI overlay (.fx-ov/.fx-top/.fx-name/.fx-slogan/.fx-logo) artık YALNIZ
       assets/css/tf-card.css'te tanımlı (65b'nin "TF logosu GÖRÜNMEZ ama yeri korunur" kuralı dahil) --
       bkz. dosya başı yorumu. */

    /* FAZ 19v2 P3 — FOTOĞRAF STİLİ alanı + tanıtım paneli + rozet */
    .ps-field[data-active="false"] .ps-scroll { opacity: .45; pointer-events: none; filter: grayscale(.4); }
    .ps-field[data-active="false"] .ps-promo { display: none !important; }
    .ps-hint { display: block; margin: 2px 0 8px; }
    .ps-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    /* ÇİP = FOTOĞRAFIN KENDİ KÜÇÜK ÖNİZLEMESİ + ad (mockup P2, 27 Ağustos 2026).
       Eskiden yalnız ad + fiyat rozetiydi; müşteri "Vintage" kelimesinden değil
       KENDİ fotoğrafının o stildeki hâlinden seçsin diye görsel oldu.
       Yatay dizilim -> dikey: küçük önizleme üstte, ad altta. */
    .ps-opt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
      padding: 8px 8px 9px; border-radius: 12px; cursor: pointer; white-space: nowrap;
      background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text); font-weight: 700; font-family: Oswald, sans-serif; }
    .ps-opt.active { border-color: var(--gold, #F4B860); color: var(--gold, #F4B860); box-shadow: 0 0 0 2px rgba(244,184,96,.25); }
    /* Küçük önizleme. CSS ailesinde stilin KENDİ filtre zinciri satır içi
       yazılır (bedava: ek raster yok); piksel ailesinde JS üretilmiş bir
       data-URL arka plan olarak gelir. */
    .ps-opt .ps-thumb { display: block; width: 58px; height: 58px; border-radius: 9px;
      background-color: var(--panel); background-size: cover; background-position: center;
      position: relative; overflow: hidden; }
    .ps-opt .ps-name { font-size: .78rem; font-weight: 700; max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
    /* Fx (fade/vinyet/grain) küçük önizlemede de görünsün — yoksa Vintage ile
       Nostaljik ayırt edilemiyordu. Değerler tf-card.css'teki fx katmanının
       KÜÇÜLTÜLMÜŞ karşılığı; baskıya giden tanım orada, tek yerde. */
    .ps-opt .ps-thumb[data-fx]::after { content: ''; position: absolute; inset: 0; }
    .ps-opt .ps-thumb[data-fx="vintage"]::after { background: rgba(255,226,178,.13); }
    .ps-opt .ps-thumb[data-fx="nostaljik"]::after { background: rgba(214,224,232,.16); }
    .ps-opt .ps-thumb[data-fx="sinematik"]::after {
      background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 100%); }
    /* Item 1 — Low Poly çipi arka plan kaldırılmadan KİLİTLİ: soluk + kilit rozeti. Tıklama JS'te
       yakalanır (foto sekmesine yönlendirir), CSS pointer-events'i KAPATMAZ (tıklama ipucu göstersin). */
    .ps-opt.ps-opt-locked { opacity: .5; filter: grayscale(.35); }
    .ps-opt .ps-lock { font-size: .82rem; line-height: 1; }
    .ps-price-badge { font-size: .78rem; font-weight: 800; color: #0d0d0d; background: var(--gold, #F4B860); border-radius: 999px; padding: 2px 8px; }
    /* ÜCRETLİ LOW POLY TANITIM PANELİ EMEKLİ (27 Ağustos 2026).
       Low Poly ücretsizleşti ve kartın üstünde anında üretiliyor -> "sipariş
       sonrası dönüştürülür" vaadi ve "ücretsiz kendin üret" prompt kutusu
       artık YANLIŞ bilgi. Markup ve JS referansları SİLİNMEDİ (geçmiş
       siparişlerin panel görünümü ve bu alanı arayan testler kırılmasın),
       panel kalıcı gizlendi.

       `[hidden]` NİTELİĞİ YETMİYOR — bu projede dördüncü kez: aşağıdaki
       `display:grid` kuralı nitelik varsayılanını EZİYOR ve panel fotoğraf
       yüklenince geri geliyordu (390px koşumunda ölçüldü, 27 Ağustos 2026).
       Bu yüzden kural `display:none !important` ile kapatılıyor. */
    .ps-promo { display: none !important; }
    .ps-promo { margin-top: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
    @media (max-width: 620px) { .ps-promo { grid-template-columns: minmax(0, 1fr); } }
    .ps-way { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px; }
    .ps-way-title { margin: 0 0 8px; font-size: .98rem; font-weight: 800; color: var(--gold, #F4B860); }
    .ps-way-desc { font-size: .85rem; line-height: 1.45; color: var(--text-dim, #c9c7c0); margin: 8px 0 10px; }
    /* FAZ 48: örnek galeri — 3 sütun × 2 sıra: ÜST sıra 3 orijinal, ALT sıra 3 Low Poly (her sütun aynı kişi).
       Doğal olarak kompakt (2 sıra); masaüstü + mobil aynı ızgara. */
    .ps-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
    .ps-ex { margin: 0; }
    .ps-ex img { width: 100%; height: auto; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); display: block; }
    .ps-ex figcaption { font-size: .7rem; text-align: center; margin-top: 3px; color: var(--text-dim, #c9c7c0); }
    .ps-ex-note { display: block; font-size: .72rem; color: var(--text-dim, #9c9a92); margin-top: 6px; font-style: italic; }
    .ps-prompt { width: 100%; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; line-height: 1.4;
      background: #14140f; color: #e7e4db; border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px; }
    .ps-copy { width: 100%; margin-top: 8px; }
    .ps-copied { display: inline-block; margin-top: 6px; font-size: .8rem; font-weight: 700; color: #7ad07a; }

    /* CANLI KART ÖNİZLEME (LEFT) */
    .customizer-preview {
      display: grid;
      place-items: center;
      z-index: 10;
    }
    .tf-custom-card-wrapper {
      perspective: 1000px;
      width: 100%;
      display: grid;
      place-items: center;
      position: relative;   /* FAZ 19v2 P3: foto stili rozeti için */
    }
    /* === SARMALAYICI SATIR KİLİDİ (S-1, 29 Ağustos 2026) ====================
       KAP TEK GÖZLÜDÜR. Buraya konan HER çocuk aynı göze (1/1) düşer.

       NEDEN BU KURAL VAR — aynı arıza üç turda üç farklı düğümle çıktı:
         PR #32  `.tfk-secim-katmani`   (kanvas seçim katmanı)
         PR #34  `.tfc-yazi-vurgu`      (emekli edildi)
         yan bulgu `.tsm-yz-kutular`    (mobil düzenleme kipi)
       Üçü de bu kabın grid çocuğuydu ve ızgaraya girmemeleri KENDİ üstlerindeki
       tek bir `position:absolute` bildirimine bağlıydı. O bildirim bir kez
       ölünce (25-29 Ağustos: kapanmamış bir `@media` dosyanın kalanını yuttu)
       çocuk akışa giriyor, ızgara İKİNCİ SATIR açıyor, kap şişiyor ve KART
       KESİLİYOR. ÖLÇÜLDÜ (1920x911): `grid-template-rows` "485.703px" ->
       "485.703px 47px", kap 666.9 -> 731.4, kartın tepesi 204.6 -> 172.3.

       ÇOCUK KOVALAMAK YERİNE KAP KURALI: `> *` olduğu için YARIN EKLENECEK
       çocuk da kendiliğinden kapsanır -- kimsenin bir şey hatırlaması
       gerekmez. Çocuğun kendi `position:absolute`u DURUYOR (o hâlâ birinci
       savunma); bu kural ikinci savunma, yani ağ.

       KART DA DAHİL: iki kart düğümü var (`#customCardPreview`,
       `#forgexiPreview`) ve ikisi de otomatik yerleşseydi ikincisi İKİNCİ
       SATIRA düşerdi. Bugün biri `display:none` olduğu için sorun görünmüyor;
       kural o tuzağı da kapatıyor. ÖLÇÜLDÜ (1920x911 / 1280x855 / 390x844;
       boş kart, yazı seçili, fotoğraf yüklü + rozet açık, mobil düzenleme
       kipi): kartın ve kabın kutuları bu kural EKLENMEDEN ÖNCEKİYLE BİREBİR.

       `place-items:center` DEĞİŞMEDİ -- hizalama gözün içinde yapılıyor.
       Nöbetçiler: tests/sarmalayici-satir-kilidi.test.js (kural yazılı mı)
                   scripts/olc-sarmalayici.js       (sonuç tutuyor mu) */
    .tf-custom-card-wrapper > * { grid-area: 1 / 1; }
    /* TF-103 v2 — ETKİLEŞİM-SADECE (GEOMETRİ YOK). Sayfadaki mouse-tilt efekti (bkz. aşağıda
       addEventListener('mousemove', ...) -> cardPreview.style.transform = 'rotateX(...)rotateY(...)')
       bu üç özelliğe ihtiyaç duyar. Konum/boyut/renk İÇERMEZ -- kanonik kart geometrisi TAMAMEN
       assets/css/tf-card.css'te (bkz. <head>'teki <link>) ve burada TEKRARLANMAZ. Sepet/admin
       önizlemeleri (.cdx-cardwrap/.tf-card-render-host içindeki .tf-custom-card) bu seçiciyle de
       eşleşir ama üzerlerinde mousemove dinleyicisi YOK -> etkisiz, zararsız. */
    .tf-custom-card { transform-style: preserve-3d; transition: transform 0.15s ease, filter 0.3s ease; }
    .tf-custom-card:hover { filter: drop-shadow(0 30px 54px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(244,184,96, 0.3)); }

    /* TF-103 · Yön 2 — "FOTOĞRAFI AYARLA" MODU. Kart VARSAYILAN olarak yalnız GÖRÜNTÜLENİR:
       touch-action serbest -> mobilde sayfa kaydırma NORMAL çalışır, karta dokunmak fotoğrafı
       OYNATMAZ (eski "touch-action:none daima açık" davranışı KALDIRILDI -> kaydırma↔sürükleme
       çatışması bitti). Fotoğraf hareketi YALNIZ .tfc-editing (Ayarla moduna girilince) aktifleşir:
       o an touch-action:none + gesture bağlı. Gesture MATEMATİĞİ değişmedi -- yalnız NE ZAMAN aktif
       olduğu değişti (bkz. index.html initPhotoGesture: editing bayrağı, gesture'ı kapıya bağlar). */
/* A2 (KOMUT A): "Fotografi Ayarla" KIPI EMEKLI -- kural + dugum birlikte kalkti.
   Kaldirilan siniflar: .tfc-edit-scrim · .tfc-edit-active · .tfc-edit-lift · .tfc-editing.
   Fotograf artik kipsiz, dogrudan kartin ustunde konumlaniyor; jestin tek sahibi
   kanvas motoru (tf-kanvas.js). Olu kural birakilmadi -- D-1..D-4 muhru. */
    .photo-adjust-row {
      display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
      margin-top: 12px; text-align: center;
    }
    /* NORMAL durum: belirgin "Ayarla" çağrısı (foto varken) + tamamlanma rozeti */
    .photo-adjust-cta {
      display: inline-flex; align-items: center; gap: 7px; background: var(--gold, #F4B860); color: #181818;
      border: 0; border-radius: 999px; padding: 9px 18px; font-size: 0.86rem; font-weight: 700; cursor: pointer;
      font-family: 'Oswald', sans-serif; letter-spacing: 0.02em;
    }
    .photo-adjust-cta:hover { filter: brightness(1.06); }
    /* M3 (KOMUT 4.2) — 90 derece dondurme. "Ayarla" cagrisinin YANINDA, ikincil
       agirlikta: birincil eylem hala konumlandirma. Ayni hap kalibi (Sifirla ile
       ayni cerceve dili) -> yeni bir dugme dili ICAT EDILMIYOR. */
    .photo-adjust-rot {
      display: inline-flex; align-items: center; gap: 6px; background: transparent;
      border: 1px solid var(--line-soft); color: var(--gold-text, #F4B860);
      border-radius: 999px; padding: 8px 14px; font-size: 0.8rem; font-weight: 700;
      cursor: pointer; font-family: 'Oswald', sans-serif; letter-spacing: 0.02em;
    }
    .photo-adjust-rot:hover { border-color: var(--gold, #F4B860); }
    .photo-adjust-rot:focus-visible { outline: 2px solid var(--gold, #F4B860); outline-offset: 2px; }
    .photo-adjust-rot[hidden] { display: none; }
    .photo-adjust-done {
      display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700;
      color: var(--good, #48b98a); font-family: 'Oswald', sans-serif; letter-spacing: 0.02em;
    }
    /* DÜZENLEME durumu: ipucu + Sıfırla + Tamam */
    .photo-adjust-edit { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
    .photo-adjust-edit-btns { display: flex; gap: 8px; }
    /* display:flex/inline-flex, [hidden]'ın UA display:none'ını EZER -> hidden görsel etki yapmaz.
       Bu override ile hidden gerçekten gizler (durum makinesi doğru çalışır). */
    .photo-adjust-cta[hidden], .photo-adjust-done[hidden], .photo-adjust-edit[hidden] { display: none; }
    .photo-adjust-hint { font-size: 0.78rem; color: var(--muted); }
    .photo-adjust-reset {
      background: transparent; border: 1px solid var(--line-soft); color: var(--gold-text, #F4B860);
      border-radius: 999px; padding: 6px 14px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
      font-family: 'Oswald', sans-serif;
    }
    .photo-adjust-reset:hover { border-color: var(--gold, #F4B860); }
    .photo-adjust-ok {
      background: var(--gold, #F4B860); color: #181818; border: 0; border-radius: 999px;
      padding: 6px 16px; font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: 'Oswald', sans-serif;
    }
    .photo-adjust-ok:hover { filter: brightness(1.06); }
    .photo-adjust-cta:focus-visible, .photo-adjust-ok:focus-visible, .photo-adjust-reset:focus-visible {
      outline: 2px solid var(--gold, #F4B860); outline-offset: 2px;
    }
    /* Odak: Ayarla modunda arka planı karart (scrim) + kart sütununu öne al. */

    /* TASARIM FORMU (RIGHT) */
    .customizer-form {
      background: var(--panel);
      border: 1px solid var(--line-soft);
      border-radius: 20px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    .tff-tabs {
      display: flex;
      border-bottom: 1px solid var(--line-soft);
      gap: 16px;
    }
    /* B4.2: kisa/tam etiket anahtari — varsayilan (masaustu) TAM etiket. */
    .tff-lbl-short { display: none; }
    .tff-tab-btn {      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: 'Oswald', sans-serif;
      font-size: 1.1rem;
      padding: 10px 4px;
      text-transform: uppercase;
      transition: color 0.2s, border-color 0.2s;
    }
    @media (min-width: 900px) {
      /* B4.2 masaustu: sekmeler daha ferah/okunakli (founder). */
      .tff-tab-btn { padding: 13px 18px; font-size: 0.97rem; letter-spacing: 0.02em; }
    }
    .tff-tab-btn:hover, .tff-tab-btn.active {
      color: var(--gold-text);
    }
    .tff-tab-btn.active {
      border-color: var(--gold);
    }

    /* ============ KLASOR AYRACI (KULAKCIK) — #ozel sekme seridi ============
       Founder: "secilen bolum kulakcik gibi FARKLI RENK olsun, yazi ona gore degissin;
       klasor ayraci gibi gozukebilir" + "header belli olmuyor, yazi kucuk, ustte bosluk fazla".
       Olculdu: aktif/pasif AYNI renk-agirlik-zemin idi (tek fark 2px alt cizgi).
       Cozum: serit bir tik KOYU zemin (bir kat asagi), SECILI sekme panel rengiyle DOLU +
       ust kenarda altin serit + altin kalin yazi; pasifler soluk/zeminsiz. */
    #ozel .tff-tabs { gap: 4px; align-items: flex-end; border-bottom: 0;
      background: rgba(0, 0, 0, 0.24); border-radius: 14px 14px 0 0; padding: 7px 7px 0; }
    #ozel .tff-tab-btn { background: transparent; border: 0; border-radius: 11px 11px 0 0;
      color: rgba(236, 236, 236, 0.6); font-weight: 600; letter-spacing: 0.04em;
      transition: background 0.2s ease, color 0.2s ease; }
    #ozel .tff-tab-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--gold-text); }
    /* SECILI = kulakcik: panel rengiyle dolu -> panele baglanir; altin ust serit + kalin yazi */
    #ozel .tff-tab-btn.active { background: var(--panel); color: var(--gold); font-weight: 700;
      box-shadow: inset 0 2px 0 var(--gold); }
    @media (min-width: 900px) {
      /* Serit formun EN USTUNE oturur (kutu kenarina kadar) -> ustteki fazla bosluk gider */
      #ozel .customizer-form { padding-top: 0; }
      #ozel .tff-tabs { margin: 0 -26px; padding: 8px 26px 0; border-radius: 20px 20px 0 0; }
      #ozel .tff-tab-btn { padding: 13px 20px; font-size: 1.02rem; }
    }
    @media (max-width: 899px) {
      #ozel .tff-tab-btn { font-size: clamp(0.84rem, 3.4cqw, 0.95rem); }
    }
    /* ALTI SEKME, DAR MASAUSTU (900-1279px): serit 6 sekmeye bolununce buton 62px'e
       dusuyor ama #ozel kurali 13px 20px pay + 1.02rem font veriyordu -> olculdu (1024px):
       "ARKA PLAN" etiketi 80px, butonu 18px asiyor ve yan sekmenin yazisina giriyordu.
       (Bu, sekme sirasi degismeden ONCE de boyleydi; 6. sekme eklendiginde dogmus.)
       Cozum: pay kisilir ve etiket IKI SATIRA sarilir; font 0.86rem'in altina inmez —
       mobil dersinin aynisi: kisilma okunurlugu bozar. 1280px'te zaten siğiyor (83px). */
    @media (min-width: 900px) and (max-width: 1279px) {
      #ozel .tff-tab-btn { padding: 11px 6px; font-size: 0.86rem; letter-spacing: 0.01em;
        white-space: normal; line-height: 1.14; }
    }
    /* B4.2 masaustu: kart onizleme sutunu form sekme cubuguyla ayni ust hizadan baslasin
       (once onizleme yukaridan basliyor, form sekmeleri asagida kaliyordu). Mobilde etkisiz. */
    @media (min-width: 900px) {
      .customizer-preview { top: 96px; }
    }
    .tff-tab-content {
      display: none;
      flex-direction: column;
      gap: 20px;
    }
    .tff-tab-content.active {
      display: flex;
    }
    .tff-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .tff-field label {
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--muted);
    }
    /* Tasarım & Boyut: alt başlıkları daha belirgin yap */
    #tab-design > .tff-field > label, #tab-size > .tff-field > label { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-text); }
    .tff-field input[type="text"], .tff-field input[type="number"], .tff-field select {
      /* 60C: input yüzeyi 60A "adacık" hiyerarşisi — panel (--ink-2) ile AYNI değil, RECESSED (--ink) ki
         alanlar panelden net ayrılsın (eskiden --bg-2 = --ink-2 = panel -> kayboluyordu). Metin AA (--on-ink). */
      background: var(--ink);
      border: 1px solid var(--line-soft);
      color: var(--text);
      border-radius: 10px;
      padding: 12px 16px;
      font-family: inherit;
      font-size: 0.95rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .tff-field input[type="text"]:focus, .tff-field input[type="number"]:focus, .tff-field select:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(244,184,96, 0.18);   /* 60C: premium altın odak halkası (AA görünür) */
    }
    .tff-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .tff-file-upload {
      border: 2px dashed var(--line);
      background: rgba(244,184,96, 0.03);
      border-radius: 8px;
      padding: 24px;
      text-align: center;
      position: relative;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .tff-file-upload:hover {
      border-color: var(--gold);
      background: rgba(244,184,96, 0.08);
    }
    .tff-file-upload input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .tff-file-upload span {
      font-size: 0.9rem;
      color: var(--muted);
    }
    .tff-remove-photo {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(231, 76, 60, 0.4);
      background: rgba(231, 76, 60, 0.12);
      color: #ff6b5e;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s, color 0.2s;
    }
    .tff-remove-photo:hover { background: rgba(231, 76, 60, 0.25); transform: scale(1.08); }
    .tff-remove-photo svg { width: 17px; height: 17px; }
    .tff-remove-photo[hidden] { display: none; }
    /* TF-103 — arka plan kaldırma anahtarı (opsiyonel). Basit bir checkbox + görsel toggle-switch;
       ağır bir bileşen kütüphanesi YOK. */
    .tff-bgremove-toggle {
      display: flex; align-items: center; gap: 10px; margin-top: 10px;
      cursor: pointer; user-select: none;
    }
    .tff-bgremove-toggle[hidden] { display: none; }
    .tff-bgremove-toggle input[type="checkbox"] {
      position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
    }
    .tff-bgremove-track {
      /* `display: block` -- KOMUT B2-4: bu kutu genişliğini/yüksekliğini KENDİ
         söylemeli. Eskiden yalnız `flex: 0 0 auto` vardı ve ana kutu flex
         DEĞİLSE (bir katmanın başlık kuralı `display: block` yazdığında oluyor)
         satır-içi bir span'e düşüp width/height'ı YOK SAYIYORDU; içindeki mutlak
         konumlu thumb da 2px'lik kutuya göre yerleşip etiketin üstüne biniyordu.
         Bu satır bileşeni kapsayıcısının display'inden BAĞIMSIZ kılar. */
      display: block;
      flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
      background: var(--panel-2, #1c1c1c); border: 1px solid var(--line, #333);
      position: relative; transition: background 0.2s, border-color 0.2s;
    }
    .tff-bgremove-thumb {
      position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
      background: var(--muted, #999); transition: transform 0.2s, background 0.2s;
    }
    .tff-bgremove-toggle input:checked + .tff-bgremove-track {
      background: rgba(244,184,96, 0.28); border-color: var(--gold, #F4B860);
    }
    .tff-bgremove-toggle input:checked + .tff-bgremove-track .tff-bgremove-thumb {
      transform: translateX(16px); background: var(--gold, #F4B860);
    }
    .tff-bgremove-toggle input:disabled + .tff-bgremove-track { opacity: 0.5; cursor: wait; }
    .tff-bgremove-toggle input:focus-visible + .tff-bgremove-track { outline: 2px solid var(--gold, #F4B860); outline-offset: 2px; }
    .tff-bgremove-label { font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .tff-help {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: -2px;
    }

    /* FAZ 72b: Fotoğraf işlem adımları — YAN YANA iki adım (Fotoğraf -> Arka plan), her adımda
       spinner (işlem sürüyor) -> yeşil ✓ (bitti). Kullanıcı bir işlem yapıldığını net görür. */
    .tf-psteps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 0.82rem; font-weight: 600; }
    .tf-pstep { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
      border: 1px solid rgba(244,184,96,0.28); background: rgba(0,0,0,0.22); color: #cbb985; transition: color .2s, border-color .2s, background .2s, opacity .2s; }
    .tf-pstep .tf-pstep-ic { width: 14px; height: 14px; flex: 0 0 14px; display: inline-block; position: relative; }
    .tf-pstep-arrow { color: rgba(244,184,96,0.5); font-weight: 700; }
    .tf-pstep-tx i { font-style: normal; opacity: 0.92; font-weight: 600; }
    /* idle: soluk, boş halka */
    .tf-pstep[data-state="idle"] { opacity: 0.45; }
    .tf-pstep[data-state="idle"] .tf-pstep-ic::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.5; }
    /* active: dönen spinner */
    .tf-pstep[data-state="active"] { color: #e8cf7e; border-color: rgba(244,184,96,0.55); background: rgba(244,184,96,0.10); }
    .tf-pstep[data-state="active"] .tf-pstep-ic::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: 2px solid rgba(232,207,126,0.35); border-top-color: #e8cf7e; animation: tfPStepSpin 0.7s linear infinite; }
    @keyframes tfPStepSpin { to { transform: rotate(360deg); } }
    /* done: yeşil ✓ */
    .tf-pstep[data-state="done"] { color: #7ad07a; border-color: rgba(122,208,122,0.45); background: rgba(122,208,122,0.10); }
    .tf-pstep[data-state="done"] .tf-pstep-ic::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; line-height: 1; }
    /* error: amber ! */
    .tf-pstep[data-state="error"] { color: #ffcf8f; border-color: rgba(255,207,143,0.5); background: rgba(255,207,143,0.10); }
    .tf-pstep[data-state="error"] .tf-pstep-ic::before { content: "!"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
    @media (prefers-reduced-motion: reduce) { .tf-pstep[data-state="active"] .tf-pstep-ic::before { animation: none; } }

    /* FORM YETENEK PUANLARI — 60C: etiket · slider · değer NET AYRIK; satırlar nefes alır (mobil dahil). */
    .tff-stat-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px 24px;            /* satır-içi (mobil stack) + sütun arası */
    }
    /* 60C-ek: 3 stat SATIRI kardeş div — aralarında boşluk YOKtu (thumb alt satırın etiketine
       yaklaşıyordu). Satırlar arası net nefes: */
    .tff-stat-row + .tff-stat-row { margin-top: 28px; }
    @media (min-width: 560px) {
      .tff-stat-row {
        grid-template-columns: 1fr 1fr;
      }
    }
    .tff-stat-control {
      display: flex;
      flex-direction: column;
      gap: 16px;                 /* etiket/değer ile slider arası: thumb (18px) değere/etikete binmesin */
      padding-bottom: 4px;       /* thumb track altına ~6px taşar; alt satıra pay bırak */
    }
    .tff-stat-control label {
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--muted);
      display: flex;
      align-items: baseline;
      gap: 6px;                  /* isim + ":" bir arada solda; değer sağa itilir */
      line-height: 1.2;
    }
    .tff-stat-control label span:last-child {
      margin-left: auto;         /* DEĞER sağa ayrık — sliderdan/isimden görsel olarak kopuk */
      color: var(--gold-text);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      min-width: 2.4ch;
      text-align: right;
    }
    .tff-stat-control input[type="range"] {
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      margin: 3px 0 0;           /* thumb üstteki değere/etikete binmesin */
      background: var(--ink);    /* 60C: track panel'den ayrık (recessed), thumb altın kalır */
      border-radius: 3px;
      outline: none;
    }
    .tff-stat-control input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--gold);
      cursor: pointer;
      box-shadow: 0 0 10px rgba(244,184,96, 0.5);
      transition: transform 0.1s;
    }
    .tff-stat-control input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }
    /* B4.2: mobilde slider konforu — 18px thumb parmak icin kucuktu; 24px thumb +
       yukseltilmis dokunma alani (gorunur track ince kalir, hit alani buyur). */
    @media (max-width: 768px) {
      .tff-stat-control input[type="range"] { height: 30px; background: transparent; }
      .tff-stat-control input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--ink); border-radius: 3px; }
      .tff-stat-control input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }
      .tff-stat-control input[type="range"]::-moz-range-track { height: 6px; background: var(--ink); border-radius: 3px; }
      .tff-stat-control input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--gold); }
    }

    /* ARKA PLAN VE BOYUT SEÇİCİLER */
    .tff-theme-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    @media (min-width: 560px) {
      .tff-theme-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    .tff-theme-btn {
      border: 2px solid transparent;
      border-radius: 8px;
      padding: 12px;
      cursor: pointer;
      font-family: 'Oswald', sans-serif;
      font-size: 0.86rem;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: border-color 0.2s, transform 0.2s;
    }
    .tff-theme-btn:hover {
      transform: translateY(-2px);
    }
    .tff-theme-btn.active {
      box-shadow: 0 0 15px rgba(244,184,96, 0.2);
    }
    .tff-size-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    @media (min-width: 560px) {
      .tff-size-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .tff-size-card {
      border: 1px solid var(--line-soft);
      background: var(--bg-2);
      border-radius: 10px;
      padding: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: relative;
      transition: border-color 0.2s, background 0.2s;
    }
    .tff-size-card:hover {
      border-color: rgba(244,184,96,0.4);
    }
    .tff-size-card.active {
      border-color: var(--gold);
      background: rgba(244,184,96, 0.04);
    }
    .tff-size-card input[type="radio"] {
      position: absolute;
      opacity: 0;
    }
    .tff-size-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .tff-size-name {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text);
    }
    .tff-size-dim {
      font-size: 0.74rem;
      color: var(--muted);
    }
    .tff-size-price {
      font-family: 'Oswald', sans-serif;
      font-size: 1.15rem;
      color: var(--gold-text);
      font-weight: 600;
    }

      /* ===== KART KONFİGÜRATÖR — EK STİLLER ===== */
    .tff-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .tff-tabs::-webkit-scrollbar { height: 4px; } .tff-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
    .customizer-grid > * { min-width: 0; }   /* grid item'lar daralabilsin -> mobilde taşma yok */
    .tff-tabs { min-width: 0; }
    /* KEREM (2026-08-16, 2. tur — "okunabilir değil, büyümeli, alana tam oturmalı"): sekme butonları
       form kolonunun genişliğini EŞİT PAYLAŞIR (flex:1); font FORMUN KENDİ genişliğine (cqw) göre
       ölçeklenir ama ARTIK KISILMAZ: ilk sürümdeki nowrap+ellipsis dar ekranda fontu 10.9px'e
       düşürüyordu (iPhone'da okunmuyordu). Uzun etiketler ("Fotoğraf Yükle", "Boyut ve Fiyat") dar
       ekranda İKİ SATIRA sarılır -> font büyük kalır (min 0.8rem), alan tam kullanılır. NOT:
       container-type yalnız formda; kartın kendi cqw'leri etkilenmez. */
    .customizer-form { container-type: inline-size; }
    .tff-tabs { gap: 10px; }
    /* B4.2: mobilde KISA etiketler tek satirda — 360px'te cakisti/2 satira kirildigi
       olculmustu ("Fotograf Yukle"/"Boyut ve Fiyat" 82px kolonda sarariyordu). */
    .tff-tab-btn { white-space: nowrap; line-height: 1.1; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 2px; min-height: 44px; font-size: clamp(0.8rem, 3.3cqw, 0.9rem); letter-spacing: 0.03em; }
    .tff-tab-btn .tff-lbl-full { display: none; }
    .tff-tab-btn .tff-lbl-short { display: inline; }
    /* KEREM KARARI gizlemeleri GERÇEKTEN gizlesin: .tff-field/.cs-picker display kuralları [hidden]
       niteliğini eziyordu (aile butonundaki tuzağın aynısı) — Çerçeve Stili bölümü görünür kalmıştı. */
    .tff-field[hidden], .cs-picker[hidden] { display: none; }
    /* Tahta seçici ikonu VARSAYILAN koyu cevizi (#321600) yansıtır (yaklaşık filtre — gerçek tint
       mekanizması karttadır); taban drop-shadow zinciri korunur. */
    #frameFamilyGroup .tff-frame-family[data-frame-family="tahta"] img { filter: brightness(0.42) sepia(0.85) saturate(2.4) hue-rotate(-14deg) brightness(0.72) drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
    .tff-bg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .tff-bg-head label { margin: 0; }
    .tff-dice { display: inline-flex; align-items: center; gap: 7px; background: var(--gold-dim); border: 1px solid var(--line); color: var(--gold-text); padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
    .tff-dice:hover { background: linear-gradient(135deg,#F9D9A2,var(--gold)); color: #241A20; border-color: var(--gold); }
    .tff-dice svg { width: 17px; height: 17px; }
    .tff-bg-random-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
    .tff-bg-thumbs-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .tff-solid-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1px solid var(--line); color: var(--gold-text); padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; transition: background .2s, border-color .2s, color .2s; box-sizing: border-box; }
    .tff-solid-toggle svg { width: 17px; height: 17px; }
    .tff-solid-toggle:hover { border-color: var(--gold); }
    .tff-solid-toggle[aria-expanded="true"] { background: linear-gradient(135deg,#F9D9A2,var(--gold)); color: #241A20; border-color: var(--gold); }
    .tff-bg-recent-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .tff-bg-recent-thumb { width: 64px; aspect-ratio: 56 / 80; flex-shrink: 0; border-radius: 7px; border: 2px solid transparent; cursor: pointer; padding: 0; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.45); transition: transform .15s ease, border-color .15s ease; }
    .tff-bg-recent-thumb:hover { transform: translateY(-2px) scale(1.05); border-color: rgba(244,184,96,0.5); }
    .tff-bg-recent-thumb.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 4px 12px -4px rgba(244,184,96,0.6); }
    .tff-bg-current { width: 64px; aspect-ratio: 56 / 80; flex-shrink: 0; border-radius: 7px; border: 2px solid var(--gold); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px var(--gold), 0 4px 12px -4px rgba(244,184,96,0.6); }
    .tff-bg-gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-height: 234px; overflow-y: auto; padding: 4px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0,0,0,0.25); }
    .tff-bg-swatch { aspect-ratio: 5 / 7; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; background-size: cover; background-position: center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
    .tff-bg-swatch:hover { transform: translateY(-2px) scale(1.04); border-color: rgba(244,184,96,0.5); }
    .tff-bg-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .tff-bg-swatch.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 6px 16px -6px rgba(244,184,96,0.6); }
    /* Renk seçici */
    .tff-color-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
    .tff-color-trigger { display: inline-flex; align-items: center; gap: 9px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 9px 13px; cursor: pointer; font-family: inherit; }
    .tff-color-trigger:hover, .tff-color-trigger:focus-visible { border-color: var(--gold); outline: none; }
    .tff-color-trigger.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244,184,96,0.35); }
    .tff-color-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); box-shadow: 0 1px 4px rgba(0,0,0,0.5); flex-shrink: 0; }
    .tff-color-hex { font-family: 'Oswald', sans-serif; letter-spacing: 0.06em; font-size: 0.92rem; }
    .tff-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
    .tff-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); cursor: pointer; padding: 0; transition: transform .15s ease; }
    .tff-swatch:hover { transform: scale(1.12); } .tff-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .tff-color-input { width: 48px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); cursor: pointer; }
    .tff-divider { height: 1px; border: 0; margin: 14px 0; background: linear-gradient(90deg, transparent, rgba(244,184,96,0.55), transparent); }
    .tff-color-pop { margin-top: 14px; max-width: 280px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 18px 40px -16px rgba(0,0,0,0.7); }
    .tff-color-pop[hidden] { display: none; }
    .tff-sv { position: relative; width: 100%; height: 150px; border-radius: 10px; cursor: crosshair; touch-action: none; background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); background-color: #ff0000; }
    .tff-sv-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); transform: translate(-50%, -50%); pointer-events: none; }
    .tff-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; margin: 14px 0 10px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; }
    .tff-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.4); box-shadow: 0 1px 4px rgba(0,0,0,0.5); cursor: pointer; }
    .tff-hue::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,0.4); cursor: pointer; }
    .tff-color-foot { display: flex; align-items: center; gap: 10px; }
    .tff-color-prev { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
    #hexInput { flex: 1; background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text); border-radius: 8px; padding: 9px 12px; font-family: 'Oswald', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
    #hexInput:focus { outline: none; border-color: var(--gold); }
    /* Pill gruplar (kart tipi / çerçeve) */
    .tff-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .tff-pill { background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 600; transition: all .2s ease; }
    .tff-pill:hover { color: var(--gold); border-color: var(--gold); }
    .tff-pill.active { background: linear-gradient(135deg,#F9D9A2,var(--gold)); color: #241A20; border-color: var(--gold); }
    .tff-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    /* ÇERÇEVE AİLESİ seçici — görsel butonlar (mini çerçeve önizlemesi + ad). Kart geometrisi DEĞİL,
       sayfa UI'ı olduğu için burada (tf-card.css'e girmez — tek kanonik kaynak kuralı kart CSS'i içindir). */
    .tff-frame-family-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
    .tff-frame-family { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-family: inherit; font-size: 0.78rem; font-weight: 600; transition: all .2s ease; }
    /* Cip kaynagi 144 px WebP TUREV (scripts/frame-thumbs.py). Master PNG"ler kart render/
       BASKI hattinda AYNEN kullanilir; burada 200 KB"lik master indirilmesin diye turev var. */
    .tff-frame-family img { width: 46px; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); pointer-events: none; }
    .tff-frame-family:hover { color: var(--gold); border-color: var(--gold); }
    .tff-frame-family.active { border-color: var(--gold); color: var(--gold); background: rgba(244,184,96, 0.08); box-shadow: 0 0 0 1px var(--gold) inset; }
    .tff-frame-family:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    /* hidden niteliği display:flex tarafından ezilmesin (Klasik Altın gizleme — Kerem kararı) */
    .tff-frame-family[hidden] { display: none; }

    /* ONIZLEME DALI — yeni tema listesi. Sitenin kendi .tff-frame-family butonunu
       AYNEN kullanir; eklenen tek sey alt tema basligi ve kilit rozeti. Grid'te
       baslik TAM SATIR kaplar ki gruplar birbirine karismasin. */
    .tff-frame-family-group.tfyt-liste { max-height: 340px; overflow-y: auto; padding-right: 4px; }
    /* KEREM ISTEGI (2026-08-20, ikinci tur): satirda IKI cerceve. Once 6 denendi —
       thumb 46px'te kaliyordu ama cerceve deseni o boyutta secilmiyordu. Iki sutunda
       hucre ~165px: thumb BUYUR (max 132px, oran 46:66 korunur) ve ad etiketi GERI GELIR;
       artik sigiyor, title'a mahkum degil. Liste yuksekligi de buyudu (340 -> 470px),
       yoksa tek satir bile ekrana sigmiyordu.
       Kural yalniz .tfyt-liste'ye bagli — legacy 4 aile (Metalik/Tahta/Kemik/Seker)
       kendi otomatik izgarasinda kalir. */
    .tff-frame-family-group.tfyt-liste { grid-template-columns: repeat(2, 1fr); gap: 10px;
      max-height: 470px; }
    .tfyt-liste .tff-frame-family { padding: 10px 8px 9px; gap: 7px; }
    .tfyt-liste .tff-frame-family > span { display: block; font-size: .74rem; line-height: 1.25; }
    .tfyt-liste .tff-frame-family img { width: 100%; max-width: 132px; height: auto; }
    .tfyt-liste .tfyt-kilit { font-size: .58rem; font-style: normal; letter-spacing: .06em;
      text-transform: uppercase; opacity: .75; }

    /* ALT TEMA EKRANI (Kerem, 2026-08-20): "cerceveler o kadar asagi kaymasin".
       Once temalar — uc sutun, kucuk kapak gorseliyle; secilince o temanin cerceveleri
       BUYUK gelir. Bu kural .tfyt-liste'den SONRA gelmeli: ikisi de ayni ozgullukte
       (0,2,0) ve eleman iki sinifi birden tasir; sonraki kural kazanir. */
    /* Dort sutun + kucuk kapak: 20 tema ~530px'e iner, yani neredeyse tek ekran.
       Uc sutunda 1032px suruyordu (olculdu) — istegin tersi olurdu. */
    .tff-frame-family-group.tfyt-temalar { grid-template-columns: repeat(4, 1fr); gap: 7px;
      max-height: 540px; }
    .tfyt-tema { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
      padding: 7px 4px 6px; cursor: pointer; display: flex; flex-direction: column;
      align-items: center; gap: 5px; color: var(--muted); font-family: inherit;
      font-size: .66rem; font-weight: 600; line-height: 1.18; text-align: center;
      transition: all .2s ease; }
    .tfyt-tema img { width: 100%; max-width: 50px; height: auto;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); pointer-events: none; }
    .tfyt-tema:hover { color: var(--gold); border-color: var(--gold); }
    .tfyt-tema:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    /* "3 cerceve" satiri gizli: dort sutunda satir yuksekligini buyutuyordu ve bilgi
       zaten temaya girince gorunuyor. */
    .tfyt-tema em { display: none; }
    .tfyt-geri { grid-column: 1 / -1; justify-self: start; background: none; border: 0;
      color: var(--gold); font-family: inherit; font-size: .74rem; font-weight: 600;
      cursor: pointer; padding: 2px 0 4px; }
    .tfyt-geri:hover { text-decoration: underline; }

    /* ARKA PLAN SECICI (Kerem, 2026-08-20): rastgele yerine tek tek secim.
       Cerceve listesiyle AYNI dil: kaydirilabilir kutu, 3 sutun, secili olan altin. */
    /* Kerem (2026-08-20): "arka planlar kuculmeli ve bir satira 6 adet sigmali".
       Sutun sayisi 3 -> 6; kutu genisligi esnek oldugu icin gorseller kendiliginden
       kuculur. Yukseklik siniri korunur: liste uzun, panel kaydirmali kalmali. */
    .tfyt-bg-liste { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
      max-height: 330px; overflow-y: auto; padding-right: 4px; margin-bottom: 6px; }
    /* Cok dar ekranda 6 sutun okunmaz kalir; orada 4'e duser. */
    @media (max-width: 560px) { .tfyt-bg-liste { grid-template-columns: repeat(4, 1fr); } }
    .tfyt-bg { padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
      background: var(--bg-2); cursor: pointer; line-height: 0; transition: border-color .2s ease; }
    .tfyt-bg img { width: 100%; height: auto; display: block; }
    .tfyt-bg:hover { border-color: var(--gold); }
    .tfyt-bg.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
    .tfyt-bg:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    .tfyt-not { color: var(--muted); font-size: .8rem; margin: 2px 0 10px; }
    /* TUZAK (uçüncü kez): `.tff-bg-random-row { display:flex }` sinif kurali `hidden`
       NITELIGINI EZER — JS'te hidden=true yazmak gorunurlugu degistirmiyordu, rastgele
       dugmesi secicinin ustunde duruyordu. Ayni guard cerceve ailesi butonlarinda ve
       Cerceve Stili bolumunde de var; sinif kuralinin oldugu her yerde SART. */
    .tff-bg-random-row[hidden] { display: none; }
    .tfyt-baslik { grid-column: 1 / -1; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold-text, #F7CB8A); opacity: .85; margin: 10px 0 2px; }
    .tfyt-baslik:first-child { margin-top: 0; }
    .tfyt-kilit { font-style: normal; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
      color: var(--muted); opacity: .8; }
    .tfyt-not { margin: 8px 0 0; font-size: .74rem; color: var(--muted); }

    /* Yeni temalarin KART USTU YAZILARI. Konum slot kutusundan (oransal), punto
       kartin olculen genisliginden (--tfyt-w) turer — `container-type` acmadan,
       uretimdeki 3B/golge duzenine dokunmadan. */
    .tfyt-yazilar { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
    /* BÜYÜK HARFE ÇEVİRME KALDIRILDI — ÖNİZLEME/BASKI PARİTESİ.
       Kerem (1 Eylül 2026): "Font normalde preview'da hep büyük görünüyor. Ama
       baskı PNG'si nasıl girildiyse o şekilde üretilmiş. Preview kısmındaki
       yazı büyük küçük harf şeklinde gösterilmeli."

       ÖLÇÜLDÜ: `text-transform: uppercase` YALNIZ buradaydı. Kanonik kural
       (tf-card.css `.tf-custom-card.tfc-tema .tfyt-yazi`) onu HİÇ taşımıyor ve
       admin.html yalnız tf-card.css yüklüyor -- baskı bu yüzden yazıldığı gibi
       çıkıyordu. Editör sayfası ikisini birden yüklediği için fark yalnız
       ÖNİZLEMEDE görünüyordu: müşteri "Ah be hacı" yazıyor, kartta
       "AH BE HACI" görüyor, baskıda yine "Ah be hacı" alıyordu.

       Bu kural kanonik kuralın ESKİ İKİZİ (ölçü tabanı bile farklı: `--tfyt-w`
       vs `100cqw`). Özgüllüğü düşük olduğu için ötekiyle çakışan özellikleri
       zaten eziliyordu; yalnız `text-transform` hiçbir yerde ikinci kez
       yazılmadığı için SESSİZCE geçiyordu -- başıboş özelliğin klasik hâli.
       Harf düzeni artık tek yerden gelir: MÜŞTERİNİN YAZDIĞI. */
    .tfyt-yazi { position: absolute; display: block; text-align: center; white-space: nowrap;
      font-size: calc(var(--tfyt-w, 340px) * var(--tfyt-punto, .05));
      line-height: 1.05; font-weight: 800; color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,.7); }
    .tfyt-alan-not { margin: 6px 0 0; font-size: .72rem; color: var(--gold-text, #F7CB8A); opacity: .9; }
    input.tfyt-alan-yok { opacity: .55; }
    /* Ek yazi katman listesi — sitenin pill dilinde. */
    .tfyt-katmanlar { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
    .tfyt-katman { display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 7px 10px; border: 1px solid var(--line-soft, rgba(255,255,255,.08));
      border-radius: 10px; font-size: .82rem; cursor: pointer; }
    .tfyt-katman.on { border-color: var(--gold, #F4B860); color: var(--gold, #F4B860); }
    .tfyt-katman button { background: none; border: 0; color: inherit; cursor: pointer;
      font-size: 1rem; line-height: 1; padding: 0 2px; }
    /* BASKI SIZINTISI (ölçüldü 2026-08-22): burada kartın İÇİNDEKİ yazıya kesikli
       bir outline çiziliyordu. exportCardPng() bu düğümü olduğu gibi çeker ve
       html-to-image hesaplanan stilleri kopyalar -> düzenleme yardımı müşterinin
       BASKI PNG'sine giriyordu. Gösterge artık kartın DIŞINDA: seçili yazının
       halkasını `.tfk-secim-katmani` çiziyor (tf-kanvas.js; katman sarmalayıcının
       DA dışında, ölçeksiz barınakta). .secili sınıfı DURUYOR -- durum işareti
       olarak okunuyor -- ama ARTIK HİÇBİR ŞEY BOYAMAZ.
       GÜNCELLEME (R-6, 29 Ağustos 2026): burada adı geçen `.tfc-yazi-vurgu`
       ara çözümü EMEKLİ EDİLDİ; tek gösterge kanvas katmanıdır. */
    /* SABIT ALAN yazisi (Kerem 2026-08-21): slot kutusuna oturur; punto kutu
       yuksekliginden turer, tasarsa JS punto dusurur. Suruklenemez. */
    .tfyt-yazi.tfyt-sabit { display: flex; align-items: center; justify-content: center;
      pointer-events: none; transform: none; }
    .tfyt-ek .btn-block { width: 100%; }
    /* RASTGELE OLUSTUR ikonu — kart onizlemesinin ust sag kosesi. Kartin USTUNE
       binmez: sarmalayici konumlandirma baglami, ikon kartin disinda durur.
       Dokunma hedefi 40px (parmakla rahat), ikon 20px. */
    .tf-custom-card-wrapper { position: relative; }

    /* ==== BOS KARTIN ACILIS CAGRISI (Kerem, 4 Eylul 2026) ==================
       "Sade kucuk miqno logosu altina Fotografinizi yukleyin ... her bir
       Preview tasari icin standart default."

       KARTIN KARDESI, ICINDE DEGIL. Bu bir duzenleme yardimi; kartin icindeki
       yardim dugumleri bu depoda baski PNG'sine SIZDI (2026-08-22, olculdu).
       Sarmalayici tek gozlu bir izgara (`> * { grid-area: 1/1 }` +
       `place-items:center`) -> dugum kartin tam ustune kendiliginden ortalanir,
       burada konum matematigi YOK.

       GORUNURLUGU TEK KAYNAK YONETIR: sarmalayicidaki `tfc-foto-yok` sinifi ve
       onu yazan `photoPresent()` (tf-sayfa.js). Ikinci bir "fotograf var mi"
       kurali yazilmaz.

       `pointer-events:none` ZORUNLU: kart yuzeyinde fotograf surukleme jesti
       var; cagri onu yutamaz. */
    /* KUTU KARTIN KUTUSUDUR (`place-self:stretch`): logo olcusu YUZDE ile
       verilebilsin. Yuzde kartin genisligini okur -> ayni oran masaustunde de
       mobilde de tutar; ikinci bir kirilma noktasi yazmaya gerek kalmaz. */
    .tfc-foto-cagri {
      display: none;
      place-self: stretch;
      pointer-events: none;
      z-index: 7;                       /* cerceve katmanlarinin ustunde, zarin altinda */
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      text-align: center;
      padding: 0 16%;                   /* cerceve kenarina yaslanmasin */
    }
    .tf-custom-card-wrapper.tfc-foto-yok .tfc-foto-cagri { display: flex; }
    /* Yer tutucu marka isareti (photo-placeholder.png) BOSKEN GORUNMEZ: cagrinin
       kendi kucuk logosu onun yerini alir, yoksa ayni isaret iki kez cikardi.
       Kural sarmalayici sinifina bagli; baski cekimi `#customCardPreview`i alir
       ve o siniftan haberi olmaz -> fotografli kart HICBIR kosulda solmaz. */
    .tf-custom-card-wrapper.tfc-foto-yok #tfcPlayerPhoto { opacity: 0; }
    /* "SADE KUCUK": logo kartin genisliginin ~%22'si. Yuzde oldugu icin kart
       hangi olcekte cizilirse cizilsin ayni oranda kalir.
       `cqw` KULLANILMADI bilerek: konteyner sorgusu birimi en yakin
       `container-type` tasiyan atadan okunur ve bu dugum kartin KARDESI --
       kartin konteyner baglami disinda kalir, birim sessizce gorunume duserdi. */
    .tfc-foto-cagri-logo { width: 22%; max-width: 68px; height: auto; opacity: .92; }
    /* ⚠ RENK BU BLOKTA DEGIL. Sahne kurali
       (`.tasarla-page #ozel .customizer-preview span`, ozgulluk (1,2,1))
       buradaki her `color`i eziyor -- OLCULDU (390x844, 4 Eylul 2026): yazinin
       hesaplanan rengi rgb(59,44,53), yani koyu murdum cikiyordu ve koyu kartin
       ustunde okunmuyordu. Muafiyet tasarla.css'te, tuzagin anlatildigi yerde.
       BURAYA `color` YAZMA: sessizce duser ve "yazdim ama olmuyor" turu bir tur
       daha kaybedilir. */
    .tfc-foto-cagri-yazi {
      /* 14px/700: 13px/600 ile ilk turda okunurluk yetmedi. Cagri kartin TEK
         yonlendirmesi; sus degil, isaret. */
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .015em;
      line-height: 1.35;
      /* Golge acik cerceve pencerelerinde (kemik, tahta) kontrasti tasiyor:
         krem yazi acik zemine denk gelirse koyu hale onu ayakta tutar. */
      text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.55);
    }
    /* Kose SABIT DEGIL: tf-zar.js cerceve PNG'sinin alfasini olcup en bos koseye
       koyar. Dikdortgen HUD cercevelerinde sag ust doludur, kalkanlarda bostur. */
    .tf-zar--sag-ust { top: -6px; right: -6px; }
    .tf-zar--sol-ust { top: -6px; left: -6px; right: auto; }
    .tf-zar--sag-alt { bottom: -6px; right: -6px; top: auto; }
    .tf-zar--sol-alt { bottom: -6px; left: -6px; top: auto; right: auto; }
    .tf-zar { position: absolute; top: -6px; right: -6px; z-index: 8;
      width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
      cursor: pointer; padding: 0; color: var(--gold, #F4B860);
      background: rgba(36,28,34,.82); border: 1px solid var(--line, rgba(244,184,96,.25));   /* --bg ailesi (17 Eylül 2026) */
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 6px 18px -8px rgba(0,0,0,.8); transition: all .2s ease; }
    .tf-zar svg { width: 20px; height: 20px; }
    .tf-zar:hover { border-color: var(--gold, #F4B860); transform: rotate(-12deg) scale(1.08);
      box-shadow: 0 8px 22px -8px rgba(244,184,96,.6); }
    .tf-zar:focus-visible { outline: 2px solid var(--gold, #F4B860); outline-offset: 2px; }
    @media (max-width: 980px) { .tf-zar { width: 34px; height: 34px; top: -4px; right: -4px; }
      .tf-zar svg { width: 17px; height: 17px; } }

    /* Fotograf isigi kontrolleri — sitenin kendi form dilinde. */
    #tfFotoIsik input[type=range] { width: 100%; }
    .tfFi-anahtar { display: flex; align-items: center; gap: 9px; margin: 14px 0 4px;
      font-size: .84rem; color: var(--muted, #C6CAD2); cursor: pointer; }
    .tfFi-anahtar input { width: 16px; height: 16px; accent-color: var(--gold, #F4B860); }
    .tfFi-sifirla { display: block; margin-top: 12px; background: none; border: 0;
      color: var(--muted, #C6CAD2); font-size: .74rem; cursor: pointer; text-decoration: underline; }
    .tfyt-mini { display: block; margin: 12px 0 5px; font-size: .72rem; letter-spacing: .1em;
      text-transform: uppercase; color: var(--muted); }
    .tfyt-boyut { display: flex; align-items: center; gap: 8px; }
    /* YAZI STİLİ (masaüstü paneli) — Düz · Gölge · Kontur · Zemin.
       Düğme stili ÖNİZLEMEZ, adıyla anar (mobil şeritle aynı); gerekçesi
       tf-yeni-temalar.js'teki blokta. Görünüm panelin KENDİ diline uyar:
       açık yüzey, seçili olan bal rengi kenarla işaretlenir -- çerçeve
       renk kartelası ve boyut kaydıracıyla aynı aile. */
    .tfyt-stiller { display: flex; gap: 6px; flex-wrap: wrap; }
    .tfyt-stil-btn {
      flex: 1 1 0; min-width: 62px; padding: 7px 4px;
      background: rgba(255,255,255,.55); border: 1px solid rgba(120,90,60,.28);
      border-radius: 8px; color: #3a2b24; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: border-color .14s ease, background-color .14s ease;
    }
    .tfyt-stil-btn[aria-pressed="true"] {
      border-color: #f4b860; background: rgba(244,184,96,.18); color: #2a1e25;
    }
    .tfyt-stil-btn:hover { border-color: rgba(244,184,96,.7); }
    .tfyt-boyut input[type=range] { flex: 1; }
    .tfyt-boyut button { width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
      background: var(--ink-3, #382A33); color: var(--text, #ECECEC);
      border: 1px solid var(--line-soft, rgba(255,255,255,.08)); font-size: 1.05rem; line-height: 1; }
    .tfyt-boyut button:hover { border-color: var(--gold, #F4B860); color: var(--gold, #F4B860); }
    /* Kendi kartela stili KALDIRILDI: renk secimi artik sitenin kendi
       .tff-color-row / .tff-swatch bileseniyle ciziliyor (Kerem: cerceve ile
       bilgiler ayni duzende olsun). Serbest renk girdisi GORUNMEZ -- tetik
       dugmesi onu programatik acar, boylece iki yuzey birebir ayni gorunur. */
    #tfytRenk { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

    /* ---- ILK KULLANIM TURU ----
       Perde TIKLAMAYI GECIRIR (pointer-events:none): tur musterinin onunu
       kesmez, isterse takip etmeden kartini yapar. Isaretli sekme altin halka
       ile one cikar; kopya bir arayuz cizilmez. */
    #tfTur[hidden] { display: none; }
    /* KATMAN (Kerem, 2026-08-20): "pop-up en onde olmali, sekmelerin onunde durmuyor".
       Eski 900/901 sayfadaki bazi katmanlarin ALTINDA kaliyordu (header z=100 ama mobil
       onizleme sheet'i z=1600). 2000+ hepsini gecer. Karartma da guclendi (.55 -> .72) ve
       artik SPOT ISIGI: gradient'in merkezi JS'ten hedefin uzerine tasinir (--tfTur-x/y),
       yoksa "hangi dugmeden bahsediyor" bilgisi kaybolur. Perde hala TIKLAMAYI GECIRIR. */
    .tfTur-perde { position: fixed; inset: 0; z-index: 2000; pointer-events: none;
      background: radial-gradient(circle at var(--tfTur-x, 50%) var(--tfTur-y, 40%),
        rgba(0,0,0,0) 74px, rgba(0,0,0,.72) 240px);
      transition: background-position .18s ease; }
    .tfTur-balon { position: fixed; z-index: 2002; background: var(--ink-2, #2E2229);
      border: 1px solid var(--gold, #F4B860); border-radius: 14px; padding: 15px 16px 13px;
      box-shadow: 0 20px 50px -18px rgba(0,0,0,.9); color: var(--text, #ECECEC); }
    .tfTur-ok { position: absolute; top: -7px; width: 12px; height: 12px; transform: rotate(45deg);
      background: var(--ink-2, #2E2229); border-left: 1px solid var(--gold, #F4B860);
      border-top: 1px solid var(--gold, #F4B860); }
    /* BALON HEDEFIN USTUNDEYSE OK DA DONER (FAZ W1). Balon, hedef ekranin
       dibindeyken (masaustu kalici CTA) uste geciyor; ok yukari bakmaya devam
       ederse balonun tepesinden disari cikan bir cizgi olarak gorunur. */
    .tfTur-balon.tfTur-ustte .tfTur-ok { top: auto; bottom: -7px;
      border-left: 0; border-top: 0;
      border-right: 1px solid var(--gold, #F4B860);
      border-bottom: 1px solid var(--gold, #F4B860); }
    .tfTur-sayi { margin: 0 0 6px; font-size: .68rem; letter-spacing: .14em;
      color: var(--gold-text, #F7CB8A); }
    .tfTur-bas { margin: 0 0 6px; font-family: 'Oswald', sans-serif; font-size: 1.02rem;
      text-transform: uppercase; letter-spacing: .01em; }
    .tfTur-ne { margin: 0 0 13px; font-size: .84rem; line-height: 1.55; color: var(--muted, #C6CAD2); }
    .tfTur-alt { display: flex; gap: 8px; }
    .tfTur-alt button { flex: 1; border-radius: 999px; padding: 9px 14px; cursor: pointer;
      font: 600 .82rem 'Inter', sans-serif; border: 1px solid var(--line, rgba(244,184,96,.25));
      background: transparent; color: var(--text, #ECECEC); }
    .tfTur-ileri { background: linear-gradient(135deg, #F7CE8E, var(--gold, #F4B860));
      color: #1a1a1a; border-color: transparent; }
    .tfTur-sus { display: block; width: 100%; margin-top: 9px; background: none; border: 0;
      color: var(--muted, #C6CAD2); font-size: .72rem; cursor: pointer; text-decoration: underline; }
    .tfTur-isaretli { box-shadow: 0 0 0 2px var(--gold, #F4B860), 0 0 18px rgba(244,184,96,.45);
      border-radius: 8px; position: relative; z-index: 2001; }
    .tfTur-cagir { display: block; margin: 8px 0 0 auto; background: none; border: 0; cursor: pointer;
      color: var(--gold-text, #F7CB8A); font-size: .74rem; text-decoration: underline; }
    /* KILITLI TETIK ARTIK KILITLI GORUNUYOR (Kerem, 24 Agustos 2026).
       OLCULDU: bebek/gamer temalarinda katalog `cerceveRenk: "kartela"` diyor ->
       serbest HSV secici BILEREK kapali, yalniz temanin kendi paleti acik.
       Ama tetik disabled iken opacity .9 ile neredeyse normal gorunuyordu;
       musteri basiyor, hicbir sey olmuyor ve "kartela acilmiyor" diye
       bildiriyordu. Kilit YANLIS DEGIL -- iletisimi yanlisti.
       Artik kutu bir DUGME gibi degil, mevcut rengi gosteren bir ETIKET gibi
       duruyor: sonuk yuzey, kesikli kenarlik, imlec degismez, hover yok. */
    .tff-color-trigger[disabled] {
      cursor: default; opacity: .62;
      border-style: dashed;
      background: transparent;
    }
    .tff-color-trigger[disabled]:hover { border-color: var(--line); box-shadow: none; }

    /* TEMA SEKMESI — dort tema YAN YANA, oranlari bozulmadan.
       Eski .cs-scroll iki secenek (fifa/forgexi) icin 2 sutunluydu; dort tema
       2x2 dusuyordu. Kutu da sabit 110x156'ydi: dort tanesi panele sigmaz,
       kucultmek icin en-boy bozulurdu.
       Cozum: sutun sayisi 4, kutu genisligi esnek, oran CERCEVENIN GERCEK
       ORANINA kilitli (827x1181 = 0.700 — satilan tek boyut, Mini Card 7x10).
       Boylece panel ne kadar genis olursa olsun onizleme ASLA ezilmez. */
    /* Sabit sutun sayisi yerine TEK SATIR: stil sayisi degisken (4 iken 5 oldu,
       Taraftar eklendi). repeat(4) yazilinca besincisi alta dusuyordu. Kolon akisi
       ile kac tema olursa olsun yan yana kalir, genislik esit paylasilir. */
    /* KOMUT G3: KOLON AKIŞI YENİ BUTON IZGARASINA UYGULANMAZ.
       Bu kural eski tek-hâlli seçici içindi ("kaç tema olursa olsun yan yana").
       G3 seçiciyi iki hâlli yaptı; SEÇİM YOKKEN sarmalayan bir BUTON IZGARASI
       gerekiyor. Kolon akışı orada sekiz temayı tek satıra diziyor ve dar
       ekranda sonuncuları kesiyordu (ölçüldü: 8 tema, ilk satırda 8, scrollWidth
       742 / clientWidth 360). Kapsam daraltıldı, `!important` yazılmadı. */
    #tab-tema .cs-scroll:not(.tfy-tema-kap) { display: grid; grid-auto-flow: column;
      grid-auto-columns: 1fr; grid-template-columns: none; gap: 10px; }
    #tab-tema .cs-thumb { width: 100%; height: auto; aspect-ratio: 827 / 1181; }
    #tab-tema .cs-style { gap: 7px; }
    #tab-tema .cs-style .cs-name { font-size: .78rem; text-align: center; line-height: 1.25; }
    /* Kerem (2026-08-20): "tema kismindaki stiller siyah bir kare icerisinde
       gozukmesin, o bolumun arka plani ile ayni renk olsun."
       .cs-thumb kendi zeminini (#0a0a0a) ve cercevesini (#333) tasiyordu — kart
       onizlemesi kutunun icinde duruyor gibi gorunuyordu. Ikisi de kaldirildi;
       cerceve dogrudan panelin zemini uzerinde durur.
       SECIM ISARETI kutu halkasi olamaz artik (seffaf kutunun etrafinda bosluga
       cizilirdi) — cercevenin KENDI silueti etrafinda altin parilti kullanilir. */
    #tab-tema .cs-thumb { background: transparent; border-color: transparent;
      box-shadow: none; overflow: visible; }
    #tab-tema .cs-style.active .cs-thumb { border-color: transparent; box-shadow: none;
      filter: drop-shadow(0 0 9px rgba(244,184,96,.7)); }
    #tab-tema .cs-style:hover .cs-thumb { filter: drop-shadow(0 0 7px rgba(244,184,96,.35)); }
    /* Cok dar ekranda dort sutun sikisir; kutular kucuk kalmasin diye yatay kayar. */
    @media (max-width: 420px) {
      #tab-tema .cs-scroll:not(.tfy-tema-kap) { grid-auto-flow: column;
        grid-template-columns: none; grid-auto-columns: 84px;
        overflow-x: auto; padding-bottom: 6px; }
    }
    /* TF-103 v2: çerçeve filtreleri artık SADECE assets/css/tf-card.css'te tanımlı (TEK kanonik kaynak) — bu ikinci kopya kaldırıldı. */
    @media (max-width: 560px) { .tff-bg-gallery { grid-template-columns: repeat(4, 1fr); } }

    /* ============ MIQNO DENEYİMLERİ (Reviews) ============ */
    /* Founder 2026-08-18: dikey padding masaustu ~88-110, mobil ~64-80. Zemin duz birakilmaz:
       merkezde cok hafif radial highlight + ust/alt ton farki (yogun desen/cam efekti YOK). */
    .tf-rv { position: relative; padding: clamp(64px, 7.5vw, 104px) 0;
      border-top: 1px solid var(--line-soft);
      background:
        radial-gradient(ellipse 60% 42% at 50% 38%, rgba(255,255,255,0.55), transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 30%, rgba(244,184,96,0.07), transparent 72%),
        linear-gradient(180deg, var(--panel-2), var(--bg)); }
    /* Baslik ile carousel arasi ~44-60 px */
    .tf-rv .section-head { margin-bottom: clamp(44px, 4vw, 60px); }
    .tf-rv .section-head { margin-bottom: 34px; }
    .tf-rv-note { max-width: 720px; margin: 14px auto 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; text-align: center; }
    /* FOUNDER (2026-08-17): minimal gosterim -> ortalama kutusu gizli, TEK KOLON. */
    .tf-rv-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
    .tf-rv-avg[hidden], .tf-rv-form-wrap[hidden], .tf-rv-note[hidden] { display: none !important; }
    @media (max-width: 860px) { .tf-rv-layout { grid-template-columns: 1fr; } }

    /* Ortalama puan kartı */
    .tf-rv-avg { background: linear-gradient(180deg, rgba(244,184,96,0.06), transparent), var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; text-align: center; position: sticky; top: 90px; }
    @media (max-width: 860px) { .tf-rv-avg { position: static; } }
    .tf-rv-avg-num { font-family: 'Oswald', sans-serif; font-size: 3.1rem; line-height: 1; color: var(--gold-text); font-weight: 600; }
    .tf-rv-avg-num span { font-size: 1.3rem; color: var(--muted); }
    .tf-rv-avg-stars { margin: 10px 0 8px; font-size: 1.15rem; letter-spacing: 2px; }
    .tf-rv-avg-lbl { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.03em; }
    .tf-rv-star-on { color: var(--gold); }
    .tf-rv-star-off { color: rgba(150,150,150,0.35); }

    /* ================= YORUM COVERFLOW (founder 2026-08-18) =================
       Founder: "showcase'deki gibi olsun". Kaydirma tabanli serit YERINE showcase'in
       (#ornekler) KANITLANMIS coverflow kalibi: sabit sahne + MUTLAK konumlu kartlar,
       JS transform/opacity ile yerlestirir. Native scrollbar KAVRAM OLARAK YOK.
       Kart BUTON DEGIL (article) — tiklamada yalnizca o kart merkeze gelir. */
    .tf-rv-stage { position: relative; width: 100%; overflow: hidden;
      perspective: 1500px; perspective-origin: 50% 50%;
      display: flex; align-items: center; justify-content: center;
      touch-action: pan-y; user-select: none; -webkit-user-select: none;
      min-height: clamp(300px, 34vh, 380px); }
    .tf-rv-stage:focus-visible { outline: 2px solid var(--l-gold-fill, #C9862B); outline-offset: 6px; border-radius: 20px; }
    .tf-rv-track { position: relative; list-style: none; margin: 0; padding: 0;
      width: clamp(300px, 42vw, 470px); height: clamp(262px, 30vh, 300px); transform-style: preserve-3d; }

    /* Kart: yukseltilmis premium yuzey. Mutlak konumlu -> yukseklik sahneden gelir,
       kisa yorumda footer ALTTA kalir (icerik yukari yigilmaz). */
    .tf-rv-card { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%;
      display: flex; flex-direction: column; gap: 12px; cursor: pointer;
      padding: 26px 28px; border-radius: 24px; overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(250,247,238,0.78));
      border: 1px solid rgba(163,125,24,0.18);
      box-shadow: 0 2px 3px rgba(67,48,12,0.08), 0 12px 28px rgba(67,48,12,0.10), 0 28px 60px rgba(67,48,12,0.07);
      transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1), opacity 0.5s ease, box-shadow 0.5s ease, border-color 0.28s ease;
      will-change: transform, opacity; }
    .tf-rv-card.is-active { border-color: rgba(244,184,96,0.30);
      box-shadow: 0 3px 6px rgba(67,48,12,0.10), 0 18px 38px rgba(67,48,12,0.14), 0 36px 74px rgba(67,48,12,0.10); }
    .tf-rv-card:not(.is-active) { box-shadow: 0 2px 3px rgba(67,48,12,0.06), 0 10px 22px rgba(67,48,12,0.08); }
    .tf-rv-card.is-active:hover { border-color: rgba(244,184,96,0.45); }
    /* Dekoratif tirnak — GERCEK karakter (kacis dizisi kullanilmaz: onceki surumde "\201C"
       bozulup ekranda kutu+C olarak basildi). Metni bozmaz: dusuk opacity + pointer-events yok. */
    .tf-rv-card::before { content: "“"; position: absolute; top: -6px; right: 22px;
      font-family: Georgia, 'Times New Roman', serif; font-size: 88px; line-height: 1;
      color: rgba(244,184,96,0.13); pointer-events: none; }

    .tf-rv-card .tf-rv-stars { font-size: 1.02rem; letter-spacing: 2px; position: relative; z-index: 1; }
    .tf-rv-card .tf-rv-comment { font-size: 1.02rem; line-height: 1.6; margin: 0; color: var(--l-body, #3E4049);
      position: relative; z-index: 1; overflow: hidden;
      display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
    .tf-rv-foot { margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(163,125,24,0.16);
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .tf-rv-ava { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
      font-family: 'Oswald', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em;
      color: #F6EFDD; background: linear-gradient(150deg, #101a35, #0A1128);
      border: 1px solid rgba(244,184,96,0.42); }
    .tf-rv-who { display: grid; gap: 4px; min-width: 0; }
    .tf-rv-name { font-weight: 600; color: var(--l-heading, #0A1128); font-size: 0.95rem; }
    .tf-rv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .tf-rv-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.02em; color: var(--l-gold-text, #6E4920); border: 1px solid rgba(163,125,24,0.28);
      background: rgba(244,184,96,0.10); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
    .tf-rv-verified svg { width: 12px; height: 12px; }
    .tf-rv-product { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem;
      color: var(--l-muted, #5A5E68); white-space: nowrap; }
    .tf-rv-product svg { width: 13px; height: 13px; opacity: 0.75; }
    .tf-rv-date { color: var(--l-muted, #5A5E68); font-size: 0.74rem; }

    /* Kontroller sahnenin ALTINDA (kartlarin ustunu KAPATMAZ) — showcase ile ayni dil. */
    .tf-rv-foot-nav { display: flex; align-items: center; justify-content: center; gap: 16px;
      margin-top: clamp(14px, 2vw, 22px); }
    .tf-rv-arrow { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
      border: 1px solid rgba(163,125,24,0.25); background: rgba(255,255,255,0.72);
      box-shadow: 0 8px 24px rgba(67,48,12,0.10); backdrop-filter: blur(10px);
      color: var(--l-heading, #0A1128); cursor: pointer;
      transition: transform 220ms ease, border-color 220ms ease, background 220ms ease; }
    .tf-rv-arrow svg { width: 20px; height: 20px; }
    .tf-rv-arrow:hover { transform: translateY(-2px); border-color: rgba(244,184,96,0.55); background: rgba(255,255,255,0.9); }
    .tf-rv-arrow:focus-visible { outline: 2px solid var(--l-gold-fill, #C9862B); outline-offset: 3px; }
    .tf-rv-arrow[disabled] { opacity: 0.35; cursor: default; transform: none; }
    .tf-rv-dots { display: flex; align-items: center; gap: 9px; }
    .tf-rv-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
      border: 1px solid rgba(163,125,24,0.42); background: transparent;
      transition: background 200ms ease, transform 200ms ease; }
    .tf-rv-dot.is-on { background: var(--l-gold-fill, #C9862B); border-color: var(--l-gold-fill, #C9862B); transform: scale(1.15); }
    .tf-rv-dot:focus-visible { outline: 2px solid var(--l-gold-fill, #C9862B); outline-offset: 3px; }

    /* TEK YORUM: coverflow davranisi YOK — kontroller gizli, kart one cikarilmis ve genis. */
    .tf-rv-carousel[data-single="true"] .tf-rv-foot-nav { display: none; }
    .tf-rv-carousel[data-single="true"] .tf-rv-track { width: min(620px, 100%); }
    .tf-rv-carousel[data-single="true"] .tf-rv-card { cursor: default; }

    @media (max-width: 900px) {
      .tf-rv-stage { min-height: clamp(290px, 42vh, 360px); }
      .tf-rv-track { width: calc(100vw - 96px); height: clamp(250px, 34vh, 300px); }
      .tf-rv-card { padding: 22px 20px; }
      .tf-rv-card .tf-rv-comment { font-size: 1rem; -webkit-line-clamp: 4; }
      .tf-rv-arrow { display: none; }              /* mobilde swipe var; noktalar kalir */
    }
    @media (prefers-reduced-motion: reduce) {
      .tf-rv-card, .tf-rv-arrow, .tf-rv-dot { transition: none; }
    }

    .tf-rv-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 10px; font-size: 0.95rem; }

    /* Yorum formu */
    .tf-rv-form-wrap { margin-top: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; }
    .tf-rv-form-title { font-family: 'Oswald', sans-serif; font-size: 1.15rem; color: var(--gold-text); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
    .tf-rv-form-sub { color: var(--muted); font-size: 0.85rem; margin-bottom: 18px; }
    .tf-rv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 560px) { .tf-rv-grid2 { grid-template-columns: 1fr; } }
    .tf-rv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .tf-rv-field label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
    .tf-rv-field input[type="text"], .tf-rv-field select, .tf-rv-field textarea {
      width: 100%; background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text);
      border-radius: 10px; padding: 11px 13px; font-size: 0.92rem; font-family: inherit;
    }
    .tf-rv-field textarea { min-height: 96px; resize: vertical; }
    .tf-rv-field input::placeholder, .tf-rv-field textarea::placeholder { color: var(--muted); }
    .tf-rv-field input:focus, .tf-rv-field select:focus, .tf-rv-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-dim); }
    .tf-rv-counter { align-self: flex-end; font-size: 0.72rem; color: var(--muted); }
    /* İnteraktif yıldız seçimi */
    .tf-rv-rate { display: inline-flex; gap: 4px; }
    .tf-rv-rate button { background: none; border: none; padding: 2px; font-size: 1.7rem; line-height: 1; color: rgba(150,150,150,0.35); cursor: pointer; transition: color 0.12s ease, transform 0.12s ease; }
    .tf-rv-rate button:hover { transform: scale(1.12); }
    .tf-rv-rate button.on { color: var(--gold); }
    .tf-rv-rate button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
    .tf-rv-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 8px; font-size: 0.84rem; color: var(--text); line-height: 1.45; cursor: pointer; }
    .tf-rv-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; }
    .tf-rv-warn { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin: 8px 0 16px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(0,0,0,0.15); }
    .tf-rv-msg { font-size: 0.9rem; margin-top: 12px; min-height: 20px; }
    .tf-rv-msg.ok { color: var(--gold-text); font-weight: 600; }
    .tf-rv-msg.err { color: #e0566d; }
    .tf-rv-submit { margin-top: 4px; }
    /* Review toast (sepet toast'ından bağımsız) */
    .tf-rv-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 13px 22px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 16px 38px -14px rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 220; max-width: 90vw; text-align: center; }
    .tf-rv-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    .tf-rv-toast.err { border-color: rgba(224,86,109,0.5); color: #e0566d; }
    /* ===== HS-001 (2026-08-10): squad7 müşteri yüzeyi PARKED/POST-LAUNCH ==============================
       Tek kaynak: assets/js/tf-squad7-layouts.js -> TF_SQUAD7.SQUAD7_PUBLIC_ENABLED (şu an false).
       Bu blok yalnız GÖRSEL/statik (JS'siz de güvenli) gizlemedir; builder/kart/sipariş/admin altyapısı
       (aşağıdaki .hs-section ve squad7 JS'i) SİLİNMEDİ, KORUNUYOR. Reaktivasyon: flag'i true yap + bu
       kuralı ve karşılık gelen [hidden] işaretli DOM'u (KAPI 3 kartı, seçici kartı, ikincil link, #halisaha) geri aç.
       Kalan tek kart/pkg-card düzenini bozmasın diye grid'ler :has() ile yeniden akıtılır.
       ÖNEMLİ: .pkg-card/.tf-choose-card/.k1-single kendi `display` kuralını taşır (aynı özgüllükte
       author CSS, UA [hidden]{display:none} kuralını EZER) — bu yüzden [hidden] burada AÇIKÇA ve
       !important ile zorlanır; aksi halde kart `hidden` olsa da GÖRSEL OLARAK YER KAPLAR (regresyon,
       tarayıcıda doğrulanarak bulundu). */
    .pkg-card[hidden], .tf-choose-card[hidden], .k1-single[hidden] { display: none !important; }
    #tasarla-sec .tf-choose:has(.tf-choose-card[data-mode="halisaha"][hidden]) { grid-template-columns: 1fr; max-width: 640px; }
    .pkg-grid:has(.pkg14-field[hidden]) { grid-template-columns: 1fr; }
    @media (min-width: 720px) { .pkg-grid:has(.pkg14-field[hidden]) { grid-template-columns: repeat(2, 1fr); } }
    /* ===== 54B: Halı Saha 7'li (Squad7) ===== */
    .hs-section { padding: 64px 0; background: var(--bg-2); border-top: 1px solid var(--line-soft); }
    .hs-step { max-width: 780px; margin: 0 auto; text-align: center; }
    .hs-badge { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--gold-text); background: var(--gold-dim); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px; }
    .hs-title { font-size: 1.9rem; margin: 0 0 10px; }
    .hs-lead { color: var(--muted); font-size: 1rem; max-width: 560px; margin: 0 auto 22px; line-height: 1.55; }
    .hs-price-row { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0 0 24px; }
    .hs-price-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .hs-price { font-size: 2.1rem; font-weight: 800; color: var(--gold-text); }
    .hs-price-note { font-size: 0.8rem; color: var(--muted); font-style: italic; }
    .hs-start-btn { max-width: 360px; margin: 0 auto; }
    .hs-step-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
    /* diziliş seçici */
    .hs-layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 4px; }
    @media (max-width: 560px) { .hs-layout-grid { grid-template-columns: 1fr; } }
    .hs-layout-card { border: 2px solid var(--line-soft); border-radius: 14px; background: var(--panel); padding: 14px; cursor: pointer; transition: border-color 0.18s, transform 0.18s; text-align: center; }
    .hs-layout-card:hover { border-color: var(--line); transform: translateY(-2px); }
    .hs-layout-card.active { border-color: var(--gold); background: var(--gold-dim); }
    .hs-layout-mini { width: 100%; aspect-ratio: 3/4; background: linear-gradient(180deg, #0f2417, #0a1a10); border: 1px solid var(--line-soft); border-radius: 8px; position: relative; margin-bottom: 10px; overflow: hidden; }
    .hs-layout-mini::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: rgba(255,255,255,0.12); }
    .hs-mini-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(0,0,0,0.35); }
    .hs-layout-name { font-weight: 700; font-size: 0.95rem; }
    .hs-layout-desc { font-size: 0.78rem; color: var(--muted); }
    /* ilerleme bandı (sihirbaz — #ozel üstünde sabit) */
    .hs-progress-bar { position: sticky; top: 0; z-index: 60; background: var(--panel); border-bottom: 1px solid var(--gold); box-shadow: 0 6px 20px -10px rgba(0,0,0,0.6); }
    .hs-progress-inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
    .hs-progress-label { font-weight: 700; color: var(--gold-text); white-space: nowrap; }
    .hs-progress-slot { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
    .hs-progress-dots { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
    .hs-pdot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-soft); border: 1px solid var(--line); }
    .hs-pdot.done { background: var(--gold); }
    .hs-pdot.current { box-shadow: 0 0 0 3px var(--gold-dim); border-color: var(--gold); }
    .hs-progress-cancel { flex-shrink: 0; }
    /* saha dizme */
    .hs-pitch-wrap { display: flex; justify-content: center; margin: 8px 0 20px; }
    /* 62: 11'li builder önizleme sahası görünümü — SİYAH taktik saha (ceza sahaları + santra + orta çizgi, beyaz çizgiler). */
    .hs-pitch { position: relative; width: 300px; max-width: 82vw; aspect-ratio: 3/4; background: #0b0b0d; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.28)' stroke-width='0.7'%3E%3Crect x='30' y='0' width='40' height='20'/%3E%3Crect x='30' y='130' width='40' height='20'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 100% 100%; background-repeat: no-repeat; }
    .hs-pitch::before { content: ''; position: absolute; left: 3%; right: 3%; top: 50%; height: 1px; background: rgba(255,255,255,0.28); }
    .hs-pitch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; transform: translate(-50%,-50%); }
    /* 69: slot = YUVARLAK. Boş -> pozisyon yazılı yuvarlak · Seçili -> sarı · Dolu -> foto yuvarlak. */
    .hs-slot { position: absolute; transform: translate(-50%, -50%); width: 52px; cursor: pointer; text-align: center; }
    .hs-slot .hs-slot-empty { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.78); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; }
    .hs-slot .hs-slot-photo { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--gold); background: radial-gradient(circle at 50% 40%, #2a3550, #0c0f18); display: block; box-shadow: 0 6px 16px -4px #000; }
    .hs-slot-name { font-size: 0.58rem; color: var(--gold-text, #F7CB8A); font-weight: 700; letter-spacing: 0.08em; margin-top: 3px; text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* özet + fiyat kırılımı */
    .hs-summary { max-width: 420px; margin: 0 auto; text-align: left; font-size: 0.9rem; }
    .hs-sum-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
    .hs-sum-row.total { border-bottom: none; font-weight: 800; font-size: 1.05rem; color: var(--gold-text); padding-top: 10px; }
    .hs-addon { max-width: 420px; margin: 20px auto 0; text-align: left; }
    /* squad7 modu: #ozel designer'da boyut seçimi + saha upsell gizlenir (paket fiyatı sabit; saha SONDA).
       Magnet toggle GÖRÜNÜR kalır (kart-başı seçim). */
    .hs-squad7-mode #tab-size > .tff-field:first-of-type { display: none; }
    .hs-squad7-mode #cuSaha { display: none; }
    .hs-squad7-mode .mini-trust { display: none; }
    /* 62: Halı Saha dizilişi seçici — yalnız 7'li modunda görünür (tekli custom'da gizli). */
    .hs-dizilis-field { display: none; }
    .hs-squad7-mode #hsDizilisField { display: flex; }
    /* 62 GÖREV 3 — AYRIŞMA: 7'li modunda designer belirgin ALTIN ÇERÇEVE (tekli custom'dan net ayrı). */
    .hs-squad7-mode .customizer-grid { border: 1.5px solid rgba(244,184,96,0.5); box-shadow: 0 0 0 1px rgba(244,184,96,0.16), 0 22px 48px -22px rgba(0,0,0,0.6); }
    @media (min-width: 980px) { .hs-squad7-mode .customizer-grid { padding: 22px; } }
    #hsDizilisSelect:disabled { opacity: 0.65; cursor: not-allowed; }
    .hs-dizilis-note { font-size: 0.72rem; color: var(--gold-text); margin: 4px 0 0; }
    /* 62: 7'li MİNİ DİZİLİM paneli — designer'ın SOLUNA dikey saha; yalnız squad7 modunda. */
    .hs-lineup { display: none; }
    .hs-squad7-mode .hs-lineup { display: flex; flex-direction: column; }
    .hs-squad7-mode .customizer-grid { grid-template-columns: 1fr; }   /* dar: alt alta (saha üstte) */
    @media (min-width: 980px) {
      /* geniş: SAHA (11'li 68:104 oranı, dar+dik) | ÖNİZLEME | FORM (geniş). Bilgiler ince-uzun kalmasın diye sahne genişler + form kolonu büyür. */
      #halisaha.hs-squad7-mode .container { width: min(1560px, 95vw); }  /* 63: portal -> 7'li bölümünde sahne geniş */
      .hs-squad7-mode .customizer-grid { grid-template-columns: 320px minmax(0,1fr) minmax(0,1.42fr); gap: 28px; align-items: start; }
      .hs-squad7-mode .customizer-preview { position: static; }         /* 3 kolonda sticky kapat */
    }
    /* 63: 7'li TASARIM ADIMI — grid portal'le buraya taşınır; tam genişlik (hs-step 780px sınırını aş). */
    .hs-design-step { max-width: none; text-align: left; }
    .hs-design-head { max-width: 780px; margin: 0 auto 24px; text-align: center; }
    .hs-design-head .hs-title { font-size: clamp(2rem, 6vw, 3.1rem); margin: 10px 0 12px; }   /* 71b: #ozel "Kendi Kartını Tasarla" başlığıyla AYNI boyut */
    .hs-design-mount { width: 100%; }
    /* 64/73d: TASARIM TÜRÜ SEÇİCİ — iki EŞİT GENİŞ kart: Premium [GÖRSEL|yazı] sola, 7'li [yazı|GÖRSEL]
       sağa genişler (oranlar aynı). Görsel yarılar BÜYÜK: yelpaze kartlar / saha+yelpaze. CTA alta sabit. */
    .tf-choose-sec { padding-bottom: 40px; }
    .tf-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; max-width: min(1560px, 96vw); margin: 0 auto; }   /* 73e: iki kart EŞİT daha geniş (yelpaze tam sığar) */
    .tf-choose-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: stretch; text-align: center; cursor: pointer;
      background: var(--ink); border: 2px solid var(--line); border-radius: 16px; padding: 26px 24px;
      transition: border-color .15s ease, transform .15s ease; box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7); }
    .tf-choose-card:hover { border-color: var(--gold-text); transform: translateY(-2px); }
    .tf-choose-card.is-active { border-color: var(--gold); }
    .tf-choose-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(244,184,96,0.28); }
    .tfc2-text { display: flex; flex-direction: column; min-width: 0; }
    .tf-choose-card .tf-choose-title { display: block; font-family: 'Oswald', sans-serif; font-size: 1.5rem;
      line-height: 1.15; text-transform: uppercase; margin: 14px 0 8px; color: var(--text); }
    .tf-choose-card .tf-choose-lead { display: block; margin: 0 auto 14px; max-width: 34ch; }
    .tf-choose-card .hs-price-row { justify-content: center; }
    .tf-choose-card .tf-choose-cta { margin-top: auto; }   /* CTA hep altta -> iki kart eşit hizalı */
    /* 73d: görsel yarılar — yelpaze (3 kart) + saha üstü yelpaze (KAPI 2/3 varlıkları yeniden kullanılır) */
    .tfc2-vis { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; overflow: hidden; border-radius: 12px; }
    .tfc2-fan { position: relative; display: block; width: min(230px, 92%); }
    .tfc2-f { position: absolute; bottom: 0; left: 50%; width: 62%; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)); }
    .tfc2-fc { position: relative; display: block; margin: 0 auto; left: auto; transform: translateY(-10px) scale(1.14); z-index: 2; width: 62%; }
    .tfc2-fl { transform: translateX(-96%) rotate(-15deg) translateY(4px); z-index: 1; }
    .tfc2-fr { transform: translateX(-4%) rotate(15deg) translateY(4px); z-index: 1; }
    /* 73e: Premium yelpazesi — konteyner yarının TAMAMINI kullanır, kart oranı %42 -> yan kartlar
       dahil yelpazenin TAMAMI görünür (kırpılmaz) ve merkez kart daha BÜYÜK. Yapı (açı/ofset) aynı. */
    .tfc2-vis-fan .tfc2-fan { width: min(500px, 100%); }
    .tfc2-vis-fan .tfc2-f, .tfc2-vis-fan .tfc2-fc { width: 42%; }
    .tfc2-vis-fan .tfc2-f { bottom: 10px; }
    .tfc2-field { width: 100%; max-height: 340px; object-fit: contain; display: block; }
    .tfc2-vis-field .tfc2-fan { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: min(190px, 60%); }
    @media (max-width: 1100px) { .tf-choose { grid-template-columns: 1fr; } }
    @media (max-width: 760px) {
      .tf-choose-card { grid-template-columns: 1fr; }
      .tfc2-vis { min-height: 220px; }
      .tf-choose-card[data-mode="halisaha"] .tfc2-vis { order: -1; }   /* mobilde görsel üstte (iki kartta da) */
    }
    /* 64b: İki sistem TUTARLI olsun. (a) #halisaha da krem (tf-section--light) -> ikisinde de arka plan açık.
       (b) #ozel başlığı geri görünür (7'lideki gibi sistem üstünde başlık). (c) koyu tasarım adası AYNI genişlik. */
    .hs-section.tf-section--light { background: var(--l-bg); border-top-color: rgba(184,147,74,0.42); }   /* 64b: .hs-section bg ezmesini geç -> krem */
    .tf-section--light .hs-badge { background: rgba(244,184,96,0.14); border-color: rgba(244,184,96,0.5); color: var(--l-gold-text); }   /* 65: krem bölümde rozet (Premium + 7'li AYNI) */
    @media (min-width: 980px) {
      #ozel .container { width: min(1560px, 95vw); }   /* 64b: Premium koyu ada 7'li ile aynı genişlik */
      #tasarla-sec .container { width: min(1560px, 95vw); max-width: none; }   /* 73e: seçici kartlar EŞİT geniş (yelpaze tam sığar) */
    }
    .hs-lineup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
    .hs-lineup-title { font-family: 'Oswald', sans-serif; font-size: 0.82rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold-text); }
    .hs-lineup-prog { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
    .hs-lineup-prog b { color: var(--gold-text); }
    .hs-pitch--mini { width: 100%; max-width: none; aspect-ratio: 68 / 104; align-self: start; }   /* 62: 11'li önizleme sahası oranı (dik/portre) — dar kolonda kısa kalır */
    .hs-lineup-foot { font-size: 0.64rem; color: var(--muted); text-align: center; margin: 8px 2px 0; line-height: 1.4; }
    .hs-pitch--mini .hs-slot { width: 42px; }
    .hs-pitch--mini .hs-slot .hs-slot-empty { width: 40px; height: 40px; font-size: 0.62rem; }
    .hs-pitch--mini .hs-slot .hs-slot-photo { width: 46px; height: 46px; }
    .hs-pitch--mini .hs-slot-name { font-size: 0.54rem; }
    /* 69: SEÇİLİ slot -> SARI (boş yuvarlak dolu-sarı; foto altın halka). "şimdi" rozeti kaldırıldı (sarı yeterli). */
    .hs-slot.is-current .hs-slot-empty { border-color: var(--gold); background: rgba(244,184,96,0.22); color: #f4e08a; box-shadow: 0 0 0 4px rgba(244,184,96,0.30); }
    .hs-slot.is-current .hs-slot-photo { box-shadow: 0 0 0 4px rgba(244,184,96,0.42), 0 6px 16px -4px #000; }
    .hs-slot-now { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 0.52rem; background: var(--gold); color: #241A20; border-radius: 5px; padding: 1px 5px; font-family: 'Oswald', sans-serif; white-space: nowrap; z-index: 2; }
    .hs-slot.is-full { cursor: pointer; }
    .hs-slot.is-full:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

    /* FAZ 73/73d: TASARLANAN KARTLAR ŞERİDİ — saha+önizleme kolonlarının ALTINDA (grid satır 2,
       kolon 1-2; Bilgiler sağda devam eder). 7 KART YAN YANA TEK SIRA (sarmaz, sıkışmaz).
       Dolu hücre = kartın TAM ÖNİZLEMESİ (TFCardRender; PNG görünümü) — tıkla -> düzenle,
       sürükle -> sahaya/şeride bırak -> yer değiş. Boş hücre = kesikli kutu + pozisyon kodu. */
    #hsStrip { display: none; }
    .hs-squad7-mode #hsStrip { display: block; }
    @media (min-width: 980px) {
      .hs-squad7-mode .customizer-grid { grid-template-rows: auto auto; }
      .hs-squad7-mode .hs-lineup { grid-column: 1; grid-row: 1; }
      .hs-squad7-mode .customizer-preview { grid-column: 2; grid-row: 1; }
      .hs-squad7-mode .customizer-form { grid-column: 3; grid-row: 1 / 3; }
      .hs-squad7-mode #hsStrip { grid-column: 1 / 3; grid-row: 2; align-self: start; }
    }
    .hs-strip { margin-top: 14px; border: 1.5px dashed rgba(244,184,96,0.45); border-radius: 12px; padding: 10px 12px; background: rgba(244,184,96,0.04); }
    .hs-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .hs-strip-title { font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--gold-text, #F7CB8A); font-weight: 700; }
    .hs-strip-hint { font-size: 0.66rem; color: rgba(255,255,255,0.5); }
    .hs-strip-row { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-end; justify-content: center; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .hs-strip-cell { flex: 0 0 auto; width: 62px; text-align: center; cursor: pointer; background: none; border: 0; padding: 0; }
    .hs-strip-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
    .hs-strip-cardwrap { border-radius: 7px; }
    .hs-strip-thumb { width: 62px; height: 87px; border-radius: 7px; object-fit: cover; object-position: top center; border: 1.5px solid rgba(244,184,96,0.55); background: #10131a; display: block; }
    .hs-strip-cell.is-current .hs-strip-thumb, .hs-strip-cell.is-current .hs-strip-empty, .hs-strip-cell.is-current .hs-strip-cardwrap { box-shadow: 0 0 0 3px rgba(244,184,96,0.45); border-color: var(--gold); }
    .hs-strip-empty { width: 62px; height: 87px; border-radius: 7px; border: 1.5px dashed rgba(255,255,255,0.28); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.45); font-family: 'Oswald', sans-serif; font-size: 0.74rem; font-weight: 700; }
    .hs-strip-pos { display: block; font-size: 0.58rem; color: var(--gold-text, #F7CB8A); font-weight: 700; letter-spacing: 0.06em; margin-top: 3px; text-transform: uppercase; }
    .hs-strip-name { display: block; font-size: 0.56rem; color: rgba(255,255,255,0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px; margin: 2px auto 0; }
    .hs-strip-cell[draggable="true"] { cursor: grab; }
    .hs-strip-cell.is-dragging { opacity: 0.4; }
    .hs-strip-cell.is-dropover .hs-strip-thumb, .hs-strip-cell.is-dropover .hs-strip-empty, .hs-strip-cell.is-dropover .hs-strip-cardwrap,
    .hs-slot.is-dropover .hs-slot-photo, .hs-slot.is-dropover .hs-slot-empty, .hs-slot.is-dropover .hs-slot-card { box-shadow: 0 0 0 4px rgba(122,208,122,0.55); border-color: #7ad07a; }
    .hs-strip-foot { display: flex; justify-content: center; margin-top: 10px; }
    .hs-strip-cart { min-width: 260px; }
    .hs-strip-cart[disabled] { background: #2a2f38; color: #6a7280; border-color: transparent; cursor: not-allowed; box-shadow: none; }

    /* FAZ 73c/73d: SAHADA DOLU SLOT = tasarlanan kartın MİNİ TAM ÖNİZLEMESİ (%50 büyütüldü). */
    .hs-slot.is-full { width: 78px; }
    .hs-pitch--mini .hs-slot.is-full { width: 72px; }
    .hs-slot-card { width: 75px; margin: 0 auto; border-radius: 6px; }
    .hs-pitch--mini .hs-slot-card { width: 69px; }
    .hs-slot.is-current .hs-slot-card { box-shadow: 0 0 0 3px rgba(244,184,96,0.45); }

    /* FAZ 73: sepet detay — kapat butonu + 7 kart karuseli */
    .cart-detail-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.8); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; transition: border-color .18s, color .18s; }
    .cart-detail-close:hover { border-color: var(--gold); color: var(--gold); }
    .cart-detail-close svg { width: 15px; height: 15px; }
    .cdx7-stage { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 8px; }
    .cdx7-nav { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; border: 1px solid rgba(244,184,96,0.55); background: rgba(244,184,96,0.08); color: var(--gold-text, #F7CB8A); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s; }
    .cdx7-nav:hover { background: rgba(244,184,96,0.2); }
    .cdx7-nav svg { width: 16px; height: 16px; }
    .cdx7-count { text-align: center; font-size: 0.72rem; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
    .cdx7-thumbs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
    .cdx7-th { width: 40px; height: 56px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); background: #10131a; padding: 0; cursor: pointer; overflow: hidden; }
    .cdx7-th img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
    .cdx7-th.is-on { border: 2px solid var(--gold); box-shadow: 0 0 0 2px rgba(244,184,96,0.3); }
    .cdx7-lock { display: flex; gap: 8px; align-items: flex-start; border: 1px solid rgba(255,207,143,0.45); background: rgba(255,207,143,0.08); border-radius: 9px; padding: 9px 11px; margin: 10px 0; font-size: 0.72rem; color: #ffcf8f; line-height: 1.5; }

/* ============ TEMA VITRINI (#temalar) — Kerem 2026-08-21 ============ */
.tv { padding: 72px 0; background: var(--deep, #1D141B); }
.tv-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.tv-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--gold, #F4B860); margin-bottom: 10px; }
.tv-title { font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--on-ink, #ECECEC); margin-bottom: 12px; }
.tv-lead { color: var(--on-ink-dim, #C6CAD2); line-height: 1.6; }
/* ÜÇ SÜTUN, /tasarla'DAKİ "Kart Teması" IZGARASIYLA AYNI (G3-E md. 2).
   ÖNCESİ `auto-fit, minmax(150px, 1fr)` idi ve 900 px'lik kapta masaüstünde
   BEŞ sütun düşüyordu (ölçüldü: 5 sütun, kutu 165.6 px) -- /tasarla ise 3.
   Sütun sayısı artık SABİT. Kap 540 px'e çekildi ki kutu ölçüsü DEĞİŞMESİN
   ((540 - 2x18) / 3 = 168 px, eski 165.6 px'in yanında): G1'in "kutu boyutu
   değişmeyecek" kuralı korunur, sekiz tema + "Yakında" tam 3x3 oturur. */
.tv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 540px; margin: 0 auto; }
.tv-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; color: inherit; }
.tv-card:hover { transform: translateY(-4px); border-color: var(--gold, #F4B860);
  box-shadow: 0 14px 34px -14px rgba(244,184,96,.35); }
/* KOMUT G1: vitrin kutusu artık `TemaButonu` bileşeni (/tasarla ile AYNI
   üretici). Kutu ÖLÇÜSÜ değişmemeli (Kerem md. 4): bileşenin kapağı sütun
   genişliği kadar çiziliyor ve kutu 166x228'den 166x278'e çıkıyordu (ölçüldü).
   Eski `.tv-thumb` ölçüsü (84x120, oran 7/10 -- bileşenin oranıyla AYNI)
   burada geri veriliyor. Bu SAYFANIN kendi ölçü kuralıdır; bileşen sayfaya
   bağlanmadan kalır. */
.tv-card .tfy-tb-kapak { width: 84px; }
/* GÖLGE KALKTI (G3-E md. 1): çerçevenin ARKASINDAKİ `drop-shadow` çerçeveyi
   sayfadan koparıp havada duruyor gibi gösteriyordu. Kutunun KENDİ kart gölgesi
   (`.tv-card` box-shadow) yerinde kalır -- kaldırılan yalnız görselin filtresi.
   Bu kural anasayfaya özeldi; bileşende gölge hiç yoktu, bu yüzden /tasarla
   butonları zaten gölgesizdi ve iki yüzey artık AYNI görünüyor. */
.tv-card .tfy-tb-kapak img { width: 84px; height: 120px; object-fit: contain; }
/* `.tv-thumb` EMEKLİ: vitrin artık üretilmiş fotoğraflı mini kartı değil,
   temanın kapak çerçevesini gösteriyor. Kural, eski bir tema önbelleği
   düğümü kalırsa diye duruyor. */
.tv-thumb { width: 84px; height: 120px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.tv-name { font-weight: 700; color: var(--on-ink, #ECECEC); font-size: 1rem; }
.tv-count { font-size: .78rem; color: var(--on-ink-dim, #C6CAD2); }
/* KOMUT G1: bileşenin ad/sayı düğümleri vitrinin KENDİ tipografisini alır --
   kutu ölçüsü değişmesin (Kerem md. 4). Bileşenin kendi ölçüleri /tasarla
   panelinde geçerli; anasayfa kendi ölçüsünü burada söylüyor.
   ÖLÇÜLDÜ: bileşenin daha küçük puntosu ve 6 px boşluğuyla kutu 166x228'den
   166x205'e iniyordu. */
.tv-card .tfy-tb-ad { font-weight: 700; color: var(--on-ink, #ECECEC); font-size: 1rem; line-height: 1.2; }
.tv-card .tfy-tb-sayi { font-size: .78rem; color: var(--on-ink-dim, #C6CAD2); opacity: 1; line-height: 1.2; }
.tv-yakinda { cursor: default; border-style: dashed; opacity: .75; justify-content: center; min-height: 176px; }
.tv-yakinda:hover { transform: none; border-color: rgba(255,255,255,.08); box-shadow: none; }
.tv-soon { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--gold, #F4B860);
  border: 1px solid rgba(244,184,96,.4); border-radius: 999px; padding: 5px 14px; }

/* ============ HEDİYE KÖŞESİ (#hediye) — Kerem, 2026-08-21 ============
   Yumuşak vurgulu bant (mockup.html .gift referansı). Kendi ürününü satmayan
   bir İÇERİK bölümü olduğu için görsel ağırlığı bilinçli olarak düşük: tek
   dolgu rengi, gölge yok, tek buton. Sayfadaki gerçek satış bölümleriyle
   dikkat yarışına girmemeli. */
.hd { padding: clamp(28px, 5vw, 56px) 0; }
/* Bant fon renginden AYRISMALI: bolum zemini rgb(251,243,231), ilk denemede bant
   rgb(251,240,224) idi -> fark gozle secilmiyordu. Ton bir kademe koyulastirildi ve
   ince sicak bir kenarlik eklendi. Golge YOK: vurgu yumusak kalmali, bolum kendi
   urununu satmiyor. */
.hd-band { background: #F6E3C6; border: 1px solid rgba(196,150,90,.22); border-radius: 28px;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 30px); flex-wrap: wrap; }
.hd-eyebrow { display: block; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.hd-title { margin: 0 0 8px; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700;
  letter-spacing: -.01em; color: #3B2C35; }
.hd-text { margin: 0; max-width: 52ch; font-size: .98rem; line-height: 1.55; color: #6B5B63; }
.hd-cta { flex: 0 0 auto; }
@media (max-width: 768px) {
  /* Mobilde bant tek sütuna iner; buton tam genişlik -> dokunma hedefi büyür. */
  .hd-band { flex-direction: column; align-items: flex-start; border-radius: 20px; }
  .hd-cta { width: 100%; }
}

/* SIPARIS DETAYI — IKI EYLEM (Kerem karari, 25 Agustos 2026).
   Birincil "Sepete git" odemeye, ikincil "Bir kart daha tasarla" editore
   temiz durumla goturur. Dar ekranda alt alta, genis ekranda yan yana. */
.cdx-eylemler{ display:grid; gap:8px; margin-top:12px; }
@media (min-width: 520px){
  .cdx-eylemler{ grid-template-columns:1fr 1fr; }
}
.cdx-eylemler .btn{ width:100%; margin:0; }


/* ==========================================================================
   E (2 Eylul 2026) — DEVAM SORUSU + FOTOGRAF YUKLEME HATASI

   ── SERIT KALKTI, YERINE POP-UP GELDI (Kerem, 4 Eylul 2026) ───────────────
   Ilk yazimda "akistan koparmayalim" diye TEK SATIRLIK bir serit secilmisti ve
   `.customizer-preview`in ILK COCUGU olarak ekleniyordu. Masaustunde bu kutu
   normal bir blok; MOBILDE ise `display:flex; align-items:center;
   justify-content:center` ve `overflow:hidden` -> serit kartin YANINDA bir
   flex ogesi oluyor, sahneden tasiyor ve sol kenardan ekran disina kayiyordu.
   Kerem'in ekran goruntusunde "Devam et" dugmesinin yarisi gorunmuyordu:
   yarim kalan tasarima donusun TEK yolu erisilemez durumdaydi.

   Yeni yuzey `body`ye eklenen bir PERDE + KUTU. Iki sebep:
     1) Sahnenin yerlesimine hic karismaz -- ne masaustu izgarasi ne mobil
        flex sahnesi onu tasiyabilir.
     2) Kerem'in tercihi: "direk pop up seklinde ciksin devam ya da tamam
        desin ki pop up tercihimdir."
   Iki eylem korunuyor (Devam et · Yeni basla); kapanis onlardan biriyle olur,
   perdeye dokunmak "Devam et"in sessiz kardesi DEGIL (bkz. tf-sayfa.js).
   ========================================================================== */
.tf-taslak-perde {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.tf-taslak-perde.acik { opacity: 1; }
.tf-taslak-perde[hidden] { display: none !important; }
.tf-taslak-kutu {
  position: relative; width: min(400px, 94vw);
  background: var(--drawer-bg, #2E2229);
  border: 1px solid rgba(244,184,96,0.4);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
  padding: 26px 24px 22px; text-align: center;
  transform: translateY(14px) scale(.97); transition: transform .26s ease;
}
.tf-taslak-perde.acik .tf-taslak-kutu { transform: none; }
.tf-taslak-kutu .tts-baslik {
  font-family: Oswald, sans-serif; font-size: 1.2rem; font-weight: 800;
  margin: 0 0 8px; color: var(--text, #f2f2f4);
}
.tf-taslak-kutu .tts-metin {
  margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted, #c8c8cf);
}
/* Dokunma hedefi TAM GENISLIK ve alt alta: dar ekranda yan yana iki hap
   birbirine yapisiyordu. Birincil eylem ustte. */
.tf-taslak-kutu .tts-eylemler { display: grid; gap: 9px; margin-top: 20px; }
.tf-taslak-kutu .tts-btn {
  cursor: pointer; width: 100%;
  border: 1px solid var(--line, rgba(212,175,55,0.35));
  border-radius: 999px; padding: 11px 18px;
  font-size: 0.92rem; font-weight: 700;
  background: transparent; color: inherit;
}
.tf-taslak-kutu .tts-devam {
  background: linear-gradient(135deg, #F7CE8E, var(--gold, #F4B860));
  border-color: transparent; color: #1a1a12;
}
.tf-taslak-kutu .tts-btn:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .tf-taslak-perde, .tf-taslak-kutu { transition: none !important; }
}

/* FOTOGRAF YUKLENEMEDI — CTA'nin altinda GORUNUR bir cikis yolu.
   Once yalniz soluk bir buton vardi ve neden soylenmiyordu. */
.tf-foto-hata {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px;
  border: 1px solid rgba(233,106,75,0.45); border-radius: 10px;
  background: rgba(233,106,75,0.08);
  font-size: 0.82rem; color: var(--coral, #E96A4B);
}
.tf-foto-hata[hidden] { display: none; }
.tf-foto-hata .tfh-metin { flex: 1 1 auto; min-width: 0; }
.tf-foto-hata .tfh-dene {
  flex: 0 0 auto; cursor: pointer;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 4px 13px; font-size: 0.8rem; font-weight: 600;
  background: transparent; color: inherit;
}
.tf-foto-hata .tfh-dene:hover { background: rgba(233,106,75,0.16); }