/* ===========================
   Kochler V2 Theme
   Visual-only layer loaded after the legacy stylesheet.
   =========================== */

:root[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f6f8fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef3f6;
    --card-bg: #ffffff;
    --text-primary: #102027;
    --text-secondary: #5b6b72;
    --text-muted: #8a9aa3;
    --border-color: #dbe4e8;
    --accent: #0f766e;
    --accent-hover: #115e59;
    --primary-color: #0f766e;
    --primary-hover: #115e59;
    --primary-rgb: 15, 118, 110;
    --on-primary: #ffffff;
    --info-text: #1d4ed8;
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;
    --success-text: #166534;
    --success-bg: #f0fdf4;
    --warning-text: #92400e;
    --warning-bg: #fffbeb;
    --danger-text: #991b1b;
    --danger-bg: #fef2f2;
    --brand-violet: #6d28d9;
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --brand-coral: #f97316;
    --brand-blue: #2563eb;
    --brand-ink: #102027;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(16, 32, 39, 0.06);
    --shadow-md: 0 12px 30px rgba(16, 32, 39, 0.08);
    --shadow-lg: 0 18px 42px rgba(16, 32, 39, 0.12);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #101820;
    --bg-secondary: #17232c;
    --bg-tertiary: #21323d;
    --card-bg: #17232c;
    --text-primary: #f4f7f8;
    --text-secondary: #b2c1c8;
    --text-muted: #7f929c;
    --border-color: #2a3d49;
    --accent: #2dd4bf;
    --accent-hover: #14b8a6;
    --primary-color: #2dd4bf;
    --primary-hover: #14b8a6;
    --primary-rgb: 45, 212, 191;
    --on-primary: #102027;
    --info-text: #bfdbfe;
    --info-bg: #132a3b;
    --info-border: #264860;
    --success-text: #86efac;
    --success-bg: #142f28;
    --warning-text: #fcd34d;
    --warning-bg: #352b18;
    --danger-text: #fda4af;
    --danger-bg: #3b2029;
    --brand-violet: #c4b5fd;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #fb7185;
    --brand-coral: #fb923c;
    --brand-blue: #60a5fa;
    --brand-ink: #f4f7f8;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.34);
}

html {
    background: var(--bg-primary);
}

#theme-toggle { display: inline-flex; }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

body {
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--primary-rgb), 0.08), transparent 26rem),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
    color: var(--text-primary);
    letter-spacing: 0;
}

body::selection {
    background: rgba(var(--primary-rgb), 0.2);
}

.topnav {
    /* 26.09.2026, kullanici talebi: "header sticky olacak şekilde ekranı
       kaydırınca üstte ulaşılabilir olsun" - mobilde hamburger'i header'a
       geri koyabilmek icin (once tasip yuzen kapsule almistik, cunku
       .topnav STICKY OLMADIGI icin sayfa kaydirilinca ekrandan tamamen
       kayboluyordu) header artik sabit kalıyor.
       DIKKAT: z-index eskiden 10000'di ama .topnav position:static
       oldugu icin CSS spec geregi HICBIR ETKISI yoktu (z-index sadece
       positioned elemanlarda calisir) - sticky eklenince bu deger
       birden aktif olup .sidebar-overlay(250)/.mobile-drawer(300)'un
       USTUNE cikip menu acilinca header'in altinda kalmalarina yol
       acardi. 247'ye ayarlandi: normal sayfa icerigi (auto/0) <
       .mobile-search-backdrop (244) < .mobile-tabbar (245) <
       topnav (247, ICINDEKI arama
       sheet'i (246) dahil - bkz. asagidaki 2. not) <
       .sidebar-overlay (250) < .mobile-drawer (300).

       2. DIKKAT (26.09.2026, gercek cihazda test edilirken bulundu):
       #global-search-form (arama bottom-sheet'i) .topnav'in ICINDE -
       position:sticky + z-index'i olan bir ata, TUM alt elemanlar icin
       YENI BIR STACKING CONTEXT olusturur. Yani sheet'in KENDI z-index'i
       (246) sadece .topnav'IN ICINDEKI diger elemanlarla kiyaslanir;
       .topnav DISINDAKI kardeşlerle (ornegin #mobileSearchBackdrop, 244)
       kiyaslanirken ASIL GECERLI OLAN .topnav'in KENDI z-index'idir.
       .topnav 244'un altinda kalsaydi, sheet z-index:246 olsa BILE
       kapatma butonu backdrop'un ALTINDA kalip tiklanamaz olurdu -
       gercekten yasandi. Bu yuzden .topnav z-index'i backdrop+alt
       menunun (245) USTUNE, ama .sidebar-overlay/.mobile-drawer'in
       ALTINA (250/300) alinarak iki gereksinim de karsilaniyor. */
    position: sticky;
    top: 0;
    height: 74px;
    padding: 0 1.5rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    box-shadow: 0 10px 30px rgba(16, 32, 39, 0.06);
    backdrop-filter: blur(16px);
    overflow: visible;
    z-index: 247;
    /* Asagi/yukari kaydirma ile gizlen/goster (03.10.2026, kullanici
       talebi, site geneli) - bkz. base.html'deki kaydirma-yonu dinleyicisi
       (.nav-hidden sinifini ekleyip kaldirir). Sadece transform
       animasyonlu, position:sticky DEGISMEDI - header hala normal akiste
       "yapismis" kalmaya devam ediyor, bu sadece ustune binen bir
       kaydirip-gizleme efekti. */
    transition: transform 0.28s ease;
}
.topnav.nav-hidden {
    transform: translateY(-100%);
}

