/* ==========================================================================
   Yaraman Club Card — Açılış ("yakında") sayfası stili
   Yalnız index.html için. Site geneli parça yok.

   Token mimarisi (design-system kuralı): primitive → semantic → component
   Renkler logodan: parlak kırmızı (#E4131F) → bordo, siyah. Koyu tema; kart yüzeyi
   inci beyazı (logo tam renk halinde yalnız AÇIK zeminde kullanılır — marka kuralı).

   Kart DİJİTAL (fiziksel değil): görsel, telefon ekranı içinde bir uygulama kartı olarak
   çizilir (QR kod + "Dijital Üyelik Kartı"); çip / kabartma numara gibi fiziksel öğe yok.
   ========================================================================== */

:root {
    /* ---------- Primitive: renk ---------- */
    --red-400: #FF4650;          /* küçük metinde kırmızı: siyah üstünde ~5.6:1 kontrast */
    --red-500: #E4131F;          /* logo kırmızısı — marka ana rengi */
    --red-700: #9B0F16;
    --red-900: #4A0609;
    --black-950: #08080B;
    --black-900: #0F0F14;
    --black-800: #17171E;
    --gray-400: #B4B4BE;         /* sessiz metin: siyah üstünde ~8:1 */
    --gray-100: #F4F2EF;
    --pearl-50: #FBFAF7;
    --pearl-200: #E9E5DD;
    --white: #FFFFFF;

    /* ---------- Primitive: tipografi ---------- */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
    --text-display: clamp(3rem, 1.4rem + 6vw, 6.4rem);

    /* ---------- Primitive: boşluk (ferah ölçek — density 3/10) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* ---------- Primitive: biçim / hareket ---------- */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-pill: 999px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 180ms;
    --dur-base: 400ms;
    --dur-slow: 700ms;

    /* ---------- Semantic ---------- */
    --color-bg: var(--black-950);
    --color-surface: var(--black-800);
    --color-fg: var(--gray-100);
    --color-fg-muted: var(--gray-400);
    --color-accent: var(--red-500);
    --color-accent-text: var(--red-400);
    --color-accent-deep: var(--red-700);
    --color-border: rgb(255 255 255 / 0.10);
    --color-ring: var(--white);

    /* ---------- Component: telefon (dijital kartın yaşadığı ekran) ----------
       İç ölçüler em ile telefon genişliğine bağlıdır: .phone { font-size: phone-w × 0.05 } */
    --phone-w: clamp(250px, 21vw, 310px);
    --phone-radius: calc(var(--phone-w) * 0.145);
    --phone-bezel: calc(var(--phone-w) * 0.028);
    --phone-shadow: 0 50px 80px -30px rgb(0 0 0 / 0.85),
                    0 30px 70px -35px rgb(228 19 31 / 0.55);

    /* ---------- Component: dijital kart ---------- */
    --card-face: linear-gradient(135deg, var(--pearl-50) 0%, var(--pearl-200) 55%, var(--pearl-50) 100%);
    --card-fg: #141418;

    /* ---------- Component: üst çubuk ---------- */
    --header-mark: 44px;

    color-scheme: dark;
}

/* ==========================================================================
   Temel
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Klavye odağı daima görünür */
:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--color-fg);
    color: var(--color-bg);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   Arka plan katmanı (dekoratif)
   ========================================================================== */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}
.bg__glow--1 {
    width: 60vmax; height: 60vmax;
    right: -20vmax; top: -25vmax;
    background: radial-gradient(circle, rgb(228 19 31 / 0.28) 0%, rgb(155 15 22 / 0.12) 40%, transparent 70%);
}
.bg__glow--2 {
    width: 45vmax; height: 45vmax;
    left: -20vmax; bottom: -20vmax;
    background: radial-gradient(circle, rgb(74 6 9 / 0.6) 0%, transparent 70%);
}

/* "Yol" ışını — logodaki yol motifinin sayfaya yansıması */
.bg__beam {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160vmax;
    height: 22vmax;
    transform: translate(-50%, -50%) rotate(-28deg);
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(228 19 31 / 0.05) 30%,
        rgb(228 19 31 / 0.10) 50%,
        rgb(228 19 31 / 0.05) 70%,
        transparent 100%);
    filter: blur(30px);
}

/* İnce nokta ızgarası; ortadan dışa doğru solar */
.bg__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1.2px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%);
            mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%);
}

/* İçerik arka planın üstünde */
.site-header,
.hero,
.site-footer {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(var(--space-4), 4vw, var(--space-12));
}

/* ==========================================================================
   Üst çubuk
   ========================================================================== */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-6);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    min-height: 44px;                 /* dokunma hedefi */
}

/* Beyaz çip: logo tam renk halinde yalnız açık zeminde okunur */
.brand__mark {
    width: var(--header-mark);
    height: var(--header-mark);
    padding: 5px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.06);
    flex: none;
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }

