:root{ --z-orange:#ff6a00; --z-bg:#f7f7f9; }
html,body{ height:100%; background:var(--z-bg); }

/* Topbar */
.z-topbar{ height:56px; background:linear-gradient(90deg,var(--z-orange), #ff944d); color:#fff; position:sticky; top:0; z-index:1030; }
.z-brand strong{ color:#fff; font-weight:700; }
.z-logo-dot{ width:14px; height:14px; border-radius:50%; background:#fff; display:inline-block; }

/* Sidebar */
.z-sidebar{ position:sticky; top:56px; height:calc(100vh - 56px); border-right:1px solid #eee; background:#fff; }
.list-group-item{ padding:.85rem 1rem; border:none; border-bottom:1px solid #f0f0f3; }
.list-group-item.active{ background:rgba(255,106,0,.12); color:var(--z-orange); font-weight:600; }

main{ min-height:calc(100vh - 56px - 48px); }
.z-footer{ color:#6b7280; }

/* Cards & buttons */
.z-card{ background:#fff; border:1px solid #eee; border-radius:14px; padding:1rem; box-shadow:0 4px 16px rgba(0,0,0,.04); }
.btn-z{ background:var(--z-orange); border-color:var(--z-orange); color:#fff; font-weight:600; }
.btn-z:hover{ filter:brightness(.95); color:#fff; }

.z-divider{ width:1px; background:#eee; }
@media (max-width: 991.98px){
  #z-sidebar{ display:none; position:fixed; left:0; top:56px; width:270px; height:calc(100vh - 56px); z-index:1031; }
  #z-sidebar.show{ display:block; }
}

/* === Fiyat sonuçları – hizalı tablo görünüm === */
#resultWrap{ overflow:hidden; }
#resultWrap .head{
  padding:.9rem 1rem;
  border-bottom:1px solid #f0f0f3;
  background:#fafafa;
}
.z-list{ width:100%; }

.z-list-row{
  display:grid;
  grid-template-columns: 1.3fr 1fr .9fr auto; /* Taşıyıcı | ETA | Fiyat | Buton */
  gap:1rem;
  align-items:center;
  padding:1rem 1.25rem;
  border-bottom:1px solid #f0f0f3;
  background:#fff;
}
.z-list-row > *{ min-width:0; }
.z-list-row:hover{ background:#fcfcfc; }

/* Taşıyıcı alanı */
.z-carrier{ display:flex; align-items:center; gap:.9rem; }
.z-logo{ width:36px; height:36px; border-radius:8px; object-fit:contain; background:#eef1f6; display:inline-block; }
.z-name{ font-weight:700; line-height:1.1; }
.z-svc{
  font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
  background:#eef2ff; color:#3730a3; display:inline-block; margin-top:.25rem;
}
.z-best{
  font-size:.7rem; background:#fff1e6; color:#b45309; border:1px solid #ffedd5;
  padding:.2rem .45rem; border-radius:6px; margin-right:.5rem;
}

/* ETA alanı */
.z-eta .lbl{ font-size:.75rem; color:#6b7280; margin-bottom:.15rem; }
.z-eta .val{ font-weight:600; }

/* Fiyat alanı */
.z-price{ text-align:right; }
.z-price .lbl{ font-size:.75rem; color:#6b7280; }
.z-price .num{ font-weight:800; font-size:1.125rem; line-height:1; }
.z-price .cur{ opacity:.9; margin-right:.25rem; font-weight:700; }

/* Aksiyon */
.z-act{text-align:right;}
.z-act .btn{ padding:.45rem .75rem; }

@media (max-width: 992px){
  .z-list-row{ grid-template-columns: 1fr 1fr; }
  .z-price,.z-act{ text-align:left; }
}

/* Uyarı şeridi */
.z-alert{
  background:#fff7e6; color:#7c4a00; border:1px solid #ffe8bf;
  padding:.9rem 1rem; margin: .5rem 1rem 0 1rem; border-radius:10px;
  display:flex; align-items:center;
}

/* Başlık satırı */
.z-table-head{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr .9fr;
  gap:1rem; font-weight:700; color:#111827;
  padding:1rem 1.25rem; border-bottom:1px solid #f0f0f3; margin-top:.5rem;
}

/* Satırlar */
.z-row{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr .9fr;
  gap:1rem; align-items:center;
  padding:1rem 1.25rem; border-bottom:1px solid #f0f0f3;
  background:#fff;
}
.z-row:hover{ background:#f8fbff; }

.z-cell{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.z-carrier .z-logo{
  width:36px; height:36px; object-fit:contain; border-radius:8px; background:#eef2f7;
}
.z-name{ font-weight:700; }
.z-chip{
  display:inline-block; padding:.25rem .65rem; border-radius:999px;
  background:#eef2ff; color:#1d4ed8; font-weight:600; font-size:.85rem;
}
.z-eta{ font-weight:700; }
.z-price{ font-weight:800; font-size:1.15rem; }
.z-cur{ font-weight:700; opacity:.9; margin-right:.25rem; }
.z-badge-best{
  background:#ffd966; color:#7a4e00; font-weight:700; font-size:.8rem;
  padding:.25rem .6rem; border-radius:999px; margin-left:.5rem;
}
@media (max-width: 992px){
  .z-table-head{ display:none; }
  .z-row{ grid-template-columns: 1fr; align-items:flex-start; }
  .z-cell{ justify-content:space-between; }
  .z-price{ font-size:1.05rem; }
}

/* === Hero === */
.z-hero{
  color:#fff;
  background: radial-gradient(80rem 40rem at 85% 25%, rgba(255,255,255,.12), transparent 60%),
              linear-gradient(160deg, var(--z-orange) 0%, #ff8c33 55%, #ffab73 100%);
}
.z-hero-title{ font-weight:800; line-height:1.12; margin-bottom:.6rem; }
.z-hero-sub{ font-size:1.05rem; opacity:.95; }
.btn-hero{ background:#fff; color:var(--z-orange); font-weight:700; border:0; }
.btn-hero:hover{ filter:brightness(.95); color:var(--z-orange); }

/* === Auth Card & Tabs (Giriş / Kayıt) === */
.z-auth-card{
  background:#fff; border:1px solid #eee; border-radius:16px; padding:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.06);

  /* Bootstrap nav değişkenlerini override et (mavi yerine turuncu) */
  --bs-nav-link-color: var(--z-orange);
  --bs-nav-link-hover-color: var(--z-orange);
  --bs-nav-pills-link-active-bg: var(--z-orange);
  --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link{ font-weight:600; }

/* Pasif sekme: beyaz + turuncu çerçeve */
.z-auth-card .nav-pills .nav-link{
  background:#fff;
  border:2px solid var(--z-orange);
  color:var(--z-orange);
  border-radius:8px;
  margin-right:.5rem;
  transition:all .2s ease;
}
.z-auth-card .nav-pills .nav-link:hover{
  background:#fff;
  color:var(--z-orange);
  border-color:var(--z-orange);
}

/* Aktif sekme: turuncu + beyaz yazı */
.z-auth-card .nav-pills .nav-link.active,
.z-auth-card .nav-pills .show > .nav-link{
  background:var(--z-orange);
  color:#fff;
  border-color:var(--z-orange);
}

/* Focus gölgesi (turuncu) */
.z-auth-card .nav-pills .nav-link:focus{
  box-shadow:0 0 0 .2rem rgba(255,106,0,.15);
  outline:none;
}
/* ---- NAV PILLS (Giriş Yap / Kayıt Ol) TURUNCU ÇERÇEVE + BEYAZ ZEMİN ---- */

/* Bootstrap'ın nav-pills aktif renk değişkenlerini globalde boz */
:root{
  --bs-nav-pills-link-active-bg: #fff;                   /* aktifken zemin beyaz */
  --bs-nav-pills-link-active-color: var(--z-orange);     /* aktifken yazı turuncu */
  --bs-nav-pills-border-radius: 8px;                     /* köşeler */
}

/* Kart içindeki sekmeler: pasif/aktif fark etmeksizin beyaz zemin + turuncu çerçeve */
#auth .nav-pills .nav-link {
  background: #fff !important;
  color: var(--z-orange) !important;
  border: 2px solid var(--z-orange) !important;
  border-radius: 8px !important;
  margin-right: .5rem;
  font-weight: 600;
  transition: all .2s ease;
}

/* Aktif sekme de beyaz kalsın (bootstrap mavi rengini tamamen kapat) */
#auth .nav-pills .nav-link.active,
#auth .nav-pills .show > .nav-link {
  background: #fff !important;
  color: var(--z-orange) !important;
  border-color: var(--z-orange) !important;
  box-shadow: 0 0 0 .18rem rgba(255,106,0,.12) !important; /* hafif turuncu fokus */
}

/* Hover’da da beyaz + turuncu dursun */
#auth .nav-pills .nav-link:hover {
  background: #fff !important;
  color: var(--z-orange) !important;
  border-color: var(--z-orange) !important;
}
/* Home'daki turuncu hero zeminini kaldır ve yazıları koyu yap */
.z-hero{
  background: none !important;
  color: inherit !important;
}

.z-hero .z-hero-title{ color:#111 !important; }
.z-hero .z-hero-sub{ color:#374151 !important; }

/* Auth kartı içindeki metinleri koyu renge döndür (beyaz zemin üstünde görünür olsun) */
.z-auth-card,
.z-auth-card label,
.z-auth-card .form-check-label{
  color:#111 !important;
}
/* Buton + illüstrasyon hizalama */
.z-hero-actions{
  display: grid;
  grid-template-columns: auto 1fr; /* 1. sütun: buton başlangıcı; 2. sütun: boş alan */
  grid-auto-rows: auto;
  align-items: start;
}

.z-cta{
  grid-column: 1 / -1;          /* Buton satırı tüm genişlikte */
  display: flex;
  gap: .5rem;
}

.z-hero-ill{
  grid-column: 1;               /* İllüstrasyon 1. sütunda (butonla aynı sol hiza) */
  margin-top: 1rem;
  max-width: 420px;             /* Gerekirse küçült/büyüt */
}

.z-hero-ill svg{
  display:block;
  width:100%;
  height:auto;
}

/* İllüstrasyonu butonun hizasından biraz sola ve aşağı indir */
@media (min-width: 992px){
  .z-hero-ill{
    margin-left: -40px;   /* daha sola: -24 / -40 ile ince ayar yapabilirsiniz */
    margin-top: 28px;     /* daha aşağı: 20–40px arası deneyin */
    max-width: 440px;     /* isterseniz boyutu da azıcık büyüttüm */
  }
}
/* Hero içindeki "Daha Fazla" butonunu görünür yap */
.z-hero .btn-outline-light{
  color: var(--z-orange) !important;      /* yazı rengi turuncu */
  border-color: var(--z-orange) !important;/* çerçeve turuncu */
  background: transparent;                 /* arka plan şeffaf */
  font-weight: 700;
}

.z-hero .btn-outline-light:hover{
  background: var(--z-orange) !important;  /* hover’da dolu turuncu */
  color: #fff !important;                  /* yazı beyaz */
}