/* ==========================================================================
   OtoGonderi.com.tr · temel katman
   Tasarım belirteçleri, sıfırlama ve tüm ekranlarda paylaşılan primitifler.
   auth.css ve panel.css bu dosyanın üzerine kurulur, bu yüzden ondan
   ÖNCE yüklenmelidir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Belirteçler (design tokens)
   Renkler HSL kanalı olarak değil düz hex tutuluyor: tek kaynak, kolay okuma.
   Karanlık tema aynı isimleri yeniden tanımlar; bileşenler hiç değişmez.
   -------------------------------------------------------------------------- */

:root {
    /* Marka ölçeği */
    --marka-50:  #eef4ff;
    --marka-100: #dbe6ff;
    --marka-200: #bfd3ff;
    --marka-300: #93b4fd;
    --marka-400: #6090fa;
    --marka-500: #3b6df5;
    --marka-600: #2251e6;
    --marka-700: #1b3fc4;
    --marka-800: #1c379e;
    --marka-900: #1c337d;

    /* Anlamsal renkler: her biri zemin / kenar / yazı üçlüsü */
    --basari-zemin: #e7f8ef;
    --basari-kenar: #a8e6c4;
    --basari-yazi:  #05683f;

    --uyari-zemin: #fff6e5;
    --uyari-kenar: #fadfa3;
    --uyari-yazi:  #8a5200;

    --tehlike-zemin: #feecec;
    --tehlike-kenar: #f9c6c6;
    --tehlike-yazi:  #a51d1d;

    --bilgi-zemin: var(--marka-50);
    --bilgi-kenar: var(--marka-200);
    --bilgi-yazi:  var(--marka-800);

    /* Yüzeyler */
    --zemin:      #f4f6fa;   /* sayfa arka planı */
    --yuzey:      #ffffff;   /* kart */
    --yuzey-2:    #f8fafc;   /* kart içi ikincil bölge */
    --yuzey-3:    #f1f5f9;   /* girinti, kod alanı */
    --yuzey-ters: #0d1526;   /* koyu bantlar */

    /* Yazı */
    --yazi-guclu: #0b1220;
    --yazi:       #1c2536;
    --yazi-soluk: #5b6779;

    /**
     * En silik yazı rengi #8a94a6 idi: beyaz zeminde kontrast 3.06:1, yani
     * WCAG AA'nın küçük metin için istediği 4.5:1'in altında. Bu token form
     * etiketlerinde, sayaç alt satırlarında, tarih ve yüzde metinlerinde
     * kullanılıyor — yani okunması GEREKEN yerlerde. Ölçülen değerler:
     * beyaz 4.97 · yüzey-2 4.75 · yüzey-3 4.54, üçü de eşiğin üstünde.
     */
    --yazi-silik: #667085;
    --yazi-ters:  #ffffff;

    /**
     * Tehlike vurgusu (metin ve kenarlıksız düğme yazısı).
     *
     * Önceden yer yer #c02626 gömülüydü; karanlık temada koyu zemin üstünde
     * 3.03:1'e düşüyordu. Artık tema başına ayrı: açıkta koyu kırmızı,
     * karanlıkta açık kırmızı.
     */
    --tehlike-guclu: #c02626;

    /**
     * DOLU MARKA ZEMİNİ ve üstündeki yazı.
     *
     * Marka rengi karanlık temada açılıyor (#2251e6 → #6d93ff). Rozet, seçili
     * sayfa numarası, seçili çip gibi "marka rengini ZEMİN yapan" yerlerde
     * beyaz yazı o açık mavide 2.89:1'e düşüyordu. Bu çift tema başına
     * ölçüldü: açıkta 6.20:1, karanlıkta 6.48:1.
     *
     * `--vurgu` küçük vurgular için (kenar, ikon, bağlantı); zemin olarak
     * kullanılacaksa bu çift kullanılmalı.
     */
    --vurgu-dolu: #2251e6;
    --vurgu-ust:  #ffffff;

    /* Kenarlar */
    --kenar:        #e3e8ef;
    --kenar-guclu:  #cfd6e0;
    --kenar-silik:  #eef1f6;

    /* Vurgu (odak halkası, seçim) */
    --vurgu:      var(--marka-600);
    --vurgu-zemin: var(--marka-50);
    --vurgu-halka: rgba(34, 81, 230, .18);

    /* Yarıçap */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-tam: 999px;

    /* Gölge: katmanlı ve yumuşak, "flat" değil ama abartısız */
    --golge-xs: 0 1px 2px rgba(11, 18, 32, .05);
    --golge-sm: 0 1px 2px rgba(11, 18, 32, .05), 0 2px 6px rgba(11, 18, 32, .04);
    --golge-md: 0 2px 4px rgba(11, 18, 32, .05), 0 8px 20px rgba(11, 18, 32, .07);
    --golge-lg: 0 4px 8px rgba(11, 18, 32, .05), 0 18px 44px rgba(11, 18, 32, .11);
    --golge-vurgu: 0 6px 18px rgba(34, 81, 230, .28);

    /* Ölçüler */
    --dokunma: 44px;          /* en küçük dokunma hedefi */
    --alan-h: 50px;           /* form alanı yüksekliği */
    /* Panel içeriği menünün yanındaki alanı tamamen kullanır; bu ölçü
       yalnızca dar tutulmak istenen özel bloklar için duruyor. */
    --icerik-en: 1080px;
    --yan-menu-en: 252px;

    /* Hareket */
    --gecis-hizli: 120ms cubic-bezier(.32, .72, 0, 1);
    --gecis: 200ms cubic-bezier(.32, .72, 0, 1);
    --gecis-yavas: 340ms cubic-bezier(.32, .72, 0, 1);

    /* Güvenli alanlar (çentik / ev düğmesi) */
    --guvenli-ust: env(safe-area-inset-top, 0px);
    --guvenli-alt: env(safe-area-inset-bottom, 0px);
    --guvenli-sol: env(safe-area-inset-left, 0px);
    --guvenli-sag: env(safe-area-inset-right, 0px);

    color-scheme: light;
}

