/*
    v2 — kimlik ekranları, tanıtım sayfası ve işletme paneli ("Işık ve Su").

    Teslim paketi: design_handoff_kimlik_ve_tanitim (16 Eylül 2026). Derin mürekkep bir
    sahne, üstünde farklı hızda sürüklenen iki ışık kütlesi ve periyodik geçen bir huzme;
    sahnenin üstünde cam yüzeyler.

    ── Neden ayrı dosya ────────────────────────────────────────────────────────────
    tokens.css mobil uygulamayla ortak kaynak: oradaki bir tonu değiştiren, mobilde de
    değiştirmek zorunda. v2 paleti mobilden ayrıştığı için jetonlar --v2-* önekiyle burada.
    Yükleme sırası tokens.css → app.css → v2.css. Dosyayı kimlik ve tanıtım kabukları ile
    işletme rollerinin uygulama kabuğu yüklüyor (bkz. Presentation/Kabuk.cs); müşteri ve
    platform yönetimi ekranları hâlâ yalnızca app.css ile. Sınıflar v2- önekli, app.css'le
    çakışmıyor.

    ── Satır içi stil yok ──────────────────────────────────────────────────────────
    Prototipler baştan sona style="" ile yazılmıştı; içerik güvenlik politikası
    (style-src 'self') onları sessizce düşürüyor. Her bildirim burada bir sınıf — açılış
    gecikmeleri de (.v2-delay-*).
*/

/* ══════════════════════════════════════════════════════════ Yazı tipleri */

/*
    Hepsi kendi sunucumuzdan: CSP font-src 'self'. Open Sans tanımı eskiden yalnızca
    site.css'teydi ve kimlik ekranları onu hiç yüklemiyordu — tanıtım sayfasıyla farklı
    yazı tipiyle çıkıyorlardı. İki kabuk artık aynı tanımı okuyor.
*/
@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-display: swap;
}

