/* ═══════════════════════════════════════════════════════════════════════════
   Natra Katalog — web tasarım sistemi.
   Mobil uygulamanın (NatraCatalog.Mobil, NOSCloud.Mobil kalıbı) dili: Poppins, Material Icons Round,
   açık zemin #F4F6FA, beyaz kartlar (16px köşe), marka renginde gradyan + renkli gölge.
   Temalar mobil Tema.cs ile BİREBİR — html[data-tema].
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Material Icons Round'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/MaterialIconsRound-Regular.otf') format('opentype'); }

:root, html[data-tema="crimson"] {
    --brand: #D32F2F; --brand-koyu: #C62828; --brand-enkoyu: #B71C1C; --vurgu: #212121;
    --brand-zemin: #FFEBEE; --brand-yumusak: #FFCDD2;
    --g1: #FFFFFF; --g2: #FAFAFA; --g3: #EFEFEF; --dugme-bas: #E53935; --dugme-son: #B71C1C; --giris-acik: 1;
}
html[data-tema="servis"] { --brand: #0F766E; --brand-koyu: #115E59; --brand-enkoyu: #134E4A; --vurgu: #2DD4BF; --brand-zemin: #CCFBF1; --brand-yumusak: #99F6E4; --g1: #134E4A; --g2: #0F766E; --g3: #14B8A6; --dugme-bas: #2DD4BF; --dugme-son: #0F766E; --giris-acik: 0; }
html[data-tema="ocean"] { --brand: #1976D2; --brand-koyu: #1565C0; --brand-enkoyu: #0D47A1; --vurgu: #00BCD4; --brand-zemin: #E3F2FD; --brand-yumusak: #BBDEFB; --g1: #0D47A1; --g2: #1565C0; --g3: #00ACC1; --dugme-bas: #00ACC1; --dugme-son: #1565C0; --giris-acik: 0; }
html[data-tema="purple"] { --brand: #7C4DFF; --brand-koyu: #6200EA; --brand-enkoyu: #311B92; --vurgu: #E040FB; --brand-zemin: #EDE7F6; --brand-yumusak: #D1C4E9; --g1: #311B92; --g2: #6200EA; --g3: #AA00FF; --dugme-bas: #E040FB; --dugme-son: #7C4DFF; --giris-acik: 0; }
html[data-tema="orange"] { --brand: #E65100; --brand-koyu: #D84315; --brand-enkoyu: #BF360C; --vurgu: #FF6D00; --brand-zemin: #FFF3E0; --brand-yumusak: #FFE0B2; --g1: #BF360C; --g2: #E65100; --g3: #FF9800; --dugme-bas: #FF9800; --dugme-son: #E65100; --giris-acik: 0; }
html[data-tema="indigo"] { --brand: #3949AB; --brand-koyu: #303F9F; --brand-enkoyu: #1A237E; --vurgu: #536DFE; --brand-zemin: #E8EAF6; --brand-yumusak: #C5CAE9; --g1: #1A237E; --g2: #283593; --g3: #5C6BC0; --dugme-bas: #536DFE; --dugme-son: #303F9F; --giris-acik: 0; }
html[data-tema="beyaz"] { --brand: #263238; --brand-koyu: #1C262B; --brand-enkoyu: #11191D; --vurgu: #546E7A; --brand-zemin: #ECEFF1; --brand-yumusak: #CFD8DC; --g1: #FFFFFF; --g2: #F5F5F5; --g3: #EEEEEE; --dugme-bas: #546E7A; --dugme-son: #263238; --giris-acik: 1; }

html[data-tema="koyu"] { --brand: #BB86FC; --brand-koyu: #9A67EA; --brand-enkoyu: #6200EE; --vurgu: #03DAC6; --brand-zemin: #2D2640; --brand-yumusak: #D7BFFF; --g1: #121212; --g2: #1E1E2E; --g3: #2D2D44; --dugme-bas: #BB86FC; --dugme-son: #6200EE; --giris-acik: 0; }

:root {
    --zemin: #F4F6FA; --kart: #FFFFFF; --cizgi: #E2E8F0; --metin: #0F172A; --metin2: #1E293B; --soluk: #64748B; --cok-soluk: #94A3B8;
    --gri50: #F8FAFC; --gri100: #F1F5F9; --gri200: #E2E8F0; --gri300: #CBD5E1;
    --olumlu: #15803D; --olumlu-zemin: #DCFCE7; --olumsuz: #B91C1C; --olumsuz-zemin: #FEE2E2;
    --golge: 0 3px 12px rgba(15, 23, 42, .06); --golge2: 0 10px 30px rgba(15, 23, 42, .10);
    --brand-golge: color-mix(in srgb, var(--brand) 35%, transparent);
    --ust: env(safe-area-inset-top, 0px); --alt: env(safe-area-inset-bottom, 0px);
    --altbar: calc(64px + var(--alt));
    --rad: 16px;
    --resim-zemin: #FAFBFC; --cam: rgba(255,255,255,.96); --ust-zemin: #fff;
}

/* Açılır listeler NatraPOS/Natra görünümünde (css/secim-kutusu.css + js/secim-kutusu.js) — renkler temadan. */
:root {
    --nsec-vurgu: var(--brand); --nsec-vurgu-acik: var(--brand-zemin); --nsec-halka: color-mix(in srgb, var(--brand) 15%, transparent);
    --nsec-kenar: var(--cizgi); --nsec-metin: var(--metin); --nsec-soluk: var(--soluk); --nsec-uzerinde: var(--gri100); --nsec-yuzey: var(--kart);
}
html[data-tema="koyu"] .nsec-oge.nsec-secili, html[data-tema="koyu"] .rz-dropdown-items li.rz-state-highlight { color: var(--brand-yumusak) !important; }

