/* ===== AB YAZILIM AJANS — Ön Muhasebe / lila kurumsal kimlik ===== */
:root{
  --lila:#6C4AB6; --lila-koyu:#4A2C87; --lila-acik:#8D72E1;
  --lila-solgun:#B9AAFF; --lila-zemin:#F4F1FC;
  --yesil:#2E9E5B; --kirmizi:#D64545; --turuncu:#E08C22; --mavi:#2F6FED;
  --zemin:#fff; --zemin-gri:#F5F5F7; --cizgi:#E3E0EC;
  --metin:#1C1B21; --metin-solgun:#6E6A7C;
  --golge:0 1px 3px rgba(28,27,33,.08), 0 4px 16px rgba(28,27,33,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--zemin-gri);color:var(--metin);font-size:14px}
a{color:var(--lila);text-decoration:none}

/* ---------- GİRİŞ ---------- */
.giris-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,var(--lila-koyu),var(--lila))}
.giris-kutu{display:grid;grid-template-columns:1fr 400px;max-width:900px;width:94%;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.giris-sol{background:linear-gradient(160deg,var(--lila-koyu),var(--lila));color:#fff;padding:48px 40px}
.giris-sol .marka{font-size:11px;letter-spacing:3px;color:var(--lila-solgun);margin-bottom:8px}
.giris-sol h1{font-size:32px;margin-bottom:6px}
.giris-sol .alt{color:var(--lila-solgun);font-size:14px;margin-bottom:28px}
.giris-sol .ozellik{list-style:none}
.giris-sol .ozellik li{padding:8px 0 8px 22px;position:relative;font-size:13px;opacity:.92}
.giris-sol .ozellik li:before{content:"✓";position:absolute;left:0;color:var(--lila-solgun);font-weight:bold}
.giris-sag{padding:48px 36px;display:flex;flex-direction:column;justify-content:center}
.giris-sag h2{color:var(--lila-koyu);margin-bottom:22px;font-size:22px}
label{display:block;font-size:12px;color:var(--metin-solgun);margin:12px 0 6px;font-weight:600}
input,select{width:100%;padding:11px 13px;border:1px solid var(--cizgi);border-radius:9px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--lila);box-shadow:0 0 0 3px rgba(108,74,182,.12)}
.btn{padding:11px 18px;border:none;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:.15s}
.btn:disabled{opacity:.6;cursor:default}
.btn-ana{background:var(--lila);color:#fff;width:100%;margin-top:20px;padding:13px}
.btn-ana:hover:not(:disabled){background:var(--lila-koyu)}
.btn-ikincil{background:#fff;color:var(--lila);border:1.5px solid var(--lila)}
.btn-yesil{background:var(--yesil);color:#fff}
.btn-kirmizi{background:var(--kirmizi);color:#fff}
.btn-mavi{background:var(--mavi);color:#fff}
.btn-turuncu{background:var(--turuncu);color:#fff}
.btn-mor{background:var(--lila,#8D72E1);color:#fff}
.btn-kucuk{padding:6px 12px;font-size:12px}
.hata{color:var(--kirmizi);font-size:13px;margin-top:12px;min-height:18px}
.dipnot{text-align:center;color:var(--metin-solgun);font-size:11px;margin-top:26px}

/* ---------- PANEL DÜZENİ ---------- */
.kabuk{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.yan{background:var(--lila-koyu);color:#fff;padding:0 0 20px}
.yan-bas{padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.yan-bas .marka{font-size:10px;letter-spacing:2.5px;color:var(--lila-solgun)}
.yan-bas .sirket{font-size:17px;font-weight:700;margin-top:4px}
.yan-bas .rozet{display:inline-block;margin-top:8px;padding:3px 9px;border-radius:20px;background:var(--lila-acik);font-size:10px;letter-spacing:1.2px;font-weight:700}
.menu{list-style:none;padding:14px 10px}
.menu li a{display:block;padding:11px 14px;border-radius:9px;color:rgba(255,255,255,.82);font-size:14px;margin-bottom:2px;cursor:pointer}
.menu li a:hover{background:rgba(255,255,255,.09);color:#fff}
.menu li a.aktif{background:var(--lila);color:#fff;font-weight:600}
.yan-alt{padding:14px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:var(--lila-solgun)}

.icerik{padding:24px 26px;overflow:auto}
.baslik-satir{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.baslik-satir h1{font-size:23px;color:var(--lila-koyu)}
.arac{display:flex;gap:8px}

/* ---------- KARTLAR ---------- */
.kart{background:#fff;border:1px solid var(--cizgi);border-radius:13px;padding:16px;box-shadow:var(--golge)}
.izgara{display:grid;gap:14px}
.izgara-4{grid-template-columns:repeat(4,1fr)}
.izgara-3{grid-template-columns:repeat(3,1fr)}
.izgara-2{grid-template-columns:repeat(2,1fr)}
.kpi .etiket{font-size:11px;color:var(--metin-solgun);letter-spacing:1px;font-weight:600}
.kpi .deger{font-size:27px;font-weight:800;color:var(--lila-koyu);margin:5px 0 2px}
.kpi .aciklama{font-size:12px;color:var(--metin-solgun)}
.kpi.vurgu{background:linear-gradient(140deg,var(--lila),var(--lila-koyu));border:none}
.kpi.vurgu .etiket,.kpi.vurgu .aciklama{color:var(--lila-solgun)}
.kpi.vurgu .deger{color:#fff;font-size:32px}

/* ---------- TABLO ---------- */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:13px;overflow:hidden;box-shadow:var(--golge)}
th{background:var(--lila-zemin);color:var(--lila-koyu);text-align:left;padding:11px 13px;font-size:11px;letter-spacing:1px;text-transform:uppercase}
td{padding:11px 13px;border-top:1px solid var(--cizgi);font-size:13.5px}
tr:hover td{background:var(--lila-zemin)}
.sag{text-align:right}
.rozet{display:inline-block;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;color:#fff}
.rz-yesil{background:var(--yesil)} .rz-kirmizi{background:var(--kirmizi)}
.rz-turuncu{background:var(--turuncu)} .rz-lila{background:var(--lila)} .rz-gri{background:var(--metin-solgun)}
.rz-mavi{background:#2F6FED}

/* ---------- MASA IZGARASI ---------- */
.masalar{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.masa{border-radius:13px;padding:16px 10px;color:#fff;text-align:center;cursor:pointer;transition:.15s;border:none}
.masa:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.masa .ad{font-size:19px;font-weight:800}
.masa .tutar{font-size:13px;opacity:.95;margin-top:3px}
.masa .sure{font-size:11px;opacity:.75}
.m-bos{background:var(--yesil)} .m-dolu{background:var(--kirmizi)} .m-rezerve{background:var(--turuncu)}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1fr 372px;gap:16px;height:calc(100vh - 118px)}
.pos-sol{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.kategori-serit{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.kategori-chip{padding:8px 15px;border-radius:20px;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;border:none}
.urun-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;overflow-y:auto;padding-right:4px}
.urun-kart{background:#fff;border:1px solid var(--cizgi);border-radius:11px;padding:11px;cursor:pointer;text-align:center;transition:.12s}
.urun-kart:hover{border-color:var(--lila);transform:translateY(-2px);box-shadow:var(--golge)}
.urun-kart .cizgi{height:3px;border-radius:2px;margin-bottom:7px}
.urun-kart .ad{font-size:12.5px;line-height:1.3;height:32px;overflow:hidden}
.urun-kart .fiyat{font-size:14px;font-weight:800;color:var(--lila-koyu);margin-top:6px}

.adisyon{background:#fff;border:1px solid var(--cizgi);border-radius:13px;display:flex;flex-direction:column;overflow:hidden}
.adisyon-bas{background:var(--lila-zemin);padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.adisyon-bas .t{font-size:11px;font-weight:800;color:var(--lila-koyu);letter-spacing:1.2px}
.adisyon-liste{flex:1;overflow-y:auto;padding:6px}
.kalem{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 8px;border-bottom:1px solid var(--zemin-gri)}
.kalem .mik{background:var(--lila-zemin);color:var(--lila-koyu);font-weight:800;font-size:12.5px;padding:4px 8px;border-radius:7px;min-width:38px;text-align:center;cursor:pointer}
.kalem .ad{font-size:13.5px}
.kalem .not{font-size:11px;color:var(--turuncu)}
.kalem .tut{font-weight:700;font-size:13.5px;white-space:nowrap}
.adisyon-alt{border-top:1px solid var(--cizgi);padding:13px}
.toplam-satir{display:flex;justify-content:space-between;font-size:12.5px;color:var(--metin-solgun);margin-bottom:4px}
.toplam-genel{display:flex;justify-content:space-between;font-size:22px;font-weight:800;color:var(--lila-koyu);margin:8px 0 12px}
.odeme-izgara{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- MUTFAK ---------- */
.mutfak-body{background:#1C1B21}
.mutfak-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.mutfak-kart{background:#2A2833;border-radius:13px;overflow:hidden}
.mutfak-bas{background:var(--lila);padding:11px 14px;display:flex;justify-content:space-between;align-items:center}
.mutfak-bas .ad{color:#fff;font-size:17px;font-weight:800}
.mutfak-kalem{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.06)}
.mutfak-kalem .mik{width:38px;height:38px;border-radius:19px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.mutfak-kalem .ad{color:#fff;font-size:15px;font-weight:700}
.mutfak-kalem .not{color:var(--turuncu);font-size:12px}
.mutfak-kalem .sure{color:#8E8A9C;font-size:11px}

/* ---------- MODAL ---------- */
.perde{position:fixed;inset:0;background:rgba(28,27,33,.55);display:none;align-items:center;justify-content:center;z-index:100}
.perde.acik{display:flex}
.modal{background:#fff;border-radius:15px;padding:24px;width:min(460px,92%);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal h3{color:var(--lila-koyu);margin-bottom:14px}
.modal-alt{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

.bos{text-align:center;color:var(--metin-solgun);padding:44px;font-size:14px}
.yukleniyor{text-align:center;padding:32px;color:var(--lila)}
.filtre-satir{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filtre-satir input,.filtre-satir select{width:auto;min-width:180px}

/* mobil düzen dosyanın sonunda */

/* ---- form ---- */
.etk { display:block; font-size:11px; font-weight:700; color:var(--metin-solgun);
       letter-spacing:.5px; margin:10px 0 4px; }
.alan { width:100%; padding:10px 12px; border:1px solid var(--cizgi); border-radius:9px;
        font-family:inherit; font-size:14px; background:#fff; }
.alan:focus { outline:none; border-color:var(--lila); }

/* ---- perde kutusu ----
   NOT: .perde'yi burada YENIDEN TANIMLAMA. Yukarida (satir ~131) zaten
   display:none + .perde.acik{display:flex} olarak tanimli. Tekrar tanimlarsak
   perde hep acik kalir ve ekranda bos beyaz kutu gorunur. */
.perde-kutu { background:#fff; border-radius:16px; padding:26px; width:100%; max-width:520px;
              max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* hidden ozniteligi sinif secicisini ezsin */
.perde[hidden] { display:none !important; }


/* =====================================================================
   MOBİL DÜZEN
   Eskiden 1024px altında .yan gizleniyordu -> telefonda menü yoktu.
   Artık yan menü çekmeceye dönüşüyor, hamburger ile açılıyor.
   ===================================================================== */

/* Üst çubuk — sadece mobilde */
.ust-bar{display:none}

@media(max-width:1024px){

  /* --- iskelet --- */
  .kabuk{grid-template-columns:1fr}

  .ust-bar{
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:120;
    background:var(--lila-koyu); color:#fff;
    padding:10px 14px; box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  .ust-bar .ham{
    background:rgba(255,255,255,.14); border:0; color:#fff;
    font-size:20px; line-height:1; width:42px; height:42px;
    border-radius:10px; cursor:pointer; flex-shrink:0;
  }
  .ust-bar .ust-baslik{font-size:15px; font-weight:700; flex:1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ust-bar .ust-rozet{font-size:9px; letter-spacing:1px; background:var(--lila-acik);
    padding:3px 8px; border-radius:10px; font-weight:700; flex-shrink:0}

  /* --- yan menü: çekmece --- */
  .yan{
    position:fixed; top:0; left:0; bottom:0; width:270px; max-width:82vw;
    z-index:200; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:6px 0 26px rgba(0,0,0,.32);
  }
  .yan.acik{transform:none}
  .yan-perde{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:150;
  }
  .yan-perde.acik{display:block}

  /* menü öğeleri parmakla basılacak kadar büyük */
  .menu a{padding:14px 20px; font-size:15px}

  /* --- içerik --- */
  .icerik{padding:14px}
  .baslik-satir{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:14px}
  .baslik-satir h1{font-size:19px}
  .arac{flex-wrap:wrap}
  .arac .btn{flex:1; min-width:auto}

  /* --- KPI ızgaraları --- */
  .izgara{gap:10px}
  .izgara-4,.izgara-3{grid-template-columns:repeat(2,1fr)}
  .izgara-2{grid-template-columns:1fr}
  .kpi .deger{font-size:22px}

  /* --- tablolar: yatay kaydır --- */
  table{display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
  th,td{padding:9px 10px; font-size:13px}

  /* --- POS: ürünler üstte, adisyon altta --- */
  .pos{grid-template-columns:1fr; height:auto; gap:12px}
  .pos-sol{overflow:visible}
  .urun-izgara{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px;
               max-height:46vh; overflow-y:auto}
  .kategori-serit{overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
  .adisyon{max-height:none}
  .adisyon-liste{max-height:34vh; overflow-y:auto}

  /* --- masalar --- */
  .masalar{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px}
  .masa{padding:13px 6px}

  /* --- giriş ekranı --- */
  .giris-kutu{grid-template-columns:1fr}
  .giris-sol{display:none}

  /* --- modal --- */
  .modal,.perde-kutu{width:100%; max-width:100%; border-radius:14px; padding:18px}
  .perde{padding:12px; align-items:flex-end}
}

/* --- küçük telefon --- */
@media(max-width:520px){
  .izgara-4,.izgara-3{grid-template-columns:1fr}
  .icerik{padding:12px 10px}
  .kart{padding:14px}
  .masalar{grid-template-columns:repeat(3,1fr)}
  .urun-izgara{grid-template-columns:repeat(3,1fr)}
  .btn{padding:12px 14px}
}

/* iOS: 16px altı input odaklanınca sayfayı zoomlar */
@media(max-width:1024px){
  input,select,textarea{font-size:16px !important}
}


/* =====================================================================
   MOBİL — MODAL FORMLARI (ürün kartı, fatura, ayarlar, masa)
   Yeni ekranlardaki çok sütunlu ızgaralar dar ekranda eziliyordu.
   ===================================================================== */
@media(max-width:640px){

  /* Modal tam ekrana yakın, alttan açılan sayfa */
  .perde{padding:0;align-items:stretch}
  .modal,.perde-kutu{
    width:100%;max-width:100%;max-height:100vh;height:100vh;
    border-radius:0;padding:18px 16px 28px;overflow-y:auto;
  }

  /* Modal içindeki TÜM çok sütunlu ızgaralar tek sütun */
  .modal .izgara-2,
  .modal .izgara-3,
  .modal .izgara-4{grid-template-columns:1fr !important;gap:10px !important}

  /* İki alanı yan yana tutmak mantıklı olanlar (alış/satış, miktar/fiyat) */
  .modal .ikili{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  /* Checkbox satırları: ikon solda, metin solda hizalı */
  .modal label{align-items:flex-start !important;text-align:left !important}

  /* Fatura kalem-ekle satırı: dikey diz */
  .modal .kalem-ekle{flex-direction:column !important;gap:8px !important}
  .modal .kalem-ekle > *{width:100% !important;flex:none !important}

  /* Form içi tablo: yatay kaydırılabilir */
  .modal table{display:block;overflow-x:auto;white-space:nowrap}

  /* Alt buton çubuğu: sabit, tam genişlik */
  .modal .form-alt{
    display:flex;gap:8px;position:sticky;bottom:0;
    background:#fff;padding-top:12px;margin-top:16px;
    box-shadow:0 -8px 16px rgba(255,255,255,.9);
  }
  .modal .form-alt .btn{flex:1;padding:14px}

  /* Başlık ve KPI kartları modal içinde tek sütun */
  .modal .kart{padding:12px}
  .modal .deger{font-size:18px}

  /* input/select parmak dostu */
  .modal .alan{padding:12px;font-size:16px}
  .modal select.alan{height:46px}
}

/* Market/manav hızlı satış — görselli ürün kartı */
.urun-kart .resim{width:100%;height:74px;border-radius:8px;object-fit:cover;margin-bottom:7px;background:var(--zemin)}
.urun-kart .resim-yok{width:100%;height:74px;border-radius:8px;margin-bottom:7px;background:linear-gradient(135deg,#EDE9F7,#DDD5F0);
  display:flex;align-items:center;justify-content:center;font-size:30px}
.urun-kart .stok-rozet{position:absolute;top:6px;right:6px;font-size:9px;padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.55);color:#fff;font-weight:700}
.urun-kart{position:relative}
.urun-kart.terazi::after{content:"⚖";position:absolute;top:6px;left:6px;font-size:14px}
.pos-arac{display:flex;gap:8px;margin-bottom:2px}
.pos-arac input{flex:1}

/* =====================================================================
   MODERN KASA (Hızlı Satış) — .pos-modern ile kapsamlanır
   Amaç: kasiyer hızlı dokunsun, fiyatı ve toplamı bir bakışta görsün.
   Tek cesur öğe: koyu lila ödeme paneli. Gerisi sakin.
   ===================================================================== */
.pos-modern{
  --pm-cizgi:#E9E6F2;
  --pm-golge:0 2px 8px rgba(58,36,112,.05), 0 10px 26px rgba(58,36,112,.06);
  --pm-golge-ust:0 6px 20px rgba(58,36,112,.15);
  gap:18px;
}

/* --- Arama / barkod çubuğu --- */
.pos-modern .pos-arac{gap:10px}
.pos-modern .ara-kutu{position:relative;flex:1;display:flex}
.pos-modern .ara-kutu.dar{flex:0 0 230px}
.pos-modern .pos-arac input{
  width:100%;height:54px;border-radius:14px;border:1.5px solid var(--pm-cizgi);
  padding:0 16px 0 46px;font-size:15.5px;background:#fff;transition:border-color .14s, box-shadow .14s;
}
.pos-modern .pos-arac input:focus{
  border-color:var(--lila);box-shadow:0 0 0 4px rgba(108,74,182,.13);outline:none;
}
.pos-modern .ara-ikon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  font-size:16px;opacity:.4;pointer-events:none;
}

/* --- Kategori şeridi: aktif olan dolu, diğerleri renk noktalı --- */
.pos-modern .kategori-serit{gap:9px;padding:2px 2px 8px}
.pos-modern .kategori-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--metin);border:1.5px solid var(--pm-cizgi);
  padding:10px 17px;border-radius:14px;font-size:13px;font-weight:650;
  transition:border-color .14s, box-shadow .14s, color .14s;
}
.pos-modern .kategori-chip .nokta{
  width:9px;height:9px;border-radius:50%;flex:none;background:var(--lila-acik);
}
.pos-modern .kategori-chip:hover{border-color:var(--lila-acik)}
.pos-modern .kategori-chip.aktif{
  color:#fff;border-color:transparent;box-shadow:0 5px 16px rgba(74,44,135,.3);
}
.pos-modern .kategori-chip.aktif .nokta{background:rgba(255,255,255,.85)}

/* --- Ürün kartları --- */
.pos-modern .urun-izgara{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}
.pos-modern .urun-kart{
  border-radius:16px;padding:10px;border:1px solid var(--pm-cizgi);
  box-shadow:var(--pm-golge);transition:transform .12s, box-shadow .12s, border-color .12s;
}
.pos-modern .urun-kart:hover{transform:translateY(-3px);box-shadow:var(--pm-golge-ust);border-color:transparent}
.pos-modern .urun-kart:active{transform:scale(.97)}
.pos-modern .urun-kart .resim,
.pos-modern .urun-kart .resim-yok{height:96px;border-radius:12px;margin-bottom:9px}
.pos-modern .urun-kart .resim-yok{font-size:34px}
.pos-modern .urun-kart .ad{font-size:13px;font-weight:600;height:34px;color:var(--metin)}
.pos-modern .urun-kart .fiyat{font-size:16.5px;margin-top:7px;letter-spacing:-.3px}
.pos-modern .urun-kart .stok-rozet{
  top:8px;right:8px;background:rgba(28,27,33,.62);backdrop-filter:blur(4px);
  font-size:9.5px;padding:3px 7px;border-radius:7px;
}
.pos-modern .urun-kart.terazi::after{top:8px;left:8px;font-size:15px}

/* --- Sepet paneli --- */
.pos-modern .adisyon{
  border-radius:18px;border:1px solid var(--pm-cizgi);box-shadow:var(--pm-golge);
}
.pos-modern .adisyon-bas{
  background:#fff;border-bottom:1px solid var(--pm-cizgi);padding:15px 16px;
}
.pos-modern .adisyon-bas .t{font-size:11.5px;letter-spacing:1.4px}
.pos-modern .adisyon-bas .adet-rozet{
  background:var(--lila-zemin);color:var(--lila-koyu);font-size:11px;font-weight:800;
  padding:4px 10px;border-radius:20px;
}
.pos-modern .adisyon-liste{padding:4px 0}
.pos-modern .kalem{
  grid-template-columns:1fr auto;gap:10px;padding:12px 15px;align-items:center;
  border-bottom:1px solid var(--zemin-gri);
}
.pos-modern .kalem:last-child{border-bottom:0}
.pos-modern .kalem .ad{font-size:13.5px;font-weight:600;margin-bottom:6px}
.pos-modern .kalem .alt{font-size:11.5px;color:var(--metin-solgun)}
.pos-modern .kalem .tut{font-size:14.5px;font-weight:800;color:var(--lila-koyu)}

/* miktar artır/azalt */
.pos-modern .adet-kontrol{
  display:inline-flex;align-items:center;background:var(--lila-zemin);
  border-radius:10px;overflow:hidden;margin-top:2px;
}
.pos-modern .adet-kontrol button{
  width:30px;height:30px;border:0;background:transparent;color:var(--lila-koyu);
  font-size:17px;font-weight:800;cursor:pointer;line-height:1;transition:background .12s;
}
.pos-modern .adet-kontrol button:hover{background:rgba(108,74,182,.14)}
.pos-modern .adet-kontrol .sayi{
  min-width:42px;text-align:center;font-weight:800;font-size:12.5px;color:var(--lila-koyu);
}
.pos-modern .kalem-sil{
  border:0;background:transparent;color:var(--metin-solgun);cursor:pointer;
  font-size:15px;padding:6px;border-radius:8px;transition:.12s;
}
.pos-modern .kalem-sil:hover{background:#FBECEC;color:var(--kirmizi)}

/* boş sepet */
.pos-modern .bos-sepet{
  text-align:center;padding:44px 20px;color:var(--metin-solgun);
}
.pos-modern .bos-sepet .ik{font-size:40px;opacity:.35;margin-bottom:10px}
.pos-modern .bos-sepet .bas{font-size:14px;font-weight:600;color:var(--metin)}
.pos-modern .bos-sepet .alt{font-size:12px;margin-top:4px}

/* --- ÖDEME PANELİ (imza öğe) --- */
.pos-modern .adisyon-alt{
  background:linear-gradient(158deg,#4A2C87 0%,#38215F 100%);
  border-top:0;padding:17px 16px 16px;
}
.pos-modern .odeme-toplam{
  display:flex;justify-content:space-between;align-items:baseline;
  color:#fff;margin-bottom:14px;
}
.pos-modern .odeme-toplam .etiket{
  font-size:11px;font-weight:700;letter-spacing:1.6px;color:rgba(255,255,255,.6);
}
.pos-modern .odeme-toplam .tutar{font-size:33px;font-weight:800;letter-spacing:-1px}
.pos-modern .odeme-izgara{gap:9px}
.pos-modern .odeme-izgara .btn{
  height:52px;border-radius:13px;font-size:13px;font-weight:750;letter-spacing:.3px;border:0;
}
.pos-modern .odeme-izgara .btn-ikincil{
  background:rgba(255,255,255,.13);color:#fff;
}
.pos-modern .odeme-izgara .btn-ikincil:hover{background:rgba(255,255,255,.22)}

/* --- mobil --- */
@media(max-width:900px){
  .pos-modern .ara-kutu.dar{flex:1 1 100%}
  .pos-modern .pos-arac{flex-wrap:wrap}
  .pos-modern .urun-izgara{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:11px}
  .pos-modern .odeme-toplam .tutar{font-size:29px}
}

/* --- Restoran adisyonu: ikram, ara toplamlar, ek tuşlar --- */
.pos-modern .kalem.ikramli{background:#FFFBF0}
.pos-modern .ikram-rozet{
  background:var(--turuncu);color:#fff;font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:6px;letter-spacing:.5px;vertical-align:middle;
}
.pos-modern .kalem .not{
  font-size:11.5px;color:var(--turuncu);margin-bottom:4px;font-weight:600;
}
.pos-modern .odeme-ust{
  display:flex;justify-content:space-between;font-size:12px;
  color:rgba(255,255,255,.62);margin-bottom:3px;
}
.pos-modern .odeme-ust.indirim{color:#FFB4A0}
.pos-modern .odeme-toplam{margin-top:9px}
.pos-modern .btn-mutfak,
.pos-modern .btn-bol{
  width:100%;height:46px;border-radius:12px;margin-bottom:9px;border:0;
  font-size:13px;font-weight:750;letter-spacing:.2px;
}
.pos-modern .btn-mutfak{background:rgba(255,255,255,.16);color:#fff}
.pos-modern .btn-mutfak:hover{background:rgba(255,255,255,.26)}
.pos-modern .btn-bol{background:#fff;color:var(--lila-koyu)}
.pos-modern .btn-bol:hover{background:#F1ECFB}


/* =====================================================================
   AB REVİZE 2026 — GÖRÜNÜM (yükseklik/oturma işini adisyon-otur.js yapar)
   Bu blok yalnızca RENK/GÖLGE/BUTON/KART gibi görselleri yeniler.
   Adisyonun ekrana oturması JS ile ölçülür; burada height math YOK.
   ===================================================================== */
:root{
  --golge:0 1px 2px rgba(58,36,112,.05), 0 10px 28px rgba(58,36,112,.07);
  --golge-ust:0 12px 32px rgba(58,36,112,.16);
}
body{background:#F1EFF8}

/* Kenar menü */
.yan{background:linear-gradient(185deg,#4E2F90 0%,#3A2270 100%)}
.menu li a{transition:.15s;font-weight:500}
.menu li a:hover{background:rgba(255,255,255,.10)}
.menu li a.aktif{background:linear-gradient(135deg,var(--lila-acik),var(--lila));box-shadow:0 8px 20px rgba(108,74,182,.45);font-weight:700}

/* Butonlar */
.btn{border-radius:11px;transition:transform .1s, filter .15s, background .15s}
.btn:active{transform:scale(.97)}
.btn-ana{background:linear-gradient(135deg,var(--lila-acik),var(--lila));box-shadow:0 6px 16px rgba(108,74,182,.28)}
.btn-ana:hover:not(:disabled){filter:brightness(.96)}
.btn-yesil{background:linear-gradient(135deg,#37b46a,#2E9E5B)}
.btn-mavi{background:linear-gradient(135deg,#4f86f7,#2F6FED)}
.btn-turuncu{background:linear-gradient(135deg,#eea043,#E08C22)}
.btn-kirmizi{background:linear-gradient(135deg,#e35a5a,#D64545)}

/* Kartlar / tablo / masa */
.kart{border-radius:16px;box-shadow:var(--golge)}
.kpi.vurgu{box-shadow:0 14px 34px rgba(74,44,135,.30)}
table{border-radius:14px;box-shadow:var(--golge)}
th{background:#EFEAFB;letter-spacing:.6px}
tr:hover td{background:#FAF8FF}
.baslik-satir h1{letter-spacing:-.3px;font-weight:800}
.masa{border-radius:16px;box-shadow:0 5px 16px rgba(0,0,0,.09)}
.masa:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.20)}
.masa .ad{font-size:21px}
.m-bos{background:linear-gradient(160deg,#39b46d,#2E9E5B)}
.m-dolu{background:linear-gradient(160deg,#e15a5a,#Cf3f3f)}
.m-rezerve{background:linear-gradient(160deg,#eca23c,#E08C22)}

/* Ürün kartı */
.urun-kart{border-radius:14px;box-shadow:0 1px 3px rgba(58,36,112,.05)}
.urun-kart:hover{border-color:var(--lila-acik);box-shadow:var(--golge-ust);transform:translateY(-2px)}
.urun-kart .ad{height:auto;min-height:34px;display:flex;align-items:center;justify-content:center;font-weight:600}
.urun-kart .fiyat{margin-top:4px}
.urun-kart .resim{height:64px}
/* Bozuk kutu ikon (☐) -> temiz SVG, tıklamayı engellemez */
.urun-kart .resim-yok{font-size:0 !important;position:relative;background:linear-gradient(135deg,#EDE9F7,#DBD2F1)}
.urun-kart .resim-yok::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:30px 30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4AB6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 2v7c0 1.1.9 2 2 2s2-.9 2-2V2'/><path d='M5 11v11'/><path d='M11 2v20'/><path d='M19 2c-1.7 0-3 2.2-3 5s1.3 4 3 4'/><path d='M19 2v20'/></svg>");}
.urun-kart .resim-yok,.urun-kart .resim-yok *{pointer-events:none}

/* Kategori şeridi */
.kategori-serit{scrollbar-width:none}
.kategori-serit::-webkit-scrollbar{display:none}
.kategori-chip{box-shadow:0 2px 8px rgba(0,0,0,.10);font-weight:700}

/* ---- ADİSYON GÖRÜNÜM (boyut değil, sadece stil) ---- */
.adisyon{border:1px solid #E9E4F4;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(58,36,112,.10)}
.adisyon-bas{background:linear-gradient(135deg,#F0EBFB,#E7DEFA);padding:15px 18px}
.adisyon-bas .t{font-size:12px;letter-spacing:1.4px;color:var(--lila-koyu);font-weight:800}
.adisyon-liste{background:#fff}
.adisyon-liste::-webkit-scrollbar{width:7px}
.adisyon-liste::-webkit-scrollbar-thumb{background:#D9D2EC;border-radius:4px}
.kalem{border-bottom:1px solid #F3F1F9}
.kalem .ad{font-weight:600}
.kalem .tut{color:var(--lila-koyu);font-weight:800;text-align:right}
.kalem .mik{background:var(--lila-zemin);color:var(--lila-koyu);border-radius:9px}

/* Özet + ödeme: koyu lila panel */
.adisyon-alt{background:linear-gradient(162deg,#4A2C87 0%,#37215C 100%);border-top:0;padding:14px 15px 15px}
.adisyon-alt .toplam-satir{color:rgba(255,255,255,.60);font-size:12.5px;margin-bottom:3px}
.adisyon-alt .toplam-satir span:last-child{color:rgba(255,255,255,.92);font-weight:600}
.adisyon-alt .toplam-genel{color:#fff;align-items:baseline;margin:8px 0 12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.16)}
.adisyon-alt .toplam-genel span:first-child{font-size:12px;letter-spacing:1.6px;opacity:.62;font-weight:700}
.adisyon-alt .toplam-genel span:last-child{font-size:29px;font-weight:800;letter-spacing:-.6px}
.adisyon-alt .btn{border-radius:12px;font-weight:750;border:0;transition:transform .1s,filter .15s}
.adisyon-alt .btn:active{transform:scale(.98)}
.adisyon-alt > .btn{width:100%;height:42px;margin-bottom:8px}
.adisyon-alt > .btn-mor,.adisyon-alt > .btn:not(.btn-yesil):not(.btn-mavi):not(.btn-turuncu):not(.btn-kirmizi):not(.btn-ikincil){background:rgba(255,255,255,.14);color:#fff}
.adisyon-alt > .btn-ikincil{background:#fff;color:var(--lila-koyu)}
.adisyon-alt .odeme-izgara{gap:8px}
.adisyon-alt .odeme-izgara .btn{height:48px;font-size:13px;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.adisyon-alt .odeme-izgara .btn:hover{filter:brightness(1.06)}
.adisyon-alt .odeme-izgara .btn-mor{background:rgba(255,255,255,.16);color:#fff}

/* Modal / mutfak */
.modal{border-radius:18px}
.mutfak-kart{border-radius:16px}
.mutfak-bas{background:linear-gradient(135deg,var(--lila-acik),var(--lila))}

/* Sayfa bu ekranda kaymasın (yan menü kendi içinde kaysın) — JS ölçümü şaşmasın */
@media(min-width:1025px){
  html:has(.pos),body:has(.pos){height:100%;overflow:hidden}
  .kabuk:has(.pos){height:100vh;overflow:hidden}
  .yan{overflow-y:auto}
}

/* =====================================================================
   MODAL (pop-up) TAŞMA DÜZELTMESİ
   Sayfa kilidi (POS'ta overflow:hidden) uzun modalları kesebiliyordu.
   Modal her zaman ekrana sığar ve KENDİ İÇİNDE kaydırılır.
   ===================================================================== */
.perde{align-items:center;justify-content:center;padding:16px;overflow:auto}
.perde.acik{display:flex}
.modal,.perde-kutu{
  max-height:calc(100vh - 32px) !important;
  overflow-y:auto !important;
  margin:auto;
}
/* Sayfa kilidi açıkken bile perde scroll edebilsin */
html:has(.pos) .perde,body:has(.pos) .perde{overflow:auto !important}

@media(max-width:640px){
  .perde{padding:0;align-items:stretch}
  .modal,.perde-kutu{max-height:100vh !important;height:100vh;border-radius:0}
}

/**/
/* ===== 18" dokunmatik POS: sepette daha çok ürün göster ===== */
@media (max-width: 1500px) {
  .pos{ grid-template-columns:1fr 430px; gap:12px; }

  /* Sepet satırlarını kompaktla — daha çok ürün sığsın */
  .pos-modern .kalem,
  .pos-sag .kalem,
  .adisyon .kalem{ padding:9px 12px !important; }

  .pos-modern .kalem .ad,
  .pos-sag .kalem .ad,
  .adisyon .kalem .ad{ font-size:14px !important; margin-bottom:3px !important; }

  .pos-modern .kalem .alt,
  .pos-sag .kalem .alt,
  .adisyon .kalem .alt{ font-size:11.5px !important; }

  .pos-modern .kalem .tut,
  .pos-sag .kalem .tut,
  .adisyon .kalem .tut{ font-size:15px !important; }

  /* Adet +/- kontrolü: dokunmatik için yeterli ama kompakt */
  .pos-modern .adet-kontrol button,
  .adet-kontrol button{ width:34px !important; height:34px !important; }
  .pos-modern .adet-kontrol .sayi,
  .adet-kontrol .sayi{ min-width:36px !important; }

  /* Sepet listesi: akıcı dokunmatik kaydırma + kalın çubuk */
  .adisyon-liste,
  .pos-sag .adisyon-liste{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .adisyon-liste::-webkit-scrollbar{ width:14px !important; }
  .adisyon-liste::-webkit-scrollbar-thumb{
    background:#a894d8 !important; border-radius:7px; border:3px solid #fff;
  }
}
/* ===== Kategori sekmeleri: taşmasın, hepsi okunsun (tüm sektörler) ===== */
.kategori-serit,
.pos-modern .kategori-serit{
  flex-wrap:wrap !important;
  overflow-x:visible !important;
  row-gap:8px;
}
.kategori-chip,
.pos-modern .kategori-chip{
  white-space:nowrap;
  font-size:12.5px;
}
/* ===== Restoran adisyon: geniş + okunur (işletmeci okuyabilsin) ===== */
@media (max-width: 1600px) {
  /* Adisyonu genişlet — .pos-modern grid'inde sağ kolon */
  .pos-modern{ grid-template-columns:1fr 440px !important; }
}

/* Adisyon kalem satırları: büyük, okunur yazı (her ekranda) */
.pos-modern .kalem .ad,
.adisyon .kalem .ad{ font-size:15.5px !important; font-weight:600 !important; }

.pos-modern .kalem .tut,
.adisyon .kalem .tut{ font-size:16px !important; font-weight:800 !important; }

.pos-modern .kalem .mik,
.adisyon .kalem .mik{ font-size:14px !important; min-width:42px !important; padding:5px 9px !important; }

.pos-modern .kalem .not,
.adisyon .kalem .not{ font-size:12.5px !important; }

.pos-modern .kalem,
.adisyon .kalem{ padding:11px 10px !important; }

/* Adisyon listesi: rahat dokunmatik kaydırma + kalın çubuk */
.adisyon-liste{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.adisyon-liste::-webkit-scrollbar{ width:14px; }
.adisyon-liste::-webkit-scrollbar-thumb{
  background:#b8a9e0; border-radius:7px; border:3px solid #fff;
}

/* Alt toplam kısmı da büyük okunur */
.adisyon-alt .toplam-genel span:last-child,
.adisyon-alt .genel span:last-child{ font-size:26px !important; }

/* ===== 1366x768 restoran: mor alan dikeyde kısa, beyaz liste uzun ===== */
@media (max-width: 1400px) {
  /* Beyaz liste alanı maksimum dikey yer alsın */
  .pos-modern .adisyon-liste{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
  }

  /* MOR ALAN (adisyon-alt) toplam yüksekliğini kıs */
  .pos-modern .adisyon-alt{ padding:6px 8px !important; }

  /* Ara toplam / KDV satırları minimum */
  .pos-modern .odeme-ust{ padding:0 !important; margin:0 !important; font-size:11px !important; line-height:1.35 !important; }

  /* TOPLAM satırı kısa */
  .pos-modern .odeme-toplam{ padding:2px 0 !important; margin:1px 0 !important; }
  .pos-modern .odeme-toplam .tutar{ font-size:18px !important; }
  .pos-modern .odeme-toplam .etiket{ font-size:11px !important; }

  /* Mutfağa Gönder / Hesabı Böl ince */
  .pos-modern .btn-mutfak,
  .pos-modern .btn-bol{
    padding:6px 10px !important; font-size:12px !important;
    min-height:0 !important; height:auto !important; margin:2px 0 !important;
  }

  /* Ödeme butonları (Nakit/Kart/Yemek/Veresiye) ince */
  .pos-modern .odeme-izgara{ gap:4px !important; margin-top:3px !important; }
  .pos-modern .odeme-izgara .btn{
    padding:8px 6px !important; font-size:12px !important;
    min-height:0 !important; height:auto !important;
  }

  /* Kalem satırları net */
  .pos-modern .kalem{ padding:8px 8px !important; }
  .pos-modern .kalem .ad{ font-size:14.5px !important; }
  .pos-modern .kalem .tut{ font-size:15px !important; }
}