/* Karanlık tema. Kullanıcı sistem tercihini değiştirdiğinde otomatik döner. */
@media (prefers-color-scheme: dark) {
    :root {
        --marka-50:  #131c33;
        --marka-100: #182450;
        --marka-200: #1e3070;
        --marka-300: #2a44a0;
        --marka-400: #3f60cf;
        --marka-500: #5a80f0;
        --marka-600: #6d93ff;
        --marka-700: #8dabff;
        --marka-800: #b3c7ff;
        --marka-900: #d6e2ff;

        --basari-zemin: #0d2a1e;
        --basari-kenar: #1d5138;
        --basari-yazi:  #6fe0a6;

        --uyari-zemin: #2c2109;
        --uyari-kenar: #574011;
        --uyari-yazi:  #f5c96b;

        --tehlike-zemin: #2e1416;
        --tehlike-kenar: #5c2427;
        --tehlike-yazi:  #ff9c9c;

        --bilgi-zemin: #131c33;
        --bilgi-kenar: #24345f;
        --bilgi-yazi:  #a9c1ff;

        --zemin:      #080c14;
        --yuzey:      #101725;
        --yuzey-2:    #151d2e;
        --yuzey-3:    #1b2436;
        --yuzey-ters: #1b2436;

        --yazi-guclu: #f4f7fb;
        --yazi:       #e2e8f0;
        --yazi-soluk: #97a3b6;
        /* #6c7889 koyu zeminde 4.00:1'de kalıyordu; bu değer 6.00:1 veriyor */
        --yazi-silik: #8b96a8;
        --yazi-ters:  #ffffff;

        /* Koyu zeminde #c02626 okunmuyordu (3.03:1); bu değer 8.95:1 */
        --tehlike-guclu: #ff9c9c;

        /* Açık mavi zemin + koyu yazı: 6.48:1 (beyaz yazı 2.89:1'de kalıyordu) */
        --vurgu-dolu: #6d93ff;
        --vurgu-ust:  #0b1220;

        --kenar:       #232d40;
        --kenar-guclu: #33405a;
        --kenar-silik: #1a2333;

        --vurgu:       var(--marka-600);
        --vurgu-zemin: #16223d;
        --vurgu-halka: rgba(109, 147, 255, .26);

        --golge-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --golge-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
        --golge-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .38);
        --golge-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .5);
        --golge-vurgu: 0 6px 18px rgba(45, 78, 170, .5);

        color-scheme: dark;
    }
}

