/* === Temel / Değişkenler ================================================== */
:root{
  /* Ana palet (DARK varsayılan) */
  --bg:#0f1116; 
  --panel:#161a22; 
  --text:#e5e7eb; 
  --muted:#9aa3b2; 
  --muted-strong:#b4bdcc; /* başlık/thead vb. için */
  --accent:#7dd3fc;
  --ok:#34d399; 
  --err:#f87171; 
  --warn:#fbbf24; 
  --bd:#202636; 
  --bd2:#283041;

  /* Ek yüzey/özel alanlar */
  --topbar-bg:#0b0e14;
  --input-bg:#0b0f16;
  --tile-bg:#121826;         /* ürün / ödeme kartı zemini */
  --list-bg:#0e131b;         /* hesap listeleri vb. */
  --hover-bg:#10151f;        /* dropdown hover */
  --focus:#2a394f;           /* odak/aktif vurgular */

  /* Masa kartları (dashboard) */
  --card-closed-bg:#0f151f;  
  --card-closed-bd:#1f2a3a;
  --card-open-bg:#103128;    
  --card-open-bd:#1e694e;
  --tc-top:#cfe9dd;          /* saat/üst satır metin */
  --tc-section:#cfe9ff;      /* kategori adı */
  --tc-name:#d6f1ff;         /* masa adı */

  /* Amber temalı yönetim kartları */
  --amber-bg:#171307; 
  --amber-bd:#4a3b12;

  /* Yumuşak arkaplanlar (alpha ön-hazır) */
  --accent-soft-10: rgba(125,211,252,0.10);
  --accent-soft-12: rgba(125,211,252,0.12);
  --ok-soft-12:     rgba(52,211,153,0.12);
  --ok-soft-20:     rgba(52,211,153,0.20);
  --err-soft-12:    rgba(248,113,113,0.12);
  --warn-soft-08:   rgba(250,204,21,0.08);

  /* İnset/halo gölgeler */
  --ok-inset-shadow: 0 0 0 1px rgba(52,211,153,.15) inset;

  /* Uyarı kutuları çerçeveleri */
  --ok-soft-bd: rgba(52,211,153,.30);
  --err-soft-bd: rgba(248,113,113,.30);

  /* Overlay (modal) */
  --overlay-bg: rgba(2,6,12,.60);
}

/* Light tema — HTML tagine data-theme="light" eklersen aktif olur */
:root[data-theme="light"]{
  --bg:#F7F8FB;
  --panel:#FFFFFF;
  --text:#0F172A;
  --muted:#6B7280;
  --muted-strong:#4B5563;
  --accent:#2563EB;
  --ok:#059669;
  --err:#DC2626;
  --warn:#D97706;
  --bd:#E5E7EB;
  --bd2:#D1D5DB;

  --topbar-bg:#FFFFFF;
  --input-bg:#FFFFFF;
  --tile-bg:#FFFFFF;
  --list-bg:#FAFAFA;
  --hover-bg:#F3F4F6;
  --focus:#93C5FD;

  --card-closed-bg:#F3F4F6;
  --card-closed-bd:#E5E7EB;
  --card-open-bg:#ECFDF5;
  --card-open-bd:#A7F3D0;
  --tc-top:#065F46;
  --tc-section:#1D4ED8;
  --tc-name:#0B1324;

  --amber-bg:#FFF7E6;
  --amber-bd:#F5D08A;

  --accent-soft-10: rgba(37,99,235,0.10);
  --accent-soft-12: rgba(37,99,235,0.12);
  --ok-soft-12:     rgba(16,185,129,0.12);
  --ok-soft-20:     rgba(16,185,129,0.20);
  --err-soft-12:    rgba(220,38,38,0.12);
  --warn-soft-08:   rgba(217,119,6,0.08);

  --ok-inset-shadow: 0 0 0 1px rgba(16,185,129,.18) inset;
  --ok-soft-bd: rgba(16,185,129,.28);
  --err-soft-bd: rgba(220,38,38,.28);

  --overlay-bg: rgba(15,23,42,.45);
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  height: 100%;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.9; }
.container{ width:min(1300px, 92%); margin:0 auto; }