/*
    Archivo, başlık yazı tipi (SIL OFL 1.1, Google Fonts'tan indirildi). Değişken kesim:
    500–700 ağırlıklarının hepsi aynı dosyada. İki alt küme var — Türkçenin ş, ğ, İ ve
    ₺ işareti latin-ext'te; tarayıcı yalnızca sayfada geçen harflerin dosyasını indiriyor.
*/
@font-face {
    font-family: "Archivo";
    src: url("/fonts/Archivo-latin-ext.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                   U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
                   U+A720-A7FF;
}

@font-face {
    font-family: "Archivo";
    src: url("/fonts/Archivo-latin.woff2") format("woff2");
    font-weight: 500 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════ Jetonlar */

:root {
    /*
        Marka — iki temada da aynı. --v2-scene koyu sahnenin mürekkebi.

        Turkuaz paketteki elektrik tonundan (#2EE6F0) bir kademe sakin: ekran fazla parlak
        bulundu (16 Eylül 2026). Ton aynı, doygunluk ve parlaklık biraz aşağıda.
    */
    --v2-scene: #04161B;
    --v2-acc: #2FCFDA;
    --v2-acc-mid: #12A3B0;
    --v2-acc-deep: #0B6E79;
    --v2-acc-ink: #063A44;
    --v2-amber: #FFB545;

    /*
        Sahne — açık tema: "açık su".

        Sahne; kimlik ekranlarının zemini, tanıtımın üst çubuğu, hero'su, sayı şeridi, kapanış
        kartı ve alt bilgisi. Paket sahneyi iki temada da koyu çiziyordu; beyaz temayı seçen
        kullanıcıya giriş ekranı koyu geliyordu (16 Eylül 2026, kullanıcı geri bildirimi). Açık
        temada aynı ışık reçetesi açık zeminde; koyu temada paketin koyu sahnesi olduğu gibi.
        Sahnenin üstündeki her renk buradan okunuyor — sahneye beyaz ya da koyu sabit renk yazmayın.
    */
    --v2-stage: linear-gradient(180deg, #F4FAFB 0%, #E7F2F5 100%);
    --v2-stage-solid: #E7F2F5;
    --v2-stage-card: linear-gradient(135deg, #EEF8FA 0%, #DDF0F3 100%);
    --v2-stage-card-brd: rgba(11, 110, 121, 0.14);
    --v2-stage-card-shadow: 0 30px 60px -36px rgba(4, 22, 27, 0.28);
    --v2-stage-ink: #0A1418;
    --v2-stage-ink-2: #3B4C54;
    --v2-stage-ink-3: #55666E;
    --v2-stage-link: #076C77;
    --v2-stage-line: rgba(11, 110, 121, 0.12);
    --v2-stage-glass: rgba(255, 255, 255, 0.72);
    --v2-stage-glass-brd: rgba(11, 110, 121, 0.18);
    --v2-stage-glass-brd-hi: rgba(11, 110, 121, 0.32);
    --v2-stage-glass-hi: rgba(11, 110, 121, 0.06);
    --v2-stage-pill-on: rgba(11, 110, 121, 0.12);
    --v2-stage-nav: rgba(255, 255, 255, 0.84);
    --v2-stage-nav-hover: rgba(11, 110, 121, 0.07);
    --v2-stage-light-a:
        radial-gradient(54% 48% at 22% 16%, rgba(46, 230, 240, 0.22) 0%, rgba(46, 230, 240, 0.13) 32%, rgba(46, 230, 240, 0.05) 60%, rgba(46, 230, 240, 0) 84%),
        radial-gradient(48% 44% at 80% 24%, rgba(18, 163, 176, 0.16) 0%, rgba(18, 163, 176, 0.09) 34%, rgba(18, 163, 176, 0.035) 62%, rgba(18, 163, 176, 0) 86%);
    --v2-stage-light-b:
        radial-gradient(52% 46% at 62% 88%, rgba(46, 230, 240, 0.16) 0%, rgba(46, 230, 240, 0.09) 34%, rgba(46, 230, 240, 0.035) 62%, rgba(46, 230, 240, 0) 86%),
        radial-gradient(38% 32% at 10% 78%, rgba(255, 181, 69, 0.10) 0%, rgba(255, 181, 69, 0.05) 38%, rgba(255, 181, 69, 0) 80%);
    --v2-stage-light-closing:
        radial-gradient(56% 50% at 16% 8%, rgba(46, 230, 240, 0.20) 0%, rgba(46, 230, 240, 0.12) 32%, rgba(46, 230, 240, 0.045) 60%, rgba(46, 230, 240, 0) 84%),
        radial-gradient(52% 46% at 86% 92%, rgba(18, 163, 176, 0.18) 0%, rgba(18, 163, 176, 0.10) 34%, rgba(18, 163, 176, 0.04) 62%, rgba(18, 163, 176, 0) 86%);
    --v2-stage-beam: linear-gradient(94deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 28%, rgba(255, 255, 255, 0.3) 46%, rgba(255, 255, 255, 0.34) 58%, rgba(255, 255, 255, 0.12) 74%, rgba(255, 255, 255, 0) 100%);
    --v2-stage-vignette: linear-gradient(180deg, rgba(214, 234, 238, 0) 0%, rgba(214, 234, 238, 0.3) 64%, rgba(214, 234, 238, 0.55) 100%);

    /*
        Logo ve simge: açık zeminde koyu yazılı varyant. Adres kökten: değişkenin içindeki göreli
        adres tarayıcıya göre kullanıldığı yere göre çözülebiliyor.
    */
    --v2-logo: url("/img/logo-acik.png");
    --v2-icon: url("/img/ikon-acik.png");

    /*
        Kimlik kartının logoya bindirmesi. Koyu varyant basık (440×401): kutuda altında saydam boşluk
        kalıyor ve kart o boşluğa 10 piksel biniyordu. Açık varyant kutuyu dolduruyor (440×437);
        aynı bindirme "Takip" yazısının altını kesiyordu.
    */
    --v2-logo-gap: 4px;

    /*
        Gradyanla boyanan yazı (hero'daki "tek ekranda", sayılar, adım numaraları). Açık zeminde koyu
        turkuaz: paketin açık uçlu gradyanı beyazda 1,6:1'e düşüyordu; büyük yazıda en az 3:1.
    */
    --v2-grad-text: linear-gradient(102deg, #0D8F9A 0%, #0B7F8A 46%, #0A6772 100%);
    --v2-grad-num: linear-gradient(120deg, #0D8F9A, #0A6772);
    --v2-grad-amber: linear-gradient(120deg, #B87812, #94600A);

    /* Yüzeyler — açık tema */
    --v2-page: linear-gradient(180deg, #F7FCFD 0%, #EFF7F9 52%, #E6F0F3 100%);
    --v2-card: #FFFFFF;
    --v2-card-brd: rgba(11, 110, 121, 0.14);
    --v2-card-hi: rgba(255, 255, 255, 0.9);
    --v2-field: #F2F8F9;
    --v2-field-brd: #DCE8EC;
    --v2-sunken: #EDF5F7;

    /*
        Metin. İkincil ton ve vurgu metni SAF BEYAZA göre değil, gerçekte durdukları
        yüzeylere göre kalibre edildi (alan, kutu, rozet zeminleri kontrastı yarım kademe
        aşağı çekiyor). Değiştirirken --v2-field ve --v2-sunken üstünde ölçün.
        --v2-ink-4 metin için kullanılmaz, yalnızca süs.
    */
    --v2-ink: #0A1418;
    --v2-ink-2: #3B4C54;
    --v2-ink-3: #55666E;
    --v2-ink-4: #93A4AB;
    --v2-acc-txt: #076C77;
    --v2-acc-soft: #E4F5F7;

    /* Durum */
    --v2-warn-bg: linear-gradient(150deg, #FEF7E6, #FBEDD0);
    --v2-warn-brd: #F3DAA6;
    --v2-warn-txt: #8A5A05;
    --v2-ok-bg: rgba(15, 158, 95, 0.10);
    --v2-ok-brd: rgba(15, 158, 95, 0.32);
    /* Rozette iç panelin zemininde (--v2-sunken + --v2-ok-bg) 4,5:1 kalsın diye paketin #0B7A4A tonundan bir kademe koyu. */
    --v2-ok-txt: #0A7547;
    --v2-ok: #0F9E5F;
    --v2-blue: #2C7EF8;
    /* Beyaz yazılı mavi rozetin zemini: #2C7EF8 beyazla 3,9:1 (küçük yazıda 4,5 gerekiyor); bu ton 5:1. */
    --v2-blue-fill: #1F6AE0;
    --v2-purple: #7457F0;

    /*
        Kırmızı: tehlike düğmesi, gider tutarı, red ve hata şeridi. İşletme paketinin jetonu
        (açık metin kartta 7,3:1). Kimlik ekranlarının hata şeridi pakette yoktu ve ayrı bir
        kırmızıyla yazılmıştı; iki yakın kırmızı tutmamak için --v2-danger-* artık bunun adı.
    */
    --v2-bad-bg: rgba(200, 48, 48, 0.09);
    --v2-bad-brd: rgba(200, 48, 48, 0.30);
    --v2-bad-txt: #A62121;
    --v2-danger-bg: var(--v2-bad-bg);
    --v2-danger-brd: var(--v2-bad-brd);
    --v2-danger-txt: var(--v2-bad-txt);

    /* Gölge — kimlik kartı açık sahnede; koyu sahnenin derin gölgesi açık zeminde kirli duruyordu. */
    --v2-card-shadow: 0 30px 70px -34px rgba(4, 22, 27, 0.3), 0 2px 8px rgba(4, 22, 27, 0.06);
    --v2-shadow: 0 1px 2px rgba(4, 22, 27, 0.05);
    --v2-shadow-hi: 0 30px 60px -28px rgba(4, 22, 27, 0.4);

    /* İşletme kartının üzerine gelme gölgesi: --v2-shadow-hi yoğun ekranda fazla ağır kalıyor. */
    --v2-shadow-mid: 0 18px 36px -22px rgba(4, 22, 27, 0.34), 0 1px 2px rgba(4, 22, 27, 0.05);

    /*
        Opak kart: içeriğin üstünde duran yüzeyler (bildirim, onay penceresi). Koyu temanın kartı
        yarı saydam; altından sayfa geçen bir bildirimde yazı okunmuyordu.
    */
    --v2-card-solid: #FFFFFF;

    /* Açılır listenin oku: satır içi SVG, rengi temaya göre (ikincil ton). */
    --v2-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355666E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /*
        Marka dolguları ve düğme gölgesi. Paketin gradyanları en açık uçta #5BF1FA'dan başlıyor,
        düğmenin altına turkuaz bir hale düşüyordu — parlamanın asıl kaynağı. Aynı merdiven bir ton
        sakin; gölge renkli hale değil, zemine düşen yumuşak gölge.
    */
    --v2-grad-btn: linear-gradient(135deg, #45D6E0 0%, #22BDC9 48%, #139FAC 100%);
    /* Hap gradyanının koyu ucu koyu yazıyla (adım numarası, sıra numarası) 3,1:1'de kalıyordu; en az 5,4:1. */
    --v2-grad-pill: linear-gradient(150deg, #45D5DF, #1799A5);
    --v2-btn-shadow: 0 1px 2px rgba(4, 22, 27, 0.16), 0 8px 18px -10px rgba(11, 110, 121, 0.5);
    --v2-btn-shadow-hi: 0 2px 4px rgba(4, 22, 27, 0.16), 0 14px 26px -12px rgba(11, 110, 121, 0.55);

    /*
        Tarayıcının otomatik doldurduğu alanın zemini. Chrome onu kendi açık rengiyle
        boyuyor ve background ile ezilemiyor; iç gölge zemin gibi kullanılıyor (app.css'teki
        .field__input ile aynı yol). İç gölge saydam renkle örtmediği için alanın kart
        üstündeki OPAK karşılığı.
    */
    --v2-autofill: #F2F8F9;
    --v2-autofill-card: #FFFFFF;

    /* Hareket */
    --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --v2-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

    /*
        Üzerine gelme geçişleri: tek eğri, iki süre. Başı ve sonu yumuşak (standart ease-in-out).
        Açılışların "hızlı başla, uzun süzül" eğrisi hover'da sert duruyordu: değişimin çoğu ilk
        karelerde bitiyor, imleç çekilince aynı sertlikte geri dönüyordu.
    */
    --v2-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
    --v2-dur: 220ms;
    --v2-dur-slow: 320ms;

    /* Tipografi */
    --v2-display: "Archivo", "Open Sans", "Segoe UI", system-ui, sans-serif;
    --v2-body: "Open Sans", "Segoe UI", system-ui, sans-serif;

    /*
        Klavye odağının halkası. Paketteki turkuaz (--v2-acc) koyu sahnede iyi, beyaz kartta
        1,5:1 — odak görünmüyordu. Yüzeylerde vurgu metninin tonu, sahnede turkuaz.
    */
    --v2-focus: var(--v2-acc-txt);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Sahne — koyu tema: paketin derin mürekkep sahnesi. */
    --v2-stage: var(--v2-scene);
    --v2-stage-solid: var(--v2-scene);
    --v2-stage-card: var(--v2-scene);
    --v2-stage-card-brd: rgba(255, 255, 255, 0.08);
    --v2-stage-card-shadow: 0 44px 88px -40px rgba(4, 22, 27, 0.75);
    --v2-stage-ink: #FFFFFF;
    --v2-stage-ink-2: rgba(255, 255, 255, 0.72);
    --v2-stage-ink-3: rgba(255, 255, 255, 0.5);
    --v2-stage-link: #9EE0E6;
    --v2-stage-line: rgba(255, 255, 255, 0.08);
    --v2-stage-glass: rgba(255, 255, 255, 0.07);
    --v2-stage-glass-brd: rgba(255, 255, 255, 0.16);
    --v2-stage-glass-brd-hi: rgba(255, 255, 255, 0.3);
    --v2-stage-glass-hi: rgba(255, 255, 255, 0.08);
    --v2-stage-pill-on: rgba(255, 255, 255, 0.17);
    --v2-stage-nav: rgba(4, 22, 27, 0.76);
    --v2-stage-nav-hover: rgba(255, 255, 255, 0.1);
    --v2-stage-light-a:
        radial-gradient(54% 48% at 22% 16%, rgba(46, 230, 240, 0.20) 0%, rgba(46, 230, 240, 0.12) 32%, rgba(46, 230, 240, 0.045) 60%, rgba(46, 230, 240, 0) 84%),
        radial-gradient(48% 44% at 80% 24%, rgba(11, 110, 121, 0.42) 0%, rgba(11, 110, 121, 0.25) 34%, rgba(11, 110, 121, 0.09) 62%, rgba(11, 110, 121, 0) 86%);
    --v2-stage-light-b:
        radial-gradient(52% 46% at 62% 88%, rgba(18, 163, 176, 0.22) 0%, rgba(18, 163, 176, 0.13) 34%, rgba(18, 163, 176, 0.045) 62%, rgba(18, 163, 176, 0) 86%),
        radial-gradient(38% 32% at 10% 78%, rgba(255, 181, 69, 0.08) 0%, rgba(255, 181, 69, 0.04) 38%, rgba(255, 181, 69, 0) 80%);
    --v2-stage-light-closing:
        radial-gradient(56% 50% at 16% 8%, rgba(46, 230, 240, 0.22) 0%, rgba(46, 230, 240, 0.13) 32%, rgba(46, 230, 240, 0.045) 60%, rgba(46, 230, 240, 0) 84%),
        radial-gradient(52% 46% at 86% 92%, rgba(11, 110, 121, 0.42) 0%, rgba(11, 110, 121, 0.25) 34%, rgba(11, 110, 121, 0.09) 62%, rgba(11, 110, 121, 0) 86%);
    --v2-stage-beam: linear-gradient(94deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 28%, rgba(255, 255, 255, 0.035) 46%, rgba(91, 241, 250, 0.055) 58%, rgba(91, 241, 250, 0.02) 74%, rgba(91, 241, 250, 0) 100%);
    --v2-stage-vignette: linear-gradient(180deg, rgba(4, 22, 27, 0) 0%, rgba(4, 22, 27, 0.18) 34%, rgba(4, 22, 27, 0.46) 64%, rgba(4, 22, 27, 0.72) 100%);

    --v2-logo: url("/img/logo-koyu.png");
    --v2-icon: url("/img/ikon-koyu.png");
    --v2-logo-gap: -10px;

    --v2-grad-text: linear-gradient(102deg, #A3E6EB 0%, #45CDD7 46%, #1AA7B4 100%);
    --v2-grad-num: linear-gradient(120deg, #A3E6EB, #45CDD7);
    --v2-grad-amber: linear-gradient(120deg, #F3D19E, #ECB057);

    --v2-page: linear-gradient(180deg, #0A1A20 0%, #061317 58%, #040F13 100%);
    --v2-card: rgba(13, 26, 32, 0.88);
    --v2-card-brd: rgba(46, 230, 240, 0.12);
    --v2-card-hi: rgba(255, 255, 255, 0.08);
    --v2-field: rgba(255, 255, 255, 0.05);
    --v2-field-brd: rgba(255, 255, 255, 0.13);
    --v2-sunken: rgba(255, 255, 255, 0.04);

    --v2-ink: #EAF6F8;
    --v2-ink-2: #C3D5DB;
    --v2-ink-3: #8DA3AC;
    --v2-ink-4: #647880;
    --v2-acc-txt: #5BE9F2;
    --v2-acc-soft: rgba(46, 230, 240, 0.13);

    --v2-warn-bg: linear-gradient(150deg, #392B10, #2B2009);
    --v2-warn-brd: #59461A;
    --v2-warn-txt: #F2C978;
    --v2-ok-bg: rgba(75, 216, 155, 0.12);
    --v2-ok-brd: rgba(75, 216, 155, 0.34);
    --v2-ok-txt: #4BD89B;

    --v2-bad-bg: rgba(255, 120, 120, 0.11);
    --v2-bad-brd: rgba(255, 120, 120, 0.32);
    --v2-bad-txt: #FF9B9B;

    --v2-card-shadow: 0 48px 96px -30px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.5);
    --v2-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --v2-shadow-hi: 0 30px 60px -26px rgba(0, 0, 0, 0.85);
    --v2-shadow-mid: 0 18px 36px -20px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);

    --v2-card-solid: #0D1A20;

    --v2-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238DA3AC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* Koyu zeminde turkuaz gölge görünmüyor; düğmenin altı karanlıkla ayrışıyor. */
    --v2-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    --v2-btn-shadow-hi: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 26px -12px rgba(0, 0, 0, 0.7);

    --v2-autofill: #18252A;
    --v2-autofill-card: #0E1B21;
}

/* ══════════════════════════════════════════════════════════ Temel */

body.v2 {
    margin: 0;
    font-family: var(--v2-body);
    font-size: 16px;
    line-height: normal;
    color: var(--v2-ink);
    -webkit-font-smoothing: antialiased;
}

body.v2-kimlik { background: var(--v2-stage-solid); }

body.v2-site {
    background: var(--v2-page);
    text-wrap: pretty;
}

/*
    app.css'in öğe kuralları (h1'in satır aralığı ve harf aralığı, bağlantının üzerine
    gelince çizilen alt çizgisi, odak halkası) v2 ölçülerini bozuyordu. :where() burada
    özgüllüğü app.css'tekine eşitliyor: sonra yüklendiği için bu kurallar kazanıyor, v2
    bileşen sınıfları da bunları rahatça eziyor.
*/
:where(.v2) h1,
:where(.v2) h2,
:where(.v2) h3,
:where(.v2) h4 {
    margin: 0;
    line-height: normal;
    letter-spacing: normal;
}

:where(.v2) a:hover { text-decoration: none; }

:where(.v2) strong { font-weight: 600; }

:where(.v2) :focus-visible {
    outline: 2px solid var(--v2-focus);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════ Hareket sözlüğü */

/*
    ── Görünürlük asla animasyona bağlanmaz ────────────────────────────────────────
    Açılış hareketleri yalnızca KONUM; hiçbir "from" karesinde opacity: 0 yok. Opaklıktan
    başlayan animasyon ekran görüntüsünde, yazdırmada ve bazı gömülü tarayıcılarda bölümleri
    bomboş çıkarıyordu (site.css'te yaşandı). En kötü ihtimalle öğe 16 piksel aşağıda durur.

    ── Neden transform değil translate ────────────────────────────────────────────
    Açılış "both" dolgusuyla bitiyor ve son karesini tutuyor. transform'la yazılınca o son
    kare (transform: none) düğmenin ve kartın üzerine gelince yükselmesini eziyordu —
    animasyon normal bildirimden güçlü. Bağımsız translate/rotate özellikleri transform'la
    birleşiyor: açılış bittiğinde de hover hareketi çalışıyor.

    Mesafeler değişkenle: tanıtım sayfası aynı hareketi biraz daha uzun oynuyor.
*/
@keyframes v2-rise {
    from { translate: 0 var(--v2-rise-y, 12px); }
    to { translate: none; }
}

/* Kelime kelime yükseliş. Paketteki 1,2 derecelik yatma kurumsal dilde oyuncak gibi duruyordu. */
@keyframes v2-word {
    from { translate: 0 var(--v2-word-y, 14px); }
    to { translate: none; }
}

@keyframes v2-reveal {
    from { translate: 0 20px; }
    to { translate: none; }
}

/*
    Işıklar daha küçük bir alanda ve daha yavaş sürükleniyor. Bulanık büyük katmanın her karede
    yeniden çizilmesi ekran kartını meşgul ediyor, üzerine gelme geçişleri de takılıyordu; dar
    hareket katmanın da küçülmesine izin veriyor (bkz. .v2-scene__light inset).
*/
@keyframes v2-drift-a {
    from { transform: translate3d(-3%, 0, 0) scale(1); }
    to { transform: translate3d(4%, -4%, 0) scale(1.08); }
}

@keyframes v2-drift-b {
    from { transform: translate3d(3%, 2%, 0) scale(1.06); }
    to { transform: translate3d(-4%, -3%, 0) scale(1); }
}

/* Huzme geçtikten sonra bir süre görünmüyor: ara vermeden gelen süpürme göz yoruyordu. */
@keyframes v2-beam {
    0% { transform: translateX(-60%) skewX(-14deg); }
    60%, 100% { transform: translateX(var(--v2-beam-to, 160%)) skewX(-14deg); }
}

@keyframes v2-breathe {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(1.03); }
}

/* Yalnızca gerçekten canlı olanın noktası atıyor (CANLI rozeti, süren adım); halka küçük ve soluk. */
@keyframes v2-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 230, 240, 0.35); }
    50% { box-shadow: 0 0 0 5px rgba(46, 230, 240, 0); }
}

@keyframes v2-float {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

/* Şifre sıfırlamanın ikinci adımına gelince adım çubuğu dolarak açılıyor. */
@keyframes v2-fill {
    from { width: 0; }
}

.v2-rise { animation: v2-rise 600ms var(--v2-ease) both; }

.v2-word { animation: v2-word 680ms var(--v2-ease) both; }

/* ══════════════════════════════════════════════════════════ Sahne */

/*
    Kimlik kabuğunda, hero'da ve kapanış kartında aynı reçete; renkleri temaya göre --v2-stage-*
    jetonlarından. Kenar keskinliği tek duraklı "transparent %NN" kesiminden geliyordu; her katman
    çok duraklı sönüm + bulanıklıkla yazıldı, yoksa bant bant görünüyor.
*/
.v2-scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--v2-stage);
    color: var(--v2-stage-ink);
}

.v2-scene__light,
.v2-scene__beam,
.v2-scene__vignette {
    position: absolute;
    pointer-events: none;
}

/*
    Işıkların yoğunluğu paketin üçte ikisi kadar: sahne derinliğini koruyor, parlamıyor.
    will-change katmanı açılışta ayırıyor; animasyon her döngüde katmanı yeniden kurmuyor.
*/
.v2-scene__light {
    inset: -14% -10%;
    z-index: -3;
    will-change: transform;
}

.v2-scene__light--a {
    filter: blur(56px);
    animation: v2-drift-a 40s var(--v2-ease-soft) infinite alternate;
    background: var(--v2-stage-light-a);
}

.v2-scene__light--b {
    filter: blur(64px);
    animation: v2-drift-b 52s var(--v2-ease-soft) infinite alternate;
    background: var(--v2-stage-light-b);
}

.v2-scene__beam {
    top: 0;
    bottom: 0;
    left: 0;
    width: 52%;
    z-index: -2;
    filter: blur(22px);
    will-change: transform;
    background: var(--v2-stage-beam);
    animation: v2-beam 18s var(--v2-ease-soft) infinite;
}

.v2-scene__vignette {
    inset: auto 0 0;
    height: 58%;
    z-index: -2;
    background: var(--v2-stage-vignette);
}

/* ══════════════════════════════════════════════════════════ Tıklanabilir vurgu */

/*
    Başlıklardaki kelimeler: fare üstündeyken altındaki çizgi soldan açılıyor, tıklanınca
    vurgu sabitleniyor (vurgu.js .is-marked ekliyor). Okurken nerede kaldığını ya da hangi
    cümleyi önemsediğini bırakabiliyor. Betik çalışmazsa hover yine çalışıyor.

    Çizgi scaleX ile değil kırpmayla (clip-path) açılıyor: scaleX gradyanı da sıkıştırıyordu, genişlik
    geçişi de her karede yerleşim hesaplatıyordu. Kırpma yalnızca çizimi değiştiriyor, gradyan yerinde.
*/
.v2-mark {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

.v2-mark::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.16em;
    width: 100%;
    height: 0.11em;
    min-height: 2px;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep) 72%, transparent);
    opacity: 0.5;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--v2-dur-slow) var(--v2-ease-ui), opacity var(--v2-dur) var(--v2-ease-ui);
}

.v2-mark:hover,
.v2-mark.is-marked { color: var(--v2-acc-txt); }

.v2-mark:hover::after { clip-path: inset(0 0 0 0); }

.v2-mark.is-marked::after {
    clip-path: inset(0 0 0 0);
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════ Tema hapı */

/*
    _TemaSecici'nin kendisi değişmedi (betiksiz, POST + çerez); hap iki kabukta sahnenin
    üstünde duruyor ve renklerini sahne jetonlarından alıyor. Paket iki düğme çiziyordu;
    "Sistem" seçeneği korunuyor, aynı hapın içinde üçüncü düğme.
*/
.v2-kimlik__tema .tema,
.v2-nav .tema,
.v2-appbar .tema {
    display: flex;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--v2-stage-glass);
    border: 1px solid var(--v2-stage-glass-brd);
}

.v2-kimlik__tema .tema {
    gap: 4px;
    padding: 4px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.v2-nav .tema,
.v2-appbar .tema {
    gap: 3px;
    padding: 3px;
}

.v2-kimlik__tema .tema__item,
.v2-nav .tema__item,
.v2-appbar .tema__item {
    display: grid;
    place-items: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--v2-stage-ink-3);
    transition: color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-kimlik__tema .tema__item svg,
.v2-nav .tema__item svg,
.v2-appbar .tema__item svg {
    width: 15px;
    height: 15px;
}

.v2-kimlik__tema .tema__item:hover,
.v2-nav .tema__item:hover,
.v2-appbar .tema__item:hover { color: var(--v2-stage-ink); }

.v2-kimlik__tema .tema__item.is-active,
.v2-nav .tema__item.is-active,
.v2-appbar .tema__item.is-active {
    background: var(--v2-stage-pill-on);
    color: var(--v2-stage-ink);
}

/* ══════════════════════════════════════════════════════════ Kimlik kabuğu */

/* body.v2-kimlik bloğun kendisi; sahne onun içindeki kap. */
.v2-kimlik__scene {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 48px;
}

.v2-kimlik__tema {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    z-index: 4;
}

.v2-kimlik__col {
    width: 100%;
    max-width: 468px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
    Logo: arkasında yavaş nefes alan bir parıltı. İki sözde öğe — parıltı önce, görsel sonra
    çiziliyor; logonun kendi zemini olsaydı parıltı onun üstüne düşerdi.
*/
.v2-logo {
    position: relative;
    animation: v2-rise 720ms var(--v2-ease) both;
}

.v2-logo::before {
    content: "";
    position: absolute;
    inset: 18% 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(46, 230, 240, 0.26) 0%, rgba(46, 230, 240, 0.13) 40%, rgba(46, 230, 240, 0.04) 70%, rgba(46, 230, 240, 0) 100%);
    filter: blur(30px);
    opacity: 0.6;
    animation: v2-breathe 9s var(--v2-ease-soft) infinite;
}

.v2-logo::after {
    content: "";
    position: relative;
    display: block;
    width: 190px;
    height: 189px;
    background: var(--v2-logo) center / contain no-repeat;
}

.v2-card {
    position: relative;
    width: 100%;
    margin-top: var(--v2-logo-gap);
    overflow: hidden;
    border-radius: 28px;
    padding: 30px 28px 28px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-card-shadow), inset 0 1px 0 var(--v2-card-hi);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    color: var(--v2-ink);
    animation: v2-rise 700ms var(--v2-ease) 120ms both;
    --v2-focus: var(--v2-acc-txt);
}

/*
    Açık temada kart opak beyaz: arka plan bulanıklığı hiç görünmüyor ama arkadaki ışıklar
    sürüklendikçe her karede yeniden hesaplanıyordu. Yalnızca yarı saydam koyu kartta var.
*/
:root:not([data-theme="dark"]) .v2-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Üst kenarda iki yana sönen turkuaz ışık çizgisi. */
.v2-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--v2-acc), transparent);
    opacity: 0.4;
    pointer-events: none;
}

.v2-kimlik__back {
    margin: 26px 0 0;
    font-size: 12.5px;
}

.v2-kimlik__back a {
    color: var(--v2-stage-ink-2);
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-kimlik__back a:hover {
    color: var(--v2-stage-ink);
    border-color: var(--v2-stage-glass-brd-hi);
}

/*
    Dar telefon: hap sağ üstte, logo ortada. 60 piksellik üst boşlukta hapın alt kenarı logonun
    üst kenarına değiyordu; biraz daha yer açılıyor.
*/
@media (max-width: 520px) {
    .v2-kimlik__scene { padding-top: 76px; }

    .v2-kimlik__tema {
        top: 16px;
        inset-inline-end: 16px;
    }
}

/* ══════════════════════════════════════════════════════════ Kart başlığı */

/* Giriş: rozet + büyük başlık. */
.v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* Nokta sabit: atan nokta "canlı" demek, bu rozette canlı bir şey yok. */
.v2-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v2-acc);
}

.v2-title {
    margin-top: 14px;
    font-family: var(--v2-display);
    font-size: 33px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.v2-lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.58;
    color: var(--v2-ink-3);
}

/* Diğer ekranlar: gradyan ikon pili + başlık + alt metin. */
.v2-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.v2-head__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 15px;
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: 0 6px 14px -8px rgba(11, 110, 121, 0.55);
}

.v2-head__body { min-width: 0; }

.v2-head__title {
    font-family: var(--v2-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.v2-head__text {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--v2-ink-3);
    overflow-wrap: anywhere;
}

.v2-head__text strong { color: var(--v2-ink-2); }

/* ══════════════════════════════════════════════════════════ Şeritler */

.v2-strip {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 22px;
    padding: 13px 15px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 12.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.v2-strip > svg {
    flex: 0 0 17px;
    margin-top: 1px;
}

.v2-strip + .v2-strip { margin-top: 10px; }

.v2-strip--warn {
    background: var(--v2-warn-bg);
    border-color: var(--v2-warn-brd);
    color: var(--v2-warn-txt);
}

.v2-strip--ok {
    gap: 10px;
    margin-top: 20px;
    background: var(--v2-ok-bg);
    border-color: var(--v2-ok-brd);
    color: var(--v2-ok-txt);
    font-weight: 600;
}

.v2-strip--danger {
    background: var(--v2-danger-bg);
    border-color: var(--v2-danger-brd);
    color: var(--v2-danger-txt);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════ Adım göstergesi */

.v2-steps {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding: 13px 15px;
    border-radius: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-steps__badge {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-sunken);
    color: var(--v2-ink-3);
    font-family: var(--v2-display);
    font-size: 12px;
    font-weight: 600;
}

.v2-steps__badge.is-active {
    border-color: transparent;
    background: var(--v2-grad-pill);
    color: #04161B;
}

.v2-steps__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--v2-ink-3);
}

.v2-steps__label.is-active { color: var(--v2-ink-2); }

.v2-steps__track {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: var(--v2-field-brd);
    overflow: hidden;
}

.v2-steps__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep));
}