/* --------------------------------------------------------------------------
   2. Sıfırlama
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* iOS'ta kaydırma sonrası zıplamayı azaltır */
    overscroll-behavior-y: none;
}

body {
    margin: 0;
    /* 16px: iOS'ta forma dokununca sayfanın yakınlaşmasını engeller */
    font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
    font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
    color: var(--yazi);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, dl, dd, figure {
    margin: 0;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.021em;
    color: var(--yazi-guclu);
}

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

a {
    color: var(--vurgu);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* Ortak odak halkası: fare tıklamasında görünmez, klavyede net. */
:focus-visible {
    outline: 2px solid var(--vurgu);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background: var(--vurgu-halka);
    color: var(--yazi-guclu);
}

/* Kaydırma çubuğu: masaüstünde ince ve sessiz */
@media (pointer: fine) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--kenar-guclu) transparent;
    }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: var(--kenar-guclu);
        border: 3px solid transparent;
        border-radius: var(--r-tam);
        background-clip: content-box;
    }
}

/* --------------------------------------------------------------------------
   3. Erişilebilirlik yardımcıları
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Klavye kullanıcıları için "içeriğe atla" bağlantısı */
.atla {
    position: fixed;
    top: calc(var(--guvenli-ust) + 8px);
    left: 50%;
    z-index: 200;
    transform: translate(-50%, -180%);
    padding: 11px 18px;
    background: var(--yuzey);
    color: var(--vurgu);
    font-size: 14.5px;
    font-weight: 600;
    border-radius: var(--r-tam);
    box-shadow: var(--golge-lg);
    text-decoration: none;
    transition: transform var(--gecis);
}

.atla:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Butonlar
   -------------------------------------------------------------------------- */

.btn {
    --btn-zemin: var(--marka-600);
    --btn-zemin-aktif: var(--marka-700);
    --btn-yazi: #fff;
    --btn-kenar: transparent;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: var(--alan-h);
    padding: 0 20px;
    background: var(--btn-zemin);
    color: var(--btn-yazi);
    border: 1px solid var(--btn-kenar);
    border-radius: var(--r-md);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--golge-xs);
    transition: background var(--gecis-hizli), box-shadow var(--gecis-hizli),
                transform var(--gecis-hizli), opacity var(--gecis-hizli);
}

.btn svg { flex: 0 0 auto; }

@media (hover: hover) {
    .btn:hover { background: var(--btn-zemin-aktif); box-shadow: var(--golge-sm); }
}

.btn:active { background: var(--btn-zemin-aktif); transform: scale(.982); box-shadow: none; }

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Birincil butona hafif marka gölgesi: sayfada net bir ana eylem olsun */
.btn:not(.btn--ikincil):not(.btn--sessiz):not(.btn--hayalet) {
    box-shadow: var(--golge-vurgu);
}

/**
 * KARANLIK TEMADA BİRİNCİL BUTON YAZISI KOYU.
 *
 * Marka rengi karanlık temada açılıyor (#2251e6 → #6d93ff), çünkü koyu zeminde
 * doygun mavi okunmuyor. Ama açılan mavinin üstündeki BEYAZ yazı 2.89:1'e
 * düşüyor — ölçülen değer, WCAG AA eşiği 4.5. Koyu yazıyla aynı zeminde
 * 6.48:1 oluyor.
 *
 * Seçici `:not()` zinciriyle yalnızca birincil butonu hedefliyor; ikincil,
 * sessiz, hayalet ve tehlike butonları kendi renklerini koruyor. Özgüllük
 * `.btn--ikincil`den yüksek olduğu için dosya sırası önemli değil.
 */
