/* =========================================================================
   PLASİYER UYGULAMASI — ORTAK STİL DOSYASI (MODERNİZE EDİLMİŞ)
   Tüm sayfa içi <style> blokları buraya taşınmıştır.
   Sadece görünüm/düzen değiştirilmiştir; sunucu taraflı veri çekme/sorgu
   metodlarına (asp: kontrolleri, ID, OnClick vb.) DOKUNULMAMIŞTIR.
   ========================================================================= */

:root{
  --color-primary:#0058c0;
  --color-primary-dark:#02204b;
  --color-primary-light:#e6f0fb;
  --color-accent:#0098b8;
  --color-danger:#e5484d;
  --color-warning:#f5a623;
  --color-indigo:#1e3a8a;
  --color-rose:#22b8cf;
  --color-text:#1c2733;
  --color-text-muted:#4a5568;
  --color-bg:#f4f6f9;
  --color-surface:#ffffff;
  --color-border:#e1e6ec;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 3px rgba(20,30,50,.08);
  --shadow-md:0 6px 20px rgba(20,30,50,.10);
  --shadow-lg:0 12px 32px rgba(20,30,50,.16);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --font-main:"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  --header-h:56px;
  --bottom-nav-h:60px;
}

/* =========================================================================
   KARANLIK MOD — <html data-theme="dark"> olduğunda tüm renk değişkenleri
   burada devreye girer, site genelinde otomatik uygulanır.
   ========================================================================= */
[data-theme="dark"]{
  --color-primary:#3d8bf2;
  --color-primary-dark:#1a3a66;
  --color-primary-light:#182b45;
  --color-accent:#22c3e6;
  --color-danger:#f2585d;
  --color-warning:#f5bb5c;
  --color-indigo:#6d8ee0;
  --color-rose:#4dd0e5;
  --color-text:#e7eaee;
  --color-text-muted:#9aa4b2;
  --color-bg:#12161c;
  --color-surface:#1b212a;
  --color-border:#2c333d;
  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);
}
[data-theme="dark"] .topbar-logo-icon,
[data-theme="dark"] .sidebar-logo-icon{ filter:brightness(0) invert(1); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea{
  background:var(--color-surface); color:var(--color-text); border-color:var(--color-border);
}
[data-theme="dark"] table.grid-table thead{ background:var(--color-primary-dark); }

/* Sipariş/Dağıtım listelerinde "bugün işlem yapıldı" rozeti */
.islem-rozeti{
  display:inline-block;
  background:#e6f9ee;
  color:#1a9a52;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  margin-left:4px;
  white-space:nowrap;
}
[data-theme="dark"] .islem-rozeti{ background:#123322; color:#4ade80; }

/* Giriş ekranında topbar olmadığı için karanlık mod düğmesi sağ üstte sabit kalır. */
body.login-page #temaDegistirBtn{
  position:fixed; top:14px; right:14px; z-index:9998;
  width:38px; height:38px; border-radius:50%;
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-border); box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer;
}

/* Yukarı çık düğmesi — tema düğmesinin karşı tarafında (sol altta) */
#yukariCikBtn{
  position:fixed;
  left:16px; bottom:76px;
  z-index:9998;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--color-surface);
  color:var(--color-text);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-md);
  display:none;
  align-items:center; justify-content:center;
  font-size:20px;
  cursor:pointer;
}
@media (min-width:900px){
  #yukariCikBtn{ bottom:24px; }
}

/* Çift tıklama koruması — kayıt sırasında ekranı kısa süreliğine kilitler */
#gonderimOverlay{
  position:fixed; inset:0;
  z-index:999998;
  background:rgba(255,255,255,.35);
  cursor:wait;
}
[data-theme="dark"] #gonderimOverlay{ background:rgba(0,0,0,.35); }