.v2-steps__fill.is-full {
    width: 100%;
    animation: v2-fill 520ms var(--v2-ease) 200ms both;
}

/* ══════════════════════════════════════════════════════════ Form */

.v2-form { margin-top: 22px; }

.v2-form--stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.v2-form--login { margin-top: 28px; }

.v2-form--wide { margin-top: 26px; }

.v2-form--groups { gap: 14px; }

/* Şeridin hemen altındaki form: şerit zaten boşluk bırakıyor. */
.v2-strip + .v2-form { margin-top: 22px; }

.v2-strip--ok + .v2-form { margin-top: 20px; }

.v2-form > .v2-btn { margin-top: 22px; }

.v2-form--stack > .v2-btn { margin-top: 4px; }

.v2-form--groups > .v2-btn { margin-top: 6px; }

.v2-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.v2-grid--tight {
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.v2-grid--single { grid-template-columns: minmax(0, 1fr); }

.v2-span-all { grid-column: 1 / -1; }

.v2-hint {
    margin: 10px 2px 0;
    font-size: 11.5px;
    color: var(--v2-ink-3);
}

/* ── Alan ─────────────────────────────────────────────────────────────────── */

/*
    Odaklanınca etiket vurgu rengine geçiyor, kenarlık koyulaşıp etrafında bir halka
    açılıyor, alt kenarda soldan sağa bir çizgi çiziliyor. Hepsi :focus-within'den.
*/
.v2-field {
    position: relative;
    display: block;
}

.v2-field__label {
    display: block;
    margin: 0 0 8px 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--v2-ink-2);
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

.v2-field:focus-within .v2-field__label { color: var(--v2-acc-txt); }

/* Etiketin sağında bağlantı olan satır ("Şifremi unuttum"). */
.v2-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.v2-field__aside {
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    border-bottom: 1px solid transparent;
    transition: color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-field__aside:hover {
    color: var(--v2-acc-txt);
    border-color: var(--v2-acc);
}

.v2-field__input {
    display: block;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 16px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--v2-ink);
    background: var(--v2-field);
    border: 1px solid var(--v2-field-brd);
    border-radius: 15px;
    outline: none;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

.v2-field__input::placeholder {
    color: var(--v2-ink-3);
    opacity: 1;
}

.v2-field__input:hover { border-color: var(--v2-acc-mid); }

.v2-field__input:focus {
    border-color: var(--v2-acc-mid);
    background-color: var(--v2-card);
    box-shadow: 0 0 0 4px var(--v2-acc-soft);
}

.v2-field__input:-webkit-autofill,
.v2-field__input:-webkit-autofill:hover {
    box-shadow: 0 0 0 100px var(--v2-autofill) inset;
    -webkit-text-fill-color: var(--v2-ink);
    caret-color: var(--v2-ink);
    transition: background-color 10000s ease-out 0s;
}

.v2-field__input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px var(--v2-autofill) inset, 0 0 0 4px var(--v2-acc-soft);
    -webkit-text-fill-color: var(--v2-ink);
    caret-color: var(--v2-ink);
    transition: background-color 10000s ease-out 0s;
}

.v2-field__line {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-field:focus-within .v2-field__line { transform: scaleX(1); }

/*
    Tek seferlik kod. Harf aralığı son hanenin ARKASINA da ekleniyor ve ortalanmış metni
    aralığın yarısı kadar sola itiyordu; sol dolgu o farkı geri veriyor.
*/
.v2-field__input--code {
    height: 68px;
    padding-inline: 30px 16px;
    text-align: center;
    letter-spacing: 14px;
    font-family: var(--v2-display);
    font-size: 26px;
    font-weight: 600;
    border-radius: 18px;
}

.v2-field__input--code-lg {
    height: 72px;
    padding-inline: 32px 16px;
    letter-spacing: 16px;
    font-size: 28px;
}

/* ── Form grubu (başvuru) ─────────────────────────────────────────────────── */

.v2-group {
    position: relative;
    overflow: hidden;
    padding: 17px 16px 18px;
    border-radius: 20px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    --v2-autofill: var(--v2-autofill-card);
}

.v2-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, var(--v2-acc), transparent);
    opacity: 0.35;
    pointer-events: none;
}

.v2-group__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.v2-group__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 11px;
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
}

/* Mobildeki mikro etiket dili. */
.v2-group__title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

/* Grubun içindeki alanlar kutudan ayrışsın diye kart zemininde. */
.v2-group .v2-field__input {
    height: 50px;
    background: var(--v2-card);
}

.v2-group .v2-hint { margin-top: 11px; }

/* ══════════════════════════════════════════════════════════ Butonlar */

/*
    Birincil: turkuaz dolgu. Üzerine gelince bir piksel yükselip bir ton aydınlanıyor, gölgesi
    derinleşiyor; hepsi aynı eğri ve sürede, imleç çekilince aynı yumuşaklıkta geri dönüyor.

    Paketteki ışık süpürmesi (düğmenin üstünden geçen beyaz bant) kaldırıldı: parlamanın en görünür
    kaynağıydı ve imleç erken çekilince yarıda kesilip bir anda kayboluyordu.

    Aydınlanma gradyanın kendisinde değil: gradyan geçiş yapamıyor, değişim bir anda atlıyordu.
    Düğmenin üstünde saydam bir katman var, yalnızca onun saydamlığı değişiyor. isolation katmanı
    zeminin üstünde, yazının altında tutuyor.
*/
.v2-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    margin: 0;
    padding: 0 28px;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    font-family: var(--v2-display);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #04161B;
    background: var(--v2-grad-btn);
    box-shadow: var(--v2-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    transition: transform var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.16);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--v2-dur) var(--v2-ease-ui);
}

.v2-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--v2-btn-shadow-hi), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.v2-btn:hover::after { opacity: 1; }

