/* ══ Tasarım belirteçleri ════════════════════════════════════════════════════
   TEK KAYNAK. Yeni bir ekran yazarken font-size ELLE VERİLMEZ; aşağıdaki
   ölçekten seçilir. Üç ayrı sistemin (px / rem / Bootstrap varsayılanı) yan
   yana birikmesi bu yüzden oldu — 21.09.2026'da toplandı. */

:root {
    /* ── Marka renkleri (AselLogo.jpeg'ten örneklendi) ── */
    --asel-mor-koyu: #5e2a7e;
    --asel-mor: #8b4fa5;
    --asel-lacivert: #23408f;
    --asel-turkuaz: #22bfef;
    --asel-metin: #2c2f3a;
    --asel-soluk: #6c757d;
    --asel-cizgi: #dfe3e8;

    /* ── Yazı ölçeği ──────────────────────────────────────────────────────
       Hepsi REM: px kullanıcının tarayıcı yazı boyutu ayarını dinlemez, rem
       dinler. 40 kişinin günde 8 saat baktığı, sahada telefondan okunan bir
       sistemde "yazıyı büyüt" çalışmak zorunda. (16px taban varsayımıyla.) */
    --yazi-xs:  0.75rem;    /* 12px · yardım metni, rozet, dipnot        */
    --yazi-sm:  0.875rem;   /* 14px · tablo, ikincil metin, etiket       */
    --yazi-md:  1rem;       /* 16px · gövde, form girdisi, düğme         */
    --yazi-lg:  1.25rem;    /* 20px · bölüm başlığı, marka alt yazısı    */
    --yazi-xl:  1.75rem;    /* 28px · sayfa başlığı                      */
    --yazi-2xl: 2.25rem;    /* 36px · giriş ekranı marka yazısı          */
}

/* ══ Temel tipografi ═════════════════════════════════════════════════════════
   Bootstrap'ın varsayılanları ölçeğimize çekiliyor. Böylece ekranlarda
   ayrıca font-size yazmaya gerek kalmıyor. */

body {
    font-size: var(--yazi-md);
    color: var(--asel-metin);
}

h1 { font-size: var(--yazi-xl); font-weight: 600; }
h2 { font-size: var(--yazi-lg); font-weight: 600; }
h3, h4, h5, h6 { font-size: var(--yazi-md); font-weight: 600; }

.lead { font-size: var(--yazi-lg); font-weight: 400; }
.small, small, .form-text, .badge, figcaption { font-size: var(--yazi-sm); }
.table { font-size: var(--yazi-sm); }
.btn { font-size: var(--yazi-md); }

/* ══ Hesap menüsü (sağ üst) ══════════════════════════════════════════════════
   Ana menü işin menüsü; şifre değiştirmek ve çıkmak kişinin işleri.
   Açılır menüyü Bootstrap yönetiyor (dış tıklama, Escape, klavye, ARIA). */
.hesap-menu {
    margin-left: auto;
}

