:root{
  --bg:#0b1016; --panel:#0f1720; --card:#131c26; --muted:#97a3af; --text:#e7edf3;
  --accent:#4db5ff; --accent-2:#21d4fd; --danger:#ff6b6b; --good:#22c55e;
  --border:#203041; --canvas:#0e1620;
  --orange:#ff8a3d; --orange-2:#ffbd5a;
  /* ✨ GeoPlan paleti (header GeoPlan CTA ile uyumlu) */
  --gp1:#3dd0ff;
  --gp2:#5af3d8;
}
html[data-theme="light"]{
  --bg:#d7dbe3; --panel:#e2e6ed; --card:#eaedf3; --canvas:#e5e9f0;
  --text:#0f141a; --muted:#5a6472; --border:#bfc6d2;
  --accent:#3b82f6; --accent-2:#22c55e; --danger:#dc2626; --good:#16a34a;
  --orange:#f97316; --orange-2:#fdba74;
  --gp1:#3dd0ff; /* light’ta da aynı, istersen farklılaştırabilirsin */
  --gp2:#5af3d8;
}

/* reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,var(--bg) 0%,var(--panel) 100%);
}

/* ===== Topbar ===== */
.topbar{ height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid var(--border);
  background:rgba(15,23,32,.7); backdrop-filter:blur(8px); position:sticky; top:0; z-index:100;}
