/* ============================================================
   METROPOL FLEET RENTALS — DESIGN SYSTEM / CORE
   Tek kaynak: token + primitive bileşenler
   Bu dosya tüm sayfalarda EN SON yüklenir.
   Backend, API veya iş mantığı ile hiçbir ilişkisi yoktur.
   ============================================================ */

:root {
  /* ---- Marka: Lacivert (ink) + Altın (gold) ---- */
  --ds-ink-900: #071322;
  --ds-ink-850: #0A1A2C;
  --ds-ink-800: #0B1D33;
  --ds-ink-700: #123050;
  --ds-ink-600: #1B4370;
  --ds-ink-500: #2A5C93;

  --ds-gold-700: #0A4F94;
  --ds-gold-600: #0A6FCB;
  --ds-gold-500: #1E9BFF;
  --ds-gold-400: #4FB6FF;
  --ds-gold-300: #8FD3FF;
  --ds-gold-100: #DCEEFF;
  --ds-gold-50:  #F1F8FF;

  /* ---- Yüzeyler ---- */
  --ds-surface: #FFFFFF;
  --ds-canvas: #F5F7FA;
  --ds-subtle: #EDF1F6;
  --ds-sunken: #E7ECF3;
  --ds-line: #E1E7EF;
  --ds-line-soft: #EDF1F6;
  --ds-line-strong: #CBD5E1;

  /* ---- Metin ---- */
  --ds-text: #0B1B2E;
  --ds-text-2: #48576B;
  --ds-text-3: #7C8AA0;
  --ds-text-inv: #FFFFFF;
  --ds-text-inv-2: rgba(255, 255, 255, .74);
  --ds-text-inv-3: rgba(255, 255, 255, .55);

  /* ---- Durum ---- */
  --ds-success: #0E9F6E;
  --ds-success-bg: #E7F7F0;
  --ds-success-line: #B7E7D4;
  --ds-warning: #B26A00;
  --ds-warning-bg: #FDF4E4;
  --ds-warning-line: #F3DDB3;
  --ds-danger: #D92D20;
  --ds-danger-bg: #FDECEA;
  --ds-danger-line: #F6C9C4;
  --ds-info: #1D6BE0;
  --ds-info-bg: #EAF2FE;
  --ds-info-line: #C3DBFB;

  /* ---- Köşe yarıçapı (TEK ölçek) ---- */
  --ds-r-xs: 6px;
  --ds-r-sm: 10px;
  --ds-r-md: 14px;
  --ds-r-lg: 18px;
  --ds-r-xl: 24px;
  --ds-r-2xl: 30px;
  --ds-r-pill: 999px;

  /* ---- Gölge (TEK ölçek, lacivert tonlu) ---- */
  --ds-sh-xs: 0 1px 2px rgba(11, 27, 46, .06);
  --ds-sh-sm: 0 2px 8px rgba(11, 27, 46, .07);
  --ds-sh-md: 0 8px 24px -8px rgba(11, 27, 46, .16);
  --ds-sh-lg: 0 20px 44px -18px rgba(11, 27, 46, .24);
  --ds-sh-xl: 0 34px 70px -26px rgba(11, 27, 46, .34);
  --ds-sh-gold: 0 10px 28px -10px rgba(30, 155, 255, .48);
  --ds-ring: 0 0 0 4px rgba(30, 155, 255, .22);
  --ds-ring-focus: 0 0 0 3px rgba(27, 67, 112, .18);

  /* ---- Aralık (4pt ölçek) ---- */
  --ds-1: 4px;   --ds-2: 8px;   --ds-3: 12px;  --ds-4: 16px;
  --ds-5: 20px;  --ds-6: 24px;  --ds-7: 32px;  --ds-8: 40px;
  --ds-9: 48px;  --ds-10: 64px; --ds-11: 80px; --ds-12: 96px;

  /* ---- Tipografi ---- */
  --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ds-font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ds-fs-display: clamp(38px, 4.6vw, 60px);
  --ds-fs-h1: clamp(32px, 3.6vw, 46px);
  --ds-fs-h2: clamp(26px, 2.6vw, 36px);
  --ds-fs-h3: clamp(20px, 1.8vw, 25px);
  --ds-fs-h4: 18px;
  --ds-fs-lg: 17px;
  --ds-fs-base: 15px;
  --ds-fs-sm: 13.5px;
  --ds-fs-xs: 12px;
  --ds-fs-2xs: 11px;

  /* ---- Kontrol yükseklikleri ---- */
  --ds-h-sm: 38px;
  --ds-h-md: 46px;
  --ds-h-lg: 54px;
  --ds-h-xl: 60px;

  /* ---- Hareket ---- */
  --ds-ease: cubic-bezier(.4, 0, .2, 1);
  --ds-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ds-t-fast: .16s var(--ds-ease);
  --ds-t: .24s var(--ds-ease);
  --ds-t-slow: .42s var(--ds-ease-out);

  --ds-container: 1280px;
  --ds-header-h: 76px;
  --ds-topbar-h: 34px;

  /* Eski değişken adlarını yeni sisteme bağla (geriye uyum) */
  --primary: var(--ds-ink-900);
  --primary-light: var(--ds-ink-700);
  --accent: var(--ds-gold-500);
  --accent-hover: var(--ds-gold-600);
  --text: var(--ds-text);
  --text-light: var(--ds-text-2);
  --text-muted: var(--ds-text-3);
  --border: var(--ds-line);
  --bg: var(--ds-canvas);
  --white: #fff;
  --radius-sm: var(--ds-r-sm);
  --radius: var(--ds-r-md);
  --radius-lg: var(--ds-r-lg);
  --radius-xl: var(--ds-r-xl);
  --shadow-sm: var(--ds-sh-xs);
  --shadow: var(--ds-sh-sm);
  --shadow-lg: var(--ds-sh-md);
  --shadow-xl: var(--ds-sh-lg);
  --transition: var(--ds-t);
}

