/*
    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;

    /*
        Puanlama (teslim paketi design_handoff_ratings). Yıldız kehribar: marka turkuazıyla yarışmasın.
        Dolu yıldız tokens.css'teki --status-pending; boş, soluk (süresi dolmuş) ve kehribar kart üstündeki
        yer tutucu yıldız mobilin tonları. Dağılım çubuğu ve "Puan ver" düğmesi kehribar dolgu.
    */
    --v2-star: var(--status-pending, #DE9A12);
    --v2-star-off: #D3DEE3;
    --v2-star-muted: #C8A65E;
    --v2-star-soft: #E3D4B4;
    --v2-amber-fill: linear-gradient(90deg, var(--v2-amber), var(--v2-star));
    --v2-amber-btn: linear-gradient(135deg, var(--v2-amber), var(--v2-star));
    /* Kehribar dolgunun üstündeki yazı koyu mürekkep: beyaz #DE9A12'de 2,4:1 kalıyordu; bu ton en az 6:1. */
    --v2-amber-ink: #3A2606;
    --v2-amber-shadow: 0 8px 18px -10px rgba(222, 154, 18, 0.6);
    --v2-amber-shadow-hi: 0 14px 26px -12px rgba(222, 154, 18, 0.62);
    /* Düşük puanlı, cevapsız yorumun kartı (işletme sahibinin ekranı): kırmızıya çalan gölge. */
    --v2-bad-shadow: 0 18px 36px -22px rgba(166, 33, 33, 0.22);

    /*
        Çalışma saatleri (teslim paketi design_handoff_calisma_saatleri). İç yüzey (takvim sütunu, ay takvimi, bayram bloğu),
        satır ayırıcı, kapalı günün taraması, takvimin saat çizgisi, açık saat seçiminin tonu, kısmen kapalı günün alt yarısı,
        açık tatil gününün satırı, "Kapalı" kararının kırmızı dolgusu (beyaz yazı 6,9:1), açılır menü ve kaydet şeridi.
    */
    --v2-soft: #F7FBFC;
    --v2-line-soft: #E6EEF1;
    --v2-hatch: repeating-linear-gradient(135deg, #F2F7F8 0 7px, #E6EEF1 7px 14px);
    --v2-hatch-sm: repeating-linear-gradient(135deg, #F2F7F8 0 5px, #E6EEF1 5px 10px);
    --v2-grid-line: #EEF4F6;
    --v2-acc-soft-2: #CFEEF1;
    --v2-acc-brd: rgba(7, 108, 119, 0.30);
    --v2-dash: #9FD3D9;
    --v2-warn-half: #FBEDD0;
    --v2-ok-row: #F4FBF8;
    --v2-bad-fill: #A62121;
    --v2-float-shadow: 0 18px 36px -16px rgba(4, 22, 27, 0.4);
    --v2-savebar: rgba(255, 255, 255, 0.92);

    /*
        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;

    /*
        Puanlama — koyu karşılıklar. Yıldız mobilin koyu tonu (#F2B33D). Kehribar dolgunun koyu karşılığı
        yoktu: #FFB545 koyu kartta parlıyordu (paketin istediği tek yeni ton); dolgu bir kademe sönük ve
        üstündeki yazı daha koyu (en koyu uçta 4,7:1).
    */
    --v2-star: #F2B33D;
    --v2-star-off: rgba(255, 255, 255, 0.2);
    --v2-star-muted: #7E6E4E;
    --v2-star-soft: #6B5628;
    --v2-amber-fill: linear-gradient(90deg, #D9A038, #B8801A);
    --v2-amber-btn: linear-gradient(135deg, #D9A038, #B8801A);
    --v2-amber-ink: #2E1D00;
    --v2-amber-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.6);
    --v2-amber-shadow-hi: 0 14px 26px -12px rgba(0, 0, 0, 0.7);
    --v2-bad-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.7);

    --v2-soft: rgba(255, 255, 255, 0.03);
    --v2-line-soft: rgba(255, 255, 255, 0.07);
    --v2-hatch: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 7px, rgba(255, 255, 255, 0.07) 7px 14px);
    --v2-hatch-sm: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 5px, rgba(255, 255, 255, 0.07) 5px 10px);
    --v2-grid-line: rgba(255, 255, 255, 0.05);
    --v2-acc-soft-2: rgba(46, 230, 240, 0.24);
    --v2-acc-brd: rgba(91, 233, 242, 0.34);
    --v2-dash: rgba(91, 233, 242, 0.42);
    --v2-warn-half: #3A2C0E;
    --v2-ok-row: rgba(75, 216, 155, 0.06);
    --v2-bad-fill: #B02A2A;
    --v2-float-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.7);
    --v2-savebar: rgba(13, 26, 32, 0.94);

    --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);
}

/* "Tanıtım sayfasına dön · Gizlilik Politikası" ayracı. */
.v2-kimlik__back span { margin: 0 6px; color: var(--v2-stage-ink-3); }

/*
    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 bir
    bağlantısı 1360 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).

    On bir bağlantı (Değerlendirmeler eklenince) olağan 13 piksellik hap boşluğuyla tek satırda
    yaklaşık 1400 piksel istiyor; çubuk ise 1320 pikselde sınırlı. Geniş ekranda son bağlantı
    ("Hesabım") menünün içinde tek başına ikinci satıra düşüyordu. Tek satırlık uzun menüde hap
    boşluğu 10 piksel: 1360 pikselde ~25, 1320'lik tavanda ~30 piksel pay kalıyor.
*/
@media (min-width: 1360px) {
    .v2-appbar--uzun .v2-appbar__menu a { padding-inline: 10px; }
}

@media (max-width: 1359px) {
    .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; }
}

/*
    İşletme sahibinin on dört bağlantısı markanın yanına hiçbir genişlikte sığmıyor: menü her zaman kendi
    satırında. 1320 piksellik tavanda sık haplarla tek satıra sığıyor, daha darda yatayda kayıyor.
*/
.v2-appbar--cok .v2-appbar__inner { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding-top: 12px; min-height: 0; }
.v2-appbar--cok .tema { margin-inline-start: auto; }
.v2-appbar--cok .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--cok .v2-appbar__menu::-webkit-scrollbar { display: none; }
.v2-appbar--cok .v2-appbar__menu a { padding-inline: 10px; }

/* 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;
    }
}

/* ── İç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; }

/* ══════════════════════════════════════════════════════════ Araç tipi farkı */

/*
    Hizmet listesinin sonundaki iki kalem (_AracFarkiSatiri): fark ve toplam. Satırlar liste
    fiyatıyla yazılıyor; fark kehribar noktayla ayrışıyor, toplam çizgiyle ayrılıp koyu yazılıyor.
    Tutar renkli değil (yeşil/kırmızı "iyi/kötü" okunurdu): işaret yeterli.
*/
.v2-dot--fark { background: var(--v2-amber); }

.v2-stepline--fark > :nth-child(2) {
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-stepline--fark .v2-stepline__state { color: var(--v2-ink); }

/* Toplamın üst çizgisi yeterli; farkın alt çizgisiyle iki kat olmasın. */
.v2-steplist .v2-stepline--fark { border-bottom: 0; }

.v2-steplist .v2-stepline--toplam {
    border-top: 1px solid var(--v2-field-brd);
    border-bottom: 0;
    font-family: var(--v2-display);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-stepline--toplam .v2-stepline__state {
    font-size: 13.5px;
    color: var(--v2-ink);
}

/* Alt şeritte toplamın altındaki satır: "Liste 400,00 ₺ · SUV farkı · %130 +120,00 ₺". */
.v2-total__detay {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

/* Sıra ve takip kartında toplamın altındaki not: "SUV farkı dâhil · +120,00 ₺". */
.v2-fark-not {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════ Müşteri ekranları */

/*
    Müşteri ve filo rolleri de v2 kabuğunda (18 Eylül 2026, teslim paketi "Müşteri ekranları").
    İşletmenin bileşenleriyle aynı; burada yalnızca müşteriye özgü üç şey var: canlı takip kartı,
    saat seçimi ve bir kademe büyük dokunma hedefi. Yeni renk, gölge, eğri ya da animasyon yok.
*/

/*
    Canlı takip kartı. Tanıtım sayfasının sıra kartı dili (.v2-qcard, .v2-qsteps, .v2-live)
    müşterinin kendi aracı için: sınıflar aynı, yalnızca --v2-pv-* jetonları önizlemenin cam
    çerçevesi yerine uygulamanın kart yüzeylerinden okunuyor.
*/
/*
    hidden özniteliği bileşenin display değerine yenilmesin: .v2-btn ve .v2-chip inline-flex
    olduğu için tarayıcının [hidden] kuralını eziyordu. Betiğin açtığı öğeler (konum düğmesi,
    mesafe rozeti, "tümünü seç") betik karar vermeden görünmemeli.
*/
.v2 [hidden] { display: none !important; }

.v2-follow {
    --v2-pv-panel: var(--v2-sunken);
    --v2-pv-panel-brd: var(--v2-field-brd);
    --v2-pv-card: var(--v2-sunken);
    --v2-pv-card-brd: var(--v2-field-brd);
    --v2-pv-steps: var(--v2-card-solid);
    --v2-pv-steps-brd: var(--v2-field-brd);
    --v2-pv-ink: var(--v2-ink);
    --v2-pv-ink-2: var(--v2-ink-2);
    --v2-pv-ink-3: var(--v2-ink-3);
    --v2-pv-stage: var(--v2-acc-txt);
    --v2-pv-ok: var(--v2-ok-txt);
    --v2-pv-live: #1F63CC;
    --v2-pv-live-bg: var(--v2-ok-bg);
    --v2-pv-live-brd: var(--v2-ok-brd);
    --v2-pv-track: var(--v2-field-brd);
    --v2-pv-dot: var(--v2-ink-4);
}

:root[data-theme="dark"] .v2-follow { --v2-pv-live: #8FC2FF; }

.v2-follow__list {
    display: grid;
    gap: 12px;
}

/* Künye kartının üst satırı: mikro başlık solda, CANLI rozeti sağda. */
.v2-follow__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.v2-follow .v2-qcard__row { align-items: flex-start; }

.v2-follow .v2-qcard__side { display: grid; justify-items: end; gap: 6px; }

.v2-follow .v2-qcard__price { margin-top: 0; }

/* Kartın altındaki "Detay ve fotoğraflar". */
.v2-follow .v2-qcard > .v2-row { margin-top: 12px; }

/* Çubuk onluk kademelerde sınıfla (satır içi stil CSP'de kapalı); oran biten / toplam. */
.v2-qsteps__bar > i.v2-w-0 { width: 0; }
.v2-qsteps__bar > i.v2-w-10 { width: 10%; }
.v2-qsteps__bar > i.v2-w-20 { width: 20%; }
.v2-qsteps__bar > i.v2-w-30 { width: 30%; }
.v2-qsteps__bar > i.v2-w-40 { width: 40%; }
.v2-qsteps__bar > i.v2-w-50 { width: 50%; }
.v2-qsteps__bar > i.v2-w-60 { width: 60%; }
.v2-qsteps__bar > i.v2-w-70 { width: 70%; }
.v2-qsteps__bar > i.v2-w-80 { width: 80%; }
.v2-qsteps__bar > i.v2-w-90 { width: 90%; }
.v2-qsteps__bar > i.v2-w-100 { width: 100%; }

/*
    Randevu saat seçimi. Gerçek radyo düğmesi, görünüşü CSS'le: betiksiz ve klavyeyle çalışıyor
    (.v2-pick ile aynı yol). Radyo hücrenin tamamını kaplıyor ama görünmüyor; odak halkası etikette.
*/
.v2-slots {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.v2-slot {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 8px;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink);
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui),
        color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

.v2-slot > input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

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

.v2-slot:has(input:checked) {
    border-color: transparent;
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: var(--v2-btn-shadow);
}

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

/* Bilgi şeridi (Araçlarım'daki filo notu): uyarı değil, kehribar yerine turkuaz. */
.v2-strip--info {
    background: var(--v2-acc-soft);
    border-color: var(--v2-card-brd);
    color: var(--v2-acc-txt);
}

/* Kartın içinde listeden ya da ekleme formundan sonra gelen not (.v2-app .v2-strip boşluğu sıfırlıyor). */
.v2-part + .v2-strip,
.v2-list + .v2-strip { margin-top: 16px; }

.v2-strip--info a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
    Yoğunluk: müşteri bir kademe büyük dokunma hedefi görüyor (düğme 46, geniş 54; alan 50). İşletme
    ekranı masada fareyle, müşteri ekranı çoğunlukla telefonda başparmakla kullanılıyor: hiçbir
    tıklanır öğe 44 pikselin altında değil. Paket küçük düğmeyi 40, menü hapını 11/15 çiziyordu —
    kendi koyduğu 44 kuralının altında kalıyordu (ölçüldü: menü 40, sekme 41, dönem çipi 29, sayfalama
    34, tema düğmesi 30, "Panele dön" 18); hepsi en az 44.
*/
.v2-app--musteri .v2-btn { height: 46px; }
.v2-app--musteri .v2-btn--sm { height: 44px; }
.v2-app--musteri .v2-btn--xs { height: 44px; }
.v2-app--musteri .v2-btn--lg { height: 54px; }
.v2-app--musteri .v2-btn--block { height: 54px; }

.v2-app--musteri .v2-field__input { height: 50px; }

.v2-app--musteri textarea.v2-field__input { height: auto; }

.v2-app--musteri .v2-filter > .v2-btn { height: 50px; }

.v2-app--musteri .v2-appbar__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 15px;
}

.v2-app--musteri .v2-appbar__quit { height: 44px; }

.v2-app--musteri .v2-appbar .tema__item {
    width: 40px;
    height: 44px;
}

.v2-app--musteri .v2-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 17px;
}

.v2-app--musteri a.v2-chip { min-height: 44px; padding-inline: 16px; }

.v2-app--musteri .pager__step,
.v2-app--musteri .pager__page {
    min-width: 44px;
    min-height: 44px;
}

.v2-app--musteri .v2-crumb { min-height: 44px; }

.v2-app--musteri .v2-plate { font-size: 18px; }

.v2-app--musteri .v2-plate--lg { font-size: 21px; }

/* ══════════════════════════════════════════════════════════ Puanlama ve yorumlar */

/*
    Teslim paketi design_handoff_ratings, web ekranları (3b–3g): şube değerlendirmeleri, puan verme,
    değerlendirmelerim, işletme sahibinin değerlendirmeleri ve üç ekrandaki yerinde eklemeler.

    Yıldız dolu çiziliyor (diğer ikonlar çizgi) ve kehribar (--v2-star). Satır içi stil yok: dağılım
    çubukları beşerlik genişlik sınıflarıyla. Paket puan özetine .v2-rate__* adlarını öneriyordu;
    .v2-rate Ayarlar'daki araç tipi oran satırının adı — özet .v2-score*, yıldız girişi .v2-starpick,
    girişli satır .v2-starrow (yan yana duran .v2-rate__input ile .v2-rate-input karışırdı).

    Tek satır kuralı (paket §1): listelerde ve kartlarda puan tek satır (bir yıldız + değer + adet;
    .v2-rating). Dağılım ve hizmet kırılımı yalnızca değerlendirme ekranlarında.

    Akış (26 Eylül 2026): işletme → hizmetler → personel → yorum. Paketin dört kriteri (temizlik, hız, personel,
    fiyat) ve ayrı işletme satırı kalktı; kriter ızgarası ve çubukları da. Personel puanı yalnızca işletme
    sahibinin ekranında (.v2-review__staff, personel kırılımı) ve müşterinin kendi değerlendirmesinde.
*/

/* ── Salt okunur yıldız satırı (_Yildiz) ──────────────────────────────────── */

.v2-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    vertical-align: middle;
}

.v2-stars > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.v2-stars--md > svg {
    width: 15px;
    height: 15px;
}

.v2-stars--lg { gap: 4px; }

.v2-stars--lg > svg {
    width: 22px;
    height: 22px;
}

.v2-stars__on { fill: var(--v2-star); }

.v2-stars__off { fill: var(--v2-star-off); }

/* Süresi dolmuş değerlendirme: opaklıkla değil doygunlukla soluyor (mobildeki geçmiş kart gibi). */
.v2-stars--muted .v2-stars__on { fill: var(--v2-star-muted); }

/* ── Listede tek satır puan (3d): yıldız · değer · adet ───────────────────── */

.v2-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

/* Şube satırında işletme adının hemen altında (3d). */
.v2-line__main > .v2-rating { margin-top: 7px; }

.v2-rating > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: var(--v2-star);
}

.v2-rating__value {
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
}

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

/* "Yeni · puanı yok": kesikli kenar — uydurma bir sıfır değil, henüz yayımlanmamış puan. */
.v2-chip--new {
    border-style: dashed;
    background: var(--v2-card);
    color: var(--v2-ink-3);
}

/* Düşük puan (1–2): hizmet çipi ve işletme sahibinin kartındaki puan hapı. */
.v2-chip--bad {
    background: var(--v2-bad-bg);
    border-color: var(--v2-bad-brd);
    color: var(--v2-bad-txt);
}

.v2-chip > svg { flex: 0 0 auto; }

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

/* ── Puan özeti (3b): büyük ortalama · dağılım ──────────────────────────── */

.v2-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 28px;
}

.v2-score__main {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    min-width: 128px;
    padding-inline-end: 28px;
    border-inline-end: 1px solid var(--v2-field-brd);
    text-align: center;
}

/* Büyük sayı: ölçü kartının gradyan metin reçetesi (--v2-grad-num; büyük yazıda en az 3:1). */
.v2-score__big {
    font-family: var(--v2-display);
    font-size: 41px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--v2-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.v2-score__main > .v2-stars { margin-top: 8px; }

.v2-score__count {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

.v2-score__bars {
    flex: 1 1 260px;
    display: grid;
    gap: 7px;
    min-width: 0;
}

.v2-score__row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.v2-score__star {
    flex: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

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

.v2-score__bar > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--v2-amber-fill);
    transform-origin: left center;
    animation: v2-grow 620ms var(--v2-ease) 120ms both;
}

.v2-score__num {
    flex: 0 0 30px;
    text-align: end;
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink-2);
    font-variant-numeric: tabular-nums;
}