/* Sabit sepet rozeti — sağ üstte, ürün kataloğu sayfasında her zaman görünür */
.sepet-rozeti{
  position:fixed;
  top:calc(var(--header-h) + 10px);
  right:12px;
  z-index:9997;
}
.sepet-rozeti a{
  display:flex; align-items:center; gap:8px;
  background:var(--color-primary);
  color:#fff;
  border-radius:999px;
  padding:8px 14px 8px 10px;
  box-shadow:var(--shadow-md);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.sepet-rozeti-ikon{ position:relative; font-size:18px; line-height:1; }
.sepet-rozeti-badge{
  position:absolute;
  top:-9px; right:-10px;
  background:var(--color-danger);
  color:#fff;
  border-radius:999px;
  min-width:17px; height:17px;
  font-size:10.5px;
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
  font-weight:800;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Tüm elemanlar (form kontrolleri, butonlar, tablolar dahil) her zaman aynı yazı tipini kullansın —
   tarayıcılar input/select/textarea/button'a varsayılan olarak farklı bir sistem yazı tipi uygular,
   bu kural onu ezip site genelinde tek/tutarlı bir yazı tipi garanti eder. */
button,input,select,textarea,table,th,td{
  font-family:inherit;
}

html,body{
  margin:0;
  padding:0;
  font-family:var(--font-main);
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-text-size-adjust:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; }

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 var(--space-4);
}

/* ---------- Üst bar (ortak) ---------- */
.app-topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  height:var(--header-h);
  padding:0 var(--space-4);
  background:var(--color-primary);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.app-topbar .app-topbar-title{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-logo-icon{
  height:22px;
  width:auto;
  flex:0 0 auto;
}
.sidebar-logo-icon{
  height:26px;
  width:auto;
  flex:0 0 auto;
}
.app-topbar a.icon-btn,
.app-topbar .icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:18px;
}
.app-topbar a.icon-btn:hover,
.app-topbar .icon-btn:hover{
  background:rgba(255,255,255,.28);
}
.app-topbar .app-topbar-sub{
  font-size:12px;
  opacity:.85;
}

/* ---------- Genel kart / bölüm ---------- */
.card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
  padding:var(--space-4);
}

.page-wrap{
  padding:var(--space-4) var(--space-4) var(--space-6);
  max-width:1100px;
  margin:0;
}

/* =========================================================================
   UYGULAMA KABUĞU — masaüstünde sabit kenar menü, mobilde alt gezinme çubuğu
   ========================================================================= */
:root{ --sidebar-w:230px; }

.app-shell{ min-height:100vh; min-height:100dvh; }

.app-sidebar{
  display:none; /* mobilde gizli, alt gezinme çubuğu kullanılır */
}
.app-sidebar .sidebar-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px 18px;
  font-size:14.5px;
  line-height:1.2;
  letter-spacing:.2px;
  font-weight:700;
  color:var(--color-primary);
  border-bottom:1px solid var(--color-border);
}
.app-sidebar .sidebar-user{
  padding:14px 18px;
  font-size:12px;
  color:var(--color-text-muted);
  border-bottom:1px solid var(--color-border);
}
.app-sidebar .sidebar-user b{ display:block; color:var(--color-text); font-size:14px; margin-top:2px; }
.app-sidebar nav{ padding:var(--space-3) 10px; display:flex; flex-direction:column; gap:2px; }
.app-sidebar nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
  color:var(--color-text-muted);
}
.app-sidebar nav a img{ width:20px; height:20px; flex:0 0 auto; }
.app-sidebar nav a:hover{ background:var(--color-primary-light); color:var(--color-primary); }
.app-sidebar nav a.active{ background:var(--color-primary-light); color:var(--color-primary); }
.app-sidebar nav a.nav-danger:hover{ background:#fdeceb; color:var(--color-danger); }
.app-sidebar nav hr{ border:none; border-top:1px solid var(--color-border); margin:var(--space-2) 8px; }

.app-main{ min-width:0; }

@media (min-width:900px){
  .app-shell{ display:flex; }
  .app-sidebar{
    display:block;
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    height:100vh;
    height:100dvh;
    position:sticky;
    top:0;
    background:var(--color-surface);
    border-right:1px solid var(--color-border);
    overflow-y:auto;
  }
  .app-main{ flex:1; min-width:0; }
  .app-topbar .icon-btn.home-mobile-only{ display:none; }
  body{ padding-bottom:0; }
  .bottom-nav{ display:none !important; }
  .page-wrap{ padding:var(--space-4) var(--space-4) var(--space-6); max-width:1600px; }
  .menu-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* =========================================================================
   MOBİL TOPBAR — logo + "MİNO SAHA SATIŞ" %20 büyütülüp ortalanmış,
   ikon ve yazılar daha belirgin.
   ========================================================================= */
@media (max-width:899px){
  .app-topbar{ position:relative; }
  .app-topbar .app-topbar-title{
    position:absolute;
    left:0; right:0;
    justify-content:center;
    text-align:center;
    font-size:19px;      /* 16px -> ~%20 büyük */
    font-weight:700;
    letter-spacing:.2px;
    pointer-events:none;
  }
  .app-topbar .icon-btn.home-mobile-only{
    position:relative;
    z-index:1;
  }
  .topbar-logo-icon{
    height:26px;        /* 22px -> ~%20 büyük */
  }
}

/* =========================================================================
   MOBİL NETLİK — alt menü ve ana sayfa kartlarındaki ikon/yazılar daha
   belirgin olsun.
   ========================================================================= */
@media (max-width:899px){
  .bottom-nav a{
    font-weight:600;
  }
  .bottom-nav svg{
    stroke-width:2;
  }
  .menu-grid .menu-label{
    font-weight:600;
  }
  .card{
    box-shadow:0 2px 10px rgba(20,30,50,.07);
  }
}

/* ---------- Form elemanları (ortak) ---------- */
.field{
  margin-bottom:var(--space-4);
}
.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--color-text-muted);
  margin-bottom:var(--space-1);
}
input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=tel],
input[type=email],
select,
textarea,
.form-control{
  width:100%;
  padding:10px 12px;
  font-size:15px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--color-text);
  font-family:var(--font-main);
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-light);
}