/* ============================================================
   1. TEMEL / RESET KATMANI
   ============================================================ */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--ds-font) !important;
  font-size: var(--ds-fs-base);
  line-height: 1.6;
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
}

h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .search-box-header h2,
.stat-value, .price-total, .car-name {
  font-family: var(--ds-font-display) !important;
  letter-spacing: -.022em;
  line-height: 1.15;
  font-weight: 800;
  color: var(--ds-text);
}

h1 { font-size: var(--ds-fs-h1); letter-spacing: -.032em; }
h2 { font-size: var(--ds-fs-h2); letter-spacing: -.028em; }
h3 { font-size: var(--ds-fs-h3); letter-spacing: -.022em; }
h4 { font-size: var(--ds-fs-h4); letter-spacing: -.015em; }

/* Fiyat / tarih / sayı hizası — rezervasyon sitesinde kritik */
.price-total, .price-detail, .price-days, .stat-value, .stat-number,
.summary-rows, .row strong, .detail-row, .total, td, th,
input[type="text"].datetime-picker, .car-price, .kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

::selection { background: var(--ds-gold-300); color: var(--ds-ink-900); }

/* Görünür klavye odağı — erişilebilirlik tabanı */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ds-gold-500);
  outline-offset: 2px;
  border-radius: var(--ds-r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* İnce, marka renginde kaydırma çubuğu */
* { scrollbar-width: thin; scrollbar-color: var(--ds-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ds-line-strong);
  border-radius: var(--ds-r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ds-text-3); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   2. BUTON — tüm projede TEK buton anatomisi
   ============================================================ */

.btn,
button.btn,
a.btn,
.btn-select,
.btn-search,
.btn-primary,
.btn-outline {
  --btn-h: var(--ds-h-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn-h) !important;
  padding: 0 22px;
  font-family: var(--ds-font-display) !important;
  font-size: 14.5px;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
  line-height: 1;
  border-radius: var(--ds-r-sm) !important;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--ds-t-fast), box-shadow var(--ds-t),
              background var(--ds-t), border-color var(--ds-t), color var(--ds-t);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
}

.btn i, .btn-select i, .btn-search i { font-size: .92em; }

.btn:active:not(:disabled), .btn-select:active, .btn-search:active { transform: translateY(1px) scale(.995); }

.btn:disabled, .btn[disabled], .btn-select:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Birincil: altın --- */
.btn-primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-search,
.btn-select {
  background: linear-gradient(180deg, var(--ds-gold-400) 0%, var(--ds-gold-500) 62%, var(--ds-gold-600) 100%) !important;
  color: var(--ds-ink-900) !important;
  border: 1px solid rgba(138, 109, 20, .38) !important;
  box-shadow: var(--ds-sh-sm), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

.btn-primary:hover, .btn-search:hover, .btn-select:hover {
  background: linear-gradient(180deg, var(--ds-gold-300) 0%, var(--ds-gold-400) 62%, var(--ds-gold-500) 100%) !important;
  box-shadow: var(--ds-sh-gold), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
  transform: translateY(-1px);
  color: var(--ds-ink-900) !important;
}

/* --- İkincil: lacivert dolu --- */
.btn-secondary, .btn-dark, .btn.btn-ink {
  background: var(--ds-ink-800) !important;
  color: #fff !important;
  border: 1px solid var(--ds-ink-700) !important;
  box-shadow: var(--ds-sh-sm) !important;
}
.btn-secondary:hover, .btn-dark:hover, .btn.btn-ink:hover {
  background: var(--ds-ink-700);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ds-sh-md);
}

/* --- Çerçeveli --- */
.btn-outline, .btn.btn-outline, a.btn-outline {
  background: rgba(255, 255, 255, .04) !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-line-strong) !important;
  box-shadow: none !important;
}
.btn-outline:hover {
  background: var(--ds-subtle) !important;
  border-color: var(--ds-ink-600) !important;
  color: var(--ds-ink-800) !important;
  transform: translateY(-1px);
}