/* 5'ten az değerlendirme: ortalama yerine neden yayımlanmadığı. */
.v2-score__note {
    flex: 1 1 260px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--v2-ink-3);
}

/* Dar ekranda büyük sayı dağılımın üstünde; ayırıcı çizgi yataya dönüyor. */
@media (max-width: 560px) {
    .v2-score__main {
        flex-basis: 100%;
        padding: 0 0 18px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--v2-field-brd);
    }
}

/* Puan kutusu ("Değerlendirmeniz" kartı): ad ve yıldızlar, ortalama ya da "Puanlanmadı". */
.v2-crit {
    min-width: 0;
    padding: 13px 14px;
    border-radius: 13px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

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

.v2-crit__value {
    display: block;
    margin-top: 6px;
    font-family: var(--v2-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
}

/* Kutunun içinde yıldız satırı ya da "4,3 ortalama · 3 hizmet" (Değerlendirmeniz kartı). */
.v2-crit > .v2-stars { margin-top: 8px; }

.v2-crit__inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    margin-top: 8px;
}

.v2-crit__inline > .v2-crit__value {
    margin-top: 0;
    font-size: 17px;
}

.v2-crit__none {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

/* Personel kutusunda kişinin adı ve kimin gördüğü ("Ahmet Y. · yalnızca işletme sahibi görür"). */
.v2-crit__sub {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-ink-3);
    overflow-wrap: anywhere;
}

/*
    Değerlendirmeniz kartının kutuları: işletme · hizmetler · (personel varsa) personel — iki ya da üç kutu.
    Eskiden .v2-tiles'tı: tanıtım sayfasının kart ızgarasıyla aynı ad, dosyada sonra geldiği için oradaki
    ızgarayı (--steps, --roles dâhil) üç eşit kolona ve 11 piksel aralığa eziyordu.
*/
.v2-crits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 11px;
}

/*
    Çubuk genişliği beşerlik kademede (Puan.Oran5): onluk .v2-w-* dağılım için kaba kalıyordu (94 / 128 =
    %73). Seçici çubuğun içiyle sınırlı; başka ekrandaki onluk sınıflara dokunmuyor.
*/
.v2-score__bar > i.v2-w-0 { width: 0; }
.v2-score__bar > i.v2-w-5 { width: 5%; }
.v2-score__bar > i.v2-w-10 { width: 10%; }
.v2-score__bar > i.v2-w-15 { width: 15%; }
.v2-score__bar > i.v2-w-20 { width: 20%; }
.v2-score__bar > i.v2-w-25 { width: 25%; }
.v2-score__bar > i.v2-w-30 { width: 30%; }
.v2-score__bar > i.v2-w-35 { width: 35%; }
.v2-score__bar > i.v2-w-40 { width: 40%; }
.v2-score__bar > i.v2-w-45 { width: 45%; }
.v2-score__bar > i.v2-w-50 { width: 50%; }
.v2-score__bar > i.v2-w-55 { width: 55%; }
.v2-score__bar > i.v2-w-60 { width: 60%; }
.v2-score__bar > i.v2-w-65 { width: 65%; }
.v2-score__bar > i.v2-w-70 { width: 70%; }
.v2-score__bar > i.v2-w-75 { width: 75%; }
.v2-score__bar > i.v2-w-80 { width: 80%; }
.v2-score__bar > i.v2-w-85 { width: 85%; }
.v2-score__bar > i.v2-w-90 { width: 90%; }
.v2-score__bar > i.v2-w-95 { width: 95%; }
.v2-score__bar > i.v2-w-100 { width: 100%; }

/* ── Yorum (3b, 3f, 3g) ───────────────────────────────────────────────────── */

/*
    Yorumun yüzeyini taşıyan kap veriyor: listede çökük iç panel (.v2-panel), işletme sahibinin ekranında
    kart (.v2-box). .v2-review yalnızca içini diziyor; kademeler (öne çıkan, düşük, cevap bekleyen,
    yalnızca puan) kabın kenarını değiştiriyor.
*/
.v2-reviews {
    display: grid;
    gap: 11px;
}

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

.v2-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.v2-review__who {
    flex: 1;
    min-width: 140px;
}

.v2-review__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-ink);
    overflow-wrap: anywhere;
}

.v2-review__meta {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-ink-3);
    overflow-wrap: anywhere;
}

/* Satır sonları korunuyor (yorum birkaç paragraf olabilir); metin tek satırda, başında boşluk olmadan yazılmalı. */
.v2-review__text {
    margin: 13px 0 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--v2-ink-2);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.v2-review__chips { margin-top: 12px; }

/* Çökük panelin üstünde sade çipler beyaz (kehribar ve kırmızı çipler kendi zemininde). */
.v2-review__chips .v2-chip:not(.v2-chip--amber):not(.v2-chip--bad) { background: var(--v2-card); }

.v2-review__reply {
    margin-top: 13px;
    padding: 11px 13px;
    border-radius: 13px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

/* İşletme sahibinin kartında cevap bloğu kartın zemininden ayrışsın diye çökük. */
.v2-review__reply--own { background: var(--v2-sunken); }

.v2-review__reply > .v2-row > svg {
    flex: 0 0 14px;
    color: var(--v2-acc-txt);
}

.v2-review__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-acc-txt);
}

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

.v2-review__text--reply {
    margin-top: 7px;
    font-size: 13.5px;
}

.v2-review__compose { margin-top: 14px; }

.v2-review__compose > summary > svg { flex: 0 0 auto; }

/* Öne çıkan yorum (en son 5 yıldızlı ve yorumlu): listenin başında, kart zemini ve turkuaz kenar. */
.v2-review--featured {
    background: var(--v2-card);
    border: 1.5px solid var(--v2-acc-mid);
    box-shadow: var(--v2-shadow-mid);
}

/* Cevap bekleyen düşük puan: kırmızı kabuk, yazma alanı açık — tek eyleme çağıran kart. */
.v2-review--low {
    border-color: var(--v2-bad-brd);
    box-shadow: var(--v2-bad-shadow), var(--v2-shadow);
}

/* Cevap bekleyen: kehribar kenar, "Cevap yaz" düğmesinin arkasında form. */
.v2-review--wait { border-color: var(--v2-warn-brd); }

/* Yalnızca puan (yorum yok): cevaplanacak bir şey yok, kart soluk. */
.v2-review--quiet {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}

.v2-review--low::before,
.v2-review--wait::before,
.v2-review--quiet::before { display: none; }