.topnav-logo {
    padding-right: 1.1rem;
    margin-right: 0.5rem;
}

.topnav-logo-img {
    max-height: 58px !important;
}

.panel-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
    padding: 0.22rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.panel-switcher-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 38px;
    padding: 0 0.85rem;
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.panel-switcher-item:hover,
.panel-switcher-item.active {
    color: #fff;
    background: var(--primary-color);
}

.panel-switcher-item .ti {
    font-size: 1rem;
}

.topnav-nav {
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}

.topnav-nav::-webkit-scrollbar {
    display: none;
}

.topnav-item,
.topnav-dropdown,
.topnav-dropdown-btn {
    height: 74px;
}

.topnav-item {
    padding: 0 0.85rem;
    border-bottom: 0;
    border-radius: 999px;
    height: 42px;
    align-self: center;
    font-size: 0.88rem;
    font-weight: 650;
}

.topnav-item:hover,
.topnav-dropdown.open > .topnav-dropdown-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.topnav-item.active,
.topnav-dropdown.active > .topnav-dropdown-btn {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    border-bottom-color: transparent;
}

.topnav-dropdown-menu {
    top: 68px;
    background: var(--bg-secondary);
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 10050;
}

.topnav-dropdown.open {
    z-index: 10040;
}

.topnav-dropdown-item {
    border-radius: 8px;
}

/* İki sütunlu açılır menü — tek sütunda 7-8 öğe uzayıp okunmaz hale geliyordu.
   Sütunlar grid ile yan yana; dar ekranda alt alta düşüyor. */
.topnav-menu-2 {
    display: none;              /* açılınca .open kuralı grid yapıyor */
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 0.25rem 1.25rem;
    align-items: start;
}
.topnav-dropdown.open .topnav-menu-2 {
    display: grid;
}
.topnav-menu-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.topnav-menu-col + .topnav-menu-col {
    border-left: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    padding-left: 1.1rem;
}
.topnav-menu-baslik {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem 0.45rem;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .topnav-menu-2 { grid-template-columns: 1fr; }
    .topnav-menu-col + .topnav-menu-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
        margin-top: 0.35rem;
        padding-top: 0.35rem;
    }
}

.topnav-dropdown-item.active {
    background: rgba(var(--primary-rgb), 0.12);
}

.topnav-icon-btn,
.topnav-logout-btn {
    border-radius: 999px;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.topnav-user {
    min-height: 36px;
    padding: 0 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
}

.topnav-global-search input {
    min-height: 36px;
    border-radius: 999px !important;
    background: var(--bg-primary) !important;
}

.content {
    /* Ortak sayfa kabuğu ekranın kullanılabilir tamamını kullansın.
       Form/modal gibi iç bileşenlerin kendi max-width sınırları korunur. */
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}

.dashboard {
    padding-bottom: 4rem;
}

.dash-header {
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), 0.13), transparent 52%),
        var(--bg-secondary);
    box-shadow: var(--shadow-md);
}

.dash-title {
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1.15;
}

.dash-sub,
.dash-date {
    color: var(--text-secondary);
}

.kpi-group-label {
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}

.kpi-card,
.quick-panel,
.metric-panel,
.table-card,
.chart-card,
.form-card,
.info-card,
.help-card {
    background: color-mix(in srgb, var(--card-bg) 96%, var(--accent) 4%);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.kpi-card {
    position: relative;
    min-height: 132px;
    overflow: hidden;
}

.kpi-card::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -28px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.11);
}

.kpi-card:hover,
.quick-panel:hover {
    transform: translateY(-2px);
}

.kpi-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.12);
    font-size: 1.25rem;
}

.kpi-icon-wrap svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
}

.kpi-blue .kpi-icon-wrap { background: rgba(37, 99, 235, 0.12); }
.kpi-yellow .kpi-icon-wrap { background: rgba(217, 119, 6, 0.14); }
.kpi-orange .kpi-icon-wrap { background: rgba(249, 115, 22, 0.14); }
.kpi-red .kpi-icon-wrap { background: rgba(220, 38, 38, 0.12); }
.kpi-purple .kpi-icon-wrap { background: rgba(15, 118, 110, 0.13); }

.kpi-value {
    font-size: clamp(1.7rem, 2.4vw, 2.35rem);
    line-height: 1;
}

.quick-section-label,
.raporlar-title {
    color: var(--text-primary);
}

.qsl-link,
.qp-more,
table a {
    color: var(--primary-color);
}

/* Panel genelinde SKU'yu urun detayina baglayan ortak link - bkz.
   core/templatetags/product_links.py::sku_link. Baglam (tablo hucresi,
   kart, rozet) her yerde farkli oldugu icin sadece renk/altini cizme
   davranisini standart hale getiriyor, boyut/font'a karismiyor. */
.sku-link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}
.sku-link:hover {
    text-decoration: underline;
}

.qp-count-badge,
.badge {
    border-radius: 999px;
}

.df-btn,
.dp-apply,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-success {
    border-radius: 9px;
}