/* === Üst Bar =============================================================== */
.topbar{ background:var(--topbar-bg); border-bottom:1px solid var(--bd); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.topbar h1{ margin:0; font-size:20px; }

/* === Kart / Rozet / Uyarı ================================================== */
h2{ margin-top:24px; }
.card{ background:var(--panel); border:1px solid var(--bd); border-radius:12px; padding:16px; margin:5px 0; }

.card.section-add,
.card.section-manage{
  background:var(--amber-bg);
  border-color:var(--amber-bd);
}
.card h3{ margin:0 0 8px; }
.card .status{ color:var(--muted); margin:8px 0; }
.card .status.open{ color:var(--warn); }

.badge{ padding:2px 8px; border-radius:999px; border:1px solid var(--bd); font-size:12px; text-transform:uppercase; }
.badge.open{ background:var(--accent-soft-10); }
.badge.closed{ background:var(--warn-soft-08); }

.alert{ padding:10px 12px; border-radius:8px; margin:12px 0; }
.alert.success{ background:var(--ok-soft-12); border:1px solid var(--ok-soft-bd); }
.alert.error{ background:var(--err-soft-12); border:1px solid var(--err-soft-bd); }

/* === Tablo ================================================================ */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px 8px; border-bottom:1px solid var(--bd); }
.table th{ text-align:left; color:var(--muted-strong); }
.nowrap{ white-space:nowrap; }

/* === Formlar =============================================================== */
.form label{ display:block; margin-bottom:8px; }
input, select{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--bd2);
  background:var(--input-bg); color: var(--text);
}
input:focus, select:focus{ outline:2px solid var(--focus); outline-offset:1px; }

/* Dikey form */
.form-vertical{ display:flex; flex-direction:column; gap:10px; }
.form-vertical label{ display:flex; flex-direction:column; gap:6px; width:100%; }
.form-vertical .row-inline{ display:flex; gap:8px; flex-wrap:wrap; }

/* Yatay form */
.form-row{ display:grid; gap:5px; align-items:end; }
.form-row.row2{ grid-template-columns: auto auto; }
.form-row.row3{ grid-template-columns: auto auto auto; }
.form-row.row4{ grid-template-columns: auto auto auto auto; }
.form-row.row5{ grid-template-columns: auto auto auto auto auto; }
.form-row.row6{ grid-template-columns: auto auto auto auto auto auto; }
.form-row label{ display:flex; flex-direction:column; gap:6px; }
.form-row .btn{ margin:0; height:38px; }

/* === Butonlar ============================================================= */
.btn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--bd2);
  border-radius:8px;
  color:var(--text);
  background:var(--input-bg);
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }
.btn.primary{ background:var(--accent-soft-10); border-color:var(--focus); }
.btn.success{ background:var(--ok-soft-12); border-color:var(--ok-soft-bd); }
.btn.danger{ background:var(--err-soft-12); border-color:var(--err-soft-bd); }

/* === Düzen / Grid Yardımcıları =========================================== */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.layout{ display:grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap:12px; align-items:start; }
.side-layout{ display:grid; grid-template-columns: 1fr 360px; gap:12px; align-items:start; }
.muted{ color:var(--muted); }
.totals .grand{ font-size:18px; }

/* === Dashboard Masa Kartları — v2 ========================================= */
.table-card{
  position:relative; display:block; transition:transform .05s ease;
  border:1px solid var(--bd); border-radius:12px; padding:0;
}
.table-card:hover{ transform: translateY(-1px); }

/* Kapalı/Açık masa görünümleri */
.table-card.closed{
  background:var(--card-closed-bg);
  border-color:var(--card-closed-bd);
  opacity:1;
}
.table-card.open{
  background:var(--card-open-bg);
  border-color:var(--card-open-bd);
  box-shadow: var(--ok-inset-shadow);
}

/* İç yerleşim (genel) */
.table-card .table-card-inner{
  display:flex; flex-direction:column; gap:6px;
  min-height:140px; padding:10px 12px 12px;
}

/* Üst/orta/alt metin */
.tc-top{
  display:flex; gap:12px; align-items:center;
  font-size:14px; color:var(--tc-top); letter-spacing:.2px;
  opacity:.95; padding:2px 2px 0;
}
.tc-top-row{ display:flex; justify-content:space-between; align-items:center; }
.tc-mid{ display:flex; flex-direction:column; gap:4px; padding:2px; }
.tc-section{ font-size:16px; font-weight:700; color:var(--tc-section); opacity:.95; }
.tc-name{ font-size:26px; font-weight:800; color:var(--tc-name); letter-spacing:.3px; }
.tc-total{ font-size:26px; font-weight:800; color:var(--accent); }
.tc-bottom{ margin-top:6px; padding:2px; }