/* Düşük puanlı yorumun yazarı: kırmızıya çalan baş harfler (koyu mürekkep 5:1). */
.v2-avatar--bad {
    background: linear-gradient(150deg, #F2A8A0, #D06A5E);
    color: #2A0C08;
}

/* Kart içi alıntı: "Değerlendirmeniz" kartında kendi yorumu. */
.v2-quote {
    margin: 13px 0 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--v2-field-brd);
    font-size: 14px;
    line-height: 1.62;
    color: var(--v2-ink-2);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Saat ikonlu alt satır: "2 gün önce yayımlandı · 12 gün düzenlenebilir". */
.v2-stamp {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

.v2-stamp > svg { flex: 0 0 14px; }

/*
    Personel satırı: aracı yıkayan kişi ve aldığı puan. Yalnızca işletme sahibinin kartında (tam ad, kişinin
    süzgecine bağlantı) ve müşterinin kendi değerlendirmesinde ("Ahmet Y."); herkese açık yorumda yok.
*/
.v2-review__staff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

.v2-review__staff > svg {
    flex: 0 0 14px;
    color: var(--v2-acc-txt);
}

.v2-review__staff strong,
.v2-review__staff a {
    font-weight: 600;
    color: var(--v2-ink-2);
    overflow-wrap: anywhere;
}

.v2-review__staff a {
    text-decoration: underline;
    text-decoration-color: var(--v2-field-brd);
    text-underline-offset: 3px;
    transition: color var(--v2-dur) var(--v2-ease-ui), text-decoration-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-review__staff a:hover {
    color: var(--v2-acc-txt);
    text-decoration-color: currentColor;
}

/*
    İşletme sahibinin personel puanları kartı (3g): kısayol satırı (.v2-record) dilinde, kişi başına bir satır —
    baş harfler, ad, yıldızlar ve ortalama, altında adet. Süzülen kişinin satırı turkuaz zeminde duruyor.
*/
.v2-record__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    margin-top: 4px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.v2-record__rating > strong {
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-record.is-active {
    border-color: var(--v2-acc-mid);
    background-color: var(--v2-acc-soft);
}

/* ── Büyük sayılar (3f, 3g): tek kartta çizgiyle ayrılan üç ya da dört sayı ── */

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

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

.v2-figure {
    min-width: 0;
    padding: 4px 16px;
    border-inline-end: 1px solid var(--v2-field-brd);
}

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

.v2-figures--center .v2-figure {
    padding-inline: 10px;
    text-align: center;
}

.v2-figure__value {
    display: block;
    font-family: var(--v2-display);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--v2-grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.v2-figures--center .v2-figure__value { font-size: 34px; }

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

.v2-figure__value--bad {
    background: none;
    color: var(--v2-bad-txt);
}

.v2-figure__label {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--v2-ink-3);
}

@media (max-width: 640px) {
    .v2-figures--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .v2-figures--4 .v2-figure:nth-child(2n) { border-inline-end: 0; }

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

    .v2-figure__value,
    .v2-figures--center .v2-figure__value { font-size: 30px; }
}

/* ── Kehribar yüzeyler: puan bekleyen yıkama ──────────────────────────────── */

/* Yıkama detayındaki "İşletmeyi nasıl buldunuz?" (3e): dolu kehribar kart, üst ışık çizgisi yok. */
.v2-box--amber {
    background: var(--v2-warn-bg);
    border-color: var(--v2-warn-brd);
    box-shadow: 0 18px 36px -22px rgba(4, 22, 27, 0.2);
}

/*
    Panodaki puan bekleyen kart (1g): kehribar kenarlı SAKİN kart — dördüncü bir dolu kart değil, üç
    kademeli hiyerarşi korunuyor. Satırları kehribar iç panel.
*/
.v2-box--wait { border-color: var(--v2-warn-brd); }

.v2-box--amber::before,
.v2-box--wait::before { display: none; }

/* Birincil kart (puan verme: "İşletmeyi nasıl buldunuz?"): gölgesi ve ışık çizgisi baştan derin. */
.v2-box--raised { box-shadow: var(--v2-shadow-mid); }

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

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

.v2-panel--amber:hover { border-color: var(--v2-star); }

.v2-box__icon--amber {
    background: var(--v2-warn-bg);
    border: 1px solid var(--v2-warn-brd);
    color: var(--v2-star);
}

.v2-box--amber .v2-box__icon--amber { background: var(--v2-card-solid); }

.v2-box__icon--star { color: var(--v2-star); }

/* Satırın başındaki beyaz ikon kutusu (değerlendirmelerimde işletme) ve süresi dolmuş hâli. */
.v2-box__icon--card {
    background: var(--v2-card-solid);
    border: 1px solid var(--v2-field-brd);
}

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

.v2-line__sub--warn { color: var(--v2-warn-txt); }

/* Kehribar dolgu düğme ("Puan ver", "Değerlendir"): yazısı koyu mürekkep (beyaz 2,4:1 kalıyordu). */
.v2-btn--amber {
    background: var(--v2-amber-btn);
    color: var(--v2-amber-ink);
    box-shadow: var(--v2-amber-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

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

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

.v2-btn--amber.is-pending::before {
    border-color: var(--v2-amber-ink);
    border-top-color: transparent;
}

/* ── Yıldız girişi (3c): radyo + etiket, betiksiz ─────────────────────────── */

/*
    Beş gerçek radyo düğmesi; görünmüyorlar, hücrenin tamamını kaplıyorlar (.v2-slot'un yolu). Klavyeyle
    ok tuşları puanı değiştiriyor, formun doğrulaması zorunlu puanı istiyor. Dolgu :has() ile: seçim varsa
    hepsi dolu, seçilenden sonrakiler boş; üzerine gelince gelinen yıldıza kadar önizleme.

    Dokunma alanı hiçbir boyutta 44 pikselin altında değil (paket §10): 24 ve 22 piksellik yıldız 44'lük
    hücrede; bu yüzden yıldız arası tasarımdakinden geniş. Kurallar :where() ile sıfır özgüllükte: hangisinin
    kazandığını yalnızca sıraları belirliyor (seçim → önizleme).
*/
.v2-starpick {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.v2-starpick__star,
.v2-starpick__clear {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    cursor: pointer;
}

.v2-starpick__star > input,
.v2-starpick__clear > input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.v2-starpick__star > svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
    transition: fill var(--v2-dur) var(--v2-ease-ui);
}

.v2-starpick--sm .v2-starpick__star > svg {
    width: 22px;
    height: 22px;
}

/* Büyük giriş: 44 piksellik yıldızlar, aralarında 10 piksel (hücre dolgusu; ilk yıldız kenarla hizalı). */
.v2-starpick--lg { margin-inline: -5px; }

.v2-starpick--lg .v2-starpick__star {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
}

.v2-starpick--lg .v2-starpick__star > svg {
    width: 44px;
    height: 44px;
}

:where(.v2-starpick) :where(.v2-starpick__star) > svg { fill: var(--v2-star-off); }

:where(.v2-starpick:has(.v2-starpick__star > input:checked)) :where(.v2-starpick__star) > svg { fill: var(--v2-star); }

:where(.v2-starpick__star:has(> input:checked)) ~ :where(.v2-starpick__star) > svg { fill: var(--v2-star-off); }

@media (hover: hover) {
    :where(.v2-starpick:has(.v2-starpick__star:hover)) :where(.v2-starpick__star) > svg { fill: var(--v2-star); }

    :where(.v2-starpick__star:hover) ~ :where(.v2-starpick__star) > svg { fill: var(--v2-star-off); }

    :where(.v2-starpick:has(.v2-starpick__clear:hover)) :where(.v2-starpick__star) > svg { fill: var(--v2-star-off); }
}

.v2-starpick__star:has(> input:focus-visible),
.v2-starpick__clear:has(> input:focus-visible) {
    outline: 2px solid var(--v2-focus);
    outline-offset: -3px;
}

/*
    İsteğe bağlı puanın "kaldır" seçeneği: altıncı radyo (değer 0). Yalnızca bir yıldız seçiliyken görünüyor;
    görünmezken de klavyeyle ulaşılabiliyor, odaklanınca beliriyor.
*/
.v2-starpick__clear {
    color: var(--v2-ink-3);
    opacity: 0;
    transition: opacity var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-starpick__clear > svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.v2-starpick:has(.v2-starpick__star > input:checked) .v2-starpick__clear,
.v2-starpick__clear:has(> input:focus-visible) { opacity: 1; }

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

/* İşletme puanı: yıldızlar ve seçilen puanın adı ("İyiydi · 4 / 5 yıldız"); ad da :has() ile, betiksiz. */
.v2-starfield {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.v2-starfield__label {
    min-width: 0;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--v2-field-brd);
}

.v2-starfield__word,
.v2-starfield__sub { display: none; }

.v2-starfield__word {
    font-family: var(--v2-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--v2-ink);
}

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

.v2-starfield:not(:has(input:checked)) [data-yildiz="0"],
.v2-starfield:has(input[value="1"]:checked) [data-yildiz="1"],
.v2-starfield:has(input[value="2"]:checked) [data-yildiz="2"],
.v2-starfield:has(input[value="3"]:checked) [data-yildiz="3"],
.v2-starfield:has(input[value="4"]:checked) [data-yildiz="4"],
.v2-starfield:has(input[value="5"]:checked) [data-yildiz="5"] { display: block; }

/* Girişli satır: hizmet, personel. Puanlanmamışsa kesikli kenar, zeminsiz, ad ikincil tonda. */
.v2-starrows {
    display: grid;
    gap: 9px;
}

.v2-starrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
    padding: 5px 5px 5px 14px;
    border-radius: 13px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    transition: background-color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-starrow__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: var(--v2-card-solid);
    color: var(--v2-acc-txt);
}

.v2-starrow__body {
    flex: 1 1 120px;
    min-width: 0;
}

.v2-starrow__name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
    overflow-wrap: anywhere;
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

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

/* Aracı yıkayan personelin satırı turkuaz zeminde, kişi ikonuyla (3c; eskiden ayrı işletme satırının yeri). */
.v2-starrow--staff {
    background: var(--v2-acc-soft);
    border-color: var(--v2-card-brd);
}

.v2-starrow__none { display: none; }

.v2-starrow:not(:has(.v2-starpick__star > input:checked)) {
    background: transparent;
    border-style: dashed;
}

.v2-starrow:not(:has(.v2-starpick__star > input:checked)) .v2-starrow__name { color: var(--v2-ink-3); }

.v2-starrow:not(:has(.v2-starpick__star > input:checked)) .v2-starrow__none { display: inline; }

/* ── Yıldız bağlantıları (pano ve yıkama detayı): yıldıza tıklayınca form o puanla açılıyor ── */

.v2-starlinks {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.v2-starlinks__star {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.v2-starlinks__star > svg {
    width: 28px;
    height: 28px;
    pointer-events: none;
    transition: fill var(--v2-dur) var(--v2-ease-ui);
}

:where(.v2-starlinks__star) > svg { fill: var(--v2-star-soft); }

@media (hover: hover) {
    :where(.v2-starlinks:has(.v2-starlinks__star:hover)) :where(.v2-starlinks__star) > svg { fill: var(--v2-star); }

    :where(.v2-starlinks__star:hover) ~ :where(.v2-starlinks__star) > svg { fill: var(--v2-star-soft); }
}

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

:where(.v2-starlinks__star:focus-visible) > svg { fill: var(--v2-star); }

/* ── Puan verme düzeni (3c): solda ne puanlandığı, sağda tek form ─────────── */

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

.v2-facts {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--v2-field-brd);
}

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

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

.v2-facts__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-2);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.v2-facts__value--lg {
    font-family: var(--v2-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-lineitems {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-lineitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 13px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-lineitem__name {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
    overflow-wrap: anywhere;
}

.v2-lineitem__price {
    font-size: 12.5px;
    color: var(--v2-ink-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Araç tipi farkı kalemi: zeminsiz, kehribar noktalı adın yanında işaretli tutar. */
.v2-lineitem--fark {
    background: transparent;
    border-style: dashed;
}

/* Yorum alanının başlık satırı: etiket · not · sayaç. */
.v2-notehead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 11px;
    margin-bottom: 11px;
}

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

/* Formun sonundaki gönder satırı: düğme ve yanında kural notu. */
.v2-submitrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 18px;
}

.v2-submitrow > .v2-help {
    flex: 1 1 220px;
    max-width: 320px;
}

.v2-submitrow > .v2-help strong { color: var(--v2-ink-2); }

/*
    Şeritlerin kart içi aralığı (.v2-app .v2-strip boşluğu sıfırlıyor; aynı özgüllükte, sonra geliyor).
    Sunucunun reddi gönder satırının hemen üstünde: kullanıcı gönderdiği yere kaydırılmış dönüyor.
*/
.v2-field + .v2-strip,
.v2-field__input + .v2-strip { margin-top: 12px; }

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

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

/* Şeridin sonundaki bağlantı ("Göster →"): şeridin renginde, sağa yaslı. */
.v2-strip__link {
    margin-inline-start: auto;
    color: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════ Web ↔ mobil eşitleme (22 Eylül 2026) */

/*
    Telefon alanı (_TelefonAlani): mobildeki gibi sabit "+90" öneki alanın içinde, yazılan 10 hane. Önek
    dokunmayı geçiriyor; alanın dolgusu önekin genişliği kadar açılıyor (işletme ve müşteri yoğunluğunda da).
*/
.v2-tel {
    position: relative;
    display: block;
}

.v2-tel__prefix {
    position: absolute;
    inset-block: 0;
    left: 16px;
    display: flex;
    align-items: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--v2-ink-2);
    pointer-events: none;
}

.v2-tel > .v2-field__input { padding-inline-start: 52px; }

.v2-app .v2-tel__prefix {
    left: 14px;
    font-size: 14px;
}

.v2-app .v2-tel > .v2-field__input { padding-inline-start: 48px; }

/*
    Canlı bölgenin kabı: kendisi kutu üretmiyor, içindeki kart akışa doğrudan katılıyor. Canlı yenileme yalnızca
    sayfada VAR OLAN bölgeyi değiştirdiği için koşullu kart (yıkama detayındaki "Yapılacak işlem") bu kabın içinde:
    kap hep yerinde, kart görünüp kaybolabiliyor ve boş kap aralığa boşluk eklemiyor.
*/
.v2-canli-kap { display: contents; }

/*
    Başlıkta durum rozeti ile CANLI çipi yan yana (müşterinin randevu detayı): ikisinin de başlangıç boşluğu "auto"
    olunca boş yer aralarında bölünüyor, rozet satırın ortasında kalıyordu. Rozet ikisini birlikte sağa itiyor.
*/
.v2-box__head > .v2-push ~ .v2-live { margin-inline-start: 0; }

/* Kısa fayda listesi (Hesabım › Filo hesabına geç): turkuaz onay işaretli satırlar. */
.v2-bullets {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-bullets > li {
    position: relative;
    padding-inline-start: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--v2-ink-2);
}

.v2-bullets > li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.42em;
    width: 10px;
    height: 5px;
    border-left: 2px solid var(--v2-acc-txt);
    border-bottom: 2px solid var(--v2-acc-txt);
    rotate: -45deg;
}

/* ══════════════════════════════════════════════════════════ Çalışma saatleri ve randevu takvimi */

/*
    26 Eylül 2026: şubenin haftalık saatleri ve randevu kapatmaları (Isletme/CalismaSaatleri), müşterinin tarih
    şeridi ve dolu saat hâli (Musteri/Randevu); 27 Eylül 2026 yeniden tasarım (1b, 1c) ve müşterinin şube durumu (1d) —
    jetonları :root'ta "Çalışma saatleri" başlığı altında. "Kapalı" ve "Dolu" hâllerinin dili tek: zemin
    yok, kenar kesik (--v2-ink-4; alan kenarı beyazda 1,2:1'de kayboluyordu), yazı soluk ve saat üstü çizili —
    paketin "dolu (kesik kenarlı) saat" hâli. Durum rengi zeminde değil yazıda: seçilemeyen öğe dikkat çekmesin.
*/

/*
    Haftalık saatler — yeniden tasarım (27 Eylül 2026, teslim paketi design_handoff_calisma_saatleri 1b). Üstte haftaya bakış
    (06:00–22:00 dikey takvim), altında gün satırları: anahtar + gün adı + "9 sa açık" · aralık çipleri + "+ Mola" · "Kopyala ▾".
    Kaydedilmemiş değişiklik alttaki yapışkan şeritte. Betiksizken aralık çipinde iki <select>, betikle saat ızgarası.
*/

/*
    Haftaya bakış. Çubuk konumu satır içi stille verilemiyor (CSP style-src 'self'; attr() konumda desteklenmiyor): 06:00–22:00
    otuzar dakikalık 32 basamak, çubuk data-s (başlangıç basamağı) ve data-l (uzunluk) ile aşağıdaki kurallara oturuyor. Basamağı
    sunucu (HaftalikSaatler.Cubuk) ve betik aynı hesapla yazıyor.
*/
.v2-week {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    column-gap: 8px;
}

.v2-week-note { margin-bottom: 16px; }

.v2-week__name {
    padding-bottom: 8px;
    text-align: center;
    font-family: var(--v2-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

.v2-week__name.is-closed { color: var(--v2-ink-3); }

.v2-week__ruler {
    position: relative;
    height: 220px;
}

.v2-week__tick {
    position: absolute;
    right: 4px;
    translate: 0 -50%;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

/* Sütun: iki saatte bir ince çizgi (12,5% = 2 saat). */
.v2-week__col {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--v2-soft);
    background-image: repeating-linear-gradient(180deg, transparent 0 calc(12.5% - 1px), var(--v2-grid-line) calc(12.5% - 1px) 12.5%);
    border: 1px solid var(--v2-field-brd);
}

/* Kapalı gün taralı; kayıtlı aralıkları çizilmiyor. */
.v2-week__col--closed { background-image: var(--v2-hatch); }

.v2-week__closed {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: 180deg;
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

.v2-week__col--closed .v2-week__closed { display: block; }

/* Çubuk: pill tonları dikey; üstünde açılış, altında kapanış (koyu mürekkep, en koyu uçta 5,4:1). */
.v2-week__bar {
    position: absolute;
    left: 5px;
    right: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(180deg, #45D5DF, #1799A5);
    box-shadow: 0 4px 10px -6px rgba(11, 110, 121, 0.6);
    transition: top var(--v2-dur-slow) var(--v2-ease-ui), height var(--v2-dur-slow) var(--v2-ease-ui);
}

.v2-week__t {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #04161B;
    font-variant-numeric: tabular-nums;
}

/* Kısa çubuğa iki saat sığmıyor: 2 saatten kısada yazı yok, 3 saatten kısada yalnızca açılış. */
.v2-week__bar:is([data-l="1"], [data-l="2"], [data-l="3"]) .v2-week__t { display: none; }

.v2-week__bar:is([data-l="4"], [data-l="5"]) .v2-week__t + .v2-week__t { display: none; }


.v2-week [data-s="0"] { top: 0%; }
.v2-week [data-s="1"] { top: 3.125%; }
.v2-week [data-s="2"] { top: 6.25%; }
.v2-week [data-s="3"] { top: 9.375%; }
.v2-week [data-s="4"] { top: 12.5%; }
.v2-week [data-s="5"] { top: 15.625%; }
.v2-week [data-s="6"] { top: 18.75%; }
.v2-week [data-s="7"] { top: 21.875%; }
.v2-week [data-s="8"] { top: 25%; }
.v2-week [data-s="9"] { top: 28.125%; }
.v2-week [data-s="10"] { top: 31.25%; }
.v2-week [data-s="11"] { top: 34.375%; }
.v2-week [data-s="12"] { top: 37.5%; }
.v2-week [data-s="13"] { top: 40.625%; }
.v2-week [data-s="14"] { top: 43.75%; }
.v2-week [data-s="15"] { top: 46.875%; }
.v2-week [data-s="16"] { top: 50%; }
.v2-week [data-s="17"] { top: 53.125%; }
.v2-week [data-s="18"] { top: 56.25%; }
.v2-week [data-s="19"] { top: 59.375%; }
.v2-week [data-s="20"] { top: 62.5%; }
.v2-week [data-s="21"] { top: 65.625%; }
.v2-week [data-s="22"] { top: 68.75%; }
.v2-week [data-s="23"] { top: 71.875%; }
.v2-week [data-s="24"] { top: 75%; }
.v2-week [data-s="25"] { top: 78.125%; }
.v2-week [data-s="26"] { top: 81.25%; }
.v2-week [data-s="27"] { top: 84.375%; }
.v2-week [data-s="28"] { top: 87.5%; }
.v2-week [data-s="29"] { top: 90.625%; }
.v2-week [data-s="30"] { top: 93.75%; }
.v2-week [data-s="31"] { top: 96.875%; }
.v2-week [data-s="32"] { top: 100%; }
.v2-week__bar[data-l="1"] { height: 3.125%; }
.v2-week__bar[data-l="2"] { height: 6.25%; }
.v2-week__bar[data-l="3"] { height: 9.375%; }
.v2-week__bar[data-l="4"] { height: 12.5%; }
.v2-week__bar[data-l="5"] { height: 15.625%; }
.v2-week__bar[data-l="6"] { height: 18.75%; }
.v2-week__bar[data-l="7"] { height: 21.875%; }
.v2-week__bar[data-l="8"] { height: 25%; }
.v2-week__bar[data-l="9"] { height: 28.125%; }
.v2-week__bar[data-l="10"] { height: 31.25%; }
.v2-week__bar[data-l="11"] { height: 34.375%; }
.v2-week__bar[data-l="12"] { height: 37.5%; }
.v2-week__bar[data-l="13"] { height: 40.625%; }
.v2-week__bar[data-l="14"] { height: 43.75%; }
.v2-week__bar[data-l="15"] { height: 46.875%; }
.v2-week__bar[data-l="16"] { height: 50%; }
.v2-week__bar[data-l="17"] { height: 53.125%; }
.v2-week__bar[data-l="18"] { height: 56.25%; }
.v2-week__bar[data-l="19"] { height: 59.375%; }
.v2-week__bar[data-l="20"] { height: 62.5%; }
.v2-week__bar[data-l="21"] { height: 65.625%; }
.v2-week__bar[data-l="22"] { height: 68.75%; }
.v2-week__bar[data-l="23"] { height: 71.875%; }
.v2-week__bar[data-l="24"] { height: 75%; }
.v2-week__bar[data-l="25"] { height: 78.125%; }
.v2-week__bar[data-l="26"] { height: 81.25%; }
.v2-week__bar[data-l="27"] { height: 84.375%; }
.v2-week__bar[data-l="28"] { height: 87.5%; }
.v2-week__bar[data-l="29"] { height: 90.625%; }
.v2-week__bar[data-l="30"] { height: 93.75%; }
.v2-week__bar[data-l="31"] { height: 96.875%; }
.v2-week__bar[data-l="32"] { height: 100%; }

/* Telefonda yedi sütuna yer açılıyor: cetvel dar, aralık sıkı, çubukta saat yazmıyor (satırlarda yazıyor). */
@media (max-width: 479px) {
    .v2-week {
        grid-template-columns: 34px repeat(7, minmax(0, 1fr));
        column-gap: 4px;
    }

    .v2-week__bar {
        left: 3px;
        right: 3px;
    }

    .v2-week__t { display: none; }
}

/* ── Gün satırları ─────────────────────────────────────────────────────────── */

.v2-box__head--tight { margin-bottom: 6px; }

.v2-dayrows {
    display: grid;
    margin-top: 12px;
}

/* [anahtar + gün] [aralıklar] [Kopyala]; hata ve saat seçici ikinci kolondan başlıyor (paketteki 184 px). */
.v2-dayrow {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--v2-line-soft);
}

.v2-dayrow__day {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.v2-dayrow__label {
    display: grid;
    gap: 2px;
    min-width: 0;
    cursor: pointer;
}

.v2-dayrow__name {
    font-family: var(--v2-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--v2-ink);
    transition: color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-dayrow__off { display: none; }

.v2-dayrow__ivs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

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

/*
    Kapalı gün: aralıklar gizli ama formda (gönderiliyor; sunucu saklıyor, günü açınca geri geliyor), yerine "Randevu alınmaz ·
    kayıtlı saat …". Anahtarın hâline bakan :has — betiksiz de çalışıyor.
*/
.v2-dayrow:has(.v2-switch:not(:checked)) .v2-dayrow__name { color: var(--v2-ink-3); }

.v2-dayrow:has(.v2-switch:not(:checked)) :is(.v2-ivchip, .v2-addbreak) { display: none; }

.v2-dayrow:has(.v2-switch:not(:checked)) :is(.v2-dayrow__closed, .v2-dayrow__off) { display: inline; }

.v2-dayrow:has(.v2-switch:not(:checked)) .v2-dayrow__open { display: none; }

.v2-dayrow__err {
    grid-column: 2 / -1;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-bad-txt);
}

.v2-dayrow > .v2-timegrid {
    grid-column: 2 / -1;
    margin-top: 12px;
}

/* 640 piksel altında tek kolon: gün ve "Kopyala" üstte, aralıklar altında tam genişlik. */
@media (max-width: 639px) {
    .v2-dayrow {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 12px;
    }

    .v2-dayrow > .v2-copy {
        grid-column: 2;
        grid-row: 1;
    }

    .v2-dayrow__ivs,
    .v2-dayrow__err,
    .v2-dayrow > .v2-timegrid { grid-column: 1 / -1; }

    .v2-dayrow__err,
    .v2-dayrow > .v2-timegrid { margin-top: 0; }
}

/*
    Anahtar: gerçek işaret kutusu (role="switch"; betiksiz gönderiliyor), görünüşü CSS'le. 44×26, açıkken pill gradyanı. Kapalı
    izin tonu --v2-ink-4: paketteki #C3D2D8 beyaz kartta 1,5:1'de kalıyordu (işaret kutusunun kenarıyla aynı karar).
*/
.v2-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 26px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: var(--v2-ink-4);
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

.v2-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(4, 22, 27, 0.3);
    transition: translate var(--v2-dur) var(--v2-ease-ui);
}

.v2-switch:checked { background: var(--v2-grad-pill); }

.v2-switch:checked::before { translate: 18px 0; }

.v2-switch:hover { box-shadow: 0 0 0 3px var(--v2-acc-soft); }

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

/* Aralık çipi: "08:00 – 12:30 ×". Saat parçası betikle düğme (ızgarayı açıyor), betiksiz <select>. */
.v2-ivchip {
    display: inline-flex;
    align-items: center;
    height: 42px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 13px;
    background: var(--v2-field);
    border: 1px solid var(--v2-field-brd);
}

.v2-ivchip__t,
.v2-ivchip__sel {
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--v2-ink);
    font-family: var(--v2-display);
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-ivchip__sel {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 26px;
    background-image: var(--v2-select-arrow);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

.v2-ivchip__t:hover,
.v2-ivchip__sel:hover { background-color: var(--v2-acc-soft); }

.v2-ivchip__t[aria-expanded="true"] { background-color: var(--v2-acc-soft-2); }

.v2-ivchip__t:focus-visible,
.v2-ivchip__sel:focus-visible,
.v2-ivchip__x:focus-visible {
    outline: 2px solid var(--v2-focus);
    outline-offset: -3px;
}

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

.v2-ivchip__x {
    flex: 0 0 34px;
    width: 34px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-inline-start: 1px solid var(--v2-field-brd);
    background: transparent;
    color: var(--v2-ink-3);
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-ivchip__x:hover {
    color: var(--v2-bad-txt);
    background-color: var(--v2-bad-bg);
}

/* "+ Mola": kesik kenarlı ekleme düğmesi; üç aralıkta çizilmiyor. */
.v2-addbreak {
    height: 42px;
    margin: 0;
    padding: 0 13px;
    border-radius: 13px;
    border: 1.5px dashed var(--v2-dash);
    background: transparent;
    color: var(--v2-acc-txt);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

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

/* "Kopyala ▾": <details> — betiksiz açılıyor, seçenekler formaction'lı gönderim düğmeleri. */
.v2-copy { position: relative; }

.v2-copy__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-card);
    color: var(--v2-acc-txt);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-copy__btn:hover,
.v2-copy[open] > .v2-copy__btn {
    border-color: var(--v2-acc-mid);
    background-color: var(--v2-acc-soft);
}

.v2-copy__menu {
    position: absolute;
    top: 46px;
    right: 0;
    z-index: 6;
    display: grid;
    width: 210px;
    padding: 6px;
    border-radius: 14px;
    background: var(--v2-card-solid);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-float-shadow);
}

.v2-copy__opt {
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--v2-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-copy__opt:hover,
.v2-copy__opt:focus-visible { background-color: var(--v2-acc-soft); }

/* Saat seçici: randevu adımıyla düğme ızgarası; geçersiz saat (açılıştan önce kapanış) soluk ve basılmıyor. */
.v2-timegrid {
    padding: 14px;
    border-radius: 16px;
    background: var(--v2-soft);
    border: 1px solid var(--v2-acc-brd);
}

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

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

.v2-timegrid__close {
    margin: 0 0 0 auto;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--v2-ink-3);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-timegrid__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.v2-timegrid__opt {
    height: 36px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-card-solid);
    color: var(--v2-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-timegrid__opt--cur,
.v2-timegrid__opt--cur:hover:not(:disabled) {
    border-color: transparent;
    background: var(--v2-grad-pill);
    color: #04161B;
}

.v2-timegrid__opt:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 559px) {
    .v2-timegrid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .v2-timegrid__opt { height: 40px; }
}

/*
    Kaydet şeridi: formun sonunda yapışkan (formun içinde kaldıkça ekranın altında). Betiksiz hep iki düğme; betik temizken
    "Saatler kayıtlı." yazıp düğmeleri gizliyor (is-clean), değişiklikte kehribar nokta (is-dirty).
*/
.v2-savebar {
    position: sticky;
    bottom: 12px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px 12px 18px;
    border-radius: 18px;
    background: var(--v2-savebar);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-float-shadow);
}

.v2-savebar__state {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 200px;
    font-size: 13px;
    color: var(--v2-ink-3);
}

.v2-savebar__dot {
    display: none;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--v2-star);
}

.v2-savebar.is-dirty .v2-savebar__state {
    font-weight: 600;
    color: var(--v2-warn-txt);
}

.v2-savebar.is-dirty .v2-savebar__dot { display: block; }

.v2-savebar.is-clean .v2-savebar__btn { display: none; }

.v2-app .v2-savebar__btn { height: 44px; }

/* ── Özel günler (1c) ─────────────────────────────────────────────────────── */

/* Başlığın altında açıklama olan kart başlığı. */
.v2-box__titles {
    flex: 1 1 240px;
    min-width: 0;
}

.v2-box__titles .v2-help {
    margin-top: 3px;
    font-size: 12.5px;
}

/* Solda ay takvimi (340), sağda seçili gün ve yaklaşanlar; dar ekranda alt alta. */
.v2-special {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 759px) {
    .v2-special { grid-template-columns: minmax(0, 1fr); }
}

.v2-special__side {
    display: grid;
    gap: 14px;
    min-width: 0;
}

/* Ay takvimi: günler düz bağlantı (betiksiz). */
.v2-cal {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    background: var(--v2-soft);
    border: 1px solid var(--v2-field-brd);
}

.v2-cal__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.v2-cal__step {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-card-solid);
    color: var(--v2-acc-txt);
    font-size: 15px;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-cal__step.is-off { opacity: 0.4; }

.v2-cal__month {
    flex: 1;
    text-align: center;
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    text-align: center;
}

.v2-cal__wd {
    padding: 4px 0;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
}

.v2-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 10px;
    background: var(--v2-card-solid);
    border: 1px solid var(--v2-line-soft);
    color: var(--v2-ink);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

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

/* Göstergenin örnek kutusu: gün hâllerinin sınıflarını taşıyor, o yüzden onlardan ÖNCE (kenar rengini ezmesin). */
.v2-cal__swatch {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.v2-cal__day--blank {
    background: none;
    border-color: transparent;
}

/* Geçmiş gün seçilemiyor; soluk yazı (metin tonu --v2-ink-3, --v2-ink-4 değil). */
.v2-cal__day--past {
    background: transparent;
    border-color: transparent;
    color: var(--v2-ink-3);
    font-weight: 400;
}

.v2-cal__day.is-today {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.v2-cal__day--weekly {
    background: var(--v2-hatch-sm);
    border-color: transparent;
    color: var(--v2-ink-3);
    font-weight: 400;
}

.v2-cal__day--partial {
    background: linear-gradient(180deg, var(--v2-card-solid) 50%, var(--v2-warn-half) 50%);
    border-color: var(--v2-warn-brd);
    color: var(--v2-warn-txt);
    font-weight: 700;
}

.v2-cal__day--closed {
    background: var(--v2-bad-bg);
    border-color: var(--v2-bad-brd);
    color: var(--v2-bad-txt);
    font-weight: 700;
}

.v2-cal__day--sel,
a.v2-cal__day--sel:hover {
    background: var(--v2-grad-pill);
    border-color: transparent;
    color: #04161B;
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--v2-acc-soft);
}

.v2-cal__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 14px;
    font-size: 11.5px;
    color: var(--v2-ink-2);
}

.v2-cal__key {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Seçili gün: kapatma formu (turkuaz halkalı kart). */
.v2-selday {
    min-width: 0;
    padding: 16px;
    border-radius: 18px;
    background: var(--v2-card);
    border: 1px solid var(--v2-acc-brd);
    box-shadow: 0 0 0 4px var(--v2-acc-soft);
}

.v2-selday__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.v2-selday__date {
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}

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

.v2-selday__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-top: 14px;
}

.v2-selday__opt {
    display: grid;
    gap: 6px;
}

.v2-selday__opt--saat {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Seçilen türün alanı; :has'sız tarayıcıda hepsi görünür (sunucu türe bakıyor). */
.v2-selday:has(input[value="gun"]:checked) :is(.v2-selday__opt--erken, .v2-selday__opt--saat),
.v2-selday:has(input[value="erken"]:checked) .v2-selday__opt--saat,
.v2-selday:has(input[value="saat"]:checked) .v2-selday__opt--erken { display: none; }

.v2-selday__pair {
    display: grid;
    gap: 6px;
    min-width: 0;
}

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

.v2-app .v2-selday .v2-field__input { height: 44px; }

.v2-selday__time { width: 116px; }

.v2-selday__until { flex: 0 1 190px; }

.v2-selday__note { flex: 1 1 100%; }

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

/* Üçlü seçici: Kapalı / Erken kapan / Açık. Radyo (seçili gün) ya da gönderim düğmesi (tatil kararı, aria-pressed). */
.v2-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100%;
    padding: 4px;
    border-radius: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-seg__radio {
    position: relative;
    display: inline-flex;
}

/* Radyo görünmez ama odaklanabilir ve etiketiyle seçiliyor. */
.v2-seg__radio > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.v2-seg__opt {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    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), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-seg__radio > input:checked + .v2-seg__opt,
.v2-seg__opt[aria-pressed="true"],
.v2-seg__opt[aria-pressed="true"]:hover {
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: 0 6px 14px -8px rgba(11, 110, 121, 0.5);
}

/* "Kapalı" kararı kırmızı dolgu (paket): beyaz yazı #A62121'de 6,9:1. */
.v2-seg__opt--bad[aria-pressed="true"],
.v2-seg__opt--bad[aria-pressed="true"]:hover {
    background: var(--v2-bad-fill);
    color: #FFFFFF;
    box-shadow: none;
}

.v2-seg__radio > input:focus-visible + .v2-seg__opt,
.v2-seg__opt:focus-visible {
    outline: 2px solid var(--v2-focus);
    outline-offset: 2px;
}

.v2-seg--sm {
    padding: 3px;
    border-radius: 12px;
}

.v2-seg--sm .v2-seg__opt {
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 12px;
}

/* Erken kapanışın saati: − 15:00 +. Betiksiz yalnızca liste (oku var); betik düğmeleri açıyor (is-ready). */
.v2-stepper {
    display: inline-flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
    border-radius: 13px;
    background: var(--v2-field);
    border: 1px solid var(--v2-field-brd);
}

.v2-stepper__btn {
    width: 42px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--v2-acc-txt);
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-stepper__btn:hover:not(:disabled) { background-color: var(--v2-acc-soft); }

.v2-stepper__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.v2-stepper__sel {
    -webkit-appearance: none;
    appearance: none;
    height: 100%;
    min-width: 62px;
    margin: 0;
    padding: 0 30px 0 14px;
    border: 0;
    background: transparent var(--v2-select-arrow) no-repeat right 10px center / 12px;
    color: var(--v2-ink);
    font-family: var(--v2-display);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.v2-stepper.is-ready .v2-stepper__sel {
    padding-inline: 8px;
    background-image: none;
    text-align: center;
    text-align-last: center;
}

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

/* Yaklaşan: kapatma (Kaldır) ve otomatik tatil (Değiştir). */
.v2-upcoming .v2-micro { margin-bottom: 8px; }

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

.v2-upc {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-upc__date { text-align: center; }

.v2-upc__num {
    display: block;
    font-family: var(--v2-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--v2-ink);
}

.v2-upc__mon {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--v2-ink-3);
}

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

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

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

.v2-upc__act {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--v2-acc-txt);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-underline-offset: 3px;
}

.v2-upc__act:hover {
    color: var(--v2-acc-txt);
    text-decoration: underline;
}

.v2-upc__act--bad,
.v2-upc__act--bad:hover { color: var(--v2-bad-txt); }

/* Telefonda rozet alt satırda, eylem sağda. */
@media (max-width: 520px) {
    .v2-upc {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        row-gap: 6px;
    }

    .v2-upc > .v2-tag {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .v2-upc > :is(form, .v2-upc__act) {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* Resmî ve dini bayramlar: tarihler otomatik (ekle / sil yok), gün gün karar. */
.v2-hol {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: var(--v2-soft);
    border: 1px solid var(--v2-field-brd);
}

.v2-hol__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.v2-hol__head .v2-chip { white-space: normal; }

.v2-hol__title {
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-hol__text {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--v2-ink-2);
}

.v2-hol__default {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

.v2-hol__label {
    flex: 1 1 200px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-hol__note {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-hol__groups {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

/* Bayram satırı: <details> — kapalıyken özet, açıkken gün gün karar. */
.v2-hgroup {
    overflow: hidden;
    border-radius: 14px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
    transition: border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-hgroup[open] {
    border-radius: 16px;
    border-color: var(--v2-acc-brd);
}

.v2-hgroup__sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-height: 44px;
    padding: 10px 15px;
    list-style: none;
    cursor: pointer;
}

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

.v2-hgroup__sum:focus-visible {
    outline: 2px solid var(--v2-focus);
    outline-offset: -3px;
    border-radius: 14px;
}

.v2-hgroup[open] > .v2-hgroup__sum { border-bottom: 1px solid var(--v2-line-soft); }

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

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

.v2-hgroup[open] .v2-hgroup__name {
    font-family: var(--v2-display);
    font-size: 14.5px;
    font-weight: 700;
}

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

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

.v2-hgroup[open] .v2-hgroup__state { display: none; }

.v2-hgroup__toggle {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-acc-txt);
    white-space: nowrap;
}

.v2-hgroup__sum:hover .v2-hgroup__toggle {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v2-hgroup__opened,
.v2-hgroup[open] .v2-hgroup__closed { display: none; }

.v2-hgroup[open] .v2-hgroup__opened { display: inline; }

/* Tatil günü: [ad ve tarih] [Kapalı / Erken kapan / Açık] [etkin saat]. Açık gün hafif yeşil. */
.v2-hday {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--v2-line-soft);
}

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

.v2-hday--open { background: var(--v2-ok-row); }

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

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

.v2-hday__date {
    display: block;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-hday > .v2-seg { justify-self: start; }

.v2-hday__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.v2-hday__hours {
    font-size: 12.5px;
    color: var(--v2-ink-2);
    font-variant-numeric: tabular-nums;
}

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

.v2-hday__hours.is-open {
    font-weight: 600;
    color: var(--v2-ok-txt);
}

/* Kapanış seçicisi yalnızca erken kapanışta görünür; gizliyken de gönderiliyor ("Erken kapan"a basınca bu saat gidiyor). */
.v2-hday__close {
    display: none;
    align-items: center;
    gap: 6px;
}

.v2-hday--early .v2-hday__close { display: inline-flex; }

.v2-app .v2-hday__sel {
    width: 96px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 639px) {
    .v2-hday {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .v2-hday__end { justify-content: flex-start; }
}

/* ── Müşteri: şubenin durumu ve saatleri (1d) ─────────────────────────────── */

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

/* Durum çipi ve sunucunun cümlesi (adresin altında). */
.v2-openstate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
}

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

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

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

.v2-openchip--open::before { background: var(--v2-ok); }

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

.v2-openchip--break::before { background: var(--v2-star); }

.v2-openstate__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--v2-ink-2);
}

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

/* "Saatler ▾": <details>, betiksiz açılıyor. Kapalıyken yalnızca bağlantı gibi yazı; açıkken beyaz kutu. */
.v2-hrs { margin-top: 6px; }

.v2-hrs > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
}

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

.v2-hrs > summary:focus-visible {
    outline: 2px solid var(--v2-focus);
    outline-offset: 2px;
    border-radius: 8px;
}

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

.v2-hrs__toggle {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-acc-txt);
}

.v2-hrs > summary:hover .v2-hrs__toggle {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.v2-hrs__hide,
.v2-hrs[open] .v2-hrs__show { display: none; }

.v2-hrs[open] .v2-hrs__hide { display: inline; }

.v2-hrs[open] {
    margin-top: 14px;
    padding: 4px 14px 14px;
    border-radius: 14px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
}

.v2-hrs[open] .v2-hrs__label { display: inline; }

.v2-hrs[open] .v2-hrs__toggle { margin-inline-start: auto; }

.v2-hrs__week {
    display: grid;
    gap: 2px;
}

.v2-hrs__row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--v2-ink-2);
}

.v2-hrs__row.is-today {
    background: var(--v2-acc-soft);
    color: var(--v2-ink);
}

.v2-hrs__row.is-today .v2-hrs__day { font-weight: 700; }

.v2-hrs__row.is-today .v2-hrs__time { font-weight: 600; }

.v2-hrs__time { font-variant-numeric: tabular-nums; }

.v2-hrs__time.is-closed { color: var(--v2-ink-3); }

@media (max-width: 440px) {
    .v2-hrs__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
    }
}

/* Önümüzdeki günlerin istisnaları: yalnızca resmî tatil adı, işletmenin notu asla (metin sunucudan). */
.v2-hrs__exc {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--v2-line-soft);
}

.v2-hrs__ex {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--v2-warn-txt);
}

.v2-hrs__ex::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-star);
    translate: 0 -1px;
}

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

.v2-hrs__ex--closed::before { background: var(--v2-bad-txt); }

/*
    Müşterinin tarih şeridi (Randevu al → Gün ve saat): iki haftalık gün hapları kartın içinde yatayda kayıyor —
    kap kartın kenarına kadar uzanıyor (negatif boşluk = kartın dolgusu), sayfa yana taşmıyor. position: relative:
    içindeki ekran okuyucu metni (u-sr-only) kaymayan karta göre konumlanıp sayfayı genişletmesin.
*/
.v2-days {
    position: relative;
    display: flex;
    gap: 8px;
    margin: 0 -22px 16px;
    padding: 2px 22px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 22px;
    scrollbar-width: thin;
}

/* Telefonda kartın dolgusu 16 piksel (bkz. yukarıda "iç içe dolgular"): şerit yine kartın kenarına kadar. */
@media (max-width: 520px) {
    .v2-days {
        margin-inline: -16px;
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }
}

.v2-day {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 66px;
    min-height: 44px;
    padding: 9px 8px 8px;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink);
    text-align: center;
    scroll-snap-align: start;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui),
        color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

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

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

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

.v2-day__date {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.v2-day__num {
    font-family: var(--v2-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.v2-day__mon {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-2);
}

.v2-day__state {
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--v2-acc-txt);
}

.v2-day.is-selected:not(.is-off) {
    border-color: transparent;
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: var(--v2-btn-shadow);
}

.v2-day.is-selected:not(.is-off) :is(.v2-day__name, .v2-day__mon, .v2-day__state) { color: #04161B; }

/* Kapalı ya da dolu gün: görünür ama seçilemez. */
.v2-day.is-off {
    background: transparent;
    border-style: dashed;
    border-color: var(--v2-ink-4);
    color: var(--v2-ink-3);
    box-shadow: none;
}

.v2-day.is-off :is(.v2-day__mon, .v2-day__state) { color: var(--v2-ink-3); }

.v2-day.is-off .v2-day__num { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* Tarih alanından kapalı ya da dolu bir gün seçildiyse: kesik kenar turkuaz, seçili olduğu belli. */
.v2-day.is-off.is-selected {
    border-color: var(--v2-acc-mid);
    border-width: 1.5px;
}

.v2-slots__note { margin-bottom: 12px; }

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

/* Dolu saat (kapasite doldu ya da işletme kapattı — müşteriye ikisi aynı): devre dışı radyo, "Dolu" etiketi. */
.v2-slot.is-full {
    gap: 1px;
    background: transparent;
    border-style: dashed;
    border-color: var(--v2-ink-4);
    color: var(--v2-ink-3);
    cursor: default;
}

.v2-slot.is-full > input { cursor: default; }

.v2-slot.is-full:hover { border-color: var(--v2-ink-4); }

.v2-slot.is-full .v2-slot__time {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.v2-slot__state {
    font-family: var(--v2-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════ 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;
    }

    /*
        Bekleme halkası süs değil durum bilgisi: dönmezse "gönderiliyor" ile "takıldı" ayırt edilmiyor.
        Yukarıdaki kural onu da bir kez 1 ms'de döndürüp durduruyordu — bu makinede ve animasyonları
        kapatan her kullanıcıda halka donuk kalıyordu (18 Eylül 2026). Yalnızca o istisna, biraz yavaş.
    */
    .v2 .v2-btn.is-pending::before {
        animation-duration: 900ms !important;
        animation-iteration-count: infinite !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; }

    /* Takvimdeki çubuğun kayması ve anahtarın topuzu hareket: yerinde değişiyor. */
    .v2-week__bar,
    .v2-switch::before { transition: none; }

    /* Ç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; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Araç kimliği (teslim paketi design_handoff_arac_kimligi; web 28 Eylül 2026)

   Mobilin M1–M7 ve B1–B7 parçalarının web karşılığı. Ölçü ve renkler paketin §6–§7.0'ından (mobille aynı):
     · Plaka rozeti koyu temada da BEYAZ — gerçek plaka gibi; yalnızca kenar tonu değişiyor.
     · Kehribar = işletmeye ait bilgi (verilen ad, not, "sahibi değişti"). Dolu kehribar üstündeki yazı beyaz değil
       koyu mürekkep (#2E1D00): beyaz #DE9A12'de 2,4:1 kalıyordu.
     · Aracın rengi satır içi stil değil (CSP style-src 'self'): renk noktası 12 sınıf, ikonun gövdesi SVG'nin fill
       özniteliği (sunum özniteliği CSP'ye takılmıyor).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
    --v2-biz-bg: linear-gradient(160deg, #FEF7E6, #FBEDD0);
    --v2-biz-brd: #F3DAA6;
    --v2-biz-ink: #5A3B00;
    --v2-biz-label: #8A5A05;
    --v2-biz-name: #2E1D00;
    --v2-biz-line: rgba(138, 90, 5, 0.18);
    --v2-biz-field: #FFFCF5;
    --v2-biz-focus: #DE9A12;
    --v2-biz-glow: rgba(242, 179, 61, 0.2);
    --v2-biz-chip: #FAE6BF;
    --v2-biz-chip-brd: #F0CF8C;
    --v2-biz-ghost: rgba(255, 255, 255, 0.7);
    --v2-biz-fill: linear-gradient(135deg, #F2B33D, #DE9A12);
    --v2-biz-fill-ink: #2E1D00;
    --v2-lp-brd: #22313A;
    --v2-dot-ring: rgba(10, 42, 46, 0.32);
    --v2-vicon-bg: linear-gradient(170deg, #FFFFFF, #E6EFF2);
    --v2-vicon-brd: #DCE6EA;
    --v2-vicon-body: rgba(10, 42, 46, 0.55);
    --v2-vtype-bg: #EDF3F4;
    --v2-vid-bg: #FFFFFF;
    --v2-vid-brd: #DCE6EA;
    --v2-vid-ink: #2B363F;
}

:root[data-theme="dark"] {
    --v2-biz-bg: linear-gradient(160deg, #392B10, #2B2009);
    --v2-biz-brd: #5A4418;
    --v2-biz-ink: #F5D48A;
    --v2-biz-label: #F2C978;
    --v2-biz-name: #FFF3D6;
    --v2-biz-line: rgba(242, 201, 120, 0.2);
    --v2-biz-field: #2A2110;
    --v2-biz-focus: #F2B33D;
    --v2-biz-glow: rgba(242, 179, 61, 0.24);
    --v2-biz-chip: #3A2C10;
    --v2-biz-chip-brd: #6B5220;
    --v2-biz-ghost: rgba(255, 255, 255, 0.08);
    --v2-lp-brd: #0A1418;
    --v2-dot-ring: rgba(255, 255, 255, 0.42);
    --v2-vicon-bg: linear-gradient(170deg, #1A262D, #121C22);
    --v2-vicon-brd: #26313A;
    --v2-vicon-body: rgba(255, 255, 255, 0.4);
    --v2-vtype-bg: #1A242B;
    --v2-vid-bg: #1F2B32;
    --v2-vid-brd: #26313A;
    --v2-vid-ink: #D5DEE3;
}

/* ── Plaka rozeti (üç boy: başlık 32, satır 27, küçük 22) ─────────────────────────────────────── */

.v2-lp {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 27px;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 6px;
    background: #FFFFFF;
    border: 1.3px solid var(--v2-lp-brd);
    box-shadow: 0 1px 2px rgba(4, 22, 27, 0.08);
}

.v2-lp__tr {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 0 0 12px;
    padding-bottom: 3px;
    background: #1D4FB8;
    color: #FFFFFF;
    font-family: var(--v2-display);
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
}

.v2-lp__no {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-family: var(--v2-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #0A1418;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.v2-lp--title { height: 32px; }
.v2-lp--title .v2-lp__tr { flex-basis: 14px; font-size: 7px; }
.v2-lp--title .v2-lp__no { padding: 0 10px; font-size: 16.5px; }

.v2-lp--sm { height: 22px; border-radius: 4.5px; border-width: 1.2px; box-shadow: none; }
.v2-lp--sm .v2-lp__tr { flex-basis: 8px; font-size: 0; }
.v2-lp--sm .v2-lp__no { padding: 0 6px; font-size: 11.5px; }

/* ── Renk noktası ───────────────────────────────────────────────────────────────────────────────── */

.v2-cdot {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--v2-dot-ring);
    vertical-align: middle;
}

.v2-cdot--lg { width: 14px; height: 14px; }
.v2-cdot--xl { width: 28px; height: 28px; }

.v2-cdot--white { background: #F4F6F7; }
.v2-cdot--black { background: #15181B; }
.v2-cdot--gray { background: #7C858C; }
.v2-cdot--silver { background: #C3C9CE; }
.v2-cdot--red { background: #C62828; }
.v2-cdot--blue { background: #1E6FD9; }
.v2-cdot--navy { background: #1B2A4A; }
.v2-cdot--green { background: #2E7D4F; }
.v2-cdot--brown { background: #9A7B5B; }
.v2-cdot--yellow { background: #E7C12A; }
.v2-cdot--orange { background: #E57A1F; }
.v2-cdot--other { background: conic-gradient(#C62828, #E7C12A, #2E7D4F, #1E6FD9, #7457F0, #C62828); }

/* ── Araç ikonu: tipine göre çizilmiş, aracın renginde (1b) ─────────────────────────────────────── */

.v2-vicon {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 50px;
    border-radius: 16px;
    background: var(--v2-vicon-bg);
    border: 1px solid var(--v2-vicon-brd);
}

.v2-vicon > svg { width: 42px; height: 42px; overflow: visible; }

.v2-vicon--sm {
    flex-basis: 34px;
    width: 34px;
    height: 30px;
    border-radius: 10px;
}

.v2-vicon--sm > svg { width: 24px; height: 24px; }

.v2-vicon__body { stroke: var(--v2-vicon-body); stroke-width: 0.8; stroke-linejoin: round; }
.v2-vicon__glass { fill: rgba(255, 255, 255, 0.82); stroke: rgba(10, 42, 46, 0.35); stroke-width: 0.5; }
.v2-vicon__wheel { fill: #1B262C; }
.v2-vicon__hub { fill: #AEBBC2; }
.v2-vicon__ring { fill: none; stroke: #1B262C; stroke-width: 1.7; }
.v2-vicon__line { fill: none; stroke: #1B262C; stroke-width: 1.5; stroke-linecap: round; }

:root[data-theme="dark"] .v2-vicon__ring,
:root[data-theme="dark"] .v2-vicon__line { stroke: #AEBBC2; }

/* Canlı araç (şu an yıkamada): sağ üst köşede mavi nokta, kartın renginde halka. */
.v2-vicon.is-live::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v2-blue);
    box-shadow: 0 0 0 2.5px var(--v2-card-solid);
}

/* ── Araç çipleri (renk, marka model, tip, ŞİRKET) ─────────────────────────────────────────────── */

.v2-vchips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.v2-vchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    height: 28px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--v2-vid-bg);
    border: 1px solid var(--v2-vid-brd);
    color: var(--v2-vid-ink);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.v2-vchip > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.v2-vchip--type {
    background: var(--v2-vtype-bg);
    color: var(--v2-ink-3);
}

.v2-vchip--fleet {
    border-color: transparent;
    background: linear-gradient(135deg, #7B5CF5, #5B3FD4);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

/* ── İşletme satırları: ad (kalın) › beyan (renk noktası) › tip (soluk) ──────────────────────────── */

.v2-vline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    line-height: 1.25;
}

.v2-vline__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-vline--name .v2-vline__text {
    font-family: var(--v2-display);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-vline--decl .v2-vline__text {
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-2);
}

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

/* "SAHİBİ DEĞİŞTİ": kehribar üstünde koyu mürekkep. */
.v2-ownerchip {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 20px;
    padding: 0 7px;
    border-radius: 7px;
    background: var(--v2-biz-chip);
    border: 1px solid var(--v2-biz-chip-brd);
    color: var(--v2-biz-name);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    white-space: nowrap;
}

/* Küçük araç satırı (B7): küçük rozet + tek satır etiket. */
.v2-vrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.v2-vrow > .v2-vline { flex: 1 1 auto; }

.v2-vrow .v2-vline--name .v2-vline__text { font-size: 13.5px; }

.v2-vrow__trail {
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--v2-ink-3);
    white-space: nowrap;
}

/* ── Kehribar blok: işletmenin araca verdiği ad ve not (B2, B4) ─────────────────────────────────── */

.v2-biz {
    display: grid;
    gap: 8px;
    padding: 13px 14px;
    border-radius: 16px;
    background: var(--v2-biz-bg);
    border: 1px solid var(--v2-biz-brd);
}

.v2-biz__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.v2-biz__caps {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--v2-biz-label);
}

.v2-biz__head > .v2-biz__caps { flex: 1 1 auto; }

.v2-biz__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--v2-biz-name);
}

.v2-biz__name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-biz__text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--v2-biz-ink);
    overflow-wrap: anywhere;
}

.v2-biz__note {
    display: flex;
    gap: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--v2-biz-line);
}

.v2-biz__note > svg { flex: 0 0 15px; margin-top: 2px; color: var(--v2-biz-label); }

.v2-biz__editor {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-biz-label);
}

.v2-biz__invite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.v2-biz__invite > .v2-biz__text { flex: 1 1 220px; }

/* Kehribar düğmeler: "Düzenle" (hayalet) ve "Adlandır" (dolu, koyu mürekkep). */
.v2-bizbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 13px;
    border-radius: 10px;
    border: 1px solid var(--v2-biz-chip-brd);
    background: var(--v2-biz-ghost);
    color: var(--v2-biz-name);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui), filter var(--v2-dur) var(--v2-ease-ui);
}

.v2-bizbtn:hover { border-color: var(--v2-biz-focus); }

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

.v2-bizbtn--fill {
    height: 36px;
    border-color: transparent;
    background: var(--v2-biz-fill);
    color: var(--v2-biz-fill-ink);
    font-weight: 800;
    box-shadow: var(--v2-amber-shadow);
}

.v2-bizbtn--fill:hover { box-shadow: var(--v2-amber-shadow-hi); filter: brightness(1.03); }

.v2-app--musteri .v2-bizbtn { min-height: 40px; }

/* Kehribar kenarlı alan: işletmenin yazdığı ad ve not ("Müşteri görmez"). */
.v2-field--biz .v2-field__label { color: var(--v2-biz-label); }

.v2-field--biz:focus-within .v2-field__label { color: var(--v2-biz-label); }

.v2-field--biz .v2-field__input {
    background: var(--v2-biz-field);
    border-color: var(--v2-biz-brd);
}

.v2-field--biz .v2-field__input:hover { border-color: var(--v2-biz-focus); }

.v2-field--biz .v2-field__input:focus {
    border-color: var(--v2-biz-focus);
    background: var(--v2-biz-field);
    box-shadow: 0 0 0 4px var(--v2-biz-glow);
}

.v2-field--biz .v2-field__line { background: linear-gradient(90deg, #F2B33D, #DE9A12); }

/* Alanın üst satırı: etiket solda, sayaç sağda ("12 / 40"). */
.v2-field__count {
    margin: 0 2px 8px auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

.v2-field--biz .v2-field__count { color: var(--v2-biz-label); }

textarea.v2-field__input {
    height: auto;
    min-height: 96px;
    padding-block: 13px;
    line-height: 1.5;
    resize: vertical;
}

/* Kilit simgeli ipucu ("Yalnızca siz görürsünüz…", "Müşteri görmez…"). */
.v2-lockhint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--v2-ink-3);
}

.v2-lockhint > svg { flex: 0 0 14px; margin-top: 1px; }

.v2-lockhint--biz { color: var(--v2-biz-label); }

/* ── NOT işareti ve şeridi (B1): kart başına aç / kapat, betiksiz (onay kutusu + etiket) ──────── */

.v2-notetoggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.v2-notechip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 28px;
    padding: 0 9px;
    border-radius: 9px;
    background: var(--v2-biz-chip);
    border: 1px solid var(--v2-biz-chip-brd);
    color: var(--v2-biz-name);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-notechip:hover { border-color: var(--v2-biz-focus); }

.v2-notetoggle:checked ~ * .v2-notechip {
    background: #F2B33D;
    border-color: #F2B33D;
    color: #2E1D00;
}

.v2-notetoggle:focus-visible ~ * .v2-notechip { outline: 2px solid var(--v2-biz-focus); outline-offset: 2px; }

.v2-notestrip {
    display: none;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--v2-biz-bg);
    border: 1px solid var(--v2-biz-brd);
    color: var(--v2-biz-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.v2-notestrip > svg { flex: 0 0 15px; margin-top: 2px; color: var(--v2-biz-label); }

.v2-notetoggle:checked ~ .v2-notestrip,
.v2-notestrip--open { display: flex; }

/* ── İşletmenin araç başlığı (B1 sıra kartı, B4 yıkama detayı) ────────────────────────────────── */

.v2-vhead {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
}

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

/* ── Plaka alanı (B2, M2): plaka görünümünde giriş + kare sorgu düğmesi ────────────────────────── */

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

.v2-platein {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 54px;
    overflow: hidden;
    border-radius: 12px;
    background: #FFFFFF;
    border: 2px solid var(--v2-lp-brd);
    transition: box-shadow var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-platein:focus-within {
    border-color: var(--v2-acc-deep);
    box-shadow: 0 0 0 4px var(--v2-acc-soft);
}

.v2-platein__tr {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 0 0 24px;
    padding-bottom: 7px;
    background: #1D4FB8;
    color: #FFFFFF;
    font-family: var(--v2-display);
    font-size: 9px;
    font-weight: 700;
}

.v2-platein__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    outline: none;
    background: transparent;
    color: #0A1418;
    font-family: var(--v2-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.v2-platein__input::placeholder {
    color: #9AA8AE;
    font-weight: 700;
    text-transform: none;
    opacity: 1;
}

.v2-platein--locked { background: #F7FAFB; }

.v2-platein--locked .v2-platein__input { color: #3B4C54; }

.v2-platein__lock {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    color: #55666E;
}

.v2-iconbtn {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--v2-grad-btn);
    color: var(--v2-acc-ink);
    cursor: pointer;
    box-shadow: var(--v2-btn-shadow);
    transition: box-shadow var(--v2-dur) var(--v2-ease-ui), filter var(--v2-dur) var(--v2-ease-ui);
}

.v2-iconbtn:hover { box-shadow: var(--v2-btn-shadow-hi); filter: brightness(1.04); }

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

.v2-iconbtn[aria-busy="true"] > svg { display: none; }

.v2-iconbtn[aria-busy="true"]::before {
    content: "";
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 2.4px solid currentColor;
    border-right-color: transparent;
    animation: v2-spin 900ms linear infinite;
}

@keyframes v2-spin { to { rotate: 360deg; } }

/* ── Tip çipleri ve renk seçici (gerçek radyo: betiksiz ve klavyeyle çalışıyor) ─────────────────── */

.v2-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.v2-choice__opt {
    position: relative;
    display: inline-flex;
}

.v2-choice__opt > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.v2-choice__face {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 12px;
    background: var(--v2-vid-bg);
    border: 1.5px solid var(--v2-vid-brd);
    color: var(--v2-vid-ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-choice__opt > input:checked + .v2-choice__face {
    border-color: transparent;
    background: var(--v2-grad-pill);
    color: #04161B;
}

.v2-choice__opt > input:focus-visible + .v2-choice__face { outline: 2px solid var(--v2-focus); outline-offset: 2px; }

.v2-choice__opt > input:disabled { cursor: not-allowed; }

.v2-choice__opt > input:disabled + .v2-choice__face { opacity: 0.55; }

/* Renk: üç kolonlu çipler (seçilide turkuaz kenar, dolgu açık). */
.v2-choice--colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.v2-choice--colors .v2-choice__opt { display: flex; }

.v2-choice--colors .v2-choice__face {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 10px;
    font-size: 12px;
}

.v2-choice--colors .v2-choice__face > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.v2-choice--colors .v2-choice__opt > input:checked + .v2-choice__face {
    background: var(--v2-acc-soft);
    border-color: var(--v2-acc-mid);
    color: var(--v2-ink);
}

@media (min-width: 640px) {
    .v2-choice--colors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Seçimi kaldırılabilen radyo ("renk yok", "marka yok"): gizli, varsayılan. */
.v2-choice__none { position: absolute; opacity: 0; pointer-events: none; }

/* ── Kutu başlığında araç (B4, M7) ─────────────────────────────────────────────────────────────── */

.v2-vident {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.v2-vident__body {
    display: grid;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.v2-vident__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--v2-ink);
}

.v2-vident__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

/* Hareket azaltıldığında dönen bekleme halkası yine dönüyor (durum bilgisi; bkz. .v2-btn.is-pending). */
@media (prefers-reduced-motion: reduce) {
    .v2-iconbtn[aria-busy="true"]::before { animation-duration: 900ms !important; animation-iteration-count: infinite !important; }
}

/* ── Yeni Kayıt'ın araç bölümü (B2) ────────────────────────────────────────────────────────────── */

.v2-kayitarac {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.v2-kayitarac:empty { display: none; }

/* Üst boşluk dışarıdan (.v2-mt, .v2-mt-lg) verilebilsin: yalnızca yan ve alt boşluk sıfırlanıyor. */
.v2-kayitarac__set {
    margin-inline: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.v2-kayitarac__set > legend { padding: 0; }

/* "● KAYITLI ARAÇ" — yeşil. */
.v2-found {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--v2-ok-txt);
}

.v2-found__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--v2-ok);
}

/* Müşteri satırı: kişi kutusu, ad + sahiplik çipi, bu işletmedeki yıkamalar. */
.v2-cust {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

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

.v2-cust__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.v2-cust__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-family: var(--v2-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-cust__name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.v2-vchip--xs {
    height: 22px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

/* Müşterinin beyanı. */
.v2-decl {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.v2-decl__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.v2-decl__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--v2-ink);
}

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

/* ── Araç kartı (B3): sayfada kutunun içinde, betikli yolda pencerede ─────────────────────────── */

.v2-flow--640 { max-width: 640px; }

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

.v2-cardform__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.v2-cardform__titles {
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.v2-cardform__title {
    font-family: var(--v2-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v2-ink);
}

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

.v2-sheetclose {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink-2);
    transition: border-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-cardform__strip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px 12px;
    border-radius: 14px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
}

.v2-cardform__decl {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink-2);
}

.v2-cardform__form {
    display: grid;
    gap: 16px;
}

.v2-cardform__acts {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10px;
}

.v2-field__input--bold {
    font-family: var(--v2-display);
    font-size: 15.5px;
    font-weight: 700;
}

/* Sahibi değişti uyarısı: dolu kehribar "!" + iki satır. */
.v2-ownerwarn {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--v2-biz-bg);
    border: 1px solid var(--v2-biz-brd);
    color: var(--v2-biz-ink);
    font-size: 12.5px;
    line-height: 1.45;
}

.v2-ownerwarn strong { display: block; color: var(--v2-biz-name); font-weight: 700; }

.v2-ownerwarn__mark {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--v2-biz-fill);
    color: var(--v2-biz-fill-ink);
    font-size: 13px;
    font-weight: 800;
}

/* Son düzenleyen: baş harfler + metin. */
.v2-editor {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

.v2-editor__initials {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
    font-size: 10px;
    font-weight: 800;
}

/* Kilitli değer (değiştirilemeyen tip, plaka). */
.v2-lockedrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border-radius: 13px;
    background: var(--v2-sunken);
    border: 1px dashed var(--v2-field-brd);
    color: var(--v2-ink-2);
    font-size: 14px;
    font-weight: 600;
}

.v2-lockedrow > svg { color: var(--v2-ink-3); }

/* Pencere: araç kartı gibi betikle açılan formlar (mobildeki alt sayfanın karşılığı). */
.v2-sheet {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--v2-card-brd);
    border-radius: 24px;
    background: var(--v2-card-solid);
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-hi);
}

.v2-sheet__body { padding: 22px; }

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

@media (max-width: 560px) {
    .v2-sheet {
        width: 100vw;
        max-width: 100vw;
        margin: auto 0 0;
        border-radius: 24px 24px 0 0;
        max-height: calc(100dvh - 24px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .v2-sheet[open] { animation: v2-sheet-in 260ms var(--v2-ease) both; }
}

@keyframes v2-sheet-in {
    from { translate: 0 14px; }
}

/* Sıra kartının kimlik sütunu araç başlığıyla (B1): satırlar sıkı, not şeridi altta. */
.v2-queue__ident.v2-vhead { gap: 4px; }

.v2-queue__ident.v2-vhead > .v2-vhead__top { margin-bottom: 2px; }

.v2-queue__ident.v2-vhead > :is(.v2-queue__stage, .v2-queue__where, .v2-queue__sub) { margin-top: 0; }

.v2-queue__ident.v2-vhead > .v2-notestrip { margin-top: 6px; }

/* ── Araç ara (B6): arama kutusu (panelin üstü ve sayfa) ve sonuç satırları ──────────────────── */

.v2-vsearch {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 50px;
    padding: 0 6px 0 16px;
    border-radius: 16px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow);
    color: var(--v2-ink-3);
    transition: border-color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-vsearch > svg { flex: 0 0 auto; }

.v2-vsearch__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--v2-ink);
    font-family: inherit;
    font-size: 14.5px;
}

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

.v2-vsearch--page {
    height: 54px;
    background: var(--v2-field);
    border-color: var(--v2-field-brd);
    box-shadow: none;
}

.v2-page .v2-flow > .v2-vsearch { margin-bottom: -2px; }

.v2-ksonuc__head { margin-bottom: 10px; }

.v2-krow {
    border-radius: 16px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    transition: border-color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-krow[open] { border-color: var(--v2-acc-mid); box-shadow: var(--v2-shadow-mid); }

.v2-krow__sum {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

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

.v2-krow__sum:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; border-radius: 16px; }

.v2-krow__body {
    display: grid;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.v2-krow__title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.v2-krow__title > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-krow__name { font-family: var(--v2-display); font-size: 14.5px; font-weight: 700; color: var(--v2-ink); }

.v2-krow__decl { font-size: 13.5px; font-weight: 600; color: var(--v2-ink-2); }

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

.v2-krow__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-krow__sub > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v2-krow__note {
    display: block;
    padding: 6px 9px;
    border-radius: 9px;
    background: var(--v2-biz-bg);
    border: 1px solid var(--v2-biz-brd);
    color: var(--v2-biz-ink);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-krow__last {
    display: grid;
    justify-items: end;
    gap: 3px;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-ink-2);
}

.v2-krow__chev {
    flex: 0 0 auto;
    color: var(--v2-ink-3);
    transition: rotate var(--v2-dur) var(--v2-ease-ui);
}

.v2-krow[open] .v2-krow__chev { rotate: 180deg; }

.v2-krow__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
}

@media (max-width: 520px) {
    .v2-krow__last .v2-micro { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-krow__chev { transition: none; }
}

/* ── Geçmiş'in araç özeti (B5): koyu turkuaz özellik kartı, iki temada da koyu (mobildeki özellik kartı gibi) ─────── */

.v2-vsum {
    position: relative;
    display: grid;
    gap: 8px;
    overflow: hidden;
    padding: 20px 22px 22px;
    border-radius: 22px;
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(46, 230, 240, 0.28) 0%, rgba(46, 230, 240, 0) 70%),
        linear-gradient(140deg, #0B6E79 0%, #075560 55%, #063A44 100%);
    color: #FFFFFF;
    box-shadow: 0 22px 44px -28px rgba(6, 58, 68, 0.7);
}

:root[data-theme="dark"] .v2-vsum {
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(46, 230, 240, 0.16) 0%, rgba(46, 230, 240, 0) 70%),
        linear-gradient(140deg, #0F4F58 0%, #0B3A42 55%, #082A31 100%);
    border: 1px solid rgba(46, 230, 240, 0.14);
}

.v2-vsum__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.v2-vsum__edit {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-vsum__edit:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }

.v2-vsum__edit:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.v2-vsum__title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-family: var(--v2-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.v2-vsum__title > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v2-vsum__sub {
    font-size: 13px;
    font-weight: 600;
    color: #B9F1F5;
}

.v2-vsum__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
}

.v2-vsum__m {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.v2-vsum__m > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--v2-display);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.v2-vsum__m > span { font-size: 11.5px; font-weight: 600; color: #CFEFF1; }

/* Adım listesinde araç satırı (B7): nokta yerine küçük plaka rozeti + etiket. */
.v2-stepline--vehicle { grid-template-columns: minmax(0, 1fr) auto; }

.v2-vhead > .v2-vline { min-height: 18px; }

.v2-review__vehicle { margin-top: 8px; }

.v2-metric__vehicle { display: block; margin-top: 10px; }

/* ── Araçlarım kartı (M1, M6): mobildeki kartın dili ───────────────────────────────────────────── */

.v2-vcards {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    align-items: start;
}

.v2-vcard {
    position: relative;
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    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-vcard:hover { border-color: var(--v2-acc-mid); box-shadow: var(--v2-shadow-mid); }

/* Canlı: araç şu an tezgâhta — turkuaz kenar ve hafif ışık (mobildeki canlı cam kabuk). */
.v2-vcard--live {
    background:
        radial-gradient(70% 90% at 0% 0%, rgba(46, 230, 240, 0.16) 0%, rgba(46, 230, 240, 0) 70%),
        var(--v2-card);
    border-color: var(--v2-acc-brd);
    box-shadow: 0 16px 34px -24px rgba(11, 110, 121, 0.55);
}

.v2-vcard__top {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.v2-vcard__id {
    display: grid;
    justify-items: start;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

/* En çok iki satır: dar ekranda kademe çipinin yanında tek satır "Depo kamy…" diye kesiliyordu. */
.v2-vcard__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v2-ink);
}

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

.v2-vcard__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    align-self: flex-start;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--v2-card);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink-2);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.v2-vcard__state.is-live {
    background: var(--v2-blue-fill);
    border-color: transparent;
    color: #FFFFFF;
    letter-spacing: 0.6px;
    font-size: 10.5px;
    font-weight: 800;
}

.v2-vcard__state.is-new {
    background: var(--v2-acc-soft);
    border-color: transparent;
    color: var(--v2-acc-txt);
    letter-spacing: 0.6px;
    font-size: 10.5px;
    font-weight: 800;
}

.v2-vcard__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFFFFF;
}

@media (prefers-reduced-motion: no-preference) {
    .v2-vcard__pulse { animation: v2-nabiz 1.6s var(--v2-ease-ui) infinite; }
}

@keyframes v2-nabiz {
    0%, 100% { scale: 1; opacity: 1; }
    50% { scale: 0.6; opacity: 0.55; }
}

.v2-vcard__live {
    display: grid;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--v2-acc-soft);
    border: 1px solid var(--v2-acc-brd);
}

.v2-vcard__live .v2-qsteps__bar { margin-top: 8px; background: rgba(11, 110, 121, 0.14); }

:root[data-theme="dark"] .v2-vcard__live .v2-qsteps__bar { background: rgba(255, 255, 255, 0.1); }

.v2-vcard__stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-vcard__count {
    font-size: 12px;
    font-weight: 700;
    color: var(--v2-acc-txt);
    font-variant-numeric: tabular-nums;
}

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

.v2-vcard__follow { justify-self: start; margin-top: 6px; font-size: 12.5px; font-weight: 700; }

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

.v2-vcard__acts > form { margin: 0; }

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

/* "Aracı tanıt" daveti: kesikli çerçeve, turkuaz bağlantı. */
.v2-nudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1.5px dashed var(--v2-dash);
    color: var(--v2-ink-2);
    font-size: 12.5px;
    line-height: 1.45;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-nudge__text { flex: 1 1 220px; }

.v2-nudge__go {
    font-weight: 800;
    color: var(--v2-acc-txt);
    white-space: nowrap;
}

.v2-nudge__go::after { content: " →"; }

/* ── Araç Ekle / Aracı Düzenle (M2, M3) ────────────────────────────────────────────────────────── */

.v2-fields--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Mod seçici tam genişlikte; bağlantı olan seçenek (sayfa) aria-current ile işaretli. */
.v2-seg--wide { display: flex; }

.v2-seg--wide > .v2-seg__opt { flex: 1 1 0; justify-content: center; padding-block: 11px; font-size: 13px; }

.v2-seg__opt[aria-current="true"],
.v2-seg__opt[aria-current="true"]:hover {
    background: var(--v2-grad-pill);
    color: #04161B;
    box-shadow: 0 6px 14px -8px rgba(11, 110, 121, 0.5);
}

/* "LİSTEDE BÖYLE GÖRÜNECEK": kesikli çerçevede Araçlarım kartının üst satırı. */
.v2-preview-vcard {
    display: grid;
    gap: 12px;
    padding: 15px 16px 16px;
    border-radius: 20px;
    border: 1.5px dashed var(--v2-dash);
    background: var(--v2-sunken);
}

.v2-onizleme__ikonlar { display: contents; }

.v2-tanit {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.v2-tanit__legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-bottom: 4px;
}

.v2-tanit__opt {
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--v2-sunken);
    border: 1px solid var(--v2-field-brd);
    color: var(--v2-ink-3);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.v2-tanit__rowlabel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    width: 100%;
    padding: 0;
}

.v2-tanit__hint {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--v2-ink-3);
}

.v2-tanit__picked {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--v2-ink-2);
}

/* Betikli yolda "Diğer" seçilmedikçe markanın adı alanı gizli; betiksiz her zaman görünür ("listede yoksa"). */
.js [data-marka-diger-alani][data-gizli] { display: none; }

.js .v2-tanit__nojs { display: none; }

/* Renk daireleri (M3): 32 piksellik daire, seçilide 3 px boşluk + 2 px turkuaz halka; ad altta. */
.v2-choice--circles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-choice--circles .v2-choice__face {
    width: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid transparent;
    background: transparent;
}

.v2-choice--circles .v2-choice__face > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.v2-choice--circles .v2-choice__opt:hover .v2-choice__face { border-color: var(--v2-field-brd); }

.v2-choice--circles .v2-choice__opt > input:checked + .v2-choice__face {
    background: transparent;
    border-color: var(--v2-acc-mid);
}

.v2-lockedrow--plate { height: 52px; border-style: solid; }

/* Formun sonunda eylemler: vazgeç solda, birincil sağda; dar ekranda birincil tam genişlik. */
.v2-submitbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.v2-submitbar > .v2-btn--lg { min-width: 200px; }

@media (max-width: 520px) {
    .v2-submitbar > .v2-btn--lg { flex: 1 1 100%; }
}

.v2-deletebar {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* ── Marka seçici (M4): alan görünümlü düğme ve pencere ────────────────────────────────────────── */

.v2-pickbtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: start;
    cursor: pointer;
}

.v2-pickbtn > svg { flex: 0 0 auto; color: var(--v2-ink-3); }

.v2-pickbtn__value { font-weight: 600; color: var(--v2-ink); }

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

.v2-brandsheet .v2-sheet__body { display: grid; gap: 4px; }

.v2-brandsheet__list {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    max-height: min(58dvh, 520px);
    overflow: auto;
    padding-right: 2px;
}

.v2-brandsheet__head { margin: 12px 2px 6px; }

.v2-brandsheet__none { margin: 10px 2px; }

.v2-brandgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.v2-brandtile,
.v2-brandrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 13px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-sunken);
    color: var(--v2-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-brandrow {
    border-color: transparent;
    background: transparent;
    border-radius: 11px;
}

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

.v2-brandtile[aria-selected="true"],
.v2-brandrow[aria-selected="true"] { border-color: var(--v2-acc-mid); background: var(--v2-acc-soft); color: var(--v2-acc-txt); }

.v2-brandtile:focus-visible,
.v2-brandrow:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 1px; }

.v2-brandrow--other {
    margin-top: 10px;
    border: 1.5px dashed var(--v2-dash);
    font-weight: 500;
}

.v2-brandsheet__clear {
    justify-self: center;
    margin: 10px 0 2px;
    padding: 6px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

/* Randevu al'da araç satırı (M5): küçük rozet + renk noktası + marka model ya da tip. */
.v2-pick__meta--vehicle {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.v2-pick__meta--vehicle > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.v2-pick > .v2-vchip { align-self: center; margin-inline-start: auto; }

.v2-facts__value--vehicle {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════ Yasal metinler — kullanıcı (paket design_handoff_yasal_metinler 1a–1k) */

/*
    Onay kutuları (1a, 1b): iki ayrı satır, ince ayraçlı yumuşak kutuda. Kutu 22 px, köşe 7 (genel .v2-check 20 px). Bağlantı metnin
    içinde, altı çizili ve kalın; kutuyu işaretlemiyor, okuyucuyu açıyor.
*/
.v2-consents {
    margin-top: 18px;
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--v2-soft);
    border: 1px solid var(--v2-field-brd);
}

.v2-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
}

.v2-consents > .v2-consent + .v2-consent { border-top: 1px solid var(--v2-line-soft); }

.v2-consent .v2-check {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    border-radius: 7px;
}

.v2-consent__text {
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--v2-ink);
    cursor: pointer;
}

.v2-consent__text--strong {
    font-size: 14px;
    font-weight: 600;
}

.v2-consent__text strong { font-weight: 600; }

.v2-consent__doc {
    color: var(--v2-acc-txt);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.v2-consent__doc:hover { text-decoration-thickness: 2px; }

/* Yeniden onay kartında kutu kartın alt ayraçlı satırı. */
.v2-consent--card {
    margin-top: 14px;
    padding: 14px 0 0;
    border-top: 1px solid var(--v2-line-soft);
}

.v2-consents__info { margin-top: 12px; }

.v2-consents__hint,
.v2-consents__foot {
    margin: 9px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-consents__foot {
    margin-top: 14px;
    font-size: 11.5px;
}

/* Kutular işaretlenene kadar gönder düğmesi pasif (yasal.js; sunucu ayrıca denetliyor). */
.v2-btn[data-onay-gonder]:disabled {
    background: var(--v2-field-brd);
    color: var(--v2-ink-3);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.v2-btn[data-onay-gonder]:disabled::after { opacity: 0; }

/* ── Onay kabuğu (1d, 1k): logo ve ad — menü yok ─────────────────────────────────────────────────── */

.v2-onaykabuk {
    min-height: 100dvh;
    background: var(--v2-page);
    background-attachment: fixed;
}

.v2-onaybar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 32px;
    border-bottom: 1px solid var(--v2-stage-line);
    background: var(--v2-stage-nav);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.v2-onaybar__kim {
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--v2-ink-2);
}

/* Tema seçici en sağda; ad yoksa markanın hemen ardından sağa itiliyor. */
.v2-onaybar .tema { flex: none; margin-left: 4px; }

.v2-onaybar .v2-brand + .tema { margin-left: auto; }

@media (max-width: 560px) {
    .v2-onaybar { padding: 0 16px; }
    .v2-onaybar .v2-brand__name { display: none; }
}

/* ── Yeniden onay (1d) ──────────────────────────────────────────────────────────────────────────── */

.v2-reconsent {
    display: grid;
    gap: 16px;
    width: min(680px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 44px;
}

.v2-reconsent > form { display: grid; gap: 16px; }

.v2-reconsent__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.v2-reconsent__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 17px;
    background: linear-gradient(150deg, rgba(46, 230, 240, 0.22), var(--v2-acc-soft));
    color: var(--v2-acc-txt);
}

.v2-reconsent__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--v2-ink);
}

.v2-reconsent__text {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--v2-ink-2);
    text-wrap: pretty;
}

.v2-reconsent__doc {
    padding: 20px;
    border-radius: 22px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-shadow);
}

.v2-reconsent__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.v2-reconsent__name {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-reconsent__top .v2-chip { padding: 4px 10px; font-size: 11.5px; }

.v2-reconsent__when {
    margin-left: auto;
    font-size: 12px;
    color: var(--v2-ink-3);
}

.v2-reconsent__label { margin: 12px 0 0; }

.v2-changes {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--v2-ink);
}

.v2-reconsent__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
}

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

.v2-reconsent__actions .v2-btn { height: 48px; border-radius: 14px; }

.v2-reconsent__actions .v2-btn:not(.v2-btn--ghost) { padding-inline: 26px; font-size: 15px; }

/* "Onaylamıyorum" / "Sonra" nötr: onaylamamak da eşit bir seçenek, vurgulanmıyor ama gizlenmiyor da. */
.v2-reconsent__actions .v2-btn--ghost { color: var(--v2-ink-2); }

.v2-reconsent__foot {
    margin: 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    color: var(--v2-ink-3);
}

@media (max-width: 560px) {
    .v2-reconsent { padding-top: 24px; }
    .v2-reconsent__title { font-size: 23px; }
    .v2-reconsent__when { margin-left: 0; width: 100%; }
    .v2-reconsent__actions { flex-direction: column-reverse; align-items: stretch; }
    .v2-reconsent__actions .v2-push { margin-left: 0; }
}

/* "Onaylamıyorum" sorusu: sonucu açıkça söyleyen kırmızı kutu, "Çıkış yap" dolu kırmızı. */
.v2-declinebox {
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--v2-bad-bg);
    border: 1px solid var(--v2-bad-brd);
}

.v2-declinebox__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-bad-txt);
}

.v2-declinebox__text {
    margin: 5px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--v2-ink-2);
    text-wrap: pretty;
}

.v2-declinebox__warn { margin-top: 12px; }

.v2-declinebox__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.v2-declinebox__actions .v2-btn { height: 44px; border-radius: 13px; font-size: 13.5px; }

.v2-declinebox__actions .v2-btn--danger {
    border-color: transparent;
    background: var(--v2-bad-fill);
    color: #FFFFFF;
}

.v2-declinebox__actions .v2-btn--danger::after { background: rgba(255, 255, 255, 0.12); }

/* ── Personel engeli (1k) ───────────────────────────────────────────────────────────────────────── */

.v2-waiting {
    display: grid;
    justify-items: center;
    gap: 16px;
    width: min(560px, calc(100% - 32px));
    margin: 0 auto;
    padding: 44px 0 52px;
    text-align: center;
}

.v2-waiting__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 20px;
    background: var(--v2-warn-bg);
    border: 1px solid var(--v2-warn-brd);
    color: var(--v2-warn-txt);
}

.v2-waiting__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--v2-ink);
}

.v2-waiting__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--v2-ink-2);
    text-wrap: pretty;
}

.v2-waiting__text strong { font-weight: 600; color: var(--v2-ink); }

.v2-waiting__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--v2-card);
    border: 1px solid var(--v2-card-brd);
    text-align: left;
    font-size: 13.5px;
}

.v2-waiting__facts dt { color: var(--v2-ink-3); }

.v2-waiting__facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--v2-ink);
}

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

.v2-waiting__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.v2-waiting__actions .v2-btn { height: 46px; border-radius: 13px; }

/* ── Metin okuyucu (1c) ─────────────────────────────────────────────────────────────────────────── */

.v2-sheet--reader {
    width: min(820px, calc(100vw - 32px));
    height: min(640px, calc(100dvh - 48px));
    overflow: hidden;
}

.v2-reader {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--v2-ink);
}

.v2-reader--page {
    width: min(920px, calc(100% - 32px));
    height: auto;
    margin: 28px auto 44px;
    border-radius: 24px;
    background: var(--v2-card-solid);
    border: 1px solid var(--v2-card-brd);
    box-shadow: var(--v2-card-shadow);
    /* clip, hidden değil: hidden kartı kaydırma kabı yapar ve bölüm listesinin yapışkanlığını kartın içine hapsederdi (liste
       metinle birlikte kayıyordu). */
    overflow: clip;
}

.v2-reader__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--v2-line-soft);
}

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

.v2-reader__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.v2-reader__sub-inline {
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-ink-3);
}

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

