﻿/* =====================================================================================================
   ARTUKBEY PORTAL — TASARIM SİSTEMİ v3 (belirteçler, temel, bileşenler)
   Kimlik Artukbey'in kendi dünyasından: logonun bordosu, paketin kraft bandı ve dibek yeşili, altın aslan çizgisi,
   espresso mürekkep. Başlık Young Serif (yalnız sayfa başlığında), gövde IBM Plex Sans, kod/tutar IBM Plex Mono.
   Katmanlar: tasarim.css (bu dosya) → ikon.css (üretilir) → kabuk.css → sayfa dosyaları (giris, vitrin, sayfalar, rapor).
   Kurallar (Portal/TASARIM.md §4f):
     · ölçüler yalnız belirteçten: yazı 11·12·13·14·16·18·22·28·34, boşluk 4'ün katı, köşe 4·8·12·14·16
     · masaüstü kontrol 32 px, dokunmatik 40 px · gölge yalnız yüzen katmanda (pencere, menü, çekmece)
     · hareket yalnız transform + opacity: 120 / 180 / 240 ms; bulanıklık (backdrop-filter) YOK
     · renk durum bildiriyorsa yanında ikon da olur · büyük harfli mikro etiket yok
   Dış kütüphane yok: pencere, çekmece, açılır menü kit.js'te; ikonlar ikon.css'te (Phosphor, sözlükle).
   ===================================================================================================== */

/* ─────────────────────────────── yazı tipleri (yerel, OFL) ─────────────────────────────── */
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url("../yazi/young-serif-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url("../yazi/young-serif-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../yazi/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../yazi/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


/* Kiril (Rusça) ve Arap (Arapça) yazısı: aynı aile adları altında, unicode-range ile. Tarayıcı dosyayı ancak o harf
   sayfada geçerse indirir; dil eklemek CSS'e dokunmayı gerektirmez. Başlıkta Young Serif'in Kiril ve Arap karşılığı yok:
   Kiril için IBM Plex Serif, Arap için Noto Naskh Arabic aynı başlık ailesine bağlanır (ağırlık 400 diye tanımlı, dosya 600). */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../yazi/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../yazi/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../yazi/ibm-plex-sans-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../yazi/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-mono-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-serif-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url("../yazi/ibm-plex-serif-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Young Serif"; font-weight: 400; font-display: swap; src: url("../yazi/noto-naskh-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF; }

/* ─────────────────────────────── belirteçler: açık tema ("kraft") ─────────────────────────────── */
:root {
    /* marka: logodan, paketten, web sitesinden ölçüldü */
    --ap-bordo: #7f2529;          /* logo */
    --ap-bordo-koyu: #641b1f;
    --ap-bordo-parlak: #96303a;
    --ap-kiremit: #9d3c2b;        /* silindir kutu */
    --ap-yesil-marka: #1f5149;    /* dibek paketi */
    --ap-kraft: #d8c3a5;          /* paket bandı */
    --ap-altin-marka: #cbab60;    /* web sitesi, aslan */
    --ap-espresso: #17110e;

    /* anlam: ekranlar bunları kullanır */
    /* RENK SÖZLÜĞÜ (kullanıcı 04.10: "her renk tek anlam; her boka aynı yeşili koyarsan anlam ifade etmez"):
       bordo = YALNIZ marka kimliği (logo, avatar) · eylem/seçim/bağlantı = espresso + kahve (nötr, anlam taşımaz)
       yeşil = kâr / iyi · kırmızı = zarar / kötü · kehribar = dikkat / bekleyen iş · mavi = bilgi
       grafik kategori serileri yeşil-kırmızı KULLANMAZ (anlam karışmasın); kâr serisi --ap-g-arti, zarar --ap-g-eksi */
    --ap-vurgu: #2b201b;                      /* ana eylem dolgusu, seçili, odak (espresso) */
    --ap-vurgu-koyu: #17110e;
    --ap-vurgu-parlak: #44352c;
    --ap-vurgu-metin: #6b4428;                /* bağlantı / eylem yazısı (kahve) */
    --ap-vurgu-zemin: #efe5d8;
    --ap-vurgu-yazi: #fbf5ec;                 /* vurgu dolgusu üstündeki yazı */
    --ap-yesil: #1f5149;
    --ap-yesil-zemin: #e2eeeb;
    --ap-altin: #856530;                      /* yüzey üstünde okunur altın (ince çizgi, ikon, küçük yazı) */
    --ap-altin-zemin: #f6eedb;
    --ap-kraft-zemin: #efe4d2;

    /* yan menü: iki temada da espresso + altın (Artukbey web sitesinin siyah-altını) */
    --ap-yan-zemin: #17110e;
    --ap-yan-zemin-2: #211915;
    --ap-yan-metin: #efe5d8;
    --ap-yan-silik: #a3938a;
    --ap-yan-vurgu: rgba(203, 171, 96, .13);
    --ap-yan-isaret: #cbab60;

    /* yüzeyler */
    --ap-zemin: #f5f0e8;
    --ap-yuzey: #fffdf9;
    --ap-yuzey-2: #faf6ef;
    --ap-yuzey-3: #f1e9dd;
    --ap-cizgi: #e7ddcf;
    --ap-cizgi-guclu: #d5c6b2;
    --ap-perde: rgba(23, 17, 14, .46);

    /* mürekkep */
    --ap-metin: #1f1714;
    --ap-metin-2: #564841;
    --ap-metin-3: #74655b;

    /* durum (hep ikonla birlikte) */
    --ap-iyi: #2b744a;
    --ap-iyi-zemin: #e3f0e7;
    --ap-dikkat: #93590a;
    --ap-dikkat-zemin: #faeed9;
    --ap-kotu: #b5361f;
    --ap-kotu-zemin: #f9e4de;
    --ap-bilgi: #28617a;
    --ap-bilgi-zemin: #e1eef2;

    /* grafik kategori paleti: kahve · altın · çelik · latte · kraft · gri · erik · espresso (yeşil/kırmızı YOK) */
    --ap-g1: #5b3a29;
    --ap-g2: #b8914a;
    --ap-g3: #6d7f91;
    --ap-g4: #c49a6c;
    --ap-g5: #8c6a4f;
    --ap-g6: #a39c95;
    --ap-g7: #7a6787;
    --ap-g8: #2b201b;
    --ap-g-arti: #2f7d52;
    --ap-g-eksi: #b8452f;

    /* yazı */
    --ap-yazi: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --ap-baslik: "Young Serif", Georgia, "Times New Roman", serif;
    --ap-mono: "IBM Plex Mono", "IBM Plex Sans", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --ap-y-11: 11px; --ap-y-12: 12px; --ap-y-13: 13px; --ap-y-14: 14px; --ap-y-16: 16px;
    --ap-y-18: 18px; --ap-y-22: 22px; --ap-y-28: 28px; --ap-y-34: 34px;

    /* ölçü */
    --ap-kontrol: 32px;
    --ap-kontrol-kucuk: 26px;
    --ap-kontrol-buyuk: 40px;
    --ap-r-xs: 4px;
    --ap-r-k: 8px;        /* düğme, girdi, çip, menü öğesi */
    --ap-r: 12px;         /* kart */
    --ap-r-p: 14px;       /* pencere, açılır menü */
    --ap-r-s: 16px;       /* alttan sayfa */
    --ap-iz: 3px;
    --ap-sayfa-en: 1360px;    /* içerik genişliği; geniş ekranda büyür (aşağıda) */

    /* gölge: yalnız yüzen katman */
    --ap-golge: 0 1px 2px rgba(31, 23, 20, .05);
    --ap-golge-katman: 0 8px 20px -6px rgba(31, 23, 20, .18), 0 1px 3px rgba(31, 23, 20, .08);
    --ap-golge-pencere: 0 24px 48px -12px rgba(31, 23, 20, .32), 0 2px 8px rgba(31, 23, 20, .1);

    /* hareket */
    --ap-sure-1: 120ms;
    --ap-sure-2: 180ms;
    --ap-sure-3: 240ms;
    --ap-egri-gir: cubic-bezier(.2, .8, .2, 1);
    --ap-egri-cik: cubic-bezier(.4, 0, 1, 1);

    /* Artuklu sekiz köşeli yıldız deseni (maske olarak kullanılır) */
    --ap-desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 10 L42.1 21.3 L54.4 17.6 L50.7 29.9 L62 36 L50.7 42.1 L54.4 54.4 L42.1 50.7 L36 62 L29.9 50.7 L17.6 54.4 L21.3 42.1 L10 36 L21.3 29.9 L17.6 17.6 L29.9 21.3 Z' fill='none' stroke='black' stroke-width='1.2'/%3E%3Ccircle cx='36' cy='36' r='3' fill='black'/%3E%3Cpath d='M0 0 L8 0 L0 8 Z M72 0 L64 0 L72 8 Z M0 72 L8 72 L0 64 Z M72 72 L64 72 L72 64 Z' fill='black'/%3E%3C/svg%3E");

    color-scheme: light;
}

/* ─────────────────────────────── koyu tema ("gece kahvesi") ─────────────────────────────── */
[data-tema="dark"] {
    color-scheme: dark;
    --ap-vurgu: #eadccb;
    --ap-vurgu-koyu: #d6c4ae;
    --ap-vurgu-parlak: #f5ebdd;
    --ap-vurgu-metin: #dcb98f;
    --ap-vurgu-zemin: rgba(234, 220, 203, .10);
    --ap-vurgu-yazi: #17110e;
    --ap-yesil: #74bfb1;
    --ap-yesil-zemin: rgba(116, 191, 177, .14);
    --ap-altin: #d8b76e;
    --ap-altin-zemin: rgba(216, 183, 110, .14);
    --ap-kraft-zemin: #2a221c;

    --ap-yan-zemin: #0f0b09;
    --ap-yan-zemin-2: #19130f;

    --ap-zemin: #14100d;
    --ap-yuzey: #1c1714;
    --ap-yuzey-2: #221c18;
    --ap-yuzey-3: #2c241f;
    --ap-cizgi: #352c26;
    --ap-cizgi-guclu: #4b3f36;
    --ap-perde: rgba(0, 0, 0, .6);

    --ap-metin: #f2ebe3;
    --ap-metin-2: #cabcaf;
    --ap-metin-3: #9f9083;

    --ap-iyi: #6cc592;
    --ap-iyi-zemin: rgba(108, 197, 146, .13);
    --ap-dikkat: #e8b04f;
    --ap-dikkat-zemin: rgba(232, 176, 79, .13);
    --ap-kotu: #f08872;
    --ap-kotu-zemin: rgba(240, 136, 114, .14);
    --ap-bilgi: #86c4d4;
    --ap-bilgi-zemin: rgba(134, 196, 212, .13);

    --ap-g1: #c49a7a;
    --ap-g2: #dcbb6e;
    --ap-g3: #9db0c2;
    --ap-g4: #e2c29b;
    --ap-g5: #a8876b;
    --ap-g6: #8e8781;
    --ap-g7: #b3a0c2;
    --ap-g8: #eadccb;
    --ap-g-arti: #6cc592;
    --ap-g-eksi: #ef8a73;

    --ap-golge: 0 1px 2px rgba(0, 0, 0, .3);
    --ap-golge-katman: 0 10px 24px -6px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);
    --ap-golge-pencere: 0 24px 56px -12px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .4);
}

/* geniş ekranda (1920) içerik 1360'ta kalınca iki yanda 280'er px boş kalıyordu → 1600'e kadar açılır */
@media (min-width: 1700px) { :root { --ap-sayfa-en: 1600px; } }

/* dokunmatik ekranda kontroller parmak ölçüsüne büyür (yazı aynı kalır) */
@media (pointer: coarse) {
    :root { --ap-kontrol: 40px; --ap-kontrol-kucuk: 32px; --ap-kontrol-buyuk: 44px; }
}

/* ─────────────────────────────── temel (sıfırlama) ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; scrollbar-gutter: stable; }
html.ap-kaydirma-yok { overflow: hidden; }   /* pencere açıkken sayfa kaymaz; yer ayrıldığı için genişlik oynamaz */
body {
    margin: 0; min-height: 100vh;
    background: var(--ap-zemin); color: var(--ap-metin);
    font: 400 var(--ap-y-14) / 20px var(--ap-yazi);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 8px; font-weight: 600; line-height: 1.25; color: var(--ap-metin); text-wrap: balance; }
h1 { font-size: var(--ap-y-22); } h2 { font-size: var(--ap-y-18); } h3 { font-size: var(--ap-y-16); } h4, h5, h6 { font-size: var(--ap-y-14); }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 12px; padding-inline-start: 24px; }
dl { margin: 0 0 12px; } dd { margin: 0; }
small { font-size: var(--ap-y-12); }
b, strong { font-weight: 600; }
a { color: var(--ap-vurgu-metin); text-decoration: none; }
a:hover { color: var(--ap-vurgu-koyu); }
[data-tema="dark"] a:hover { color: var(--ap-metin); }
img, svg, video { vertical-align: middle; }
img, video { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--ap-cizgi); margin: 12px 0; }
table { border-collapse: collapse; }
th { text-align: inherit; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
button:disabled { cursor: default; }
label { display: inline-block; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--ap-vurgu); }
:focus-visible { outline: 2px solid var(--ap-vurgu); outline-offset: 2px; }
[data-tema="dark"] :focus-visible { outline-color: var(--ap-vurgu-metin); }
::selection { background: color-mix(in srgb, var(--ap-vurgu) 22%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--ap-cizgi-guclu) transparent; }