.v2-btn:active {
    transform: translateY(0);
    box-shadow: var(--v2-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.v2-btn:active::after { opacity: 0.5; }

.v2-btn:disabled { cursor: default; }

.v2-btn--block { width: 100%; }

/* Ghost: saydam, ince kenarlıklı ikincil eylem. Yerinden oynamıyor; zemini yumuşakça doluyor. */
.v2-btn--ghost {
    height: 52px;
    gap: 9px;
    border: 1px solid var(--v2-field-brd);
    border-radius: 15px;
    background: transparent;
    color: var(--v2-acc-txt);
    font-family: var(--v2-body);
    font-size: 14.5px;
    letter-spacing: 0;
    box-shadow: none;
}

.v2-btn--ghost::after { background: var(--v2-acc-soft); }

.v2-btn--ghost:hover,
.v2-btn--ghost:active {
    border-color: var(--v2-acc-mid);
    transform: none;
    box-shadow: none;
}

.v2-btn--ghost:active::after { opacity: 1; }

/* Cam: sahnenin üstünde ikincil eylem. Açık sahnede beyaz cam, koyu sahnede saydam. */
.v2-btn--glass {
    gap: 9px;
    padding-inline: 26px;
    border: 1px solid var(--v2-stage-glass-brd);
    background: var(--v2-stage-glass);
    color: var(--v2-stage-ink);
    box-shadow: none;
}

.v2-btn--glass::after { background: var(--v2-stage-glass-hi); }

.v2-btn--glass:hover,
.v2-btn--glass:active {
    border-color: var(--v2-stage-glass-brd-hi);
    box-shadow: none;
}

.v2-btn--sm {
    height: 40px;
    padding-inline: 18px;
    border-radius: 12px;
    font-family: var(--v2-body);
    font-size: 13.5px;
    letter-spacing: 0;
}

/*
    Koyu temada kapanış kartı koyu sahne: birincil düğme beyaz, aynı karttaki cam düğmeden ve
    hero'daki turkuaz düğmeden ayrışıyor (README). Açık temada kart açık; düğme olağan turkuaz dolgu.
*/
:root[data-theme="dark"] .v2-closing .v2-btn:not(.v2-btn--glass) {
    background: #fff;
    color: var(--v2-acc-deep);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .v2-closing .v2-btn:not(.v2-btn--glass)::after { background: rgba(11, 110, 121, 0.07); }

:root[data-theme="dark"] .v2-closing .v2-btn:not(.v2-btn--glass):hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 16px 30px -14px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .v2-closing .v2-btn:not(.v2-btn--glass):active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
}

/*
    Bekleme durumu (ui.js basılan düğmeye is-pending ekliyor). app.css'teki .btn karşılığı;
    ::after üzerine gelme katmanına ayrıldığı için halka ::before'da.
*/
.v2-btn.is-pending {
    color: transparent !important;
    pointer-events: none;
}

.v2-btn.is-pending::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #04161B;
    border-top-color: transparent;
    animation: donuyor 620ms linear infinite;
}

.v2-btn--ghost.is-pending::before {
    border-color: var(--v2-acc-txt);
    border-top-color: transparent;
}

/* ══════════════════════════════════════════════════════════ Kimlik: alt parçalar */

.v2-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 26px 0 18px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

.v2-divider::before,
.v2-divider::after {
    content: "";
    flex: 1;
    height: 1px;
}

.v2-divider::before { background: linear-gradient(90deg, transparent, var(--v2-field-brd)); }

.v2-divider::after { background: linear-gradient(90deg, var(--v2-field-brd), transparent); }

.v2-stack {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* İşletme başvurusuna giden kart: seyrek yol, kendi açıklamasıyla. */
.v2-offer {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-sunken);
    color: inherit;
    text-align: start;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-offer:hover {
    border-color: var(--v2-acc-mid);
    background-color: var(--v2-acc-soft);
}

.v2-offer__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 13px;
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: 0 5px 12px -7px rgba(11, 110, 121, 0.55);
}

.v2-offer__body {
    flex: 1;
    min-width: 0;
}

.v2-offer__title {
    display: block;
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 600;
}

.v2-offer__text {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

.v2-offer__chevron {
    display: grid;
    color: var(--v2-ink-3);
    transition: color var(--v2-dur) var(--v2-ease-ui), transform var(--v2-dur) var(--v2-ease-ui);
}

/* Kart yerinden oynamıyor; yön işareti iki piksel ilerliyor — bir yere götürdüğünü söyleyen tek hareket. */
.v2-offer:hover .v2-offer__chevron {
    color: var(--v2-acc-txt);
    transform: translateX(2px);
}

/* Kartın altındaki tek satırlık yollar: "Giriş yapın", "Girişe dön". */
.v2-note {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--v2-ink-3);
}

.v2-note--back { margin-top: 22px; }

.v2-note--small {
    margin-top: 16px;
    font-size: 12.5px;
}

.v2-link {
    font-weight: 600;
    color: var(--v2-acc-txt);
    border-bottom: 1px solid transparent;
    transition: color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-link:hover { border-color: var(--v2-acc); }

.v2-link--quiet { color: var(--v2-ink-3); }

.v2-link--quiet:hover { color: var(--v2-acc-txt); }

/* Kodu yeniden isteyen ayrı form: sunucuda ayrı işleyici (Resend). */
.v2-resend { margin-top: 11px; }

.v2-actions { margin-top: 26px; }

/* ══════════════════════════════════════════════════════════ Tanıtım: kabuk */

body.v2-site {
    --v2-rise-y: 14px;
    --v2-word-y: 18px;
}

.v2-wrap {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

/* Sabit üst çubuğun altında kalmasın: bölüm bağlantısı başlığı çubuğun altına getiriyor. */
.v2-site section[id] { scroll-margin-top: 72px; }

.v2-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--v2-stage-nav);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--v2-stage-line);
}

.v2-nav__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 72px;
}

.v2-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: var(--v2-stage-ink);
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.v2-brand:hover { color: var(--v2-stage-ink); }

/* Logonun simgesi; varyantı temaya göre (açık zeminde koyu araçlı). */
.v2-brand__mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: var(--v2-icon) center / contain no-repeat;
}

.v2-brand__name { white-space: nowrap; }

.v2-nav__links {
    display: flex;
    gap: 4px;
    margin-inline-start: auto;
}

.v2-nav__links a {
    padding: 9px 14px;
    border-radius: 999px;
    color: var(--v2-stage-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-nav__links a:hover {
    background-color: var(--v2-stage-nav-hover);
    color: var(--v2-stage-ink);
}

/*
    Dört hap, marka, tema hapı ve giriş düğmesi 930 pikselin altında tek satıra sığmıyor;
    haplar gizleniyor (bölümler kaydırınca zaten sırayla geliyor, alt bilgide de bağlantıları var).
*/
@media (max-width: 980px) {
    .v2-nav__links { display: none; }

    .v2-nav__inner { gap: 16px; }

    .v2-nav .tema { margin-inline-start: auto; }
}

/*
    Dar telefonlar: 320–400 pikselde marka adı, tema hapı ve "Giriş yap" yan yana sığmıyor,
    sayfa yatayda kayıyordu (site.css'te yaşandı). Ad gizleniyor — simge kalıyor, bağlantının
    adı ekran okuyucu için aria-label'da — ve kenar boşlukları biraz daralıyor.
*/
@media (max-width: 440px) {
    .v2-wrap { width: min(100% - 28px, 1200px); }

    .v2-nav__inner { gap: 10px; }

    .v2-nav .v2-brand__name { display: none; }

    .v2-nav .v2-btn--sm { padding-inline: 14px; }
}

/* Altından açılan çizgili bağlantı. */
.v2-ulink {
    position: relative;
    color: var(--v2-acc-txt);
    font-weight: 600;
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

.v2-ulink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-ulink:hover::after { transform: scaleX(1); }

/* Tanıtım başlıklarında çizgi yazıya oranla biraz daha ince. */
.v2-site .v2-mark::after {
    bottom: -0.14em;
    height: 0.09em;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep) 74%, transparent);
}

.v2-site .v2-word { animation-duration: 760ms; }

/* ══════════════════════════════════════════════════════════ Tanıtım: hero */

.v2-hero {
    padding-block: clamp(56px, 12vw, 92px) clamp(64px, 14vw, 108px);
    --v2-beam-to: 170%;
}

.v2-hero > .v2-scene__light { inset: -16% -10%; }

.v2-hero > .v2-scene__beam { animation-duration: 20s; }

/*
    İki kolon 340 pikselden dar olamıyor; 375 piksellik telefonda kap 335 piksel ve tek kolon
    kabın dışına taşıyordu. min() kolonun en küçük genişliğini kaba sığdırıyor.
*/
.v2-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 58px;
    align-items: center;
}

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: var(--v2-stage-glass);
    border: 1px solid var(--v2-stage-glass-brd);
    color: var(--v2-stage-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    animation: v2-rise 640ms var(--v2-ease) both;
}

/* Nokta sabit (bkz. .v2-badge): atan nokta yalnızca canlı olana ayrıldı. */
.v2-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-acc);
}

.v2-hero__title {
    margin-top: 24px;
    font-family: var(--v2-display);
    font-size: clamp(2.5rem, 1.1rem + 4.8vw, 4.9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
}

.v2-grad {
    display: inline-block;
    background: var(--v2-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v2-hero__lead {
    margin-top: 26px;
    max-width: 48ch;
    font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
    line-height: 1.64;
    color: var(--v2-stage-ink-2);
    animation: v2-rise 700ms var(--v2-ease) 340ms both;
}

.v2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 36px;
    animation: v2-rise 700ms var(--v2-ease) 410ms both;
}

.v2-hero__note {
    margin-top: 22px;
    font-size: 13px;
    color: var(--v2-stage-ink-3);
}

.v2-hero__note .v2-ulink { color: var(--v2-stage-link); }

/* ── Önizleme kartı ───────────────────────────────────────────────────────── */

/*
    Ekran görüntüsü değil, mobil uygulamanın sıra kartı sayfanın kendi parçalarıyla. Metinler
    uygulamanın gerçek biçimleri: aşama "{hizmet} yapılıyor", sayaç biten / toplam, çubuk da
    aynı oran.
*/
/*
    Önizlemenin kendi renk jetonları: açık temada uygulamanın açık görünümü (beyaz kartlar),
    koyu temada koyu görünümü. Kartın içi sabit beyaz yazıyla çizilseydi açık sahnede kaybolurdu.
*/
.v2-preview {
    position: relative;
    animation: v2-rise 820ms var(--v2-ease) 280ms both;

    --v2-pv-frame: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72));
    --v2-pv-frame-brd: rgba(11, 110, 121, 0.14);
    --v2-pv-frame-shadow: 0 30px 60px -32px rgba(4, 22, 27, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --v2-pv-dot: rgba(11, 110, 121, 0.2);
    --v2-pv-panel: #F2F8F9;
    --v2-pv-panel-brd: rgba(11, 110, 121, 0.1);
    --v2-pv-card: #FFFFFF;
    --v2-pv-card-brd: rgba(11, 110, 121, 0.12);
    --v2-pv-steps: #F2F8F9;
    --v2-pv-steps-brd: rgba(11, 110, 121, 0.08);
    --v2-pv-ink: #0A1418;
    --v2-pv-ink-2: #3B4C54;
    --v2-pv-ink-3: #55666E;
    --v2-pv-stage: #076C77;
    --v2-pv-ok: #0B7A4A;
    --v2-pv-live: #1F63CC;
    --v2-pv-live-bg: rgba(15, 158, 95, 0.1);
    --v2-pv-live-brd: rgba(15, 158, 95, 0.3);
    --v2-pv-track: rgba(11, 110, 121, 0.12);
}

:root[data-theme="dark"] .v2-preview {
    --v2-pv-frame: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    --v2-pv-frame-brd: rgba(255, 255, 255, 0.13);
    --v2-pv-frame-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    --v2-pv-dot: rgba(255, 255, 255, 0.2);
    --v2-pv-panel: rgba(4, 22, 27, 0.6);
    --v2-pv-panel-brd: rgba(255, 255, 255, 0.09);
    --v2-pv-card: rgba(255, 255, 255, 0.05);
    --v2-pv-card-brd: rgba(255, 255, 255, 0.08);
    --v2-pv-steps: rgba(4, 22, 27, 0.55);
    --v2-pv-steps-brd: rgba(255, 255, 255, 0.07);
    --v2-pv-ink: #FFFFFF;
    --v2-pv-ink-2: rgba(255, 255, 255, 0.82);
    --v2-pv-ink-3: rgba(255, 255, 255, 0.5);
    --v2-pv-stage: var(--v2-acc);
    --v2-pv-ok: #5FE0A5;
    --v2-pv-live: #8FC2FF;
    --v2-pv-live-bg: rgba(15, 158, 95, 0.18);
    --v2-pv-live-brd: rgba(15, 158, 95, 0.4);
    --v2-pv-track: rgba(255, 255, 255, 0.12);
}

.v2-preview::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(46, 230, 240, 0.18) 0%, rgba(46, 230, 240, 0.09) 40%, rgba(46, 230, 240, 0.03) 70%, rgba(46, 230, 240, 0) 100%);
    filter: blur(36px);
    opacity: 0.6;
    animation: v2-breathe 10s var(--v2-ease-soft) infinite;
}

/*
    Arka plan bulanıklığı (backdrop-filter) yok: çerçeve sürekli süzüldüğü için arkası her karede
    yeniden bulanıklaştırılıyordu, oysa arkasındaki ışıklar zaten bulanık — fark görünmüyordu.
*/
.v2-preview__frame {
    position: relative;
    padding: 17px;
    border-radius: 28px;
    background: var(--v2-pv-frame);
    border: 1px solid var(--v2-pv-frame-brd);
    box-shadow: var(--v2-pv-frame-shadow);
    animation: v2-float 8s var(--v2-ease-soft) 1.2s infinite alternate;
}

.v2-preview__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 6px 15px;
}

.v2-preview__dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--v2-pv-dot);
}

.v2-preview__title {
    margin-inline-start: 9px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-pv-ink-3);
}

.v2-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--v2-pv-live-bg);
    border: 1px solid var(--v2-pv-live-brd);
    color: var(--v2-pv-ok);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.v2-live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: v2-dot 2.6s var(--v2-ease-soft) infinite;
}

.v2-preview__panel {
    display: grid;
    gap: 12px;
    padding: 15px;
    border-radius: 20px;
    background: var(--v2-pv-panel);
    border: 1px solid var(--v2-pv-panel-brd);
}

.v2-qcard {
    padding: 14px;
    border-radius: 17px;
    background: var(--v2-pv-card);
    border: 1px solid var(--v2-pv-card-brd);
}

.v2-qcard__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.v2-qcard__no {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--v2-grad-pill);
    color: #04161B;
    font-family: var(--v2-display);
    font-size: 13.5px;
    font-weight: 700;
}

.v2-qcard__main {
    flex: 1;
    min-width: 0;
}

.v2-qcard__plate {
    display: block;
    font-family: var(--v2-display);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--v2-pv-ink);
}

.v2-qcard__stage {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--v2-pv-stage);
}

.v2-qcard__stage--ready { color: var(--v2-pv-ok); }

.v2-qcard__meta {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--v2-pv-ink-3);
}

.v2-qcard__side {
    flex: 0 0 auto;
    text-align: end;
}

.v2-qcard__badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--v2-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

.v2-qcard__badge--ready { background: var(--v2-purple); }

.v2-qcard__price {
    display: block;
    margin-top: 6px;
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-pv-ink);
    white-space: nowrap;
}

.v2-qsteps {
    margin-top: 13px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--v2-pv-steps);
    border: 1px solid var(--v2-pv-steps-brd);
}

.v2-qsteps__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.v2-qsteps__caps {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    color: var(--v2-pv-ink-3);
}

.v2-qsteps__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--v2-pv-ink-3);
}

.v2-qsteps__list {
    display: grid;
    gap: 8px;
}

.v2-qstep {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
}

.v2-qstep::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--v2-pv-dot);
}

.v2-qstep__name {
    flex: 1;
    min-width: 0;
    color: var(--v2-pv-ink-2);
}

.v2-qstep__state {
    font-weight: 600;
    color: var(--v2-pv-ink-3);
}

.v2-qstep--done::before { background: var(--v2-ok); }

.v2-qstep--done .v2-qstep__state { color: var(--v2-pv-ok); }

.v2-qstep--live::before {
    background: var(--v2-blue);
    animation: v2-dot 2.6s var(--v2-ease-soft) infinite;
}

.v2-qstep--live .v2-qstep__state { color: var(--v2-pv-live); }

.v2-qstep--wait .v2-qstep__name { color: var(--v2-pv-ink-3); }

.v2-qstep--wait .v2-qstep__state { font-weight: 400; }

