/* ================= ROTEX Tema ================= */
:root {
  --kirmizi:   #C8282A;
  --kirmizi2:  #8B0000;
  --lacivert:  #0A0F1E;
  --lacivert2: #0D1528;
  --lacivert3: #111d38;
  --mavi:      #1565C0;
  --altin:     #F5A623;
  --yesil:     #27AE60;
  --beyaz:     #F8F9FF;
  --gri:       #8A9BB5;
  --gri2:      #2A3550;
  --krem:      #E8ECF5;
  --radius: 14px;
  --tabbar-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  background: var(--lacivert);
  color: var(--beyaz);
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---------- Üst bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 16px;
  background: rgba(10,15,30,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200,40,42,0.25);
}
.brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; letter-spacing: 4px; color: var(--beyaz);
}
.brand span { color: var(--kirmizi); }
.topbar-links { display: none; gap: 24px; align-items: center; }
.topbar-links a {
  color: var(--gri); font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; transition: color .2s;
}
.topbar-links a:hover, .topbar-links a.aktif { color: var(--beyaz); }
.topbar-cta {
  background: var(--kirmizi); color: #fff !important;
  padding: 7px 16px; border-radius: 8px; font-weight: 600;
}
.topbar-user { font-size: 12px; color: var(--gri); }

/* ---------- Alt tab bar (mobil native his) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  background: rgba(13,21,40,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--gri2);
}
.tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--gri); font-size: 10px; font-weight: 600;
  letter-spacing: .3px; transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tab .tab-ikon { font-size: 21px; line-height: 1; }
.tab.aktif { color: var(--beyaz); }
.tab.aktif .tab-ikon { transform: translateY(-1px); }
.tab-orta {
  position: relative;
}
.tab-orta .tab-ikon {
  background: linear-gradient(135deg, var(--kirmizi), var(--kirmizi2));
  color: #fff; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-top: -20px;
  box-shadow: 0 6px 18px rgba(200,40,42,0.45);
  border: 3px solid var(--lacivert);
}

/* ---------- Genel bileşenler ---------- */
.sayfa { max-width: 760px; margin: 0 auto; padding: 18px 16px 30px; }
.sayfa-genis { max-width: 1024px; }

.baslik { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 2px; margin-bottom: 4px; }
.baslik span { color: var(--kirmizi); }
.alt-baslik { color: var(--gri); font-size: 13.5px; margin-bottom: 18px; line-height: 1.5; }

