/* ============================================================
   BANKA ENTEGRASYON — Arayüz
   Kurumsal, sakin, yoğun. Süs yok; okunabilirlik ve güven var.

   Dış kaynak KULLANILMAZ (CDN, web fontu, ikon paketi yok):
   uygulama iç ağda ve sıkı bir CSP altında çalışıyor.
   ============================================================ */

:root {
    /* Yüzeyler */
    --zemin:        #eef1f6;
    --kart:         #ffffff;
    --kart-ikinci:  #f8fafc;
    --cizgi:        #dde3ec;
    --cizgi-koyu:   #c3ccda;

    /* Kenar çubuğu — gece mavisi */
    --yan:          #0f1a2e;
    --yan-acik:     #17253f;
    --yan-metin:    #93a4bd;
    --yan-parlak:   #ffffff;

    /* Metin */
    --metin:        #16202f;
    --metin-orta:   #55637a;
    --metin-soluk:  #8593a8;

    /* Vurgu */
    --mavi:         #1d4ed8;
    --mavi-acik:    #eaf0ff;
    --mavi-koyu:    #1739a8;

    /* Anlam */
    --yesil:        #05714f;
    --yesil-acik:   #e3f6ef;
    --kirmizi:      #b3261e;
    --kirmizi-acik: #fdecea;
    --amber:        #96590b;
    --amber-acik:   #fdf3e2;
    --mor:          #5b3fa8;
    --mor-acik:     #efeafc;

    --golge:        0 1px 2px rgba(16, 26, 46, .06), 0 2px 8px rgba(16, 26, 46, .04);
    --golge-yuksek: 0 4px 16px rgba(16, 26, 46, .10), 0 12px 40px rgba(16, 26, 46, .08);

    --yuvarlak:     10px;
    --yuvarlak-kucuk: 6px;

    --yan-genislik: 236px;

    --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --yazi-sayi: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--yazi);
    font-size: 14px;
    line-height: 1.5;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mavi); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

/* Satır içi SVG simgeler.
   Simgeler width/height ÖZNİTELİĞİ TAŞIMIYOR (yalnızca viewBox var); boyut
   verilmezse tarayıcı varsayılan 300x150'ye şişirir. Bağlama özel kurallar
   (.seri-simge, .bos svg, .yan-baglanti svg …) bunu ezer. */
svg {
    width: 17px;
    height: 17px;
    flex: none;
    vertical-align: middle;
}

/* Para ve tarih gibi hizalanması gereken sayılar */
.sayi, td.sayi, .tutar {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.tek-aralik { font-family: var(--yazi-sayi); font-size: 12.5px; }


/* ============================================================
   GİRİŞ EKRANI
   ============================================================ */

/* Giriş ekranı HER ZAMAN tek ekrana sığar — kaydırma çubuğu çıkmaz.
   Ölçüler sabit piksel değil, clamp() ile ekran yüksekliğine bağlı:
   1366x768 bir dizüstünde de, 27" bir ekranda da aynı düzen korunur,
   yalnızca nefes payı değişir. */
.giris-sayfa {
    min-height: 100vh;
    min-height: 100dvh;          /* mobil tarayıcı çubuklarını hesaba katar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 2.2vh, 24px) 16px;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 15% -10%, #1c2f4f 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 110%, #17304d 0%, transparent 55%),
        linear-gradient(160deg, #0c1526 0%, #101d33 55%, #0b1322 100%);
}

/* İki sütun: solda kurum kimliği (amblem büyük durur), sağda form.
   Geniş ekranda yan yana, dar ekranda alt alta. */
.giris-kutu {
    width: 100%;
    max-width: 940px;
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 396px);
    gap: clamp(28px, 6vw, 76px);
    align-items: center;
    /* Aşırı kısa ekranda içerik kesilmesin: kutu kendi içinde kayar, sayfa değil. */
    overflow-y: auto;
    scrollbar-width: thin;
}

/* --- Sol sütun: kurum kimliği --- */
.giris-tanitim { min-width: 0; }

.giris-tanitim .giris-amblem {
    display: block;
    width: clamp(120px, 21vh, 190px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: clamp(18px, 3.4vh, 32px);
    /* Koyu zeminde amblemin kenarı kesilmiş gibi durmasın diye
       çok hafif bir hâle; parlama değil, ayrım. */
    filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .5));
}