/* Koyu zemin üzerindeki çerçeveli buton */
.hero .btn-outline, .footer .btn-outline, .cta .btn-outline,
.search-header .btn-outline, [data-ds-dark] .btn-outline {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero .btn-outline:hover, .footer .btn-outline:hover, .cta .btn-outline:hover,
[data-ds-dark] .btn-outline:hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .5) !important;
  color: #fff !important;
}

/* --- Sade / hayalet --- */
.btn-ghost {
  background: transparent;
  color: var(--ds-text-2);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--ds-subtle); color: var(--ds-text); }

/* --- Boyut varyantları --- */
.btn-sm { --btn-h: var(--ds-h-sm); padding: 0 15px !important; font-size: 13px !important; border-radius: var(--ds-r-xs) !important; }
.btn-lg { --btn-h: var(--ds-h-lg); padding: 0 30px !important; font-size: 15.5px !important; border-radius: var(--ds-r-md) !important; }
.btn-xl { --btn-h: var(--ds-h-xl); padding: 0 36px !important; font-size: 16.5px !important; border-radius: var(--ds-r-md) !important; }
.btn-block, .btn-full { width: 100%; }

/* Işıltı geçişi — sadece birincil CTA'da */
.btn-primary::after, .btn-search::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .62s var(--ds-ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover::after, .btn-search:hover::after { transform: translateX(120%); }

/* ============================================================
   3. FORM ELEMANLARI — TEK input anatomisi
   ============================================================ */

.form-group { position: relative; margin-bottom: var(--ds-4); }

.form-group > label,
label.ds-label,
.filters-card label,
.form-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--ds-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-text-3);
  margin-bottom: 7px;
}
.form-group > label i { color: var(--ds-gold-600); font-size: 12px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  min-height: var(--ds-h-md) !important;
  padding: 11px 14px;
  font-family: var(--ds-font) !important;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ds-text);
  background-color: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow: inset 0 1px 2px rgba(11, 27, 46, .04) !important;
  transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast), background var(--ds-t-fast);
  appearance: none;
  -webkit-appearance: none;
}

input::placeholder, textarea::placeholder { color: var(--ds-text-3); font-weight: 400; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--ds-line-strong);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ds-gold-500) !important;
  box-shadow: var(--ds-ring), inset 0 1px 2px rgba(11, 27, 46, .03) !important;
}

input:disabled, select:disabled, textarea:disabled,
input[readonly] {
  background: var(--ds-subtle);
  color: var(--ds-text-3);
  cursor: not-allowed;
  box-shadow: none;
}

textarea { min-height: 110px; resize: vertical; line-height: 1.6; padding: 13px 14px; }