.v2-qsteps__bar {
    margin-top: 12px;
    height: 4px;
    border-radius: 999px;
    background: var(--v2-pv-track);
    overflow: hidden;
}

/* Biten / toplam: 1 / 3. */
.v2-qsteps__bar > i {
    display: block;
    width: 33.33%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #45D5DF, #0B6E79);
}

/* Önizlemedeki düğme bir resmin parçası: basılmıyor, üzerine gelince de oynamıyor. */
.v2-preview__cta {
    height: 50px;
    padding-inline: 0;
    font-size: 14.5px;
    cursor: default;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════ Tanıtım: sayılar */

.v2-stats {
    background: var(--v2-stage-solid);
    color: var(--v2-stage-ink);
    border-top: 1px solid var(--v2-stage-line);
}

.v2-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v2-stat {
    padding: 34px 10px;
    text-align: center;
    border-inline-end: 1px solid var(--v2-stage-line);
}

.v2-stat:last-child { border-inline-end: 0; }

.v2-stat__value {
    font-family: var(--v2-display);
    font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    background: var(--v2-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v2-stat__value--amber { background-image: var(--v2-grad-amber); }

.v2-stat__label {
    margin-top: 6px;
    font-size: 13px;
    color: var(--v2-stage-ink-3);
}

/*
    Üç hücre 580 pikselin altında yan yana sığmıyor. Kendiliğinden sarılınca iki üstte bir altta
    kalıyor ve ayırıcı çizgi yarım satırda asılı duruyordu; dar ekranda alt alta, aralarında
    yatay çizgi.
*/
@media (max-width: 579px) {
    .v2-stats__grid { grid-template-columns: minmax(0, 1fr); }

    .v2-stat {
        padding-block: 24px;
        border-inline-end: 0;
    }

    .v2-stat + .v2-stat { border-top: 1px solid var(--v2-stage-line); }
}

/* ══════════════════════════════════════════════════════════ Tanıtım: bölümler */

.v2-section {
    padding-block: clamp(68px, 7vw, 120px);
    --v2-focus: var(--v2-acc-txt);
}

.v2-section--tint { background: linear-gradient(180deg, transparent, var(--v2-sunken)); }

.v2-shead {
    max-width: 58ch;
    margin-bottom: clamp(36px, 4vw, 56px);
}

.v2-shead--center {
    margin-inline: auto;
    text-align: center;
}

.v2-shead__tag {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--v2-acc-txt);
}

.v2-shead__title {
    margin-top: 14px;
    font-family: var(--v2-display);
    font-size: clamp(1.8rem, 1.05rem + 2.6vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.v2-shead__text {
    margin-top: 17px;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    line-height: 1.64;
    color: var(--v2-ink-3);
}

/* ── Kartlar ─────────────────────────────────────────────────────────────── */

.v2-tiles {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.v2-tiles--steps { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }

.v2-tiles--roles {
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 430px));
    justify-content: center;
}

/*
    Üzerine gelince kart üç piksel yükseliyor, gölgesi derinleşiyor, kenarı turkuaza yaklaşıyor.
    Paketteki altı piksellik sıçrama, tam turkuaz kenar ve dönen ikon kurumsal dilde fazla
    hareketliydi; ikon artık yerinde duruyor.
*/
.v2-tile {
    position: relative;
    overflow: hidden;
    padding: 28px 24px;
    border-radius: 22px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow);
    transition: transform var(--v2-dur-slow) var(--v2-ease-ui), box-shadow var(--v2-dur-slow) var(--v2-ease-ui), border-color var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-tile::before {
    content: "";
    position: absolute;
    inset-inline: 24px;
    top: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--v2-acc), transparent);
    opacity: 0.25;
    transition: opacity var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--v2-shadow-hi);
    border-color: rgba(18, 163, 176, 0.45);
}

.v2-tile:hover::before { opacity: 0.6; }

.v2-tile__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 15px;
    background: linear-gradient(150deg, rgba(46, 230, 240, 0.16), var(--v2-acc-soft));
    color: var(--v2-acc-txt);
}

.v2-tile__title {
    font-family: var(--v2-display);
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.v2-tile__text {
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.64;
    color: var(--v2-ink-3);
}

/* Nasıl çalışır: sıra gerçek, numara listenin kendisinden de okunuyor (ol). */
.v2-step { padding-top: 30px; }

.v2-step__no {
    margin-bottom: 16px;
    font-family: var(--v2-display);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    background: var(--v2-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v2-step__no--amber { background-image: var(--v2-grad-amber); }

.v2-step .v2-tile__title {
    font-size: 1.12rem;
    letter-spacing: normal;
}

.v2-step .v2-tile__text {
    margin-top: 10px;
    font-size: 14px;
}

/* Kimler için */
.v2-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/*
    İşletme rozeti amber. Paket yazıyı iki temada da #8A5A05 veriyordu; koyu kartta 2:1'de
    kalıyordu. Uyarı metninin jetonu açıkta aynı ton, koyuda okunan karşılığı.
*/
.v2-role-badge--amber {
    background: rgba(255, 181, 69, 0.16);
    color: var(--v2-warn-txt);
}

.v2-role .v2-tile__title {
    margin-top: 17px;
    letter-spacing: normal;
}

.v2-ticks {
    display: grid;
    gap: 12px;
    margin: 19px 0 0;
    padding: 0;
    list-style: none;
}

.v2-ticks li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 14px;
    line-height: 1.54;
    color: var(--v2-ink-2);
}

.v2-ticks svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--v2-acc-txt);
}

/* ── S.S.S. ───────────────────────────────────────────────────────────────── */

/*
    <details name="sss">: tek seferde bir soru açık ve bunu tarayıcı yapıyor, betik yok.
    Açılış hareketi ::details-content ile; desteklemeyen tarayıcıda soru hareketsiz açılıyor.
*/
.v2-faq {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin-inline: auto;
}

.v2-faq__item {
    overflow: hidden;
    border-radius: 20px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow);
    transition: border-color var(--v2-dur-slow) var(--v2-ease-ui), box-shadow var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-faq__item:hover {
    border-color: rgba(18, 163, 176, 0.45);
    box-shadow: var(--v2-shadow-hi);
}

.v2-faq__q {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    list-style: none;
    cursor: pointer;
    font-family: var(--v2-display);
    font-size: 16px;
    font-weight: 600;
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

.v2-faq__q::-webkit-details-marker { display: none; }

.v2-faq__q:hover { color: var(--v2-acc-txt); }

/* Özet kutunun içinde: odak halkası kartın kenarında kesilmesin. */
.v2-faq__q:focus-visible { outline-offset: -4px; }

.v2-faq__text { flex: 1; }

.v2-faq__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
    transition: transform var(--v2-dur-slow) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-faq__item[open] .v2-faq__icon {
    transform: rotate(135deg);
    background: var(--v2-grad-pill);
    color: #04161B;
}

.v2-faq__a {
    padding: 0 22px 20px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--v2-ink-3);
}

@media (prefers-reduced-motion: no-preference) {
    .v2-faq {
        interpolate-size: allow-keywords;
    }

    .v2-faq__item::details-content {
        block-size: 0;
        opacity: 0;
        overflow: hidden;
        transition: block-size var(--v2-dur-slow) var(--v2-ease-ui), opacity var(--v2-dur-slow) var(--v2-ease-ui), content-visibility var(--v2-dur-slow) allow-discrete;
    }

    .v2-faq__item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* ── Kapanış ─────────────────────────────────────────────────────────────── */

.v2-closing-wrap { padding-block: clamp(52px, 6vw, 100px); }

.v2-closing {
    padding: clamp(46px, 6vw, 82px) clamp(24px, 4vw, 60px);
    border-radius: 32px;
    background: var(--v2-stage-card);
    border: 1px solid var(--v2-stage-card-brd);
    text-align: center;
    box-shadow: var(--v2-stage-card-shadow);
    --v2-beam-to: 170%;
}

.v2-closing > .v2-scene__light {
    inset: -22% -14%;
    z-index: -2;
    filter: blur(48px);
    animation: v2-drift-a 38s var(--v2-ease-soft) infinite alternate;
    background: var(--v2-stage-light-closing);
}

.v2-closing > .v2-scene__beam {
    width: 50%;
    z-index: -1;
    filter: blur(20px);
    animation-duration: 16s;
}

.v2-closing__title {
    font-family: var(--v2-display);
    font-size: clamp(1.8rem, 1.05rem + 2.6vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.v2-closing__text {
    max-width: 50ch;
    margin: 18px auto 0;
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
    line-height: 1.64;
    color: var(--v2-stage-ink-2);
}

.v2-closing__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin-top: 34px;
}

/* ── Alt bilgi ───────────────────────────────────────────────────────────── */

/* Üst çizgi: açık temada alt bilgi sayfanın alt ucuyla aynı tonda, sınırı çizgi çiziyor. */
.v2-footer {
    padding-block: 56px 34px;
    background: var(--v2-stage-solid);
    border-top: 1px solid var(--v2-stage-line);
    color: var(--v2-stage-ink-3);
}

/*
    Kolonlar içeriğe göre değil kutuya göre boyutlanıyor: kırılmayan uzun e-posta adresi dar
    ekranda kolonu itip sayfayı yana kaydırıyordu (site.css'te yaşandı).
*/
.v2-footer__grid {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}

.v2-footer__grid > * { min-width: 0; }

/*
    Dar telefonda kendiliğinden sarılan ızgara markayı 165 piksellik kolona sıkıştırıyor, e-posta
    adresini de harf ortasından bölüyordu ("…takip.co / m"). Marka ve iletişim tam satır, iki
    bağlantı listesi yan yana.
*/
@media (max-width: 440px) {
    .v2-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .v2-footer__grid > :first-child,
    .v2-footer__grid > :last-child { grid-column: 1 / -1; }
}

.v2-footer .v2-brand { margin-bottom: 16px; }

.v2-footer__about {
    max-width: 34ch;
    font-size: 13.5px;
    line-height: 1.64;
}

/* Koyu temada paketteki %42 beyaz 10,5 piksellik büyük harfte 4,2:1'de kalıyordu; %50 ile 5,2:1. */
.v2-footer h4 {
    margin-bottom: 15px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--v2-stage-ink-3);
}

.v2-footer ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-footer ul .v2-ulink {
    color: var(--v2-stage-ink-2);
    font-size: 13.5px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.v2-footer ul .v2-ulink:hover { color: var(--v2-stage-ink); }

.v2-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 42px;
    padding-top: 24px;
    border-top: 1px solid var(--v2-stage-line);
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════ İşletme: kabuk */

/*
    İşletme rollerinin uygulama kabuğu (_AppLayout, body.v2-app): üst çubuk → hero şeridi →
    içerik kolonu. Paket üst çubuğu ve hero'yu iki temada da koyu sahne çiziyordu; kimlik
    ekranlarındaki karar burada da geçerli — sahnenin rengi --v2-stage-* jetonlarından, açık
    temada açık su.

    Hareket kimlik ekranlarındaki ince ayarla aynı dilde: paketteki ışık süpürmeleri (düğme,
    ölçü kartı), aktif hapın ve seçim kutusunun "pop" açılışı ve ikon pilinin dönmesi yok;
    üzerine gelince yükselme yalnızca tıklanan şeyde (düğme 1 px; kısayol satırı ve fotoğraf 2 px).
    İçinde form olan paneller ve bilgi kutuları yerinden oynamıyor, kenarı ve gölgesi değişiyor.
*/
body.v2-app {
    min-height: 100vh;
    background: var(--v2-page);
    text-wrap: pretty;
    --v2-rise-y: 14px;
}

.v2-appbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--v2-stage-nav);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--v2-stage-line);
}

.v2-appbar__inner {
    width: min(100% - 32px, 1320px);
    min-height: 68px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-brand--app {
    flex: 0 0 auto;
    font-size: 16.5px;
}

.v2-brand--app .v2-brand__mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

.v2-appbar__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-inline-start: auto;
}

.v2-appbar__menu a {
    padding: 9px 13px;
    border-radius: 999px;
    color: var(--v2-stage-ink-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-appbar__menu a:hover {
    background-color: var(--v2-stage-nav-hover);
    color: var(--v2-stage-ink);
}

/* Paketteki koyu uçlu gradyan koyu yazıyla 3,1:1'de kalıyordu; hap gradyanı en az 5,4:1. */
.v2-appbar__menu a.is-active {
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: 0 6px 14px -8px rgba(11, 110, 121, 0.5);
}

.v2-appbar__quit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    margin: 0;
    padding: 0 15px;
    border-radius: 12px;
    border: 1px solid var(--v2-stage-glass-brd);
    background: var(--v2-stage-glass);
    color: var(--v2-stage-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-appbar__quit:hover {
    border-color: var(--v2-stage-glass-brd-hi);
    color: var(--v2-stage-link);
}

/*
    Menü sığmayınca kendi satırına iniyor ve orada yatayda kayıyor; çubuk hiçbir durumda
    sayfayı yana taşırmıyor. Sığma genişliği rolün menüsüne bağlı: işletme sahibinin on
    bağlantısı 1320 pikselin altında tek satıra sığmıyor, personelin dördü telefona kadar
    sığıyor (_AppLayout menü uzunluğuna göre --uzun / --orta sınıfını veriyor).
*/
@media (max-width: 1319px) {
    .v2-appbar--uzun .v2-appbar__inner { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding-top: 12px; min-height: 0; }
    .v2-appbar--uzun .tema { margin-inline-start: auto; }
    .v2-appbar--uzun .v2-appbar__menu { order: 3; flex: 1 0 100%; flex-wrap: nowrap; margin: 0 -16px; padding: 10px 16px 10px; overflow-x: auto; scrollbar-width: none; }
    .v2-appbar--uzun .v2-appbar__menu::-webkit-scrollbar { display: none; }
}

@media (max-width: 1079px) {
    .v2-appbar--orta .v2-appbar__inner { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding-top: 12px; min-height: 0; }
    .v2-appbar--orta .tema { margin-inline-start: auto; }
    .v2-appbar--orta .v2-appbar__menu { order: 3; flex: 1 0 100%; flex-wrap: nowrap; margin: 0 -16px; padding: 10px 16px 10px; overflow-x: auto; scrollbar-width: none; }
    .v2-appbar--orta .v2-appbar__menu::-webkit-scrollbar { display: none; }
}

@media (max-width: 819px) {
    .v2-appbar .v2-appbar__inner { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding-top: 12px; min-height: 0; }
    .v2-appbar .tema { margin-inline-start: auto; }
    .v2-appbar .v2-appbar__menu { order: 3; flex: 1 0 100%; flex-wrap: nowrap; margin: 0 -16px; padding: 10px 16px 10px; overflow-x: auto; scrollbar-width: none; }
    .v2-appbar .v2-appbar__menu::-webkit-scrollbar { display: none; }
}

/* Telefonda iki satırlık çubuk ekranın yedide birini kaplıyordu: yapışkan değil, sayfayla kayıyor. */
@media (max-width: 640px) {
    .v2-appbar { position: relative; }
}

@media (max-width: 440px) {
    .v2-appbar .v2-brand__name { display: none; }

    .v2-appbar__quit { padding-inline: 12px; }
}

/* ── Hero şeridi ──────────────────────────────────────────────────────────── */

/* Işık katmanları şeridin iki katından uzun: kısa şeritte ışıklar yatay çizgi gibi görünüyordu. */
.v2-band { border-bottom: 1px solid var(--v2-stage-line); }

.v2-band .v2-scene__light { inset: -60% -20%; }

.v2-band__inner {
    width: min(100% - 32px, 1320px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-block: 30px 34px;
}

.v2-band__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 17px;
    background: var(--v2-stage-glass);
    border: 1px solid var(--v2-stage-glass-brd);
    color: var(--v2-stage-link);
}

.v2-band__text {
    flex: 1;
    min-width: 0;
}

.v2-band__title {
    font-family: var(--v2-display);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--v2-stage-ink);
    overflow-wrap: anywhere;
}

.v2-band__caption {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--v2-stage-ink-2);
}

.v2-band__count {
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 56px;
    padding-inline: 14px;
    border-radius: 18px;
    background: var(--v2-grad-pill);
    color: #04161B;
    font-family: var(--v2-display);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--v2-btn-shadow);
}

