/* =========================================================================
   Nova CRM arayüzü — "Tasarım 1" (kullanıcı onayı 20.10.2026)
   Nova School ailesi: beyaz üst çubuk + renkli alt çizgi, satırları ince çizgili sol menü,
   düz köşeler, açık tonlu tablo başlıkları. Ana renk Nova CRM simgesinin rengi (22.10).
   Renkler tek yerde (:root); yeni CSS'te sabit renk yazma, değişken kullan.
   ========================================================================= */

:root {
    --ana: #5148c0;            /* logo ve simge rengi (22.10): üst çizgi, düğmeler, seçili öğe */
    --ana-koyu: #423b9d;       /* düğme üzerine gelince */
    --ana-yazi: #5148c0;       /* açık zeminde ana renkli yazı */
    --ana-zemin: #eeedf9;      /* seçili satır, rozet zemini */
    --tablo-baslik: #efeff9;   /* tablo başlık satırı */
    --tablo-cizgi: #dcdaf2;
    --ana-cizgi: #b9b6e6;      /* odaklanan kutu, kart üzerine gelince */
    --ana-acik: #f6f6fc;       /* bugünün takvim hücresi */
    /* Firma teması (App\Support\Tema) yukarıdaki --ana… / --tablo… değişkenlerini <html style> ile değiştirir */
    --zemin: #eff0f2;          /* sayfa zemini */
    --kart: #ffffff;
    --kart-alt: #f6f7f9;
    --cizgi: #e5e9ec;
    --cizgi-ince: #eceef1;
    --yazi: #505458;
    --yazi-koyu: #2a2e36;
    --yazi-soluk: #6b7079;     /* beyaz üzerinde 4.5:1'i geçer */
    --menu-yazi: #2f3237;
    --kirmizi: #b3261e;
    --kirmizi-zemin: #fbe4e2;
    --yesil: #16653f;
    --yesil-zemin: #e3f3ec;
    --sari: #8a5300;
    --sari-zemin: #fdf1dc;
    --kose: 2px;
    /* Nova ailesinin 8 renkli bandı (Nova School ile aynı sıra; sonuncusu ürünün rengi) */
    --bant-1: #0aa699; --bant-2: #4caf50; --bant-3: #f5b301; --bant-4: #f7882f;
    --bant-5: #f35958; --bant-6: #e0569b; --bant-7: #8e6cc7; --bant-8: #5148c0;   /* şerit temayla değişmez */
    --bant-gradyan: linear-gradient(90deg, var(--bant-1) 0 12.5%, var(--bant-2) 12.5% 25%, var(--bant-3) 25% 37.5%, var(--bant-4) 37.5% 50%,
        var(--bant-5) 50% 62.5%, var(--bant-6) 62.5% 75%, var(--bant-7) 75% 87.5%, var(--bant-8) 87.5% 100%);
    --ust-yukseklik: 60px;
    --menu-genislik: 240px;
    --yazi-tipi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--yazi-tipi); font-size: 13px; color: var(--yazi); background: var(--zemin); -webkit-font-smoothing: antialiased; }