.giris-tanitim .logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 12vh, 104px);
    height: clamp(72px, 12vh, 104px);
    border-radius: 22px;
    background: linear-gradient(150deg, #2f6bff, #1734a8);
    box-shadow: 0 10px 30px rgba(29, 78, 216, .4);
    margin-bottom: clamp(14px, 2.4vh, 22px);
}

.giris-tanitim .logo svg { width: 46%; height: 46%; }

.giris-tanitim .kurum-adi {
    color: #fff;
    font-size: clamp(19px, 2.8vh, 25px);
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: 10px;
}

.giris-tanitim h1 {
    color: #fff;
    font-size: clamp(19px, 3vh, 29px);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.015em;
}

.giris-tanitim .tanitim-metni {
    margin: clamp(10px, 1.8vh, 15px) 0 0;
    color: #8296b4;
    font-size: clamp(12.5px, 1.7vh, 14px);
    line-height: 1.65;
    max-width: 38ch;
}

.giris-sutun { min-width: 0; }

/* --- Dar ekran: tek sütun --- */
@media (max-width: 900px) {
    .giris-kutu {
        grid-template-columns: minmax(0, 400px);
        justify-content: center;
        gap: clamp(14px, 2.6vh, 24px);
    }

    .giris-tanitim { text-align: center; }

    .giris-tanitim .giris-amblem {
        width: clamp(64px, 11vh, 104px);
        margin-inline: auto;
        margin-bottom: clamp(9px, 1.6vh, 14px);
    }

    .giris-tanitim .logo { width: clamp(48px, 8vh, 64px); height: clamp(48px, 8vh, 64px); }
    .giris-tanitim h1 { font-size: clamp(16px, 2.3vh, 20px); }
    .giris-tanitim h1 br { display: none; }
    .giris-tanitim .tanitim-metni { display: none; }
}

.giris-kart {
    background: var(--kart);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .38);
    padding: clamp(19px, 3.3vh, 30px) clamp(20px, 4vw, 30px) clamp(17px, 2.8vh, 26px);
}

.giris-kart h2 {
    font-size: 16px;
    margin-bottom: 3px;
}

.giris-kart .alt-metin {
    color: var(--metin-orta);
    font-size: 13px;
    margin: 0 0 clamp(13px, 2.4vh, 22px);
}

/* Giriş formunda alanlar arası boşluk da yüksekliğe uyar */
.giris-kart .alan { margin-bottom: clamp(10px, 1.9vh, 16px); }
.giris-kart hr.ayrac { margin: clamp(11px, 2vh, 16px) 0; }

.giris-dip {
    margin-top: clamp(10px, 1.9vh, 18px);
    text-align: center;
    color: #6d7f9c;
    font-size: 12px;
    line-height: 1.65;
}

.giris-dip .ip {
    font-family: var(--yazi-sayi);
    color: #8ba0c0;
}

/* Alçak ekranlarda önce süs, sonra açıklama gider — form asla kısılmaz. */
@media (max-height: 700px) {
    .giris-kart .yardim-notu { font-size: 11.5px; line-height: 1.5; }
    .giris-tanitim .tanitim-metni { font-size: 12.5px; }
}

@media (max-height: 620px) {
    .giris-kart hr.ayrac,
    .giris-kart .yardim-notu,
    .giris-tanitim .tanitim-metni { display: none; }
    .giris-dip .uzun-not { display: none; }
}


/* ============================================================
   FORM
   ============================================================ */

.alan { margin-bottom: 16px; }