@media (max-width: 520px) {
    .v2-band__inner {
        gap: 14px;
        padding-block: 22px 24px;
    }

    .v2-band__icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 15px;
    }

    .v2-band__count {
        min-width: 48px;
        height: 48px;
        padding-inline: 12px;
        border-radius: 15px;
        font-size: 20px;
    }
}

/*
    Tasarımı henüz gelmemiş ortak ekranlar (Hesabım, oturumlu Yetkisiz) işletme rolünde v2
    kabuğunda eski işaretlemeyle açılıyor; şeridi eski .hero kabının içinde çağırıyorlar.
    Kabın zemini ve dolgusu, başlığın da eski boyu (.hero h1) şeridi bozmasın.
*/
.v2-app .hero {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}

.v2-app .hero .v2-band__title {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.v2-app .hero .v2-band__caption {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: normal;
    color: var(--v2-stage-ink-2);
}

/* ── İçerik kolonu ────────────────────────────────────────────────────────── */

/*
    Kolon hero'nun metniyle aynı sol kenarda. Yoğunluğu düşük ekranlar daha dar okunuyor
    (800–980); panel, kasa ve performans tam genişlik.
*/
.v2-page {
    width: min(100% - 32px, 1320px);
    margin-inline: auto;
    padding-block: 24px 64px;
}

.v2-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.v2-flow--800 { max-width: 800px; }
.v2-flow--880 { max-width: 880px; }
.v2-flow--920 { max-width: 920px; }
.v2-flow--980 { max-width: 980px; }

/*
    Bloklar sırayla yerine oturuyor. Kolonun kendisi değil çocukları hareket ediyor: taşınan
    bir atanın içindeki sabit konumlu bildirim yığını hareket bitene kadar ekrana değil kolona
    göre konumlanıyor ve yerine atlıyordu.
*/
.v2-flow > :not(.toast-stack) { animation: v2-rise 520ms var(--v2-ease) both; }
.v2-flow > :nth-child(2) { animation-delay: 60ms; }
.v2-flow > :nth-child(3) { animation-delay: 120ms; }
.v2-flow > :nth-child(n+4) { animation-delay: 180ms; }

/* ══════════════════════════════════════════════════════════ İşletme: yüzeyler */

/* Kart: üst kenarda iki yana sönen ince ışık çizgisi; üzerine gelince gölge derinleşiyor. */
.v2-box {
    position: relative;
    min-width: 0;
    border-radius: 22px;
    padding: 22px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow);
    transition: box-shadow var(--v2-dur-slow) var(--v2-ease-ui), border-color var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-box::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 22px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--v2-acc), transparent);
    opacity: 0.3;
    pointer-events: none;
    transition: opacity var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-box:hover { box-shadow: var(--v2-shadow-mid); }

.v2-box:hover::before { opacity: 0.65; }

.v2-box__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.v2-box__head:last-child { margin-bottom: 0; }

.v2-box__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 13px;
    background: linear-gradient(150deg, rgba(46, 230, 240, 0.2), var(--v2-acc-soft));
    color: var(--v2-acc-txt);
}

.v2-box__title {
    font-family: var(--v2-display);
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--v2-ink);
}

/* Başlıktaki düğme ya da çip sağa yaslanıyor. */
.v2-push { margin-inline-start: auto; }

/* Telefonda başlıktaki eylem düğmesi ("Sıraya araç ekle") kendi satırında, tam genişlikte: başparmakla basılıyor. */
@media (max-width: 520px) {
    .v2-box__head > .v2-btn.v2-push {
        flex-basis: 100%;
        margin-inline-start: 0;
    }
}

/* İç panel: kartın içindeki tekil kayıt. */
.v2-panel {
    position: relative;
    min-width: 0;
    border-radius: 18px;
    padding: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    transition: border-color var(--v2-dur-slow) var(--v2-ease-ui), box-shadow var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-panel:hover {
    border-color: var(--v2-acc-mid);
    box-shadow: var(--v2-shadow-mid);
}

.v2-desc {
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--v2-ink-3);
}

.v2-help {
    font-size: 12px;
    line-height: 1.55;
    color: var(--v2-ink-3);
}

.v2-micro {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

.v2-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.v2-row--between { justify-content: space-between; }

.v2-row--end { justify-content: flex-end; }

/* Kart içindeki blokların arası (açıklamanın altındaki liste, formun altındaki ipucu). */
.v2-mt-sm { margin-top: 12px; }
.v2-mt { margin-top: 14px; }
.v2-mt-lg { margin-top: 18px; }

/* Kartın içinde alt alta kayıtlar. */
.v2-list {
    display: grid;
    gap: 11px;
}

/* Kayıt satırı: kimlik solda, tutar ve eylem sağda; dar ekranda alta iniyor. */
.v2-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.v2-line__main {
    flex: 1;
    min-width: 160px;
}

.v2-line__sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

/* Küçük ikon kutusu: kayıt satırının başında (filo talebinde kamyon, çok araçlı kişide kişi). */
.v2-box__icon--sm {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
}

/* Çip satırı. */
.v2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/*
    Filtre kartı (Kasa, Performans, Randevular'ın şube seçimi): alanlar yan yana, düğme alanların
    alt kenarında; dar ekranda alt alta.
*/
.v2-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.v2-filter > .v2-field { flex: 1 1 190px; }

.v2-filter > .v2-btn { flex: 0 0 auto; }

/* Düğme alanla aynı boyda: alt kenarları hizalı dursun. */
.v2-app .v2-filter > .v2-btn { height: 46px; }

/* İki kolonlu kart ızgarası (kasa dökümleri); dar ekranda alt alta. */
.v2-grid-2 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    align-items: start;
}

/* Kartın içinde çizgiyle ayrılan ikinci bölüm (gün sonu sayım formu). */
.v2-part {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--v2-field-brd);
}

/* Birden çok karttan oluşan form: kartlar kolonun aralığıyla. */
.v2-form-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* ── Çip ve rozet ─────────────────────────────────────────────────────────── */

.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink-2);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.v2-chip--acc {
    background: var(--v2-acc-soft);
    border-color: transparent;
    color: var(--v2-acc-txt);
}

.v2-chip--amber {
    background: rgba(255, 181, 69, 0.15);
    border-color: transparent;
    color: var(--v2-warn-txt);
}