/* Koyu Mod — mobil Tema.cs'teki koyu merdiven. Ürün resimleri beyaz fonlu JPEG: resim yuvası açık kalır. */
html[data-tema="koyu"] {
    color-scheme: dark;
    --zemin: #121212; --kart: #1E1E24; --cizgi: #2E2E38; --metin: #F1F5F9; --metin2: #CBD5E1; --soluk: #94A3B8; --cok-soluk: #64748B;
    --gri50: #18181D; --gri100: #24242B; --gri200: #2E2E38; --gri300: #3F3F4A;
    --olumlu: #4ADE80; --olumlu-zemin: #14301F; --olumsuz: #F87171; --olumsuz-zemin: #3B1717;
    --golge: 0 3px 12px rgba(0,0,0,.35); --golge2: 0 10px 30px rgba(0,0,0,.5);
    --resim-zemin: #F4F4F6; --cam: rgba(24,24,30,.94); --ust-zemin: #1A1A20;
    --rz-base-background-color: #1E1E24; --rz-text-color: #F1F5F9; --rz-text-secondary-color: #94A3B8;
    --rz-input-background-color: #24242B; --rz-input-border-color: #3F3F4A; --rz-border-color: #2E2E38;
    --rz-base-50: #18181D; --rz-base-100: #24242B; --rz-base-200: #2E2E38; --rz-base-300: #3F3F4A; --rz-base-800: #E2E8F0; --rz-base-900: #F8FAFC;
    --rz-dropdown-background-color: #24242B; --rz-panel-background-color: #1E1E24; --rz-dialog-background-color: #1E1E24;
}
html[data-tema="koyu"] .marka-logo { background: #26262E; }
html[data-tema="koyu"] .kahraman { background: linear-gradient(135deg, #2D2640, #1E1E2E); }
html[data-tema="koyu"] .hata-kutu { color: #FCA5A5; border-color: #5B2121; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; color: var(--metin);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--zemin)) 0, var(--zemin) 340px) no-repeat, var(--zemin);
    min-height: 100vh; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: var(--metin); }
h1, h2, h3 { margin: 0; font-weight: 700; }
img { max-width: 100%; }

.mi {
    font-family: 'Material Icons Round'; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
    letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
    -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none;
}

/* ── Ortak parçalar ──────────────────────────────────────────────────────── */
.donen { width: 26px; height: 26px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--brand) 20%, transparent); border-top-color: var(--brand); animation: don .8s linear infinite; display: inline-block; }
.donen.kucuk { width: 16px; height: 16px; border-width: 2px; vertical-align: middle; margin-left: 6px; }
.donen.beyaz { width: 18px; height: 18px; border-width: 2px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes don { to { transform: rotate(360deg); } }
.yukleniyor-tam { display: grid; place-items: center; padding: 60px 0; }

.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: 15px; transition: transform .12s, box-shadow .2s, background .2s; }
.dugme:active { transform: scale(.98); }
.dugme.birincil { background: linear-gradient(90deg, var(--brand), var(--brand-enkoyu)); color: #fff; box-shadow: 0 8px 18px var(--brand-golge); }
.dugme.birincil:disabled { opacity: .7; cursor: default; }
.dugme.ikincil { background: var(--kart); color: var(--brand); border: 1.5px solid var(--brand); }
.dugme.bag { background: transparent; color: var(--brand); height: 40px; font-weight: 600; }
.dugme.genis { width: 100%; }
.dugme.kare { width: 50px; padding: 0; }
.dugme .mi { font-size: 21px; }

.hata-kutu { display: flex; gap: 8px; align-items: flex-start; background: var(--olumsuz-zemin); color: #991B1B; border: 1px solid #FECACA; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.hata-kutu .mi { font-size: 18px; }

.bos-durum { text-align: center; padding: 60px 24px; max-width: 420px; margin: 0 auto; color: var(--soluk); }
.bos-durum > .mi { font-size: 44px; color: var(--brand); background: var(--brand-zemin); width: 92px; height: 92px; border-radius: 50%; display: inline-grid; place-items: center; }
.bos-durum h3 { color: var(--metin); margin: 16px 0 6px; font-size: 18px; }
.bos-durum p { font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }

.rozet { font-style: normal; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-grid; place-items: center; padding: 0 5px; }

.logo-kutu { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, #E53935, #B71C1C); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(183, 28, 28, .35); flex: none; }
.logo-kutu img { width: 82%; }
.logo-kutu.kucuk { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 4px 10px rgba(183, 28, 28, .3); }

/* ── Giriş (NOSCloud mobil giriş ekranının karşılığı) ────────────────────── */
.giris {
    --yazi: #fff; --yazi-soluk: rgba(255,255,255,.72); --yazi-cok: rgba(255,255,255,.45); --kart-z: rgba(255,255,255,.15); --kart-c: rgba(255,255,255,.18);
    --alan: rgba(255,255,255,.10); --alan-c: rgba(255,255,255,.10); --cip: rgba(255,255,255,.07); --cip-c: rgba(255,255,255,.16); --daire: rgba(255,255,255,.07);
    min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--g1), var(--g2) 50%, var(--g3));
    display: grid; place-items: center; padding: calc(30px + var(--ust)) 20px calc(24px + var(--alt));
}
html[data-tema="crimson"] .giris, html[data-tema="beyaz"] .giris {
    --yazi: #111827; --yazi-soluk: rgba(17,24,39,.72); --yazi-cok: rgba(17,24,39,.45); --kart-z: #fff; --kart-c: #E5E7EB;
    --alan: #F3F4F6; --alan-c: rgba(0,0,0,.06); --cip: rgba(0,0,0,.04); --cip-c: rgba(0,0,0,.10); --daire: color-mix(in srgb, var(--brand) 5%, transparent);
}
.giris .daire { position: absolute; border-radius: 50%; background: var(--daire); pointer-events: none; }
.giris .d1 { width: 250px; height: 250px; right: -80px; top: -80px; }
.giris .d2 { width: 150px; height: 150px; left: -60px; top: 38%; }
.giris .d3 { width: 200px; height: 200px; right: -30px; bottom: -50px; }
.giris .d4 { width: 80px; height: 80px; left: calc(50% + 70px); bottom: 120px; background: color-mix(in srgb, var(--vurgu) 10%, transparent); }
.giris-ic { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.logo-kart { display: flex; gap: 14px; align-items: center; white-space: nowrap; background: linear-gradient(135deg, #fff, #F4F6FA); border: 1px solid rgba(255,255,255,.63); border-radius: 26px; padding: 16px 22px; box-shadow: 0 16px 30px rgba(0,0,0,.25); min-width: 286px; justify-content: center; }
.logo-yazi { display: flex; flex-direction: column; }
.logo-kart.ozel { flex-direction: column; gap: 8px; padding: 18px 26px; }
.logo-kart.ozel .logo-resim { display: block; max-width: min(300px, 70vw); max-height: 90px; object-fit: contain; }
.logo-kart.ozel small { font-size: 10px; font-weight: 600; color: #64748B; letter-spacing: 1.6px; }
.logo-kutu.ozel, .yon-logo .logo-kutu.ozel { background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.12); padding: 3px; overflow: hidden; }
.logo-kutu.ozel img { width: 100%; height: 100%; object-fit: contain; }
.logo-yazi b { font-size: 24px; color: #0F172A; letter-spacing: .5px; line-height: 1.2; }
.logo-yazi small { font-size: 10px; font-weight: 600; color: #64748B; letter-spacing: 1.6px; }
.giris-kart { width: 100%; background: var(--kart-z); border: 1.5px solid var(--kart-c); border-radius: 28px; padding: 24px 22px; box-shadow: 0 15px 30px rgba(0,0,0,.10); backdrop-filter: blur(10px); display: flex; flex-direction: column; }
.giris-kart h1 { color: var(--yazi); text-align: center; font-size: 26px; letter-spacing: .5px; }
.giris-kart .alt { color: var(--yazi-soluk); text-align: center; font-size: 13px; letter-spacing: 1.2px; margin: 0 0 12px; }
.vt-rozet { align-self: center; display: flex; gap: 6px; align-items: center; background: var(--cip); border: 1px solid var(--cip-c); color: var(--yazi-soluk); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; margin-bottom: 20px; }
.vt-rozet .mi { font-size: 14px; }
.alan { display: flex; align-items: center; gap: 10px; background: var(--alan); border: 1px solid var(--alan-c); border-radius: 14px; padding: 0 6px 0 14px; height: 54px; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; }
.alan:focus-within { border-color: color-mix(in srgb, var(--vurgu) 90%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 12%, transparent); }
.alan > .mi { color: var(--yazi-soluk); font-size: 20px; }
.alan input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--yazi); font-size: 15px; min-width: 0; height: 100%; }
.alan input::placeholder { color: var(--yazi-cok); }
.goz { width: 40px; height: 40px; display: grid; place-items: center; color: var(--yazi-soluk); }
.hatirla { display: flex; align-items: center; gap: 8px; color: var(--yazi-soluk); font-size: 14px; margin: 2px 0 14px; cursor: pointer; }
.hatirla input { width: 18px; height: 18px; accent-color: var(--brand); }
.giris .hata-kutu { margin-bottom: 12px; }
.giris-dugme { height: 54px; border-radius: 14px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(90deg, var(--dugme-bas), var(--dugme-son)); box-shadow: 0 6px 15px color-mix(in srgb, var(--dugme-bas) 45%, transparent); position: relative; }
.giris-dugme .donen { display: none; position: absolute; width: 22px; height: 22px; border-width: 2px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.giris-dugme.yukleniyor .metin, .giris-dugme.yukleniyor > .mi { visibility: hidden; }
.giris-dugme.yukleniyor .donen { display: block; }
.ayrac { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; color: var(--yazi-cok); font-size: 11px; letter-spacing: .5px; }
.ayrac i { flex: 1; height: 1px; background: var(--cip-c); }
.kur-dugme { height: 46px; border-radius: 12px; border: 1px solid var(--cip-c); background: var(--cip); color: var(--yazi); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kur-dugme .mi { font-size: 18px; }
.kur-not { display: none; text-align: center; color: var(--yazi-soluk); font-size: 12.5px; margin: 0; }
.kur-not .mi { font-size: 16px; vertical-align: -3px; color: #22C55E; }
.tema-secici { display: flex; align-items: center; gap: 4px; background: var(--cip); border: 1px solid var(--cip-c); border-radius: 22px; padding: 6px 10px; color: var(--yazi-soluk); }
.tema-secici > .mi { font-size: 16px; margin-right: 4px; }
.tema-nokta { width: 34px; height: 34px; display: grid; place-items: center; position: relative; }
.tema-nokta::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--n); border: 1.5px solid rgba(255,255,255,.31); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: all .15s; }
.tema-nokta .mi { position: absolute; font-size: 15px; color: #fff; opacity: 0; }
.tema-nokta.secili::before { width: 24px; height: 24px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--n), 0 2px 6px rgba(0,0,0,.25); }
.tema-nokta.secili .mi { opacity: 1; }
.surum { color: var(--yazi-cok); font-size: 11px; margin: 0; }
.canlan-1 { animation: logoGel .65s cubic-bezier(.2,.9,.3,1.25) both; }
.canlan-2 { animation: yukariGel .7s .25s cubic-bezier(.2,.8,.2,1) both; }
.canlan-3 { animation: belir .5s .6s both; }
@keyframes logoGel { from { opacity: 0; transform: translateY(-40px) scale(.6); } }
@keyframes yukariGel { from { opacity: 0; transform: translateY(60px); } }
@keyframes belir { from { opacity: 0; } }

/* ── Kabuk: telefonda alt çubuk, geniş ekranda sol ray ───────────────────── */
.kabuk { min-height: 100vh; }
.icerik { padding-bottom: calc(var(--altbar) + 16px); }
.ray { display: none; }
.altbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--altbar); padding-bottom: var(--alt); background: var(--cam); backdrop-filter: blur(12px); border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: 0 -4px 18px rgba(15,23,42,.06); }
.altbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--cok-soluk); position: relative; font-weight: 600; }
.altbar a small { font-size: 10.5px; }
.altbar a.active { color: var(--brand); }
.altbar a.active .mi { background: var(--brand-zemin); border-radius: 14px; padding: 2px 16px; }
.altbar .rozet { position: absolute; top: 6px; left: calc(50% + 6px); }

@media (min-width: 900px) {
    .kabuk { display: grid; grid-template-columns: 240px 1fr; }
    .altbar { display: none; }
    .icerik { padding-bottom: 32px; min-width: 0; }
    .ray { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 14px; background: var(--kart); border-right: 1px solid var(--cizgi); gap: 6px; }
    .ray-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-size: 16px; }
    .ray nav { display: flex; flex-direction: column; gap: 4px; }
    .ray-oge { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--metin2); font-weight: 600; font-size: 14px; width: 100%; text-align: left; }
    .ray-oge:hover { background: var(--gri100); }
    .ray-oge.active { background: var(--brand-zemin); color: var(--brand-enkoyu); }
    .ray-oge .mi { font-size: 21px; }
    .ray-oge .rozet { margin-left: auto; }
    .ray-alt { margin-top: auto; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--cizgi); padding-top: 10px; }
}