/* ---------- Butonlar (ortak) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 22px;
  border-radius:var(--radius-sm);
  border:none;
  font-size:15px;
  font-weight:600;
  font-family:var(--font-main);
  cursor:pointer;
  transition:transform .05s ease, box-shadow .15s, background .15s;
  text-align:center;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--color-primary); color:#fff; }
.btn-primary:hover{ background:var(--color-primary-dark); }
.btn-accent{ background:var(--color-accent); color:#fff; }
.btn-danger{ background:var(--color-danger); color:#fff; }
.btn-outline{ background:#fff; color:var(--color-primary); border:1px solid var(--color-primary); }
.btn-block{ width:100%; display:flex; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========================================================================
   GİRİŞ SAYFASI (Default.aspx)
   ========================================================================= */
body.login-page{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,var(--color-primary) 0%,#010b1f 100%);
  padding:var(--space-4);
}
.login-card{
  width:100%;
  max-width:400px;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:var(--space-6) var(--space-5);
}
.login-card .login-logo{
  text-align:center;
  font-size:20px;
  font-weight:700;
  color:var(--color-primary);
  letter-spacing:.5px;
  margin-bottom:var(--space-5);
}
.login-card .field input{
  height:46px;
}
.login-card .login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-4);
  font-size:13px;
}
.login-card .login-warning{
  color:var(--color-danger);
  font-size:13px;
  margin-bottom:var(--space-3);
  display:block;
}
.login-card .btn{ margin-top:var(--space-2); }
.login-card .forgot-link{
  display:block;
  text-align:center;
  margin-top:var(--space-4);
  font-size:13px;
  color:var(--color-text-muted);
}
.login-card .forgot-link:hover{ color:var(--color-primary); }

/* =========================================================================
   ANA SAYFA MENÜ IZGARASI (Ana_Sayfa.aspx)
   ========================================================================= */
.home-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-4);
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-4);
  gap:var(--space-3);
  flex-wrap:wrap;
}
.home-header .home-user{
  font-size:14px;
  color:var(--color-text-muted);
}
.home-header .home-user b{ color:var(--color-text); }
.home-header .home-header-actions{ display:flex; gap:var(--space-2); }

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--space-4);
  list-style:none;
}
.menu-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
  padding:var(--space-5) var(--space-3);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-3);
  text-align:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.menu-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary);
}
.menu-card .menu-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary-light);
  transition:transform .15s ease;
}
.menu-card .menu-icon img{
  max-width:60%;
  max-height:60%;
  object-fit:contain;
}
.menu-card:hover .menu-icon{ transform:scale(1.08); }
.menu-card .menu-label{
  font-size:13px;
  font-weight:600;
  color:var(--color-text);
  line-height:1.3;
}
.menu-card.menu-danger .menu-label{ color:var(--color-danger); }

/* Modül başına farklı kurumsal vurgu rengi (6'lı döngü) — ikgar ilgi çekici/ayırt edici olsun diye */
.menu-grid .menu-card:nth-of-type(6n+1) .menu-icon{ background:rgba(0,88,192,.12); }
.menu-grid .menu-card:nth-of-type(6n+1) .menu-icon svg{ color:var(--color-primary) !important; }
.menu-grid .menu-card:nth-of-type(6n+2) .menu-icon{ background:rgba(0,152,184,.15); }
.menu-grid .menu-card:nth-of-type(6n+2) .menu-icon svg{ color:var(--color-accent) !important; }
.menu-grid .menu-card:nth-of-type(6n+3) .menu-icon{ background:rgba(245,166,35,.16); }
.menu-grid .menu-card:nth-of-type(6n+3) .menu-icon svg{ color:var(--color-warning) !important; }
.menu-grid .menu-card:nth-of-type(6n+4) .menu-icon{ background:rgba(30,58,138,.14); }
.menu-grid .menu-card:nth-of-type(6n+4) .menu-icon svg{ color:var(--color-indigo) !important; }
.menu-grid .menu-card:nth-of-type(6n+5) .menu-icon{ background:rgba(34,184,207,.16); }
.menu-grid .menu-card:nth-of-type(6n+5) .menu-icon svg{ color:var(--color-rose) !important; }
.menu-grid .menu-card:nth-of-type(6n+6) .menu-icon{ background:rgba(229,72,77,.12); }
.menu-grid .menu-card:nth-of-type(6n+6) .menu-icon svg{ color:var(--color-danger) !important; }

