:root{
  --bg:#0b0f14;
  --panel:#0f1520;
  --card:#111827;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --pri:#20e38a;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
.wrap{max-width:1180px;margin:20px auto;padding:0 16px}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
h1{margin:0;font-size:1.1rem;font-weight:800;color:var(--pri)}
.meta{font-size:.85rem;color:var(--muted)}
footer{margin:18px 0;text-align:center;color:var(--muted);font-size:.85rem}

/* PANEL VE FORM */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.flex{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.schema{
  flex:1 1 400px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  text-align:center;
}
.formside{
  flex:1 1 480px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
.box{
  display:flex;
  align-items:center;
  gap:8px;
  background:#0d1320;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
}
.box input,.box select{
  border:0;outline:0;background:transparent;width:100%;
  color:var(--text);font:inherit;
}
select, option {background-color:#0f172a;color:#e5e7eb;}

/* BUTONLAR */
.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{
  border:1px solid var(--pri);
  background:#0d1522;
  color:var(--pri);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  text-decoration:none;
  text-align:center;
  transition:.25s;
}
.btn.primary{background:var(--pri);color:#0b0f14}
.btn:hover{opacity:.9}

/* SONUÇ BLOKLARI */
.summary{
  margin-top:10px;
  font-size:.9rem;
  background:#0f1520;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  color:var(--text);
  text-align:center;
  line-height:1.6;
}
.total-line{
  font-weight:900;
  color:var(--pri);
  font-size:1.1rem;
  margin-top:4px;
}
.details-box{
  margin-top:10px;
  background:#0f1520;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  font-size:.85rem;
  color:var(--text);
  line-height:1.5;
}
.pricebox{
  margin-top:12px;
  font-size:.9rem;
  background:#0d1320;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  color:#e5e7eb;
  line-height:1.5;
}
.pricebox b{color:var(--pri);}

/* HATA MESAJI */
.error-box{
  background:#2a0b0b;
  color:#ffb3b3;
  border:1px solid rgba(255,69,69,0.25);
  border-radius:8px;
  padding:8px 10px;
  margin:10px 0;
  font-size:.9rem;
  text-align:center;
}

/* ✅ Üst Navbar */
.navbar{
  background:#0f1520;
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.navbar h2{
  margin:0;
  font-size:1rem;
  color:var(--pri);
  letter-spacing:0.5px;
}
.navbar a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
}
.navbar a:hover{color:var(--pri);}

/* ✅ Profil Sekme Menüsü */
.profile-menu{
  display:flex;
  overflow-x:auto;
  gap:12px;
  padding:10px 16px;
  background:#101724;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:46px;
  z-index:150;
  box-shadow:inset 0 -1px 0 #1f2937;
}
.profile-menu::-webkit-scrollbar{height:6px}
.profile-menu::-webkit-scrollbar-thumb{background:#1f2937;border-radius:4px}
.profile-menu a{
  display:flex;
  align-items:center;
  gap:6px;
  background:#1a2232;
  border:1px solid #1f2937;
  border-radius:8px;
  padding:6px 10px;
  color:var(--text);
  text-decoration:none;
  font-size:.9rem;
  white-space:nowrap;
  transition:.2s;
}
.profile-menu a:hover{
  border-color:var(--pri);
  color:var(--pri);
  background:#132029;
}
.profile-menu img{
  width:20px;
  height:20px;
  object-fit:contain;
}
.profile-menu a.active{
  background:var(--pri);
  color:#0b0f14;
  border-color:var(--pri);
  font-weight:700;
}

/* ✅ Ana Menü Grid (index sayfası) */
.grid-menu{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:16px;
  margin-top:24px;
}
.card-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:#0f1520;
  border:1px solid #1f2937;
  border-radius:12px;
  padding:16px;
  color:var(--text);
  transition:.2s;
}
.card-link:hover{
  border-color:var(--pri);
  transform:translateY(-2px);
}
.card-link img{
  width:48px;
  height:48px;
  object-fit:contain;
  margin-bottom:8px;
}

/* 🔧 Number input oklarını kaldır */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none;margin:0;
}
input[type=number]{-moz-appearance:textfield}

/* 📱 Responsive Küçük Dokunuşlar */
@media(max-width:600px){
  .btn{padding:8px 10px;font-size:.85rem;}
  .navbar h2{font-size:.9rem;}
  .profile-menu{gap:8px;padding:8px;}
  .card-link img{width:42px;height:42px;}
}
.pricebox .total-line{
  font-weight:900;
  color:var(--pri);
  font-size:1.1rem;
  text-align:center;
}
.material-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin-top:8px;
  max-height:200px;
  overflow-y:auto;
  background:#0d1320;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
}
.mat-row{
  background:#111827;
  border:1px solid #1f2937;
  border-radius:8px;
  padding:8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:.2s;
}
.mat-row:hover{
  border-color:var(--pri);
  color:var(--pri);
}
.mat-row.active{
  background:var(--pri);
  color:#0b0f14;
  font-weight:700;
}
.summary-line{margin-top:8px;font-size:.95rem;color:#c7f9e9}
.summary-total{margin-top:4px;font-size:1.1rem;font-weight:800}
.summary-price{margin-top:6px;color:var(--pri);font-weight:700;font-size:1.05rem}
/* Dropdown materyal seçimi */
.material-dropdown {
  position: relative;
  width: 100%;
}
.mat-selected {
  background:#0d1320;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  cursor:pointer;
  color:var(--text);
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mat-options {
  display:none;
  position:absolute;
  top:105%;
  left:0;
  right:0;
  background:#111827;
  border:1px solid #1f2937;
  border-radius:8px;
  z-index:999;
  max-height:220px;
  overflow-y:auto;
}
.mat-options.open {
  display:block;
}
.mat-option {
  padding:8px 10px;
  cursor:pointer;
  color:var(--text);
  border-bottom:1px solid #1f2937;
  transition:.15s;
}
.mat-option:hover {
  background:#132029;
  color:var(--pri);
}
.mat-option small {
  color:var(--muted);
  font-size:.75rem;
  margin-left:4px;
}
/* =============================
   Köşebent Resimli Menü (İkonlu)
============================= */
.variant-menu {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  gap: 10px;
}

.variant-item {
  flex: 1;
  text-align: center;
  background: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 10px 5px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
}

.variant-item img {
  max-width: 70px;
  display: block;
  margin: 0 auto 6px;
}

.variant-item span {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  color: #333;
}

.variant-item:hover {
  background: #eef6ee;
  border-color: #28a745;
}

/* Aktif sekme */
.variant-item.active {
  border-color: #28a745;
  box-shadow: 0 0 10px rgba(40,167,69,0.3);
  background: #e8fbe8;
}

/* Tooltip (hover açıklama balonu) */
.variant-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: tooltipFade 0.3s forwards;
  z-index: 10;
}

@keyframes tooltipFade {
  to { opacity: 1; }
}

/* Responsive düzen */
@media (max-width: 768px) {
  .variant-menu {
    flex-direction: column;
  }
  .variant-item img {
    max-width: 60px;
  }
/* UPN / UPE Liste Görünümü (düzeltildi) */
.std-list {
  display: none;
  position: absolute;
  top: 105%;
  left: 0;
  right: 0;
  background: #0d1320;
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 5000; /* yukarı çıkarıldı */
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 16px rgba(0,0,0,0.45);
}
.std-list.open { display: block; }

.std-list .item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #1f2937;
  color: var(--text);
  background: #111827;
  transition: 0.2s;
}
.std-list .item:hover {
  background: #132029;
  color: var(--pri);
}/* ===========================================
   Reklam Kutusu (Metalhesaplama Teması)
   =========================================== */
.ads-box {
  background: #0d1320;
  border: 1px solid #00ff3344;
  border-radius: 10px;
  color: #00ff66;
  text-align: center;
  margin: 25px auto;
  padding: 14px 12px;
  box-shadow: 0 0 10px #00ff3366;
  font-family: Inter, sans-serif;
  max-width: 96%;
}
.ads-box a img {
  max-width: 100%;
  border-radius: 8px;
  border: none;
}
.ads-box a {
  color: #00ff66;
  text-decoration: none;
}
.ads-box a:hover {
  color: #fff;
  text-shadow: 0 0 8px #00ff66;
}
.ads-box {
  margin: 25px auto;
  max-width: 900px;
  background: #111827;
  border: 1px solid #00ff3344;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
/* === Unified Smart Table Ek Stilleri (Rev 3.0) === */
#urunTablo {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.9rem;
  background: #0f172a;
  border-radius: 8px;
  overflow: hidden;
}
#urunTablo th {
  background: #1a2233;
  color: #00ff66;
  font-weight: 600;
  padding: 6px;
  border-bottom: 1px solid #00ff3344;
}
#urunTablo td {
  padding: 6px;
  border-bottom: 1px solid #00ff2244;
}
#urunTablo input, #urunTablo select {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
#urunTablo .grp {
  background: #1a2330;
  color: #00ffaa;
  font-weight: 600;
  text-align: left;
}
#urunTablo .tutar {
  text-align: right;
  color: #a5f3fc;
  font-family: monospace;
}
#urunTablo tfoot td {
  font-weight: 700;
  color: #00ffaa;
  text-align: right;
  border-top: 1px solid #00ff3344;
  padding-top: 8px;
}
.delBtn {
  background: #ff3344;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 5px 8px;
}
.delBtn:hover {
  background: #ff5577;
}