.hesap-dugme {
    font-size: var(--yazi-sm);
    font-weight: 600;
    color: var(--asel-metin);
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.hesap-dugme:hover,
.hesap-dugme[aria-expanded="true"] {
    background: #fff;
    border-color: var(--asel-cizgi);
    color: var(--asel-lacivert);
}

.hesap-menu .dropdown-menu {
    font-size: var(--yazi-sm);
    min-width: 210px;
}

/* Çıkış bir form düğmesi (çerez ancak HTTP isteğinde silinir); menü öğesi gibi görünsün. */
.hesap-menu form { margin: 0; }
.hesap-menu .dropdown-item { width: 100%; text-align: left; }

@media (max-width: 640px) {
    .hesap-dugme {
        max-width: 48vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ══ Liste satırı seçimi ═════════════════════════════════════════════════════
   Tüm arama/liste ekranlarının ortak kuralı (ROTA2'deki düzen).
   Yarı saydam turuncu: altındaki hover/çizgili zeminin üstünde de okunur.
   !important şart — Bootstrap'ın .table-hover kuralını ezmesi gerekiyor. */
tr.secili > td {
    background-color: rgba(255, 152, 0, .30) !important;
}

/* Tek tık seçer, çift tık detaya girer — imleç bunu ele versin. */
.liste-tablo tbody tr {
    cursor: pointer;
    /* Cift tikta tarayicinin metni secmesi hem cirkin hem yaniltici. */
    user-select: none;
}

/* Tek tük istisnalar için — Bootstrap'ın fs-1..fs-6'sı ölçeğimizle örtüşmüyor,
   onun yerine bunlar kullanılır. */
.yazi-xs { font-size: var(--yazi-xs); }
.yazi-sm { font-size: var(--yazi-sm); }
.yazi-md { font-size: var(--yazi-md); }
.yazi-lg { font-size: var(--yazi-lg); }

/* ⚠️ Bu ikisi 26.09.2026'ya kadar YOKTU. Panodaki sayaclar "yazi-2xl"
   sinifini kullaniyordu ama sinif tanimsizdi; degisken vardi, sinif yoktu.
   Sayilar 36px yerine govde boyutunda ciziliyordu. Para kutulari da ayni
   olcegi kullaninca fark edildi. */
.yazi-xl  { font-size: var(--yazi-xl); }
.yazi-2xl { font-size: var(--yazi-2xl); }

/* ⚠️ Form girdileri 16px'in ALTINA düşmemeli: iOS Safari alana dokununca
   sayfayı yakınlaştırıyor ve kullanıcı her seferinde geri toparlamak zorunda
   kalıyor. Sahadaki formen telefondan girecek. */
.form-control, .form-select { font-size: var(--yazi-md); }

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;

    /* Yan bosluk. Onceden markup'ta px-4 (1.5rem) idi; telefonda iki yandan
       48px yiyordu ve 375px ekranda listeler o yuzden sagdan tasiyordu.
       Buraya alindi ki dar ekranda kucultebilelim. */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Telefon: 0.75rem. Kenarda hala nefes payi var ama liste sutunlarina
   24px geri veriliyor - Durum rozetinin sigmasi buna bagliydi. */
@media (max-width: 575.98px) {
    .content {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

h1:focus {
    outline: none;
}

/* ══ Giriş ekranı ════════════════════════════════════════════════════════════
   İki bölmeli: solda marka, sağda form. Renkler AselLogo.jpeg'ten örneklendi.
   Telefonda tek sütuna iner — sahadaki formen buraya cepten girecek. */

.giris-zemin {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: #eef0f4;
}

.giris-panel {
    display: flex;
    width: 100%;
    max-width: 880px;
    min-height: 520px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(30, 20, 60, .18);
}

/* ── Sol: marka ───────────────────────────────────────────────────────────── */
.giris-sol {
    position: relative;
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 36px;
    color: #fff;
    background: linear-gradient(150deg,
        var(--asel-mor-koyu) 0%,
        var(--asel-mor) 42%,
        var(--asel-lacivert) 78%,
        #1b3578 100%);
    overflow: hidden;
}

/* Logodaki dalgayı andıran yumuşak bir turkuaz iz. Sadece dekor. */
.giris-sol::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -220px;
    width: 460px;
    height: 460px;
    /* Kenari olmayan bir isima: yuzde 100'e kadar sonmezse "top" gibi gorunuyor. */
    background: radial-gradient(circle,
        rgba(34, 191, 239, .40) 0%,
        rgba(34, 191, 239, .18) 35%,
        rgba(34, 191, 239, .06) 60%,
        transparent 100%);
    pointer-events: none;
}

.giris-sol-icerik { position: relative; z-index: 1; }

.giris-sol-ad {
    display: block;
    font-size: var(--yazi-2xl);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.1;
}

.giris-sol-alt {
    display: block;
    margin-top: 6px;
    font-size: var(--yazi-sm);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.giris-sol-slogan {
    margin: 26px 0 0;
    font-size: var(--yazi-md);
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

.giris-sol-dip {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 28px;
    font-size: var(--yazi-xs);
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

/* ── Sağ: form ────────────────────────────────────────────────────────────── */
.giris-sag {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 40px;
    color: var(--asel-metin);
}

.giris-logo {
    width: 128px;
    height: auto;
    align-self: flex-start;
    margin-bottom: 18px;
}

.giris-baslik {
    /* h1 ama sayfa başlığı marka panelinde; burada bölüm başlığı ağırlığında. */
    margin: 0 0 22px;
    font-size: var(--yazi-lg);
    font-weight: 600;
}

.giris-etiket {
    display: block;
    font-size: var(--yazi-sm);
    color: #495057;
    margin-bottom: 5px;
}

.giris-girdi {
    width: 100%;
    /* Bkz. yukarıdaki iOS Safari notu — bu değer 16px'in altına inmemeli. */
    font-size: var(--yazi-md);
    padding: 11px 13px;
    margin-bottom: 16px;
    border: 1px solid var(--asel-cizgi);
    border-radius: 8px;
    background: #fbfbfd;
}

.giris-girdi:focus {
    outline: none;
    background: #fff;
    border-color: var(--asel-mor);
    box-shadow: 0 0 0 3px rgba(139, 79, 165, .16);
}

.giris-secenekler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 20px;
    font-size: var(--yazi-sm);
}

.giris-hatirla {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: #495057;
}

/* Eldivenli parmak için dokunma hedefi büyütüldü. */
.giris-hatirla input {
    width: 17px;
    height: 17px;
    accent-color: var(--asel-mor);
    cursor: pointer;
}

.giris-baglanti {
    color: var(--asel-lacivert);
    text-decoration: none;
}

.giris-baglanti:hover { text-decoration: underline; }

.giris-dugme {
    display: block;
    width: 100%;
    /* 44px: eldivenli parmağın ıskalamayacağı en küçük hedef. */
    min-height: 46px;
    font-size: var(--yazi-md);
    font-weight: 600;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(100deg, var(--asel-mor) 0%, var(--asel-lacivert) 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter .15s ease;
}

.giris-dugme:hover { filter: brightness(1.08); }

.giris-dugme-baglanti {
    line-height: 46px;
    margin-top: 6px;
}

.giris-hata,
.giris-bilgi {
    border-radius: 8px;
    padding: 10px 13px;
    margin-bottom: 16px;
    font-size: var(--yazi-sm);
}

.giris-hata {
    background: #fdecee;
    color: #9b2430;
    border: 1px solid #f6c6cc;
}

.giris-bilgi {
    background: #e8f6ec;
    color: #1c6b34;
    border: 1px solid #bfe3c9;
}

.giris-aciklama {
    margin: 0 0 14px;
    font-size: var(--yazi-md);
    line-height: 1.6;
    color: #495057;
}

.giris-aciklama-kucuk {
    font-size: var(--yazi-sm);
    color: var(--asel-soluk);
}

.giris-not {
    margin: 20px 0 0;
    font-size: var(--yazi-xs);
    color: var(--asel-soluk);
}

/* ── Telefon ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .giris-zemin { padding: 0; align-items: stretch; }

    .giris-panel {
        flex-direction: column;
        min-height: 100dvh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Marka paneli ince bir banda iner; ekranı forma bırakır. */
    .giris-sol {
        flex: 0 0 auto;
        padding: 26px 24px 22px;
    }

    .giris-sol::after { right: -150px; bottom: -190px; }
    .giris-sol-ad { font-size: var(--yazi-xl); }
    .giris-sol-slogan,
    .giris-sol-dip { display: none; }

    /* Dikey ortalama masaustunde iyi; telefonda marka bandinin altinda
       kocaman bir bosluk birakiyor. Icerik yukaridan aksin. */
    .giris-sag {
        justify-content: flex-start;
        padding: 26px 24px 36px;
    }

    .giris-logo { width: 96px; margin-bottom: 14px; }
    .giris-baslik { font-size: var(--yazi-lg); margin-bottom: 18px; }
}

/* Teklif rozeti. Bootstrap'in sekiz renginden biri degil, markanin moru:
   teklif henuz IS DEGIL ve listede diger durumlardan ayri okunmali. */
.badge.rozet-teklif {
    background: var(--asel-mor);
    color: #fff;
}

/* Kesif rozeti. Teklifle ayni aileden ama SOLUK: kesif tekliften de erken,
   heniz bir sayi bile yok. Ayni moru dolu kullanmak ikisini karistirirdi. */
.badge.rozet-kesif {
    background: transparent;
    color: var(--asel-mor);
    border: 1px solid var(--asel-mor);
}

/* Oncelik isareti. Proje adinin ONUNDE duruyor ve yalnizca oncelik 0'dan
   buyukse ciziliyor — normal projede hic yer kaplamamali, yoksa isaret
   isaret olmaktan cikar.

   Durum rozetinden KUCUK ve farkli bicimde: ikisi ayni satirda yan yana
   goruniyor, ayni gorunselerdi hangisinin ne oldugu okunmazdi. */
.rozet-oncelik {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 1px;
    white-space: nowrap;
    background: #fff3cd;
    color: #8a6100;
    border: 1px solid #ffe08a;
}

.rozet-oncelik.acil {
    background: #f8d7da;
    color: #a32430;
    border-color: #f2b8bd;
}

/* Panodaki Teklif sayaci. Teklif rozetiyle ayni renk: iki ekranda ayni sey
   ayni renkle okunsun. */
.metin-mor { color: var(--asel-mor); }

/* ── Kalem satırındaki komutlar ───────────────────────────────────────────
   Uzun listede her satırda dört düğme durmak gürültü; yalnızca üzerinde
   olunan satırda görünsünler.

   visibility KULLANILIYOR, display DEĞİL: display:none yer kaplamaz ve
   sütun genişliği satırdan satıra oynar, tablo hoplar. visibility yeri
   ayırır, ayrıca gizliyken düğmeyi sekme sırasından ve erişilebilirlik
   ağacından çıkarır — görünmeyen düğmeye odak gitmez. */
/* Asgari genislik SART: dar ekranda tarayici sutunlari sikistiriyor ve en
   cok KALEM ADI eziliyor — tablodaki en onemli sutun. Genislik verilince
   table-responsive devreye girip yatay kaydiriyor. */
/* Onayli sutunu (7rem) md ve ustunde gorunuyor; asgari genislik ona gore. */
.kalem-tablo { min-width: 61rem; }

/* Dugmeler HER ZAMAN tek satirda.
   ⚠️ Once telefonda sarmasi serbest birakilmisti ("zaten iki dugme var").
      Yapilan sutunu eklenince komut sutunu sikisti ve iki dugme ALT ALTA
      dustu: ana kalem satirlari iki kat uzadi, alt kalemler normal kaldi,
      liste darmadagin gorundu. Telefondan bildirildi 23.09.2026.
   Asgari genislik asagida min-width ile garanti ediliyor; sutun artik
   dugmelerin altina inemiyor. */
.kalem-tablo .kalem-komut { white-space: nowrap; }

.kalem-tablo .kalem-komut { visibility: hidden; }

/* :focus-within ŞART. Klavyeyle gezen kişi satırın metin kutusuna geldiğinde
   komutlar görünür olur ve oradan sekmeyle düğmelere ulaşabilir. Yalnızca
   :hover olsaydı düğmelere klavyeyle hiç erişilemezdi. */
.kalem-tablo tbody tr:hover .kalem-komut,
.kalem-tablo tbody tr:focus-within .kalem-komut { visibility: visible; }

/* Dokunmatik ekranda hover YOKTUR. Sahadaki kişi telefondan bakacak;
   orada komutlar her zaman görünmeli, yoksa hiç ulaşamaz. */
@media (hover: none) {
    .kalem-tablo .kalem-komut { visibility: visible; }
}

/* ── Telefon ince ayarlari (23.09.2026) ──────────────────────────────────
   Sahadaki formen telefondan bakacak; olculdu ve duzeltildi. */

/* Proje kodu (2026-RN-0002) dar ekranda UC SATIRA sariyordu. Kod bir
   kimliktir; bolunurse okunmaz ve liste da darmadagin gorunur. */
td code,
th code {
    white-space: nowrap;
}

/* Esnek kutu icindeki bir ogenin kirpilabilmesi icin min-width:0 SART;
   varsayilan "auto" oge icerigi kadar yer kaplar ve yaninda kalan
   dugmeler alt satira duser. Ust seritteki basliklarda kullaniliyor. */
.daralabilir {
    min-width: 0;
}

/* ── Kalem tablosu sutun genislikleri ───────────────────────────────────
   Genis ekranda kalem adi bol yer ister: sozlesme metni uzun olur
   ("1600 kVA kuru tip trafo montaji"). Telefonda ayni olcu tabloyu
   ekranin iki kati genislige cikariyordu ve MIKTAR sutunu ekran disinda
   kaliyordu — sahadaki kisinin telefonda bakacagi ASIL sey o. */
.kalem-tablo .k-no     { width: 4rem; }
.kalem-tablo .k-poz    { width: 7rem; }
.kalem-tablo .k-ad     { min-width: 20rem; }
.kalem-tablo .k-birim  { width: 7rem; }
.kalem-tablo .k-miktar { width: 8rem; }
.kalem-tablo .k-yapilan { width: 7rem; }
.kalem-tablo .k-onayli  { width: 7rem; }
.kalem-tablo .k-komut  { width: 10rem; }

/* ── Fiyat sütunları (26.09.2026) ─────────────────────────────────────────
   Yalnızca fiyat yetkisi olana çiziliyor; formenin tablosu DEĞİŞMEDİ.
   Tablo iki sütun genişlediği için asgari genişlik de büyüyor — yoksa
   tarayıcı sütunları sıkıştırır ve yine en çok kalem adı ezilir. */
.kalem-tablo.kalem-fiyatli { min-width: 79rem; }
.kalem-tablo .k-fiyat  { width: 12rem; }
.kalem-tablo .k-tutar  { width: 9rem; }

/* Fiyat kutusu + para birimi yan yana. Seçim kutusu "EUR"u KIRPMASIN:
   form-select'in sağındaki ok simgesi ~1.5rem yiyor. */
.fiyat-kutusu .para-secimi { flex: 0 0 4.6rem; min-width: 4.6rem; }
.fiyat-kutusu input        { min-width: 0; }

/* ── Bölümler: ana satış + ilave işler (26.09.2026) ──────────────────────
   Şerit tablonun üstünde; her düğmede kalem sayısı ve (fiyat yetkisi varsa)
   büyüme oranı. Oran YEŞİL: Gökhan bey "adam buraya girdiği zaman onu motive
   etsin" dedi — büyüme iyi haber. */
.bolum-seridi .bolum-sayi { margin-left: 0.3rem; font-size: 0.8em; opacity: 0.75; }
.bolum-seridi .bolum-oran { margin-left: 0.35rem; font-weight: 600; }
.bolum-seridi .btn-outline-secondary .bolum-oran,
.bolum-buyume .bolum-oran { color: #157347; }

@media (prefers-color-scheme: dark) {
    .bolum-seridi .btn-outline-secondary .bolum-oran,
    .bolum-buyume .bolum-oran { color: #75d19a; }
}

/* Para birimi başına toplam, tablonun altında. */
.kalem-toplam { font-size: var(--yazi-md, 1rem); }

/* Kalem arama kutusu: tam genislik degil — telefonda ekrani kaplar,
   genis ekranda gozu tablodan uzaklastirir. */
.kalem-arama { max-width: 24rem; }

/* Yan menulu duzende <main> esnek kutu ogesi ve min-width'i "auto":
   icindeki genis tablo (kalem 79rem, carsaf 72rem) table-responsive'in
   ICINDE olsa bile main'i o genislige itiyordu — olculdu 26.09.2026,
   1009 px pencerede main 1354 px; Kaydet dugmesi ekran disindaydi.
   min-width:0 ile tablo kendi kutusunda kayiyor, sayfa kaymiyor. */
main { min-width: 0; }

/* Hakedis carsafi. min-width SART (bkz. kalem-tablo): dar ekranda sayilar
   sikisip alt alta kiriliyordu. Telefonda yatay kayiyor. */
.hakedis-tablo { min-width: 44rem; }
.hakedis-tablo.hakedis-fiyatli { min-width: 72rem; }
.hakedis-tablo .h-no     { width: 4rem; }
.hakedis-tablo .h-poz    { width: 7rem; }
.hakedis-tablo .h-ad     { min-width: 16rem; }
.hakedis-tablo .h-birim  { width: 4rem; }
.hakedis-tablo .h-fiyat  { width: 9rem; }
.hakedis-tablo .h-miktar { width: 6.5rem; }
.hakedis-tablo .h-tutar  { width: 8.5rem; }
.hakedis-toplam th, .hakedis-toplam td { padding-left: 1rem; }

/* Belge listesi: AD sutunu yer kazansin. Oteki sutunlar icerigi kadar
   (width:1% + nowrap); sabit genislik verilince 800 px'te ad sutunu harf
   harf kiriliyordu — olculdu 26.09.2026. */
.belge-tablo .belge-ad { min-width: 12rem; overflow-wrap: anywhere; }
.belge-tablo .b-dar    { width: 1%; white-space: nowrap; }

/* Uzayan liste (ilk kullanan: servis formlari): sabit yukseklik, icinde
   kayar; baslik satiri ustte sabit. Altindaki bolume (secili formun ekrani)
   liste ne kadar uzarsa uzasin bir kaydirmada ulasiliyor.
   max(): kisa ekranda (yatay telefon) bile birkac satir gorunsun. */
.kayan-liste { max-height: max(16rem, 45vh); overflow-y: auto; border-bottom: 1px solid var(--bs-border-color-translucent); }
.kayan-liste thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); }

/* ── Is programi (Pages/Takvim/IsProgrami) ───────────────────────────────
   Masaustu kisi × gun izgarasi; telefonda gun gun liste. Tur renkleri
   hem acik hem koyu temada okunur olsun diye Bootstrap'in "subtle"
   degiskenleri. */
.ip-tablo { table-layout: fixed; min-width: 56rem; }
.ip-tablo th, .ip-tablo td { vertical-align: top; }
.ip-tablo thead th { font-weight: 600; font-size: .85rem; white-space: nowrap; }
.ip-tablo .ip-kisi { width: 11rem; font-size: .85rem; }
.ip-tablo td { padding: .25rem; }
.ip-bugun { background: rgba(var(--bs-primary-rgb), .07) !important; }
.ip-tablo thead th.ip-bugun { color: var(--bs-primary); }
.ip-haftasonu { background: var(--bs-tertiary-bg); }
/* Izgarada sutun dar (~7rem): saat kendi satirinda, ozet en fazla uc
   satir — tek satira kirpilinca yalniz saat okunuyordu (olculdu, 1280 px). */
.ip-kayit {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    width: 100%; text-align: left; margin-bottom: .2rem;
    border: 0; border-left: 3px solid; border-radius: .25rem;
    padding: .1rem .3rem; font-size: .78rem; line-height: 1.25;
    overflow: hidden; overflow-wrap: anywhere; color: inherit;
}
.ip-kayit .ip-saat { display: block; font-weight: 600; }
.ip-kayit.ip-genis { display: block; font-size: .85rem; padding: .25rem .4rem; }
.ip-kayit.ip-genis .ip-saat, .ip-kayit .ip-ad { display: inline; margin-right: .3rem; }
.ip-kayit.ip-lejant { display: inline-block; width: auto; margin: 0; }
/* Is emri: ziyaretten acilan servis formu, kaydin altinda. */
.ip-kayit .ip-sf { display: block; font-size: .72rem; color: var(--bs-secondary-color); }
.ip-ziyaret { background: var(--bs-primary-bg-subtle); border-left-color: var(--bs-primary); }
.ip-ofis { background: var(--bs-secondary-bg-subtle); border-left-color: var(--bs-secondary); }
.ip-santiye { background: var(--bs-warning-bg-subtle); border-left-color: var(--bs-warning); }
.ip-izin { background: var(--bs-success-bg-subtle); border-left-color: var(--bs-success); }
/* "+" hucrede silik; hucrenin ustune gelince belirginlesir. */
.ip-ekle {
    display: block; width: 100%; border: 1px dashed transparent; border-radius: .25rem;
    background: none; color: var(--bs-tertiary-color); font-size: .8rem; line-height: 1.2; padding: 0;
}
.ip-tablo td:hover .ip-ekle { border-color: var(--bs-border-color); color: var(--bs-primary); }
.ip-gun { border-bottom: 1px solid var(--bs-border-color-translucent); padding: .4rem 0; }
/* Firma takviminde departman basligi. */
.ip-tablo .ip-grup th { background: var(--bs-secondary-bg); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); padding: .2rem .4rem; }
.ip-gun.ip-bugun { border-left: 3px solid var(--bs-primary); padding-left: .4rem; }

/* ── Yukleme alani (Ortak/YuklemeAlani) ───────────────────────────────────
   Kesikli kutu; InputFile kutunun TAMAMINI gorunmez kapliyor — tiklama da
   birakma da ona gidiyor. Vurgu: wwwroot/yukleme-alani.js. */
.yukleme-alani {
    position: relative; border: 2px dashed var(--bs-border-color); border-radius: .5rem;
    background: var(--bs-body-bg); padding: 1rem; text-align: center;
    transition: border-color .15s, background-color .15s;
}
.yukleme-alani input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.yukleme-alani:hover { border-color: var(--bs-primary); }
.yukleme-alani:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }
.yukleme-alani.surukleniyor { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }
.yukleme-alani.pasif { opacity: .65; border-color: var(--bs-border-color); }
.yukleme-alani.pasif input[type=file] { cursor: progress; }
.yukleme-alani .ya-icerik { display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; }
.yukleme-alani .ya-simge { color: var(--bs-primary); flex: none; }
.yukleme-alani .ya-metin { display: flex; flex-direction: column; }
.yukleme-alani .ya-baslik { font-size: .9rem; }
.yukleme-alani .ya-aciklama { font-size: .75rem; color: var(--bs-secondary-color); }
.yukleme-alani .ya-dokunma { display: none; }
/* Dokunmatikte "surukle" anlamsiz: baska cumle. */
@media (pointer: coarse) {
    .yukleme-alani .ya-fare { display: none; }
    .yukleme-alani .ya-dokunma { display: inline; }
}
.yukleme-alani.kucuk { padding: .45rem .75rem; text-align: left; }
.yukleme-alani.kucuk .ya-icerik { flex-direction: row; justify-content: flex-start; gap: .6rem; }
.yukleme-alani.kucuk .ya-baslik { font-size: .82rem; }

/* Faturalar: bekleyen servis kutusu uzamasin; cari sutunu kirpilsin. */
.fatura-bekleyen { max-height: 12rem; overflow-y: auto; }
.fatura-cari { max-width: 16rem; }

/* Fatura altligi: duzenlenen satirlar input; dar ekranda yatay kayar. */
.fatura-tablo { min-width: 40rem; }
.fatura-tablo .f-sira  { width: 2rem; }
.fatura-tablo .f-birim { width: 6rem; }
.fatura-tablo .f-sayi  { width: 8.5rem; }
.fatura-tablo .f-komut { width: 2.5rem; }
.fatura-toplam th, .fatura-toplam td { padding-left: 1rem; }
/* Kalemden altlik: uzun listede secim kutusu kendi icinde kaysin. */
.fatura-kalem-secim { max-height: 22rem; overflow-y: auto; }

/* ── Tarih araligi (Ortak/TarihAraligi) ─────────────────────────────────
   ROTA2'deki secicinin gorunumu: kutu, altinda acilan tek aylik takvim,
   tabanda esit genislikte kisayol dugmeleri. */
.tarih-araligi { position: relative; display: inline-block; min-width: 15rem; }
.tarih-araligi .ta-kutu { display: flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; }
.tarih-araligi .ta-kutu.disabled { pointer-events: none; opacity: .6; }
.tarih-araligi .ta-etiket { color: var(--bs-secondary-color); font-size: .8em; }
.tarih-araligi .ta-deger { flex: 1; white-space: nowrap; }
.tarih-araligi .ta-temizle { border: 0; background: none; padding: 0 .2rem; line-height: 1; font-size: 1.1rem; color: var(--bs-secondary-color); }
.tarih-araligi .ta-temizle:hover { color: var(--bs-danger); }
/* Perde: disari tik = kapat + uygula. Seffaf. */
.tarih-araligi .ta-perde { position: fixed; inset: 0; z-index: 1040; }
.tarih-araligi .ta-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1041;
    width: 18.5rem; max-width: calc(100vw - 32px);
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); padding: .5rem;
}
.tarih-araligi .ta-yazarak { display: flex; gap: .3rem; align-items: center; margin-bottom: .4rem; }
.tarih-araligi .ta-yazarak input { min-width: 0; }
.tarih-araligi .ta-ay { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .9rem; }
/* touch-action: telefonda gunlerin ustunde parmakla surukleme sayfayi
   kaydirmasin, araligi secsin. */
.tarih-araligi .ta-gunler { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; touch-action: none; user-select: none; }
.tarih-araligi .ta-gunadi { text-align: center; font-size: .72rem; color: var(--bs-secondary-color); padding: .2rem 0; }
.tarih-araligi .ta-gun { border: 0; background: none; height: 2rem; font-size: .85rem; border-radius: 0; color: inherit; }
.tarih-araligi .ta-gun.disari { color: var(--bs-tertiary-color); }
.tarih-araligi .ta-gun.bugun { box-shadow: inset 0 0 0 1px var(--bs-primary); border-radius: .35rem; }
.tarih-araligi .ta-gun.aralik,
.tarih-araligi .ta-gun.onizle { background: rgba(var(--bs-primary-rgb), .15); }
.tarih-araligi .ta-gun.uc { background: var(--bs-primary); color: #fff; border-radius: .35rem; }
.tarih-araligi .ta-gun:hover { background: rgba(var(--bs-primary-rgb), .28); }
.tarih-araligi .ta-ipucu { font-size: .75rem; color: var(--bs-secondary-color); text-align: center; margin-top: .2rem; }
.tarih-araligi .ta-kisayol { display: flex; gap: .3rem; margin-top: .5rem; }
.tarih-araligi .ta-kisayol button {
    flex: 1; height: 28px; padding: 0 4px; font-size: 12px; white-space: nowrap;
    color: var(--bs-primary); background: transparent;
    border: 1px solid var(--bs-border-color); border-radius: 6px;
}
.tarih-araligi .ta-kisayol button:hover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .08); }

/* Tablet dikey: Poz gizli, tablo biraz darliyor ama hala kayiyor. */
@media (max-width: 767.98px) {
    .kalem-tablo {
        min-width: 34rem;
    }

    .kalem-tablo.kalem-fiyatli { min-width: 52rem; }
}

/* Telefon.
   ⚠️ DENENDI VE VAZGECILDI (23.09): sutunlari ekrana SIGDIRMAK. Tasma 0'a
   indi ama bu tablonun hucreleri <input>; input SARMAZ, kirpar. Kalem adlari
   "Orta ge", "OG", "Kab" diye gorundu — yatay kaydirmadan cok daha kotu.
   Dogru karar: kaydirma kalsin, ama tek basparmak hareketine insin ve HER
   sutun okunur genislikte olsun. Olculdu: tasma 286px idi, simdi ~75px. */
@media (max-width: 575.98px) {
    .kalem-tablo {
        min-width: 26rem;
    }

    .kalem-tablo .k-no      { width: 2.6rem; }
    .kalem-tablo .k-ad      { min-width: 10rem; }
    .kalem-tablo .k-birim   { width: 3.6rem; }
    .kalem-tablo .k-miktar  { width: 4.2rem; }

    /* "Yapilan" telefonda da gorunuyor; yer acmak icin ustteki sutunlar
       birer tik daraldi. Kayma artiyor ama No sutunu sabit oldugu icin
       hangi satirda olundugu kaybolmuyor. */
    .kalem-tablo .k-yapilan { width: 4.2rem; }

    /* Telefonda iki dugme kaldi (Sil, +): sira dugmeleri gizli. */
    /* width DEGIL min-width: tablo sikistiginda tarayici "width"i bir
       oneri sayip sutunu daraltiyor ve dugmeler sariyor. min-width
       daraltilamaz. Sil + "+" yan yana ~64px istiyor. */
    .kalem-tablo .k-komut   { width: 4.6rem; min-width: 4.6rem; }

    /* Fiyat sutunlari telefonda da gorunuyor (Gokhan bey yoldayken
       bakacak). ⚠️ min-width, width DEGIL: fiyat kutusu bir <input> ve
       input SARMAZ, KIRPAR — "1.250.000,00" daralinca "1.250.0" gorunur,
       bu da yanlis bir sayi okutur. Yatay kaydirma kirpmaktan iyidir. */
    .kalem-tablo.kalem-fiyatli { min-width: 44rem; }
    .kalem-tablo .k-fiyat   { min-width: 10rem; }
    .kalem-tablo .k-tutar   { min-width: 6.5rem; }
}

/* Panodaki proje adi sutunu. Genis ekranda uzun ad sigar; telefonda
   daralmali ki saginda kalan sutun (Gecikme / Bitis) ekran disinda
   kalmasin. Kod, telefonda bu hucrenin ICINE giriyor. */
.pano-proje {
    max-width: 18rem;
}

@media (max-width: 575.98px) {
    .pano-proje {
        max-width: 11rem;
    }
}

/* Liste tablolari telefonda: sutunlar elendikten sonra bile 27px tasiyordu
   (olculdu) ve Durum rozeti sagdan kirpiliyordu. Kalan yeri hucre
   bosluklarindan aliyoruz; sutun atmaktan iyidir, veri gorunur kaliyor.
   Secici .liste-tablo ile baslar -> Bootstrap'in .table kuralini geceriz. */
@media (max-width: 575.98px) {
    .liste-tablo > :not(caption) > * > * {
        padding-left: .3rem;
        padding-right: .3rem;
    }

    /* Kod sutunu tek satir (yukarida nowrap), o yuzden genisligini ancak
       punto belirliyor. 2026-RN-0002 bu puntoda hala rahat okunuyor. */
    .liste-tablo code {
        font-size: .78rem;
    }
}

/* Kapsam secicisi (Personel > Yetkiler basligi).
   <select> varsayilan olarak EN UZUN SECENEGI kadar genisler. Secenekler
   "Proje · 2026-RN-0002 Deniz Turizm Tesis Aydinlatma Yenileme" gibi
   olunca kutu 545px'e cikiyordu; 375px ekranda SAYFA yatay kayiyordu
   (olculdu 23.09: 199px tasma). width:auto satir ici stildeydi, buraya
   alindi ki ustune sinir koyabilelim. */
.kapsam-secici {
    width: auto;
    max-width: 100%;
}

@media (min-width: 576px) {
    /* Genis ekranda da bir proje adi basligi tek basina sisirmesin. */
    .kapsam-secici { max-width: 22rem; }
}

/* ── Saha kaydi tablosu ──────────────────────────────────────────────────
   Telefonda kalan: Tarih · Kalem · Miktar (+ silme). Giren <md, Aciklama
   <lg gizli — aciklama kaybolmasin diye dar ekranda kalemin ALTINA
   giriyor (bileşenin icinde d-lg-none ile).
   Bu ekrani sahadaki formen telefondan kullanacak; oncelik sirasi o. */
.saha-tablo .s-tarih    { width: 6.5rem; }
.saha-tablo .s-miktar   { width: 7rem; }
/* Onay sutunu her ekranda gorunuyor. Formen de gormeli: kaydinin gecip
   gecmedigi onun icin de bilgi — telefonda gizleseydik sahadaki kisi
   girdiginin ne olduğunu hic ogrenemezdi. */
.saha-tablo .s-onay     { width: 3.2rem; min-width: 3.2rem; }
.saha-tablo .s-kisi     { width: 4rem; }
.saha-tablo .s-giren    { width: 10rem; }
.saha-tablo .s-komut    { width: 5.5rem; min-width: 5.5rem; }

@media (max-width: 575.98px) {
    .saha-tablo .s-tarih  { width: 5.2rem; }
    .saha-tablo .s-miktar { width: 5.5rem; }
}

/* ── "Telefona yukle" seridi ─────────────────────────────────────────────
   Altta sabit, ekranin genisligini kaplamayan bir seker. Ustte olsaydi
   ust seritle carpisirdi; altta, basparmagin dogal yerinde duruyor.
   Gerekce ve davranis: wwwroot/yukle.js */
#yukle-serit {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);

    /* Telefonlarda ekranin alt cikintisi (home cubugu) var; onun altina
       girmesin diye guvenli alan payi ekleniyor. */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));

    z-index: 1080;                /* SweetAlert perdesinin ALTINDA kalmali */
    max-width: calc(100vw - 1.5rem);

    display: flex;
    align-items: center;
    gap: .75rem;

    padding: .5rem .5rem .5rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}