/* =========================================================================
   ÜRÜN LİSTESİ / SEPET (product-grid, ul.list, ul.grid)
   Orijinal davranış (list/grid görünüm anahtarı) korunmuştur; sadece
   sabit piksel / float tabanlı yerleşim modern flex/grid ile değiştirildi.
   ========================================================================= */
.product-grid{
  padding:0;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:70vh;
  width:100%;
}

ul.list, ul.grid{ list-style:none; width:100%; }

/* --- Liste görünümü --- */
ul.list{ display:flex; flex-direction:column; gap:var(--space-3); }
ul.list > li{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:var(--space-3);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  position:relative;
}
ul.list .urnresim{
  width:84px;
  height:84px;
  flex:0 0 auto;
  background:#fff;
  border-radius:var(--radius-sm);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
ul.list .urnadi{
  flex:1 1 160px;
  text-align:left;
  font-size:14px;
}
ul.list .urnadi b{ font-size:14px; font-weight:600; }
ul.list .urnkodu{
  font-size:12px;
  color:var(--color-text-muted);
}
ul.list .urnkalan{
  position:static;
  margin:0;
  width:auto;
  color:var(--color-danger);
  font-size:12px;
  font-weight:600;
}
ul.list .urnfiyat{
  flex:1 1 100px;
  border-right:none;
  border-top:1px solid var(--color-border);
  padding-top:var(--space-2);
  margin:0;
  height:auto;
}
ul.list .urnsattur{
  flex:1 1 100px;
  border:none;
  border-top:1px solid var(--color-border);
  height:auto;
  padding-top:var(--space-2);
}
ul.list .urnekle{ margin:0; flex:0 0 auto; }
ul.list div#urun-resim a img,
ul.list .imgurn img{
  width:100%;
  height:100%;
  object-fit:contain;
  border:none;
}
ul.list .fiyatlar{ font-size:16px; font-weight:700; color:var(--color-primary); }

/* --- Izgara (grid) görünümü --- */
ul.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:var(--space-4);
}
ul.grid > li{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  position:relative;
}
ul.grid .imgurn{ height:170px; padding-bottom:0; position:relative; }
ul.grid div#urun-resim{ width:100%; height:100%; margin:0; }
ul.grid div#urun-resim a{ display:block; width:100%; height:100%; }
ul.grid div#urun-resim a img{ width:100%; height:100%; object-fit:contain; padding:var(--space-2); }
ul.grid div#baslik{
  text-align:center;
  border-bottom:1px solid var(--color-border);
  height:auto;
  width:100%;
  padding:var(--space-2) 0;
}
ul.grid .urnadi{ text-align:center!important; height:auto; font-size:13px; padding:0 var(--space-2); }
ul.grid .urnadi b{ line-height:1.4; }
ul.grid .urnkodu{ margin-top:0; font-size:11px; color:var(--color-text-muted); }
ul.grid .urnkalan{
  float:none;
  position:absolute;
  top:6px;
  right:6px;
  font-size:10px;
  color:#fff;
  background:var(--color-danger);
  padding:2px 6px;
  border-radius:999px;
  z-index:5;
}
ul.grid div#detay{ width:100%; height:auto; float:none; margin:0; padding:var(--space-2); }
ul.grid div#detay div#urun-fiyat5{
  margin:0 0 var(--space-2);
  width:100%;
  border-bottom:1px solid var(--color-border);
  padding-bottom:var(--space-2);
}
ul.grid div#detay div#urun-fiyat2{ margin:var(--space-2) 0 0; }
ul.grid div#detay div.urn-fyt3{ margin-top:var(--space-2); }
ul.grid div#detay div#menum_ekle a{ margin:0; }
ul.grid .fiyatlar{ font-size:15px; font-weight:700; color:var(--color-primary); }
ul.grid .urnfiyat{ width:auto; float:none; height:auto; border:none; }
ul.grid .urnsattur{ width:auto; float:none; height:auto; border:none; }
ul.grid .urnadet{ width:auto; }
ul.grid .urnekle{ width:auto; border-top:none; }

.urnadi b{ font-size:14px; }
.urnkam{ height:auto; position:relative; float:none; width:100%; }
.kampanya{
  height:auto;
  min-height:32px;
  position:relative;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  padding:var(--space-1) var(--space-2);
}
.miktarlar{ background-color:rgba(0,88,192,.12); border-radius:var(--radius-sm); }