.alan label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--metin-orta);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.alan input[type=text],
.alan input[type=password],
.alan input[type=email],
.alan input[type=date],
.alan input[type=number],
.alan select,
.alan textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--metin);
    background: var(--kart);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    transition: border-color .12s, box-shadow .12s;
}

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
    outline: none;
    border-color: var(--mavi);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .13);
}

.alan input::placeholder { color: var(--metin-soluk); }

.alan .ipucu {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--metin-soluk);
}

.alan-satir { display: flex; gap: 14px; }
.alan-satir > * { flex: 1; }

/* Onay kutusu satırı */
.onay {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--metin-orta);
}

.onay input { margin-top: 2px; }


/* ============================================================
   DÜĞMELER
   ============================================================ */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--metin);
    background: var(--kart);
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-kucuk);
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
    text-decoration: none;
    white-space: nowrap;
}

.dugme:hover { background: var(--kart-ikinci); border-color: var(--metin-soluk); text-decoration: none; }
.dugme:active { transform: translateY(.5px); }
.dugme:disabled, .dugme[aria-disabled=true] { opacity: .55; cursor: not-allowed; }

.dugme-ana {
    color: #fff;
    background: var(--mavi);
    border-color: var(--mavi);
}
.dugme-ana:hover { background: var(--mavi-koyu); border-color: var(--mavi-koyu); }