#yukle-serit[hidden] { display: none; }

.yukle-metin {
    font-size: var(--yazi-sm);
    /* iOS'taki tarif uzun; tek satira zorlanmasin. */
    line-height: 1.3;
}

#yukle-serit .yukle-dugme { border-radius: 999px; white-space: nowrap; }

.yukle-kapat {
    border: 0;
    background: transparent;
    color: #868e96;
    font-size: 1.25rem;
    line-height: 1;
    padding: .125rem .375rem;
    cursor: pointer;
    border-radius: 50%;
}

.yukle-kapat:hover { color: #212529; background: rgba(0, 0, 0, .06); }

@media (max-width: 575.98px) {
    #yukle-serit {
        /* Dar ekranda sekerin iki yaninda nefes payi birakip sigdiriyoruz. */
        left: .75rem;
        right: .75rem;
        transform: none;
        max-width: none;
    }
}

/* ── Kalem tablosu: salt okunur hal ──────────────────────────────────────
   Yazma yetkisi yokken hucreler <input> degil duz METIN (bkz.
   KalemListesi.razor). Metin sardigi icin asgari genislige de gerek yok:
   tablo ekrana sigiyor ve YATAY KAYDIRMA TAMAMEN KALKIYOR.

   Olculdu 23.09: sahadaki formen telefonda "150 W LED highbay armat…"
   diye yarim kalmis kapali kutulara bakiyordu. */