/* darkview hover katmanı (masaüstünde efekt, mobilde gizli) */
ul.grid li section.right span.darkview{
  opacity:0;
  border-radius:var(--radius-md);
  background:rgba(20,30,55,.75);
  overflow:hidden;
  text-align:center;
  padding-top:35px;
  transition:opacity .2s linear;
}
ul.grid li:hover section.right span.darkview{ opacity:1; }
ul.grid li section.right span.darkview a.firstbtn{ display:block; margin-bottom:var(--space-2); }

/* Eski tablo tabanlı liste kutusu (datalıstboyut) yerine responsive tablo sarmalayıcı */
.datalist-wrap{ width:100%; overflow-x:auto; }
.datalist-wrap table{ width:100%; border-collapse:collapse; }

/* =========================================================================
   ÜRÜN KATALOĞU DataList ÇIKTISI (CssClass="datalıstboyut")
   ASP.NET DataList varsayılan olarak <table><tr><td>...</td></tr></table>
   üretir; veri bağlama yapısına dokunmadan bunu modern kart ızgarasına
   çeviriyoruz.
   ========================================================================= */
table.datalıstboyut, table.datalistboyut{
  width:100%;
  border-collapse:separate;
  margin:0;
}
table.datalıstboyut > tbody, table.datalistboyut > tbody{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
  gap:var(--space-4) var(--space-3);
  width:100%;
}
table.datalıstboyut tr, table.datalistboyut tr{
  display:block;
  min-width:0;
  max-width:100%;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:visible;
  transition:box-shadow .15s ease, transform .15s ease;
}
table.datalıstboyut tr:hover, table.datalistboyut tr:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
table.datalıstboyut td, table.datalistboyut td{
  display:block;
  padding:0;
  border:none;
}

/* ---------- Ürün kartı (modern e-ticaret stili) ---------- */
#urunvar{ display:flex; flex-direction:column; height:100%; position:relative; }

#urunvar .imgurn{
  position:static;
  height:200px;
  padding:var(--space-2);
  background:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
#urunvar .imgurn img{ width:100%; height:100%; object-fit:contain; cursor:pointer; }

#urunvar .urn-favori{ display:none; }
#urunvar .urnkam{ display:none; }
#urunvar .urn-favori svg{ width:16px; height:16px; }

#urunvar .urn-kampanya-rozet{
  position:absolute; top:10px; left:10px; z-index:3;
  background:var(--color-accent);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.3px;
  padding:4px 9px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(20,30,50,.2);
  text-transform:uppercase;
}

#urunvar .urnkodu{ display:none; }

#urunvar .urnadi{
  padding:var(--space-2) var(--space-3) 0;
  font-size:13px;
  text-align:left;
  cursor:pointer;
  line-height:1.3;
  color:var(--color-text);
  word-break:break-word;
  overflow-wrap:break-word;
}
#urunvar .urnadi b{ font-weight:600; }
#urunvar .urnadi.altadı{ display:none; }

#urunvar .urn-kod-goster{
  padding:2px var(--space-3) 0;
  font-size:11px;
  color:var(--color-text-muted);
  word-break:break-word;
  overflow-wrap:break-word;
}

#urunvar .urnfiyat{
  margin-top:6px;
  padding:6px var(--space-3) 2px;
  font-size:16px;
  font-weight:700;
  color:var(--color-text);
  border:none;
  display:block;
}
#urunvar .urnfiyat .fiyatlar{ display:none; }
#urunvar .urnfiyat input.miktarlar{
  border:none !important;
  background:transparent !important;
  font-size:16px;
  font-weight:700;
  color:var(--color-text);
  padding:0 !important;
  width:auto !important;
}
#urunvar .urnfiyat input.miktarlar::after{ content:" TL"; }

#urunvar .urnsattur{ display:none; }

#urunvar .urn-stok{
  font-size:11px;
  color:var(--color-text-muted);
  padding:0 var(--space-3) var(--space-3);
  margin-top:2px;
}
#urunvar .urn-stok.tukendi{ color:var(--color-danger); font-weight:600; }
#urunvar .urnkalan{ display:none; }
#urunvar .urnadet{ display:none; }

/* Sağ alt köşeye taşan aksiyon alanı: ya (+) butonu ya da miktar steplayıcı — TÜM KARTA göre (resme değil) */
#urunvar .urn-aksiyon{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:4;
}
#urunvar .urnekle{
  width:50px; height:50px;
  border-radius:50%;
  background:var(--color-primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,88,192,.35);
  font-size:26px;
  line-height:1;
  border:3px solid var(--color-surface);
}
#urunvar .urnekle:active{ transform:scale(.94); }