/* ─────────────────────────────── yazı yardımcıları ─────────────────────────────── */
.ap-baslik-yazi { font-family: var(--ap-baslik); font-weight: 400; font-synthesis: none; letter-spacing: -.005em; }
.ap-sayi, .ap-rakam { font-variant-numeric: tabular-nums; }
.ap-kod, .ap-tarih { font-family: var(--ap-mono); font-variant-numeric: tabular-nums; }
.ap-para { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-kod { font-size: .92em; letter-spacing: -.01em; }
.ap-silik { color: var(--ap-metin-3); }
.ap-kucuk { font-size: var(--ap-y-12); }
.ap-kes { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sag { text-align: end; }
.ortala { text-align: center; }
.ap-gizli-metin { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-tam { width: 100%; }
.ap-mt-8 { margin-top: 8px; } .ap-mt-12 { margin-top: 12px; } .ap-mb-8 { margin-bottom: 8px; } .ap-mb-12 { margin-bottom: 12px; }
.ap-sag-yasla { margin-inline-start: auto; }
@media (min-width: 992px) { .ap-masaustunde-gizli { display: none !important; } }
kbd {
    font-family: var(--ap-mono); font-size: var(--ap-y-11); line-height: 16px; padding: 0 5px; border-radius: var(--ap-r-xs);
    background: var(--ap-yuzey-3); color: var(--ap-metin-2); border: 1px solid var(--ap-cizgi); box-shadow: inset 0 -1px 0 var(--ap-cizgi-guclu);
}
@media (pointer: coarse) { kbd { display: none; } }

/* ─────────────────────────────── kart ─────────────────────────────── */
.ap-kart { background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi); border-radius: var(--ap-r); box-shadow: var(--ap-golge); }
.ap-kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ap-cizgi); }
.ap-kart-bas h2 { font-size: var(--ap-y-14); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.ap-kart-bas h2 .ap-i { color: var(--ap-metin-3); font-size: 16px; }
.ap-liste-kart { padding: 0; overflow: hidden; margin-bottom: 16px; }

/* ─────────────────────────────── düğme ─────────────────────────────── */
.ap-dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--ap-kontrol); padding: 0 12px;
    font: 600 var(--ap-y-13) / 1 var(--ap-yazi); color: var(--ap-metin);
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi-guclu); border-radius: var(--ap-r-k);
    cursor: pointer; white-space: nowrap; text-decoration: none; user-select: none;
    transition: border-color var(--ap-sure-1), background-color var(--ap-sure-1), color var(--ap-sure-1), transform 60ms;
}
.ap-dugme:hover { border-color: var(--ap-metin-3); color: var(--ap-metin); }
.ap-dugme:active { transform: translateY(1px); }
.ap-dugme:disabled, .ap-dugme[disabled], .ap-dugme[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.ap-dugme .ap-i { font-size: 15px; }
.ap-dugme-ana { color: var(--ap-vurgu-yazi); background: var(--ap-vurgu); border-color: var(--ap-vurgu-koyu); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.ap-dugme-ana:hover { color: var(--ap-vurgu-yazi); background: var(--ap-vurgu-koyu); border-color: var(--ap-vurgu-koyu); }
.ap-dugme-koyu { color: #f5ece0; background: var(--ap-espresso); border-color: var(--ap-espresso); }
.ap-dugme-koyu:hover { color: #fff; background: #2a201a; border-color: #2a201a; }
[data-tema="dark"] .ap-dugme-koyu { color: var(--ap-espresso); background: #eadccb; border-color: #eadccb; }
.ap-dugme-hayalet { background: transparent; border-color: transparent; color: var(--ap-metin-2); }
.ap-dugme-hayalet:hover { background: var(--ap-yuzey-3); border-color: transparent; color: var(--ap-metin); }
.ap-dugme-tehlike { color: var(--ap-kotu); }
.ap-dugme-tehlike:hover { border-color: var(--ap-kotu); color: var(--ap-kotu); background: var(--ap-kotu-zemin); }
.ap-dugme-genis { width: 100%; }
.ap-dugme-buyuk { height: var(--ap-kontrol-buyuk); padding: 0 16px; font-size: var(--ap-y-14); }
.ap-dugme-kucuk { height: var(--ap-kontrol-kucuk); padding: 0 8px; font-size: var(--ap-y-12); gap: 4px; }
.ap-dugme-kucuk .ap-i { font-size: 13px; }
.ap-bag-dugme { background: none; border: 0; padding: 0; color: var(--ap-vurgu-metin); font-weight: 600; font-size: var(--ap-y-13); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ap-bag-dugme:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-ikon-dugme {
    width: var(--ap-kontrol); height: var(--ap-kontrol); flex: none;
    display: inline-grid; place-items: center; padding: 0;
    border-radius: var(--ap-r-k); color: var(--ap-metin-2); border: 1px solid transparent; background: transparent;
    transition: background-color var(--ap-sure-1), color var(--ap-sure-1), border-color var(--ap-sure-1);
}
.ap-ikon-dugme:hover, .ap-ikon-dugme[aria-expanded="true"] { color: var(--ap-metin); background: var(--ap-yuzey-3); }
.ap-ikon-dugme .ap-i { font-size: 18px; }
.ap-ikon-dugme.cerceveli { border-color: var(--ap-cizgi-guclu); background: var(--ap-yuzey); }
.ap-kapat { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; border: 0; border-radius: var(--ap-r-k); background: none; color: var(--ap-metin-3); }
.ap-kapat:hover { background: var(--ap-yuzey-3); color: var(--ap-metin); }
.ap-kapat .ap-i { font-size: 16px; }

/* ─────────────────────────────── girdi ─────────────────────────────── */
.ap-girdi {
    display: block; width: 100%; height: var(--ap-kontrol); padding: 0 10px;
    font: 400 var(--ap-y-14) / 1 var(--ap-yazi); color: var(--ap-metin);
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi-guclu); border-radius: var(--ap-r-k);
    transition: border-color var(--ap-sure-1), box-shadow var(--ap-sure-1);
}
[data-tema="dark"] .ap-girdi { background: var(--ap-yuzey-2); }
.ap-girdi:hover { border-color: var(--ap-metin-3); }
.ap-girdi:focus { outline: none; border-color: var(--ap-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-vurgu) 18%, transparent); }
.ap-girdi::placeholder { color: var(--ap-metin-3); }
.ap-girdi:disabled { background: var(--ap-yuzey-3); color: var(--ap-metin-3); }
.ap-girdi-kucuk { height: var(--ap-kontrol-kucuk); font-size: var(--ap-y-13); padding: 0 8px; }
input[type="date"].ap-girdi { font-family: var(--ap-mono); font-size: var(--ap-y-13); }
@media (pointer: coarse) { .ap-girdi { font-size: 16px; } } /* iOS yakınlaştırmasın */
textarea.ap-girdi { height: auto; min-height: 80px; padding: 8px 10px; line-height: 20px; resize: vertical; }
select.ap-girdi {
    appearance: none; padding-inline-end: 30px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2374655b' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
}
/* seçim kutusu (kit.js secim): asıl select gizli ama formda; görünen düğme + açılan liste */
.ap-secim-yerel { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden; clip-path: inset(50%); border: 0 !important; opacity: 0; pointer-events: none; }
button.ap-secim {
    display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: var(--ap-kontrol); padding: 0 10px;
    font: 400 var(--ap-y-14) / 1 var(--ap-yazi); color: var(--ap-metin); text-align: start; cursor: pointer;
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi-guclu); border-radius: var(--ap-r-k);
    transition: border-color var(--ap-sure-1), box-shadow var(--ap-sure-1);
}
button.ap-secim.ap-girdi-kucuk { height: var(--ap-kontrol-kucuk); font-size: var(--ap-y-13); padding: 0 8px; }
[data-tema="dark"] button.ap-secim { background: var(--ap-yuzey-2); }
button.ap-secim:hover { border-color: var(--ap-metin-3); }
button.ap-secim:focus-visible, button.ap-secim.acik { outline: none; border-color: var(--ap-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-vurgu) 18%, transparent); }
button.ap-secim:disabled { background: var(--ap-yuzey-3); color: var(--ap-metin-3); cursor: not-allowed; }
button.ap-secim.ap-secim-hata { border-color: var(--ap-kotu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-kotu) 15%, transparent); }
.ap-secim-metin { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.ap-secim.ap-secim-bos .ap-secim-metin { color: var(--ap-metin-3); }
button.ap-secim > .ap-i { flex: none; font-size: 13px; color: var(--ap-metin-3); transition: transform var(--ap-sure-1); }
button.ap-secim.acik > .ap-i { transform: rotate(180deg); }
@media (pointer: coarse) { button.ap-secim { font-size: 16px; } }
.ap-secim-panel {
    position: fixed; z-index: 1200; display: flex; flex-direction: column; overflow: hidden;
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi-guclu); border-radius: var(--ap-r-k);
    box-shadow: 0 12px 32px -8px rgb(40 20 10 / .28), 0 2px 6px rgb(40 20 10 / .08);
    animation: ap-secim-gir var(--ap-sure-1) var(--ap-egri-gir, ease-out);
}
@keyframes ap-secim-gir { from { opacity: 0; transform: translateY(-3px); } }
.ap-secim-ara { position: relative; flex: none; padding: 6px; border-bottom: 1px solid var(--ap-cizgi); }
.ap-secim-ara > .ap-i { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ap-metin-3); pointer-events: none; }
.ap-secim-ara-girdi { width: 100%; height: 32px; padding: 0 8px 0 30px; border: 1px solid var(--ap-cizgi); border-radius: 6px; background: var(--ap-yuzey-2); font: inherit; font-size: var(--ap-y-13); color: var(--ap-metin); }
[dir="rtl"] .ap-secim-ara-girdi { padding: 0 30px 0 8px; }
.ap-secim-ara-girdi:focus { outline: none; border-color: var(--ap-vurgu); background: var(--ap-yuzey); }
.ap-secim-liste { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px; list-style: none; outline: none; }
.ap-secim-oge {
    display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px 6px 28px; border-radius: 6px;
    font-size: var(--ap-y-13); line-height: 18px; color: var(--ap-metin); cursor: pointer; position: relative;
}
[dir="rtl"] .ap-secim-oge { padding: 6px 28px 6px 10px; }
.ap-secim-oge.aktif { background: var(--ap-yuzey-3); }
.ap-secim-oge[aria-selected="true"] { font-weight: 600; color: var(--ap-vurgu-metin); }
.ap-secim-oge[aria-selected="true"]::before {
    content: ""; position: absolute; inset-inline-start: 10px; top: 50%; width: 10px; height: 6px; margin-top: -5px;
    border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
[dir="rtl"] .ap-secim-oge[aria-selected="true"]::before { transform: rotate(45deg) scaleX(-1); }
.ap-secim-oge[aria-disabled="true"] { color: var(--ap-metin-3); cursor: default; }
.ap-secim-oge.ap-secim-bos:not([aria-selected="true"]) { color: var(--ap-metin-3); }
.ap-secim-grup {
    padding: 10px 10px 4px; font-size: var(--ap-y-11); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ap-metin-3);
}
.ap-secim-grup:first-child { padding-top: 4px; }
.ap-secim-oge.ap-secim-grupta { padding-inline-start: 28px; }
.ap-secim-yok { margin: 0; padding: 16px; text-align: center; font-size: var(--ap-y-13); color: var(--ap-metin-3); }
/* telefonda alttan açılan sayfa */
.ap-secim-perde { position: fixed; inset: 0; z-index: 1199; background: rgb(25 15 10 / .38); animation: ap-perde-gir var(--ap-sure-2) linear; }
.ap-secim-panel.ap-secim-sayfa {
    inset: auto 0 0 0; max-height: 78dvh; border-radius: var(--ap-r-s) var(--ap-r-s) 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); animation: ap-sayfa-gir var(--ap-sure-3) var(--ap-egri-gir, ease-out);
}
.ap-secim-bas { flex: none; padding: 14px 16px 10px; font-weight: 600; font-size: var(--ap-y-14); border-bottom: 1px solid var(--ap-cizgi); }
.ap-secim-sayfa .ap-secim-oge { min-height: 44px; font-size: 15px; }
.ap-secim-sayfa .ap-secim-ara-girdi { height: 40px; font-size: 16px; }
/* takvim (kit.js takvim): input[type=date] gizli, görünen düğme + ay ızgarası */
button.ap-tarih-dugme {
    display: inline-flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: var(--ap-kontrol); padding: 0 10px;
    font: 400 var(--ap-y-14) / 1 var(--ap-yazi); font-variant-numeric: tabular-nums; color: var(--ap-metin); text-align: start; white-space: nowrap; cursor: pointer;
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi-guclu); border-radius: var(--ap-r-k);
    transition: border-color var(--ap-sure-1), box-shadow var(--ap-sure-1);
}
button.ap-tarih-dugme.ap-girdi-kucuk { height: var(--ap-kontrol-kucuk); font-size: var(--ap-y-13); padding: 0 8px; }
[data-tema="dark"] button.ap-tarih-dugme { background: var(--ap-yuzey-2); }
button.ap-tarih-dugme > .ap-i { flex: none; font-size: 15px; color: var(--ap-metin-3); }
button.ap-tarih-dugme:hover { border-color: var(--ap-metin-3); }
button.ap-tarih-dugme:focus-visible, button.ap-tarih-dugme.acik { outline: none; border-color: var(--ap-vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-vurgu) 18%, transparent); }
button.ap-tarih-dugme.acik > .ap-i { color: var(--ap-vurgu-metin); }
button.ap-tarih-dugme:disabled { background: var(--ap-yuzey-3); color: var(--ap-metin-3); cursor: not-allowed; }
button.ap-tarih-dugme.ap-secim-bos .ap-tarih-metin { color: var(--ap-metin-3); }
button.ap-tarih-dugme.ap-secim-hata { border-color: var(--ap-kotu); }
.ap-tarih-metin { overflow: hidden; text-overflow: ellipsis; }
@media (pointer: coarse) { button.ap-tarih-dugme { font-size: 16px; } }
.ap-takvim {
    position: fixed; z-index: 1200; width: 292px; padding: 10px;
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi-guclu); border-radius: var(--ap-r-k);
    box-shadow: 0 12px 32px -8px rgb(40 20 10 / .28), 0 2px 6px rgb(40 20 10 / .08);
    animation: ap-secim-gir var(--ap-sure-1) var(--ap-egri-gir);
}
.ap-takvim-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ap-takvim-ay { font: 400 var(--ap-y-15, 15px) / 1.2 var(--ap-baslik); font-variant-numeric: lining-nums; text-transform: capitalize; }
.ap-takvim-ok { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--ap-metin-2); cursor: pointer; }
.ap-takvim-ok:hover { background: var(--ap-yuzey-3); color: var(--ap-metin); }
[dir="rtl"] .ap-takvim-ok .ap-i { transform: scaleX(-1); }
.ap-takvim-gunler, .ap-takvim-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ap-takvim-gunler span { padding: 4px 0; text-align: center; font-size: var(--ap-y-11); font-weight: 600; letter-spacing: .03em; color: var(--ap-metin-3); text-transform: uppercase; }
.ap-takvim-izgara { outline: none; }
.ap-takvim-gun {
    height: 34px; border: 0; border-radius: 6px; background: none; color: var(--ap-metin);
    font: 500 var(--ap-y-13) / 1 var(--ap-yazi); font-variant-numeric: tabular-nums; cursor: pointer; position: relative;
}
.ap-takvim-gun:hover:not(:disabled) { background: var(--ap-yuzey-3); }
.ap-takvim-gun.disi { color: var(--ap-metin-3); font-weight: 400; }
.ap-takvim-gun.bugun::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ap-vurgu); }
.ap-takvim-izgara:focus-visible .ap-takvim-gun.odak { box-shadow: inset 0 0 0 2px var(--ap-vurgu); }
.ap-takvim-gun.secili { background: var(--ap-vurgu); color: #fff; font-weight: 700; }
.ap-takvim-gun.secili::after { background: #fff; }
.ap-takvim-gun:disabled { color: var(--ap-metin-3); opacity: .4; cursor: not-allowed; }
.ap-takvim-alt { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ap-cizgi); }
.ap-takvim.ap-secim-sayfa { inset: auto 0 0 0; width: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: var(--ap-r-s) var(--ap-r-s) 0 0; border-bottom: 0;
    animation: ap-sayfa-gir var(--ap-sure-3) var(--ap-egri-gir); }
.ap-takvim.ap-secim-sayfa .ap-secim-bas { margin: 0 -16px 10px; }
.ap-takvim.ap-secim-sayfa .ap-takvim-ust { padding-top: 10px; }
.ap-takvim.ap-secim-sayfa .ap-takvim-gun { height: 44px; font-size: 15px; }
.ap-alan { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; min-width: 0; }
.ap-alan > span:first-child, .ap-alan > legend { font-size: var(--ap-y-13); font-weight: 600; color: var(--ap-metin-2); margin: 0; }
.ap-alan small, .ap-alan-not { font-size: var(--ap-y-12); color: var(--ap-metin-3); font-weight: 400; }
.ap-sifre-kutu { position: relative; display: block; }
.ap-sifre-kutu .ap-girdi { padding-inline-end: 40px; }
.ap-sifre-goster { position: absolute; inset-inline-end: 3px; top: 3px; bottom: 3px; width: 32px; border: 0; background: none; color: var(--ap-metin-3); border-radius: 6px; display: grid; place-items: center; }
.ap-sifre-goster:hover { color: var(--ap-metin); background: var(--ap-yuzey-3); }
.ap-girdi-grup { display: flex; align-items: stretch; }
.ap-girdi-grup > .ap-girdi { border-radius: var(--ap-r-k) 0 0 var(--ap-r-k); min-width: 0; flex: 1 1 auto; }
.ap-girdi-grup > .ap-dugme, .ap-girdi-grup > .ap-ikon-dugme { border-radius: 0; margin-inline-start: -1px; height: auto; border: 1px solid var(--ap-cizgi-guclu); }
.ap-girdi-grup > :last-child { border-radius: 0 var(--ap-r-k) var(--ap-r-k) 0; }
.ap-girdi-grup > .ap-dugme-ana { border-color: var(--ap-vurgu-koyu); }

/* ─────────────────────────────── uyarı ─────────────────────────────── */
.ap-uyari { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--ap-r-k); font-size: var(--ap-y-13); line-height: 20px; margin-bottom: 12px; border: 1px solid transparent; }
.ap-uyari > .ap-i { font-size: 16px; flex: none; margin-top: 2px; }
.ap-uyari-kotu { background: var(--ap-kotu-zemin); color: var(--ap-kotu); border-color: color-mix(in srgb, var(--ap-kotu) 22%, transparent); }
.ap-uyari-iyi { background: var(--ap-iyi-zemin); color: var(--ap-iyi); border-color: color-mix(in srgb, var(--ap-iyi) 22%, transparent); }
.ap-uyari-dikkat { background: var(--ap-dikkat-zemin); color: var(--ap-metin); border-color: color-mix(in srgb, var(--ap-dikkat) 26%, transparent); }
.ap-uyari-dikkat > .ap-i { color: var(--ap-dikkat); }
.ap-uyari-bilgi { background: var(--ap-bilgi-zemin); color: var(--ap-metin); border-color: color-mix(in srgb, var(--ap-bilgi) 24%, transparent); }
.ap-uyari-bilgi > .ap-i { color: var(--ap-bilgi); }