.kalem-salt {
    min-width: 0 !important;
}

.kalem-salt td,
.kalem-salt th {
    /* Uzun kalem adi sarsin; input'un yapamadigi sey tam olarak buydu. */
    white-space: normal;
    word-break: break-word;
}

/* ── Duzenlenebilir halde: No sutunu sabit kalsin ────────────────────────
   Tablo yatay kayiyor (input sarmadigi icin kayması şart). Saga kayinca
   satirin NUMARASI ekrandan cikiyordu ve "hangi kalemdeyim" cevapsiz
   kaliyordu. Sutun yerinde duruyor, arkasi gorunmesin diye zemini dolu. */
@media (max-width: 767.98px) {
    .kalem-tablo:not(.kalem-salt) thead th:first-child,
    .kalem-tablo:not(.kalem-salt) tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bs-body-bg, #fff);
        /* Kayan icerikle arasinda ince bir ayrim; "devami var" demek. */
        box-shadow: 1px 0 0 rgba(0, 0, 0, .08);
    }

    .kalem-tablo:not(.kalem-salt) thead th:first-child {
        z-index: 2;   /* baslik satiri govdenin ustunde kalsin */
    }
}

/* Sil ile "+" arasindaki bosluk telefonda daralsin: 8px yerine 4px.
   Sutunun dar kalmasina yardim ediyor, dokunma hedefleri hala ayri. */