.brand__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.brand__sub {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

/* "Hazırlanıyor" durumu — nabız atan nokta */
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-fg-muted);
    background: rgb(255 255 255 / 0.03);
    backdrop-filter: blur(6px);
}
.status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 0 rgb(228 19 31 / 0.6);
    animation: pulse 2.2s ease-out infinite;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    flex: 1;
    display: grid;
    /* minmax(0, …): sütun, içindeki görselin min-content genişliğine göre BÜYÜMESİN
       (aksi halde 375px'te sahne sütunu taşırıp metni de sağa taşırıyordu) */
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-8) var(--space-16);
}
.hero__content,
.hero__visual { min-width: 0; }

.eyebrow {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px; height: 2px;
    margin-right: var(--space-3);
    vertical-align: middle;
    background: var(--color-accent);
}

.title {
    margin: 0 0 var(--space-6);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-display);
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
/* "Club Card": italik + kırmızı degrade (büyük metin → 3:1 kontrast şartı fazlasıyla sağlanır) */
.title em {
    font-style: italic;
    font-weight: 500;
    background: linear-gradient(100deg, var(--red-400) 0%, var(--red-500) 45%, #FF6A72 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    padding-right: 0.08em;            /* italik kuyruğu kesilmesin */
}

.lead {
    margin: 0 0 var(--space-8);
    max-width: 34ch;
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-fg-muted);
    text-wrap: pretty;
}

/* Üç kısa ipucu */
.hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.hints li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.03);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-fg-muted);
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.hints li:hover { border-color: rgb(255 255 255 / 0.22); color: var(--color-fg); }
.hints svg { width: 16px; height: 16px; color: var(--color-accent-text); flex: none; }

/* ==========================================================================
   Sahne: telefon + dijital kart
   ========================================================================== */
.hero__visual { display: grid; place-items: center; }

.scene {
    perspective: 1400px;
    padding: var(--space-6);
    max-width: 100%;
}

/* Süzülme animasyonu ayrı sarmalayıcıda: JS'in eğim transform'uyla çakışmasın */
.scene__float {
    animation: float 7s ease-in-out infinite;
}

/* --- Telefon çerçevesi --- */
.phone {
    position: relative;
    width: var(--phone-w);
    max-width: 100%;
    aspect-ratio: 9 / 18;
    padding: var(--phone-bezel);
    border-radius: var(--phone-radius);
    background: linear-gradient(160deg, #2C2C36 0%, #131319 35%, #0A0A0E 100%);
    box-shadow: var(--phone-shadow);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 90ms linear;
    will-change: transform;
    user-select: none;
    font-size: calc(var(--phone-w) * 0.05);   /* iç ölçüler em ile bu değere bağlı */
}
.phone.is-resetting { transition: transform 600ms var(--ease-out); }

/* Kasa kenar ışığı */
.phone::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 0 0 3px rgb(0 0 0 / 0.55);
    pointer-events: none;
}

/* Kamera adası */
.phone__island {
    position: absolute;
    top: calc(var(--phone-bezel) + 0.55em);
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 1.25em;
    border-radius: var(--radius-pill);
    background: #000;
    z-index: 2;
}

/* Ana ekran göstergesi (alt çizgi) */
.phone__home {
    position: absolute;
    left: 50%;
    bottom: 0.55em;
    transform: translateX(-50%);
    width: 32%;
    height: 0.28em;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.35);
}

.phone__screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--phone-radius) - var(--phone-bezel));
    overflow: hidden;
    background:
        radial-gradient(120% 55% at 50% 0%, rgb(228 19 31 / 0.16), transparent 60%),
        linear-gradient(180deg, #17171F 0%, #0B0B10 100%);
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    padding: 3.1em 0.95em 2em;
}

/* --- Uygulama üst çubuğu --- */
.app-bar {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.app-bar__mark {
    width: 1.9em;
    height: 1.9em;
    padding: 0.2em;
    border-radius: 0.55em;
    background: var(--white);
    flex: none;
}
.app-bar__mark img { width: 100%; height: 100%; object-fit: contain; }
.app-bar__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.05;
    color: var(--color-fg);
}
.app-bar__title small {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.58em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

/* --- Dijital kart --- */
.card {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586 / 1;          /* kart oranı (uygulamadaki kart görünümü) */
    padding: 0.8em 0.9em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.9em;
    background: var(--card-face);
    color: var(--card-fg);
    box-shadow: 0 1.2em 2em -1em rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.55);
    overflow: hidden;
}

/* İşaretçiyi takip eden parıltı (--mx/--my .phone'dan kalıtımla gelir); boşta sağ üstte durur */
.card__shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 72%) var(--my, 28%),
        rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.18) 18%, transparent 45%);
    pointer-events: none;
}

/* Logodaki "yol" — kartın sağ altında yumuşak kırmızı süpürme + ince çizgi */
.card__road {
    position: absolute;
    right: -35%;
    bottom: -60%;
    width: 120%;
    height: 130%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 70% 70%,
        rgb(228 19 31 / 0.22) 0%, rgb(155 15 22 / 0.10) 35%, transparent 65%);
    pointer-events: none;
}
.card__road::before {
    content: "";
    position: absolute;
    left: 6%;
    top: 30%;
    width: 120%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(228 19 31 / 0.65) 40%, rgb(228 19 31 / 0.2) 80%, transparent);
    transform: rotate(-34deg);
    transform-origin: left center;
}