/* ─────────────────────────────── rozet ─────────────────────────────── */
.ap-rozet { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ap-y-12); line-height: 18px; font-weight: 600; padding: 0 7px; border-radius: var(--ap-r-xs); background: var(--ap-vurgu-zemin); color: var(--ap-vurgu-metin); white-space: nowrap; }
.ap-rozet .ap-i { font-size: 12px; }
.ap-rozet-silik { background: var(--ap-yuzey-3); color: var(--ap-metin-3); margin-inline-start: 6px; }
.ap-rozet-yesil, .ap-rozet-cini { background: var(--ap-yesil-zemin); color: var(--ap-yesil); }
.ap-rozet-altin { background: var(--ap-altin-zemin); color: var(--ap-altin); }
.ap-rozet-iyi { background: var(--ap-iyi-zemin); color: var(--ap-iyi); }
.ap-rozet-dikkat { background: var(--ap-dikkat-zemin); color: var(--ap-dikkat); }
.ap-rozet-kotu { background: var(--ap-kotu-zemin); color: var(--ap-kotu); }

/* ─────────────────────────────── pencere (<dialog>, kit.js) ───────────────────────────────
   Perde ile pencere aynı karede başlar; pencere 180 ms'de 8 px kayarak ve saydamlıkla gelir, 120 ms'de gider.
   Pencere üstten sabit durur (ortalanmaz): içerik yüklenince zıplamaz. Telefonda alttan açılan sayfa olur. */