.dugme-tehlike { color: var(--kirmizi); border-color: #e8b7b3; background: #fff; }
.dugme-tehlike:hover { background: var(--kirmizi-acik); border-color: var(--kirmizi); }

.dugme-tam { width: 100%; padding: 11px 16px; font-size: 14.5px; }
.dugme-kucuk { padding: 5px 10px; font-size: 12.5px; }

.dugme-grup { display: flex; gap: 8px; flex-wrap: wrap; }


/* ============================================================
   UYARI ŞERİTLERİ
   ============================================================ */

.seri {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: var(--yuvarlak-kucuk);
    font-size: 13.5px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.seri strong { font-weight: 600; }
.seri .seri-govde { flex: 1; }
.seri p { margin: 4px 0 0; }

.seri-hata   { background: var(--kirmizi-acik); border-color: #f2c4c0; color: #7f1d1a; }
.seri-uyari  { background: var(--amber-acik);  border-color: #f0d5a8; color: #6b400a; }
.seri-basari { background: var(--yesil-acik);  border-color: #b9e5d5; color: #04543c; }
.seri-bilgi  { background: var(--mavi-acik);   border-color: #c5d6ff; color: #1a357f; }

.seri-simge { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* İptal edilen ödeme uyarısı — İŞ SAHİBİNİN AÇIK TALEBİ:
   "büyük punto ve renkli olarak göze çarpacak şekilde" */
.seri-kritik {
    background: linear-gradient(97deg, #b3261e, #8f1d16);
    color: #fff;
    border: none;
    padding: 18px 22px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 6px 22px rgba(179, 38, 30, .32);
    align-items: center;
}

.seri-kritik .seri-simge { width: 26px; height: 26px; }
.seri-kritik .dugme { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.36); }
.seri-kritik .dugme:hover { background: rgba(255,255,255,.24); }
.seri-kritik a { color: #fff; text-decoration: underline; }


/* ============================================================
   UYGULAMA KABUĞU
   ============================================================ */

/* Uygulama kabuğu: pencere ASLA kaymaz. Kenar çubuğu ve üst şerit
   sabit durur, yalnızca içerik alanı kendi içinde kayar. Böylece
   menü ve durum göstergeleri her zaman görünür kalır — tablolar
   uzasa bile "sayfayı kaybetme" hissi olmaz. */
html, body { overflow: hidden; }

.kabuk {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* --- Kenar çubuğu --- */
.yan-menu {
    width: var(--yan-genislik);
    flex: none;
    background: var(--yan);
    color: var(--yan-metin);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.yan-marka {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.yan-marka .logo {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 9px;
    background: linear-gradient(150deg, #2f6bff, #1734a8);
    display: flex; align-items: center; justify-content: center;
}
.yan-marka .logo svg { width: 18px; height: 18px; }

.yan-marka .ad {
    color: var(--yan-parlak);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: .01em;
}
.yan-marka .alt { font-size: 11.5px; color: #64789a; }

.yan-bolum {
    padding: 16px 12px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #55688a;
}

.yan-menu nav { flex: 1; overflow-y: auto; padding-bottom: 12px; }

.yan-baglanti {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 8px;
    padding: 8px 10px;
    border-radius: var(--yuvarlak-kucuk);
    color: var(--yan-metin);
    font-size: 13.5px;
    font-weight: 500;
    transition: background .12s, color .12s;
}

.yan-baglanti:hover { background: var(--yan-acik); color: #dbe4f2; text-decoration: none; }

.yan-baglanti.etkin {
    background: var(--mavi);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(29, 78, 216, .35);
}

.yan-baglanti svg { width: 17px; height: 17px; flex: none; opacity: .9; }

.yan-baglanti .rozet {
    margin-left: auto;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

.yan-baglanti .rozet.kirmizi { background: #b3261e; }

/* Kullanıcı kutusu */
.yan-kullanici {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(150deg, #3b6fd4, #23458f);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: .02em;
}

.yan-kullanici .bilgi { flex: 1; min-width: 0; }
.yan-kullanici .ad {
    color: #e5ecf7; font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yan-kullanici .rol { font-size: 11.5px; color: #64789a; }

.yan-kullanici .cikis {
    color: var(--yan-metin);
    padding: 6px;
    border-radius: var(--yuvarlak-kucuk);
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
}
.yan-kullanici .cikis:hover { background: var(--yan-acik); color: #fff; }
.yan-kullanici .cikis svg { width: 17px; height: 17px; }


/* --- İçerik --- */
.icerik {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ust-serit {
    flex: none;
    background: var(--kart);
    border-bottom: 1px solid var(--cizgi);
    padding: 13px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 20;
}

.ust-serit h1 { font-size: 17px; }
.ust-serit .alt { font-size: 12.5px; color: var(--metin-orta); margin-top: 1px; }
.ust-serit .sag { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Kayan tek alan burasıdır. */
.sayfa {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 24px 28px;
    scrollbar-gutter: stable;
}

.sayfa > * + * { margin-top: 16px; }


/* ============================================================
   KARTLAR VE IZGARA
   ============================================================ */

.kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
    overflow: hidden;
}

.kart-baslik {
    padding: 14px 18px;
    border-bottom: 1px solid var(--cizgi);
    display: flex;
    align-items: center;
    gap: 12px;
}

.kart-baslik h2 { font-size: 14.5px; }
.kart-baslik .alt { font-size: 12.5px; color: var(--metin-orta); margin-top: 1px; }
.kart-baslik .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.kart-govde { padding: 18px; }
.kart-govde.sikisik { padding: 0; }

.izgara { display: grid; gap: 16px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
    .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; }
}


/* --- Ölçüm kutusu --- */
.olcum {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    padding: 16px 18px;
    box-shadow: var(--golge);
}

.olcum .etiket {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}

.olcum .deger {
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.02em;
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}

.olcum .not { font-size: 12.5px; color: var(--metin-orta); margin-top: 3px; }

.olcum.vurgu-yesil .deger { color: var(--yesil); }
.olcum.vurgu-kirmizi .deger { color: var(--kirmizi); }
.olcum.vurgu-amber .deger { color: var(--amber); }


/* ============================================================
   TABLO
   ============================================================ */

.tablo-sarmal { overflow-x: auto; }

table.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.2px;
}

table.tablo th {
    text-align: left;
    padding: 9px 14px;
    background: var(--kart-ikinci);
    border-bottom: 1px solid var(--cizgi);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--metin-orta);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

table.tablo td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: middle;
}

table.tablo tbody tr:last-child td { border-bottom: none; }
table.tablo tbody tr:hover { background: #f6f9ff; }

table.tablo td.sag, table.tablo th.sag { text-align: right; }
table.tablo td.orta, table.tablo th.orta { text-align: center; }
table.tablo td.daralt { width: 1%; white-space: nowrap; }

.tablo .ikincil { color: var(--metin-orta); font-size: 12.3px; }
.tablo .solgun { color: var(--metin-soluk); }

/* Para */
.tutar { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tutar-giris { color: var(--yesil); }
.tutar-cikis { color: var(--kirmizi); }
.tutar-belirsiz { color: var(--amber); }


/* ============================================================
   ROZETLER
   ============================================================ */

.rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.7;
}

.rozet-nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.rozet-yesil   { background: var(--yesil-acik);   color: var(--yesil); }
.rozet-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet-amber   { background: var(--amber-acik);   color: var(--amber); }
.rozet-mavi    { background: var(--mavi-acik);    color: var(--mavi); }
.rozet-mor     { background: var(--mor-acik);     color: var(--mor); }
.rozet-gri     { background: #eef1f6;             color: var(--metin-orta); }


/* ============================================================
   BOŞ DURUM
   ============================================================ */

.bos {
    text-align: center;
    padding: 46px 24px;
    color: var(--metin-orta);
}

.bos svg { width: 40px; height: 40px; color: var(--cizgi-koyu); margin-bottom: 12px; }
.bos h3 { font-size: 14.5px; color: var(--metin); margin-bottom: 5px; }
.bos p { margin: 0; font-size: 13px; max-width: 460px; margin-inline: auto; }


/* ============================================================
   SÜZGEÇ ÇUBUĞU
   ============================================================ */

.suzgec {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--kart-ikinci);
    border-bottom: 1px solid var(--cizgi);
}

.suzgec .alan { margin: 0; }
.suzgec .alan input, .suzgec .alan select { padding: 7px 10px; font-size: 13px; }
.suzgec .alan label { font-size: 11.5px; margin-bottom: 4px; }


/* ============================================================
   SAYFALAMA
   ============================================================ */

.sayfalama {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--cizgi);
    font-size: 13px;
    color: var(--metin-orta);
}

.sayfalama .sag { margin-left: auto; display: flex; gap: 6px; }


/* ============================================================
   TANIM LİSTESİ
   ============================================================ */

.tanim { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 1px 16px; font-size: 13.3px; }
.tanim dt { color: var(--metin-orta); padding: 6px 0; }
.tanim dd { margin: 0; padding: 6px 0; font-weight: 500; }


/* ============================================================
   YARDIMCILAR
   ============================================================ */

.gizle { display: none !important; }
.sadece-ekran-okuyucu {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ince { font-weight: 400; }
.kalin { font-weight: 600; }
.kucuk { font-size: 12.3px; }
.orta-metin { color: var(--metin-orta); }
.soluk { color: var(--metin-soluk); }
.sagda { text-align: right; }
.bosluk-yok { margin: 0 !important; }

hr.ayrac { border: none; border-top: 1px solid var(--cizgi); margin: 16px 0; }

@media (max-width: 860px) {
    .yan-menu { position: fixed; z-index: 50; transform: translateX(-100%); transition: transform .18s; }
    .yan-menu.acik { transform: none; }
    .sayfa { padding: 16px; }
    .ust-serit { padding: 13px 16px; }
}

@media print {
    .yan-menu, .ust-serit .sag, .dugme, .suzgec { display: none !important; }
    body { background: #fff; }
    .kart { box-shadow: none; border-color: #ccc; }
}

/* Kenar çubuğu amblemi — dairesel, kutusuz */
.yan-marka .yan-amblem {
    width: 36px;
    height: 36px;
    flex: none;
    object-fit: contain;
}