#urunvar .urn-stepper{
  display:flex;
  align-items:stretch;
  background:var(--color-primary);
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,88,192,.35);
  border:3px solid var(--color-surface);
  overflow:hidden;
}
#urunvar .urn-stepper .urn-stepper-btn{
  border:none; background:transparent; color:#fff;
  width:38px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; cursor:pointer;
}
#urunvar .urn-stepper .urn-stepper-btn:active{ background:rgba(0,0,0,.15); }
#urunvar .urn-stepper .urn-stepper-sayi{
  background:rgba(255,255,255,.18);
  color:#fff;
  min-width:26px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  cursor:pointer;
}
.urn-miktar-kutu{
  width:36px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-align:center;
  padding:0;
  -moz-appearance:textfield;
}
.urn-miktar-kutu::-webkit-outer-spin-button,
.urn-miktar-kutu::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Sepete ekle/azalt sonrası geçici "eklendi" bildirimi */
.sepet-toast{
  position:fixed;
  left:50%; bottom:90px;
  transform:translateX(-50%) translateY(10px);
  background:var(--color-text);
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:var(--shadow-md);
  z-index:99997;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.sepet-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:900px){
  .sepet-toast{ bottom:24px; }
}

@media (max-width:480px){
  table.datalıstboyut > tbody, table.datalistboyut > tbody{ grid-template-columns:repeat(2,1fr); }
  #urunvar .imgurn{ height:135px; }
}
@media (min-width:640px) and (max-width:899px){
  table.datalıstboyut > tbody, table.datalistboyut > tbody{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1100px){
  table.datalıstboyut > tbody, table.datalistboyut > tbody{ grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); }
}

/* clearfix (geriye dönük uyumluluk için korunuyor) */
.clearfix::after{ content:""; display:block; clear:both; }
.clearfix{ display:block; }

/* =========================================================================
   ORTAK TABLO / GRIDVIEW GÖRÜNÜMÜ
   ========================================================================= */
.table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.grid-table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface);
  border-radius:var(--radius-md);
  overflow:hidden;
  font-size:13px;
}
table.grid-table th{
  background:var(--color-primary);
  color:#fff;
  text-align:left;
  padding:10px 12px;
  font-weight:600;
  white-space:nowrap;
}
table.grid-table td{
  padding:9px 12px;
  border-bottom:1px solid var(--color-border);
  vertical-align:middle;
}
table.grid-table tr:nth-child(even) td{ background:#fafbfd; }
table.grid-table tr:hover td{ background:var(--color-primary-light); }
[data-theme="dark"] table.grid-table tr:nth-child(even) td{ background:#20262f; }
[data-theme="dark"] table.grid-table tr:hover td{ background:var(--color-primary-light); }

/* =========================================================================
   SEKMELER (nav-tabs / tab-content — Bootstrap'e bağımlı olmadan)
   ========================================================================= */
ul.nav-tabs{
  display:flex;
  gap:var(--space-2);
  list-style:none;
  overflow-x:auto;
  border-bottom:1px solid var(--color-border);
  margin-bottom:var(--space-4);
}
ul.nav-tabs li{ white-space:nowrap; }
ul.nav-tabs li a{
  display:block;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  color:var(--color-text-muted);
  border-bottom:2px solid transparent;
}
ul.nav-tabs li.active a{
  color:var(--color-primary);
  border-bottom-color:var(--color-primary);
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

/* =========================================================================
   MODAL / POPUP (ortak — Bootstrap yerine yerel uygulama)
   ========================================================================= */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(15,20,35,.55);
  align-items:center;
  justify-content:center;
  padding:var(--space-4);
}
.modal-overlay.show{ display:flex; }
.modal-box{
  width:100%;
  max-width:420px;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-4);
  border-bottom:1px solid var(--color-border);
}
.modal-title{ margin:0; font-size:16px; font-weight:700; }
.modal-close{
  border:none;
  background:none;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--color-text-muted);
}
.modal-body{ padding:var(--space-4); font-size:14px; }
.modal-footer{
  padding:var(--space-4);
  border-top:1px solid var(--color-border);
  display:flex;
  justify-content:flex-end;
  gap:var(--space-2);
}