.card__top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6em;
}
.card__logo {
    width: auto;
    height: 1.9em;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.12));
}
.card__type {
    margin-top: 0.25em;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgb(20 20 24 / 0.72);
}

.card__mid {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
}
/* QR kod: dijital kartın "kimliği" (dekoratif desen, gerçek kod değil) */
.card__qr {
    width: 2.7em;
    height: 2.7em;
    padding: 0.18em;
    border-radius: 0.25em;
    background: var(--white);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}
.card__digital {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-700);
}

.card__bottom {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6em;
}
.card__number {
    display: flex;
    flex-direction: column;
    font-size: 0.64em;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgb(20 20 24 / 0.78);
    white-space: nowrap;
}
.card__holder {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.64em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red-700);
}
.card__digital small,
.card__number small,
.card__holder small {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgb(20 20 24 / 0.5);
}

/* --- Yer tutucu satırlar (uygulama içeriği "yakında") --- */
.ghost {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}
.ghost__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
    padding: 0.75em 0.85em;
    border-radius: 0.7em;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.06);
}
.ghost__label {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--color-fg-muted);
    white-space: nowrap;
}
.ghost__bar {
    height: 0.5em;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg,
        rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.22) 50%, rgb(255 255 255 / 0.08) 100%);
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
}
.ghost__bar--a { width: 38%; }
.ghost__bar--b { width: 52%; }
.ghost__bar--c { width: 45%; }

/* --- Alt sekme çubuğu (yer tutucu) — ekranın en altına yaslanır --- */
.tabbar {
    margin-top: auto;                 /* kalan boşluğu üstte bırakıp alta yaslan */
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0.7em 0.4em 0.9em;
    border-radius: 0.9em;
    background: rgb(255 255 255 / 0.04);
    border: 1px solid rgb(255 255 255 / 0.06);
}
.tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
}
.tabbar__item i {
    width: 1.1em;
    height: 1.1em;
    border-radius: 0.3em;
    background: rgb(255 255 255 / 0.14);
}
.tabbar__item b {
    width: 1.4em;
    height: 0.28em;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.12);
}
.tabbar__item.is-active i { background: var(--color-accent); box-shadow: 0 0 0.8em rgb(228 19 31 / 0.5); }
.tabbar__item.is-active b { background: rgb(255 255 255 / 0.55); }

/* ==========================================================================
   Alt bilgi
   ========================================================================== */
.site-footer {
    padding-block: var(--space-6) var(--space-8);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
}

.contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}
.contact a,
.contact span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;                 /* dokunma hedefi */
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    text-decoration: none;
    transition: color var(--dur-fast) ease;
}
.contact a:hover { color: var(--color-fg); text-decoration: underline; text-underline-offset: 4px; }
.contact svg { width: 18px; height: 18px; color: var(--color-accent-text); flex: none; }

.copy {
    margin: 0;
    font-size: var(--text-xs);
    color: rgb(180 180 190 / 0.7);
}

/* ==========================================================================
   Animasyonlar (giriş: --d ile kademeli)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: rise var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--d, 0) * 90ms);
}

@keyframes rise {
    to { opacity: 1; transform: none; }
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-14px) rotate(1deg); }
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgb(228 19 31 / 0.55); }
    70%  { box-shadow: 0 0 0 9px rgb(228 19 31 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(228 19 31 / 0); }
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ==========================================================================
   Duyarlı düzen
   ========================================================================== */
@media (min-width: 900px) {
    .hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-16);
        padding-block: var(--space-12) var(--space-24);
    }
    .hero__visual { justify-self: end; }
}

@media (max-width: 899px) {
    :root { --phone-w: min(72vw, 300px); }
    .hero { padding-block: var(--space-6) var(--space-12); }
    .scene { padding-inline: 0; }     /* gölge/eğim yer kaplamaz; görsel tam genişlik kullansın */
    .scene__float { animation-duration: 8s; }
}

@media (max-width: 480px) {
    /* Eyebrow tek satırda kalsın ("… · ÇOK YAKINDA" son kelimesi yalnız kalmasın) */
    .eyebrow { font-size: var(--text-xs); letter-spacing: 0.16em; }
    .eyebrow::before { width: 16px; margin-right: var(--space-2); }
    .brand__text { font-size: var(--text-base); }
    .status { font-size: var(--text-xs); padding-inline: var(--space-3); }
    .site-footer { justify-content: flex-start; }
}

/* ==========================================================================
   Hareket azaltma: dekoratif animasyon yok, son durum doğrudan gösterilir
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .scene__float, .status__dot, .ghost__bar { animation: none; }
    .phone, .phone.is-resetting { transition: none; transform: none; }
    .hints li, .contact a { transition: none; }
}