html[data-theme="light"] .topbar{ background:rgba(234,237,243,.82); }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ font-weight:800; letter-spacing:.06em; }
.nav{ display:flex; gap:12px; align-items:center; }
.nav-item{ color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:8px; }
.nav-item:hover{ background:#162233; color:#e5eef7; }
html[data-theme="light"] .nav-item:hover{ background:#d7dce6; color:#0f141a; }

.nav-item--register{
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  color:#1b120a; font-weight:700; border:none;
}
.nav-item--register:hover{ filter:brightness(1.05); }

.lang-wrap{ display:flex; align-items:center; gap:6px; padding-left:6px; }
.lang-select{ background:#0f1a28; border:1px solid #23344a; color:#e7edf3; height:32px; border-radius:8px; padding:0 8px; }
html[data-theme="light"] .lang-select{ background:#f1f3f7; border-color:#c2c9d4; color:#0f141a; }

.theme-toggle{ background:var(--card); border:1px solid var(--border); color:var(--text);
  width:36px; height:32px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}
.theme-toggle:hover{ filter:brightness(1.04); }

/* ===== Layout & Sidebar ===== */
.layout{ display:grid; grid-template-columns:270px 1fr; min-height:calc(100vh - 56px); }
.layout.layout--single{ grid-template-columns:1fr; }
.layout.layout--single .sidebar{ display:none; }

.sidebar{ border-right:1px solid var(--border); background:var(--panel);
  display:flex; flex-direction:column; position:sticky; top:56px; height:calc(100vh - 56px); }
.sidebar-search{ padding:12px 12px 8px; border-bottom:1px solid var(--border); }
.sidebar-search input{ width:100%; height:34px; background:#0f1a28; border:1px solid #23344a; color:#e7edf3;
  padding:6px 10px; border-radius:10px; font-size:13px; }
html[data-theme="light"] .sidebar-search input{ background:#f1f3f7; border:1px solid #c2c9d4; color:#0f141a; }
.sidebar-menu{ padding:8px 8px 16px; gap:8px; display:flex; flex-direction:column; overflow-y:auto; }
.menu-item{ width:100%; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:#cfe2f7; cursor:pointer; text-decoration:none; display:block; outline:none; }
html[data-theme="light"] .menu-item{ color:#0f141a; }
.menu-item:hover{ background:#142033; }
html[data-theme="light"] .menu-item:hover{ background:#dde2ea; }
.sidebar-footer{ margin-top:auto; padding:12px 16px; color:#97a3af; font-size:12px; border-top:1px solid var(--border); }
html[data-theme="light"] .sidebar-footer{ color:#505b68; }

/* active */
.sidebar .menu-item{ font-size:.9rem; line-height:1.25rem; }
.sidebar .menu-item.active, .sidebar .menu-item[aria-current="page"]{
  background:var(--accent,#4db5ff); color:#0b1016; font-weight:600; border-left:3px solid currentColor;
}

/* ===== Main / Cards ===== */
.content{ padding:16px; }
.main-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card{ border:1px solid var(--border); background:var(--card); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.card-header{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:#0f1826; }
html[data-theme="light"] .card-header{ background:#e7ebf2; }
.card-header h2{ margin:0; font-size:16px; }
.row-actions{ display:flex; gap:8px; }
.card-body{ padding:12px; min-height:0; display:flex; flex-direction:column; gap:10px; }

/* ===== Alerts ===== */
.alert{ border:1px solid var(--border); padding:10px 12px; border-radius:12px; margin:12px 16px; font-size:14px; }
.alert.error{ border-color:#5e2a2a; background:#2b1a1a; color:#ffd6d6; }
html[data-theme="light"] .alert{ background:#f4efd8; border-color:#e5dbb0; color:#6b4d0a; }
html[data-theme="light"] .alert.error{ background:#f6e1e1; border-color:#e7bcbc; color:#6b1111; }
.alert.success{ border-color:#2a5e3a; background:#162b1a; color:#c7f9cc; }
html[data-theme="light"] .alert.success{ background:#e1f6e6; border-color:#bce7c3; color:#115c1a; }
.content .alert{ display:none; }
.content .alert:last-of-type{ display:block; }

/* ===== Inputs ===== */
label{ font-size:12px; color:#cfe2f7; display:flex; flex-direction:column; gap:6px; }
html[data-theme="light"] label{ color:#0f141a; }
input, select{ background:#0f1a28; border:1px solid #23344a; color:#e7edf3; padding:8px 10px; border-radius:10px; text-align:center; }
html[data-theme="light"] input,html[data-theme="light"] select{ background:#f1f3f7; border:1px solid #c2c9d4; color:#0f141a; }
.controls-grid{ display:grid; grid-template-columns:repeat(4, minmax(120px,1fr)); gap:12px; }
.controls-grid.compact{ grid-template-columns:repeat(5, minmax(120px,1fr)); gap:8px; }
.controls-grid.loads-grid{ grid-template-columns:repeat(3, minmax(120px,1fr)); gap:8px; }
.controls-grid.compact input{ height:32px; font-size:12px; padding:6px 8px; border-radius:8px; }
.loads-grid input{ height:28px; font-size:12px; padding:4px 6px; border-radius:8px; }

/* ===== Canvas ===== */
.canvas-wrap{ border:1px solid var(--border); border-radius:12px; background:var(--canvas);
  width:100%; height:500px; display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* ===== Legend ===== */
.legend{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{ font-size:12px; background:#132337; border:1px solid #244161; padding:6px 10px; border-radius:999px; color:#d3e6ff; }
.badge.blue{ background:#0a204a; border-color:#0f2f6a; color:#d1dcff; font-weight:600; }
.badge.dark{ background:#121a27; border-color:#263b57; color:#e7edf3; }
html[data-theme="light"] .badge{ background:#e4e8ef; border-color:#c9d0db; color:#0f141a; }
html[data-theme="light"] .badge.blue{ background:#dbe5f6; border-color:#c7d4f1; color:#0f141a; }
html[data-theme="light"] .badge.dark{ background:#e5e9f0; border-color:#cbd2dd; color:#0f141a; }

/* ===== Table ===== */
.table{ width:100%; border-collapse:collapse; }
.table.compact{ table-layout:fixed; font-size:11px; }
.table thead th{ position:sticky; top:0; background:#0f1826; z-index:1; text-align:center; vertical-align:middle; }
html[data-theme="light"] .table thead th{ background:#e7ebf2; }
.table th,.table td{ border-bottom:1px solid var(--border); padding:4px 6px; font-size:inherit; }
.table.compact td{ text-align:center; vertical-align:middle; }
.table.compact input,.table.compact select{ width:100%; height:28px; font-size:12px; padding:4px 6px; border-radius:6px; text-align:center; text-align-last:center; }
.table.compact input[type="color"]{ width:34px; height:26px; padding:0; border-radius:6px; }
.table.compact thead th:nth-child(4),.table.compact tbody td:nth-child(4){ min-width:132px; }
.table.compact thead th:nth-child(10),.table.compact tbody td:nth-child(10){ width:72px; }
.table.compact thead th:nth-child(13),.table.compact tbody td:nth-child(13){ width:56px; }
.table.compact thead th:nth-child(14),.table.compact tbody td:nth-child(14){ width:44px; }
.row-index{ width:24px; text-align:center; }

/* 🔴 Katman hover eşleştirme: tablo satırı belirginleştirme */
.table.compact tbody tr.is-hovered{
  outline: 1px solid rgba(255, 70, 70, 0.95);
  outline-offset: -2px;
  background: linear-gradient(0deg, rgba(255,77,77,0.08), transparent);
  transition: outline-color .12s ease, background .12s ease;
}
html[data-theme="light"] .table.compact tbody tr.is-hovered{
  outline-color: #dc2626;
  background: linear-gradient(0deg, rgba(220,38,38,0.10), transparent);
}

/* ===== Buttons ===== */
.btn{ background:#1a2a3f; border:1px solid #274362; color:#d3e6ff; padding:8px 12px; border-radius:10px; cursor:pointer; }
.btn:hover{ filter:brightness(1.1); }
.btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#001624; border:none; }
.icon-btn{ background:#26141a; color:#f9cad0; border:1px solid #442332; width:30px; height:30px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
html[data-theme="light"] .btn{ background:#e9edf3; border-color:#c2c9d4; color:#0f141a; }
html[data-theme="light"] .btn:hover{ background:#e2e6ed; }
html[data-theme="light"] .icon-btn{ background:#efe6e6; color:#b91c1c; border-color:#e0b3b3; }
button[disabled]{ color: inherit; }

/* ===== Bearing cards & details ===== */
.bc-methods{ display:grid; grid-template-columns: repeat(3, minmax(160px,1fr)); gap:12px; align-items:stretch; }
@media (max-width:1200px){ .bc-methods{ grid-template-columns: repeat(2, minmax(160px,1fr)); } }
@media (max-width:680px){ .bc-methods{ grid-template-columns: 1fr; } }
.bc-item{ appearance:none; -webkit-appearance:none; border:1px solid var(--border); background:#101a27; color:inherit;
  border-radius:12px; padding:10px; min-height:96px; display:flex; flex-direction:column; cursor:pointer; text-align:left; }
.bc-item:hover{ border-color:#2c4766; }
.bc-item:focus-visible{ outline:2px solid #2f6ab3; outline-offset:2px; }
html[data-theme="light"] .bc-item{ background:#eaedf3; }
.bc-title{ font-size:12px; color:#cfe2f7; margin-bottom:6px; text-align:center; }
html[data-theme="light"] .bc-title{ color:#0f141a; }
.bc-result{ min-height:46px; display:flex; align-items:center; justify-content:center; border:1px dashed #38577b; border-radius:10px; background:#0f1724; font-weight:600; }
html[data-theme="light"] .bc-result{ border-color:#bfc6d2; background:#f2f4f8; }

.details-panel .details-title{ font-size:14px; font-weight:600; color:#cfe2f7; margin-bottom:6px; }
.details-pre{ background:#0f1724; border:1px solid #28405c; border-radius:10px; padding:10px 12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; white-space:pre-wrap; line-height:1.4; color:#e7edf3; }
html[data-theme="light"] .details-panel .details-title{ color:#0f141a; }
html[data-theme="light"] .details-pre{ background:#eff2f7; border-color:#bfc6d2; color:#0f141a; }

/* ===== Modals (genel) ===== */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:200; }
.modal.is-open{ display:flex; }
.modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); }
.modal__content{ position:relative; width:min(560px,92vw); background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5); padding:16px; }
html[data-theme="light"] .modal__content{ background:#fff; border-color:#cfe0ee; box-shadow:0 10px 30px rgba(0,0,0,.1); }
.modal__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal__title{ margin:0; font-weight:800; }
.modal__close{ background:#1a2a3f; border:1px solid #274362; color:#d3e6ff; width:28px; height:28px; border-radius:8px; cursor:pointer; }
.modal__form{ display:grid; gap:10px; }
.modal__input{ height:40px; border-radius:10px; background:#0f1a28; border:1px solid #23344a; color:#e7edf3; padding:0 10px; }
html[data-theme="light"] .modal__input{ background:#f1f3f7; border-color:#c2c9d4; color:#0f141a; }
.modal__cta{
  height:48px; border-radius:10px; border:none; cursor:pointer; font-weight:800; letter-spacing:.08em;
  background:linear-gradient(90deg,var(--orange),var(--orange-2)); color:#1b120a;
}
.modal__cta:hover{ filter:brightness(1.06); }

/* ===== Responsive ===== */
@media (max-width:1200px){
  .main-grid{ grid-template-columns:1fr; }
  .controls-grid.compact{ grid-template-columns:repeat(2, minmax(120px,1fr)); }
  .controls-grid.loads-grid{ grid-template-columns:repeat(2, minmax(120px,1fr)); }
}
.brand .logo { text-decoration: none; color: inherit; }

/* =========================================================
   FOOTER (yeni) — başlıklar aynı hizada, stiller ortak
   ========================================================= */
.footer{ margin-top:64px; }
.footer .muted{ color:var(--muted); }

/* Başlıkları aynı satıra getiren reset */
.footer h3, .footer h4{
  margin:0 0 8px;
  line-height:1.2;
}

.footer__top{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1.2fr;
  gap:24px;
  border-top:1px solid var(--border);
  padding-top:24px;
  align-items:start;
}

.footer__col ul{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:grid;
  gap:6px;
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  color:var(--muted);
  font-size:13px;
}

.footer__links{
  display:flex;
  gap:16px;
}

/* =========================================================
   ✅ PROFESSIONAL CALCULATIONS TOOLS — kart temaları
   ========================================================= */
.tools-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tool-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:110px; padding:14px;
  border-radius:14px;
  background:var(--card);
  border:1.5px solid var(--border); /* dış bordür görünümü korunur */
  color:inherit; text-decoration:none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}
.tool-card .tool-title{
  font-size:14px; margin-top:8px; text-align:center; color: currentColor; font-weight:600;
}
.tool-card .tool-icn{ width:24px; height:24px; opacity:.9; flex:0 0 24px; }

/* — All calculations: header Calculations CTA ile aynı turuncu ruh — */
.tool-card--all{
  border-color: color-mix(in oklab, var(--orange) 62%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--orange) 10%, transparent),
      color-mix(in oklab, var(--orange-2) 6%, transparent)
    );
  color: var(--orange);
  font-weight: 700;
}
.tool-card--all:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 10px 24px color-mix(in oklab, var(--orange) 26%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.08);
  border-color: color-mix(in oklab, var(--orange) 75%, transparent);
}

/* — GeoPlan: header GeoPlan CTA ile aynı mavimsi ruh — */
.tool-card--geoplan{
  border-color: color-mix(in oklab, var(--gp1) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--gp1) 14%, transparent),
      color-mix(in oklab, var(--gp2) 8%, transparent)
    );
  color: var(--gp1);
  font-weight: 700;
}
.tool-card--geoplan:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 10px 24px color-mix(in oklab, var(--gp1) 26%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.08);
  border-color: color-mix(in oklab, var(--gp1) 75%, transparent);
}