/* Ürün kartı popup'ı (Siparis_Adim2 -> Siparis_Adim3'ü iframe içinde gösterir) */
.modal-box-urunkart{
  max-width:680px;
  width:95%;
}
.modal-box-urunkart .modal-body{
  padding:0;
}
.modal-box-urunkart iframe{
  width:100%;
  height:min(78vh,640px);
  border:none;
  display:block;
  background:var(--color-surface);
}
/* Bu sayfa bir iframe/popup içinde açıldığında kenar menü, üst bar ve alt menüyü gizle */
body.iframe-mode .app-sidebar,
body.iframe-mode .app-topbar,
body.iframe-mode .bottom-nav{
  display:none !important;
}
body.iframe-mode{
  padding-bottom:0 !important;
}
body.iframe-mode .page-wrap{
  max-width:none;
  padding:var(--space-3);
}
body.iframe-mode .page-wrap > .card,
body.iframe-mode .page-wrap > .action-bar{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================================
   HARİTA (CS.aspx, harita_plasiyer.aspx, plasiyer_harita.aspx)
   ========================================================================= */
.map-canvas{
  width:100%;
  height:70vh;
  min-height:320px;
}

.row-select-btn{
  width:26px;
  height:26px;
  border-radius:50%;
  padding:4px;
}

/* Satır içi ikon+metin aksiyon butonu (ör. "Sipariş Gir", "Konuma Git", "Cari Düzenle") */
.btn-satir-aksiyon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--color-primary-light);
  background:var(--color-primary-light);
  color:var(--color-primary);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.btn-satir-aksiyon:hover{ background:var(--color-primary); color:#fff; }
.btn-satir-aksiyon svg{ flex:0 0 auto; }
.btn-satir-aksiyon.danger{
  border-color:#fbdada; background:#fdeeee; color:var(--color-danger);
}
.btn-satir-aksiyon.danger:hover{ background:var(--color-danger); color:#fff; }

/* =========================================================================
   ALT GEZİNME ÇUBUĞU (mobil, ortak)
   ========================================================================= */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--bottom-nav-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  display:flex;
  z-index:60;
  box-shadow:0 -2px 10px rgba(20,30,50,.06);
}
.bottom-nav a{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:10.5px;
  font-weight:600;
  color:var(--color-text-muted);
  white-space:nowrap;
}
.bottom-nav a img{ width:22px; height:22px; }
.bottom-nav a.active{ color:var(--color-primary); }
.bottom-nav a.active .nav-icon-wrap{ background:var(--color-primary-light); }
.bottom-nav .nav-icon-wrap{
  width:34px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
}

/* =========================================================================
   SABİT ALT AKSİYON ÇUBUĞU — İleri / Geri / Kaydet gibi birincil eylemler
   Mobilde ekranın altına sabitlenir, masaüstünde normal akışta kalır.
   ========================================================================= */
.action-bar{
  display:flex;
  gap:var(--space-2);
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:var(--space-4);
}
@media (max-width:899px){
  .action-bar{
    position:fixed;
    left:0; right:0; bottom:var(--bottom-nav-h);
    z-index:40;
    background:var(--color-surface);
    border-top:1px solid var(--color-border);
    padding:var(--space-2) var(--space-3);
    box-shadow:0 -4px 16px rgba(20,30,50,.08);
    margin-top:0;
    flex-wrap:nowrap;
    gap:6px;
  }
  .action-bar .btn{
    flex:1 1 0;
    min-width:0;
    padding:10px 8px;
    font-size:12.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .page-wrap{ padding-bottom:calc(var(--space-4) + 76px); }
}
@media (max-width:360px){
  .action-bar .btn{ font-size:11.5px; padding:9px 4px; }
}

/* =========================================================================
   YARDIMCI SINIFLAR
   ========================================================================= */
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-2{ gap:var(--space-2); }
.gap-3{ gap:var(--space-3); }
.text-muted{ color:var(--color-text-muted); }
.text-danger{ color:var(--color-danger); }
.text-center{ text-align:center; }
.mt-2{ margin-top:var(--space-2); }
.mt-3{ margin-top:var(--space-3); }
.mt-4{ margin-top:var(--space-4); }
.mb-2{ margin-bottom:var(--space-2); }
.mb-3{ margin-bottom:var(--space-3); }
.w-full{ width:100%; }
.hidden{ display:none!important; }

/* =========================================================================
   ÜRÜN KATALOĞU DÜZENİ (Siparis_Adim2.aspx)
   Mobil: kategori açılır/kapanır menü (üstte).
   Masaüstü (≥900px): kategori sol sabit dikey sidebar, ürünler sağda.
   ========================================================================= */
.urun-katalog-layout{ display:block; }
.kategori-sidebar{ margin-bottom:var(--space-3); }
.kategori-liste{ list-style:none; margin:0; padding:0; }

.category-toggle{ display:none; }

@media (max-width:899px){
  .category-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    margin-bottom:var(--space-3);
    box-shadow:var(--shadow-sm);
  }
  .category-toggle svg{ transition:transform .2s ease; color:var(--color-primary); }
  .category-toggle.open svg{ transform:rotate(180deg); }

  .kategori-liste{
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
    display:flex;
    flex-direction:column;
    margin-bottom:0;
    background:var(--color-primary-light);
    border-radius:var(--radius-md);
  }
  .kategori-liste.open{
    max-height:2000px;
    margin-bottom:var(--space-4);
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-sm);
  }
  .kategori-liste li + li{ border-top:1px solid var(--color-border); }
  .kategori-liste a{
    display:block;
    padding:12px 16px;
    font-size:13.5px;
    font-weight:600;
    color:var(--color-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (min-width:900px){
  .urun-katalog-layout{ display:flex; align-items:flex-start; gap:var(--space-3); }
  .kategori-sidebar{
    flex:0 0 210px;
    position:sticky;
    top:calc(var(--header-h) + 12px);
    background:var(--color-primary-light);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:var(--space-2) 0;
    margin-bottom:0;
  }
  .kategori-liste li + li{ border-top:1px solid var(--color-border); }
  .kategori-liste a{
    display:block;
    padding:9px 14px;
    font-size:13px;
    font-weight:600;
    color:var(--color-text);
  }
  .kategori-liste a:hover{ background:rgba(255,255,255,.6); color:var(--color-primary); }
  .urun-alani{ flex:1; min-width:0; }
}

/* =========================================================================
   RESPONSIVE KIRILMA NOKTALARI
   ========================================================================= */
@media (min-width:640px){
  .login-card{ padding:var(--space-6) var(--space-6); }
}
@media (max-width:480px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  ul.grid{ grid-template-columns:repeat(2,1fr); }
  .page-wrap{ padding:var(--space-3); }
  table.grid-table{ font-size:12px; }
}

/* =========================================================================
   YAZDIRMA (PRINT) — "Yazdır" butonu olan sayfalarda sadece rapor/tablo
   alanı yazdırılır; menü, üst bar, filtre kartı ve butonlar gizlenir.
   ========================================================================= */
@media print{
  .app-sidebar, .app-topbar, .bottom-nav,
  .no-print, .NoPrintClass{
    display:none !important;
  }
  .app-main{ margin:0 !important; }
  .page-wrap{ max-width:none !important; padding:0 !important; }
  body{ padding-bottom:0 !important; }
  table.grid-table{ font-size:12px; }
  .grid-table tfoot td{ font-weight:800; }
}

/* =========================================================================
   BAĞLANTI KESİLDİ BİLDİRİMİ — internet bağlantısı gidince üstte sabit bant
   ========================================================================= */
#cevrimdisiUyari{
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  z-index:99999;
  background:var(--color-danger);
  color:#fff;
  text-align:center;
  padding:10px 14px;
  font-weight:700;
  font-size:13.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
#cevrimdisiUyari.show{ display:block; }
body.cevrimdisi-acik .app-topbar{ margin-top:40px; }
@media (max-width:480px){
  #cevrimdisiUyari{ font-size:12.5px; padding:8px 10px; }
}

/* Ziyaret durumu ikonları — Sipariş ve Dağıtım listelerinde */
.ziyaret-tik{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#e6f9ee; color:#1a9a52; font-weight:800; font-size:14px;
  cursor:pointer; text-decoration:none; border:none;
}
[data-theme="dark"] .ziyaret-tik{ background:#123322; color:#4ade80; }
.ziyaret-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:#fdeceb; color:var(--color-danger); font-weight:800; font-size:13px;
  border:none; cursor:pointer;
}
[data-theme="dark"] .ziyaret-x{ background:#3a1a1a; }

/* Genel sayfa bildirimi (Sıralamayı Kaydet / Konuma Göre Sırala gibi işlemler için) */
.sayfa-toast{
  position:fixed;
  left:50%; bottom:90px;
  transform:translateX(-50%) translateY(10px);
  background:var(--color-text);
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  box-shadow:var(--shadow-md);
  z-index:99997;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.sayfa-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (min-width:900px){
  .sayfa-toast{ bottom:24px; }
}

/* Filtre/sıralama grubu — Sipariş/Cari/Tahsilat arama kartlarında şık gruplama */
.filtre-grubu{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--color-border);
}
.filtre-satiri{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.filtre-baslik{
  font-size:12px;
  font-weight:700;
  color:var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:.4px;
  min-width:64px;
}
.btn-sm{
  padding:6px 12px !important;
  font-size:12.5px !important;
}

/* Rota ilerleme çubuğu — Sipariş/Dağıtım listelerinde */
.ilerleme-kutu{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:10px 14px;
  margin-bottom:var(--space-3);
}
.ilerleme-ust{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12.5px; color:var(--color-text-muted); font-weight:600;
  margin-bottom:6px;
}
.ilerleme-metin{ color:var(--color-text); font-weight:700; }
.ilerleme-cubuk-arka{
  width:100%; height:8px; border-radius:999px;
  background:var(--color-border);
  overflow:hidden;
}
.ilerleme-cubuk-dolu{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, #1a9a52, #4ade80);
  transition:width .35s ease;
}