.v2-reader__close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    border: 1px solid var(--v2-field-brd);
    background: transparent;
    color: var(--v2-ink-2);
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), border-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-reader__close:hover { background: var(--v2-sunken); border-color: var(--v2-acc-brd); }

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

.v2-reader__error { margin: 16px 24px 0; }

.v2-reader__body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
}

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

.v2-reader__toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 14px 18px 24px;
    border-right: 1px solid var(--v2-line-soft);
    overflow: auto;
    font-size: 13px;
}

.v2-reader__toc .v2-micro { margin: 0 0 6px; }

.v2-reader__toc a {
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--v2-ink-2);
    text-decoration: none;
    transition: background-color var(--v2-dur) var(--v2-ease-ui), color var(--v2-dur) var(--v2-ease-ui);
}

.v2-reader__toc a:hover { background: var(--v2-sunken); }

.v2-reader__toc a.is-active {
    background: var(--v2-acc-soft);
    color: var(--v2-acc-txt);
    font-weight: 600;
}

.v2-reader__text {
    min-height: 0;
    padding: 22px 34px;
    overflow: auto;
    scroll-behavior: smooth;
}

.v2-reader--page .v2-reader__text { overflow: visible; }

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

.v2-reader__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--v2-line-soft);
    background: var(--v2-soft);
}