/* Eski rozet uyumu */
.table-badge{
  display:inline-block; margin-bottom:6px;
  padding:2px 8px; border-radius:999px; font-size:12px;
  background:var(--accent-soft-12); border:1px solid var(--focus); color:var(--tc-section);
}
.table-card.open .table-badge{
  background:var(--ok-soft-12); border-color:var(--ok-soft-bd); color:var(--text);
}

/* === POS Yerleşimi (order.php) ============================================ */
.pos-layout{ display:grid; grid-template-columns:360px 1fr 220px; gap:12px; align-items:start; }

/* Sol: Hesap paneli */
.pos-bill{ display:flex; flex-direction:column; min-height:520px; }
.pos-bill .bill-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.pos-bill .table-chip{ background:var(--accent-soft-12); border:1px solid var(--focus); padding:6px 10px; border-radius:999px; font-weight:600; }

.bill-items{
  flex:1; overflow:auto; border:1px dashed var(--bd2); border-radius:10px;
  padding:8px; margin-bottom:10px; background:var(--list-bg);
}
.bill-row{
  display:grid; grid-template-columns:40px 1fr auto auto; gap:8px; align-items:center;
  padding:8px; border-bottom:1px solid var(--bd);
}
.bill-row .qty{font-weight:700;font-size: 12px;}
.bill-row .title{font-size: 12px;}
.bill-row .price{font-weight:600;font-size: 14px;}
.bill-row .actions{display:flex;gap: 4px;}
.bill-row .mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 25px;
  height: 25px;
  border:1px solid var(--bd2);
  border-radius: 5px;
  cursor:pointer;
}
.bill-row .mini.danger{ border-color:var(--err-soft-bd); }

.bill-summary{ margin-top:8px; }
.bill-summary .line{ display:flex; justify-content:space-between; padding:6px 0; }
.bill-summary .line.total{ border-top:1px solid var(--bd2); margin-top:6px; padding-top:10px; font-size:18px; }
.pay-row{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.btn.pay{ background:var(--ok-soft-20); border-color:var(--ok-soft-bd); font-weight:700; }

/* Orta: Ürünler */
.pos-products{ min-height:520px; }
.pos-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pos-toolbar .crumbs{ color:var(--muted-strong); }
.pos-toolbar .search input{ width:220px; }

/* Ürün ızgarası/kartı */
.product-grid{display:grid;grid-template-columns: repeat(auto-fill, minmax(160px,1fr));gap: 5px;}
.product-card{
  background:var(--tile-bg); border:1px solid var(--bd2); border-radius:12px; padding:12px;
  cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; min-height:120px;
}
.product-card:hover{ outline:1px solid var(--focus); }
.pc-top .pc-title, .product-card .pc-name{ font-size:16px; font-weight:700; margin-bottom:8px; }
.pc-bottom{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pc-price{ font-weight:600; color:var(--muted-strong); }
.pc-qty{display:flex;align-items:center;gap: 3px;}
.pc-qty input{width: 55px;text-align:center;}
.product-card .btn{ cursor:pointer; }

/* Sağ: Kategoriler (order.php) */
.pos-cats{ position:sticky; top:12px; height:max-content; }
.cats-title{ font-weight:700; margin-bottom:8px; }
.cats-list{ display:flex; flex-direction:column; gap:8px; }
.cat-pill{ display:block; padding:10px 12px; border-radius:12px; border:1px solid var(--bd2); }
.cat-pill.active{ background:var(--accent-soft-12); border-color:var(--focus); }

/* === Ödeme Ekranı ========================================================== */
.pay-wrap{ display:flex; flex-direction:column; gap:14px; }
.pay-amount input{
  width:100%; font-size:28px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--bd2); background:var(--input-bg); color:var(--text);
}
.pay-methods{ display:grid; grid-template-columns:repeat(3, minmax(120px,1fr)); gap:12px; }
.pay-card{
  background:var(--tile-bg); border:1px solid var(--bd2); border-radius:12px; padding:18px;
  text-align:center; font-weight:700; cursor:pointer;
}
.pay-card:hover{ outline:1px solid var(--focus); }

/* === Masa/Kategori Yönetimi (table_manage.php) ============================ */
.section-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.section-chip{ display:inline-block; padding:6px 10px; border:1px solid var(--bd2); border-radius:999px; }
.section-chip.active{ background:var(--accent-soft-12); border-color:var(--focus); }
.section-chip.danger{ border-color:var(--err-soft-bd); }

.section-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.scard{
  background:var(--tile-bg); border:1px solid var(--bd2); border-radius:12px; padding:12px;
  display:flex; flex-direction:column; gap:8px; cursor:pointer;
}
.scard:hover{ outline:1px solid var(--focus); }
.scard.off{ opacity:.7; cursor:default; }
.scard .sname{ font-weight:800; font-size:18px; }
.scard .meta{ display:flex; gap:6px; flex-wrap:wrap; }
.scard .chip{ border:1px solid var(--bd2); border-radius:999px; padding:2px 8px; font-size:12px; opacity:.9; }
.scard .actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.scard .actions .btn{ padding:6px 10px; }

.table-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.tcard{
  background:var(--tile-bg); border:1px solid var(--bd2); border-radius:12px; padding:12px;
  display:flex; flex-direction:column; gap:8px;
}
.tcard.off{ opacity:.7; }
.tcard .tname{ font-weight:800; font-size:18px; }
.tcard .meta{ display:flex; gap:6px; flex-wrap:wrap; }
.tcard .chip{ border:1px solid var(--bd2); border-radius:999px; padding:2px 8px; font-size:12px; opacity:.9; }
.tcard .actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.tcard .actions .btn{ padding:6px 10px; }

/* dropdown ve nav */
.main-nav{ display:flex; align-items:center; gap:12px; }
.nav-spacer{ flex:1; }
.dropdown{ position:relative; display:inline-block; }
.drop-toggle{ display:inline-block; padding:6px 8px; border-radius:8px; }

.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  z-index:50;
  background:var(--panel);
  border:1px solid var(--bd);
  border-radius:10px;
  min-width:190px;
  padding:14px 6px 6px;
}
.dropdown-menu::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-8px; height:8px;
}
.dropdown-menu a{ display:block; padding:8px 10px; border-radius:8px; width: 210px; }
.dropdown-menu a:hover,
.dropdown-menu a:focus{ background:var(--hover-bg); }
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu{ display:block; }