.ap-pencere {
    width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 12vh - 24px);
    margin: 10vh auto auto; padding: 0;
    border: 1px solid var(--ap-cizgi); border-radius: var(--ap-r-p);
    background: var(--ap-yuzey); color: var(--ap-metin); box-shadow: var(--ap-golge-pencere);
    overflow: hidden;
}
.ap-pencere[open] { display: flex; flex-direction: column; animation: ap-pencere-gir var(--ap-sure-2) var(--ap-egri-gir); }
.ap-pencere > form { display: contents; }
.ap-pencere::backdrop { background: var(--ap-perde); }
.ap-pencere[open]::backdrop { animation: ap-perde-gir var(--ap-sure-2) linear; }
.ap-pencere.kapaniyor { animation: ap-pencere-cik var(--ap-sure-1) var(--ap-egri-cik) forwards; }
.ap-pencere.kapaniyor::backdrop { animation: ap-perde-cik var(--ap-sure-1) linear forwards; }
@keyframes ap-pencere-gir { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes ap-pencere-cik { to { opacity: 0; transform: translateY(4px) scale(.99); } }
@keyframes ap-perde-gir { from { opacity: 0; } }
@keyframes ap-perde-cik { to { opacity: 0; } }
.ap-pencere-genis { width: min(760px, calc(100vw - 32px)); }
.ap-pencere-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px 20px; flex: none; }
.ap-pencere-bas h2 { font-size: var(--ap-y-16); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.ap-pencere-bas h2 .ap-i { color: var(--ap-vurgu-metin); }
.ap-pencere-ara { position: relative; padding: 0 20px 12px; border-bottom: 1px solid var(--ap-cizgi); flex: none; }
.ap-pencere-ara .ap-i { position: absolute; inset-inline-start: 30px; top: calc(var(--ap-kontrol) / 2 - 7px); color: var(--ap-metin-3); font-size: 14px; pointer-events: none; }
.ap-pencere-ara .ap-girdi { padding-inline-start: 32px; }
.ap-pencere-liste { height: min(52vh, 420px); overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; }
.ap-pencere-oge {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ad rozet" "alt rozet"; gap: 0 10px; align-items: center;
    text-align: start; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ap-r-k); background: none; color: var(--ap-metin);
    border-inline-start: var(--ap-iz) solid transparent; min-height: 44px; flex: none;
    content-visibility: auto; contain-intrinsic-size: auto 48px;
}
.ap-pencere-oge:hover, .ap-pencere-oge:focus { background: var(--ap-yuzey-3); outline: none; }
.ap-pencere-oge:focus-visible { box-shadow: 0 0 0 2px var(--ap-vurgu) inset; }
.ap-pencere-oge.secili { border-inline-start-color: var(--ap-vurgu); background: var(--ap-vurgu-zemin); }
.ap-pencere-oge-ad { grid-area: ad; font-weight: 600; font-size: var(--ap-y-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-pencere-oge-alt { grid-area: alt; font-size: var(--ap-y-12); color: var(--ap-metin-3); }
.ap-pencere-oge .ap-rozet { grid-area: rozet; }
.ap-pencere-oge-isaret { grid-area: rozet; font-size: 16px; color: var(--ap-metin-3); }
.ap-pencere-oge.secili .ap-pencere-oge-isaret { color: var(--ap-vurgu-metin); }
.ap-pencere-bilgi { padding: 14px 12px; color: var(--ap-metin-3); font-size: var(--ap-y-13); margin: 0; }
.ap-pencere-govde { padding: 4px 20px 12px; overflow: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.ap-pencere-alt { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ap-cizgi); background: var(--ap-yuzey-2); flex: none; }
.ap-bekleme-satir { height: 44px; border-radius: var(--ap-r-k); flex: none; }

/* alttan sayfa: telefonda bütün pencereler ve hesap sayfası */
.ap-alttan { width: 100%; max-width: 560px; margin: auto auto 0; border-radius: var(--ap-r-s) var(--ap-r-s) 0 0; border-bottom: 0; max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ap-alttan[open] { animation-name: ap-sayfa-gir; animation-duration: var(--ap-sure-3); }
.ap-alttan.kapaniyor { animation-name: ap-sayfa-cik; animation-duration: var(--ap-sure-2); }
.ap-alttan::before { content: ""; display: block; flex: none; width: 36px; height: 4px; border-radius: 4px; background: var(--ap-cizgi-guclu); margin: 8px auto 0; }
@keyframes ap-sayfa-gir { from { transform: translateY(100%); } }
@keyframes ap-sayfa-cik { to { transform: translateY(100%); } }
@media (max-width: 575.98px) {
    .ap-pencere { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--ap-r-s) var(--ap-r-s) 0 0; border-bottom: 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .ap-pencere[open] { animation-name: ap-sayfa-gir; animation-duration: var(--ap-sure-3); }
    .ap-pencere.kapaniyor { animation-name: ap-sayfa-cik; animation-duration: var(--ap-sure-2); }
    .ap-pencere::before { content: ""; display: block; flex: none; width: 36px; height: 4px; border-radius: 4px; background: var(--ap-cizgi-guclu); margin: 8px auto 0; }
    .ap-pencere-alt .ap-dugme { flex: 1 1 auto; }
    .ap-pencere-liste { height: 46vh; }
}

/* ─────────────────────────────── açılır menü (kit.js) ─────────────────────────────── */
.ap-acilir-kap { position: relative; }
.ap-acilir {
    position: absolute; z-index: 1050; top: calc(100% + 6px); inset-inline-end: 0; min-width: 220px;
    padding: 4px; margin: 0; list-style: none;
    background: var(--ap-yuzey); border: 1px solid var(--ap-cizgi); border-radius: var(--ap-r-p); box-shadow: var(--ap-golge-katman);
    visibility: hidden; opacity: 0; transform: translateY(-4px); transform-origin: top right;
    transition: opacity var(--ap-sure-1) var(--ap-egri-cik), transform var(--ap-sure-1) var(--ap-egri-cik), visibility 0s linear var(--ap-sure-1);
}
.ap-acilir.acik { visibility: visible; opacity: 1; transform: none; transition: opacity var(--ap-sure-1) var(--ap-egri-gir), transform var(--ap-sure-1) var(--ap-egri-gir), visibility 0s; }
.ap-acilir-sol { inset-inline-end: auto; inset-inline-start: 0; transform-origin: top left; }
.ap-acilir > li { list-style: none; }
.ap-acilir form { margin: 0; }
.ap-acilir-oge {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px;
    border: 0; border-radius: var(--ap-r-k); background: none; color: var(--ap-metin); font-size: var(--ap-y-13); text-align: start; text-decoration: none;
}
.ap-acilir-oge:hover, .ap-acilir-oge:focus-visible { background: var(--ap-yuzey-3); color: var(--ap-metin); outline: none; }
.ap-acilir-oge .ap-i { color: var(--ap-metin-3); font-size: 16px; }
.ap-acilir-ayrac { height: 1px; margin: 4px 6px; background: var(--ap-cizgi); }

/* ─────────────────────────────── bildirim şeridi (kit.js: AP_kit.bildir) ─────────────────────────────── */
.ap-bildirimler { position: fixed; z-index: 1100; inset-inline-end: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ap-bildirim {
    display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 10px 14px; pointer-events: auto;
    background: var(--ap-espresso); color: #f5ece0; border-radius: var(--ap-r-k); box-shadow: var(--ap-golge-katman); font-size: var(--ap-y-13);
    animation: ap-pencere-gir var(--ap-sure-2) var(--ap-egri-gir);
}
.ap-bildirim .ap-i { font-size: 16px; color: var(--ap-altin-marka); }
.ap-bildirim.kotu .ap-i { color: #f2a08c; }
.ap-bildirim.gidiyor { animation: ap-pencere-cik var(--ap-sure-1) var(--ap-egri-cik) forwards; }
[data-tema="dark"] .ap-bildirim { background: #eadccb; color: var(--ap-espresso); }
[data-tema="dark"] .ap-bildirim .ap-i { color: var(--ap-vurgu-metin); }
@media (max-width: 991.98px) { .ap-bildirimler { inset-inline-start: 16px; inset-inline-end: 16px; bottom: calc(var(--ap-sekme-yukseklik, 0px) + env(safe-area-inset-bottom, 0px) + 12px); } .ap-bildirim { max-width: none; } }

/* ─────────────────────────────── bekleme iskeleti (yüklenirken) ─────────────────────────────── */
.ap-bekleme { position: relative; overflow: hidden; background: var(--ap-yuzey-3); border-radius: var(--ap-r-xs); }
.ap-bekleme::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ap-yuzey) 60%, transparent), transparent);
    animation: ap-bekleme 1.2s ease-in-out infinite;
}
@keyframes ap-bekleme { to { transform: translateX(100%); } }

/* dönen işaret (gönderiliyor, okunuyor) */
.ap-donen { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: ap-don .7s linear infinite; flex: none; }
@keyframes ap-don { to { transform: rotate(360deg); } }

/* onay kutusu + etiket satırı */
.ap-onay-satir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ap-y-13); color: var(--ap-metin-2); }
.ap-onay-satir input { width: 15px; height: 15px; margin: 0; }
.ap-pencere-liste.ap-pencere-liste-kisa { height: auto; }