.perde { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 90; animation: belir .2s; }
.alt-sayfa { position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; background: var(--kart); border-radius: 24px 24px 0 0; padding: 10px 18px calc(18px + var(--alt)); animation: alttanGel .25s cubic-bezier(.2,.8,.2,1); max-width: 520px; margin: 0 auto; box-shadow: var(--golge2); }
@keyframes alttanGel { from { transform: translateY(100%); } }
.tutamak { display: block; width: 40px; height: 4px; background: var(--gri300); border-radius: 2px; margin: 0 auto 14px; }
.menu-kim { display: flex; gap: 12px; align-items: center; padding: 4px 4px 14px; border-bottom: 1px solid var(--cizgi); }
.menu-kim .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-enkoyu)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.menu-kim small { display: block; color: var(--soluk); font-size: 12px; }
.menu-baslik { font-size: 12px; font-weight: 700; color: var(--soluk); letter-spacing: .4px; margin: 14px 4px 4px; }
.tema-satir { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 0 8px; }
.tema-satir .tema-nokta::before { border-color: rgba(0,0,0,.08); }
.tema-satir .tema-nokta.secili::before { border-color: var(--kart); box-shadow: 0 0 0 2px var(--n); }
.menu-oge { display: grid; grid-template-columns: 30px 1fr; align-items: center; width: 100%; text-align: left; padding: 12px 4px; border-top: 1px solid var(--cizgi); font-weight: 600; font-size: 14.5px; }
.menu-oge .mi { color: var(--brand); grid-row: span 2; }
.menu-oge small { grid-column: 2; color: var(--soluk); font-weight: 400; font-size: 12px; }
.menu-oge.tehlike, .menu-oge.tehlike .mi { color: var(--olumsuz); }