/* KPI kartları */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.kpi-card{ background:var(--panel); border:1px solid var(--bd); border-radius:12px; padding:16px; }
.kpi-card .kpi-title{ font-size:13px; color:var(--muted); margin-bottom:6px; letter-spacing:.2px; }
.kpi-card .kpi-value{ font-size:26px; font-weight:800; }

/* Sayfalama */
.pager{ display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.pager a, .pager span{
  display:inline-block; padding:6px 10px; border:1px solid var(--bd); border-radius:8px; background:var(--input-bg);
}
.pager .active{ background:var(--accent-soft-12); border-color:var(--focus); }
.filter-row{ display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:end; }
@media (max-width: 900px){ .filter-row{ grid-template-columns: 1fr; } }

/* Icons */
.badge i{ margin-right:6px; vertical-align:-1px; opacity:.9; }
.tc-top .fa-clock{ margin-right:6px; opacity:.9; }

/* === MODAL — Proje genelinde tek tip görünüm =============================== */
.modal-overlay,
.modal-backdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  background:var(--overlay-bg);
  backdrop-filter:saturate(140%) blur(3px);
}
.modal-backdrop{ display:none; }

.modal,
.modal-card{
  width:min(720px, 92vw);
  max-height:min(84vh, 900px);
  overflow:auto;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--bd);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  padding:16px;
  animation:modalPop .16s ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.card.modal-card,