/* ===== BUTON OLCU STANDARDI =====
   Olculunce 14 sayfada 17 farkli buton boyu vardi (29px - 54px arasi).
   Sebep tek degildi: taban padding dark-mode.css'te 10px/20px, bazi
   yerlerde 8px/16px'e eziliyor, flex kabinda duran butonlar da esneyip
   52-54px'e uzuyordu. Tek olcu burada tanimlaniyor.

   align-self: center  -> flex kabinin stretch'i butonu uzatmasin.
   min-height          -> ikonlu/ikonsuz butonlar ayni yukseklikte kalsin.
   .btn svg            -> ikon boyu buton yuksekligini belirlemesin. */
.btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    line-height: 1.2;
    min-height: 34px;
    height: auto;
    align-self: center;
}

/* Sablonlardaki ikonlarda class="h-5 w-5" var; bu Tailwind sanilarak
   yazilmis (orada 1.25rem = 20px) ama projede Tabler yuklu ve o
   .h-5'i 2rem = 32px yapiyor, ustelik !important ile. 74 ikon bu yuzden
   olmasi gerekenin bir bucuk kati cikiyor ve icinde bulundugu butonu
   48px'e uzatiyordu. Amaclanan olculere cekiliyor; !important'i
   kirmanin baska yolu yok. Yalniz svg'lere uygulaniyor, Tabler'in bu
   siniflari baska bir yerde kullanilirsa bozulmasin. */
svg.w-5 { width: 1.25rem !important; }
svg.h-5 { height: 1.25rem !important; }
svg.w-4 { width: 1rem !important; }
svg.h-4 { height: 1rem !important; }

/* Buton icindeki ikon her yerde ayni: yukaridaki siniflar olsun olmasin. */
.btn > svg,
.btn > i {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
}

.btn-sm > svg,
.btn-sm > i {
    width: 13px !important;
    height: 13px !important;
}

/* Tablo satiri ve kart ici gibi dar yerler icin tek kucuk olcu. */
.btn-sm {
    padding: 0.28rem 0.62rem;
    font-size: 0.75rem;
    min-height: 28px;
}

.btn-primary,
.dp-apply {
    --tblr-btn-color: var(--on-primary);
    --tblr-btn-hover-color: var(--on-primary);
    --tblr-btn-active-color: var(--on-primary);
    --tblr-btn-disabled-color: var(--on-primary);
    color: var(--on-primary);
    background: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.dp-apply:hover,
.dp-apply:focus-visible,
.dp-apply:active {
    color: var(--on-primary);
    background: var(--primary-hover);
}

/* Keep foregrounds paired with their surfaces in both themes. */
.btn-outline {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover,
.btn-outline:focus-visible,
.btn-outline:active {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.btn-outline-danger {
    color: var(--danger-text);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active {
    color: var(--danger-text);
    background: var(--danger-bg);
    border-color: var(--danger-text);
}

.btn-outline:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
}

.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-text) 25%, transparent);
}

.data-table th,
table th {
    background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
}

.content,
.page-container,
.reports-shell,
.simulation-shell,
.table-card,
.report-panel,
.table-panel {
    min-width: 0;
    max-width: 100%;
}

.table-card,
.report-panel,
.table-panel {
    overflow: hidden;
}