.kart {
  background: var(--lacivert2);
  border: 1px solid var(--gri2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.kart-baslik { font-weight: 700; font-size: 15px; margin-bottom: 10px; }

.rozet-mini {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  background: var(--lacivert3); border: 1px solid var(--gri2);
  color: var(--krem); margin: 2px 3px 2px 0;
}
.rozet-kirmizi { background: rgba(200,40,42,.15); border-color: rgba(200,40,42,.5); color: #ff9a9b; }
.rozet-yesil   { background: rgba(39,174,96,.12); border-color: rgba(39,174,96,.5); color: #6fdba0; }
.rozet-altin   { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.5); color: var(--altin); }
.rozet-mavi    { background: rgba(21,101,192,.15); border-color: rgba(21,101,192,.55); color: #7db8f0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--kirmizi); color: #fff; border: 0; cursor: pointer;
  padding: 12px 20px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: transform .12s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:hover { background: #a82022; }
.btn-tam { width: 100%; }
.btn-cizgi { background: transparent; border: 1px solid var(--gri2); color: var(--krem); }
.btn-cizgi:hover { background: var(--lacivert3); border-color: var(--gri); }
.btn-yesil { background: var(--yesil); } .btn-yesil:hover { background: #1e8a4c; }
.btn-mavi { background: var(--mavi); } .btn-mavi:hover { background: #0f4c93; }
.btn-kucuk { padding: 8px 14px; font-size: 12.5px; border-radius: 8px; }

/* ---------- Formlar ---------- */
.form-grup { margin-bottom: 14px; }
.form-grup label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--gri); margin-bottom: 6px;
  letter-spacing: .5px; text-transform: uppercase;
}
.girdi, select.girdi, textarea.girdi {
  width: 100%;
  background: var(--lacivert3);
  border: 1px solid var(--gri2);
  border-radius: 10px;
  color: var(--beyaz);
  padding: 12px 14px;
  font-family: inherit; font-size: 15px;
  outline: none; transition: border-color .15s;
  appearance: none; -webkit-appearance: none;
}
.girdi:focus { border-color: var(--kirmizi); }
select.girdi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9BB5' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
textarea.girdi { min-height: 80px; resize: vertical; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hata { color: #ff8a8b; font-size: 12px; margin-top: 4px; display: block; }
.validation-summary-errors ul { list-style: none; }
.validation-summary-errors { color: #ff8a8b; font-size: 13px; margin-bottom: 12px; }

input[type=range] { width: 100%; accent-color: var(--kirmizi); }
.slider-etiketler { display: flex; justify-content: space-between; font-size: 10px; color: var(--gri); margin-top: 4px; }

/* ---------- Yük kartı (pano) ---------- */
.yuk-kart {
  background: var(--lacivert2); border: 1px solid var(--gri2);
  border-radius: var(--radius); padding: 15px; margin-bottom: 12px;
  transition: border-color .15s;
}
.yuk-kart:hover { border-color: rgba(200,40,42,.55); }
.yuk-kart.one-cikan { border-color: rgba(245,166,35,.6); }
.yuk-rota {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15.5px; margin-bottom: 8px; flex-wrap: wrap;
}
.yuk-rota .ok { color: var(--kirmizi); letter-spacing: -2px; }
.yuk-fiyat { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; color: var(--altin); }
.yuk-alt { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; flex-wrap: wrap; }
.yuk-zaman { font-size: 11.5px; color: var(--gri); }

/* ---------- Takip / ilerleme ---------- */
.ilerleme-yol {
  position: relative; height: 8px; background: var(--gri2);
  border-radius: 6px; margin: 14px 0 6px; overflow: hidden;
}
.ilerleme-dolu {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--kirmizi), var(--altin));
  border-radius: 6px;
}
.rota-uclar { display: flex; justify-content: space-between; font-size: 12px; color: var(--gri); }

.zaman-cizgi { list-style: none; margin-top: 8px; }
.zaman-cizgi li {
  position: relative; padding: 0 0 16px 26px;
  font-size: 13.5px; line-height: 1.45;
}
.zaman-cizgi li::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: -2px;
  width: 2px; background: var(--gri2);
}
.zaman-cizgi li:last-child::before { display: none; }
.zaman-cizgi li::after {
  content: ""; position: absolute; left: 2px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--yesil); border: 2px solid var(--lacivert2);
}
.zaman-cizgi li.bekliyor::after { background: var(--gri2); }
.zaman-cizgi .zc-tarih { display: block; font-size: 11px; color: var(--gri); }

.risk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.risk-kut {
  background: var(--lacivert3); border: 1px solid var(--gri2);
  border-radius: 10px; padding: 10px 12px;
}
.risk-kut .rk-ad { font-size: 10.5px; color: var(--gri); text-transform: uppercase; letter-spacing: .5px; }
.risk-kut .rk-deger { font-size: 13.5px; font-weight: 700; margin-top: 3px; }
.rk-kirmizi .rk-deger { color: #ff8a8b; }
.rk-yesil .rk-deger { color: #6fdba0; }
.rk-sari .rk-deger { color: var(--altin); }

/* ---------- Durum noktası ---------- */
.durum-nokta { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dn-yesil { background: var(--yesil); box-shadow: 0 0 8px var(--yesil); }
.dn-kirmizi { background: var(--kirmizi); box-shadow: 0 0 8px var(--kirmizi); animation: nabiz 1.4s infinite; }
.dn-sari { background: var(--altin); box-shadow: 0 0 8px var(--altin); }
.dn-mavi { background: var(--mavi); box-shadow: 0 0 8px var(--mavi); }
@keyframes nabiz { 50% { opacity: .45; } }

/* ---------- Hero (landing) ---------- */
.hero {
  min-height: calc(100dvh - 56px - var(--tabbar-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px;
  background: radial-gradient(ellipse at 50% 30%, rgba(200,40,42,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(21,101,192,0.06) 0%, transparent 50%),
              #080c18;
}
.hero h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 9vw, 72px);
  letter-spacing: 3px; line-height: 1.05; margin-bottom: 14px;
}
.hero h1 em { font-style: normal; color: var(--kirmizi); }
.hero p { color: var(--gri); font-size: 15px; max-width: 480px; margin-bottom: 26px; line-height: 1.6; }
.hero-butonlar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sayac-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-top: 40px; width: 100%; max-width: 520px;
}
.sayac {
  background: rgba(13,21,40,.7); border: 1px solid var(--gri2);
  border-radius: 12px; padding: 16px 10px;
}
.sayac .s-num { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--kirmizi); }
.sayac .s-ad { font-size: 11px; color: var(--gri); text-transform: uppercase; letter-spacing: 1px; }

/* ---------- Chip filtre ---------- */
.chipler { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; scrollbar-width: none; }
.chipler::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 20px;
  background: var(--lacivert3); border: 1px solid var(--gri2);
  color: var(--krem); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chip.aktif { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 16px); z-index: 90;
  background: var(--lacivert3); border: 1px solid var(--yesil);
  color: var(--beyaz); font-size: 13.5px; font-weight: 600;
  padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  max-width: 92vw;
  animation: toastGir .3s ease;
}
@keyframes toastGir { from { opacity: 0; transform: translate(-50%, 12px); } }

.bos {
  text-align: center; color: var(--gri); padding: 40px 16px; font-size: 14px;
  border: 1px dashed var(--gri2); border-radius: var(--radius);
}

/* ---------- Masaüstü ---------- */
@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .topbar { height: 64px; padding: 0 40px; }
  .topbar-links { display: flex; }
  .sayfa { padding: 28px 24px 60px; }
  .sayac-grid { grid-template-columns: repeat(4, 1fr); }
  .risk-grid { grid-template-columns: repeat(3, 1fr); }
  .form-satir-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 859px) {
  .form-satir-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ================= Yönetim Paneli (PC) ================= */
.yp-govde { display: flex; min-height: calc(100dvh - 56px); }
.yp-menu {
  width: 220px; flex: 0 0 220px;
  background: var(--lacivert2); border-right: 1px solid var(--gri2);
  padding: 20px 12px; position: sticky; top: 56px;
  height: calc(100dvh - 56px); overflow-y: auto;
}
.yp-menu-baslik {
  font-size: 10.5px; color: var(--gri); text-transform: uppercase;
  letter-spacing: 1.5px; margin: 14px 8px 8px;
}
.yp-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--krem); font-size: 13.5px; font-weight: 600;
  margin-bottom: 2px; transition: background .15s;
}
.yp-menu a:hover { background: var(--lacivert3); }
.yp-menu a.aktif { background: rgba(200,40,42,.16); color: #ff9a9b; }
.yp-icerik { flex: 1; padding: 24px 28px 60px; min-width: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--lacivert2); border: 1px solid var(--gri2);
  border-radius: var(--radius); padding: 16px;
}
.kpi .k-num { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 1px; }
.kpi .k-ad { font-size: 11px; color: var(--gri); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }
.kpi.k-kirmizi .k-num { color: var(--kirmizi); }
.kpi.k-altin .k-num { color: var(--altin); }
.kpi.k-yesil .k-num { color: var(--yesil); }
.kpi.k-mavi .k-num { color: #7db8f0; }

.grafik-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.grafik-kart { background: var(--lacivert2); border: 1px solid var(--gri2); border-radius: var(--radius); padding: 16px; min-width: 0; }
.grafik-kart canvas { max-height: 260px; }

.tablo-sar { overflow-x: auto; background: var(--lacivert2); border: 1px solid var(--gri2); border-radius: var(--radius); }
.yp-tablo { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.yp-tablo th {
  text-align: left; padding: 12px 14px; color: var(--gri);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--gri2); white-space: nowrap;
}
.yp-tablo td { padding: 12px 14px; border-bottom: 1px solid rgba(42,53,80,.5); vertical-align: middle; }
.yp-tablo tr:last-child td { border-bottom: 0; }
.yp-tablo tr:hover td { background: rgba(17,29,56,.5); }

@media (max-width: 900px) {
  .yp-govde { flex-direction: column; }
  .yp-menu {
    width: 100%; flex: none; position: static; height: auto;
    display: flex; overflow-x: auto; padding: 10px 12px; gap: 4px;
    border-right: 0; border-bottom: 1px solid var(--gri2);
  }
  .yp-menu-baslik { display: none; }
  .yp-menu a { white-space: nowrap; }
  .yp-icerik { padding: 18px 14px 60px; }
  .grafik-grid { grid-template-columns: 1fr; }
}