.v2-reader__note {
    flex: 1 1 260px;
    margin: 0;
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

.v2-reader__foot .v2-btn { height: 44px; border-radius: 13px; }

@media (max-width: 720px) {
    .v2-reader__body { grid-template-columns: minmax(0, 1fr); }
    .v2-reader__toc {
        flex-direction: row;
        gap: 6px;
        padding: 10px 16px;
        border-right: none;
        border-bottom: 1px solid var(--v2-line-soft);
        overflow-x: auto;
        white-space: nowrap;
    }
    .v2-reader__toc .v2-micro { display: none; }
    .v2-reader__toc a { flex: none; border: 1px solid var(--v2-field-brd); }
    .v2-reader__text { padding: 18px 20px; }
    .v2-reader__head { padding: 16px 18px; }
    .v2-reader__foot { padding: 12px 18px; }
    .v2-reader__note { display: none; }
    .v2-reader__foot .v2-btn { flex: 1; }
    .v2-sheet--reader { height: calc(100dvh - 24px); }
}

/* Okuyucunun genişliği .v2-sheet'in dar ekran kuralından sonra geldiği için onu eziyordu: telefonda alttan tam genişlik. */
@media (max-width: 560px) {
    .v2-sheet--reader { width: 100vw; }
}

/* Herkese açık gizlilik politikası (/gizlilik-politikasi): tanıtım kabuğunda okuyucunun sayfa görünümü. Bölüm listesi yapışkan
   gezinme çubuğunun (72 px + kenar) altında duruyor; bölüm başlığı da kaydırınca çubuğun altına girmesin. */
.v2-reader--public .v2-legaltext h2 { scroll-margin-top: 92px; }

.v2-reader__changes { margin: 18px 24px 0; }

.v2-reader__related { gap: 6px 18px; }

.v2-reader__related .v2-micro { flex-basis: 100%; margin: 0; }

.v2-reader__related ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
}