/* Bağlantı olan çip ("Ayrıntı"). */
a.v2-chip {
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

a.v2-chip:hover { border-color: var(--v2-acc-mid); }

/* Durum rozeti. Mavi yalnızca işlemde, mor teslime hazır, yeşil tamamlanan. */
.v2-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink-2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.v2-tag--wait {
    background: var(--v2-warn-bg);
    border-color: var(--v2-warn-brd);
    color: var(--v2-warn-txt);
}

.v2-tag--progress {
    background: var(--v2-blue-fill);
    border-color: transparent;
    color: #fff;
}

.v2-tag--ready {
    background: var(--v2-purple);
    border-color: transparent;
    color: #fff;
}

.v2-tag--ok {
    background: var(--v2-ok-bg);
    border-color: var(--v2-ok-brd);
    color: var(--v2-ok-txt);
}

.v2-tag--bad {
    background: var(--v2-bad-bg);
    border-color: var(--v2-bad-brd);
    color: var(--v2-bad-txt);
}

.v2-tag--muted { color: var(--v2-ink-3); }

/* ── Ölçü kartı ───────────────────────────────────────────────────────────── */

.v2-metrics {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.v2-metric {
    position: relative;
    min-width: 0;
    container-type: inline-size;
    border-radius: 18px;
    padding: 17px 18px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow);
    transition: box-shadow var(--v2-dur-slow) var(--v2-ease-ui), border-color var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-metric:hover {
    box-shadow: var(--v2-shadow-mid);
    border-color: var(--v2-acc-mid);
}

.v2-metric__value {
    display: block;
    font-family: var(--v2-display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
    Tutar kartın genişliğine göre küçülüyor (kap sorgusu birimi): telefonda iki kolonlu
    ızgarada "12.450,00 ₺" 27 pikselde kartın dışına taşıyordu. Adet değerleri tam boyda kalıyor.
*/
.v2-metric__value--fit { font-size: clamp(16px, 12.5cqi, 27px); }

.v2-metric__value--blue { color: var(--v2-blue); }

.v2-metric__value--ok { color: var(--v2-ok-txt); }

.v2-metric__value--bad { color: var(--v2-bad-txt); }

/* Sayı değil ad (araç tipi): daha küçük. */
.v2-metric__value--text {
    font-size: 20px;
    letter-spacing: -0.02em;
    white-space: normal;
}

/* Açık temada koyu, koyu temada açık uçlu gradyan (--v2-grad-num; büyük yazıda en az 3:1). */
.v2-metric__value--acc {
    background: var(--v2-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.v2-metric__label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--v2-ink-3);
}

/* ── Tutar, plaka, sıra numarası ──────────────────────────────────────────── */

.v2-money {
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.v2-money--in { color: var(--v2-ok-txt); }

.v2-money--out { color: var(--v2-bad-txt); }

.v2-plate {
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-ink);
    overflow-wrap: anywhere;
}

/* Detay ve arama sonucunda aracın kimliği daha büyük. */
.v2-plate--lg { font-size: 20px; }

.v2-money--lg { font-size: 19px; }

/* Geçmiş kaydının başlığı: tarih. */
.v2-when {
    font-family: var(--v2-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-qno {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--v2-grad-pill);
    color: #04161B;
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 14px -8px rgba(11, 110, 121, 0.55);
}

/* ══════════════════════════════════════════════════════════ İşletme: düğmeler ve alanlar */

/*
    Kimlik ekranlarının düğmesi ve alanı (.v2-btn, .v2-field) aynı sınıflarla, işletme
    yoğunluğunda: düğme 42 (küçük 36, geniş 50), alan 46 (küçük 36). Küçük alan paketteki
    38 değil 36: eylem satırında yanındaki küçük düğmeyle aynı hizada dursun.
*/
.v2-app .v2-btn {
    height: 42px;
    gap: 8px;
    padding: 0 17px;
    border-radius: 13px;
    font-size: 13.5px;
    letter-spacing: 0;
}

.v2-app .v2-btn--sm {
    height: 36px;
    gap: 7px;
    padding-inline: 14px;
    border-radius: 11px;
    font-family: var(--v2-display);
    font-size: 12.5px;
}

.v2-app .v2-btn--xs {
    height: 30px;
    gap: 6px;
    padding-inline: 11px;
    border-radius: 9px;
    font-size: 11.5px;
}

.v2-app .v2-btn--lg {
    height: 52px;
    padding-inline: 24px;
    border-radius: 15px;
    font-size: 15px;
}

.v2-app .v2-btn--block {
    height: 50px;
    border-radius: 15px;
    font-size: 14.5px;
}

/* Sessiz (ghost) ve tehlike düğmeleri gövde yazı tipinde. */
.v2-app :is(.v2-btn--ghost, .v2-btn--danger) { font-family: var(--v2-body); }

/* Tehlike: kırmızı kenarlıklı sessiz düğme (Sıradan Çıkar, Sil, Reddet). Yerinden oynamıyor. */
.v2-btn--danger {
    border: 1px solid var(--v2-bad-brd);
    background: transparent;
    color: var(--v2-bad-txt);
    box-shadow: none;
}

.v2-btn--danger::after { background: var(--v2-bad-bg); }

.v2-btn--danger:hover,
.v2-btn--danger:active {
    transform: none;
    box-shadow: none;
}

.v2-btn--danger:active::after { opacity: 1; }

.v2-btn--danger.is-pending::before {
    border-color: var(--v2-bad-txt);
    border-top-color: transparent;
}

.v2-app .v2-btn--sm.is-pending::before,
.v2-app .v2-btn--xs.is-pending::before {
    width: 15px;
    height: 15px;
}

.v2-app .v2-field__label {
    margin: 0 0 7px 2px;
    font-size: 11px;
}

.v2-app .v2-field__input {
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 13px;
}

.v2-app .v2-field__input--sm {
    height: 36px;
    padding-inline: 12px;
    font-size: 13px;
    border-radius: 11px;
}

.v2-app .v2-field__line {
    left: 12px;
    right: 12px;
}

/* Açılır liste: sistem oku yerine temaya uyan ok; metin okun altına girmiyor. */
.v2-app select.v2-field__input {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 38px;
    background-image: var(--v2-select-arrow);
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 14px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.v2-app select.v2-field__input--sm {
    padding-inline-end: 30px;
    background-position: right 10px center;
    background-size: 13px;
}

.v2-app textarea.v2-field__input {
    height: auto;
    min-height: 92px;
    padding-block: 12px;
    line-height: 1.5;
    resize: vertical;
}

/* Form ızgarası: alanlar yan yana, dar ekranda alt alta. */
.v2-fields {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    align-items: start;
}

/*
    Tutar + açıklama (gün sonu sayımı, bakiye iadesi). Paket açıklamayı tam satıra yayıyordu; tam
    genişlikteki kasa ekranında tutar alanı altı kolonun birine, 200 piksele sıkışıyordu.
*/
@media (min-width: 640px) {
    .v2-fields--pair { grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); }
}

/* Satır içi form (sıra kartındaki başlat, taşı, tahsilat): liste + düğme yan yana. */
.v2-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/*
    Liste genişliği flex-basis ile değil width ile: Chrome satır içi formun içerik genişliğini
    ölçerken esneyebilen öğeyi kendi içeriği (min-width'e kadar) kadar sayıyor. flex-basis'le
    verilince form 130 piksellik liste kadar ölçülüyor, düğme yer varken alt satıra iniyordu.
*/
.v2-inline .v2-field__input {
    width: 210px;
    flex: 0 1 auto;
    min-width: 130px;
}

/* Randevu reddi: sebep alanı satırda kalan yeri alıyor, çok da uzamıyor. */
.v2-reject { flex: 1 1 300px; }

.v2-reject .v2-field__input {
    flex: 1 1 160px;
    max-width: 280px;
}

/*
    Onay kutusu ve radyo: gerçek input, görünüşü CSS'le (betiksiz ve klavyeyle çalışıyor).
    Boş kutunun kenarı --v2-ink-4: paketteki alan kenarı (--v2-field-brd) beyazda 1,2:1'de
    kalıyor, kutu seçim kutusunun içinde kayboluyordu.
*/
.v2-check {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 1px 0 0;
    border-radius: 6px;
    border: 1.5px solid var(--v2-ink-4);
    background: var(--v2-card-solid);
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-check[type="radio"] { border-radius: 50%; }

.v2-check:hover { border-color: var(--v2-acc-mid); }

.v2-check:checked {
    border-color: transparent;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304161B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat,
        var(--v2-grad-pill);
}

.v2-check[type="radio"]:checked {
    background: radial-gradient(circle, #04161B 0 3.5px, transparent 4px), var(--v2-grad-pill);
}

.v2-check:focus-visible {
    outline: 2px solid var(--v2-focus);
    outline-offset: 2px;
}

.v2-check:disabled { cursor: default; }

/* Seçim kutusu: bütün satır etiket, tıklanınca içindeki kutu işaretleniyor. */
.v2-picks {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

.v2-pick {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    border-radius: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-pick:hover { border-color: var(--v2-acc-mid); }

.v2-pick:has(.v2-check:checked) {
    border-color: var(--v2-acc-mid);
    background-color: var(--v2-acc-soft);
}

.v2-pick__body {
    flex: 1;
    min-width: 0;
}

.v2-pick__name {
    display: block;
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-pick__meta {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

/* Şerit işletme yoğunluğunda: aralığı kolon veriyor, dolgusu daha sıkı. */
.v2-app .v2-strip {
    margin-top: 0;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 600;
}

.v2-app .v2-strip > svg {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
}

/* ══════════════════════════════════════════════════════════ İşletme: sıra */

.v2-cols {
    display: grid;
    gap: 16px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .v2-cols { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); }

    .v2-cols--single { grid-template-columns: minmax(0, 1fr); }
}

.v2-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* Sayılar (kapasite) ve takılı yer uyarısı. */
.v2-capacity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.v2-capacity + .v2-strip { margin-top: 12px; }

.v2-zones {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.v2-zone__head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 8px;
}

.v2-zone__count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

.v2-bays {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.v2-bay {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 13px;
    border-radius: 13px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    transition: border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-bay:hover { border-color: var(--v2-acc-mid); }

.v2-bay__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--v2-ok);
}

/* Nabız yalnızca o an süren işte: dolu yer ve yapılan adım. */
.v2-bay__dot--busy {
    background: var(--v2-blue);
    animation: v2-dot-live 2.4s var(--v2-ease-soft) infinite;
}

.v2-bay__dot--off { background: var(--v2-ink-4); }

/* Dolu görünen ama üstünde iş olmayan yer. */
.v2-bay__dot--stuck { background: var(--v2-amber); }

.v2-bay__text {
    flex: 1;
    min-width: 0;
}

.v2-bay__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-bay__state {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--v2-ink-3);
}

@keyframes v2-dot-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(44, 126, 248, 0.4); }
    50% { box-shadow: 0 0 0 5px rgba(44, 126, 248, 0); }
}

.v2-queue {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}

.v2-queue__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 13px;
}

.v2-queue__ident {
    flex: 1;
    min-width: 150px;
}

.v2-queue__stage {
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-acc-txt);
}

.v2-queue__where {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-queue__where svg { flex: 0 0 12px; }

/* Yerinden çıkarılıp bekletilen araç: kehribar, gözden kaçmasın. */
.v2-queue__where--hold {
    font-weight: 600;
    color: var(--v2-warn-txt);
}

.v2-queue__sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-queue__meta {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.v2-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.v2-queue__hint { margin-top: 10px; }

/* İşlem adımları paneli. */
.v2-steps-box {
    margin-top: 14px;
    padding: 13px;
    border-radius: 14px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

.v2-steps-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.v2-steps-box__count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

.v2-steplist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-stepline {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--v2-field-brd);
    font-size: 13px;
    color: var(--v2-ink-2);
}

.v2-stepline:last-child { border-bottom: 0; }

.v2-stepline__state {
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink-3);
    white-space: nowrap;
}

.v2-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--v2-ink-4);
}

.v2-dot--done { background: var(--v2-ok); }

.v2-dot--live {
    background: var(--v2-blue);
    animation: v2-dot-live 2.4s var(--v2-ease-soft) infinite;
}

/*
    İlerleme çubuğu: soldan doluyor. Genişlik sınıfla, onluk kademelerde (satır içi stil
    CSP'de kapalı).
*/
.v2-track {
    height: 5px;
    margin-top: 11px;
    border-radius: 999px;
    background: var(--v2-field-brd);
    overflow: hidden;
}

.v2-track__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep));
    transform-origin: left center;
    animation: v2-grow 620ms var(--v2-ease) 120ms both;
}

@keyframes v2-grow {
    from { scale: 0 1; }
    to { scale: 1 1; }
}

/*
    Tam oranlı çubuk (personel performansı): <progress> değeri value/max ile taşıyor, satır içi
    stil gerekmiyor. Görünüşü ilerleme çubuğuyla aynı.
*/
.v2-progress {
    display: block;
    width: 100%;
    height: 5px;
    margin-top: 8px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--v2-field-brd);
    color: var(--v2-acc-mid);
}

.v2-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--v2-field-brd);
}

.v2-progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep));
}

.v2-progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep));
}