/* Native select yerine ok ikonu ile temiz görünüm */
select {
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C8AA0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
select::-ms-expand { display: none; }

/* Onay kutusu */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 19px !important;
  height: 19px !important;
  min-height: 0 !important;
  max-width: 19px !important;
  padding: 0 !important;
  margin: 0;
  flex: 0 0 19px;
  border: 1.5px solid var(--ds-line-strong) !important;
  background: #fff !important;
  background-image: none !important;
  cursor: pointer;
  position: relative;
  box-shadow: none !important;
  transition: all var(--ds-t-fast);
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--ds-ink-800) !important;
  border-color: var(--ds-ink-800) !important;
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5.5px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--ds-gold-400);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(43deg);
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--ds-gold-400);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  box-shadow: var(--ds-ring);
  outline: none;
}

/* ============================================================
   4. ÖZEL AÇILIR LİSTE (native select yerine)
   JS ile sarmalanır; asıl <select> DOM'da kalır (name/value korunur)
   ============================================================ */

.ds-select {
  position: relative;
  width: 100%;
  font-family: var(--ds-font);
}
.ds-select > select.ds-select__native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
  min-height: 0; padding: 0; margin: 0; border: 0;
}
.ds-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--ds-h-md);
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  box-shadow: inset 0 1px 2px rgba(11, 27, 46, .04);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
.ds-select__trigger:hover { border-color: var(--ds-line-strong); }
.ds-select.is-open .ds-select__trigger,
.ds-select__trigger:focus-visible {
  border-color: var(--ds-gold-500);
  box-shadow: var(--ds-ring);
  outline: none;
}
.ds-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-select__caret {
  flex: 0 0 auto;
  color: var(--ds-text-3);
  font-size: 11px;
  transition: transform var(--ds-t);
}
.ds-select.is-open .ds-select__caret { transform: rotate(180deg); color: var(--ds-gold-600); }

.ds-select__panel {
  position: absolute;
  z-index: 2400;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 288px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top center;
  transition: opacity var(--ds-t-fast), transform var(--ds-t-fast), visibility var(--ds-t-fast);
}
.ds-select.is-open .ds-select__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.ds-select.is-up .ds-select__panel { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }

.ds-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text-2);
  border-radius: var(--ds-r-xs);
  cursor: pointer;
  transition: background var(--ds-t-fast), color var(--ds-t-fast);
}
.ds-select__option:hover, .ds-select__option.is-active {
  background: var(--ds-subtle);
  color: var(--ds-text);
}
.ds-select__option[aria-selected="true"] {
  background: var(--ds-gold-50);
  color: var(--ds-ink-800);
  font-weight: 700;
}
.ds-select__option[aria-selected="true"]::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  color: var(--ds-gold-600);
}

/* Koyu zeminde açılır liste */
[data-ds-dark] .ds-select__trigger,
.search-box .ds-select__trigger {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}
[data-ds-dark] .ds-select__caret, .search-box .ds-select__caret { color: rgba(255, 255, 255, .6); }

/* ============================================================
   5. KART — TEK kart anatomisi
   ============================================================ */

.ds-card, .card, .panel, .filters-card, .stat-card, .kpi-card,
.testimonial-card, .feature-card, .campaign-card-full {
  background-color: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-xs);
  transition: box-shadow var(--ds-t), transform var(--ds-t), border-color var(--ds-t);
}

.ds-card--hover:hover, .card--hover:hover {
  box-shadow: var(--ds-sh-md);
  transform: translateY(-2px);
  border-color: var(--ds-line-strong);
}

.ds-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-4);
  padding: var(--ds-5) var(--ds-6);
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-card__body { padding: var(--ds-6); }
.ds-card__foot {
  padding: var(--ds-4) var(--ds-6);
  border-top: 1px solid var(--ds-line-soft);
  background: var(--ds-canvas);
  border-radius: 0 0 var(--ds-r-lg) var(--ds-r-lg);
}

/* ============================================================
   6. ROZET / ETİKET / ÇİP
   ============================================================ */