@media (min-width: 721px) {
    /* Seçici okuyucunun sayfa kuralından (.v2-reader--page .v2-reader__toc, dosyanın aşağısında) güçlü olmalı. */
    .v2-reader--page.v2-reader--public .v2-reader__toc {
        position: sticky;
        top: 73px;
        align-self: start;
        max-height: calc(100dvh - 73px);
        border-right: none;
    }

    /* Ayırıcı çizgi metnin solunda: yapışkan liste kısa kaldığı için onun kenarı metnin boyunca uzanmıyor. */
    .v2-reader--public .v2-reader__body:not(.v2-reader__body--single) .v2-reader__text { border-left: 1px solid var(--v2-line-soft); }
}

@media (max-width: 720px) {
    .v2-reader__changes { margin: 14px 18px 0; }
}

/* Metnin kendisi: bölüm başlıkları Archivo, paragraflar rahat satır aralığıyla. */
.v2-legaltext {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--v2-ink);
}

.v2-legaltext h2,
.v2-legaltext h3 {
    margin: 18px 0 6px;
    font-family: var(--v2-display);
    font-weight: 700;
    color: var(--v2-ink);
    scroll-margin-top: 12px;
}

.v2-legaltext h2 { font-size: 16px; }

.v2-legaltext h3 { font-size: 14.5px; }