@media (max-width: 575.98px) {
    .kalem-tablo .kalem-komut .btn + .btn { margin-left: .25rem; }
    .kalem-tablo .kalem-komut .me-2 { margin-right: 0 !important; }
}

/* ── Degisiklik gecmisi kutusu ───────────────────────────────────────────
   Bootstrap'in JS modal'i kullanilmiyor; perde ve kutu duz Blazor'la
   ciziliyor (gerekcesi GecmisKutusu.razor icinde). Bootstrap'in kendi
   .modal sinifi gorunumu veriyor, acilip kapanmasini biz yonetiyoruz. */
.gecmis-kutu {
    /* Bootstrap perdeyi 1050'de tutuyor; kutu onun USTUNDE olmali. */
    z-index: 1055;
    overflow-y: auto;
}

.gecmis-tablo .g-zaman { width: 8.5rem; }
.gecmis-tablo .g-kim   { width: 9rem; }
.gecmis-tablo .g-alan  { width: 10rem; }

/* Eski deger silik ve ustu cizili, yeni deger vurgulu: satira bakan kisi
   hangisinin "once" oldugunu okumadan anlasin. */
.gecmis-eski {
    color: #868e96;
    text-decoration: line-through;
}

.gecmis-yeni { font-weight: 600; }

@media (max-width: 575.98px) {
    /* Telefonda dort sutun sigmiyor; "Alan" ve "Degisiklik" asil bilgi,
       zaman ve kim daraliyor. */
    .gecmis-tablo .g-zaman { width: 5.5rem; }
    .gecmis-tablo .g-kim   { width: 6rem; }
    .gecmis-tablo .g-alan  { width: 7rem; }
}