.table-responsive,
.table-scroll,
.table-wrap,
.table-container,
.mtab-sarma {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.table-responsive table,
.table-scroll table,
.table-wrap table,
.table-container table,
.mtab-sarma table {
    max-width: 100%;
}

.table-responsive th,
.table-responsive td,
.table-scroll th,
.table-scroll td,
.table-wrap th,
.table-wrap td,
.table-container th,
.table-container td,
.mtab-sarma th,
.mtab-sarma td {
    /* 19.10.2026: 'anywhere' hucrenin minimum genisligini tek harfe indiriyordu;
       .data-table disindaki tablolarda (Depolar, Stok Hareketleri, Virman, Iade
       Raporu...) telefonda metin harf harf alt alta dokuluyordu. break-word uzun
       tokenlari yine kirar ama sutun en az en uzun kelime kadar kalir; tablo
       sigmazsa kapsayicinin yatay kaydirmasi devreye girer. */
    overflow-wrap: break-word;
}

/* .data-table'lar eski davranisinda kalir: masaustu/tablette sabit min-width
   (900px) ile, telefonda kart gorunumuyle zaten duzgun; break-word onlarda
   tablet genisliginde gereksiz yatay kaydirma acardi. */
:is(.table-responsive, .table-scroll, .table-wrap, .table-container, .mtab-sarma) .data-table :is(th, td) {
    overflow-wrap: anywhere;
}

/* SKU/kod hucreleri (kaydirmali, kart moduna gecmeyen tablolar) tirelerden
   alt satira kirilmasin; sigmazsa tablo yana kayar (19.10.2026). */
.table-responsive table:not(.data-table) td.font-mono {
    white-space: nowrap;
}

/*
 * data-table'a min-width verilmezse table-layout:auto algoritmasi,
 * table-responsive'in verdigi tanimli genislige (max-width:100%) sigmak
 * icin sutunlari minimum icerik genisligine kadar daraltir; overflow-wrap:
 * anywhere de kelime sinirini kaldirdigi icin bu minimum tek harfe kadar
 * iner (mobilde metnin harf harf alt alta dokulmesi buradan kaynaklaniyordu).
 * min-width, tabloyu ekrandan genis tutarak table-responsive'in yatay
 * kaydirmasini (overflow-x:auto) devreye sokar.
 */
.data-table {
    min-width: 900px;
}

/*
 * Mobilde yatay kaydirma yerine dikey "kart" gorunumu - marketing_dashboard
 * .html'deki .rank-table deseninin TUM .data-table'lara genellenmis hali.
 * data-label attribute'lari sablonlara elle eklenmiyor, base.html'deki
 * labelDataTableCells() tarafindan basliklardan otomatik okunuyor.
 */
@media (max-width: 760px) {
    .data-table {
        min-width: 0;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody {
        display: block;
        width: 100%;
    }

    /* Her satir kendi basina, sinirlari belli bir "kart" - sayfa arka
       planindan ayrisiyor, aralarinda bosluk var (tek uzun liste yerine
       ust uste dizilmis ayri kartlar gibi gorunsun diye). */
    .data-table tr {
        display: block;
        width: 100%;
        margin-bottom: 0.6rem;
        padding: 0.7rem 0.85rem;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-secondary);
    }

    .data-table tr:last-child {
        margin-bottom: 0;
    }

    .data-table td {
        display: block;
        width: 100%;
        padding: 0.3rem 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    }

    .data-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .data-table td:first-child {
        padding-top: 0;
    }

    /* Etiketi olan hucreler: sabit genislikte etiket sutunu + deger sutunu
       - hizalama her satirda ayni kalir, deger birden fazla satira
       sarsa bile (Musteri adi+telefon, Urun Bilgileri gibi) bosluklar
       dengesiz gorunmez. */
    .data-table td[data-label] {
        display: grid;
        grid-template-columns: minmax(84px, 34%) 1fr;
        column-gap: 0.75rem;
        align-items: start;
        text-align: left;
    }

    .data-table td[data-label]::before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        padding-top: 0.1rem;
    }

    /* Etiketsiz hucreler (checkbox, colspan'li "kayit yok" satirlari):
       kendi normal duzeninde kalsin, zorla iki sutuna bolunmesin. */
    .data-table td:not([data-label]) {
        text-align: left;
    }

    /* Buton/select barindiran hucreler (bkz. base.html::labelDataTableCells):
       etiketin yanina degil altina, tam genislikte otursun - kucuk bir
       sutuna sikisip butonlar kuculmesin. */
    .data-table td[data-label].td-stack {
        display: block;
    }

    .data-table td[data-label].td-stack::before {
        display: block;
        margin-bottom: 0.35rem;
    }
}

/*
 * 24.09.2026: siparis listesi (SSD + E-Ticaret, order_list.html /
 * order_list_eticaret.html - AYNI paylasilan hucre partial'lari) mobil
 * kartinda 9 alan esit gorsel agirlikla alt alta dizilince "vasat"
 * gorunuyordu (kullanici geri bildirimi). Genel .data-table mobil kart
 * mekanizmasi (yukaridaki blok) DEGISTIRILMEDI - diger 51+ .data-table
 * ekrani (Urunler/Musteriler/Servis/Iade/Finans...) etkilenmesin diye
 * SADECE bu tabloya (.data-table--siparis scope class'i, order_list*.html'e
 * eklendi) ozel bir override. JS (labelDataTableCells) DEGISMEDI - hala
 * ayni data-label attribute'larini uretiyor, sadece bu tabloda hangi
 * alanin nerede/nasil gorunecegini CSS ile yeniden duzenliyoruz.
 *
 * Onemli/oncelikli 3 alan (Siparis No + Tutar ayni satirda buyuk punto,
 * Durum hemen alti) one cikariliyor; Tarih kucuk bir ust bilgi satirina
 * indiriliyor; ikincil alanlar (Musteri/Urun/Platform/Kargo) kompakt
 * bloklar halinde altta kaliyor; Islemler en altta yatay buton cifti.
 */
