/*
   SevgiliWeb ortak stil dosyası.
   Sade ve yoğun bir arayüz hedefleniyor: bu bir tüketici sitesi değil, gün boyu
   kullanılacak bir iş ekranı. Boşluklar dar, yazı okunaklı, renk az.
   Oluşturulma: 2026-08-12
*/

:root {
    --renk-koyu: #1f2937;      /* Üst çubuk ve menü zemini */
    --renk-koyu-acik: #374151; /* Menü ayırıcı / vurgular */
    --renk-vurgu: #2563eb;     /* Bağlantı ve etkin öğe */
    --renk-zemin: #f3f4f6;     /* Sayfa arka planı */
    --renk-kenar: #d1d5db;     /* Çerçeve rengi */
    --renk-basarili: #059669;
    --renk-hata: #dc2626;
    --menu-genislik: 210px;
    --ust-yukseklik: 48px;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--renk-zemin);
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
    color: #111827;
}

/* ===================== ÜST ÇUBUK ===================== */

.ust-cubuk {
    height: var(--ust-yukseklik);
    background: var(--renk-koyu);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
}

.marka { font-weight: 700; letter-spacing: .5px; }
.marka-alt { font-weight: 400; opacity: .65; font-size: 12px; margin-left: 4px; }

.ust-sag { display: flex; align-items: center; gap: 12px; }

/* Aktif NETSIS veritabanı rozeti — yıllık devir sonrası gözle doğrulama noktası */
.db-rozet {
    background: var(--renk-koyu-acik);
    border: 1px solid #4b5563;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    font-family: Consolas, monospace;
}

.kullanici { font-size: 13px; opacity: .9; }

.admin-rozet {
    background: var(--renk-vurgu);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    text-transform: uppercase;
    margin-left: 5px;
}

.cikis-form { margin: 0; }

/* ===================== GÖVDE / SOL MENÜ ===================== */

.govde {
    display: flex;
    height: calc(100% - var(--ust-yukseklik));
}

.sol-menu {
    width: var(--menu-genislik);
    background: var(--renk-koyu);
    padding: 8px 0 20px;
    overflow-y: auto;
    flex-shrink: 0;
}

.menu-baslik {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 14px 14px 4px;
    border-top: 1px solid var(--renk-koyu-acik);
    margin-top: 6px;
}

.menu-oge {
    display: block;
    padding: 6px 14px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 13px;
}

.menu-oge:hover { background: var(--renk-koyu-acik); color: #fff; }

/* Bulunduğun sayfa. Uzun menüde tek başına arka plan tonu yetmiyor — soldaki şerit
   gözü doğrudan satıra çeker. Renkten bağımsız ikinci bir işaret (kalın yazı + şerit)
   olması ayrıca erişilebilirlik gereğidir: yalnız renk tonuyla ayırt etmek, renk
   körlüğünde ve düşük parlaklıkta çalışmaz. */
.menu-oge.aktif {
    background: var(--renk-koyu-acik);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--renk-vurgu);
}