.v2-legaltext > :first-child { margin-top: 0; }

.v2-legaltext p { margin: 0 0 12px; text-wrap: pretty; }

.v2-legaltext ul,
.v2-legaltext ol { margin: 0 0 12px; padding-left: 20px; }

.v2-legaltext li + li { margin-top: 4px; }

.v2-legaltext a {
    color: var(--v2-acc-txt);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Fark: eklenen yeşil, çıkarılan kırmızı üstü çizili; değişmeyenler daralıyor. */
.v2-diff__legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--v2-ink-2);
}

.v2-diff__key {
    padding: 2px 8px;
    border-radius: 6px;
}

.v2-diff__key.is-added { background: var(--v2-ok-bg); color: var(--v2-ok-txt); }

.v2-diff__key.is-removed { background: var(--v2-bad-bg); color: var(--v2-bad-txt); text-decoration: line-through; }

.v2-diff__hint { margin-left: 6px; color: var(--v2-ink-3); }

.v2-diff ins {
    padding: 1px 3px;
    border-radius: 4px;
    background: var(--v2-ok-bg);
    color: var(--v2-ok-txt);
    text-decoration: none;
}

.v2-diff del {
    padding: 1px 3px;
    border-radius: 4px;
    background: var(--v2-bad-bg);
    color: var(--v2-bad-txt);
}

.v2-diff__block.is-added {
    padding: 8px 12px;
    border-left: 3px solid var(--v2-ok);
    border-radius: 0 10px 10px 0;
    background: var(--v2-ok-row);
}

.v2-diff__block.is-removed {
    padding: 8px 12px;
    border-left: 3px solid var(--v2-bad-brd);
    border-radius: 0 10px 10px 0;
    background: var(--v2-bad-bg);
    color: var(--v2-bad-txt);
    text-decoration: line-through;
}

.v2-diff__fold {
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--v2-sunken);
    font-size: 11.5px;
    color: var(--v2-ink-3);
}

/* ── Hesabım → Yasal metinler (1e) ──────────────────────────────────────────────────────────────── */

.v2-legaldocs { padding-block: 8px; }

.v2-legaldocs__for {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v2-ink-3);
}

.v2-legaldoc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 16px 0;
}

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

.v2-legaldoc__body { flex: 1 1 280px; min-width: 0; }

.v2-legaldoc__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    font-family: var(--v2-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-legaldoc__meta {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--v2-ink-3);
}

.v2-consentlog {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 150px;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--v2-ink);
}

.v2-consentlog__time,
.v2-consentlog__ctx { color: var(--v2-ink-3); }

.v2-consentlog__what strong { font-weight: 600; }

.v2-consentlog__what.is-declined { color: var(--v2-bad-txt); }

@media (max-width: 640px) {
    .v2-consentlog { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .v2-consentlog__ctx { margin-bottom: 10px; }
}

/* ── Erken onay şeridi: yürürlüğe girmeyi bekleyen sürüm varken her sayfanın üstünde ─────────────── */

.v2-earlybar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: min(1320px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 11px 16px;
    border-radius: 14px;
    background: var(--v2-warn-bg);
    border: 1px solid var(--v2-warn-brd);
    color: var(--v2-warn-txt);
    font-size: 13.5px;
}

.v2-earlybar > svg { flex: none; }

.v2-earlybar__text { flex: 1 1 240px; min-width: 0; font-weight: 600; }

.v2-earlybar__link {
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--v2-amber-btn);
    color: var(--v2-amber-ink);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

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

/* ── Yazdırma görünümü (PDF): her zaman açık tema, menüsüz ──────────────────────────────────────── */

.v2-printpage {
    margin: 0;
    background: #FFFFFF;
    color: #0A1418;
    font-family: var(--v2-body);
}

.v2-print__bar {
    display: flex;
    justify-content: flex-end;
    max-width: 760px;
    margin: 16px auto 0;
    padding: 0 24px;
}

.v2-print {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 24px 48px;
}

.v2-print__head { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #DCE8EC; }

.v2-print__head h1 { margin: 4px 0; font-family: var(--v2-display); font-size: 24px; }

.v2-print__head p { margin: 2px 0; font-size: 12.5px; color: #55666E; }

.v2-print__brand { font-family: var(--v2-display); font-weight: 700; color: #076C77 !important; }

.v2-print__hash { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }

.v2-print__foot { margin-top: 28px; padding-top: 10px; border-top: 1px solid #DCE8EC; font-size: 11px; color: #55666E; }

.v2-print .v2-legaltext,
.v2-print .v2-legaltext h2,
.v2-print .v2-legaltext h3 { color: #0A1418; }

@media print {
    .v2-print__bar { display: none; }
    .v2-print { padding: 0; }
    .v2-legaltext h2 { break-after: avoid; }
}

/* Okuyucunun kendi sayfasında (betiksiz yol) bölüm listesi metinle kaymasın. */
.v2-reader--page .v2-reader__toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100dvh;
}

@media (max-width: 720px) {
    .v2-reader--page .v2-reader__toc { position: static; max-height: none; }
}

/* ══════════════════════════════════════════════════════════ Yasal metinler — yönetim (paket design_handoff_yasal_metinler 2a–2e) */

:root {
    --v2-dist-ok: #1799A5;
    --v2-dist-old: #F2B33D;
    --v2-dist-none: #B9CCD3;
    --v2-dist-dec: #C83030;
    --v2-fleet-bg: #EEF0FB;
    --v2-fleet-txt: #3940A0;
    --v2-draft-bg: #FEF3DC;
    --v2-draft-brd: #F3DAA6;
    --v2-draft-soft: #FFFBF2;
    --v2-ink-btn: #0A1418;
    --v2-ink-btn-txt: #FFFFFF;
    --v2-version-live: #E4F5F7;
    --v2-version-live-brd: rgba(7, 108, 119, 0.45);
}

:root[data-theme="dark"] {
    --v2-dist-ok: #22BDC9;
    --v2-dist-none: #4C6470;
    --v2-dist-dec: #E05555;
    --v2-fleet-bg: rgba(116, 87, 240, 0.18);
    --v2-fleet-txt: #C9C0FF;
    --v2-draft-bg: rgba(242, 179, 61, 0.16);
    --v2-draft-brd: rgba(242, 179, 61, 0.42);
    --v2-draft-soft: rgba(242, 179, 61, 0.06);
    --v2-ink-btn: #E8F3F5;
    --v2-ink-btn-txt: #04161B;
    --v2-version-live: rgba(46, 230, 240, 0.1);
    --v2-version-live-brd: rgba(91, 233, 242, 0.45);
}

/* Kabuk: markanın yanında "YÖNETİM" (platform yöneticisi). */
.v2-appbar__role {
    flex: none;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--v2-ink-btn);
    color: var(--v2-ink-btn-txt);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

.v2-flow--1180 { max-width: 1180px; }

/* Hap: büyük harfe çevrilmeyen küçük durum etiketi (.v2-tag büyük harf ve daha sıkı). */
.v2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--v2-sunken);
    color: var(--v2-ink-2);
    font-family: var(--v2-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    white-space: nowrap;
}

.v2-pill--xs { padding: 2px 8px; font-size: 10.5px; letter-spacing: 0.3px; }
.v2-pill--ok { background: var(--v2-ok-bg); border-color: var(--v2-ok-brd); color: var(--v2-ok-txt); }
.v2-pill--wait { background: var(--v2-draft-bg); border-color: var(--v2-draft-brd); color: var(--v2-warn-txt); }
.v2-pill--draft { background: var(--v2-draft-bg); color: var(--v2-warn-txt); }
.v2-pill--acc { background: var(--v2-acc-soft); color: var(--v2-acc-txt); }
.v2-pill--muted { background: var(--v2-sunken); border-color: var(--v2-field-brd); color: var(--v2-ink-2); }
.v2-pill--bad { background: var(--v2-bad-bg); border-color: var(--v2-bad-brd); color: var(--v2-bad-txt); }
.v2-pill--fleet { background: var(--v2-fleet-bg); color: var(--v2-fleet-txt); }

/* Koyu birincil (paketin "Yayınla…"su) ve kehribar ikincil ("Sürüm 4 taslağını aç"). */
.v2-btn--ink {
    background: var(--v2-ink-btn);
    color: var(--v2-ink-btn-txt);
    box-shadow: 0 10px 22px -14px rgba(4, 22, 27, 0.6);
}

.v2-btn--ink::after { background: rgba(255, 255, 255, 0.08); }

.v2-btn--draft {
    border: 1px solid var(--v2-draft-brd);
    background: var(--v2-draft-bg);
    color: var(--v2-warn-txt);
    box-shadow: none;
}

.v2-btn--draft::after { background: rgba(242, 179, 61, 0.12); }

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

/* Sayfa başı: başlık ve açıklama solda, eylemler sağda (paket sahne şeridi çizmiyor). */
/* z-index: açılış animasyonu her bloğu ayrı katman bağlamı yapıyor; "Yeni sürüm" menüsü sonraki kartların arkasında kalıyordu. */
.v2-lhead {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
}

.v2-lhead--center { align-items: center; }

.v2-lhead__text {
    flex: 1 1 380px;
    min-width: 0;
}

.v2-lhead__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--v2-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--v2-ink);
}

.v2-lhead__desc {
    max-width: 640px;
    margin: 5px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--v2-ink-2);
    text-wrap: pretty;
}

.v2-lhead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.v2-lhead__actions form { margin: 0; }

/* "+ Yeni sürüm": belge seçtiren menü (betiksiz details). */
.v2-newdoc { position: relative; }

.v2-newdoc > summary { list-style: none; cursor: pointer; }

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

.v2-newdoc__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    z-index: 20;
    width: min(340px, calc(100vw - 32px));
    padding: 6px;
    border-radius: 16px;
    border: 1px solid var(--v2-card-brd);
    background: var(--v2-card-solid);
    box-shadow: var(--v2-shadow-hi);
    display: grid;
    gap: 2px;
}