/* Gecmis acan numara: dugme ama BAGLANTI gibi gorunuyor. Gercek bir
   <button> cunku yaptigi sey gezinme degil, kutu acmak — klavye ve ekran
   okuyucu icin de dogrusu bu. */
.gecmis-baglanti {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

.gecmis-baglanti:hover { color: var(--asel-lacivert); }

/* ── Mühendis onayı ───────────────────────────────────────────────────────
   Onayli satir kilitli: silinemez, hakedise girecek. Renk COK HAFIF —
   listenin yarisi onayli oldugunda ekran yesile boyanmamali, yalnizca
   ayrim okunmali. */
.metin-onayli { color: #157347; }

.saha-tablo tr.satir-onayli > td { background: #f3faf5; }

/* Karanlik kipte ayni ayrim, ayni hafiflikte. Acik kipin rengi burada
   parlak bir leke olurdu. */
@media (prefers-color-scheme: dark) {
    .metin-onayli { color: #75d19a; }
    .saha-tablo tr.satir-onayli > td { background: rgba(117, 209, 154, 0.08); }
}

/* ── Puantaj (17.10.2026, §11.30) ─────────────────────────────────────────
   Iki parca: telefonda "bugun" listesi (buyuk X / O dugmeleri — sahada,
   tek elle, eldivenle) ve kagidin aynisi aylik carsaf (31 dar sutun, yatay
   kayar, ad sutunu sabit kalir). */
.pj-kisi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    padding: .35rem .25rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
/* Isaretlenmemis kisi: solda sari serit — "bunu unuttun". */
.pj-kisi.pj-bos { border-left: 3px solid var(--bs-warning); padding-left: .4rem; }
.pj-ad {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    flex: 1 1 10rem;
    min-width: 0;
}
.pj-ad:hover { color: var(--asel-lacivert); }
.pj-secim { display: flex; align-items: center; gap: .35rem; }
.pj-secim .btn { min-width: 2.75rem; min-height: 2.25rem; font-weight: 600; }
.pj-mesai { width: 4.5rem; text-align: center; }
@media (max-width: 575.98px) {
    .pj-etiket { display: none; }
    .pj-secim .btn { min-width: 3.25rem; }
}

.pj-ay { min-width: 8.5rem; pointer-events: none; }
.pj-tablo { font-size: .8rem; width: auto; }
.pj-tablo th, .pj-tablo td { padding: .15rem .2rem; text-align: center; }
.pj-tablo thead th { font-weight: 600; white-space: nowrap; }
.pj-tablo .pj-sira { width: 2rem; }
.pj-tablo .pj-adi {
    text-align: left;
    white-space: nowrap;
    min-width: 9rem;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bs-body-bg);
}
.pj-tablo .pj-g, .pj-tablo .pj-h { width: 1.5rem; min-width: 1.5rem; }
.pj-sgk { font-size: .62rem; vertical-align: middle; margin-left: .2rem; }
.pj-tablo .pj-h { font-weight: 600; }
.pj-tablo .pj-h sup { font-weight: 400; font-size: .6rem; color: var(--bs-secondary-color); }
.pj-tablo .pj-top { min-width: 2.6rem; }
.pj-pazar { background: rgba(255, 193, 7, .12) !important; }
.pj-bugun { box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), .45); }
.pj-dis { background: var(--bs-secondary-bg) !important; color: var(--bs-secondary-color); }
.pj-tik { cursor: pointer; }
.pj-tik:hover { background: rgba(var(--bs-primary-rgb), .1) !important; }
/* Gun kapandiktan sonra duzeltilen hucre: kahverengi, noktali alti cizgi. */
.pj-duz, .pj-duz-lejant { color: #a0522d; text-decoration: underline dotted; }
.pj-duz-lejant { font-weight: 600; }
.pj-lejant {
    display: inline-block;
    width: .9rem;
    height: .7rem;
    vertical-align: middle;
    border: 1px solid var(--bs-border-color);
}
.pj-dl dt { font-weight: 400; color: var(--bs-secondary-color); }
.pj-dl dd { margin-bottom: .35rem; }

@media (prefers-color-scheme: dark) {
    .pj-duz, .pj-duz-lejant { color: #e0a070; }
}