@media (prefers-color-scheme: dark) {
    .btn:not(.btn--ikincil):not(.btn--sessiz):not(.btn--hayalet):not(.btn--tehlike) {
        --btn-yazi: #0b1220;
    }

    /* Tehlike butonu: koyu zeminde #dc2626 üstüne beyaz 4.83 — eşiğin üstünde */
    .btn--tehlike { --btn-zemin: #c81f1f; --btn-zemin-aktif: #a51919; }
}
.btn:not(.btn--ikincil):not(.btn--sessiz):not(.btn--hayalet):active { box-shadow: none; }

.btn--ikincil {
    --btn-zemin: var(--yuzey);
    --btn-zemin-aktif: var(--yuzey-3);
    --btn-yazi: var(--yazi);
    --btn-kenar: var(--kenar-guclu);
}

.btn--sessiz {
    --btn-zemin: var(--vurgu-zemin);
    --btn-zemin-aktif: var(--marka-100);
    --btn-yazi: var(--marka-700);
}

.btn--hayalet {
    --btn-zemin: transparent;
    --btn-zemin-aktif: var(--yuzey-3);
    --btn-yazi: var(--yazi-soluk);
}

.btn--tehlike {
    --btn-zemin: #dc2626;
    --btn-zemin-aktif: #b91c1c;
    --btn-yazi: #fff;
}

/**
 * İçerik kadar genişleyen düğmeler. display:inline-flex burada tanımlı ki
 * şablonlarda style="display:inline-flex" yamalarına gerek kalmasın.
 */
.btn--dar,
.btn--otomatik {
    display: inline-flex;
    width: auto;
}

.btn--kucuk {
    min-height: 40px;
    padding: 0 15px;
    font-size: 14.5px;
    border-radius: var(--r-sm);
    width: auto;
}

.btn--blok { width: 100%; }

.btn-grup {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-grup .btn { flex: 1 1 170px; }

/**
 * Satır içi ikincil eylem. Liste satırlarındaki Düzenle/Sil gibi
 * düğmeler için: küçük görünür ama dokunma hedefi 40px'in altına inmez.
 */
/**
 * İkon düğmesi 40×40.
 *
 * 38px idi; dokunma hedefi ölçümünde eşiğin (40px) hemen altında kalan son
 * öğeydi. Bu düğme satır içi işlemlerde kullanılıyor (sil, tekrar dene) —
 * yanlış dokunmanın maliyeti yüksek olan yerler.
 */
.ikon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    min-width: 40px;
    padding: 0 12px;
    background: var(--yuzey);
    color: var(--yazi-soluk);
    border: 1px solid var(--kenar);
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--gecis-hizli), color var(--gecis-hizli),
                border-color var(--gecis-hizli), transform var(--gecis-hizli);
}

.ikon-btn svg { flex: 0 0 auto; }

/* Kart içinde tek başına duran ikincil eylem: satır boyunca yayılır */
.ikon-btn--blok { display: flex; width: 100%; }

/**
 * Yalnız ikonlu kare düğme (geri oku gibi). Yazısı .ikon-btn__yazi ile
 * ekran okuyucuya bırakılır, dokunma hedefi 40px'in altına inmez.
 */
.ikon-btn--kare {
    width: 46px;
    padding: 0;
    min-height: 46px;
    border-radius: var(--r-md);
}

@media (hover: hover) {
    .ikon-btn:hover {
        color: var(--yazi-guclu);
        border-color: var(--kenar-guclu);
        background: var(--yuzey-2);
    }
}

.ikon-btn:active { transform: scale(.96); background: var(--yuzey-3); }

.ikon-btn--tehlike { color: var(--tehlike-guclu); border-color: var(--tehlike-kenar); }
@media (hover: hover) {
    .ikon-btn--tehlike:hover {
        color: #fff;
        background: #dc2626;
        border-color: #dc2626;
    }
}