.v2-newdoc__menu form { margin: 0; }

.v2-newdoc__item {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--v2-ink);
    font: 600 13px/1.35 var(--v2-body);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui);
}

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

.v2-newdoc__item.is-disabled { cursor: default; color: var(--v2-ink-3); }

.v2-newdoc__item.is-disabled:hover { background: transparent; }

.v2-newdoc__note { font-weight: 400; font-size: 12px; color: var(--v2-ink-3); }

/* 2a: kitle başlığı ve belge kartları. */
.v2-lgroup {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-top: 4px;
}

.v2-lgroup__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}

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

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

.v2-lcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--v2-card-brd);
    background: var(--v2-card-solid);
    color: inherit;
    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-lcard:hover {
    border-color: var(--v2-acc-mid);
    box-shadow: var(--v2-shadow-mid);
    color: inherit;
}

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

.v2-lcard__title {
    font-family: var(--v2-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--v2-ink);
}

.v2-lcard__since { margin-inline-start: auto; font-size: 12px; color: var(--v2-ink-3); }

.v2-lcard__big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.v2-lcard__pct {
    font-family: var(--v2-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
}

.v2-lcard__of { font-size: 13px; line-height: 1.45; color: var(--v2-ink-2); }

.v2-lcard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--v2-line-soft);
    font-size: 12.5px;
}

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

.v2-lcard__warn { color: var(--v2-warn-txt); font-weight: 600; }

.v2-lcard__more { margin-inline-start: auto; font-weight: 600; color: var(--v2-acc-txt); }

/* Dağılım çubuğu: SVG'nin parçaları öznitelikle (CSP), renkleri burada. */
.v2-dist {
    display: block;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--v2-sunken);
}

.v2-dist > svg { display: block; width: 100%; height: 100%; }

.v2-dist__seg--ok { fill: var(--v2-dist-ok); }
.v2-dist__seg--old { fill: var(--v2-dist-old); }
.v2-dist__seg--none { fill: var(--v2-dist-none); }
.v2-dist__seg--dec { fill: var(--v2-dist-dec); }

.v2-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--v2-ink-2);
}

.v2-legend__item { display: inline-flex; align-items: center; gap: 6px; }

.v2-legend__sw { width: 9px; height: 9px; border-radius: 3px; }
.v2-legend__sw--ok { background: var(--v2-dist-ok); }
.v2-legend__sw--old { background: var(--v2-dist-old); }
.v2-legend__sw--none { background: var(--v2-dist-none); }
.v2-legend__sw--dec { background: var(--v2-dist-dec); }

/* Son hareketler: zaman · olay · kanal. */
.v2-activity {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 120px;
    gap: 8px 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--v2-ink);
}

.v2-activity__time,
.v2-activity__ch { color: var(--v2-ink-3); }

.v2-activity__text.is-negative { color: var(--v2-bad-txt); }

@media (max-width: 640px) {
    .v2-activity { grid-template-columns: minmax(0, 1fr) auto; }
    .v2-activity__text { grid-column: 1 / -1; margin-bottom: 6px; }
    .v2-activity__time { grid-column: 1; }
}

/* 2b: sürüm zaman çizgisi + seçili sürüm. */
.v2-lgrid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .v2-lgrid { grid-template-columns: minmax(0, 1fr); }
}

.v2-versions {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--v2-card-brd);
    background: var(--v2-card-solid);
}

.v2-versions > .v2-micro { margin: 0; padding: 0 4px 4px; }

.v2-version {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-soft);
    color: var(--v2-ink-2);
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-version:hover { border-color: var(--v2-acc-mid); color: var(--v2-ink-2); }

.v2-version--draft { border: 1.5px dashed var(--v2-draft-brd); background: var(--v2-draft-soft); }

.v2-version--next { border-style: dashed; border-color: var(--v2-acc-brd); }

.v2-version--live,
.v2-version.is-selected { color: var(--v2-ink); }

.v2-version.is-selected {
    border: 1.5px solid var(--v2-version-live-brd);
    background: var(--v2-version-live);
}

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

.v2-version__no {
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: inherit;
}

.v2-version--live .v2-version__no,
.v2-version--draft .v2-version__no { color: var(--v2-ink); }

.v2-version__head .v2-pill { margin-inline-start: auto; }

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

.v2-version__left { font-weight: 600; color: var(--v2-warn-txt); }

.v2-ldoc { display: grid; gap: 14px; }

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

.v2-ldoc__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-ldoc__links { margin-inline-start: auto; font-size: 12.5px; color: var(--v2-ink-3); }

.v2-ldoc__links a { font-weight: 600; color: var(--v2-acc-txt); }

.v2-ldoc__text {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--v2-line-soft);
}

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

.v2-kv__cell {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--v2-line-soft);
    background: var(--v2-soft);
    min-width: 0;
}

.v2-kv__label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--v2-ink-3);
}

.v2-kv__value {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-ink);
    overflow-wrap: anywhere;
}

.v2-kv__value--mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }

.v2-changesbox {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--v2-acc-soft);
}

.v2-changesbox__label {
    margin: 0 0 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--v2-acc-txt);
}

.v2-changesbox ul {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--v2-ink);
}

/* Bağlantılardan sekme (betiksiz; seçim adreste). Görünüşü .v2-seg'le aynı. */
.v2-segtabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-self: start;
    gap: 3px;
    max-width: 100%;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-sunken);
}

.v2-segtabs > a,
.v2-segtabs > span {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--v2-ink-3);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

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

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

.v2-diffstat {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--v2-ink-2);
}

.v2-diffstat ins,
.v2-diffstat del {
    padding: 1px 6px;
    border-radius: 4px;
    text-decoration: none;
}

.v2-diffstat ins { background: #D9F3E5; color: #0A5A36; }

.v2-diffstat del { background: #FBE1E1; color: #8E1B1B; text-decoration: line-through; }

:root[data-theme="dark"] .v2-diffstat ins { background: rgba(60, 178, 122, 0.22); color: #8FE3B8; }

:root[data-theme="dark"] .v2-diffstat del { background: rgba(224, 85, 85, 0.22); color: #FFB3B3; }

/* 2c: düzenleyici solda, yürürlük ve etki sağda (yapışkan). */
.v2-draft {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

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

.v2-draft__side {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 16px;
}

@media (max-width: 980px) {
    .v2-draft { grid-template-columns: minmax(0, 1fr); }
    .v2-draft__side { position: static; }
}

.v2-draft__label { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--v2-ink-2); }

.v2-draft__labelrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 4px;
}

.v2-draft__labelrow .v2-draft__label { margin: 0; }

.v2-draft__limit { margin-inline-start: auto; font-size: 11.5px; color: var(--v2-ink-3); }

.v2-draft__hint { margin: 0 0 10px; font-size: 12px; color: var(--v2-ink-3); }

.v2-draft__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-draft__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--v2-ink-3); }

.v2-draft__side > .v2-box { display: grid; gap: 14px; }

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

.v2-app .v2-draft__actions > .v2-btn--ink { height: 48px; border-radius: 14px; font-size: 14.5px; }

.v2-draft__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.v2-draft__pair .v2-btn { padding-inline: 10px; font-size: 13px; }

.v2-draft__actions > .v2-btn--quiet { justify-self: center; }

.v2-mdedit {
    border-radius: 14px;
    border: 1px solid var(--v2-field-brd);
    overflow: hidden;
}

.v2-mdedit__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--v2-line-soft);
    background: var(--v2-soft);
}

.v2-mdedit__tools { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.v2-mdedit__tools[hidden] { display: none; }

.v2-mdtool {
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-ink);
    font: 400 12.5px var(--v2-body);
    cursor: pointer;
    transition: background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-mdtool:hover { background: var(--v2-acc-soft); }

.v2-mdtool--sq { width: 30px; padding: 0; font-size: 14px; }

.v2-mdtool--strong { font-weight: 700; }

.v2-mdtool--em { font-style: italic; font-family: Georgia, serif; }

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

.v2-mdedit__seg {
    display: inline-flex;
    gap: 2px;
    margin-inline-start: auto;
    padding: 3px;
    border-radius: 10px;
    background: var(--v2-sunken);
}

.v2-mdedit__seg > a,
.v2-mdedit__seg > span,
.v2-mdedit__seg > button {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-ink-3);
    font: 600 12px var(--v2-body);
    cursor: pointer;
}

.v2-mdedit__seg > .is-active {
    background: var(--v2-card-solid);
    color: var(--v2-ink);
    box-shadow: 0 2px 8px rgba(8, 48, 57, 0.1);
    cursor: default;
}

.v2-mdedit__seg > a:hover,
.v2-mdedit__seg > button:hover { color: var(--v2-ink); }

.v2-mdedit__area {
    display: block;
    width: 100%;
    min-height: 420px;
    padding: 16px 18px;
    border: 0;
    resize: vertical;
    background: var(--v2-card-solid);
    color: var(--v2-ink);
    font: 400 14px/1.75 var(--v2-body);
    tab-size: 4;
}

.v2-mdedit__area:focus { outline: none; box-shadow: inset 0 0 0 2px var(--v2-acc-brd); }

.v2-mdedit__diff { display: grid; gap: 12px; padding: 16px 18px; }

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

.v2-items__input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-field);
    color: var(--v2-ink);
    font: 400 13.5px var(--v2-body);
    transition: border-color var(--v2-dur) var(--v2-ease-ui), box-shadow var(--v2-dur) var(--v2-ease-ui);
}

.v2-items__input::placeholder { color: var(--v2-ink-3); }

.v2-items__input:focus {
    outline: none;
    border-color: var(--v2-acc-mid);
    box-shadow: 0 0 0 4px var(--v2-acc-soft);
}

/* Yürürlük: "İleri tarih" seçili değilken tarih ve ona bağlı cümleler gizli; :has desteklenmiyorsa hepsi görünür. */
.v2-draft:has(input[name="Yururluk"][value="hemen"]:checked) .v2-when__date,
.v2-draft:has(input[name="Yururluk"][value="hemen"]:checked) .v2-when__later,
.v2-draft:has(input[name="Yururluk"][value="ileri"]:checked) .v2-when__now { display: none; }

.v2-impact__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }

.v2-impact__num {
    font-family: var(--v2-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--v2-ink);
    font-variant-numeric: tabular-nums;
}

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

.v2-impact__rows {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    font-size: 13px;
    color: var(--v2-ink-2);
}

.v2-impact__rows strong { font-weight: 600; color: var(--v2-ink); font-variant-numeric: tabular-nums; }

.v2-impact__note {
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--v2-draft-brd);
    background: var(--v2-warn-bg);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v2-warn-txt);
}

.v2-impact__note strong { font-weight: 600; }

/* Yayın özeti: sunucuda çizilen son onay (betiksiz de çalışıyor). */
.v2-pubsum {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 22, 27, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.v2-pubsum__card {
    display: grid;
    gap: 14px;
    width: min(520px, 100%);
    padding: 24px;
    border-radius: 24px;
    border: 1px solid var(--v2-card-brd);
    background: var(--v2-card-solid);
    box-shadow: 0 30px 70px -20px rgba(4, 22, 27, 0.55);
}

.v2-pubsum__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v2-ink);
}

.v2-pubsum__rows {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    font-size: 13.5px;
}

.v2-pubsum__rows > span { color: var(--v2-ink-3); }

.v2-pubsum__rows > strong { font-weight: 600; color: var(--v2-ink); }

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

.v2-pubsum__actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
    .v2-pubsum__card { animation: v2-sheet-in 260ms var(--v2-ease) both; }
}

/* 2d: süzgeç satırı, durum çipleri ve tablo. */
.v2-rfilter { display: grid; gap: 14px; }

.v2-rfilter__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.v2-fselect {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px 0 14px;
    border-radius: 12px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-field);
    font-size: 13px;
    color: var(--v2-ink-2);
}

.v2-fselect select {
    height: 100%;
    padding: 0 22px 0 0;
    border: 0;
    background: transparent var(--v2-select-arrow) no-repeat right center / 14px;
    color: var(--v2-ink);
    font: 600 13px var(--v2-body);
    appearance: none;
    cursor: pointer;
}

.v2-fselect select:focus { outline: none; }

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

.v2-fsearch { flex: 1 1 220px; min-width: 0; }

.v2-fsearch input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-field);
    color: var(--v2-ink);
    font: 400 13px var(--v2-body);
}

.v2-fsearch input::placeholder { color: var(--v2-ink-3); }

.v2-fsearch input:focus { outline: none; border-color: var(--v2-acc-mid); box-shadow: 0 0 0 4px var(--v2-acc-soft); }

.v2-statuschips { display: flex; flex-wrap: wrap; gap: 8px; }

.v2-statuschip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--v2-field-brd);
    background: var(--v2-card-solid);
    color: var(--v2-ink-2);
    font-size: 13px;
    font-weight: 600;
    transition: border-color var(--v2-dur) var(--v2-ease-ui), background-color var(--v2-dur) var(--v2-ease-ui);
}

.v2-statuschip > span { font-weight: 400; color: var(--v2-ink-3); font-variant-numeric: tabular-nums; }

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

.v2-statuschip.is-active,
.v2-statuschip.is-active:hover {
    border-color: var(--v2-ink-btn);
    background: var(--v2-ink-btn);
    color: var(--v2-ink-btn-txt);
}

.v2-statuschip.is-active > span { color: inherit; opacity: 0.75; }

.v2-ltable-box { padding: 0; overflow: hidden; }

/* Dar ekranda tablo kendi çerçevesinde kayıyor, sayfayı taşırmıyor. */
.v2-ltable-wrap { position: relative; overflow-x: auto; }

.v2-ltable { min-width: 900px; }

.v2-ltable__head,
.v2-ltable__row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 90px 150px 150px 170px 80px;
    gap: 14px;
    align-items: center;
    padding: 12px 20px;
}

.v2-ltable--events .v2-ltable__head,
.v2-ltable--events .v2-ltable__row { grid-template-columns: 150px minmax(0, 1.6fr) 160px 120px 120px 110px; }

.v2-ltable__head {
    border-bottom: 1px solid var(--v2-line-soft);
    background: var(--v2-soft);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--v2-ink-3);
}

.v2-ltable__row {
    border-bottom: 1px solid var(--v2-line-soft);
    font-size: 13px;
    color: var(--v2-ink);
}

a.v2-ltable__row { transition: background-color var(--v2-dur) var(--v2-ease-ui); }

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

.v2-ltable__row > span { min-width: 0; }

.v2-ltable__row .v2-pill { justify-self: start; }

.v2-ltable__who { display: grid; min-width: 0; }

.v2-ltable__name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-ltable__sub,
.v2-ltable__ch { font-size: 12px; color: var(--v2-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

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

.v2-ltable__mono {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    color: var(--v2-ink-3);
    overflow-wrap: anywhere;
}

.v2-ltable__empty { margin: 0; padding: 30px 20px; text-align: center; font-size: 13px; color: var(--v2-ink-3); }

.v2-ltable__caption {
    margin: 0;
    padding: 16px 20px 10px;
    font-family: var(--v2-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-ltable__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 12.5px;
    color: var(--v2-ink-3);
}

.v2-ltable__foot .pager { margin: 0 0 0 auto; }

.v2-ltable__foot .pager__count { display: none; }

/* 2e: belge başına durum kartı. */
.v2-sdocs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 16px;
}

.v2-sdoc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid var(--v2-card-brd);
    background: var(--v2-card-solid);
}

.v2-sdoc__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-family: var(--v2-display);
    font-size: 18px;
    font-weight: 700;
}

.v2-sdoc__icon.is-ok { background: var(--v2-ok-bg); color: var(--v2-ok-txt); }
.v2-sdoc__icon.is-bad { background: var(--v2-bad-bg); color: var(--v2-bad-txt); }
.v2-sdoc__icon.is-muted { background: var(--v2-sunken); color: var(--v2-ink-3); }

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

.v2-sdoc__title {
    margin: 0;
    font-family: var(--v2-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--v2-ink);
}

.v2-sdoc__line { margin: 3px 0 0; font-size: 13px; color: var(--v2-ink-2); }

.v2-sdoc__line .is-ok { font-weight: 600; color: var(--v2-ok-txt); }

.v2-sdoc__line .is-bad { font-weight: 600; color: var(--v2-bad-txt); }

.v2-sdoc__sub { margin: 2px 0 0; font-size: 12px; color: var(--v2-ink-3); }

.v2-sdoc__sub:empty { display: none; }

/* Kanıt dökümü (yazdırma). */
.v2-print__h2 { margin: 22px 0 8px; font-family: var(--v2-display); font-size: 15px; color: #0A1418; }

.v2-print__table { width: 100%; border-collapse: collapse; font-size: 11.5px; color: #24343B; }

.v2-print__table th,
.v2-print__table td { padding: 6px 8px; border: 1px solid #DCE8EC; text-align: start; vertical-align: top; overflow-wrap: anywhere; }

.v2-print__table th { background: #F2F7F8; font-weight: 600; color: #3B4C54; }

/* ══════════════════════════════════════════════════════════ Hesabı kapat (Hesabım › Güvenlik)
   Geri alınamayan eylemin kartı kırmızı kenarlı; ne olacağı listesi onay işaretiyle değil kırmızı noktayla (bunlar fayda değil). */
.v2-box--danger { border-color: var(--v2-danger-brd); }
.v2-box--danger::before { background: linear-gradient(90deg, transparent, var(--v2-danger-txt), transparent); }
.v2-box--danger .v2-box__icon { background: var(--v2-danger-bg); color: var(--v2-danger-txt); }

.v2-bullets--dot > li::before {
    left: 6px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: var(--v2-danger-txt);
    rotate: none;
}