/* ─────────────────────────────── çizelge (tablo imzası) ─────────────────────────────── */
.ap-izelge-kap { overflow-x: auto; }
.ap-izelge { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ap-y-13); line-height: 18px; table-layout: auto; }
.ap-izelge th {
    font-size: var(--ap-y-11); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ap-metin-3);
    padding: 10px 14px 8px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--ap-cizgi-guclu); background: var(--ap-yuzey);
}
.ap-izelge td { padding: 10px 14px; border-bottom: 1px solid var(--ap-cizgi); vertical-align: middle; }
.ap-izelge td.ap-kes { width: 100%; min-width: 180px; }
.ap-izelge tbody tr { position: relative; }
.ap-izelge tbody td:first-child { box-shadow: inset var(--ap-iz) 0 0 var(--ap-iz-renk, transparent); padding-inline-start: 15px; }
.ap-izelge tbody tr[data-ap-git] { cursor: pointer; }
.ap-izelge tbody tr:hover td { background: var(--ap-yuzey-2); }
.ap-izelge tbody tr:last-child td { border-bottom: 0; }
.ap-izelge tfoot td { font-weight: 600; padding: 8px 12px; border-top: 3px double var(--ap-cizgi-guclu); background: var(--ap-yuzey-2); }
.ap-izelge tfoot tr + tr td { border-top: 1px solid var(--ap-cizgi); }
.ap-izelge .ap-genel-toplam td { font-size: var(--ap-y-14); color: var(--ap-metin); }
.ap-izelge small { color: var(--ap-metin-3); font-family: var(--ap-yazi); }
.ap-iz-tamam { --ap-iz-renk: transparent; }   /* olağan son durum sessiz (renk sözlüğü 04.10): her satır yeşil şerit olunca yeşil anlamını yitiriyordu */
.ap-iz-kismi { --ap-iz-renk: var(--ap-dikkat); }
.ap-iz-bekliyor { --ap-iz-renk: var(--ap-bilgi); }
.ap-iz-kapali { --ap-iz-renk: var(--ap-metin-3); }
.ap-iz-yolda { --ap-iz-renk: var(--ap-bilgi); }   /* yolda = bilgi, dikkat değil */
.ap-iz-onayda, .ap-iz-iletiliyor { --ap-iz-renk: var(--ap-bilgi); }
.ap-iz-reddedildi { --ap-iz-renk: var(--ap-kotu); }
.ap-iz-hata { --ap-iz-renk: var(--ap-kotu); }
.ap-iz-kritik { --ap-iz-renk: var(--ap-kotu); }
.ap-iz-kapali td { color: var(--ap-metin-3); }