a { color: var(--ana-yazi); text-decoration: none; }
a:hover { color: var(--ana-koyu); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
b, strong { font-weight: 600; }
h1, h2, h3 { color: var(--yazi-koyu); }
.ikon { width: 17px; height: 17px; flex: none; display: inline-block; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------------- logo */
.logo { display: block; height: 30px; width: auto; }   /* public/img/logo.svg (kullanıcının logosu, 20.10.2026) */

/* ------------------------------------------------------------ üst çubuk */
.ust {
    position: sticky; top: 0; z-index: 30; height: var(--ust-yukseklik); background: #fff;
    display: flex; align-items: center; gap: 14px; padding: 0 16px 0 10px;
}
/* Alt çizgi: Nova ailesinin 8 renkli şeridi (tek renk mavi çizgi yerine) */
.ust::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bant-gradyan); pointer-events: none; }
.ust-menu-dugme { width: 44px; height: 44px; border: 0; background: none; color: #5b5f66; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--kose); }
.ust-menu-dugme:hover { background: #f1f4f7; color: var(--ana); }
.ust-menu-dugme .ikon { width: 22px; height: 22px; }
.ust-ayrac { width: 1px; height: 30px; background: var(--cizgi); flex: none; }
.ust-kurum { font-size: 17px; color: var(--yazi-koyu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ust-kurum span { overflow: hidden; text-overflow: ellipsis; }
.ust-firma-logo { max-height: 32px; max-width: 120px; object-fit: contain; flex-shrink: 0; }
.acik-firma { display: flex; align-items: center; gap: 10px; min-width: 0; } .acik-firma img { max-height: 36px; max-width: 140px; object-fit: contain; }
.logo-onizleme { display: flex; align-items: center; justify-content: center; min-height: 90px; padding: 12px; border: 1px dashed var(--cizgi); background: var(--kart-alt); }
.logo-onizleme img { max-height: 80px; max-width: 100%; }
.ust-ara { flex: 1 1 240px; max-width: 420px; margin: 0 auto; position: relative; }
.ust-ara .ikon { position: absolute; left: 12px; top: 11px; width: 15px; height: 15px; color: #8b91a0; pointer-events: none; }
.ust-ara input { width: 100%; height: 38px; border: 1px solid var(--cizgi); border-radius: var(--kose); background: #f4f6f8; padding: 0 12px 0 36px; font-size: 13px; outline: none; }
.ust-ara input:focus { background: #fff; border-color: var(--ana-cizgi); }
.ara-sonuc { position: absolute; top: 42px; left: 0; right: 0; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 40; max-height: 70vh; overflow-y: auto; padding: 4px 0; }
.ara-sonuc .grup { font-size: 11px; font-weight: 700; color: var(--yazi-soluk); text-transform: uppercase; padding: 9px 14px 4px; }
.ara-sonuc a { display: block; padding: 8px 14px; color: var(--yazi-koyu); }
.ara-sonuc a:hover, .ara-sonuc a.secili { background: var(--ana-zemin); }
.ara-sonuc .bos { padding: 12px 14px; color: var(--yazi-soluk); }
.ust-ikonlar { display: flex; align-items: center; gap: 4px; padding-right: 12px; border-right: 1px solid var(--cizgi); }
.ust-ikonlar a, .ust-ikonlar button { width: 40px; height: 40px; border: 0; background: none; color: #5b5f66; display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--kose); cursor: pointer; }
.ust-ikonlar a:hover, .ust-ikonlar button:hover { background: #f1f4f7; color: var(--ana); }
.ust-ikonlar .ikon { width: 19px; height: 19px; }
.ust-rozet { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #c8372f; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.ust-kullanici { position: relative; }
.ust-kullanici > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px; }
.ust-kullanici > summary::-webkit-details-marker { display: none; }
.ust-kullanici-yazi { text-align: right; line-height: 1.3; }
.ust-kullanici-yazi b { color: var(--yazi-koyu); }
.ust-kullanici-yazi small { display: block; font-size: 11.5px; color: var(--yazi-soluk); }
.avatar-harf { width: 36px; height: 36px; border-radius: 50%; background: var(--ana); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.acilir { position: absolute; top: 50px; right: 0; min-width: 200px; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px 0; z-index: 40; }
.acilir a, .acilir button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 16px; color: var(--yazi-koyu); background: none; border: 0; text-align: left; cursor: pointer; font-size: 13px; }
.acilir a:hover, .acilir button:hover { background: #f3f5f7; }
.acilir hr { border: 0; border-top: 1px solid var(--cizgi-ince); margin: 5px 0; }

/* ------------------------------------------------------------- düzen */
.govde { display: flex; min-height: calc(100vh - var(--ust-yukseklik)); }
.menu { width: var(--menu-genislik); flex: none; background: #fff; border-right: 1px solid var(--cizgi); display: flex; flex-direction: column; }
/* Bilgisayarda menü sayfayla birlikte kaymaz: üst çubuğun altında sabit durur, uzun menü kendi içinde kayar, destek bilgisi hep altta görünür (23.10 kullanıcı isteği) */
@media (min-width: 861px) {
    .menu { position: sticky; top: var(--ust-yukseklik); height: calc(100vh - var(--ust-yukseklik)); overflow-y: auto; }
    .menu-alt-bilgi { position: sticky; bottom: 0; background: #fff; }
    html.menu-dar .menu { overflow: visible; }
}
.sayfa { flex: 1; min-width: 0; padding: 20px 22px 32px; display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------- sol menü */
.menu-grup-dugme, .menu-oge {
    display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--cizgi-ince);
    background: #fff; color: var(--menu-yazi); font-size: 13.5px; text-align: left; cursor: pointer; text-decoration: none; position: relative;
}
.menu-grup-dugme .ikon, .menu-oge .ikon { color: var(--ana-yazi); }
.menu-grup-dugme .ok { margin-left: auto; width: 13px; height: 13px; color: #8b91a0; transition: transform .15s; }
.menu-grup.acik > .menu-grup-dugme .ok { transform: rotate(90deg); }
.menu-grup.acik > .menu-grup-dugme, .menu-grup.aktif > .menu-grup-dugme { color: var(--ana-yazi); font-weight: 600; }
.menu-grup-dugme:hover, .menu-oge:hover, .menu-alt a:hover { color: var(--ana-yazi); background: #f7f9fb; }
.menu-alt { display: none; }
.menu-grup.acik > .menu-alt { display: block; }
.menu-alt a { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 44px; border-bottom: 1px solid var(--cizgi-ince); color: var(--menu-yazi); font-size: 13px; text-decoration: none; }
.menu-alt a.aktif, .menu-oge.aktif { background: var(--ana-zemin); color: var(--ana-yazi); font-weight: 600; box-shadow: inset 3px 0 0 var(--ana); }
.menu-sonra { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--yazi-soluk); border: 1px solid #d3d8dd; padding: 0 5px; line-height: 16px; }
.menu-alt-bilgi { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--cizgi-ince); font-size: 11.5px; color: var(--yazi-soluk); line-height: 1.55; }
.menu-alt-bilgi b { color: var(--yazi-koyu); }
.menu-ortu { display: none; }

/* ------------------------------------------------------------- sayfa başlığı */
.baslik-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.baslik-satir h1 { margin: 2px 0 0; font-size: 21px; font-weight: 500; }
.yol { font-size: 12px; color: var(--yazi-soluk); }
.baslik-satir .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------- kutular */
.kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--kose); }
.kutu-baslik { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-bottom: 1px solid var(--cizgi-ince); font-size: 14px; font-weight: 600; color: var(--yazi-koyu); }
.kutu-baslik .sag { margin-left: auto; font-size: 13px; font-weight: 400; }
.kutu-govde { padding: 16px; }
.kutu-alt { padding: 12px 16px; border-top: 1px solid var(--cizgi-ince); background: var(--kart-alt); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.izgara-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: stretch; }
.izgara-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ozet { background: #fff; border: 1px solid var(--cizgi); border-top: 3px solid var(--ana); border-radius: var(--kose); padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; }
.ozet span { color: var(--yazi-soluk); }
.ozet b { font-size: 23px; font-weight: 600; color: var(--yazi-koyu); }
.ozet small { font-size: 12px; color: var(--yazi-soluk); }
.bant { background: var(--ana); color: #fff; border-radius: var(--kose); padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bant h1 { color: #fff; margin: 0; font-size: 20px; font-weight: 600; }
.bant p { margin: 3px 0 0; font-size: 13px; opacity: .92; }
.bant .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bant .dugme.cizgili { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.bant .dugme.beyaz { background: #fff; color: var(--ana-yazi); font-weight: 600; }
.bos-durum { padding: 22px 16px; color: var(--yazi-soluk); text-align: center; }

/* ------------------------------------------------------------- düğmeler */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 37px; padding: 0 16px;
    border: 1px solid var(--ana); border-radius: var(--kose); background: var(--ana); color: #fff; font-size: 13.5px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.dugme:hover { background: var(--ana-koyu); border-color: var(--ana-koyu); color: #fff; }
.dugme.ikincil { background: #fff; color: var(--yazi-koyu); border-color: #d3d8dd; }
.dugme.ikincil:hover { background: #f5f7f9; color: var(--yazi-koyu); }
.dugme.tehlike { background: #fff; color: var(--kirmizi); border-color: #e3b1ad; }
.dugme.tehlike:hover { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.dugme.kucuk { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.dugme.tam { width: 100%; }
.dugme .ikon { width: 14px; height: 14px; }

/* ------------------------------------------------------------- formlar */
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 16px; }
.alan { display: flex; flex-direction: column; gap: 6px; }
.alan > label, .alan > .etiket { font-size: 12.5px; color: var(--yazi-soluk); }
.girdi, .secim, textarea.girdi {
    width: 100%; height: 37px; border: 1px solid #d3d8dd; border-radius: var(--kose); background: #fff; padding: 6px 10px; font-size: 13px; color: var(--yazi-koyu); outline: none;
}
textarea.girdi { height: auto; min-height: 90px; resize: vertical; }
.girdi:focus, .secim:focus { border-color: var(--ana-cizgi); box-shadow: 0 0 0 2px var(--ana-zemin); }
.girdi.hatali, .secim.hatali { border-color: #e3a19b; }
.hata-yazi { color: var(--kirmizi); font-size: 12px; }
.ipucu { color: var(--yazi-soluk); font-size: 12px; }
.onay-kutu { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--yazi-koyu); }
.onay-kutu input { width: 16px; height: 16px; margin: 0; accent-color: var(--ana); }
.yetki-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.yetki-grup { border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 0; margin: 0; }
.yetki-grup legend { float: left; width: 100%; padding: 9px 12px; background: var(--tablo-baslik); border-bottom: 1px solid var(--tablo-cizgi); font-weight: 600; color: var(--yazi-koyu); display: flex; align-items: center; }
.yetki-grup legend .onay-kutu { font-weight: 600; }
.yetki-grup .liste { clear: both; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------- tablolar */
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th { text-align: left; font-weight: 600; color: var(--yazi-koyu); padding: 10px 12px; background: var(--tablo-baslik); border-bottom: 1px solid var(--tablo-cizgi); white-space: nowrap; font-size: 12.5px; }
.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--cizgi-ince); vertical-align: middle; }
.tablo tr:hover td { background: #fafbfc; }
.tablo .sagda { text-align: right; }
.tablo td.islemler { text-align: right; white-space: nowrap; }
.tablo td.islemler a, .tablo td.islemler button { margin-left: 6px; }
.rozet { display: inline-block; padding: 2px 8px; border-radius: var(--kose); font-size: 11.5px; font-weight: 600; background: #eef0f2; color: var(--yazi); }
.rozet.mavi { background: var(--ana-zemin); color: var(--ana-yazi); }
.rozet.yesil { background: var(--yesil-zemin); color: var(--yesil); }
.rozet.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.rozet.sari { background: var(--sari-zemin); color: var(--sari); }

/* ------------------------------------------------------------- bildirimler */
.bildirim { padding: 11px 14px; border-radius: var(--kose); border: 1px solid; font-size: 13px; }
.bildirim.basarili { background: var(--yesil-zemin); color: var(--yesil); border-color: #bfe2cf; }
.bildirim.hata { background: var(--kirmizi-zemin); color: var(--kirmizi); border-color: #efc2be; }
.bildirim.bilgi { background: var(--ana-zemin); color: var(--ana-yazi); border-color: var(--tablo-cizgi); }

/* ------------------------------------------------------------- onay penceresi (tarayıcının confirm kutusu kullanılmaz) */
.onay-perde { position: fixed; inset: 0; background: rgba(20, 28, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.onay-kutusu { background: #fff; width: 100%; max-width: 420px; border-top: 3px solid var(--ana); box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.onay-kutusu.tehlike { border-top-color: var(--kirmizi); }
.onay-kutusu h2 { margin: 0; padding: 16px 18px 0; font-size: 16px; }
.onay-kutusu p { margin: 0; padding: 10px 18px 18px; color: var(--yazi); line-height: 1.5; }
.onay-kutusu .kutu-alt { background: var(--kart-alt); }

/* ------------------------------------------------------------- giriş ekranı */
/* El yazısı slogan: Great Vibes (SIL Open Font License, public/fonts/GreatVibes-OFL.txt), programın içinde; Google'a bağlı değil.
   Yalnız Türkçe / Latin harfler (yaklaşık %10 boyut). */
@font-face { font-family: "Great Vibes"; src: url("../fonts/GreatVibes-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
.giris-sayfa { min-height: 100vh; display: flex; flex-direction: column; background: var(--zemin); }
.giris-ust { height: 6px; background: var(--bant-gradyan); }
.giris-orta { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.giris-kutu { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--cizgi); border-top: 3px solid var(--ana); }
.giris-kutu.giris-kutu-genis { max-width: 520px; }
.giris-kutu-ust { padding: 26px 26px 10px; text-align: center; }
.giris-kutu-ust .logo { height: 46px; margin: 0 auto; }
.giris-kutu-ust p { margin: 10px 0 0; color: var(--yazi-soluk); font-size: 12.5px; letter-spacing: .6px; }
.giris-form { padding: 16px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.giris-form .girdi { height: 42px; font-size: 14px; }
.giris-form .dugme { min-height: 42px; font-size: 14px; }
.sifre-alan { position: relative; }
.sifre-alan .girdi { padding-right: 42px; }
.sifre-goster { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; background: none; color: #8b91a0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.giris-alt { padding: 14px 26px 20px; border-top: 1px solid var(--cizgi-ince); text-align: center; font-size: 12.5px; color: var(--yazi-soluk); line-height: 1.6; }
.giris-alt b { color: var(--yazi-koyu); }
.giris-surum { text-align: center; font-size: 11px; color: #9aa0aa; padding: 0 0 14px; }
.giris-surum a { color: inherit; }
.giris-sayfa { position: relative; overflow: hidden; }
.giris-orta, .giris-moduller, .giris-surum { position: relative; z-index: 2; }
.giris-kutu { box-shadow: 0 10px 30px rgba(20, 40, 70, .08); }
.giris-sus { position: absolute; inset: 0; pointer-events: none; color: var(--ana); }
/* "n" kutunun solunda, logodaki "n"nin aynısı (SVG): yazı tipine bağlı olmadığı için her bilgisayarda alt ucu kutunun alt kenarıyla tam hizalı */
.giris-kutu { position: relative; }
.giris-sus-harf { position: absolute; right: calc(100% + 80px); bottom: 0; height: 300px; width: auto; aspect-ratio: 63.1 / 71.53; fill: var(--ana); opacity: .07; pointer-events: none; }
.giris-sus-kavis { position: absolute; left: 0; top: 150px; width: 100%; height: 260px; opacity: .3; }
.giris-sus-slogan { position: absolute; right: 8%; top: 300px; display: flex; flex-direction: column; align-items: flex-end; font-family: "Great Vibes", cursive; font-size: 58px; line-height: 1.08; }
.giris-sus-slogan svg { width: 210px; height: 34px; margin-top: 4px; }
.giris-moduller { display: flex; justify-content: center; flex-wrap: wrap; gap: 46px; padding: 0 16px 18px; }
.giris-modul { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; color: var(--yazi); }
.giris-modul .ikon { width: 26px; height: 26px; color: var(--ana); stroke-width: 1.5; }
@media (max-width: 1100px) { .giris-sus-slogan { font-size: 44px; right: 4%; top: 120px; } .giris-sus-harf { right: calc(100% + 40px); height: 240px; } }
@media (max-width: 860px) { .giris-sus-slogan, .giris-sus-kavis { display: none; } .giris-sus-harf { display: none; } .giris-moduller { gap: 20px; } }


/* ------------------------------------------------------------- liste araçları */
.suzgec { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 14px; }
.suzgec .alan { min-width: 150px; }
.suzgec .alan.genis { flex: 1 1 220px; }
.sayfalama { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--yazi-soluk); border-top: 1px solid var(--cizgi-ince); }
.sayfalama-dugmeler { display: flex; gap: 14px; align-items: center; }
.sayfalama .pasif { color: #b7bbc1; }
.sekme-cubugu { display: flex; overflow-x: auto; border-bottom: 1px solid var(--cizgi-ince); padding: 0 6px; background: #fff; }
.sekme-cubugu a { height: 44px; display: flex; align-items: center; padding: 0 14px; color: var(--yazi); white-space: nowrap; border-bottom: 3px solid transparent; text-decoration: none; }
.sekme-cubugu a.secili { color: var(--ana-yazi); font-weight: 600; border-bottom-color: var(--ana); }
.sekme-cubugu a .sayi { margin-left: 6px; font-size: 11.5px; color: var(--yazi-soluk); }
.alt-bilgi { font-size: 12px; color: var(--yazi-soluk); }
.koyu { color: var(--yazi-koyu); font-weight: 500; }
.sag-hiza { text-align: right; }
.satir-dugmeler { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ince-dugme { border: 0; background: none; padding: 0; color: var(--ana-yazi); cursor: pointer; font: inherit; }
.ince-dugme:hover { text-decoration: underline; }
.ince-dugme.tehlike { color: var(--kirmizi); }
.renk-nokta { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: 6px; background: var(--ana); }

/* ------------------------------------------------------------- uzak seçim (yazdıkça arama) */
.uzak-secim { position: relative; }
.uzak-liste { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow-y: auto; }
.uzak-liste button { display: block; width: 100%; text-align: left; border: 0; background: #fff; padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--yazi-koyu); }
.uzak-liste button:hover, .uzak-liste button.secili { background: var(--ana-zemin); }
.uzak-liste small { display: block; color: var(--yazi-soluk); font-size: 11.5px; }
.uzak-liste .bos { padding: 10px 12px; color: var(--yazi-soluk); }

/* ------------------------------------------------------------- grafik */
.grafik { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.grafik-satir { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.grafik-etiket { color: var(--yazi-koyu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafik-cubuk { height: 12px; background: #eceff3; }
.grafik-cubuk span { display: block; height: 12px; background: var(--ana); min-width: 2px; }
.grafik-deger { color: var(--yazi-koyu); white-space: nowrap; }

/* ------------------------------------------------------------- kart (firma / kişi / fırsat) */
.kart-ust { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 16px 18px; }
.kart-avatar { width: 56px; height: 56px; background: var(--ana-zemin); color: var(--ana-yazi); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex: none; }
.kart-ust h1 { margin: 0; font-size: 20px; font-weight: 600; }
.kart-ust .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bilgi-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bilgi-izgara > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; border-bottom: 1px solid var(--cizgi-ince); min-width: 0; }
.bilgi-izgara span { font-size: 11.5px; color: var(--yazi-soluk); }
.bilgi-izgara b { font-weight: 500; color: var(--yazi-koyu); overflow-wrap: anywhere; }
.akis-satir { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--cizgi-ince); }
.akis-nokta { width: 9px; height: 9px; margin-top: 5px; flex: none; background: var(--ana); }
.akis-nokta.gri { background: #9aa0aa; }
.akis-nokta.yesil { background: var(--yesil); }
.akis-nokta.kirmizi { background: var(--kirmizi); }
.akis-nokta.sari { background: #c08a12; }

/* ------------------------------------------------------------- fırsat panosu */
.pano-kap { overflow-x: auto; }
.pano { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; min-width: min-content; align-items: stretch; }
.pano-sutun { background: #f4f6f8; border: 1px solid var(--cizgi); display: flex; flex-direction: column; min-height: 300px; }
.pano-sutun.uzerinde { outline: 2px dashed var(--ana); outline-offset: -2px; }
.pano-baslik { padding: 10px 12px; background: #fff; border-bottom: 2px solid var(--ana); display: flex; flex-direction: column; gap: 2px; }
.pano-baslik b { color: var(--yazi-koyu); }
.pano-baslik span { font-size: 12px; color: var(--yazi-soluk); }
.pano-kart { display: block; background: #fff; border: 1px solid var(--cizgi); margin: 8px 8px 0; padding: 10px 11px; font-size: 12.5px; color: var(--yazi); text-decoration: none; cursor: grab; }
.pano-kart:hover { border-color: var(--ana-cizgi); color: var(--yazi); }
.pano-kart b { display: block; color: var(--yazi-koyu); }
.pano-kart .alt { display: flex; justify-content: space-between; margin-top: 6px; }

/* ------------------------------------------------------------- takvim */
.takvim { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--cizgi-ince); border-top: 1px solid var(--cizgi-ince); }
.takvim-gun-adi { padding: 8px; font-size: 12px; font-weight: 600; background: var(--tablo-baslik); border-right: 1px solid var(--cizgi-ince); border-bottom: 1px solid var(--tablo-cizgi); color: var(--yazi-koyu); }
.takvim-hucre { min-height: 110px; padding: 6px; border-right: 1px solid var(--cizgi-ince); border-bottom: 1px solid var(--cizgi-ince); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.takvim-hucre.disarida { background: #fafbfc; color: #9aa0aa; }
.takvim-hucre.bugun { background: var(--ana-acik); }
.takvim-hucre .gun-no { font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; }
.takvim-is { display: block; font-size: 11.5px; padding: 3px 5px; background: var(--ana-zemin); color: var(--ana-yazi); border-left: 2px solid var(--ana); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.takvim-is.tamam { opacity: .55; text-decoration: line-through; }
.takvim-is.gecikti { background: var(--kirmizi-zemin); color: var(--kirmizi); border-left-color: var(--kirmizi); }

/* ------------------------------------------------------------- teklif kalemleri */
.kalem-tablo input, .kalem-tablo select { height: 32px; font-size: 12.5px; padding: 4px 6px; }
.kalem-tablo td { padding: 6px 6px; }
.toplam-kutu { margin-left: auto; width: 100%; max-width: 340px; }
.toplam-kutu div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--cizgi-ince); }
.toplam-kutu div.genel { font-size: 16px; font-weight: 700; color: var(--yazi-koyu); border-bottom: 0; }

/* ------------------------------------------------------------- yazdırma */
@media print {
    .ust, .menu, .yazdirma-yok, .sayfa > .bildirim { display: none !important; }
    body, .govde, .sayfa { background: #fff !important; padding: 0 !important; }
    .kutu { border: 0; }
}

/* ------------------------------------------------------------- telefon */
@media (max-width: 860px) {
    .ust { gap: 8px; padding-right: 10px; }
    .ust-ayrac, .ust-kurum, .ust-kullanici-yazi { display: none; }
    .ust-ara { max-width: none; }
    .menu { position: fixed; top: var(--ust-yukseklik); bottom: 0; left: 0; z-index: 25; transform: translateX(-100%); transition: transform .2s; overflow-y: auto; }
    html.menu-acik .menu { transform: none; box-shadow: 8px 0 24px rgba(0,0,0,.15); }
    html.menu-acik .menu-ortu { display: block; position: fixed; inset: var(--ust-yukseklik) 0 0 0; background: rgba(20, 28, 40, .3); z-index: 24; }
    .sayfa { padding: 14px 12px 24px; }
    .izgara-2 { grid-template-columns: 1fr; }
    .bilgi-izgara { grid-template-columns: 1fr; }
    .takvim-hucre { min-height: 70px; }
}
@media (max-width: 520px) {
    .ust-ikonlar { display: none; }
    .logo { height: 24px; }
}
/* ------------------------------------------------------------- daraltılmış menü (bilgisayar): yalnız simgeler; grubun üstüne gelince alt menü sağda açılır */
.menu-alt-baslik { display: none; }
@media (min-width: 861px) {
    html.menu-dar .menu { width: 56px; }
    html.menu-dar .menu-grup { position: relative; }
    html.menu-dar .menu-grup-dugme, html.menu-dar .menu-oge { justify-content: center; padding: 0; font-size: 0; gap: 0; }
    html.menu-dar .menu-grup-dugme .ikon, html.menu-dar .menu-oge .ikon { width: 19px; height: 19px; }
    html.menu-dar .menu-grup-dugme .ok, html.menu-dar .menu-alt-bilgi { display: none; }
    html.menu-dar .menu-grup.aktif > .menu-grup-dugme { background: var(--ana-zemin); box-shadow: inset 3px 0 0 var(--ana); }
    html.menu-dar .menu-grup.acik > .menu-alt { display: none; }
    html.menu-dar .menu-alt {
        position: absolute; left: 55px; top: 0; z-index: 35; width: 230px; background: #fff;
        border: 1px solid var(--cizgi); border-left: 3px solid var(--ana); box-shadow: 8px 8px 24px rgba(20, 30, 50, .12);
    }
    html.menu-dar .menu-grup:hover > .menu-alt, html.menu-dar .menu-grup:focus-within > .menu-alt { display: block; }
    html.menu-dar .menu-alt-baslik { display: block; padding: 10px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: var(--ana-yazi); background: var(--tablo-baslik); border-bottom: 1px solid var(--tablo-cizgi); }
    html.menu-dar .menu-alt a { padding-left: 14px; }
}

/* Form yerleşimleri (2. aşama) */
.form-satir { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.form-satir > .alan { flex: 1 1 200px; }
.form-dikey { display: flex; flex-direction: column; gap: 12px; }
.paylasim .kutu-govde .satir-dugmeler { align-items: flex-start; }
.bildirim.bilgi { background: var(--ana-zemin); border-color: var(--tablo-cizgi); color: var(--yazi-koyu); }
.metin-sag { text-align: right; }
.kucuk-tablo td, .kucuk-tablo th { padding: 6px 10px; }
.sekmeli-gizli[hidden] { display: none !important; }
.ilerleme { height: 8px; background: var(--cizgi-ince); position: relative; }
.ilerleme > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ana); }
.ilerleme.yesil > span { background: var(--yesil); }
.ilerleme.sari > span { background: var(--sari); }
.ilerleme.kirmizi > span { background: var(--kirmizi); }
.huni { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; }
.huni-katman { color: #fff; background: var(--ana); padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; min-width: 240px; font-size: 13px; }
.yazdir-sayfa { background: #fff; max-width: 820px; margin: 0 auto; padding: 32px; color: #111; }
@media print { .yazdir-gizle { display: none !important; } .yazdir-sayfa { padding: 0; max-width: none; } }
.bildirim-satir { color: inherit; text-decoration: none; }
.bildirim-satir:hover { background: var(--kart-alt); }
.bildirim-satir.okunmamis { background: var(--ana-zemin); }
.pano-ekle { display: block; margin: 8px; padding: 6px; text-align: center; font-size: 12.5px; color: var(--yazi-soluk); border: 1px dashed var(--cizgi); text-decoration: none; }
.pano-ekle:hover { color: var(--ana-yazi); border-color: var(--ana); }
.pano-sutun > .pano-ekle:last-child { margin-top: auto; }
.kirmizi-yazi { color: var(--kirmizi); }
.yesil-yazi { color: var(--yesil); }
.sekme-dugme .dugme { min-width: 64px; justify-content: center; }
.sutun { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.asama-cubugu { display: flex; flex-wrap: wrap; align-items: stretch; padding: 12px; gap: 4px; }
.asama-cubugu form { flex: 1 1 110px; display: flex; }
.asama { flex: 1; border: 1px solid var(--cizgi); background: var(--kart-alt); color: var(--yazi); padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.asama small { font-size: 11px; color: var(--yazi-soluk); }
.asama.gecti { background: var(--ana-zemin); color: var(--ana-yazi); }
.asama.secili { background: var(--ana); border-color: var(--ana); color: #fff; }
.asama.secili small { color: rgba(255,255,255,.82); }
.asama:disabled { cursor: default; }
.asama-sonuc { display: flex; align-items: center; padding-left: 8px; }
.dugme.yesil { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.satir-acilir > summary { list-style: none; }
.satir-acilir > summary::-webkit-details-marker { display: none; }
.satir-acilir[open] { flex-basis: 100%; }
a.ozet { color: inherit; text-decoration: none; } a.ozet:hover { border-color: var(--tablo-cizgi); }
.tur-etiket { font-size: 12px; padding: 2px 6px; background: var(--kart-alt); border: 1px solid var(--cizgi); white-space: nowrap; }
.tur-etiket.tur-arama { border-left: 3px solid var(--yesil); } .tur-etiket.tur-toplanti { border-left: 3px solid var(--ana); } .tur-etiket.tur-gorev { border-left: 3px solid var(--sari); }
.tur-etiket.tur-eposta { border-left: 3px solid var(--yazi-soluk); } .tur-etiket.tur-ziyaret { border-left: 3px solid var(--ana-koyu); } .tur-etiket.tur-hatirlatma { border-left: 3px solid var(--kirmizi); } .tur-etiket.tur-whatsapp { border-left: 3px solid #1f9d55; }
.takvim.hafta .takvim-hucre { min-height: 320px; }
.takvim-ekle { color: var(--yazi-soluk); text-decoration: none; font-weight: 400; padding: 0 4px; }
.takvim-ekle:hover { color: var(--ana-yazi); }
.planlama td { vertical-align: top; min-width: 120px; }
.planlama .takvim-is { margin-bottom: 3px; }

/* Girişsiz sayfalar (web formu, anket, KVKK, müşteri portalı) */
.acik-sayfa { background: var(--zemin); min-height: 100vh; display: flex; flex-direction: column; }
.acik-ust { background: #fff; border-bottom: 3px solid transparent; border-image: var(--bant-gradyan) 1; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--yazi-koyu); font-size: 16px; }
.acik-govde { width: 100%; max-width: 680px; margin: 24px auto; padding: 0 16px; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.acik-govde.genis { max-width: 1000px; }
.acik-alt { text-align: center; font-size: 12px; color: var(--yazi-soluk); padding: 16px; }
.anket-soru { padding: 14px 16px; border-bottom: 1px solid var(--cizgi-ince); }
.anket-soru > b { display: block; margin-bottom: 8px; color: var(--yazi-koyu); }
.puan-secim { display: flex; gap: 6px; flex-wrap: wrap; }
.puan-secim label { border: 1px solid var(--cizgi); padding: 6px 12px; cursor: pointer; background: #fff; }
.puan-secim input { margin-right: 4px; }
.tahmin-grafik { display: flex; gap: 6px; align-items: flex-end; padding: 16px; height: 220px; overflow-x: auto; }
.tahmin-sutun { flex: 1 0 54px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.tahmin-sutun small { font-size: 11px; color: var(--yazi-soluk); white-space: nowrap; }
.tahmin-cubuklar { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--cizgi); }
.tahmin-cubuklar .cubuk { width: 14px; min-height: 1px; }
.cubuk.toplam { background: var(--tablo-cizgi); } .cubuk.agirlikli { background: var(--ana); } .cubuk.kazanilan { background: var(--yesil); }
.tablo tfoot th { background: var(--kart-alt); }
.kpi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.kpi-olcut { border-bottom: 1px solid var(--cizgi-ince); font-size: 13px; }
.kpi-skor { font-size: 18px; }
.satir-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr auto auto; gap: 8px; align-items: center; padding: 8px 12px; }
.satir-form .girdi, .satir-form .secim { height: 32px; }
@media (max-width: 760px) { .satir-form { grid-template-columns: 1fr 1fr; } }
.izgara-2 > *, .izgara-4 > * { min-width: 0; }
.huni-katman { min-width: min(240px, 100%); }

/* Satır işlem simgeleri (listelerin sağındaki Düzenle / Sil / İndir …) */
.islemler { white-space: nowrap; }
.islemler form { display: inline; margin: 0; }
.ikon-dugme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-left: 4px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--ana-yazi); border-radius: var(--kose); cursor: pointer; vertical-align: middle; text-decoration: none; }
.ikon-dugme .ikon { width: 16px; height: 16px; }
.ikon-dugme:hover { background: var(--ana-zemin); border-color: var(--tablo-cizgi); color: var(--ana-koyu); }
.ikon-dugme.tehlike { color: var(--kirmizi); }
.ikon-dugme.tehlike:hover { background: var(--kirmizi-zemin); border-color: var(--kirmizi); }
.ikon-dugme.yesil { color: var(--yesil); }
.ikon-dugme.yesil:hover { background: var(--yesil-zemin); border-color: var(--yesil); }
.tablo td.islemler a.ikon-dugme, .tablo td.islemler button.ikon-dugme { margin-left: 4px; }
.ikon-dugme.secili { background: var(--ana-zemin); }


/* SMS / sanal POS firması alanları */
.surucu-grup { border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 10px 12px 4px; margin: 10px 0 0; min-width: 0; }
.surucu-grup legend { font-weight: 600; padding: 0 4px; }
.zorunlu { color: var(--kirmizi); }
.rozet.turuncu { background: var(--sari-zemin); color: var(--sari); }

/* Ödeme sayfaları (/ode/{kod}) */
.odeme-kutu { max-width: 460px; margin: 0 auto; text-align: center; }
.odeme-kutu h1 { font-size: 19px; margin: 14px 0 6px; }
.odeme-firma { font-weight: 700; font-size: 16px; margin-top: 14px; }
.odeme-tutar { font-size: 30px; font-weight: 700; color: var(--ana); margin: 10px 0 2px; }
.odeme-dugme { width: 100%; justify-content: center; margin: 16px 0 6px; padding: 12px; font-size: 15px; }
.odeme-simge { width: 54px; height: 54px; border-radius: 50%; margin: 16px auto 0; display: grid; place-items: center; font-size: 26px; font-weight: 700; background: var(--ana-zemin); color: var(--ana); }
.odeme-simge.yesil { background: var(--yesil-zemin); color: var(--yesil); }
.odeme-simge.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.odeme-cerceve { width: 100%; min-height: 560px; border: 1px solid var(--cizgi); }
.dogrulama-kodu { letter-spacing: 8px; font-size: 20px; text-align: center; }

/* İç mesajlaşma */
.mesaj-satir { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--cizgi-ince); color: var(--yazi); text-decoration: none; }
.mesaj-satir:hover { background: var(--kart-alt); }
.mesaj-satir.yeni { background: var(--ana-zemin); }
.mesaj-satir.yeni b { color: var(--yazi-koyu); font-weight: 700; }
.mesaj-satir-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mesaj-satir-ust { display: flex; justify-content: space-between; gap: 10px; }
.mesaj-satir-ust b { color: var(--yazi-koyu); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesaj-satir-ust small { color: var(--yazi-soluk); flex: none; }
.mesaj-onizleme { color: var(--yazi-soluk); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesaj-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--ana); flex: none; margin-top: 6px; }
.mesaj-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.mesaj-akis .kutu-govde { display: flex; flex-direction: column; gap: 12px; }
.mesaj-balon { display: flex; gap: 10px; align-items: flex-start; max-width: 82%; }
.mesaj-balon > div { background: var(--kart-alt); border: 1px solid var(--cizgi); padding: 8px 12px; border-radius: var(--kose); min-width: 0; }
.mesaj-balon.ben { align-self: flex-end; }
.mesaj-balon.ben > div { background: var(--ana-zemin); border-color: var(--tablo-cizgi); }
.mesaj-balon-ust { font-size: 12px; margin-bottom: 3px; } .mesaj-balon-ust small { color: var(--yazi-soluk); }
.mesaj-balon-metin { color: var(--yazi-koyu); line-height: 1.5; overflow-wrap: anywhere; }
.mesaj-yeni-cizgi { display: flex; align-items: center; gap: 10px; color: var(--ana-yazi); font-size: 12px; font-weight: 600; }
.mesaj-yeni-cizgi::before, .mesaj-yeni-cizgi::after { content: ""; flex: 1; border-top: 1px solid var(--tablo-cizgi); }
.mesaj-yanit { display: flex; gap: 8px; align-items: flex-end; }
.mesaj-yanit textarea { flex: 1; min-width: 0; resize: vertical; }
.mesaj-kisi { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.mesaj-alicilar { border: 1px solid var(--cizgi); padding: 8px; border-radius: var(--kose); }
.mesaj-alicilar.hatali { border-color: var(--kirmizi); }
.mesaj-alici-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; max-height: 240px; overflow-y: auto; margin-top: 8px; }
.mesaj-alici-liste [hidden] { display: none; }
@media (max-width: 860px) { .mesaj-duzen { grid-template-columns: 1fr; } .mesaj-balon { max-width: 100%; } }
.yardim-konu { border-top: 1px solid var(--cizgi-ince); padding: 0 16px; }
.yardim-konu summary { padding: 11px 0; cursor: pointer; font-weight: 600; color: var(--yazi-koyu); display: flex; justify-content: space-between; gap: 10px; }
.yardim-konu summary a { font-weight: 400; font-size: 13px; }
.yardim-konu ol { margin: 0 0 8px; padding-left: 20px; line-height: 1.7; }
.bulten-satir { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--cizgi); border-left: 3px solid var(--ana); padding: 10px 14px; margin-bottom: 12px; border-radius: var(--kose); }
.abonelik-bant { margin-bottom: 12px; }
.kutu-baslik .ikon { vertical-align: -3px; }

/* Görünüm ve tema */
.tema-secenekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tema-secenek { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 10px; cursor: pointer; background: #fff; position: relative; min-width: 0; }
.tema-secenek > input[type=radio] { position: absolute; opacity: 0; }
.tema-secenek:has(input[type=radio]:checked) { border: 2px solid var(--t); padding: 9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 18%, transparent); }
.tema-secenek:has(input[type=radio]:focus-visible) { outline: 2px solid var(--t); outline-offset: 2px; }
.tema-secenek > span:last-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; color: var(--yazi-koyu); }
.tema-secenek input[type=color] { width: 34px; height: 24px; border: 1px solid var(--cizgi); padding: 0; background: none; cursor: pointer; }
@media (max-width: 600px) { .tema-secenekler { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tema-secenek { padding: 6px; font-size: 12px; } .tema-secenek:has(input[type=radio]:checked) { padding: 5px; } .tema-secenek > span:last-child { font-size: 12px; flex-wrap: wrap; } }
.tema-ornek { display: grid; grid-template-columns: 28% 1fr; grid-template-rows: 10px 1fr; height: 54px; border: 1px solid var(--cizgi); background: #f3f4f6; overflow: hidden; }
.tema-ornek i:nth-child(1) { grid-column: 1 / 3; background: var(--t); }
.tema-ornek i:nth-child(2) { background: #fff; border-right: 1px solid var(--cizgi); box-shadow: inset 3px 0 0 var(--t); margin-top: 8px; height: 10px; }
.tema-ornek i:nth-child(3) { margin: 8px; background: color-mix(in srgb, var(--t) 14%, #fff); border-top: 3px solid var(--t); }
.yasal-metin h1 { font-size: 20px; margin: 0 0 12px; color: var(--yazi-koyu); } .yasal-metin h2 { font-size: 15px; margin: 18px 0 6px; color: var(--yazi-koyu); } .yasal-metin p, .yasal-metin li { line-height: 1.6; }

.konum-kap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .konum-kap .ikon { width: 14px; height: 14px; vertical-align: -2px; }
.arama-kutu-kap { position: fixed; left: 16px; bottom: 16px; z-index: 9998; max-width: calc(100vw - 32px); }
.arama-kutu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--yesil); box-shadow: 0 10px 30px rgba(13,42,68,.18); padding: 10px 14px; }
.giris-firma { text-align: center; padding: 4px 0 6px; border-bottom: 1px solid var(--cizgi-ince); margin-bottom: 4px; } .giris-firma img { max-height: 60px; max-width: 100%; } .giris-firma b { font-size: 16px; color: var(--yazi-koyu); }
.yz-taslak summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; } .yz-taslak summary::-webkit-details-marker { display: none; }
.yz-taslak-govde { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 10px; background: var(--ana-acik); border: 1px solid var(--ana-cizgi); } .yz-taslak-govde .girdi { flex: 1 1 260px; min-width: 0; } .yz-taslak-govde .alt-bilgi { flex-basis: 100%; }