/* Kişi adı (tabloda 14, kartta 15 piksel). */
.v2-person {
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-person--lg { font-size: 15px; }

/* Baş harfler: sıra numarasıyla aynı daire, yazısı biraz küçük. */
.v2-avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--v2-grad-pill);
    color: #04161B;
    font-family: var(--v2-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Kayıt içindeki ince ayar satırı (personelin "Girişte kod" satırı, şubedeki yer satırı). */
.v2-subbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    padding: 11px 13px;
    border-radius: 13px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

/* Atama satırı: iki liste ve Uygula yan yana, Sil ayrı formda. */
.v2-assign {
    flex: 1 1 360px;
}

.v2-assign .v2-field__input {
    flex: 1 1 140px;
    min-width: 130px;
}

.v2-w-10 { width: 10%; }
.v2-w-20 { width: 20%; }
.v2-w-30 { width: 30%; }
.v2-w-40 { width: 40%; }
.v2-w-50 { width: 50%; }
.v2-w-60 { width: 60%; }
.v2-w-70 { width: 70%; }
.v2-w-80 { width: 80%; }
.v2-w-90 { width: 90%; }
.v2-w-100 { width: 100%; }

/* ── Yan kolon: kasa özeti ve kısayollar ──────────────────────────────────── */

.v2-sums {
    display: grid;
    gap: 11px;
    padding: 15px;
    border-radius: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-sums__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.v2-sums__label {
    font-size: 13px;
    color: var(--v2-ink-3);
}

/* Adet çipi + tutar. */
.v2-sums__value {
    display: flex;
    align-items: center;
    gap: 9px;
}

.v2-sums__empty {
    font-size: 13px;
    color: var(--v2-ink-3);
}

.v2-records {
    display: grid;
    gap: 10px;
}

/* Kasa kartı olmayan kullanıcıda kısayollar sıranın altında yan yana. */
.v2-records--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.v2-record {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px 15px;
    border-radius: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: inherit;
    text-align: start;
    transition: border-color var(--v2-dur-slow) var(--v2-ease-ui), background-color var(--v2-dur-slow) var(--v2-ease-ui), transform var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-record:hover {
    border-color: var(--v2-acc-mid);
    background-color: var(--v2-acc-soft);
    transform: translateY(-2px);
    color: inherit;
}

.v2-record__body {
    flex: 1;
    min-width: 0;
}

.v2-record__title {
    display: block;
    font-family: var(--v2-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-record__sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

.v2-record__go {
    display: grid;
    flex: 0 0 auto;
    color: var(--v2-ink-3);
    transition: transform var(--v2-dur-slow) var(--v2-ease-ui), color var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-record:hover .v2-record__go {
    transform: translateX(3px);
    color: var(--v2-acc-txt);
}

/* ── Yıkama detayı ────────────────────────────────────────────────────────── */

/*
    Zaman çizgisi: satırlar ince çizgiyle ayrılıyor. Paket aralıkları kabın zemin rengiyle
    çiziyordu; koyu temada satırların yarı saydam zemini o rengi de gösterip açık kalıyordu.
*/
.v2-timeline {
    display: grid;
    margin-top: 16px;
    border-radius: 16px;
    overflow: hidden;
}

.v2-timeline__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    background: var(--v2-sunken);
}

.v2-timeline__row + .v2-timeline__row { border-top: 1px solid var(--v2-field-brd); }

.v2-timeline__label {
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

.v2-timeline__value {
    font-family: var(--v2-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* Detaydaki adım satırı biraz daha ferah; adın kendisi birincil tonda. */
.v2-stepline--lg { padding-block: 11px; }

.v2-stepline--lg > :nth-child(2) {
    font-size: 13.5px;
    color: var(--v2-ink);
}

.v2-stepline--lg .v2-stepline__state { white-space: normal; text-align: end; }

/* Fotoğraflar: öncesi ve sonrası ayrı grupta (karşılaştırma), kareler sabit yükseklikte. */
.v2-photos {
    display: grid;
    gap: 16px;
}

.v2-photos__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.v2-photos__grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}

.v2-photo {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: inherit;
    transition: border-color var(--v2-dur-slow) var(--v2-ease-ui), transform var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-photo:hover {
    border-color: var(--v2-acc-mid);
    transform: translateY(-2px);
    color: inherit;
}

.v2-photo img {
    display: block;
    width: 100%;
    height: 108px;
    object-fit: cover;
    background: var(--v2-field);
}

.v2-photo__time {
    display: block;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink-2);
    font-variant-numeric: tabular-nums;
}

/* Dosya alanı: sistemin düğmesi v2 diliyle. */
.v2-app input[type="file"].v2-field__input {
    height: auto;
    min-height: 46px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--v2-ink-3);
}

.v2-app input[type="file"].v2-field__input::file-selector-button {
    margin-inline-end: 10px;
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-card-solid);
    color: var(--v2-acc-txt);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-app input[type="file"].v2-field__input::file-selector-button:hover { border-color: var(--v2-acc-mid); }

/* ── Şubeler ──────────────────────────────────────────────────────────────── */

/*
    "Alanlar ve yerler" düğmesindeki artı: panel açıkken 135 derece dönmüş (×) ve dolu. Panel
    sunucuda açılıyor (?acik=): yalnızca açık şubenin ayrıntısı okunuyor, o yüzden paketteki
    istemci katlaması değil bağlantı; açılınca panel yükselerek geliyor.
*/
.v2-caret {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
}

.v2-caret.is-open {
    rotate: 135deg;
    background: var(--v2-grad-pill);
    color: #04161B;
}

.v2-fold {
    margin-top: 14px;
    padding: 15px;
    border-radius: 16px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
    animation: v2-rise 420ms var(--v2-ease) both;
}

.v2-zone {
    padding: 14px;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-zone__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.v2-zone__name {
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-bayrows {
    display: grid;
    gap: 8px;
}

/* Yer satırı: nokta ve ad · durum rozeti · durum listesi · Uygula. Satırın kendisi form. */
.v2-bayrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

.v2-bayrow__name {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-bayrow .v2-field__input {
    width: auto;
    min-width: 118px;
}

/*
    Telefonda iç içe dolgular (kart › panel › alan paneli › alan › yer satırı) yer satırını 200 piksele
    indiriyor, durum listesi ve Uygula ayrı satırlara düşüyordu. Dar ekranda her kat biraz daha sıkı.
*/
@media (max-width: 520px) {
    .v2-box { padding: 16px; }

    .v2-box::before { inset-inline: 16px; }

    .v2-panel { padding: 13px; }

    .v2-fold { padding: 12px; }

    .v2-zone { padding: 11px; }

    .v2-bayrow { padding: 9px 10px; }
}

/* Seyrek işler (alanı düzenle, yerin adı ve alanı) kapalı duran bir bölümde. */
.v2-more { margin-top: 12px; }

.v2-more > summary {
    width: fit-content;
    list-style: none;
    cursor: pointer;
}

.v2-more > summary::-webkit-details-marker { display: none; }

.v2-more__panel {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

.v2-more__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.v2-more__row > .v2-inline { flex: 1 1 320px; }

/* Ekleme satırları: ad alanı yeri dolduruyor, liste ölçülü. */
.v2-addrow input.v2-field__input {
    flex: 1 1 170px;
    min-width: 150px;
}

.v2-addrow select.v2-field__input {
    flex: 0 1 190px;
    min-width: 150px;
}

.v2-more__row input.v2-field__input { flex: 1 1 160px; }

/* ── Ayarlar ──────────────────────────────────────────────────────────────── */

/* Oran satırı: ad · yüzde alanı (içinde % işareti) · örnek tutar çipi (ayarlar.js güncelliyor). */
.v2-rates {
    display: grid;
    gap: 10px;
}

.v2-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    transition: border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-rate:hover { border-color: var(--v2-acc-mid); }

.v2-rate__name {
    flex: 1;
    min-width: 110px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-rate__input {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.v2-app .v2-rate__input .v2-field__input {
    width: 96px;
    padding-inline-end: 28px;
    text-align: end;
    -moz-appearance: textfield;
}

/* Sayı alanının okları % işaretinin üstüne biniyordu; değer klavyeyle yazılıyor. */
.v2-rate__input .v2-field__input::-webkit-inner-spin-button,
.v2-rate__input .v2-field__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.v2-rate__unit {
    position: absolute;
    right: 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    pointer-events: none;
}

.v2-rate__example {
    min-width: 104px;
    justify-content: center;
}

/* Tek ayarlı satır (güvenlik): açıklama solda, eylem sağda. */
.v2-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.v2-setting__body {
    flex: 1;
    min-width: 200px;
}

.v2-setting__title {
    display: block;
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-setting__text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--v2-ink-3);
}

/* Sabit üst çubuğun altında kalmasın: bağlantı (#guvenlik, #hizmet-formu) kartı çubuğun altına getiriyor. */
.v2-app section[id] { scroll-margin-top: 124px; }

/* ── Yeni kayıt ───────────────────────────────────────────────────────────── */

/*
    Paket seçiliyken hizmetler sunucuda yok sayılıyor: kart soluyor ama dokunulabilir
    kalıyor — bir hizmet işaretlemek paketi bırakıyor (kayit.js). Mobildeki Yeni Kayıt'la aynı.
*/
.v2-kayit__hizmetler .v2-picks { transition: opacity var(--v2-dur-slow) var(--v2-ease-ui); }

.v2-kayit:has(input[name="PaketId"]:checked:not([value=""])) .v2-kayit__hizmetler .v2-picks { opacity: 0.55; }

/* Alt şerit: liste toplamı, seçimin özeti ve gönder düğmesi. */
.v2-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    border-radius: 20px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow-mid);
}

.v2-total__main {
    flex: 1;
    min-width: 150px;
}

.v2-total__value {
    display: block;
    margin-top: 4px;
    font-family: var(--v2-display);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════ İşletme: gezinme ve listeler */

/* Sekmeler: şube seçimi, randevu durumu. */
.v2-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-self: start;
    gap: 3px;
    max-width: 100%;
    padding: 4px;
    border-radius: 22px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-tab {
    margin: 0;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--v2-ink-3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-tab:hover {
    color: var(--v2-ink);
    background-color: var(--v2-acc-soft);
}

.v2-tab.is-active {
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: 0 6px 14px -8px rgba(11, 110, 121, 0.5);
}

/* Kırıntı: "← Panele dön". */
.v2-crumb {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-3);
    transition: color var(--v2-dur) var(--v2-ease-ui), transform var(--v2-dur) var(--v2-ease-ui);
}

.v2-crumb:hover {
    color: var(--v2-acc-txt);
    transform: translateX(-2px);
}

/*
    Tablo: dar ekranda kendi çerçevesinde yatay kayıyor, sayfayı taşırmıyor. position: relative
    çerçeveyi içindeki mutlak konumlu öğelerin (tablo başlığındaki ekran okuyucu metni) kabı yapıyor;
    yoksa o öğe kaymayan karta göre konumlanıp kırpılmıyor ve telefonda sayfayı yana taşırıyordu.
*/
.v2-table-wrap {
    position: relative;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--v2-field-brd);
}

.v2-table {
    width: 100%;
    border-collapse: collapse;
}

.v2-table th {
    padding: 11px 13px;
    text-align: start;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--v2-ink-3);
    border-bottom: 1px solid var(--v2-field-brd);
    white-space: nowrap;
}

.v2-table td {
    padding: 13px;
    font-size: 13.5px;
    color: var(--v2-ink-2);
    border-bottom: 1px solid var(--v2-field-brd);
    vertical-align: middle;
}

.v2-table tbody tr:last-child td { border-bottom: 0; }

.v2-table tbody tr { transition: background-color var(--v2-dur) var(--v2-ease-ui); }

.v2-table tbody tr:hover { background-color: var(--v2-acc-soft); }

.v2-table .v2-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v2-table .v2-nowrap { white-space: nowrap; }

/* Açıklama kolonu dar ekranda tek kelimelik şeride inmesin: tablo çerçevesinde kaysın. */
.v2-table .v2-wide { min-width: 220px; }

.v2-table .v2-act {
    text-align: end;
    white-space: nowrap;
}

/* Tablodaki plaka: satırın kimliği. */
.v2-table strong {
    font-family: var(--v2-display);
    font-weight: 600;
    color: var(--v2-ink);
}

/* Yıkamadan doğan kasa satırı o yıkamanın detayına açılıyor. */
.v2-ledger {
    color: inherit;
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

.v2-ledger:hover { color: var(--v2-acc-txt); }

.v2-ledger__go {
    display: inline-block;
    margin-inline-start: 4px;
    color: var(--v2-acc-txt);
    transition: transform var(--v2-dur) var(--v2-ease-ui);
}

.v2-ledger:hover .v2-ledger__go { transform: translateX(2px); }

/* Sayfalama şeridi (_Sayfalama işaretlemesi ortak; v2 kabuğunda görünüşü buradan). */
.v2-app .pager {
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top-color: var(--v2-field-brd);
}

.v2-app .pager__step,
.v2-app .pager__page {
    min-width: 34px;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 11px;
    border-color: var(--v2-field-brd);
    color: var(--v2-ink-2);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-app .pager__step:hover,
.v2-app .pager__page:hover {
    border-color: var(--v2-acc-mid);
    color: var(--v2-acc-txt);
}

.v2-app .pager__page.is-active {
    border-color: transparent;
    background: var(--v2-grad-pill);
    color: #04161B;
}

.v2-app .pager__gap { color: var(--v2-ink-3); }

.v2-app .pager__count {
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

/* Boş durum. */
.v2-empty {
    display: grid;
    justify-items: center;
    text-align: center;
    padding: 40px 20px;
}

.v2-empty__halo {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--v2-acc-soft) 0%, rgba(46, 230, 240, 0.1) 55%, rgba(46, 230, 240, 0) 100%);
    color: var(--v2-acc-txt);
}

.v2-empty__title {
    font-family: var(--v2-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--v2-ink);
}

.v2-empty__text {
    max-width: 46ch;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--v2-ink-3);
}

.v2-empty .v2-btn { margin-top: 18px; }

/* ══════════════════════════════════════════════════════════ İşletme: bildirim, onay, canlı */

/* ui.js'in bildirimleri, onay penceresi ve ilerleme çubuğu app.css'te; burada v2 yüzeyleri. */
.v2-app .toast {
    padding: 13px 14px;
    border-radius: 16px;
    border-color: var(--v2-card-brd);
    background: var(--v2-card-solid);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-hi);
    font-size: 13px;
    line-height: 1.5;
}

.v2-app .toast--ok { border-color: var(--v2-ok-brd); }

.v2-app .toast--ok .toast__icon { color: var(--v2-ok-txt); }

.v2-app .toast--danger { border-color: var(--v2-bad-brd); }

.v2-app .toast--danger .toast__icon { color: var(--v2-bad-txt); }

.v2-app .toast__close {
    color: var(--v2-ink-3);
    transition: background-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-app .toast__close:hover {
    background: var(--v2-acc-soft);
    color: var(--v2-ink);
}

.v2-app .onay::backdrop {
    background: rgba(4, 22, 27, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.v2-app .onay__kutu {
    padding: 22px;
    border-radius: 22px;
    border-color: var(--v2-card-brd);
    background: var(--v2-card-solid);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-hi);
}

.v2-app .onay__baslik {
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.v2-app .onay__metin {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--v2-ink-3);
}

.v2-app .ilerleme > i {
    background: linear-gradient(90deg, var(--v2-acc), var(--v2-acc-deep));
    box-shadow: none;
}

/*
    Canlı yenileme (canli.js) değişen bölgeye canli-degisti ekliyor. app.css'in vurgusu zemin
    rengini boyuyordu; v2 kartının zemini düz renk olduğu için kart bir an saydamlaşıp geri
    atlıyordu. v2'de kartın kenarında sönen ince bir çizgi. Bölgenin içindeki tek seferlik
    açılışlar (ilerleme çubuğu) içerik her tazelendiğinde yeniden oynamıyor.
*/
.v2-app .canli-degisti { animation: none; }

.v2-app :is(.v2-box, .v2-panel).canli-degisti::after,
.v2-app .canli-degisti > :is(.v2-box, .v2-metric, .v2-panel)::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1.5px solid var(--v2-acc-mid);
    opacity: 0;
    pointer-events: none;
    animation: v2-canli 1400ms var(--v2-ease-ui) both;
}

@keyframes v2-canli {
    from { opacity: 1; }
    to { opacity: 0; }
}

.v2-app .canli-degisti .v2-track__bar { animation: none; }

/* ══════════════════════════════════════════════════════════ Kaydırma açılışı */

/*
    Betiksiz: kaydırma zaman çizelgesi. Yalnızca konum; desteklemeyen tarayıcıda ve yazdırmada
    bölüm olduğu yerde duruyor. translate kullanıldığı için kartın hover yükselişini ezmiyor.
*/
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .v2-reveal {
            animation: v2-reveal linear both;
            animation-timeline: view();
            animation-range: entry 4% cover 30%;
        }
    }
}

/* ══════════════════════════════════════════════════════════ Açılış gecikmeleri */

/*
    Kademeli giriş (logo 0 → kart 120 → başlık kelimeleri 60/150/240 → alanlar → düğme).
    Satır içi style olmadığı için gecikmeler sınıf; animation kısayolunu kullanan bileşen
    kurallarından SONRA durmalılar, yoksa kısayol gecikmeyi sıfırlıyor.
*/
.v2-delay-60 { animation-delay: 60ms; }
.v2-delay-70 { animation-delay: 70ms; }
.v2-delay-110 { animation-delay: 110ms; }
.v2-delay-120 { animation-delay: 120ms; }
.v2-delay-130 { animation-delay: 130ms; }
.v2-delay-150 { animation-delay: 150ms; }
.v2-delay-170 { animation-delay: 170ms; }
.v2-delay-180 { animation-delay: 180ms; }
.v2-delay-200 { animation-delay: 200ms; }
.v2-delay-210 { animation-delay: 210ms; }
.v2-delay-220 { animation-delay: 220ms; }
.v2-delay-240 { animation-delay: 240ms; }
.v2-delay-270 { animation-delay: 270ms; }
.v2-delay-300 { animation-delay: 300ms; }
.v2-delay-340 { animation-delay: 340ms; }
.v2-delay-400 { animation-delay: 400ms; }
.v2-delay-460 { animation-delay: 460ms; }
.v2-delay-520 { animation-delay: 520ms; }
.v2-delay-560 { animation-delay: 560ms; }

/* ══════════════════════════════════════════════════════════ Hareketi azalt · dokunmatik · yazdırma */

/*
    İşletim sisteminde animasyonları kapatan kullanıcıda (Windows'ta "Animasyon efektleri")
    HAREKET kapanıyor: sürüklenen ışıklar, açılış ve kaydırma hareketleri, üzerine gelince
    yükselme, çizgilerin soldan açılması, ikonun dönmesi. Renk, zemin, kenar, gölge ve saydamlık
    geçişleri KALIYOR — bunlar hareket değil.

    Eskiden bütün geçişler 1 ms'e iniyordu: bu kullanıcıda düğmenin rengi üzerine gelince yumuşak
    değişmek yerine bir anda atlıyordu. "Hover animasyonları sert" geri bildiriminin sebebi buydu
    (16 Eylül 2026; bu makinedeki tarayıcı da "hareketi azalt" bildiriyor).
*/
@media (prefers-reduced-motion: reduce) {
    .v2 *,
    .v2 *::before,
    .v2 *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
    }

    .v2-btn:hover,
    .v2-btn:active,
    .v2-tile:hover,
    .v2-offer:hover .v2-offer__chevron,
    .v2-photo:hover,
    .v2-record:hover,
    .v2-record:hover .v2-record__go,
    .v2-crumb:hover { transform: none; }

    .v2-faq__icon { transition-property: color; }

    /* Çizgiler soldan açılmak yerine yerinde beliriyor. */
    .v2-mark::after {
        clip-path: none;
        opacity: 0;
    }

    .v2-mark:hover::after { opacity: 0.5; }

    .v2-mark.is-marked::after { opacity: 0.9; }

    .v2-field__line,
    .v2-ulink::after {
        transform: none;
        opacity: 0;
        transition-property: opacity;
    }

    .v2-field:focus-within .v2-field__line,
    .v2-ulink:hover::after { opacity: 1; }
}

/*
    Dokunmatik ekranda :hover dokunuştan sonra takılı kalıyor: basılan düğme ve kart, başka bir yere
    dokunulana kadar yükselmiş duruyordu. Yükselme yalnızca gerçek imleçte.
*/
@media (hover: none) {
    .v2-btn:hover,
    .v2-tile:hover,
    .v2-offer:hover .v2-offer__chevron,
    .v2-photo:hover,
    .v2-record:hover,
    .v2-record:hover .v2-record__go,
    .v2-crumb:hover { transform: none; }
}

/*
    Yazdırma zemini atıyor: koyu sahnenin beyaz yazısı beyaz kâğıtta, gradyanla boyanan yazı
    (background-clip: text) hiç görünmüyordu. Renkler olduğu gibi basılıyor; hareket yok.
*/
@media print {
    .v2 *,
    .v2 *::before,
    .v2 *::after {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        animation: none !important;
    }

    .v2-nav,
    .v2-appbar { position: static; }

    .v2-kimlik__tema,
    .v2-nav .tema,
    .v2-appbar .tema,
    .v2-appbar__quit,
    .v2-acts,
    .toast-stack { display: none; }
}