.ap-tablo-arac { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ap-cizgi); }
.ap-tablo-sayac { font-size: var(--ap-y-12); color: var(--ap-metin-3); white-space: nowrap; }
.ap-ara-kutu { position: relative; flex: 1 1 auto; max-width: 400px; }
.ap-ara-kutu > .ap-i { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--ap-metin-3); pointer-events: none; font-size: 14px; }
.ap-ara-kutu .ap-girdi { padding-inline-start: 32px; }
.ap-ara-kutu kbd { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); }

/* durum etiketi: renk + ikon */
.ap-durum-etiket { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ap-y-12); font-weight: 600; white-space: nowrap; }
.ap-durum-etiket .ap-i { font-size: 14px; }
.ap-durum-tamam { color: var(--ap-iyi); }
.ap-durum-kismi { color: var(--ap-dikkat); }
.ap-durum-bekliyor { color: var(--ap-bilgi); }
.ap-durum-sessiz { color: var(--ap-metin-2); }
.ap-durum-sessiz .ap-i { color: var(--ap-metin-3); }
.ap-durum-kapali { color: var(--ap-metin-3); }
.ap-durum-yolda { color: var(--ap-dikkat); }
.ap-durum-onayda, .ap-durum-iletiliyor { color: var(--ap-bilgi); }
.ap-durum-reddedildi { color: var(--ap-kotu); }
.ap-kopru-not { display: block; max-inline-size: 42ch; white-space: normal; }
.ap-kopru-ara { margin-block-start: 24px; }
.ap-kopru-esle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-kopru-esle select, .ap-kopru-esle button.ap-secim { min-inline-size: 0; flex: 1 1 220px; }
.ap-durum-gecikti { color: var(--ap-kotu); }
.ap-durum-buyuk { font-size: var(--ap-y-13); padding: 3px 10px; border-radius: var(--ap-r-k); background: var(--ap-yuzey-3); margin-top: 6px; }