/* Henüz yazılmamış modüller — gizlenmiyor, soluk gösteriliyor ki yol haritası görünsün */
.menu-oge.pasif { color: #6b7280; cursor: default; }
.menu-oge.pasif:hover { background: transparent; color: #6b7280; }

/* ===================== İÇERİK ===================== */

/*
   min-width: 0 ZORUNLU. Flex öğesinin varsayılan `min-width: auto` değeri, içindeki
   geniş bir öğenin (tuval, geniş tablo) altında küçülmesini engeller; sayfa yatayda
   taşar ve sol menü ekran dışına itilir. 2026-08-13'te takip haritasında yaşandı.
*/
.icerik { flex: 1; min-width: 0; padding: 18px 22px; overflow-y: auto; }

.sayfa-baslik {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--renk-kenar);
}

.kart {
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.kart-baslik { font-weight: 600; margin-bottom: 10px; }

/* Bilgi tablosu — Sistem Bilgisi gibi anahtar/değer listeleri için */
.bilgi-tablo { width: 100%; border-collapse: collapse; }
.bilgi-tablo td { padding: 6px 8px; border-bottom: 1px solid #eef0f3; }
.bilgi-tablo td:first-child { width: 220px; color: #6b7280; }
.bilgi-tablo code { font-family: Consolas, monospace; }

.durum-ok { color: var(--renk-basarili); font-weight: 600; }
.durum-hata { color: var(--renk-hata); font-weight: 600; }

/* ===================== GİRİŞ SAYFASI ===================== */

.giris-sayfasi {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--renk-koyu);
}

.giris-kutu {
    background: #fff;
    border-radius: 6px;
    padding: 28px 30px;
    width: 340px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.giris-baslik { text-align: center; font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.giris-alt { text-align: center; color: #6b7280; font-size: 12px; margin-bottom: 20px; }

.giris-hata {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ===================== ÖLÇÜ KUTULARI (pano) ===================== */

.olcu-satir { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }

.olcu {
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 12px 16px;
    flex: 1 1 150px;
    min-width: 140px;
}

.olcu-etiket { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
.olcu-deger { font-size: 26px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.olcu-not { font-size: 11px; color: #9ca3af; }
.olcu.kritik .olcu-deger { color: var(--renk-hata); }
.olcu.iyi .olcu-deger { color: var(--renk-basarili); }

/* Doluluk çubuğu — yüzdeyi gözle okunur kılar */
.cubuk { background: #e5e7eb; border-radius: 3px; height: 8px; overflow: hidden; min-width: 60px; }
.cubuk > span { display: block; height: 100%; background: var(--renk-basarili); }
.cubuk.dusuk > span { background: var(--renk-hata); }
.cubuk.orta > span { background: #d97706; }

/* ===================== VERİ TABLOSU ===================== */

.veri-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.veri-tablo th {
    text-align: left;
    background: #f9fafb;
    border-bottom: 2px solid var(--renk-kenar);
    padding: 7px 8px;
    font-weight: 600;
    white-space: nowrap;
}
.veri-tablo td { padding: 6px 8px; border-bottom: 1px solid #eef0f3; }
.veri-tablo tbody tr:hover { background: #f9fafb; }
.sag { text-align: right; }

/* Geniş tablolar dar ekranda sayfayı yatay kaydırmasın — kendi kutusunda kaysın */
.tablo-kutu { overflow-x: auto; }

/* ===================== DOSYA YÖNETİCİSİ ===================== */

/* Kırıntı yolu — üst klasörlere tıklanabilir gezinme */
.kirinti { font-size: 13px; }
.kirinti a { text-decoration: none; }
.kirinti .ayrac { color: #9ca3af; margin: 0 6px; }
.kirinti .aktif { font-weight: 600; }

/* Araç çubuğu satırı — yükleme ve klasör oluşturma formları */
.arac-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }

/* Tablo hücresi içindeki form, düğmeyi alt satıra atmasın */
.satir-ici { display: inline; margin: 0; }

.islem-hucre { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.simge { text-align: center; font-size: 15px; }

/* ===================== ÜRETİM / TABLET ===================== */
/*
   Tablet ekranları parmakla kullanılıyor: dokunma alanları büyük, adım sayısı az.
   Makine panosu bir ızgara — sahada makineye bakarak dolaşan eleman için
   liste değil kart görünümü daha okunaklı.
*/

.makine-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.makine {
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-left: 4px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    display: block;
}

.makine.dolu { border-left-color: var(--renk-basarili); }

/* Bir vardiyayı aşan iş: ya bitmiş ama kapatılmamış, ya unutulmuş — ikisi de görünmeli */
.makine.asmis { border-left-color: var(--renk-hata); background: #fff7f7; }

.makine.bos { opacity: .72; }
.makine.bos:hover { opacity: 1; border-color: var(--renk-vurgu); }

.makine-ad { font-weight: 600; margin-bottom: 6px; line-height: 1.25; }
.makine-satir { font-size: 13px; margin-bottom: 2px; }
.makine-satir .etiket { color: #6b7280; display: inline-block; min-width: 58px; }
.makine-bos-not { font-size: 12px; color: var(--renk-vurgu); }

.devir-rozet {
    display: inline-block;
    background: #d97706;
    color: #fff;
    font-size: 10px;
    letter-spacing: .5px;
    border-radius: 3px;
    padding: 1px 6px;
    margin-top: 4px;
}

.makine-islem { display: flex; gap: 6px; margin-top: 8px; }
.makine-islem form { margin: 0; flex: 1; }
.makine-islem .btn { width: 100%; }

/* Parmakla dokunulabilir yükseklik — 44px altı hedefler ıskalanıyor */
.btn-buyuk { min-height: 46px; font-size: 15px; }
.secim-buyuk { min-height: 46px; font-size: 15px; }

.secenek-satir { display: flex; flex-wrap: wrap; gap: 8px; }

.secenek {
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
}

.secenek:has(input:checked) {
    border-color: var(--renk-vurgu);
    background: #eff6ff;
    font-weight: 600;
}

.kart-uyari { border-left: 4px solid var(--renk-hata); }

/* ---- İş başlatma formu (modal içinde veya tam sayfada) ---- */

.baslat-grup { margin-bottom: 14px; }

.baslat-etiket {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}

/* Değiştirilemeyen alan (reçeteden gelen iş, panodan gelen makine) */
.baslat-sabit {
    background: #f3f4f6;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 11px 12px;
    font-weight: 600;
}

/* Reçete bağlamı şeridi — operatör ne yaptığını görsün */
.baslat-baglam {
    background: #f9fafb;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.6;
}

/* Adet kutusu — parmakla yazılacak, büyük ve okunaklı */
.adet-kutu {
    max-width: 160px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.baslat-islem { margin-top: 4px; }
.baslat-islem .btn { width: 100%; }

/* Modal içindeki form kenar boşlukları — kart görünümü tekrarlanmasın */
.modal-body .baslat-form { margin: 0; }

/* ---- Onay kutulu ilişki seçimi (iş↔istasyon, işçi↔iş) ---- */
/*
   Izgara: 76 istasyon veya 57 işçi tek sütunda çok uzun olur, ekranın tamamı kullanılsın.
   Seçili olanlar belirgin — "kaç tanesi işaretli" bakışta görülsün.
*/
.secim-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 6px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}

.secim-kutu {
    display: flex;
    align-items: baseline;
    gap: 7px;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 7px 10px;
    cursor: pointer;
    background: #fff;
    font-size: 13px;
}

.secim-kutu:hover { border-color: var(--renk-vurgu); }

.secim-kutu:has(input:checked) {
    border-color: var(--renk-vurgu);
    background: #eff6ff;
}

.secim-kutu input { flex-shrink: 0; }
.secim-ad { font-weight: 500; }
.secim-detay { color: #9ca3af; font-size: 11px; }

/* ===================== REÇETE AĞACI ===================== */
/*
   Renkler WinForms FormRecete ile bilerek AYNI: iki uygulama bir süre birlikte yaşayacak,
   kullanıcının gözü aynı şeyi aynı renkte görsün.
   Mamul=lacivert · Bileşen=koyu yeşil · İş=mor · İstasyon=kahve · Personel=teal · Eksik=gri
*/

.recete-agac, .recete-agac ul {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}

.recete-agac { padding-left: 2px; }

/* Dal çizgisi — hangi düğümün hangi düğüme bağlı olduğu gözle izlenebilsin */
.recete-agac ul {
    border-left: 1px dotted #cbd5e1;
    margin-left: 6px;
}

.recete-agac li { padding: 1px 0; }

.agac-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 13px;
}

/* Aç/kapa üçgeni ve satır — <summary> varsayılan görünümü sadeleştirildi */
.recete-agac summary {
    cursor: pointer;
    padding: 1px 0;
    list-style: none;
    display: block;
}

.recete-agac summary::-webkit-details-marker { display: none; }

/* [+] / [−] kutusu — WinForms TreeView'deki gibi */
.recete-agac summary::before {
    content: "−";
    display: inline-block;
    width: 13px;
    height: 13px;
    line-height: 11px;
    text-align: center;
    border: 1px solid #9ca3af;
    border-radius: 2px;
    background: #fff;
    color: #4b5563;
    font-size: 11px;
    margin-right: 5px;
    vertical-align: 1px;
}

.recete-agac details:not([open]) > summary::before { content: "+"; }

/* Yaprak düğüm (alt dalı yok) — kutu yerine hizalama boşluğu */
.recete-agac .yaprak { display: inline-block; margin-left: 18px; }

/* ---- Renkler: bakiye temelli (WinForms ile aynı kural) ---- */
.dugum-kok      { color: #00008b; font-weight: 700; }   /* lacivert — mamul */
.bakiye-arti    { color: #006400; }                     /* koyu yeşil — stok var */
.bakiye-sifir   { color: #ff8c00; }                     /* turuncu — sıfır bakiye / alt reçeteli */
.bakiye-eksi    { color: #dc2626; font-weight: 700; }   /* kırmızı — negatif, kritik */

.dugum-is       { color: #7b68ee; font-style: italic; font-weight: 600; }  /* mor — operasyon */
.dugum-aciklama { color: #7b68ee; font-style: italic; font-size: 12px; }

.dugum-istasyon { color: #8b4513; font-size: 12px; }    /* kahve */
.dugum-personel { color: #0f766e; font-size: 12px; }    /* teal */

/* Eksik tanım gri ve italik — gizlenmiyor, görünür bırakılıyor ki tamamlansın */
.dugum-eksik    { color: #9ca3af; font-style: italic; font-size: 12px; }

.rozet-ym {
    background: #dcfce7;
    color: #166534;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Başlat düğmesi satırın sonuna kaçmasın, işin yanında dursun */
.agac-baslat { padding: 1px 10px; font-size: 12px; }

/* ===================== TAKİP HARİTASI ===================== */

/*
   Tek ince şerit: başlık + denetimler + anahtar. Ayrı kartlara bölmek dikeyde
   80-100 px yiyor ve harita ekrana sığmıyordu.
*/
.harita-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Blok kapsayıcı — kullanılabilir genişlik BURADAN ölçülür (bkz. harita.js/boyutla) */
.harita-alan { display: block; width: 100%; }

.harita-kutu {
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;   /* tuval kadar yer kaplasın, çerçeve boşuna uzamasın */
    max-width: 100%;
}

/*
   touch-action: none — kaydırma ve iki parmak yakınlaştırma betiğe aittir.
   Bırakılırsa tablette tek parmak SAYFAYI kaydırır, harita hiç hareket etmez;
   iki parmak da tarayıcının kendi zoom'unu açar ve tuval bulanıklaşır.
*/
#haritaTuval {
    display: block;
    cursor: default;
    max-width: 100%;
    touch-action: none;
}

/* Renk anahtarı — balon açılmadan da durum okunabilsin */
.harita-anahtar {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #4b5563;
}

/* 8 px/m altında 1 m² göz 8×8 px'ten küçük olur, makineler ayırt edilemez */
.olcek-dar { color: #d97706; font-weight: 600; font-size: 12px; }

/* ===================== TAM GENİŞLİK DÜZEN (editör) ===================== */

.genis-govde { height: 100%; overflow: hidden; }   /* sayfa kaydırılmaz, tuval ekrana sığar */

.genis-icerik {
    height: calc(100% - var(--ust-yukseklik));
    padding: 10px 12px;
    overflow: hidden;
}

/* ===================== YERLEŞİM EDİTÖRÜ ===================== */

.ed-duzen { display: flex; gap: 12px; height: 100%; }

.ed-tuval-alan { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ed-arac-serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ed-etiket { font-size: 12px; color: #4b5563; display: flex; align-items: center; gap: 4px; margin: 0; }

/* Yakınlaştırma düğmeleri — araç şeridinde gruplu dursun */
.ed-zoom { display: inline-flex; gap: 2px; }
.ed-zoom .btn { min-width: 34px; font-weight: 600; }
.ed-ayirac { flex: 1; }

.ed-tuval-kutu {
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    align-self: flex-start;
}

/*
   touch-action:none  → parmak hareketi kaydırma değil çizim sayılsın
   user-select / callout → uzun basışta tarayıcının metin seçimi ve "bağlantıyı kopyala"
   balonu devreye girmesin; uzun basış bizim düzenleme penceremizi açacak
*/
#edTuval {
    display: block;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Tam ekranda (K-A0B9 köşesi) tuval alanı beyaz zemin üstünde ortalanır */
.ed-tuval-alan:fullscreen {
    background: var(--renk-zemin);
    padding: 8px 10px;
    align-items: center;
}

.ed-tuval-alan:fullscreen .ed-tuval-kutu { align-self: center; }

.ed-alt-serit { margin-top: 6px; }

/* Sağ panel — sabit genişlik; tuval kalan alanı alır.

   250 → 340 px (2026-08-13): makine adları listede kırpılıyordu ("ELEKTRO STATIK TOZ
   BOYA FI…"). Genişletmenin ölçeğe MALİYETİ YOK: 1920'lik ekranda ölçeği belirleyen
   YÜKSEKLİK (~10,7 px/m), genişlik değil (~15 px/m). Yani panelden alınan 90 px
   tuvalden bir şey götürmüyor. */
.ed-panel {
    width: 340px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    padding: 12px;
    overflow-y: auto;
}

/*
   İşlem sonucu düğmelerin hemen üstünde. Tuvalin altındaki durum satırı 1000 px uzakta
   kalıyordu; kullanıcı uyarıyı görmeyip "düğme çalışmıyor" sanıyordu.
*/
.ed-bildirim {
    border-radius: 4px;
    padding: 7px 9px;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 8px;
    font-weight: 500;
}

.ed-bildirim-ok   { background: #dcfce7; border: 1px solid #16a34a; color: #14532d; }
.ed-bildirim-hata { background: #fee2e2; border: 1px solid #dc2626; color: #7f1d1d; }

/* ---- Arama listesi ---- */
.ed-liste {
    border: 1px solid var(--renk-kenar);
    border-radius: 4px;
    max-height: 290px;   /* panel genişleyince listeye de yer açıldı */
    overflow-y: auto;
    background: #fff;
}

.ed-liste-oge {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 7px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}

.ed-liste-oge:last-child { border-bottom: none; }
.ed-liste-oge:hover { background: #eff6ff; }
.ed-liste-oge.secili { background: #dbeafe; font-weight: 600; }

.ed-liste-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-liste-kod { color: #6b7280; font-family: Consolas, monospace; font-size: 11px; flex-shrink: 0; }

/* İstasyona bağlanmamış nesne — haritada canlı iş göstermez, göze çarpsın */
.ed-liste-bagsiz {
    color: #d97706;
    font-size: 10px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ed-baslik {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6b7280;
    border-bottom: 1px solid var(--renk-kenar);
    padding-bottom: 3px;
    margin-bottom: 6px;
}

.ha-kutu {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px;
}

.ha-calisiyor { background: #dcfce7; border: 1px solid #16a34a; }
.ha-durus     { background: #fee2e2; border: 1px solid #dc2626; }
.ha-bos       { background: #f3f4f6; border: 1px solid #9ca3af; }
.ha-nesne     { background: #f8fafc; border: 1px solid #cbd5e1; }

/* Hover balonu — gövdeye bağlı, tuvalin taşma sınırına takılmaz */
.harita-balon {
    display: none;
    position: fixed;
    z-index: 50;
    background: #111827;
    color: #f9fafb;
    border-radius: 5px;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.5;
    max-width: 300px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    pointer-events: none; /* balon imleci yakalamasın, altındaki hücre okunmaya devam etsin */
}

.balon-baslik { font-weight: 700; font-size: 13px; }
.balon-kod { color: #9ca3af; font-family: Consolas, monospace; font-size: 11px; margin-bottom: 5px; }
.balon-not { color: #9ca3af; font-style: italic; margin-top: 4px; }
.balon-alan { color: #6b7280; font-size: 11px; margin-top: 5px; }
.balon-uyari { color: #fca5a5; font-weight: 700; }

.balon-tablo { border-collapse: collapse; margin-top: 3px; }
.balon-tablo td { padding: 1px 0; vertical-align: top; }
.balon-tablo td:first-child { color: #9ca3af; padding-right: 10px; white-space: nowrap; }

/* ===================== EDİTÖR — DAR EKRAN ===================== */
/*
   Yan yana düzen dar ekranda çöküyor: panel 250 px sabit, tuvale kalan yer 150-180 px'e
   düşüyor ve inline-block tuval kutusu kendi ebeveyninden taşarak panelin ALTINA giriyor
   (ekran görüntüsü 2026-08-13). Dar ekranda alt alta dizilir ve sayfa kaydırılabilir olur.

   NOT: editör dar ekranda ÇİZİM için elverişli değil — 100 m'yi 400 px'e sığdırınca
   1 m² göz 3-4 piksel olur. Ama arama listesi ve "yanıp söndürerek bulma" işe yarar;
   düzenin en azından okunur olması gerekiyor.
*/
@media (max-width: 900px) {
    .genis-govde { overflow: auto; height: auto; }
    .genis-icerik { height: auto; overflow: visible; }

    .ed-duzen { flex-direction: column; height: auto; }

    .ed-panel {
        width: 100%;
        max-height: none;
        overflow: visible;
    }

    /*
        K-A0B0 köşe kolonuna dokununca panel ÖRTÜ olarak açılır.
        Tablette panele ulaşmak için sayfayı aşağı kaydırmak gerekiyordu; artık
        parmağın zaten durduğu köşeden tek dokunuşla geliyor.
    */
    body.ed-panel-acik .ed-panel {
        position: fixed;
        top: var(--ust-yukseklik);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(0,0,0,.35);
    }

    .ed-tuval-kutu { max-width: 100%; }

    /* Üst çubukta başlık taşmasın */
    .ust-cubuk .marka {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}

/* ===================== MOBİL ===================== */
/*
   Kullanıcılar mühendis/yönetici; mobilde asıl iş VERİ GİRİŞİ DEĞİL, HIZLI KONTROL.
   Bu yüzden mobilde: menü gizlenir (düğmeyle açılır), tablolar karta dönüşür,
   ölçü kutuları iki sütuna iner.
*/

.menu-dugme {
    display: none;
    background: transparent;
    border: 1px solid #4b5563;
    color: #fff;
    border-radius: 3px;
    font-size: 16px;
    line-height: 1;
    padding: 5px 9px;
    margin-right: 10px;
}

@media (max-width: 820px) {
    .menu-dugme { display: inline-block; }

    .marka-alt { display: none; }

    /* Menü varsayılan olarak kapalı; body.menu-acik ile açılır */
    .sol-menu {
        position: fixed;
        top: var(--ust-yukseklik);
        left: 0;
        bottom: 0;
        z-index: 20;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,.3);
    }

    body.menu-acik .sol-menu { transform: translateX(0); }

    .menu-oge { padding: 10px 14px; font-size: 14px; } /* parmakla dokunulabilir yükseklik */

    .icerik { padding: 12px 14px; }

    .olcu { flex: 1 1 calc(50% - 12px); }
    .olcu-deger { font-size: 22px; }

    /*
       Tabloyu karta çevir: her satır bir kutu, her hücre "başlık: değer" satırı.
       Hücre başlıkları data-etiket özniteliğinden okunur.
    */
    .veri-tablo, .veri-tablo tbody, .veri-tablo tr, .veri-tablo td { display: block; width: 100%; }
    .veri-tablo thead { display: none; }

    .veri-tablo tr {
        border: 1px solid var(--renk-kenar);
        border-radius: 4px;
        margin-bottom: 8px;
        padding: 4px 0;
        background: #fff;
    }

    .veri-tablo td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid #f3f4f6;
        padding: 6px 10px;
    }

    .veri-tablo td:last-child { border-bottom: none; }

    .veri-tablo td::before {
        content: attr(data-etiket);
        font-weight: 600;
        color: #6b7280;
        flex-shrink: 0;
    }

    /* Kartın ilk satırı başlık gibi dursun */
    .veri-tablo td.baslik-hucre {
        background: #f9fafb;
        font-weight: 600;
    }
    .veri-tablo td.baslik-hucre::before { content: ""; }

    .sag { text-align: left; }
}

/* ================= MAKİNEYE İŞ ATAMA (modal içi rota listesi) =================
   Tablet için: satırlar en az 56 px yüksek, dokunma alanı parmak boyunda.
   Oluşturulma: 2026-08-14 */

.isata-baslik { margin-bottom: 10px; }

.isata-makine {
    font-size: 1.05rem;
    font-weight: 600;
}

.isata-dolu {
    margin-top: 6px;
    padding: 8px 10px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
    font-size: .85rem;
    color: #7c2d12;
}

/* Arama kutusu listeyle birlikte kaydırılmasın — uzun listede hep elin altında */
.isata-arama {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding-bottom: 8px;
}

.isata-liste { margin-top: 4px; }

.isata-mamul {
    position: sticky;
    top: 52px;
    z-index: 1;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
    font-size: .85rem;
    padding: 5px 8px;
    margin: 8px 0 2px;
    border-radius: 4px;
}

.isata-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    text-align: left;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
}

.isata-satir:hover,
.isata-satir:focus { background: #f0f9ff; border-color: #38bdf8; }

.isata-sira {
    flex: 0 0 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #f1f5f9;
    border-radius: 50%;
    font-size: .8rem;
    color: #475569;
}

.isata-orta { flex: 1 1 auto; min-width: 0; }

.isata-is {
    display: block;
    font-weight: 600;
    font-size: .95rem;
}

.isata-bilesen {
    display: block;
    font-size: .8rem;
    color: #059669;
}

.isata-aciklama {
    display: block;
    font-size: .78rem;
    color: #6b7280;
    /* Uzun açıklama satırı şişirmesin — tam metin zaten başlatma formunda görünür */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isata-ok { flex: 0 0 auto; color: #9ca3af; font-size: 1.3rem; }

.isata-bos {
    padding: 16px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: .9rem;
}

.isata-sayi {
    margin-top: 6px;
    font-size: .78rem;
    color: #9ca3af;
    text-align: right;
}

/* ---- Reçete operasyonu ekleme / düzenleme formu ----
   .baslat-islem varsayılanı tek düğmeye göre (%100 genişlik); burada iki düğme
   yan yana durmalı, yoksa Sil düğmesi Kaydet'in altına tam genişlikte iner ve
   yanlışlıkla basılması kolaylaşır.
   Oluşturulma: 2026-08-14 */
.rotatanim .baslat-islem {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rotatanim .baslat-islem .btn { width: auto; }
.rotatanim .baslat-islem #rtKaydet { flex: 1 1 auto; }
.rotatanim .baslat-islem #rtSil { flex: 0 0 auto; }

/* Ağaçtaki düzenle düğmesi Başlat'ın yanında dursun, satırı bozmasın */
.dugum-is .agac-baslat + .agac-baslat { margin-left: 4px; }

/* ---- Açık kayıt işlemleri (makine modalı) ----
   Oluşturulma: 2026-08-14 */

.isata-islemler {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.isislem-sekme {
    display: flex;
    gap: 6px;
    margin: 12px 0 10px;
}

.isislem-sekme .btn { flex: 1 1 0; }

.isislem-not {
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    padding: 8px 10px;
    font-size: .85rem;
    color: #475569;
    margin-bottom: 12px;
}

/* .baslat-islem varsayılanı tek düğmeye göre (%100 genişlik); burada iki düğme var */
.isislem .baslat-islem {
    display: flex;
    gap: 8px;
    align-items: center;
}

.isislem .baslat-islem .btn { width: auto; }
.isislem .baslat-islem #iiUygula { flex: 1 1 auto; }
.isislem .baslat-islem #iiSil { flex: 0 0 auto; }

/* Ağaçtaki operasyon ekleme düğmesi — satırı şişirmesin, üstüne gelince belirginleşsin.
   Oluşturulma: 2026-08-14 */
.agac-ekle {
    padding: 0 5px;
    line-height: 1.3;
    margin-left: 6px;
    opacity: .45;
}

.recete-agac summary:hover .agac-ekle,
.recete-agac .yaprak:hover .agac-ekle,
.agac-ekle:hover,
.agac-ekle:focus { opacity: 1; }