.ikon-btn--onay { color: var(--basari-yazi); border-color: var(--basari-kenar); }
@media (hover: hover) {
    .ikon-btn--onay:hover {
        color: #fff;
        background: #0b7a4b;
        border-color: #0b7a4b;
    }
}

/* Bağlantı görünümlü düğme. min-height: dokunma hedefi 29px'e düşmesin. */
.baglanti-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    background: none;
    border: 0;
    padding: 0 8px;
    border-radius: var(--r-xs);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vurgu);
    cursor: pointer;
}

@media (hover: hover) {
    .baglanti-btn:hover { background: var(--vurgu-zemin); }
}

.baglanti-btn:active { opacity: .6; }

.baglanti {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 2px;
    color: var(--vurgu);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
}

@media (hover: hover) {
    .baglanti:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   5. Form alanları
   -------------------------------------------------------------------------- */

.alan { margin-bottom: 16px; }

.alan > label,
.alan-etiket {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.006em;
    color: var(--yazi-guclu);
}

.istege-bagli {
    font-weight: 400;
    color: var(--yazi-silik);
}

.girdi,
.secim,
.metin-alani {
    display: block;
    width: 100%;
    height: var(--alan-h);
    padding: 0 15px;
    font-size: 16px;
    color: var(--yazi);
    background: var(--yuzey);
    border: 1.5px solid var(--kenar-guclu);
    border-radius: var(--r-md);
    appearance: none;
    transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli),
                background var(--gecis-hizli);
}

.girdi::placeholder,
.metin-alani::placeholder { color: var(--yazi-silik); }

.metin-alani {
    height: auto;
    min-height: 132px;
    padding: 13px 15px;
    line-height: 1.6;
    resize: vertical;
}

@media (hover: hover) {
    .girdi:hover,
    .secim:hover,
    .metin-alani:hover { border-color: var(--yazi-silik); }
}

.girdi:focus,
.secim:focus,
.metin-alani:focus {
    outline: 0;
    border-color: var(--vurgu);
    box-shadow: 0 0 0 4px var(--vurgu-halka);
}

.girdi:disabled,
.secim:disabled,
.metin-alani:disabled {
    background: var(--yuzey-3);
    color: var(--yazi-silik);
    cursor: not-allowed;
}

.girdi[aria-invalid="true"],
.secim[aria-invalid="true"],
.metin-alani[aria-invalid="true"] { border-color: #dc2626; }

.girdi[aria-invalid="true"]:focus,
.secim[aria-invalid="true"]:focus,
.metin-alani[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .16);
}

/* Dosya seçici: tarayıcı düğmesini markaya yaklaştırıyoruz */
.girdi[type="file"] {
    height: auto;
    min-height: var(--alan-h);
    padding: 11px 13px;
    line-height: 1.4;
    font-size: 14.5px;
    color: var(--yazi-soluk);
    background: var(--yuzey-2);
    border-style: dashed;
}

.girdi[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--marka-700);
    background: var(--vurgu-zemin);
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}

/* Açılır liste oku: temaya göre renk değişsin diye currentColor maskesi */
.secim {
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6779' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    .secim {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2397a3b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
}

.alan-hata,
.alan-ipucu {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.5;
}

.alan-hata {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: var(--tehlike-guclu);
    font-weight: 500;
}

.alan-hata::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    background: currentColor;
    -webkit-mask: var(--ikon-uyari) center / contain no-repeat;
    mask: var(--ikon-uyari) center / contain no-repeat;
}

.alan-ipucu { color: var(--yazi-soluk); }

:root {
    --ikon-uyari: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.6v5.2M12 16.4h.01'/%3E%3C/svg%3E");
}

/* Şifre alanı + göster düğmesi */
.sifre-sarmal { position: relative; }
.sifre-sarmal .girdi { padding-right: 54px; }

.sifre-goster {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: var(--alan-h);
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--r-md);
    color: var(--yazi-silik);
    cursor: pointer;
    transition: color var(--gecis-hizli);
}

@media (hover: hover) {
    .sifre-goster:hover { color: var(--yazi); }
}

.sifre-goster[aria-pressed="true"] { color: var(--vurgu); }