/* ─────────────────────────────── sayfa başı, kademe, boş durum ───────────────────────────────
   Başlığın altında paketteki altın bant: kısa, ince çift çizgi. */
.ap-sayfa-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ap-sayfa-ust { font-size: var(--ap-y-12); font-weight: 600; color: var(--ap-vurgu-metin); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.ap-sayfa-baslik { font-family: var(--ap-baslik); font-weight: 400; font-synthesis: none; font-size: var(--ap-y-22); line-height: 28px; letter-spacing: -.005em; margin: 0 0 4px; }
.ap-sayfa-baslik::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; border-top: 1px solid var(--ap-altin); border-bottom: 1px solid var(--ap-altin); opacity: .8; }
.ap-sayfa-alt { color: var(--ap-metin-2); font-size: var(--ap-y-13); margin: 0; }
.ap-kademe { display: flex; align-items: center; gap: 6px; font-size: var(--ap-y-12); color: var(--ap-metin-3); margin-bottom: 8px; flex-wrap: wrap; }
.ap-kademe a { color: var(--ap-metin-2); font-weight: 600; }
.ap-kademe a:hover { color: var(--ap-vurgu-metin); }
.ap-kademe .ap-i { font-size: 11px; }
@media (max-width: 575.98px) { .ap-sayfa-baslik { font-size: 20px; line-height: 26px; } }

.ap-bos-durum { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; overflow: hidden; }
.ap-bos-durum > .ap-i { font-size: 28px; color: var(--ap-vurgu-metin); }
.ap-bos-durum h1, .ap-bos-durum h2 { font-family: var(--ap-baslik); font-weight: 400; font-synthesis: none; font-size: var(--ap-y-18); margin: 4px 0 0; }
.ap-bos-durum p { color: var(--ap-metin-2); max-width: 58ch; margin: 0; font-size: var(--ap-y-13); }
.ap-bos-durum-ic { padding: 28px 20px 32px; }

/* ikon kutusu: ikonu yuvarlatılmış zemin içinde gösterir (boş durum, özet kartı, menü) */
.ap-ikon-kutu { width: 32px; height: 32px; border-radius: var(--ap-r-k); display: inline-grid; place-items: center; flex: none; background: var(--ap-vurgu-zemin); color: var(--ap-vurgu-metin); }
.ap-ikon-kutu .ap-i { font-size: 17px; }
.ap-ikon-kutu.yesil { background: var(--ap-yesil-zemin); color: var(--ap-yesil); }
.ap-ikon-kutu.altin { background: var(--ap-altin-zemin); color: var(--ap-altin); }
.ap-ikon-kutu.iyi { background: var(--ap-iyi-zemin); color: var(--ap-iyi); }
.ap-ikon-kutu.buyuk { width: 44px; height: 44px; border-radius: var(--ap-r); }
.ap-ikon-kutu.buyuk .ap-i { font-size: 22px; }

/* ─────────────────────────────── marka kilidi: yıldız + "Artukbey" ─────────────────────────────── */
.ap-kilit { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.ap-kilit img { flex: 0 0 auto; }
.ap-kilit-metin { display: flex; flex-direction: column; line-height: 1; }
.ap-kilit-ad { font-family: var(--ap-baslik); font-weight: 400; font-synthesis: none; font-size: var(--ap-y-18); letter-spacing: .01em; }
.ap-kilit-alt { font-size: var(--ap-y-11); font-weight: 500; letter-spacing: .12em; opacity: .7; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ─────────────────────────────── çip, segment, küçük yardımcılar ─────────────────────────────── */
.ap-cip {
    display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: var(--ap-r-k);
    background: var(--ap-yuzey-3); font-size: var(--ap-y-12); color: var(--ap-metin-2); max-width: 100%;
}
.ap-cip b { color: var(--ap-metin); font-weight: 600; font-variant-numeric: tabular-nums; }
a.ap-cip { text-decoration: none; transition: background var(--ap-sure-1), color var(--ap-sure-1); }
a.ap-cip:hover { background: var(--ap-cizgi); color: var(--ap-metin); }
.ap-cip.secili { background: var(--ap-vurgu); color: var(--ap-vurgu-yazi); }
.ap-cip.secili:hover { background: var(--ap-vurgu-koyu); color: var(--ap-vurgu-yazi); }

/* segment: iki-üç kardeş sayfa arasında geçiş (Cari hesap | Faturalarım) */
.ap-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--ap-r-k); background: var(--ap-yuzey-3); border: 1px solid var(--ap-cizgi); }
.ap-segment a {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 6px;
    font-size: var(--ap-y-13); font-weight: 600; color: var(--ap-metin-2); text-decoration: none; white-space: nowrap;
}
.ap-segment a:hover { color: var(--ap-metin); }
.ap-segment a.secili { background: var(--ap-yuzey); color: var(--ap-vurgu-metin); box-shadow: 0 1px 2px rgba(23, 17, 14, .08); }
.ap-segment .ap-i { font-size: 15px; }

.ap-gizli-etiket { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-renk-dikkat { color: var(--ap-dikkat); }
.ap-renk-iyi { color: var(--ap-iyi); }
.ap-renk-kotu { color: var(--ap-kotu); }
.ap-dipnot { font-size: var(--ap-y-12); color: var(--ap-metin-3); margin: 0; padding: 10px 16px 14px; line-height: 18px; }

/* yön bildiren ikon (ok, ileri): sağdan sola dilde aynalanır */
[dir="rtl"] .ap-i-yonlu, [dir="rtl"] .ap-i-arrow-right, [dir="rtl"] .ap-i-chevron-right, [dir="rtl"] .ap-i-chevron-left,
[dir="rtl"] .ap-i-arrow-return-left, [dir="rtl"] .ap-i-box-arrow-right, [dir="rtl"] .ap-i-send { transform: scaleX(-1); }
.ap-blok { display: block; }
.ap-hata-sayfa { margin-top: 8vh; }

/* ─────────────────────────────── sağdan sola (Arapça, Farsça …) ───────────────────────────────
   Yerleşim mantıksal özelliklerle yazıldı (margin-inline-start, inset-inline-end …): yön değişince kendiliğinden döner.
   Burada yalnız fiziksel kalması gerekenlerin aynası: satır izi gölgesi, seçim kutusu oku. Arap yazısında harf aralığı
   bitişik harfleri koparır: sıfır. */
[dir="rtl"] { --ap-iz: -3px; }
[dir="rtl"] select.ap-girdi { background-position: left 9px center; }
:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) body { line-height: 1.55; }
/* sayı, kod, tarih, tutar: her dilde soldan sağa okunur (Arapça cümlenin içinde bile) */
[dir="rtl"] span.ap-kod, [dir="rtl"] a.ap-kod, [dir="rtl"] span.ap-para, [dir="rtl"] small.ap-tarih { unicode-bidi: isolate; }
[dir="rtl"] input[type="date"],[dir="rtl"] input[inputmode="numeric"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: end; }