/* ── Ana sayfa: kahraman bant + arama ────────────────────────────────────── */
.kahraman { position: relative; background: linear-gradient(135deg, var(--brand-enkoyu), var(--brand)); color: #fff; padding: calc(22px + var(--ust)) 20px 56px; border-radius: 0 0 28px 28px; overflow: hidden; margin-bottom: 34px; }
.kahraman-menu { position: absolute; z-index: 2; top: calc(16px + var(--ust)); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; transition: background .15s; }
.kahraman-menu:hover { background: rgba(255,255,255,.26); }
@media (min-width: 900px) { .kahraman-menu { display: none; } }
.menu-tema-ad { float: right; text-transform: none; letter-spacing: 0; color: var(--brand); font-weight: 600; }
.kahraman .k1 { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.08); right: -60px; top: -100px; }
.kahraman-ic { position: relative; max-width: 1200px; margin: 0 auto; }
.kahraman small { opacity: .9; font-size: 13px; }
.kahraman h1 { font-size: 22px; line-height: 1.25; margin: 2px 0 4px; }
.kahraman p { margin: 0; font-size: 11.5px; opacity: .8; }
.arama-buyuk { position: absolute; left: 16px; right: 16px; bottom: -26px; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; height: 54px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 0 7px 0 14px; box-shadow: 0 10px 24px var(--brand-golge); }
.kahraman .arama-buyuk { position: absolute; }
.kahraman { overflow: visible; }
.arama-buyuk > .mi { color: var(--brand); }
.arama-buyuk input { flex: 1; border: 0; outline: 0; font-size: 15px; min-width: 0; background: transparent; }
.arama-buyuk button { width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; }

.sayfa { max-width: 1280px; margin: 0 auto; padding: 8px 16px; }
.hizli { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.hizli-kart { border-radius: 18px; padding: 14px; min-height: 96px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--golge); transition: transform .15s; }
.hizli-kart:active { transform: scale(.98); }
.hizli-kart .mi { font-size: 26px; opacity: .7; }
.hizli-kart b { font-size: 15px; display: block; margin-top: 8px; }
.hizli-kart small { opacity: .8; font-size: 11px; }
.hizli-kart.koyu { background: linear-gradient(135deg, #1E293B, #334155); }
.hizli-kart.marka { background: linear-gradient(135deg, var(--brand), var(--brand-enkoyu)); box-shadow: 0 8px 18px var(--brand-golge); }
@media (min-width: 900px) { .hizli { grid-template-columns: repeat(4, 1fr); } }

.bolum-baslik { font-size: 18px; margin: 4px 2px 12px; }

.marka-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 359px) { .marka-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px) { .marka-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .marka-izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.marka-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--rad); overflow: hidden; box-shadow: var(--golge); transition: transform .15s, box-shadow .2s; display: flex; flex-direction: column; }
.marka-kart:hover { transform: translateY(-2px); box-shadow: var(--golge2); }
.marka-logo { height: 96px; background: var(--resim-zemin); display: grid; place-items: center; position: relative; }
.marka-logo img { max-width: 82%; max-height: 74px; object-fit: contain; }
.marka-logo .bas-harf { display: none; width: 56px; height: 56px; border-radius: 18px; place-items: center; font-weight: 700; font-size: 20px; color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); }
.marka-logo.logosuz .bas-harf, .marka-logo:has(.logosuz-isaret) .bas-harf { display: grid; }
.logosuz-isaret { display: none; }
.marka-ad { padding: 8px 10px 10px; }
.marka-ad b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.3; min-height: 32px; }
.marka-ad small { color: var(--soluk); font-size: 10.5px; }

.iskelet .marka-logo, .iskelet .urun-resim, .iskelet i { background: linear-gradient(90deg, var(--gri100) 25%, var(--gri50) 50%, var(--gri100) 75%); background-size: 200% 100%; animation: parilti 1.2s infinite; }
.iskelet i { display: block; height: 10px; border-radius: 5px; margin: 6px 0; }
.iskelet i:last-child { width: 60%; }
@keyframes parilti { to { background-position: -200% 0; } }

/* ── Ürünler: yapışkan üst + ızgara ──────────────────────────────────────── */
.yapiskan { position: sticky; top: 0; z-index: 40; background: var(--cam); backdrop-filter: blur(12px); padding: calc(10px + var(--ust)) 14px 8px; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.yapiskan > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.yapiskan.ince { padding-bottom: 10px; }
.ust-satir { display: flex; align-items: center; gap: 10px; }
.geri { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-zemin); color: var(--brand); display: grid; place-items: center; flex: none; }
.baslik-blok { flex: 1; min-width: 0; }
.baslik-blok h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baslik-blok small { color: var(--soluk); font-size: 11.5px; }
.hap-dugme { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-zemin); color: var(--brand); border-radius: 12px; padding: 7px 11px; font-weight: 600; font-size: 12.5px; flex: none; }
.hap-dugme .mi { font-size: 18px; }
.hap-dugme.gri { background: var(--gri100); color: var(--soluk); }
.arama { display: flex; align-items: center; gap: 8px; height: 48px; background: var(--gri50); border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 6px 0 12px; margin-top: 10px; }
.arama:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); background: var(--kart); }
.arama > .mi { color: var(--soluk); }
.arama input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; min-width: 0; }
.arama .temizle { width: 34px; height: 34px; display: grid; place-items: center; color: var(--soluk); }
.cipler { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.cipler::-webkit-scrollbar { display: none; }
.cip { flex: none; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--cizgi); background: var(--kart); font-weight: 600; font-size: 12.5px; color: var(--metin2); white-space: nowrap; transition: all .15s; }
.cip.secili { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 10px var(--brand-golge); }