@media (max-width: 760px) {
    .data-table--siparis tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        position: relative;
    }

    .data-table--siparis tbody tr:has(td.secim-sutun) {
        padding-left: 2.5rem;
    }

    .data-table--siparis tbody tr > td.secim-sutun {
        position: absolute;
        top: 0.75rem;
        left: 0.85rem;
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    /* Ust bilgi satiri: Tarih KENDI (tam genislik, sabit) kucuk satirinda,
       hemen alti Sipariş No solda + Tutar sagda AYNI satirda. 24.09.2026:
       ucu de tek satirda tutmaya calisan onceki tasarim GERCEK
       Trendyol siparis numaralariyla (11-12 haneli, ör. #11637985732)
       kirilgandi - flex-wrap'in satir kirma karari, henuz kucultulmemis
       (hypothetical) icerik genisligine bakiyor, bu da bazen Tarih+Sipariş
       No'yu ayni satira, Tutar'i tek basina kenara ittiriyordu (dar
       bosluk, kotu gorunum). Tarih'i HER ZAMAN kendi tam genislik satirina
       sabitleyip (asagida flex:1 1 100%), Sipariş No'ya max-width vererek
       (asagida) bu belirsizligi ortadan kaldiriyoruz - artik HER siparis
       numarasi uzunlugunda ayni, ongorulebilir duzen. */
    .data-table--siparis tbody tr > td.siparis-tarih {
        order: 10;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        flex: 1 1 100%;
        width: auto;
        font-size: 0.7rem;
        white-space: nowrap;
        border-bottom: none;
        padding: 0.15rem 0 0.35rem;
    }
    .data-table--siparis tbody tr > td.siparis-tarih::before {
        content: none;
    }

    .data-table--siparis tbody tr > td[data-label="Sipariş No"],
    .data-table--siparis tbody tr > td[data-label="Tutar"] {
        border-bottom: none;
        padding: 0.15rem 0 0.35rem;
    }
    .data-table--siparis tbody tr > td[data-label="Sipariş No"]::before,
    .data-table--siparis tbody tr > td[data-label="Tutar"]::before {
        content: none;
    }
    /* .td-stack (buton/link icerdigi icin base.html::labelDataTableCells
       tarafindan eklenir) genel kuralda (satir 608) display:block; ile
       ayni specificity'de (0,3,0) ama SONRA tanimlanip kazaniyordu -
       ".td-stack" class'ini da selector'e katip specificity'yi (0,4,0)'a
       cikararak kesin oncelik veriyoruz. */
    .data-table--siparis tbody tr > td[data-label="Sipariş No"],
    .data-table--siparis tbody tr > td[data-label="Sipariş No"].td-stack {
        order: 20;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        /* flex-grow:0 SART - grow:1 kutuyu bos alani doldurmak icin 60%'a
           kadar geriyordu; icerik (link+kopyala) o genisligi kullanmayinca
           boş alan kaliyordu ve satirin dokunma/hover arkaplani
           (base.html:.clickable-row:hover td) o bos kutuyu renklendirip
           "yuzen gri kutu" gibi kotu bir gorunum yaratiyordu. */
        flex: 0 1 auto;
        width: auto;
        max-width: 60%;
        min-width: 0;
    }
    .data-table--siparis tbody tr > td[data-label="Sipariş No"] .link-primary {
        font-size: 0.95rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .data-table--siparis tbody tr > td[data-label="Sipariş No"] .copy-btn {
        flex-shrink: 0;
    }
    .data-table--siparis tbody tr > td[data-label="Tutar"] {
        order: 21;
        display: block;
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
        text-align: right;
        font-size: 0.95rem;
        font-weight: 700;
        white-space: nowrap;
    }

    /* Durum/Musteri/Urun Bilgileri/Platform/Kargo: icerikten ne olduklari
       zaten anlasiliyor (rozet/dropdown, isim+telefon, urun adi, platform
       rozeti, kargo firmasi) - ayri bir ETIKET sutununa gerek yok
       (24.09.2026, kullanici talebi). display:block'a cevrilmesi sart -
       aksi halde genel .data-table td[data-label] grid'i (etiket sutunu +
       deger sutunu) bos bir ilk sutun birakir, icerik sagda sikisir kalir. */
    .data-table--siparis tbody tr > td[data-label="Durum"],
    .data-table--siparis tbody tr > td[data-label="Müşteri"],
    .data-table--siparis tbody tr > td[data-label="Ürün Bilgileri"],
    .data-table--siparis tbody tr > td[data-label="Platform"],
    .data-table--siparis tbody tr > td[data-label="Kargo"] {
        display: block;
    }
    .data-table--siparis tbody tr > td[data-label="Durum"]::before,
    .data-table--siparis tbody tr > td[data-label="Müşteri"]::before,
    .data-table--siparis tbody tr > td[data-label="Ürün Bilgileri"]::before,
    .data-table--siparis tbody tr > td[data-label="Platform"]::before,
    .data-table--siparis tbody tr > td[data-label="Kargo"]::before {
        content: none;
    }

    .data-table--siparis tbody tr > td[data-label="Durum"] {
        order: 30;
        flex: 1 1 100%;
        padding-top: 0;
    }

    .data-table--siparis tbody tr > td[data-label="Müşteri"] { order: 40; flex: 1 1 100%; }
    /* Ad solda, telefon sagda - AYNI satirda (musteri adi/kart altyapisinin
       degistirilmesine gerek yok, .customer-info zaten sadece 2 cocuk
       tasiyor: ad + telefon). */
    .data-table--siparis tbody tr > td[data-label="Müşteri"] .customer-info {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
    }
    /* Telefon numarasi sabit/kisa (kirilmasin), uzun musteri adlari
       yerine ONUN kisaltilmasi gerekiyor - aksi halde flex-wrap:nowrap
       ile ikisi ayni satira sigmayinca telefon disari tasardi. */
    .data-table--siparis tbody tr > td[data-label="Müşteri"] .customer-info > div:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .data-table--siparis tbody tr > td[data-label="Müşteri"] .customer-info > div:last-child {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .data-table--siparis tbody tr > td[data-label="Ürün Bilgileri"] { order: 50; flex: 1 1 100%; }

    .data-table--siparis tbody tr > td[data-label="Platform"] { order: 60; flex: 1 1 100%; }

    .data-table--siparis tbody tr > td[data-label="Kargo"] { order: 70; flex: 1 1 100%; }
    /* Kargo firmasi solda, takip no + kopyala sagda - AYNI satirda; takip
       butonu ve durum rozeti kendi tam genislikte satirlarinda kalir. */
    .data-table--siparis tbody tr > td[data-label="Kargo"] .kargo-hucre {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        width: auto;
    }
    .data-table--siparis tbody tr > td[data-label="Kargo"] .kargo-takipno {
        margin-left: auto;
    }
    .data-table--siparis tbody tr > td[data-label="Kargo"] .kargo-takip-btn,
    .data-table--siparis tbody tr > td[data-label="Kargo"] .kargo-durum-rozet {
        flex-basis: 100%;
    }

    /* Islemler: en altta, kendi etiketi olmadan (baglam zaten belli). */
    .data-table--siparis tbody tr > td[data-label="İşlemler"] {
        order: 90;
        flex: 1 1 100%;
        border-bottom: none;
        padding-top: 0.5rem;
    }
    .data-table--siparis tbody tr > td[data-label="İşlemler"]::before {
        content: none;
    }
}

/*
 * 23.09.2026: mobil kart gorunumunde <thead> gizlendigi icin siralama
 * basliklarina erisim kalmiyordu - base.html::injectMobileSortControls()
 * tarafindan otomatik eklenen kontrol. Desktop'ta gizli, thead'deki
 * linkler orada zaten calisiyor. Buton "Filtre" ile AYNI gorsel dil,
 * ama secenek listesi asagidan acilan bir "bottom sheet" (mobilde
 * tanidik/modern bir desen - ör. Android/iOS action sheet), dar filtre
 * kartinin icine sikismiyor.
 */
.mobile-sort-bar { display: none; }

@media (max-width: 760px) {
    .mobile-sort-bar { display: block; margin-bottom: 0.75rem; }
    .mobile-sort-toggle-btn {
        display: flex; align-items: center; gap: 0.4rem; width: 100%;
        padding: 0.5rem 0.9rem; background: var(--bg-secondary);
        border: 1px solid var(--border-color); border-radius: 8px;
        color: var(--text-primary); font-size: 0.85rem; font-weight: 600; cursor: pointer;
    }
    .mobile-sort-toggle-btn:hover,
    .mobile-sort-toggle-btn[aria-expanded="true"] { border-color: var(--primary-color); color: var(--primary-color); }
    .mobile-sort-toggle-btn span:nth-child(2) { flex: 1; text-align: left; }
    .mobile-sort-toggle-yon { display: flex; color: var(--primary-color); }

    .mobile-sort-backdrop {
        position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 1000;
    }
    .mobile-sort-backdrop.acik { opacity: 1; pointer-events: auto; }

    .mobile-sort-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
        background: var(--bg-primary); border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
        transform: translateY(105%); transition: transform 0.25s cubic-bezier(.32,.72,0,1);
        max-height: 75vh; display: flex; flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-sort-sheet.acik { transform: translateY(0); }
    .mobile-sort-sheet-tutamac {
        width: 36px; height: 4px; border-radius: 9999px; background: var(--border-color);
        margin: 0.6rem auto 0.2rem;
    }
    .mobile-sort-sheet-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.6rem 1.1rem 0.75rem; font-weight: 700; font-size: 0.95rem;
        color: var(--text-primary); border-bottom: 1px solid var(--border-color);
    }
    .mobile-sort-sheet-close {
        background: none; border: none; color: var(--text-secondary); cursor: pointer;
        padding: 0.25rem; border-radius: 6px; display: flex;
    }
    .mobile-sort-sheet-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
    .mobile-sort-sheet-list { overflow-y: auto; padding: 0.4rem 0; }
    /* Bu sinif hem <a href> (Sirala) hem <button type="button"> (Durum
       secici, order_list_eticaret.html) icin ortak kullaniliyor - <button>
       elemanlarinin tarayici varsayilan gorunumu (kalin kenarlik, gri
       arkaplan, icerige gore degisen genislik, sistem fontu) acikca
       sifirlanmazsa "bozuk/stilsiz" gorunuyordu. Bu resetler <a> icin
       zaten no-op (anchor'da zaten border/background yok). */
    .mobile-sort-oge {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 0.85rem 1.1rem; color: var(--text-primary);
        text-decoration: none; font-size: 0.9rem; font-family: inherit;
        text-align: left; background: none; border: none; border-radius: 0;
        cursor: pointer; -webkit-appearance: none; appearance: none;
    }
    .mobile-sort-oge:active { background: var(--bg-secondary); }
    .mobile-sort-oge.aktif { color: var(--primary-color); font-weight: 700; background: rgba(59,130,246,0.07); }
    .mobile-sort-oge-yon { display: flex; }
}

.action-buttons,
.btn-icon {
    min-width: 0;
}

.form-input,
.dp-input,
input[type="text"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea {
    border-radius: 9px;
}

.form-control,
.form-select {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

/* Native popup menus need explicit colors: a transparent select background
   can otherwise leave light option text on the OS's white popup surface. */
:root[data-theme="light"] select {
    color-scheme: light;
}

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

select option,
select optgroup {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.form-control:focus,
.form-select:focus {
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
}

.mobile-tabbar {
    display: none;
}

body:has(.login-wrapper) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.16), transparent 42%),
        linear-gradient(315deg, rgba(249, 115, 22, 0.12), transparent 36%),
        var(--bg-primary);
}

.login-card {
    border-radius: var(--radius) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent) !important;
    box-shadow: var(--shadow-lg) !important;
}