.card.modal-card.section-manage{
  background:var(--panel) !important;
  border-color:var(--bd) !important;
}
.modal h3,
.modal-card h3{
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:.2px;
}
.modal .form-row,
.modal-card .form-row{
  display:grid;
  gap:10px;
  grid-template-columns:1fr 1fr;
}
.modal .form-vertical,
.modal-card .form-vertical{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.modal .form-row label,
.modal-card .form-row label{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.modal input, .modal select,
.modal-card input, .modal-card select{
  background:var(--input-bg);
  color:var(--text);
  border:1px solid var(--bd2);
}
.modal input:focus, .modal select:focus,
.modal-card input:focus, .modal-card select:focus{
  outline:2px solid var(--focus);
  outline-offset:1px;
}
.modal .actions,
.modal-card .actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}
.modal-close{
  position:absolute;
  top:10px; right:12px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  border-radius:8px;
  cursor:pointer;
  color:var(--text);
  background:transparent;
  border:1px solid var(--bd);
  opacity:.85;
}
.modal-close:hover{ opacity:1; filter:brightness(1.05); }
.modal-close:focus{ outline:2px solid var(--focus); outline-offset:2px; }
@media (max-width: 560px){
  .modal, .modal-card{ width:min(560px, 96vw); padding:14px; }
  .modal .form-row, .modal-card .form-row{ grid-template-columns:1fr; }
}
@keyframes modalPop{
  from{ transform:scale(.985) translateY(3px); opacity:0; }
  to  { transform:none; opacity:1; }
}

/* === index.php masa gridini sıkılaştır — geniş ekranda 7 sütun ============
   (Dilersen 10 istiyorsan: repeat(10, minmax(0,1fr)) yapabilirsin.) */
#tablesGrid .grid{
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

/* === index.php kare ve eşit yükseklikte masa kartları ===================== */
#tablesGrid .table-card{
  aspect-ratio: 1 / 1;   /* modern tarayıcılar */
  display: block;
  border-radius: 10px;
}
/* İç iskeleti kareye göre sabitle (üst/orta/alt) */
#tablesGrid .table-card .table-card-inner{
  height: 100%;
  min-height: 0;         /* global min-height'i sıfırla */
  padding: 5px;
  display: grid;
  grid-template-rows: 20px 1fr 18px;
  gap: 4px;
  overflow: hidden;
}
/* Üst/alt yoksa da yükseklik dengesi için yer tutucular */
#tablesGrid .table-card .table-card-inner::before,
#tablesGrid .table-card .table-card-inner::after{
  content: "";
  display: block;
}
#tablesGrid .table-card .table-card-inner:has(.tc-top)::before{ display:none; }
#tablesGrid .table-card .table-card-inner:has(.tc-bottom)::after{ display:none; }

/* Grid içi tipografi/taşma */
#tablesGrid .tc-top{ align-self: start; font-size: 10px; gap: 8px; padding: 0 2px; }
#tablesGrid .tc-mid{
  align-self: stretch;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
#tablesGrid .tc-bottom{ align-self: end; }
#tablesGrid .tc-bottom small{ font-size: 11px; opacity: .9; }

/* Metin kısaltmaları */
#tablesGrid .tc-section{
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
}
#tablesGrid .tc-name{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;

  /* Standart özellik (modern tarayıcılar) */
  line-clamp: 2;
  

  /* Eski WebKit/Chromium/Safari fallback */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#tablesGrid .tc-total{font-size: 12px;font-weight: 800;margin-top: auto;}
#tablesGrid .badge{ font-size: 8px; padding: 2px 6px; }

/* Aspect-ratio desteklemeyenler için kare fallback */
@supports not (aspect-ratio: 1 / 1){
  #tablesGrid .table-card{ position: relative; }
  #tablesGrid .table-card::before{
    content: ""; display: block; padding-top: 100%;
  }
  #tablesGrid .table-card .table-card-inner{
    position: absolute; inset: 0;
  }
}

/* Responsive kolonlar (istersen koru) */
@media (max-width: 1200px){
  #tablesGrid .grid{ grid-template-columns: repeat(8, minmax(0,1fr)); }
}
@media (max-width: 980px){
  #tablesGrid .grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
}
@media (max-width: 760px){
  #tablesGrid .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 520px){
  #tablesGrid .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 380px){
  #tablesGrid .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* Ödeme sırasında kilitli masa görünümü (index.php) */
.table-card.locked{
  background: var(--amber-bg);
  border-color: var(--amber-bd);
  box-shadow: 0 0 0 1px rgba(245,208,138,.22) inset;
}
.table-card.locked .tc-section,
.table-card.locked .tc-name{ color: var(--text); }
.table-card.locked .badge{ background: var(--warn-soft-08); }

/* Tıklanamaz kart */
.card.disabled{
  pointer-events: none;
  cursor: not-allowed;
  /* istersen hafifçe soluk yapabilirsin:
  opacity: .96; */
}