.urun-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
@media (min-width: 600px) { .urun-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 840px) { .urun-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .urun-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.urun-kart { position: relative; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--rad); overflow: hidden; box-shadow: var(--golge); display: flex; flex-direction: column; transition: transform .15s, box-shadow .2s; }
.urun-kart:hover { transform: translateY(-2px); box-shadow: var(--golge2); }
.urun-resim { aspect-ratio: 1 / 1; width: 100%; background: var(--resim-zemin); display: grid; place-items: center; position: relative; overflow: hidden; }
/* Resim MUTLAK konumlu: yoksa büyük resmin kendi boyu aspect-ratio'yu ezip satırdaki kartları hizasız bırakıyordu (görüldü). */
.urun-resim img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.resimsiz-ikon { display: none; font-size: 42px; color: var(--gri300); }
.resimsiz > .resimsiz-ikon, .resimsiz .resimsiz-ikon { display: block; }
.kalp { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.12); color: var(--brand); display: grid; place-items: center; transition: transform .15s; }
.kalp .mi { font-size: 20px; }
.kalp:active { transform: scale(.85); }
.kalp.secili { background: var(--brand); color: #fff; animation: atis .3s; }
@keyframes atis { 50% { transform: scale(1.18); } }
.urun-bilgi { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.urun-ust { color: var(--brand); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
.urun-ad { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.35; min-height: 34px; }
.urun-alt { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; }
.urun-alt small { color: var(--soluk); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiyat { font-style: normal; background: var(--brand); color: #fff; font-weight: 700; font-size: 12px; border-radius: 10px; padding: 3px 9px; white-space: nowrap; flex: none; }
.gozcu { height: 60px; display: grid; place-items: center; }
.secim-hap { position: fixed; right: 16px; bottom: calc(var(--altbar) + 14px); z-index: 45; display: flex; align-items: center; gap: 8px; background: var(--vurgu); color: #fff; padding: 11px 16px; border-radius: 24px; font-weight: 600; font-size: 13px; box-shadow: 0 8px 18px rgba(0,0,0,.25); animation: alttanGel .3s; }
html[data-tema="servis"] .secim-hap, html[data-tema="ocean"] .secim-hap, html[data-tema="purple"] .secim-hap,
html[data-tema="orange"] .secim-hap, html[data-tema="indigo"] .secim-hap { background: #1E293B; }
html[data-tema="koyu"] .secim-hap { background: #2D2640; }
.secim-hap .mi { color: #FF8A80; font-size: 20px; }
@media (min-width: 900px) { .secim-hap { bottom: 24px; right: 24px; } }

/* ── Ürün detayı ─────────────────────────────────────────────────────────── */
.detay { max-width: 1100px; margin: 0 auto; display: grid; gap: 0; }
@media (min-width: 840px) { .detay { grid-template-columns: 1fr 1fr; gap: 28px; padding: 20px 16px; } }
.galeri { background: var(--resim-zemin); }
@media (min-width: 840px) { .galeri { border-radius: 20px; border: 1px solid var(--cizgi); box-shadow: var(--golge); overflow: hidden; align-self: start; position: sticky; top: 90px; } }
.galeri-buyuk { aspect-ratio: 1/1; max-height: 420px; width: 100%; display: grid; place-items: center; position: relative; cursor: zoom-in; }
.galeri-buyuk { overflow: hidden; }
.galeri-buyuk img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.galeri-buyuk .resimsiz-ikon { font-size: 64px; }
.buyut { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.6); color: #fff; border-radius: 12px; padding: 4px 10px; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.buyut .mi { font-size: 14px; }
.galeri-buyuk.resimsiz .buyut { display: none; }
.galeri-kucuk { display: flex; gap: 8px; justify-content: center; padding: 0 12px 14px; }
.galeri-kucuk button { width: 58px; height: 58px; border-radius: 12px; border: 2px solid var(--cizgi); background: var(--resim-zemin); padding: 4px; }
.galeri-kucuk button.secili { border-color: var(--brand); }
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; }
.galeri-kucuk:has(button:only-child) { display: none; }
.detay-bilgi { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.detay-bilgi h2 { font-size: 21px; line-height: 1.25; }
.fiyat-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fiyat-buyuk { background: linear-gradient(135deg, var(--brand), var(--brand-enkoyu)); color: #fff; font-weight: 700; font-size: 26px; border-radius: 14px; padding: 6px 16px; box-shadow: 0 8px 18px var(--brand-golge); }
.fiyat-not { color: var(--soluk); font-size: 12.5px; }
.bilgi-kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--rad); padding: 4px 16px; }
.bilgi-kart > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-kart > div:last-child { border-bottom: 0; }
.bilgi-kart .mi { color: var(--brand); font-size: 20px; }
.bilgi-kart small { color: var(--soluk); font-size: 12.5px; }
.bilgi-kart b { font-weight: 600; font-size: 14px; text-align: right; }
.bilgi-kart.metin { padding: 14px 16px; }
.bilgi-kart.metin small { font-weight: 700; letter-spacing: .4px; }
.bilgi-kart.metin p { margin: 6px 0 0; font-size: 13.5px; color: var(--metin2); line-height: 1.55; white-space: pre-line; }
.detay-eylem { display: flex; gap: 10px; position: sticky; bottom: var(--altbar); background: linear-gradient(180deg, transparent, var(--zemin) 30%); padding: 14px 0 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 900px) { .detay-eylem { position: static; background: none; margin: 0; padding: 0; } }
.tam-ekran { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; animation: belir .2s; }
.tam-ekran img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pinch-zoom; }
.tam-ekran .kapat { position: absolute; top: calc(16px + var(--ust)); right: 16px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; display: grid; place-items: center; }

/* ── Seçtiklerim + PDF ───────────────────────────────────────────────────── */
.secim-duzen { display: grid; gap: 16px; padding-top: 12px; }
@media (min-width: 900px) { .secim-duzen { grid-template-columns: 1fr 380px; align-items: start; } .pdf-panel { position: sticky; top: 96px; } }
.secim-liste { display: flex; flex-direction: column; gap: 10px; }
.secim-satir { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--rad); padding: 10px; box-shadow: var(--golge); animation: belir .25s; }
.secim-resim { width: 72px; height: 72px; border-radius: 12px; background: var(--resim-zemin); display: grid; place-items: center; }
.secim-resim img { width: 90%; height: 90%; object-fit: contain; }
.secim-resim .resimsiz-ikon { font-size: 26px; }
.secim-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.secim-bilgi b { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.secim-bilgi span { display: flex; gap: 8px; align-items: center; }
.secim-bilgi span small { color: var(--soluk); font-size: 11px; }
.secim-bilgi em { font-style: normal; font-weight: 700; color: var(--brand-koyu); font-size: 13px; }
.secim-eylem { display: flex; flex-direction: column; gap: 4px; }
.secim-eylem button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--cok-soluk); }
.secim-eylem button:disabled { opacity: .3; }
.secim-eylem .kaldir { background: var(--brand-zemin); color: var(--brand); }
.secim-eylem .mi { font-size: 19px; }
.pdf-panel { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 20px; padding: 16px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 12px; }
.pdf-kapak { position: relative; overflow: hidden; border-radius: 16px; padding: 18px; color: #fff; background: linear-gradient(135deg, var(--brand-enkoyu), var(--brand)); box-shadow: 0 8px 18px var(--brand-golge); display: flex; flex-direction: column; gap: 2px; }
.pdf-kapak small { font-size: 10px; font-weight: 600; letter-spacing: 2px; opacity: .8; }
.pdf-kapak b { font-size: 19px; line-height: 1.25; padding-right: 50px; }
.pdf-kapak span:not(.mi) { font-size: 12px; opacity: .85; }
.pdf-kapak .mi { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 52px; opacity: .35; }
.form-alan { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--soluk); }
.form-alan input, .form-alan textarea { border: 1px solid var(--gri200); background: var(--gri50); border-radius: 10px; padding: 11px 12px; font-size: 14.5px; outline: 0; resize: vertical; font-weight: 400; }
.form-alan input:focus, .form-alan textarea:focus { border-color: var(--brand); background: var(--kart); }
.form-etiket { font-size: 12px; font-weight: 600; color: var(--soluk); }
.anahtar-satir { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.anahtar-satir .mi { color: var(--brand); font-size: 21px; }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.segment button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1.5px solid var(--cizgi); background: var(--kart); color: var(--soluk); font-size: 12px; font-weight: 600; }
.segment button.secili { border-color: var(--brand); background: var(--brand-zemin); color: var(--brand-koyu); }
.segment.kucuk { display: inline-flex; gap: 0; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; }
.segment.kucuk button { border: 0; border-radius: 0; padding: 8px 12px; flex-direction: row; }
.segment.kucuk button + button { border-left: 1px solid var(--cizgi); }
.ilerleme { height: 8px; border-radius: 4px; background: var(--gri100); overflow: hidden; }
.ilerleme i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-enkoyu)); transition: width .3s; border-radius: 4px; }
.durum { text-align: center; color: var(--soluk); font-size: 12.5px; margin: 0; }
.hazir-kutu { display: flex; gap: 10px; align-items: center; background: var(--olumlu-zemin); color: #166534; border-radius: 12px; padding: 10px 12px; }
.hazir-kutu .mi { font-size: 26px; }
.hazir-kutu small { display: block; font-size: 11.5px; word-break: break-all; }
.iki-dugme { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.daire-ikon { font-size: 44px; }

/* ── Bağlantı kutusu (Blazor yeniden bağlanma) ───────────────────────────── */
.baglanti-kutu { display: none; }
.baglanti-kutu.components-reconnect-show, .baglanti-kutu.components-reconnect-failed, .baglanti-kutu.components-reconnect-rejected { display: block; position: fixed; left: 0; right: 0; top: calc(12px + var(--ust)); z-index: 999; }
.baglanti-ic { margin: 0 auto; max-width: 360px; background: #1E293B; color: #fff; border-radius: 14px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--golge2); }
.baglanti-ic .donen { width: 22px; height: 22px; border-width: 2px; border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.baglanti-ic small { display: block; opacity: .75; font-size: 12px; }

/* ── iOS "Ana Ekrana Ekle" yönergesi ─────────────────────────────────────── */
.ios-kur { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.5); display: flex; align-items: flex-end; justify-content: center; animation: belir .2s; }
.ios-kur-kart { background: var(--kart); border-radius: 24px 24px 0 0; padding: 22px 20px calc(20px + var(--alt)); width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: alttanGel .3s; }
.ios-kur-kart h3 { font-size: 17px; text-align: center; }
.ios-kur-kart ol { list-style: none; padding: 0; margin: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ios-kur-kart li { display: flex; align-items: center; gap: 10px; background: var(--gri50); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.ios-kur-kart li .mi { margin-left: auto; color: #007AFF; }
.ios-kur-kart .adim { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }

/* ═══ Yönetim paneli ═══════════════════════════════════════════════════════ */
.yon-kabuk { min-height: 100vh; background: var(--zemin); }
.yon-yan { position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 60; background: linear-gradient(180deg, var(--brand-enkoyu), color-mix(in srgb, var(--brand-enkoyu) 80%, #000)); color: #fff; padding: calc(18px + var(--ust)) 12px 18px; display: flex; flex-direction: column; gap: 4px; transform: translateX(-100%); transition: transform .25s; }
.yon-kabuk.acik .yon-yan { transform: none; }
.yon-perde { display: none; }
.yon-kabuk.acik .yon-perde { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
.yon-logo { display: flex; gap: 10px; align-items: center; padding: 4px 6px 18px; }
.yon-logo small { display: block; font-size: 11px; opacity: .7; }
.yon-logo .logo-kutu { background: rgba(255,255,255,.14); box-shadow: none; }
.yon-grup { font-size: 10.5px; letter-spacing: 1.4px; opacity: .55; margin: 8px 10px 4px; font-weight: 600; }
.yon-oge { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 600; font-size: 14px; color: rgba(255,255,255,.85); }
.yon-oge:hover { background: rgba(255,255,255,.08); }
.yon-oge.active { background: rgba(255,255,255,.16); color: #fff; }
.yon-alt { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; }
.yon-ust { position: sticky; top: 0; z-index: 30; height: calc(58px + var(--ust)); padding: var(--ust) 16px 0; background: var(--cam); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cizgi); display: flex; align-items: center; gap: 12px; }
.yon-hamburger { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--gri100); }
.yon-kim { margin-left: auto; display: flex; gap: 6px; align-items: center; color: var(--soluk); font-size: 13px; }
.yon-icerik { padding: 18px 16px 40px; max-width: 1400px; margin: 0 auto; }
@media (min-width: 1000px) {
    .yon-yan { transform: none; }
    .yon-govde { margin-left: 240px; }
    .yon-hamburger { display: none; }
}
.yon-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.yon-baslik h1 { font-size: 22px; display: flex; align-items: center; gap: 8px; }
.yon-baslik h1 .mi { color: var(--brand); font-size: 26px; }
.yon-baslik small { color: var(--soluk); font-size: 12.5px; }
.bilgi-bant { display: flex; gap: 10px; background: #E3F2FD; border: 1px solid #BBDEFB; color: #0D47A1; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 14px; line-height: 1.5; }
.bilgi-bant .mi { font-size: 19px; }
.suzgec-kart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px; box-shadow: var(--golge); margin-bottom: 12px; }
.suzgec-kart .arama { margin: 0; flex: 1 1 260px; height: 42px; }
.suzgec-secim { min-width: 180px; height: 42px; }
select.suzgec-secim { border: 1px solid var(--cizgi); border-radius: 10px; padding: 0 10px; background: var(--kart); }
.toplu-cubuk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.toplu-cubuk .ara { flex: 1; }
.toplu-cubuk .soluk { color: var(--soluk); }
.mini-dugme { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--cizgi); background: var(--kart); font-size: 12.5px; font-weight: 600; color: var(--metin2); position: relative; overflow: hidden; }
.mini-dugme:hover { background: var(--gri50); }
.mini-dugme .mi { font-size: 17px; }
.mini-dugme.olumlu { background: var(--olumlu-zemin); border-color: #BBF7D0; color: var(--olumlu); }
.mini-dugme.tehlike { color: var(--olumsuz); }
.mini-dugme.bag { border-color: transparent; background: transparent; color: var(--brand); }
.mini-dugme.kare { width: 30px; height: 30px; padding: 0; justify-content: center; }
.mini-dugme.pasif { opacity: .5; cursor: not-allowed; }
.mini-dugme:disabled { opacity: .5; }
.mini-dugme input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.yon-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 16px; transition: opacity .2s; }
@media (max-width: 400px) { .yon-izgara { grid-template-columns: 1fr; } }
.soluk-yukleniyor { opacity: .55; pointer-events: none; }
.yon-kart { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: var(--kart); border: 1px solid var(--cizgi); border-left: 4px solid var(--gri300); border-radius: 14px; padding: 12px 12px 12px 30px; box-shadow: var(--golge); }
.yon-kart.gorunur { border-left-color: #22C55E; }
.sec-kutu { position: absolute; left: 8px; top: 12px; }
.sec-kutu input { width: 16px; height: 16px; accent-color: var(--brand); }
.yon-resim { width: 64px; height: 64px; border-radius: 12px; background: var(--resim-zemin); border: 1px dashed var(--gri300); display: grid; place-items: center; }
.yon-resim img { width: 92%; height: 92%; object-fit: contain; }
.yon-resim .resimsiz-ikon { font-size: 26px; color: var(--cok-soluk); }
.yon-resim:hover { border-color: var(--brand); }
.yon-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.yon-bilgi code { font-family: ui-monospace, Menlo, monospace; color: var(--brand-enkoyu); font-size: 12px; font-weight: 700; }
.yon-bilgi b { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.haplar { display: flex; flex-wrap: wrap; gap: 4px; }
.hap { font-size: 10px; font-weight: 600; border-radius: 10px; padding: 2px 8px; background: var(--gri100); color: var(--soluk); font-family: inherit; }
.hap.mavi { background: #E3F2FD; color: #1565C0; }
.hap.yesil { background: var(--olumlu-zemin); color: var(--olumlu); }
.hap.kirmizi { background: var(--olumsuz-zemin); color: var(--olumsuz); }
.hap.koyu { background: #1E293B; color: #fff; }
.yon-anahtar { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; }
.yon-anahtar small { font-size: 10.5px; color: var(--soluk); font-weight: 600; }
.yon-anahtar.yatay { flex-direction: row; gap: 8px; }
.uyari .mi { font-size: 18px; color: #D97706; }
.yon-sayfalayici { background: var(--kart); border-radius: 12px; border: 1px solid var(--cizgi); }
.yon-izgara.marka { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.yon-kart.marka { grid-template-columns: 1fr; padding: 14px; text-align: center; }
.yon-kart.marka .haplar { justify-content: center; }
.yon-alt-satir { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--cizgi); padding-top: 10px; }
.sira { display: flex; align-items: center; gap: 6px; }
.sira small { color: var(--soluk); font-size: 11px; font-weight: 600; }
.sira b { min-width: 22px; text-align: center; }
.yuva { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.yuva-onizleme { width: 100%; height: 120px; border-radius: 12px; border: 1.5px dashed var(--gri300); background: var(--resim-zemin); display: grid; place-items: center; position: relative; overflow: hidden; }
.yuva-onizleme img { max-width: 92%; max-height: 108px; object-fit: contain; }
.yuva-onizleme .bos-ikon { display: none; font-size: 34px; color: var(--cok-soluk); }
.yuva-onizleme.bos .bos-ikon { display: block; }
.yuva-onizleme .donen { position: absolute; }
.yuva.mesgul .yuva-onizleme img { opacity: .4; }
.yuva-ad { font-size: 11px; color: var(--soluk); word-break: break-all; }
.yuva-dugmeler { display: flex; gap: 6px; }
.resim-dialog .dialog-not { display: flex; gap: 8px; font-size: 12.5px; color: var(--soluk); margin: 0 0 14px; }
.resim-dialog .dialog-not .mi { font-size: 18px; color: var(--brand); }
.yuva-satir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .yuva-satir { grid-template-columns: 1fr 1fr; } }

/* ── Radzen ince ayar: Natra açılır liste görünümü ───────────────────────── */
.rz-dropdown { border-radius: 10px !important; border-color: var(--cizgi) !important; min-height: 42px; }
.rz-dropdown-panel { border-radius: 12px !important; box-shadow: var(--golge2) !important; }
.rz-dropdown-item.rz-state-highlight { background: var(--brand-zemin) !important; box-shadow: inset 0 0 0 1px var(--brand); }
.rz-switch.rz-switch-checked .rz-switch-circle { background: var(--brand) !important; }
.rz-switch.rz-switch-checked .rz-switch-circle::before { background: #fff !important; }
.rz-notification-item-wrapper { border-radius: 12px !important; }
.rz-dialog { border-radius: 18px !important; }
.rz-dialog-titlebar { font-family: 'Poppins', sans-serif; }
.rz-pager .rz-pager-page.rz-state-active { background: var(--brand) !important; color: #fff !important; }

h1:focus, h1:focus-visible { outline: none; }

/* Telefonda Seçtiklerim: PDF paneline atlayan yüzen düğme (panel listenin altında kalıyor). */
.pdf-git { display: none; }
@media (max-width: 899px) {
    .pdf-git { display: flex; position: fixed; right: 16px; bottom: calc(var(--altbar) + 14px); z-index: 45; align-items: center; gap: 8px;
        background: linear-gradient(90deg, var(--brand), var(--brand-enkoyu)); color: #fff; padding: 12px 18px; border-radius: 24px; font-weight: 700; font-size: 13.5px;
        box-shadow: 0 8px 18px var(--brand-golge); }
}

/* Yönetim süzgeci telefonda: arama tam satır, açılır listeler yan yana iki sütun. */
@media (max-width: 640px) {
    .suzgec-kart .arama { flex-basis: 100%; }
    .suzgec-kart .suzgec-secim, .suzgec-kart .rz-dropdown { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .suzgec-kart .segment.kucuk { flex: 1 1 100%; }
    .suzgec-kart .segment.kucuk button { flex: 1; justify-content: center; }
    .toplu-cubuk .ara { display: none; }
    .yon-kart { grid-template-columns: 56px 1fr auto; padding-left: 28px; }
    .yon-resim { width: 56px; height: 56px; }
}

/* ── Site Kimliği (B2B.Blazor deseni) ─────────────────────────────────────── */
.kimlik-kart { background: var(--kart); border-radius: var(--rad); box-shadow: var(--golge); padding: 18px 20px 20px; border-left: 4px solid var(--brand); }
.kimlik-kart > header { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--brand); }
.kimlik-kart > header .mi { color: var(--brand); }
.kimlik-kart > header small { margin-left: auto; color: var(--soluk); font-size: 11.5px; }
.kimlik-etiket { display: block; font-size: 12px; font-weight: 700; color: var(--metin2); letter-spacing: .4px; margin-bottom: 8px; }
.kimlik-baslik-satir { display: flex; gap: 10px; max-width: 620px; }
.kimlik-girdi { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 0 12px; background: var(--kart); outline: none; }
.kimlik-girdi:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.kimlik-baslik-satir .mini-dugme { height: 42px; }
.kimlik-ipucu { font-size: 11.5px; color: var(--soluk); margin: 6px 0 0; line-height: 1.7; }
.kimlik-ipucu .mi { font-size: 14px; vertical-align: -2px; margin-right: 3px; color: var(--brand); }
.kimlik-ipucu kbd { font: inherit; font-size: 11px; background: var(--gri100); border: 1px solid var(--cizgi); border-radius: 5px; padding: 0 5px; }
.kimlik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 18px 0 8px; }
.kimlik-oge { border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px; background: var(--gri50); }
.kimlik-oge-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.kimlik-oge-ust b { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--metin2); }
.kimlik-oge-ust small { font-size: 10.5px; color: var(--cok-soluk); }
.kimlik-oge-govde { display: flex; align-items: center; gap: 14px; }
.kimlik-onizleme { flex: none; border: 1.5px dashed var(--gri300); border-radius: 10px; background: #fff
    repeating-conic-gradient(#F1F5F9 0 25%, #fff 0 50%) 0 0 / 14px 14px; display: grid; place-items: center; overflow: hidden; position: relative; }
.kimlik-onizleme.genis { width: 140px; height: 80px; }
.kimlik-onizleme.kare { width: 64px; height: 64px; }
.kimlik-onizleme img { max-width: 92%; max-height: 92%; object-fit: contain; }
.kimlik-onizleme > .mi { color: var(--cok-soluk); font-size: 28px; }
.kimlik-onizleme .donen { position: absolute; }
.kimlik-onizleme.buyuk.genis { width: 220px; height: 124px; }
.kimlik-onizleme.buyuk.kare { width: 124px; height: 124px; }
.kimlik-duzenle { flex: 1; height: 38px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, var(--brand-enkoyu), var(--brand)); box-shadow: 0 4px 10px var(--brand-golge); transition: transform .12s; }
.kimlik-duzenle:hover { transform: translateY(-1px); }
.kimlik-duzenle .mi { font-size: 17px; }

.perde.ust { z-index: 200; }
.kimlik-pencere { position: fixed; z-index: 201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 24px); overflow-x: hidden; overflow-y: auto; background: var(--kart); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: belir .2s; }
.kimlik-pencere > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.kimlik-pencere > header b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.kimlik-pencere > header b .mi { color: var(--brand); }
.kimlik-pencere .kapat { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--soluk); }
.kimlik-pencere .kapat:hover { background: var(--gri100); }
.kimlik-pencere > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--cizgi); }
.kimlik-pencere-govde { display: flex; gap: 20px; padding: 20px; align-items: flex-start; }
.kimlik-eylemler { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.kimlik-eylem { position: relative; height: 40px; padding: 0 16px; border-radius: 9px; font-weight: 700; font-size: 13px; letter-spacing: .4px;
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; overflow: hidden; transition: transform .12s, opacity .12s; }
.kimlik-eylem:hover:not(:disabled) { transform: translateY(-1px); }
.kimlik-eylem:disabled { opacity: .45; cursor: default; }
.kimlik-eylem .mi { font-size: 18px; }
.kimlik-eylem.sec { color: #fff; background: linear-gradient(135deg, var(--brand-enkoyu), var(--brand)); box-shadow: 0 4px 10px var(--brand-golge); }
.kimlik-eylem.sec input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kimlik-eylem.yapistir { color: #fff; background: linear-gradient(135deg, #6D28D9, #8B5CF6); }
.kimlik-eylem.kirp { background: var(--gri100); color: var(--metin2); border: 1px solid var(--cizgi); }
.kimlik-eylem.kaldir { background: var(--olumsuz-zemin); color: var(--olumsuz); border: 1px solid color-mix(in srgb, var(--olumsuz) 25%, transparent); }
.kimlik-eylemler .kimlik-ipucu { flex-basis: 100%; }
.mini-dugme.dolu { background: var(--brand); border-color: var(--brand); color: #fff; }
.kirp-alan { height: min(56vh, 440px); background: #0F172A; }
.kirp-alan img { display: block; max-width: 100%; }
.kirp-arac { display: flex; gap: 8px; justify-content: center; padding: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .kimlik-pencere-govde { flex-direction: column; align-items: stretch; }
    .kimlik-pencere-govde .kimlik-onizleme.buyuk { align-self: center; }
    .kimlik-eylem { flex: 1 1 100%; justify-content: center; }
}

/* ── Giriş sonrası tema düğmesi + palet (TemaDugmesi) ─────────────────────── */
.tema-dugme-kap { position: relative; }
.tema-dugme { height: 38px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--metin2); border: 1px solid var(--cizgi); background: var(--kart); }
.tema-dugme:hover { background: var(--gri50); }
.tema-dugme .mi { font-size: 20px; color: var(--brand); }
.tema-ornek { width: 14px; height: 14px; border-radius: 50%; background: var(--n); box-shadow: 0 0 0 2px var(--kart), 0 0 0 3px var(--cizgi); }
.ray-oge .tema-ornek { margin-left: auto; }
.tema-dugme-kap > .ray-oge { width: 100%; }
.tema-perde { position: fixed; inset: 0; z-index: 140; }
.tema-palet { position: absolute; z-index: 141; width: 230px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
    box-shadow: var(--golge2); padding: 8px; animation: belir .15s; }
.tema-dugme-kap.asagi .tema-palet { top: calc(100% + 6px); right: 0; }
.tema-dugme-kap.yukari .tema-palet { bottom: calc(100% + 6px); left: 0; }
.tema-palet p { margin: 4px 8px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: var(--soluk); }
.tema-palet-oge { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--metin); text-align: left; }
.tema-palet-oge:hover { background: var(--gri100); }
.tema-palet-oge i { width: 20px; height: 20px; border-radius: 50%; background: var(--n); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tema-palet-oge.secili { background: var(--brand-zemin); color: var(--brand-enkoyu); font-weight: 600; }
html[data-tema="koyu"] .tema-palet-oge.secili { color: var(--brand-yumusak); }
.tema-palet-oge .mi { margin-left: auto; font-size: 18px; color: var(--brand); }
.yon-ust .tema-dugme-kap { margin-left: auto; }
.yon-ust .tema-dugme-kap ~ .yon-kim { margin-left: 12px; }