/* İkon değişimi CSS ile: JS yalnızca aria-pressed ve input tipini çevirir */
.sifre-goster__kapa { display: none; }
.sifre-goster[aria-pressed="true"] .sifre-goster__ac { display: none; }
.sifre-goster[aria-pressed="true"] .sifre-goster__kapa { display: block; }

/* Onay kutusu: tarayıcı varsayılanı yerine markaya uygun özel çizim */
.onay {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 5px 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--yazi);
    cursor: pointer;
    user-select: none;
    margin-bottom: 16px;
}

/* 24px: WCAG 2.5.8'in en küçük hedef ölçüsü (etiketin tamamı da tıklanabilir) */
.onay input[type="checkbox"],
.onay input[type="radio"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    background: var(--yuzey);
    border: 1.5px solid var(--kenar-guclu);
    border-radius: 7px;
    appearance: none;
    cursor: pointer;
    transition: background var(--gecis-hizli), border-color var(--gecis-hizli);
}

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

.onay input[type="checkbox"]:checked,
.onay input[type="radio"]:checked {
    background: var(--marka-600) var(--ikon-tik) center / 15px no-repeat;
    border-color: var(--marka-600);
}

.onay input[type="radio"]:checked {
    background-image: none;
    box-shadow: inset 0 0 0 4.5px var(--yuzey);
}

.onay input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

:root {
    --ikon-tik: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}

.form-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 22px;
}

/**
 * Alan ızgarası.
 *
 * Kolon sayısı görüntü alanına değil KAPSAYICI genişliğine göre belirlenir
 * (auto-fit + minmax). İki kolonlu pano düzeninde kart daralınca alanlar
 * kendiliğinden tek kolona düşüyor; medya sorgusuyla yapıldığında geniş
 * ekranda bile 140px'lik girdiler oluşuyordu. Boş izler auto-fit ile
 * kapandığı için üç alanlı ızgara geniş kapsayıcıda da üç eşit kolon kalır.
 */
.izgara { display: grid; gap: 14px; }
.izgara--iki  { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.izgara--uc   { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.izgara--dort { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.izgara > .alan { margin-bottom: 0; }

/* Fiyat + para birimi */
.fiyat-sarmal {
    display: grid;
    grid-template-columns: 1fr 116px;
    gap: 10px;
}

/* Şifre gücü göstergesi */
.guc-cubuk {
    display: flex;
    gap: 5px;
    margin-top: 3px;
}

.guc-cubuk i {
    flex: 1;
    height: 5px;
    border-radius: var(--r-tam);
    background: var(--kenar);
    transition: background var(--gecis);
}

.guc-metin {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--yazi-soluk);
}

/* --------------------------------------------------------------------------
   6. Etiketler / rozetler
   -------------------------------------------------------------------------- */

.etiket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-tam);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

/**
 * Tıklanabilir etiket (durumu değiştiren düğme).
 *
 * Kullanıcı listesindeki abonelik etiketi hem durumu GÖSTERİYOR hem
 * dokunulunca DEĞİŞTİRİYOR. Satıra ikinci bir düğme eklemek yerine bu yol
 * seçildi: işlem sütunu 118px ve orada ikinci düğme alta kayıyordu.
 *
 * RENKLER TON SINIFINDAN GELİYOR.
 * Buradaki `background`/`border-color` yalnızca tonsuz kullanım için yedek;
 * `.etiket--aktif` ve `.etiket--notr` bu bloktan SONRA tanımlı olduğu için
 * onlar kazanıyor. Hover rengi değiştirmiyor, yalnızca halka ekliyor —
 * zemini değiştirmek yazı rengiyle çakışma riski taşıyor (bkz. .serit__oge).
 *
 * DOKUNMA ALANI GÖRÜNENDEN BÜYÜK.
 * Etiket satır içinde 34px; yanındaki durum etiketiyle aynı ritimde kalması
 * için daha fazla büyütülmedi. Bunun yerine `::after` ile 6px dışa taşan
 * görünmez bir alan var: parmakla isabet alanı ~46px, düzen ise bozulmuyor.
 */
.etiket--dugme {
    position: relative;
    min-height: 34px;
    padding-block: 6px;
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.etiket--dugme::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
}

@media (hover: hover) {
    .etiket--dugme:hover { box-shadow: 0 0 0 2px var(--vurgu-halka); }
}

.etiket--dugme:focus-visible {
    outline: 3px solid var(--vurgu-halka);
    outline-offset: 1px;
}

.etiket--dugme:active { transform: scale(.97); }

/* Durum noktası: renge bakmadan da ayırt edilebilsin */
.etiket::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}