.btn-login {
    min-height: 46px;
    border-radius: 9px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--brand-blue)) !important;
    box-shadow: 0 12px 26px rgba(var(--primary-rgb), 0.22);
}

@media (max-width: 1320px) {
    .topnav-global-search,
    .topnav-user {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    .topnav {
        padding: 0 1rem;
    }

    .topnav-item {
        padding: 0 0.7rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 768px) {
    body {
        background: var(--bg-primary);
    }

    .topnav {
        height: 64px;
        padding: 0.65rem 0.9rem;
        border-bottom: 0;
        box-shadow: none;
        /* KRITIK: backdrop-filter (frosted glass efekti) filter/perspective
           gibi position:fixed torunlar icin YENI BIR CONTAINING BLOCK
           OLUSTURUYOR (26.09.2026, gercek cihazda test edilirken bulundu -
           arama bottom-sheet'i (#global-search-form, .topnav'in ICINDE)
           viewport yerine .topnav'a GORE konumlaniyor, bottom:88px header'in
           74-64px'lik yuksekliginin disina tasip ekranin negatif y'sinde
           kayboluyordu). Sticky .topnav ile birlesince bu etki DAHA da
           belirginlesti. Mobilde blur gorsel bir detay - sheet'in dogru
           konumlanmasi icin bilerek kapatiliyor. */
        backdrop-filter: none;
    }

    /* DIKKAT: <img> uzerinde satir ici width:220px var. Sadece yuksekligi
       kisitlamak yetmiyordu — logo kucuk gorunse de 220 piksel yer kaplayip
       Pazarlama/Operasyon dugmelerini ekran disina itiyordu. */
    .topnav-logo-img {
        width: 128px !important;
        height: 34px !important;
        max-height: none !important;
    }

    .topnav-logo {
        padding-right: 0.5rem;
        margin-right: 0.35rem;
    }

    /* Panel gecisi mobilde yalniz ikon: etiketler sigmiyor.
       Baglantilarda title/aria-label var, ikon tek basina anlamsiz kalmiyor. */
    .panel-switcher {
        margin-right: 0.35rem;
        gap: 0.15rem;
        padding: 0.15rem;
    }

    .panel-switcher-item {
        height: 34px;
        padding: 0 0.6rem;
        gap: 0;
    }

    .panel-switcher-item span {
        display: none;
    }

    .panel-switcher-item .ti {
        font-size: 1.15rem;
    }

    .topnav-right {
        margin-left: auto;
    }

    .topnav-icon-btn,
    .topnav-logout-btn {
        width: 40px;
        height: 40px;
    }

    .topnav-logout-btn {
        display: none;
    }

    .topnav-hamburger {
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-secondary);
    }

    .mobile-drawer {
        width: min(86vw, 340px);
        padding-top: 3.6rem;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-close-btn {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: var(--bg-tertiary);
    }

    .nav-item {
        min-height: 46px;
        border-radius: 12px;
        font-weight: 650;
    }

    .main-content {
        min-height: calc(100vh - 64px);
    }

    .content {
        width: 100%;
        padding: 0.8rem 0.8rem 5.9rem;
    }

    .dash-header {
        flex-direction: column;
        gap: 0.6rem;
        padding: 1rem;
    }

    .dash-date {
        text-align: left;
    }

    .kpi-sections {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .kpi-group-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .kpi-group:last-child .kpi-group-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-card {
        min-height: 124px;
        padding: 1rem;
    }

    .kpi-label {
        font-size: 0.78rem;
    }

    .quick-row,
    .msummary,
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    .quick-panel,
    .metric-panel {
        border-radius: var(--radius);
    }

    .qp-item {
        min-height: 48px;
    }

    .date-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.15rem;
    }

    .df-btn {
        white-space: nowrap;
        min-height: 38px;
    }

    .table-responsive,
    .table-container,
    .table-wrap {
        border-radius: var(--radius);
    }

    .mobile-tabbar {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        z-index: 245;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        align-items: center;
        gap: 0.25rem;
        min-height: 56px;
        padding: 0.25rem;
        border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
        box-shadow: 0 18px 44px rgba(16, 32, 39, 0.18);
        backdrop-filter: blur(18px);
    }

    /* Arama sabit ortada kalir; iki yandaki kisayollar kaydirilabilir. */
    .mobile-tabbar-scroll {
        position: relative;
        display: flex;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }

    .mobile-tabbar-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-tabbar-scroll > .mobile-tab {
        flex: 1 0 44px;
        min-width: var(--mobile-tab-min-width, 44px);
        padding: 0;
    }

    .mobile-tab {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 44px;
        scroll-snap-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: var(--text-secondary);
        text-decoration: none;
    }

    .mobile-tab svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        fill: currentColor;
    }

    .mobile-tab-icon {
        display: grid;
        place-items: center;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Keep counts centered above the icons in their own row. */
    .mobile-tab:not(.mobile-tab-search) svg {
        transform: translateY(6px);
    }

    .mobile-tab-count {
        position: absolute;
        top: 1px;
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        place-items: center;
        min-width: 16px;
        height: 14px;
        padding: 0 3px;
        border: 1px solid var(--bg-secondary);
        border-radius: 999px;
        background: var(--primary-color);
        color: var(--on-primary);
        font-size: 10px;
        font-weight: 750;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .mobile-tab-count[hidden] {
        display: none;
    }

    .mobile-tab.active {
        background: rgba(var(--primary-rgb), 0.13);
        color: var(--primary-color);
    }

    .mobile-tab-search {
        align-self: stretch;
        border: 0;
        background: var(--primary-color);
        color: var(--on-primary);
        cursor: pointer;
    }

    .mobile-tab-search svg {
        fill: none;
    }

    .mobile-tab-search[aria-expanded="true"] {
        background: var(--primary-hover);
    }

    .mobile-tab-label {
        display: none;
    }
}

/* Kaydirma kenarinda yarim ikon birakmadan tam kisayollar goster. */
@media (max-width: 480px) {
    .mobile-tabbar-scroll > .mobile-tab {
        flex-basis: calc(100% / 3);
    }
}

@media (max-width: 360px) {
    .mobile-tabbar-scroll > .mobile-tab {
        flex-basis: 50%;
    }
}

@media (max-width: 420px) {
    .kpi-group-cards,
    .kpi-group:last-child .kpi-group-cards {
        grid-template-columns: 1fr;
    }

    .mobile-tabbar {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
    }
}

/* Cok dar ekranlar: hamburger her zaman yer bulsun.
   dark-mode.css'te de bir 400px blogu var ama bu dosya sonra yuklendigi icin
   logo olculerinin son sozu burada. */
@media (max-width: 400px) {
    .topnav-logo-img {
        width: 104px !important;
        height: 28px !important;
    }

    .panel-switcher-item {
        padding: 0 0.45rem;
    }
}

/* Dosya secim (input[type=file]) alanlari - varsayilan tarayici stili tum
   sitede site temasindan siritiyordu (15.09.2026 geri bildirimi). Tek yerden
   (bu dosya her sayfada yukleniyor) tum <input type="file"> alanlarina
   uygulanir - her sablonda ayri ayri stillendirmeye gerek kalmaz.
   ::file-selector-button guncel Chrome/Edge/Firefox/Safari'de destekleniyor;
   desteklemeyen cok eski tarayicilarda input kutusu yine de temaya uyar,
   sadece dugmenin kendisi tarayici varsayilaninda kalir. */
input[type="file"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--accent-hover);
}

/* ===== ORTAK THUMBNAIL/GORSEL GALERISI GRID'I =====
   26.09.2026, kullanici talebi: urun galerisinde ("Fotoğraflar 3 sütun
   olmalı") mobilde beklenen 3 yerine 2 sutun cikiyordu - kok neden,
   `display:flex;flex-wrap:wrap` + cocuklarda SABIT piksel genislik
   (ör. width:110px) deseniydi. Bu desende mobildeki kullanilabilir
   genislik tam SINIRDA oldugunda (3*110px+2*gap konteynere ANCAK
   sigiyor) kenar bosluğu/border yuvarlamasi 3. ogeyi alt satira
   dusurebiliyor - garantisi yok. AYNI kirilgan desen projede en az
   3 ayri yerde (urun galerisi, iade gorselleri, eksik parca gorselleri)
   BAGIMSIZ olarak tekrar yazilmisti (analiz: her biri kendi <style>
   blogunda sifirdan CSS'liyordu).

   Cozum: CSS Grid + repeat(auto-fit, minmax(...)) - tarayici sutun
   sayisini KENDISI hesaplar, kirintiya bagli DEGILDIR, ayrica ayri bir
   mobil media query'ye GEREK KALMADAN hem mobilde hem masaustunde doğru
   sutun sayisini otomatik verir (genis ekranda daha fazla sutun, dar
   ekranda daha az - hep TAM sayida sutun, yarim kalan oge OLMAZ).
   auto-fit (auto-fill DEGIL) BILINCLI SECILDI: az sayida ogeli
   galerilerde (ör. eksik parca formunda 1-5 gorsel yuvasi) auto-fill
   BOS sutunlari GORUNMEZ AMA YER KAPLAR sekilde rezerve eder - tek oge
   varken bile satirin 1/6'sina sikisirdi. auto-fit bos sutunlari
   COKERTIR, mevcut ogeler kalan alani doldurur; satir tam doluyken
   ikisi ZATEN AYNI sonucu verir, yani coklu-gorselli galerilerde
   (urun/iade) bir kayip yok.
   Kullanim: <div class="thumb-grid" style="--thumb-min:110px;">...</div>
   --thumb-min: bir ogenin MINIMUM genisligi (varsayilan 100px).
   --thumb-gap: ogeler arasi bosluk (varsayilan 0.75rem).
   Galeriyi kullanan sayfa, ogenin kendisini (ör. <img>) width:100% +
   aspect-ratio:1 ile grid hucresini DOLDURACAK sekilde stillemeli -
   sabit piksel genislik/yukseklik ARTIK KULLANILMAMALI. */
.thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--thumb-min, 100px), 1fr));
    gap: var(--thumb-gap, 0.75rem);
}

/* ===== Telefon: dokunma ve yazi boyutu (19.10.2026, mobil uyumluluk taramasi) ===== */
@media (max-width: 760px) {
    /* iPhone 16px alti yazili alana dokununca sayfayi yakinlastiriyor; sayfa
       sablonlarindaki kucuk yazi kurallarini da ezmesi icin !important. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
    /* Onay kutulari 13-18px'ti; parmakla isabet ettirmek zordu. Anahtar (switch) haric. */
    input[type="checkbox"]:not([role="switch"]):not(.form-switch *),
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }
    .back-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .btn-sm,
    .btn-inline-received,
    .btn-more-actions {
        min-height: 36px;
    }
    .mobile-sort-sheet-close {
        min-width: 40px;
        min-height: 40px;
    }
}