.ds-badge, .badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: var(--ds-fs-2xs);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  border-radius: var(--ds-r-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ds-badge i, .badge i { font-size: 9.5px; }

.ds-badge--gold  { background: var(--ds-gold-50);   color: var(--ds-gold-700); border-color: var(--ds-gold-100); }
.ds-badge--ink   { background: var(--ds-ink-800);   color: #fff; }
.ds-badge--ok, .status-confirmed, .status-completed
                 { background: var(--ds-success-bg); color: var(--ds-success); border-color: var(--ds-success-line); }
.ds-badge--warn, .status-pending
                 { background: var(--ds-warning-bg); color: var(--ds-warning); border-color: var(--ds-warning-line); }
.ds-badge--danger, .status-cancelled, .status-failed
                 { background: var(--ds-danger-bg);  color: var(--ds-danger);  border-color: var(--ds-danger-line); }
.ds-badge--info  { background: var(--ds-info-bg);    color: var(--ds-info);    border-color: var(--ds-info-line); }
.ds-badge--muted { background: var(--ds-subtle);     color: var(--ds-text-2);  border-color: var(--ds-line); }

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: var(--ds-fs-sm);
  font-weight: 600;
  color: var(--ds-text-2);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-pill);
  cursor: pointer;
  transition: all var(--ds-t-fast);
}
.ds-chip:hover { border-color: var(--ds-ink-600); color: var(--ds-ink-700); }
.ds-chip.is-active {
  background: var(--ds-ink-800);
  border-color: var(--ds-ink-800);
  color: #fff;
}

/* ============================================================
   7. UYARI / BİLDİRİM
   ============================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  font-size: var(--ds-fs-base);
  font-weight: 500;
  line-height: 1.55;
  border-radius: var(--ds-r-md);
  border: 1px solid var(--ds-line);
  background: var(--ds-subtle);
  color: var(--ds-text-2);
}
.alert i { flex: 0 0 auto; margin-top: 2px; font-size: 15px; }
.alert-error, .alert-danger { background: var(--ds-danger-bg);  border-color: var(--ds-danger-line);  color: #8E1D14; }
.alert-error i, .alert-danger i { color: var(--ds-danger); }
.alert-success { background: var(--ds-success-bg); border-color: var(--ds-success-line); color: #076B49; }
.alert-success i { color: var(--ds-success); }
.alert-warning { background: var(--ds-warning-bg); border-color: var(--ds-warning-line); color: #7A4A00; }
.alert-warning i { color: var(--ds-warning); }
.alert-info { background: var(--ds-info-bg); border-color: var(--ds-info-line); color: #16509F; }
.alert-info i { color: var(--ds-info); }

/* ============================================================
   8. TABLO
   ============================================================ */

.ds-table, table.data-table, .table-card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ds-fs-sm);
}
.ds-table thead th, table.data-table thead th {
  padding: 12px 16px;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-text-3);
  text-align: left;
  background: var(--ds-canvas);
  border-bottom: 1px solid var(--ds-line);
  white-space: nowrap;
}
.ds-table tbody td, table.data-table tbody td {
  padding: 14px 16px;
  color: var(--ds-text-2);
  border-bottom: 1px solid var(--ds-line-soft);
  vertical-align: middle;
}
.ds-table tbody tr, table.data-table tbody tr { transition: background var(--ds-t-fast); }
.ds-table tbody tr:hover, table.data-table tbody tr:hover { background: var(--ds-canvas); }
.ds-table tbody tr:last-child td, table.data-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   9. YARDIMCI SINIFLAR
   ============================================================ */

.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-6);
}
@media (max-width: 640px) { .ds-container { padding-inline: var(--ds-4); } }

.ds-stack   { display: flex; flex-direction: column; gap: var(--ds-4); }
.ds-row     { display: flex; align-items: center; gap: var(--ds-3); }
.ds-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-4); }
.ds-wrap    { flex-wrap: wrap; }
.ds-grow    { flex: 1 1 auto; min-width: 0; }

.ds-eyebrow {
  font-family: var(--ds-font);
  font-size: var(--ds-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-gold-600);
}
.ds-muted { color: var(--ds-text-3); }
.ds-hairline { height: 1px; background: var(--ds-line); border: 0; margin: var(--ds-6) 0; }

/* Ekran okuyucu */
.ds-sr, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* İçerik yükleme iskeleti */
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-subtle) 25%, var(--ds-sunken) 37%, var(--ds-subtle) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ds-r-sm);
}
@keyframes ds-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Görünüme girince yumuşak açılış — JS ile .is-in eklenir */
.ds-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ds-ease-out), transform .62s var(--ds-ease-out);
}
.ds-reveal.is-in { opacity: 1; transform: none; }

/* Yazdırma */
@media print {
  .main-header, .footer, .whatsapp-float, .mobile-menu,
  .mobile-reservation-bar, .btn, .filters-sidebar { display: none !important; }
  body { background: #fff !important; }
  .ds-card, .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}