.etiket--notr::before,
.etiket--mavi::before { display: none; }

.etiket--aktif,
.etiket--tamamlandi {
    background: var(--basari-zemin);
    border-color: var(--basari-kenar);
    color: var(--basari-yazi);
}

.etiket--beklemede,
.etiket--bekliyor {
    background: var(--uyari-zemin);
    border-color: var(--uyari-kenar);
    color: var(--uyari-yazi);
}

.etiket--hata {
    background: var(--tehlike-zemin);
    border-color: var(--tehlike-kenar);
    color: var(--tehlike-yazi);
}

/**
 * Pasif bir hata değil, kullanıcının bilinçli tercihi: kırmızı yerine
 * uyarı tonu. Kırmızı yalnızca gerçek hatalarda kalsın ki listede göz
 * kırmızıyı gördüğünde doğru yere baksın.
 */
.etiket--pasif {
    background: var(--uyari-zemin);
    border-color: var(--uyari-kenar);
    color: var(--uyari-yazi);
}

.etiket--notr {
    background: var(--yuzey-3);
    border-color: var(--kenar);
    color: var(--yazi-soluk);
    padding-inline: 9px;
}

.etiket--mavi {
    background: var(--bilgi-zemin);
    border-color: var(--bilgi-kenar);
    color: var(--bilgi-yazi);
    padding-inline: 9px;
}

/* Sayı rozeti (sekme / menü üzerinde bekleyen adet) */
.rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    background: #dc2626;
    color: #fff;
    border-radius: var(--r-tam);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   7. Satır içi bildirim şeridi
   -------------------------------------------------------------------------- */

.uyari {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: 14.5px;
    line-height: 1.55;
}

.uyari svg { flex: 0 0 auto; margin-top: 2px; }
.uyari p { margin: 0; }
.uyari a { color: inherit; font-weight: 700; }

.uyari--basari { background: var(--basari-zemin);  border-color: var(--basari-kenar);  color: var(--basari-yazi); }
.uyari--uyari  { background: var(--uyari-zemin);   border-color: var(--uyari-kenar);   color: var(--uyari-yazi); }
.uyari--hata   { background: var(--tehlike-zemin); border-color: var(--tehlike-kenar); color: var(--tehlike-yazi); }
.uyari--bilgi  { background: var(--bilgi-zemin);   border-color: var(--bilgi-kenar);   color: var(--bilgi-yazi); }

/* --------------------------------------------------------------------------
   8. Durum ikonu (büyük yuvarlak)
   -------------------------------------------------------------------------- */

.durum-ikon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 20px;
    border: 1px solid transparent;
    border-radius: 50%;
}

.durum-ikon--basari { background: var(--basari-zemin);  border-color: var(--basari-kenar);  color: var(--basari-yazi); }
.durum-ikon--hata   { background: var(--tehlike-zemin); border-color: var(--tehlike-kenar); color: var(--tehlike-yazi); }
.durum-ikon--bilgi  { background: var(--bilgi-zemin);   border-color: var(--bilgi-kenar);   color: var(--bilgi-yazi); }

/* --------------------------------------------------------------------------
   9. Küçük yardımcılar
   -------------------------------------------------------------------------- */

.ayirici {
    height: 1px;
    border: 0;
    background: var(--kenar);
    margin: 22px 0;
}