/* ─────────────────────────────── onay kutusu, seçenek düğmesi, anahtar (kit görünümü; tarayıcı varsayılanı yok) ─────────────────────────────── */
input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center;
    width: 18px; height: 18px; margin: 0; vertical-align: -4px; cursor: pointer;
    background: var(--ap-yuzey); border: 1.5px solid var(--ap-cizgi-guclu); border-radius: 5px;
    transition: background-color var(--ap-sure-1), border-color var(--ap-sure-1), box-shadow var(--ap-sure-1);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
    content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition: transform var(--ap-sure-1) var(--ap-egri-gir);
}
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--ap-sure-1) var(--ap-egri-gir); }
input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled) { border-color: var(--ap-vurgu); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--ap-vurgu); border-color: var(--ap-vurgu); }
input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate { background: var(--ap-vurgu); border-color: var(--ap-vurgu); }
input[type="checkbox"]:indeterminate::before { width: 8px; height: 0; margin: 0; border-width: 0 0 2px 0; transform: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-vurgu) 22%, transparent); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
[data-tema="dark"] input[type="checkbox"]:not(:checked), [data-tema="dark"] input[type="radio"]:not(:checked) { background: var(--ap-yuzey-2); }
.ap-cip-isaret input[type="checkbox"] { width: 14px; height: 14px; border-radius: 4px; }
.ap-cip-isaret input[type="checkbox"]::before { width: 4px; height: 7px; }
.ap-izin input { width: 16px; height: 16px; }
/* anahtar: aç / kapa (Etkin, Zorunlu okuma …) */
.ap-anahtar input[type="checkbox"] { width: 34px; height: 20px; border-radius: 999px; place-content: center start; padding: 0 2px; background: var(--ap-yuzey-3); border-color: var(--ap-cizgi-guclu); }
.ap-anahtar input[type="checkbox"]::before {
    width: 14px; height: 14px; margin: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25);
    transform: none; transition: translate var(--ap-sure-1) var(--ap-egri-gir);
}
.ap-anahtar input[type="checkbox"]:checked { background: var(--ap-vurgu); border-color: var(--ap-vurgu); }
.ap-anahtar input[type="checkbox"]:checked::before { transform: none; translate: 14px 0; }
[dir="rtl"] .ap-anahtar input[type="checkbox"]:checked::before { translate: -14px 0; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"]::before, input[type="radio"]::before { transition: none; } }

/* dosya alanı (kit.js dosya): düğme + "ya da buraya sürükleyin" + seçilen dosya adı/boyutu */
.ap-dosya-alan {
    display: flex; align-items: center; gap: 10px; min-height: var(--ap-kontrol); padding: 4px 4px 4px 4px; padding-inline-end: 6px;
    border: 1px dashed var(--ap-cizgi-guclu); border-radius: var(--ap-r-k); background: var(--ap-yuzey); cursor: pointer;
    transition: border-color var(--ap-sure-1), background-color var(--ap-sure-1);
}
.ap-dosya-alan:hover, .ap-dosya-alan.surukleniyor { border-color: var(--ap-vurgu); background: var(--ap-vurgu-zemin); }
.ap-dosya-alan.dolu { border-style: solid; }
.ap-dosya-alan > .ap-dugme { flex: none; }
.ap-dosya-bilgi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ap-y-13); color: var(--ap-metin-3); }
.ap-dosya-alan.dolu .ap-dosya-bilgi { color: var(--ap-metin); font-weight: 500; }

/* arama kutusunun temizle işareti: tarayıcının mavi × yerine soluk kit işareti; kendi × düğmesi olan grupta hiç yok */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-inline-start: 6px; cursor: pointer;
    background: var(--ap-metin-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 2.4 8 6.8l4.4-4.4 1.2 1.2L9.2 8l4.4 4.4-1.2 1.2L8 9.2l-4.4 4.4-1.2-1.2L6.8 8 2.4 3.6z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 2.4 8 6.8l4.4-4.4 1.2 1.2L9.2 8l4.4 4.4-1.2 1.2L8 9.2l-4.4 4.4-1.2-1.2L6.8 8 2.4 3.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--ap-metin); }
.ap-girdi-grup input[type="search"]::-webkit-search-cancel-button { display: none; }

/* telefonda bölmeli seçim (aylar, içerik türleri, segment) ekrana sığmazsa kendi içinde yana kayar; sayfa taşmaz (02.10 döngü) */
@media (max-width: 767.98px) {
    .ap-segment { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
    .ap-segment::-webkit-scrollbar { display: none; }
    .ap-segment > * { flex: none; }
    .ap-sr-kirilim.ap-segment { flex-wrap: nowrap; }
    .ap-bolmeli { max-width: 100%; }
}

/* "N … daha göster" düğmesi (kit sınırlı liste; rapor.css'teki kuralın aynısı — şube ve müşteri düzeninde rapor.css yüklenmez) */
.ap-daha { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 9px; border: 1px dashed var(--ap-cizgi-guclu); border-radius: 8px; background: var(--ap-yuzey); color: var(--ap-metin-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.ap-daha:hover { color: var(--ap-metin); border-color: var(--ap-vurgu); background: var(--ap-vurgu-zemin); }

/* ─────────────────────────────── zengin seçim (04.10): F10 tarzı geniş panel ───────────────────────────────
   Seçmeden önce görsün: her satırda dönemin net satışı, önceki döneme göre değişimi, kârı. Sütun adına basınca sıralar.
   Renk sözlüğü: değişim/kâr artı yeşil, eksi kırmızı; gerisi nötr. */
.ap-secim-zengin { --zs-kolon: minmax(0, 1fr) 132px 132px 132px; }
.ap-zs-bas { display: grid; grid-template-columns: var(--zs-kolon); gap: 12px; align-items: center; flex: none; padding: 8px 18px 8px 32px; border-bottom: 1px solid var(--ap-cizgi); background: var(--ap-yuzey-2); font-size: var(--ap-y-12); font-weight: 600; color: var(--ap-metin-3); }
.ap-zs-sirala { justify-self: end; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 0; border-radius: 4px; background: none; font: inherit; color: inherit; cursor: pointer; }
.ap-zs-sirala:hover { background: var(--ap-yuzey-3); color: var(--ap-metin); }
.ap-zs-sirala::after { content: "↕"; font-size: 11px; opacity: .45; }
.ap-zs-sirala.azalan, .ap-zs-sirala.artan { color: var(--ap-metin); }
.ap-zs-sirala.azalan::after { content: "↓"; opacity: 1; }
.ap-zs-sirala.artan::after { content: "↑"; opacity: 1; }
.ap-secim-zengin .ap-secim-oge { display: grid; grid-template-columns: var(--zs-kolon); gap: 12px; padding-block: 7px; padding-inline-end: 10px; }
.ap-secim-zengin .ap-secim-oge[aria-selected="true"] { color: var(--ap-metin); background: var(--ap-vurgu-zemin); }
.ap-secim-zengin .ap-secim-oge.aktif { background: var(--ap-yuzey-3); }
.ap-zs-ad { min-width: 0; }
.ap-zs-ad b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-secim-oge[aria-selected="true"] .ap-zs-ad b { font-weight: 700; }
.ap-zs-ad small, .ap-zs-h small { display: block; font-size: var(--ap-y-11); line-height: 15px; color: var(--ap-metin-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-zs-h { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.ap-zs-h.arti { color: var(--ap-iyi); }
.ap-zs-h.eksi { color: var(--ap-kotu); }
.ap-zs-h.dikkat { color: var(--ap-dikkat); }
.ap-zs-h.silik { color: var(--ap-metin-3); font-weight: 400; }
.ap-secim-ipucu { flex: none; margin: 0; padding: 7px 14px; border-top: 1px solid var(--ap-cizgi); font-size: var(--ap-y-11); color: var(--ap-metin-3); background: var(--ap-yuzey-2); }
.ap-secim-zengin .ap-secim-grup { padding-inline-start: 14px; }
/* telefonda: üç sayı sütunu yerine iki (satış + kâr), değişim adın altında */
@media (max-width: 640px) {
    .ap-secim-zengin { --zs-kolon: minmax(0, 1fr) 96px 88px; }
    .ap-secim-zengin .ap-zs-bas > :nth-child(3), .ap-secim-zengin .ap-secim-oge > :nth-child(3) { display: none; }
}

/* renk sözlüğü (04.10): olağan son durum (teslim alındı, tamam) sessiz — yazı nötr, yalnız işaret yeşil; "yolda" bilgi (dikkat değil) */
.ap-durum-tamam { color: var(--ap-metin-2); }
.ap-durum-tamam .ap-i { color: var(--ap-iyi); }
.ap-durum-yolda { color: var(--ap-bilgi); }
@media (pointer: coarse) { .ap-secim-ipucu { display: none; } }   /* dokunmatikte klavye ipucu anlamsız */
/* sayı kutusu: tarayıcının ok düğmeleri yok (kit görünümü; değer klavyeyle ya da sayfanın kendi +/− düğmeleriyle) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