.soluk  { color: var(--yazi-soluk); }
.silik  { color: var(--yazi-silik); }
.kucuk  { font-size: 13.5px; }
.orta   { text-align: center; }
.sag    { text-align: right; }
.tek-satir {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sayisal { font-variant-numeric: tabular-nums; }
.gizle   { display: none !important; }

/* --------------------------------------------------------------------------
   10. SweetAlert uyarlaması
   Kütüphanenin varsayılan görünümü tasarımla uyuşmuyor; token'lara bağlıyoruz.
   -------------------------------------------------------------------------- */

.swal2-container { padding: 16px; }

.swal2-popup.swal-og {
    border-radius: var(--r-xl) !important;
    background: var(--yuzey) !important;
    color: var(--yazi) !important;
    border: 1px solid var(--kenar);
    box-shadow: var(--golge-lg) !important;
    font-size: 15px !important;
    padding: 26px 24px 22px !important;
}

.swal2-popup.swal-og .swal2-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--yazi-guclu) !important;
    padding: 0 !important;
}

.swal2-popup.swal-og .swal2-html-container {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--yazi-soluk) !important;
    margin: 10px 0 0 !important;
}

.swal2-popup.swal-og .swal2-actions {
    gap: 10px;
    margin-top: 22px !important;
    width: 100%;
}

.swal2-popup.swal-og .swal2-styled {
    min-height: 46px;
    margin: 0 !important;
    padding: 0 20px !important;
    border-radius: var(--r-md) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    flex: 1 1 auto;
}

.swal2-popup.swal-og .swal2-cancel {
    background: var(--yuzey-3) !important;
    color: var(--yazi) !important;
}

.swal2-popup.swal-og .swal2-icon { margin: 4px auto 6px; }

.swal-liste {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.65;
    text-align: left;
}

.swal-liste li + li { margin-top: 6px; }

/* Onay kutusunda gösterilen küçük medya önizlemesi (görsel silme onayı) */
.swal-medya {
    display: block;
    max-width: 190px;
    max-height: 150px;
    margin: 0 auto 12px;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--kenar);
}

/* Toast: sağ üstte, güvenli alanı gözeterek */
.swal2-container.swal2-top-end { padding-top: calc(var(--guvenli-ust) + 12px); }

.swal2-popup.swal2-toast {
    border-radius: var(--r-md) !important;
    background: var(--yuzey) !important;
    color: var(--yazi) !important;
    border: 1px solid var(--kenar);
    box-shadow: var(--golge-lg) !important;
    padding: 13px 16px !important;
}

.swal2-popup.swal2-toast .swal2-title {
    color: var(--yazi) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
    color: var(--yazi) !important;
    font-size: 14.5px !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   11. Hareket tercihi
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    .btn:active,
    .ikon-btn:active { transform: none; }
}

/* --------------------------------------------------------------------------
   12. Yüksek kontrast tercihi
   Kullanıcı işletim sisteminde kontrast artırma istediyse kenarları ve
   soluk metinleri güçlendiriyoruz.
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
    :root {
        --kenar:       #94a0b2;
        --kenar-guclu: #64707f;
        --kenar-silik: #b8c0cc;
        --yazi-soluk:  #38424f;
        --yazi-silik:  #4a5563;
    }

    .girdi,
    .secim,
    .metin-alani { border-width: 2px; }

    .etiket { border-width: 1.5px; }

    :focus-visible { outline-width: 3px; }
}

/* --------------------------------------------------------------------------
   13. Yazdırma
   Gezinme ve eylem düğmeleri kâğıda basılmasın.
   -------------------------------------------------------------------------- */

@media print {
    .yan-menu,
    .cekmece,
    .menu-dugme,
    .ust-bar,
    .atla,
    .gorsel-kutu__eylemler,
    .gorsel-kutu__alt,
    .satir__islem,
    .kuyruk-satir__islem,
    .gonderi-satir__islem,
    .toplu-arac,
    .btn,
    .ikon-btn { display: none !important; }

    body { background: #fff; }

    .kart {
        border: 1px solid #999;
        box-shadow: none;
        break-inside: avoid;
    }

    .icerik { padding: 0; max-width: none; }
}