@charset "UTF-8";
/* ==========================================================================
   Yiwu Promosyon — Ana stil dosyası
   Tasarım dili: beyaz zemin, indigo/mor vurgu, orta ölçekli animasyon
   ========================================================================== */

/* ---------- 1. Tokenlar ---------- */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  --font: "Outfit", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mercan kırmızısı — düz, gradyansız */
  --brand-1: #e8474e;
  --brand-2: #f26a70;
  --brand-grad: linear-gradient(135deg, #ee5259, #f5868a);
  --brand-soft: #fdeef0;
  --brand-soft-2: #fef6f6;

  --ink: #16181d;
  --ink-2: #3d424b;
  --muted: #7b818c;
  --muted-2: #a9aeb7;

  --bg: #ffffff;
  --bg-soft: #f7f7f9;
  --line: #ececef;
  --line-2: #f5f5f7;
  --line-box: #e9e9ec;   /* kutu/kart kenarlığı — ince ve açık */

  --ok: #1f9d63;
  --ok-soft: #eaf7f0;
  --warn: #a4760c;
  --warn-soft: #fdf4e0;
  --bad: #d93a3a;
  --bad-soft: #fdecec;
  --info: #2f6fe4;
  --info-soft: #edf3fe;

  --r-sm: 8px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* --panel, --bg-2 ve --r-md sayfalarda ve bu dosyada kullanılıyordu ama hiç
     tanımlanmamıştı: değersiz var() bildirimi geçersiz sayıldığı için açılır
     paneller saydam kalıyor, satır vurguları ve yuvarlatmalar hiç uygulanmıyordu.
     (--line-3 her yerde yedek değerle yazılmış, o yüzden sorun değil.) */
  --panel: #ffffff;
  --bg-2: var(--bg-soft);

  --sh-1: 0 1px 2px rgba(16, 18, 22, .04);
  --sh-2: 0 2px 10px rgba(16, 18, 22, .06);
  --sh-3: 0 10px 30px rgba(16, 18, 22, .10);
  --sh-brand: none;

  --head-h: 68px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--brand-soft); color: var(--brand-1); }

:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* İnce scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 20px; border: 3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ---------- 3. Tipografi ---------- */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(30px, 4.4vw, 50px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(18px, 2vw, 22px); }
h4 { font-size: 16px; }

.lead { font-size: clamp(15px, 1.6vw, 18px); color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.strong { font-weight: 600; }
.grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 24px; }
.section { padding: 76px 0; }
.section-sm { padding: 44px 0; }
.section-soft { background: var(--bg-soft); }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrap { flex-wrap: wrap; }
.col { flex-direction: column; }
/* .gap-8 ve .gap-12 tanımsızdı ama sayfalarda kullanılıyordu: o yerlerde
   boşluk hiç uygulanmıyor, öğeler birbirine yapışıyordu. */
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
/* .mt-4, .mb-0 ve .pad-18 sayfalarda kullanılıyordu ama hiç tanımlanmamıştı:
   .mb-0 son alanın boşluğunu kaldıramadığı için pencerelerin altı fazla açık
   kalıyordu, .pad-18 kutularının içeriği kenara yapışıyordu (17 yerde). */
.pad-18 { padding: 18px; }
.hidden { display: none !important; }
.full { width: 100%; }
.tar { text-align: right; }
.tac { text-align: center; }

.section-head { margin-bottom: 34px; }
.section-head h2 { margin-bottom: 8px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-soft); color: var(--brand-1);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 14px;
}
.eyebrow svg { width: 14px; height: 14px; }
/* Ana sayfa: Instagram hesabına giden etiket (renkli logo) */
a.eyebrow-ig { text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; }
a.eyebrow-ig:hover { background: #fbdfe3; box-shadow: 0 4px 14px rgba(214, 36, 159, .14); transform: translateY(-1px); }
.eyebrow svg.ig-renkli { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.scrolled { box-shadow: var(--sh-2); }

.header-inner {
  height: var(--head-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 26px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-grad);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: var(--sh-brand);
  transition: transform .3s var(--ease-out);
}
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }
.brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.brand-name span { color: var(--brand-1); }

.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.main-nav a {
  position: relative;
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.main-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px; background: var(--brand-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.main-nav a:hover { color: var(--brand-1); background: var(--brand-soft); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.main-nav a.active { color: var(--brand-1); font-weight: 600; }
/* Hizmetler ile Galeri/Hakkımda/İletişim arasındaki ayraç */
.main-nav .nav-ayrac { width: 2px; height: 24px; border-radius: 2px; background: #b9bec7; margin: 0 12px; flex-shrink: 0; }

.header-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.lang-switch {
  display: flex; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
}
.lang-switch button, .lang-switch a {
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 4px 11px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.lang-switch button.active, .lang-switch a.active { background: #fff; color: var(--brand-1); box-shadow: var(--sh-1); }

.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 13px 5px 5px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.user-chip:hover { border-color: var(--brand-1); box-shadow: var(--sh-1); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  flex-shrink: 0;
}
.avatar.lg { width: 62px; height: 62px; font-size: 22px; }
.avatar-holder { position: relative; overflow: visible; }
.avatar-badge {
  position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; font-size: 10px; border: 2px solid #fff;
}

.burger {
  display: none; width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; place-items: center;
}
.burger svg { width: 20px; height: 20px; }

/* Duyuru şeridi */
.announce {
  background: var(--brand-grad); color: #fff;
  overflow: hidden; position: relative;
  font-size: 13.5px; font-weight: 500;
}
.announce-track {
  display: flex; gap: 60px; white-space: nowrap;
  padding: 9px 0; width: max-content;
  animation: marquee 34s linear infinite;
}
.announce:hover .announce-track { animation-play-state: paused; }
.announce-track span { display: inline-flex; align-items: center; gap: 9px; }
.announce-track svg { width: 15px; height: 15px; opacity: .9; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 6. Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .22s var(--ease),
              background .2s, color .2s, border-color .2s;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 14px 32px rgba(79, 70, 229, .38); transform: translateY(-2px); }

.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand-1); color: var(--brand-1); background: var(--brand-soft); }

.btn-soft { background: var(--brand-soft); color: var(--brand-1); }
.btn-soft:hover:not(:disabled) { background: #e0e7ff; }

.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b91c1c; transform: translateY(-2px); }

.btn-danger-soft { background: var(--bad-soft); color: var(--bad); border-color: #fecaca; }
.btn-danger-soft:hover:not(:disabled) { background: #fee2e2; }

.btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: var(--r); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-icon { padding: 9px; width: 38px; height: 38px; }
.btn-block { width: 100%; }

/* ---------- 7. Kart ---------- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease-out), border-color .3s;
}
.card-pad { padding: 24px; }
.card-hover:hover { box-shadow: var(--sh-3); transform: translateY(-4px); border-color: #dbe1ea; }
.card-head {
  padding: 18px 24px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.card-head h3 { font-size: 17px; }
.card-body { padding: 24px; }
.card-foot { padding: 16px 24px; border-top: 1px solid var(--line-2); background: var(--bg-soft); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Özellik kartı */
.feature { padding: 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; height: 100%; }
.feature-ico {
  width: 50px; height: 50px; border-radius: 15px;
  background: var(--brand-soft); color: var(--brand-1);
  display: grid; place-items: center; margin-bottom: 18px;
  transition: transform .35s var(--ease-out), background .3s;
}
.feature-ico svg { width: 24px; height: 24px; }
.feature:hover .feature-ico { transform: scale(1.1) rotate(-6deg); background: var(--brand-grad); color: #fff; }
.feature h3 { font-size: 17px; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 14.5px; }

/* İstatistik */
.stat { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
.stat-val { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- 8. Formlar ---------- */
.field { margin-bottom: 17px; }
.field > label, .lbl {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px;
}
.req { color: var(--bad); }

/* input:not([type]) — type yazilmamis bir <input> tarayicida "text" gibi
   davranir ama asagidaki oznitelik seciciler onu yakalamiyordu; bu yuzden
   admin modallarindaki alanlar (Baslik, Nereden, Sehirler, lat/lng...) kenarliksiz
   ve dar cikiyor, form kirik gorunuyordu. */
.input, input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="time"], input[type="number"],
input[type="search"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; font-size: 14.5px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--brand-1);
  box-shadow: 0 0 0 3.5px rgba(79, 70, 229, .13);
}
.input.err, input.err, select.err, textarea.err { border-color: var(--bad); box-shadow: 0 0 0 3.5px rgba(220, 38, 38, .1); }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.err-text { font-size: 12.5px; color: var(--bad); margin-top: 6px; display: none; }
.err-text.show { display: block; }

/* Değerlendirme yıldızları (Hakkımda + Değerlendirmem). Simge 20px olduğu için
   dokunma hedefi çok küçük kalıyordu; kutuyu büyütüyoruz, simge aynı kalıyor. */
#starPicker span { display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 5px; border-radius: 9px; line-height: 0; transition: background .15s; }
#starPicker span:hover, #starPicker span:focus-visible { background: var(--bg-soft); outline: none; }
@media (max-width: 560px) { #starPicker span { padding: 10px 7px; } }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 17px; height: 17px; accent-color: var(--brand-1); margin-top: 2px; cursor: pointer; flex-shrink: 0;
}

/* Seçilebilir kutu (radio/checkbox kart) */
.pick {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--r);
  background: #fff; transition: border-color .2s, background .2s, box-shadow .2s;
  font-size: 14.5px; font-weight: 500;
}
.pick:hover { border-color: var(--brand-1); background: var(--brand-soft); }
.pick input { accent-color: var(--brand-1); width: 17px; height: 17px; cursor: pointer; }
.pick.on { border-color: var(--brand-1); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(79, 70, 229, .09); }
.pick svg { width: 19px; height: 19px; color: var(--brand-1); }

/* Anahtar (switch) */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  cursor: pointer; transition: background .28s var(--ease);
}
.switch .slider::before {
  content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; box-shadow: var(--sh-1);
  transition: transform .28s var(--ease-out);
}
.switch input:checked + .slider { background: var(--brand-1); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------- 9. Rozet / durum ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge svg { width: 13px; height: 13px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.no-dot::before { display: none; }

.b-gray  { background: #f1f5f9; color: #475569; }
.b-green { background: var(--ok-soft); color: var(--ok); }
.b-red   { background: var(--bad-soft); color: var(--bad); }
.b-amber { background: var(--warn-soft); color: var(--warn); }
.b-blue  { background: var(--info-soft); color: var(--info); }
.b-brand { background: var(--brand-soft); color: var(--brand-1); }

/* Etiket + değer çiftleri (randevu/ödeme/otel detay kartları).
   Onceki hal duz metindi: gri etiket ile siyah deger yalnizca renkle
   ayrisiyordu ve goz ikisini ayni blok saniyordu. Artik her cift kendi
   yumusak kutusunda, solunda marka rengi seridi; etiket kucuk/seyrek
   harf araligiyla ikincil, deger buyuk ve kalin. */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.info-item {
  position: relative; padding: 11px 14px 12px 16px; min-width: 0;
  background: var(--bg-soft); border: 1px solid var(--line-box); border-radius: 10px;
}
.info-item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand-1); opacity: .45;
}
.info-item .k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted-2);
  text-transform: uppercase; margin-bottom: 5px; line-height: 1.3;
}
.info-item .v { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; min-width: 0; }
.info-item .v b { font-weight: 700; }
.info-item .v .tiny, .info-item .v .muted { font-weight: 500; }

/* Ustten inen bildirim (giris sonrasi karsilama gibi). Alt-sag yigindan
   ayri bir kap kullanir; ikisi ayni anda ekranda durabilsin diye. */
.toast-wrap.top { top: 18px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); align-items: center; }
.toast-wrap.top .toast { animation: toastDown .38s var(--ease-out) both; }
.toast-wrap.top .toast.out { animation: toastUp .3s var(--ease) forwards; }
@keyframes toastDown { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes toastUp { to { opacity: 0; transform: translateY(-26px); } }
.toast.welcome { background: var(--ok); color: #fff; }
.toast.welcome svg { color: #fff; }

/* Durum kenarlıklı randevu kartı */
.rec { border-left: 4px solid var(--line); }
.rec.s-gray  { border-left-color: #94a3b8; }
.rec.s-green { border-left-color: var(--ok); }
.rec.s-red   { border-left-color: var(--bad); }
.rec.s-amber { border-left-color: var(--warn); }
.rec.s-blue  { border-left-color: var(--info); }

/* Bildirim sayacı */
.dot-count {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--bad); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1;
}
.dot-count.brand { background: var(--brand-1); }

/* ---------- 10. Tablo ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 620px; }
table.tbl th {
  text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 13px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tbl th:first-child, table.tbl td:first-child { text-align: left; }
table.tbl th:not(:first-child), table.tbl td:not(:first-child) { text-align: left; }
table.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: middle; }
table.tbl tbody tr { transition: background .18s; }
table.tbl tbody tr:hover { background: var(--bg-soft); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr.ct-row { cursor: pointer; }
table.tbl tbody tr.ct-row:focus-visible { outline: 2px solid var(--brand-1); outline-offset: -2px; }

/* ---------- Kayıt detay pop-up (telefon/e-posta/adres) ---------- */
.cd-row { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.cd-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cd-row:first-child { padding-top: 0; }
.cd-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cd-val { font-size: 14.5px; color: var(--ink); line-height: 1.4; word-break: break-word; }

/* ---------- 11. Filtre çubuğu ---------- */
.filters {
  display: flex; gap: 11px; flex-wrap: wrap; align-items: center;
  padding: 16px 20px; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 22px;
}
.filters .search { position: relative; flex: 1 1 240px; min-width: 190px; }
.filters .search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--muted-2); pointer-events: none;
}
.filters .search input { padding-left: 40px; }
.filters select { width: auto; min-width: 150px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: all .2s;
}
.chip:hover { border-color: var(--brand-1); color: var(--brand-1); }
.chip.on { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }

/* ---------- 12. Sayfalama ---------- */
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 32px; flex-wrap: wrap; }
.pager button {
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 500;
  transition: all .2s;
}
.pager button:hover:not(:disabled) { border-color: var(--brand-1); color: var(--brand-1); }
.pager button.on { background: var(--brand-grad); color: #fff; border-color: transparent; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 13. Uyarı kutuları ---------- */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 17px; border-radius: var(--r); font-size: 14px;
  border: 1px solid transparent; margin-bottom: 18px;
}
.alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
/* display:flex, hidden özniteliğini eziyordu: hata kutuları boşken de görünüyordu. */
.alert[hidden] { display: none; }
.a-ok   { background: var(--ok-soft); color: #065f46; border-color: #a7f3d0; }
.a-bad  { background: var(--bad-soft); color: #991b1b; border-color: #fecaca; }
.a-warn { background: var(--warn-soft); color: #92400e; border-color: #fde68a; }
.a-info { background: var(--info-soft); color: #1e40af; border-color: #bfdbfe; }

/* ---------- 14. Kullanıcı paneli (navigation) ----------
   Yan panel her ekran boyutunda soldan kayan tam bir overlay'dir —
   yalnızca profil rozetine tıklanınca açılır, sayfa akışında yer kaplamaz. */
.shell { display: block; padding: 28px 0 60px; }
.sidenav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 160;
  width: min(300px, 86vw); flex-shrink: 0;
  background: #fff; border: 0; border-right: 1px solid var(--line); border-radius: 0;
  padding: 16px 16px 26px; box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden; transform: translateX(-100%);
  transition: transform .32s var(--ease-out), visibility 0s linear .32s;
}
.sidenav.open {
  visibility: visible; transform: none; box-shadow: var(--sh-3);
  transition: transform .32s var(--ease-out), visibility 0s;
}
.sidenav-user { display: flex; align-items: center; gap: 11px; padding: 8px 42px 16px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.sidenav-user > span:last-child { min-width: 0; }
.sidenav-user .nm { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.sidenav-user .em { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidenav a, .sidenav button.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-sm); border: 0; background: transparent;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: background .2s, color .2s, transform .2s var(--ease-out);
  text-align: left; margin-bottom: 2px;
}
.sidenav a svg, .sidenav button.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); transition: color .2s; }
.sidenav a:hover, .sidenav button.nav-item:hover { background: var(--brand-soft); color: var(--brand-1); transform: translateX(3px); }
.sidenav a:hover svg, .sidenav button.nav-item:hover svg { color: var(--brand-1); }
.sidenav a.active { background: var(--brand-grad); color: #fff; box-shadow: var(--sh-brand); }
.sidenav a.active svg { color: #fff; }
.sidenav .sub {
  position: relative; padding-left: 28px; margin-bottom: 4px;
  overflow: hidden; max-height: 0; transition: max-height .35s var(--ease);
}
.sidenav .sub.open { max-height: 280px; }
.sidenav .sub::before {
  content: ""; position: absolute; left: 17px; top: 5px; bottom: 7px;
  width: 2px; border-radius: 2px; background: var(--line);
}
.sidenav .sub a { font-size: 13.5px; padding: 8px 12px; }
.sidenav .sep { height: 1px; background: var(--line-2); margin: 10px 4px; }
.sidenav .danger { color: var(--bad); }
.sidenav .danger svg { color: var(--bad); }
.sidenav .danger:hover { background: var(--bad-soft); color: var(--bad); }

/* Kapat butonu ve perde */
.sidenav-close {
  display: flex; position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0; margin: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink-2); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.sidenav-close svg { width: 18px; height: 18px; }
.sidenav-close:hover { background: var(--bad-soft); color: var(--bad); border-color: #fecaca; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 155;
  background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.nav-backdrop.on { opacity: 1; pointer-events: auto; }

/* Sidenav'ı olmayan sayfalarda profil rozetinin küçük açılır menüsü */
.chip-dd {
  position: fixed; z-index: 160; min-width: 200px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 8px; opacity: 0; transform: translateY(-6px);
  pointer-events: none; transition: opacity .18s, transform .18s;
}
.chip-dd.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chip-dd a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; color: var(--ink); }
.chip-dd a:hover { background: var(--bg-soft); }
.chip-dd a svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.chip-dd .sep { height: 1px; background: var(--line-2); margin: 6px 4px; }

.pane { flex: 1; min-width: 0; }
.pane-head { margin-bottom: 24px; }
/* Detay sayfası başlığı — kayıt adları uzun olabildiği için (“ÖRNEK — Fuar
   günü masrafları” gibi) 30px iki satıra taşıp sayfanın üstünü şişiriyordu. */
.pane-head h1 { font-size: clamp(20px, 2.2vw, 24px); margin-bottom: 5px; }

/* ---------- 15. Ürün kartı ---------- */
.p-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease-out); position: relative; }
.p-card:hover { box-shadow: var(--sh-3); transform: translateY(-5px); }
.p-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; }
.p-thumb img, .p-thumb .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.p-card:hover .p-thumb img, .p-card:hover .p-thumb .ph { transform: scale(1.07); }
.p-thumb .ph { display: grid; place-items: center; background: linear-gradient(135deg, #eef2ff, #f5f3ff); color: var(--brand-1); }
.p-thumb .ph svg { width: 46px; height: 46px; opacity: .5; }
.p-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.p-cat { font-size: 11.5px; font-weight: 600; color: var(--brand-1); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.p-title { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-price { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.p-price small { font-size: 12px; font-weight: 600; color: var(--muted); }

.fav {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  width: 35px; height: 35px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh-2); transition: transform .22s var(--ease-out), background .2s;
}
.fav svg { width: 18px; height: 18px; color: var(--muted); fill: none; transition: color .2s, fill .2s; }
.fav:hover { transform: scale(1.13); }
.fav.on svg { color: #f59e0b; fill: #f59e0b; }
.fav.pop { animation: pop .4s var(--ease-out); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

.p-flag {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--brand-grad); color: #fff; box-shadow: var(--sh-2);
}
.p-flag.out { background: #475569; }

/* ---------- 16. Mesajlaşma ---------- */
.chat { display: flex; flex-direction: column; height: calc(100vh - var(--head-h) - 190px); min-height: 560px; max-height: calc(100vh - var(--head-h) - 90px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.chat-head { padding: 13px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: #fff; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 16px 18px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 5px; }
.msg { max-width: 78%; display: flex; flex-direction: column; animation: msgIn .32s var(--ease-out) both; }
.msg + .msg { margin-top: 3px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.msg.me { align-self: flex-end; align-items: flex-end; margin-left: auto; }
.msg.them { align-self: flex-start; }
.bubble { padding: 9px 13px; border-radius: 15px; font-size: 14.5px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; box-shadow: var(--sh-1); }
.msg.me .bubble { background: var(--brand-grad); color: #fff; border-bottom-right-radius: 5px; }
.msg.them .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-top: 2px; padding: 0 4px; }
.msg-meta svg { width: 15px; height: 15px; }
.tick-read { color: var(--info); }
.quote {
  border-left: 3px solid rgba(255, 255, 255, .55); padding: 5px 10px; margin-bottom: 7px;
  font-size: 12.5px; opacity: .88; border-radius: 4px; background: rgba(255, 255, 255, .14);
}
.msg.them .quote { border-left-color: var(--brand-1); background: var(--brand-soft); color: var(--ink-2); opacity: 1; }
.chat-attach { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.16); margin-bottom: 6px; font-size: 13px; }
.msg.them .chat-attach { background: var(--bg-soft); }
.chat-attach svg { width: 20px; height: 20px; flex-shrink: 0; }
.chat-foot { padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.chat-input { display: flex; gap: 9px; align-items: flex-end; }
.chat-input textarea { min-height: 44px; max-height: 130px; resize: none; border-radius: var(--r); padding: 11px 14px; }
.typing { display: flex; gap: 3px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-1); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

/* ---------- 17. Bildirim satırı ---------- */
.notif {
  display: flex; gap: 14px; padding: 17px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 11px;
  cursor: pointer; transition: box-shadow .25s, transform .25s var(--ease-out), border-color .2s;
  border-left-width: 4px;
}
.notif:hover { box-shadow: var(--sh-2); transform: translateX(4px); }
.notif.unread { background: linear-gradient(90deg, var(--brand-soft), #fff 40%); }
.notif.notif-linksiz { cursor: default; }
.notif.notif-linksiz:hover { transform: none; }
.notif-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.notif-ico svg { width: 19px; height: 19px; }
.notif h4 { font-size: 14.5px; margin-bottom: 3px; }
.notif p { font-size: 13.5px; color: var(--muted); }
.notif time { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.barrier { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; color: var(--muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.barrier::before, .barrier::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- 17b. Randevu kartı (bilet görünümü) ---------- */
.ticket {
  position: relative; display: grid; grid-template-columns: 1fr 216px;
  background: #fff; border: 1.5px solid var(--line-box); border-left-width: 6px;
  border-radius: 16px; overflow: hidden; margin-bottom: 14px;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease-out);
}
.ticket:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }
.ticket.s-gray  { border-left-color: #94a3b8; }
.ticket.s-green { border-left-color: var(--ok); }
.ticket.s-red   { border-left-color: var(--bad); }
.ticket.s-amber { border-left-color: var(--warn); }
.ticket.s-blue  { border-left-color: var(--info); }
.ticket.s-brand { border-left-color: var(--brand-1); }

.tk-main { padding: 18px 22px; min-width: 0; }
.tk-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; padding-right: 92px; }
/* Biletin ust satiri: servis ikonu + rozet + kod. Kural dort sayfada ayri
   ayri duruyordu; rehberlik ve ulasim sayfalarinda ise HIC yoktu, bu yuzden
   span'lar inline kalip ikon ile rozet ayri satirlara dusuyordu. */
.tk-top-left { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.tk-svc-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--info-soft); color: var(--info); display: inline-grid; place-items: center; flex-shrink: 0; font-size: 15px; }
.tk-top-left > .badge { flex-shrink: 0; }
/* Kod, tk-top-left icindeyken satirin sagina itilmesin: .tk-code'daki
   margin-left:auto yalnizca kodun .tk-top'un dogrudan cocugu oldugu
   sayfalar icin anlamli. Burada rozetin hemen yanina otursun. */
.tk-top-left > .tk-code { margin-left: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kodlar tiklaninca panoya kopyalanir (bkz. assets/js/site.js). */
.tk-code { cursor: pointer; transition: color .15s var(--ease, ease); }
.tk-code:hover { color: var(--ink); }
.tk-code:active { opacity: .55; }
/* Durum rozeti kartın en sağ üst köşesine sabitlenir — akıştan bağımsız, her zaman aynı yerde. */
/* Durum rozeti mutlak konumlu ve kuponun (tk-stub) sag ust kosesinde duruyor.
   Uzun durum metinlerinde ("Kısmi Ödeme Gerçekleşti") TUTAR etiketinin uzerine
   biniyordu. Rozet tek satirda kalir, kuponun ilk blogu da rozetin altindan
   baslar; kisa rozetlerde de hizalama tutarli oluyor. */
.tk-status-corner { position: absolute; top: 12px; right: 12px; z-index: 2; white-space: nowrap; }
.tk-stub > :first-child { padding-top: 26px; }
@media (max-width: 560px) { .tk-top { padding-right: 78px; } }
.tk-code {
  margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tk-title { font-size: 17px; letter-spacing: -.02em; margin-bottom: 18px; }

.tk-route { display: flex; align-items: center; gap: 14px; }
.tk-pt { min-width: 0; }
.tk-pt b { display: block; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.tk-pt span { font-size: 11.5px; color: var(--muted); }
.tk-pt.end { text-align: right; }
.tk-line { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 54px; }
.tk-line .bar {
  flex: 1; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 11px);
}
.tk-line .mid {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-soft); color: var(--brand-1); display: grid; place-items: center;
}
.tk-line .mid svg { width: 15px; height: 15px; }

.tk-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.tk-meta span { display: flex; align-items: center; gap: 6px; }
.tk-meta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Çin + kullanıcının ülke saatinin tek blokta, alt alta gösterimi.
   Çin saati öncelikli/vurgulu (kalın, marka rengi); ülke saati ikincil (ince, gri, küçük) — karışmasın diye. */
.tk-time-dual { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.tk-time-dual div { display: flex; align-items: center; gap: 6px; }
.tk-time-dual svg { width: 14px; height: 14px; flex-shrink: 0; }
.tk-time-dual .tk-cn { font-size: 13.5px; font-weight: 700; color: var(--brand-1); }
.tk-time-dual .tk-local { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.tk-time-dual .tk-cn svg { color: var(--brand-1); }
.tk-time-dual .tk-local svg { width: 12px; height: 12px; }

/* Zaman/güzergah kutusu (fieldset + legend). rehberlik_hizmetim.php ve
   ulasim_hizmetim.php aynı bileşeni kullanıyor; stil tek yerde dursun diye
   sayfa içinden buraya alındı — ulaşım sayfasında kural hiç yoktu ve
   fieldset tarayıcının çıplak varsayılan görünümüyle çiziliyordu. */
.tk-time-fs { margin: 12px 0 0; padding: 8px 12px 10px; border: 1.5px solid var(--line-box); border-radius: 10px; min-width: 0; }
.tk-time-fs legend { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
.tk-time-sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.6; min-width: 0; min-height: 22px; }
.tk-time-sub .k { flex-shrink: 0; width: 108px; color: var(--muted); font-weight: 600; }
.tk-time-sub .val { flex: 1; min-width: 0; color: var(--ink); font-weight: 700; }

/* Çok duraklı güzergah listesi (ulaşım bileti): üstte rota, altında iki saat.
   Tarih ile rotayı yan yana tek satıra sıkıştırmak dar kartta okunmuyordu. */
.tk-leg { padding: 7px 0; min-width: 0; }
.tk-leg + .tk-leg { border-top: 1px dashed var(--line-2); }
.tk-leg:first-child { padding-top: 2px; }
.tk-leg:last-child { padding-bottom: 2px; }
.tk-leg-route { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; }
.tk-leg-no { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tk-leg-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-leg-times { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 3px 0 0 25px; font-size: 11.5px; color: var(--muted); }
.tk-leg-times span { display: inline-flex; align-items: center; gap: 5px; }
.tk-leg-times b { color: var(--ink); font-weight: 600; }
.tk-leg-times svg { width: 12px; height: 12px; flex-shrink: 0; }
.tk-leg-bos { color: var(--muted-2); font-style: italic; }
@media (max-width: 560px) { .tk-leg-times { margin-left: 0; } }

/* Sade güzergah/tarih satırı (eski dashed "uçak bileti" çizgisinin yerine).
   Tek satırda kalır; sığmazsa taşmak yerine kayan yazı (marquee) olur. */
.tk-route-sade { overflow: hidden; font-size: 13px; color: var(--ink); }
.tk-route-inner { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tk-route-sade span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tk-route-sade svg { width: 13px; height: 13px; color: var(--muted-2); flex-shrink: 0; }
.tk-route-arrow { color: var(--muted-2); }
.tk-route-sade.mq-active .tk-route-inner { animation: tkMarquee var(--mq-dur, 6s) ease-in-out infinite alternate; padding-right: 18px; }
@keyframes tkMarquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--mq-dist, 0)); }
}
.tk-route-count { font-size: 11.5px; font-weight: 600; color: var(--brand-1); margin-top: 6px; display: flex; align-items: center; gap: 5px; }

/* Genel amaçlı tek-satır kaydırma (marquee) sarmalayıcısı — güzergah dışındaki taşan metinler için de kullanılır. */
.mq-wrap { overflow-x: auto; overflow-y: hidden; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mq-wrap::-webkit-scrollbar { display: none; }
.mq-inner { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mq-wrap.mq-active .mq-inner { animation: tkMarquee var(--mq-dur, 6s) ease-in-out infinite alternate; padding-right: 18px; }
.mq-wrap.mq-user-scrolling .mq-inner { animation: none; }

/* Eşya Durumu butonu: metin taşarsa kayar, ok ikonu sabit kalır */
#esyaBtn { display: flex; align-items: center; gap: 8px; overflow: hidden; }
#esyaBtn .mq-wrap { flex: 1; text-align: left; }
#esyaBtn svg:last-child { flex-shrink: 0; }

.tk-stub {
  border-left: 1px solid var(--line-2); background: var(--bg-soft);
  padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.tk-price { font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ok); }

/* Ödeme kartındaki tutar kutusu. Tek satırda iki tutar yan yana sığmıyor ve
   alt satıra taşıyordu; artık ödenen üstte küçük ve gri, toplam altta büyük ve
   yeşil, arada ne kadarının ödendiğini gösteren ince bir çubuk var. */
.ts-tutar { display: flex; flex-direction: column; gap: 7px; }
/* Büyük tutarlarda etiket ve rakam yan yana sığmıyor; rakam kendi satırına
   iner ve sağa yaslı kalır, kutudan taşmaz. */
.ts-sat { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2px 8px; flex-wrap: wrap; }
.ts-sat > :last-child { margin-left: auto; }
.ts-et { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.ts-odenen { font-size: 15px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-toplam { font-size: 21px; font-weight: 700; color: var(--ok); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-kalan { font-size: 15px; font-weight: 700; color: var(--warn);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-kalan.bitti { color: var(--ok); }
.ts-bar { height: 5px; border-radius: 99px; background: #e4e7ee; overflow: hidden; }
.ts-bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px;
  transition: width .4s var(--ease, ease); }
@media (max-width: 720px) {
  .ts-toplam { font-size: 18px; }
  .ts-odenen, .ts-kalan { font-size: 14px; }
}
.tk-price.tk-price-pending { font-size: 14px; color: var(--warn); line-height: 1.35; }
.tk-bar {
  height: 28px; border-radius: 2px; opacity: .7;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px,
              var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 10px, transparent 10px 13px);
}
/* Masaüstü/tablet: tk-stub dar bir sütun olduğu için butonlar alt alta ve eşit tam genişlikte durur. */
.tk-acts { display: flex; flex-direction: column; gap: 6px; }
.tk-acts .btn { width: 100%; justify-content: center; padding: 6px 10px; font-size: 11.5px; }
.tk-acts .btn svg { width: 12px; height: 12px; }

@media (max-width: 760px) {
  .ticket { grid-template-columns: 1fr; }
  .tk-stub {
    border-left: 0; border-top: 1px solid var(--line-2);
    flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap;
  }
  .tk-bar { display: none; }
  /* Mobilde tk-stub yatay bir şerit olduğu için butonlar da tekrar yan yana, doğal genişlikte gösterilir. */
  .tk-acts { flex-direction: row; flex-wrap: wrap; }
  .tk-acts .btn { width: auto; }
}

@media (max-width: 560px) {
  .ticket { border-radius: 12px; margin-bottom: 10px; }
  .tk-main { padding: 13px 14px; }
  .tk-top { margin-bottom: 7px; gap: 6px; }
  .tk-title { font-size: 14.5px; margin-bottom: 9px; }
  .tk-route-sade { font-size: 12px; margin-bottom: 2px; }
  .tk-meta { gap: 5px 12px; margin-top: 9px; font-size: 11.5px; }
  .tk-stub { padding: 12px 14px; }
  .tk-price { font-size: 19px; }
  .tk-price.tk-price-pending { font-size: 13px; }
}

/* ---------- 18. Zaman çizelgesi (program) ---------- */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 3px solid var(--brand-1);
}
.tl-item.done::before { background: var(--ok); border-color: var(--ok); }
.tl-item.past::before { background: var(--muted-2); border-color: var(--muted-2); }
.tl-day-sep {
  position: relative; margin: 4px 0 14px -30px; padding-left: 30px; display: flex; align-items: center; gap: 10px;
}
.tl-day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tl-day-sep span {
  font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-soft); padding: 3px 10px; border-radius: 999px; flex-shrink: 0;
}
.tl-day-sep:first-child { margin-top: 0; }

/* ---------- 19. Modal ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(3px); z-index: 100;
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.modal-bg.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; border-radius: var(--r-xl); width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto; box-shadow: var(--sh-3);
  transform: translateY(18px) scale(.97); transition: transform .3s var(--ease-out);
}
.modal-bg.open .modal { transform: none; }
.modal-head { padding: 22px 26px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-body { padding: 18px 26px 26px; }
.modal-foot { padding: 16px 26px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.x-btn { border: 0; background: var(--bg-soft); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; flex-shrink: 0; }
.x-btn:hover { background: var(--bad-soft); color: var(--bad); }
.x-btn svg { width: 17px; height: 17px; }

/* Toast */
.toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 11px; padding: 13px 18px;
  background: var(--ink); color: #fff; border-radius: var(--r); box-shadow: var(--sh-3);
  font-size: 14px; font-weight: 500; animation: toastIn .35s var(--ease-out) both; max-width: 340px;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.ok svg { color: #34d399; }
.toast.bad svg { color: #f87171; }
.toast.out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ---------- 19a. İletişim kayıt satırları ---------- */
.ct {
  border: 1px solid #d7dfea; border-radius: var(--r);
  background: #fff; padding: 15px 16px; margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .2s, box-shadow .2s;
  animation: ctIn .3s var(--ease-out) both;
}
.ct:last-child { margin-bottom: 0; }
.ct:hover { border-color: #b9c6da; box-shadow: 0 3px 10px rgba(15, 23, 42, .07); }
.ct:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }
@keyframes ctIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.ct-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ct-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.ct-no { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--line-2); border-radius: 6px; padding: 2px 8px; }
.ct .field { margin-bottom: 11px; }
.ct .field:last-child { margin-bottom: 0; }

.tel-row { display: flex; gap: 10px; }
.tel-row select { width: 148px; flex-shrink: 0; font-size: 15px; }
.tel-row input { flex: 1; min-width: 0; }

.ct-empty {
  text-align: center; padding: 34px 20px; border: 1px dashed #cbd5e1;
  border-radius: var(--r); color: var(--muted); font-size: 14px; background: #fff;
}
.ct-empty svg { margin: 0 auto; color: var(--muted-2); opacity: .7; }

.ct-wrap { border: 1px solid #dbe2ec; border-radius: var(--r-lg); background: var(--bg-soft); padding: 16px; }

.row-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Kart içinde kenarlıksız tablo (çift çerçeve olmasın) */
.plain-table { overflow-x: auto; }
.plain-table table.tbl { min-width: 0; }
.plain-table table.tbl th {
  background: transparent; border-bottom: 1.5px solid var(--line);
  padding: 14px 24px; font-size: 12px; color: var(--ink-2); font-weight: 700;
}
.plain-table table.tbl td { padding: 16px 24px; }

/* ---- İletişim listesi (telefon/e-posta/adres) başlığı ---- */
.ct-page-head { flex-wrap: nowrap; gap: 10px; }
.ct-page-head .ct-title-wrap { min-width: 0; overflow: hidden; }
.ct-page-head h3 { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-page-head .ct-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ct-page-head .ct-actions .badge { font-size: 12px; font-weight: 700; padding: 5px 11px; }
.ct-page-head .ct-actions .btn-sm { padding: 6px 12px; font-size: 12.5px; }
.ct-page-head .ct-actions .btn-sm svg { width: 13px; height: 13px; }

@media (max-width: 480px) {
  .ct-page-head { gap: 6px; }
  .ct-page-head h3 { font-size: 14px; }
  .ct-page-head .ct-actions { gap: 6px; }
  .ct-page-head .ct-actions .badge { padding: 4px 8px; font-size: 11px; }
  .ct-page-head .ct-actions .btn-sm { padding: 6px 9px; font-size: 11.5px; }
  .ct-page-head .ct-actions .btn-sm .btn-label { display: none; }
}
.plain-table table.tbl tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 560px) {
  .tel-row { flex-wrap: wrap; }
  .tel-row select { width: 100%; }
}

/* ---------- 19b. Sabit WhatsApp butonu ---------- */
.wa-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: flex; align-items: center; gap: 0;
  padding: 14px; border-radius: 999px;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .42);
  transition: transform .28s var(--ease-out), box-shadow .28s;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 40px rgba(37, 211, 102, .55); }
.wa-fab:active { transform: translateY(0) scale(.98); }
.wa-fab svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.wa-fab .wa-txt {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; position: relative; z-index: 1;
  transition: max-width .38s var(--ease-out), margin .38s var(--ease-out);
}
.wa-fab:hover .wa-txt { max-width: 200px; margin: 0 6px 0 10px; }
.wa-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  animation: waPulse 2.6s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
body.has-wa .toast-wrap { bottom: 104px; }

@media (max-width: 720px) {
  .wa-fab { right: 16px; bottom: 16px; padding: 13px; }
  .wa-fab .wa-txt, .wa-fab:hover .wa-txt { display: none; }
  body.has-wa .toast-wrap { bottom: 88px; }
}

/* ---------- 20. Footer ---------- */
.site-footer { background: #0b1120; color: #cbd5e1; padding: 58px 0 0; margin-top: 60px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.site-footer p { font-size: 14px; color: #94a3b8; line-height: 1.75; }
.site-footer a { font-size: 14px; color: #94a3b8; transition: color .2s, transform .2s; display: inline-block; }
.site-footer a:hover { color: #fff; transform: translateX(3px); }
.site-footer li { margin-bottom: 9px; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; color: #fff; font-weight: 700; font-size: 17px; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .07);
  display: grid; place-items: center; transition: background .25s, transform .25s var(--ease-out);
}
.social a:hover { background: var(--brand-grad); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }
.footer-bar {
  border-top: 1px solid rgba(255, 255, 255, .09); padding: 18px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: #64748b;
}
.clock-cn { display: flex; align-items: center; gap: 7px; }
.clock-cn svg { width: 15px; height: 15px; }

/* ---------- 21. Hero & dekor ---------- */
.hero { position: relative; overflow: hidden; padding: 84px 0 90px; }
/* Hizmet ve Hakkımda sayfalarının daha kısa karşılama alanı */
.hero.hero-sm { padding: 68px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; }
.blob-1 { width: 460px; height: 460px; background: #c7d2fe; top: -170px; right: -130px; animation: float 18s ease-in-out infinite; }
.blob-2 { width: 380px; height: 380px; background: #ddd6fe; bottom: -190px; left: -120px; animation: float 22s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(28px, -34px); } }
.hero > .container { position: relative; z-index: 1; }

.hero-visual { position: relative; }
.hero-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: 26px;
}
.float-card {
  position: absolute; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-3); padding: 13px 17px;
  display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600;
  animation: bob 5s ease-in-out infinite;
}
.float-card svg { width: 20px; height: 20px; color: var(--brand-1); }
.fc-1 { top: -22px; left: -26px; }
.fc-2 { bottom: -22px; right: -22px; animation-delay: 1.4s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

/* Görsel yer tutucu */
.ph-img {
  display: grid; place-items: center; gap: 8px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  color: var(--brand-1); border-radius: var(--r); min-height: 180px; font-size: 13px; font-weight: 600;
}
.ph-img svg { width: 34px; height: 34px; opacity: .55; }

/* ---------- 22. Giriş animasyonları ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }

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

/* ---------- 22b. Sade tasarım katmanı ---------- */
/* Kutular: ince, açık kenarlık — gölge neredeyse yok */
.card, .table-wrap, .filters, .ct-wrap, .feature, .stat, .p-card,
.sidenav, .hero-card, .float-card, .notif, .kpi-card, .leg, .ct, .drop {
  border-width: 1px;
  border-color: var(--line-box);
}
.card, .sidenav, .kpi-card, .p-card, .feature, .stat { box-shadow: none; }
.card-hover:hover, .ct:hover { border-color: #d6d6da; }
.card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.rec { border-left-width: 4px; }
.table-wrap table.tbl th { border-bottom-color: var(--line); }
.modal { border: 1px solid var(--line-box); }

/* Düz butonlar — gradyan ve ağır gölge yok */
.btn { border-radius: var(--r); }
.btn-primary { background: var(--brand-1); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: #d63c43; box-shadow: 0 4px 14px rgba(232, 71, 78, .22); transform: none; }
.btn-ghost:hover:not(:disabled) { background: var(--bg-soft); border-color: #d6d6da; color: var(--ink); }
.btn-soft { background: var(--brand-soft); color: var(--brand-1); }
.btn-soft:hover:not(:disabled) { background: #fbdfe1; }
.btn-danger { background: var(--bad); }
.btn-danger:hover:not(:disabled) { background: #c22f2f; transform: none; }

/* Rozetler: köşeli-yumuşak, noktasız */
.badge { border-radius: 7px; padding: 5px 10px; font-weight: 600; }
.badge::before { display: none; }

/* Vurgulu yazı düz renk */
.grad-text {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--brand-1); -webkit-text-fill-color: currentColor;
}

/* Yan menü: aktif öğe koyu dolgu */
.sidenav { padding: 14px; }
.sidenav a, .sidenav button.nav-item { padding: 11px 13px; border-radius: 10px; }
.sidenav a:hover, .sidenav button.nav-item:hover { background: var(--bg-soft); color: var(--ink); transform: none; }
.sidenav a:hover svg, .sidenav button.nav-item:hover svg { color: var(--ink-2); }
.sidenav a.active { background: var(--ink); color: #fff; box-shadow: none; }
.sidenav a.active svg { color: #fff; }
.sidenav .sub::before { background: var(--line); }

/* Üst menü: sade */
.main-nav a:hover { background: transparent; color: var(--brand-1); }
.main-nav a.active { color: var(--ink); }
.main-nav a::after { background: var(--brand-1); }

/* Sekmeler */
.tabs button.on { border-bottom-color: var(--brand-1); color: var(--brand-1); }
.chip.on { background: var(--brand-1); box-shadow: none; }

/* Girdiler */
.input, input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="time"], input[type="number"],
input[type="search"], input[type="datetime-local"], select, textarea { border-radius: 10px; }
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(232, 71, 78, .12);
}
.pick.on, .pick:hover { border-color: var(--brand-1); background: var(--brand-soft); }
.switch input:checked + .slider { background: var(--brand-1); }
.check input[type="checkbox"], .check input[type="radio"] { accent-color: var(--brand-1); }

/* Sayfa zemini biraz kırık beyaz, kartlar bembeyaz */
body { background: #fbfbfc; }
.section-soft { background: #f5f5f7; }

/* Bilet kartı da düzleşir */
.ticket { border-width: 1px; border-left-width: 5px; border-radius: var(--r-lg); }
.ticket:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }

/* ---------- 23. Boş durum ---------- */
.empty { text-align: center; padding: 60px 24px; color: var(--muted); }
.empty svg { width: 52px; height: 52px; margin: 0 auto 16px; color: var(--muted-2); opacity: .7; }
.empty h3 { font-size: 17px; margin-bottom: 6px; color: var(--ink-2); }

/* ---------- 24. Sekmeler ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 11px 17px; border: 0; background: transparent; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--brand-1); }
.tabs button.on { color: var(--brand-1); font-weight: 600; border-bottom-color: var(--brand-1); }

/* ---------- 25. Responsive ---------- */
@media (max-width: 1180px) {
  .main-nav a { padding: 9px 10px; font-size: 14px; }
  .g4 { grid-template-columns: repeat(3, 1fr); }
}

/* Masaüstünde hamburger yok (1000 pikselin üstü): sekiz bağlantı + ayraç + düğmeler
   dar ekranlarda sağa taşmasın diye başlık kademeli sıkılaşır. Ölçüldü: 1001–1366
   arası her genişlikte taşma yok. */
@media (min-width: 1001px) and (max-width: 1365px) {
  .header-inner { gap: 12px; }
  .main-nav a { padding: 9px 9px; font-size: 14px; }
  .main-nav .nav-ayrac { margin: 0 6px; }
  .header-actions { gap: 7px; }
  .user-chip .small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1001px) and (max-width: 1240px) {
  .main-nav a { padding: 8px 7px; font-size: 13.5px; }
  .header-actions .btn { padding-left: 12px; padding-right: 12px; }
  .header-actions .btn svg { display: none; }
  .lang-switch a { padding: 4px 9px; }
}
@media (min-width: 1001px) and (max-width: 1160px) {
  .brand-name { display: none; }
}

@media (max-width: 1000px) {
  .burger { display: grid; }
  /* main-nav mobilde konumu absolute olup akıştan çıkınca margin-left:auto işini kaybediyor;
     header-actions'ı (profil dahil) sağa yaslamayı burada devralıyoruz. */
  .header-actions { margin-left: auto; }
  /* Açılır menü, duyuru şeridi dahil header'ın tamamının altına konumlanır */
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    flex-direction: column; align-items: stretch; gap: 3px;
    background: #fff; border-bottom: 2px solid var(--line-box);
    padding: 14px 18px 20px; box-shadow: var(--sh-3);
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease-out);
    max-height: calc(100vh - var(--head-h)); overflow-y: auto;
  }
  .main-nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .main-nav a { padding: 12px 14px; font-size: 15px; }
  .main-nav a::after { display: none; }
  .main-nav .nav-ayrac { width: auto; height: 1px; margin: 8px 14px; background: var(--line-box); }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
}

body.nav-open { overflow: hidden; }

@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 16px; }
  .header-inner { padding: 0 16px; gap: 10px; }
  .section { padding: 52px 0; }
  .hero { padding: 22px 0 60px; }
  .hero.hero-sm { padding: 22px 0 44px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .brand-name { font-size: 15px; }
  .footer-grid { grid-template-columns: 1fr; }
  .card-pad, .card-body { padding: 18px; }
  .card-head { padding: 16px 18px; }
  .float-card { display: none; }
  .msg { max-width: 88%; }
  .toast-wrap { left: 16px; right: 16px; bottom: 16px; }
  .toast-wrap.top { left: 16px; right: 16px; top: 14px; bottom: auto; transform: none; }
  .toast { max-width: none; }
  .lang-switch button, .lang-switch a { padding: 4px 9px; }
}

@media (max-width: 620px) {
  .brand-name { display: none; }
  .user-chip .small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { gap: 6px; }
  .header-inner { gap: 8px; }
}

@media (max-width: 420px) {
  .header-actions .btn { padding: 9px 11px; font-size: 13px; }
  .header-actions .btn svg { display: none; }
  .lang-switch button, .lang-switch a { padding: 4px 8px; font-size: 12px; }
}

@media (max-width: 600px) {
  .input, input:not([type]), input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="date"], input[type="time"], input[type="number"],
  input[type="search"], input[type="datetime-local"], select, textarea {
    padding: 9px 12px; font-size: 14px;
  }
  textarea { min-height: 90px; }
  .field { margin-bottom: 13px; }
  .field > label, .lbl { font-size: 12.5px; margin-bottom: 5px; }
  .card-pad, .card-body { padding: 15px; }
  .card-head { padding: 13px 15px; }
  .card-head h3 { font-size: 15px; }
  .pane-head { margin-bottom: 16px; }
  .pane-head h1 { font-size: 19px; }
  .pane-head .lead { font-size: 13px; line-height: 1.45; }

  h3 { font-size: 15.5px; }
  .small { font-size: 12px; }

  .pref { padding: 12px 0; gap: 10px; }
  .pref .gap-12 { gap: 10px; }
  .pref .ico { width: 32px; height: 32px; border-radius: 9px; }
  .pref .ico svg { width: 15px; height: 15px; }
  .pref b { font-size: 13.5px; }
  .pref .small { font-size: 11.5px; line-height: 1.35; }
  .switch { width: 38px; height: 22px; }
  .switch .slider::before { width: 16px; height: 16px; }
  .switch input:checked + .slider::before { transform: translateX(16px); }
}

/* --------------------------------------------------------------------------
   Mesajlaşma — mobil düzen
   Dar ekranda sohbet ekranın tamamını kullansın: kenar boşlukları ve yuvarlak
   köşeler kalkar, giriş alanı klavye açılınca da görünür kalır (dvh), yazı
   boyutu 16px'in altına düşmez (iOS aksi halde sayfayı yakınlaştırıyor).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .chat {
    height: calc(100dvh - var(--head-h) - 8px);
    min-height: 0;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-left: -16px;
    margin-right: -16px;
  }
  .chat-body { padding: 10px 12px; }
  .chat .msg { max-width: 88%; }
  .chat-tools { padding: 6px 10px 0; gap: 4px; }
  .chat-tools .tool-btn { width: 34px; height: 34px; }
  .chat-input { padding: 8px 10px 10px; gap: 6px; align-items: flex-end; }
  .chat-input textarea {
    font-size: 16px;
    max-height: 96px;
    padding: 9px 12px;
  }
  .chat-input .btn { padding: 0 14px; height: 40px; flex-shrink: 0; }
  .chat-input .mic-yan { width: 40px; height: 40px; }
  /* Sohbet listesi ile pencere arasındaki geçiş: liste üstte, sohbet altta. */
  .chat-shell { gap: 10px; }
}

/* Koçandaki tutar: "ödenen | toplam" biçiminde okunur.
   Ödenen vurgulu, toplam ikincil — 0 | 2000 gibi tek bakışta anlaşılsın. */
/* Ödenen | toplam: iki rakam da aynı boyutta; ayrımı renk ve kalınlık yapıyor. */
.tk-price-alt { font-size: 1em; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ---------- Kur kutusu ----------
   Çok dövizli ödemelerde çevrimin ne olduğunu gösterir: borca sayılacak
   karşılık, uygulanan kur, ham ECB kuru, işlem ücreti ve kurun tarihi.
   Hem yönetici ödeme formunda hem kullanıcı ödeme ekranında kullanılır —
   tek yerde durması iki tarafın farklı görünmesini engelliyor. */
.kur-kutu { margin-top: 14px; padding: 12px 14px; background: var(--info-soft); border: 1px solid var(--line-box); border-radius: var(--r); }
.kur-kutu .kk-ana { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kur-kutu .kk-ana .k { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.kur-kutu .kk-ana .v { font-size: 19px; font-weight: 800; color: var(--info); letter-spacing: -.3px; }
.kur-kutu .kk-ayrac { height: 1px; background: var(--line-box); margin: 10px 0 9px; }
.kur-kutu .kk-sat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.7; }
.kur-kutu .kk-sat .k { color: var(--muted); }
.kur-kutu .kk-sat .v { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kur-kutu .kk-not { margin-top: 7px; font-size: 11.5px; color: var(--muted-2); line-height: 1.55; }
.kur-kutu.kk-uyari { background: var(--warn-soft); }
.kur-kutu.kk-uyari .kk-ana .v { color: var(--warn); }

/* Ödeme satırında çevrim izi: "10.000,00 ₺ → 196,60 $" */
.pr-cevrim { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* "Bugün ödenecek" kutusu — kullanıcı ödeme ekranları */
.ot-kutu { margin: 0 0 20px; }
.ot-kutu .ot-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ot-kutu .ot-ust .k { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.ot-kutu .ot-sec { width: auto; min-width: 104px; padding: 5px 26px 5px 9px; font-size: 12.5px; font-weight: 700; }
.ot-kutu .ot-tutar { margin-top: 4px; font-size: 27px; font-weight: 800; color: var(--info); letter-spacing: -.8px; line-height: 1.15; }
/* "Bugün ödenirse" tutarının yazıyla karşılığı. */
.ot-yazi { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.ot-yazi:empty { display: none; }
@media (max-width: 480px) { .ot-kutu .ot-tutar { font-size: 23px; } }

/* Kalan tutar satırı: aşağı yuvarlama müşterinin lehine olduğu için indirim
   gibi gösteriliyor — üstü çizili ham tutar, yanında gerçekten ödenecek olan. */
.pay-total.pt-kalan b { color: var(--ok); }
.pay-total .pt-eski { color: var(--muted-2); font-weight: 600; text-decoration-thickness: 1.5px; margin-right: 7px; }

/* İndirim: para girişi değil, alacaktan vazgeçme. Hem satırda hem toplamda
   yeşil ve eksi işaretli gösteriliyor ki gerçek tahsilatla karışmasın. */
.pay-row.pr-indirim .pr-ico { background: var(--ok-soft); color: var(--ok); }
.pay-row.pr-indirim .pr-amt { color: var(--ok); }
.pay-total.pt-indirim b { color: var(--ok); }

/* ==========================================================================
   EK ÖDEMELER — müşteri ekranı
   --------------------------------------------------------------------------
   Mobil öncelikli: müşterilerin çoğu telefondan bakıyor. Tablolar dar ekranda
   satır düzenine geçer, hiçbir yerde yatay kaydırma olmaz.
   ========================================================================== */

/* Durum + kalan şeridi */
.eo-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 18px; }
.eo-band.ok { background: var(--ok-soft); color: #047857; }
.eo-band.amber { background: var(--warn-soft); color: #92400e; }
.eo-band.red { background: var(--bad-soft); color: #991b1b; }
.eo-band .eb-sol { display: flex; align-items: center; gap: 14px; min-width: 0; }
.eo-band .eb-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.6); display: grid; place-items: center; flex-shrink: 0; }
.eo-band .eb-sol b { display: block; font-size: 16px; }
.eo-band .eb-sol span { font-size: 13px; }
.eo-band .eb-sag { text-align: right; margin-left: auto; }
.eo-band .eb-sag .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.eo-band .eb-sag .v { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.6px; }

.eo-aksiyon { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.eo-aksiyon .ot-kutu { flex: 1 1 260px; margin: 0; }
.eo-aksiyon .btn-lg { flex: 0 0 auto; }

/* Kalem tablosu */
.eo-tbl { width: 100%; border-collapse: collapse; }
.eo-tbl th { text-align: left; font-size: 10.5px; font-weight: 700; color: var(--muted-2); text-transform: uppercase;
  letter-spacing: .06em; padding: 8px 20px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.eo-tbl td { padding: 12px 20px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.eo-tbl tr:last-child td { border-bottom: 0; }
.eo-tbl .c-kod { width: 1%; white-space: nowrap; }
.eo-tbl .c-kod code { font-size: 11.5px; font-weight: 700; background: var(--bg-2); padding: 3px 7px; border-radius: 6px; letter-spacing: .02em; }
.eo-tbl .c-tut { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eo-tbl .c-tut .alt { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.eo-tbl .c-git { width: 1%; color: var(--muted-2); }
.eo-tbl tr.tik { cursor: pointer; }
.eo-tbl tr.tik:hover { background: var(--bg-soft); }
.eo-toplam { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px 4px; margin-top: 4px; border-top: 1.5px dashed var(--line); font-weight: 800; }

/* Ödeme satırı */
.eo-od { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.eo-od:last-of-type { border-bottom: 0; }
.eo-od .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--ok-soft); color: var(--ok); }
.eo-od.bekliyor .ico { background: var(--info-soft); color: var(--info); }
.eo-od.red .ico { background: var(--bad-soft); color: var(--bad); }
.eo-od .orta { flex: 1; min-width: 0; }
.eo-od .orta b { display: block; font-size: 14px; }
.eo-od .orta .alt { display: block; font-size: 12px; color: var(--muted); line-height: 1.65; }
.eo-od .tut { text-align: right; font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eo-od .tut .alt { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.eo-od.bekliyor { opacity: .7; }
.eo-od.red { opacity: .55; }
.eo-od.red .tut { text-decoration: line-through; }
.eo-od.indirim .tut { color: var(--ok); }

.eo-rozet { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.eo-rozet.bekle { background: var(--info-soft); color: var(--info); }
.eo-rozet.red { background: var(--bad-soft); color: var(--bad); }

.eo-kanit { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.eo-kanit a { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  padding: 4px 9px 4px 4px; border: 1px solid var(--line-box); border-radius: 8px; background: var(--bg-soft);
  color: var(--ink); text-decoration: none; }
.eo-kanit a:hover { border-color: var(--brand-1); }
.eo-kanit img { width: 30px; height: 30px; object-fit: cover; border-radius: 6px; display: block; }
.eo-kanit svg { margin-left: 5px; }

/* Hesap özeti */
.eo-hesap { margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--line); }
.eo-hesap .sat { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.eo-hesap .sat span { color: var(--muted); }
.eo-hesap .sat b { font-weight: 800; font-variant-numeric: tabular-nums; }
.eo-hesap .sat.indirim b { color: var(--ok); }
.eo-hesap .sat.kalan { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 15px; }
.eo-hesap .sat.kalan span { color: var(--ink); font-weight: 700; }

.eo-secili { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eo-dosya { font-size: 11.5px; font-weight: 700; background: var(--bg-soft); border: 1px solid var(--line-box);
  border-radius: 7px; padding: 4px 8px; }
.eo-dosya i { color: var(--muted); font-style: normal; font-weight: 600; }

/* Kalem ayrıntı modali */
.km-sat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.km-sat:last-child { border-bottom: 0; }
.km-sat > span { color: var(--muted); }
.km-blok { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.km-blok p { font-size: 13.5px; line-height: 1.6; margin: 4px 0 0; }
.km-fotolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.km-fotolar img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; border: 1px solid var(--line-2); display: block; }

/* ---- Mobil ---- */
@media (max-width: 640px) {
  .eo-band { padding: 14px 16px; }
  .eo-band .eb-sag { text-align: left; margin-left: 0; width: 100%; padding-top: 4px;
    border-top: 1px solid rgba(0,0,0,.08); margin-top: 4px; }
  .eo-band .eb-sag .v { font-size: 27px; }
  .eo-aksiyon .btn-lg { width: 100%; justify-content: center; }
  .eo-aksiyon .ot-kutu { flex-basis: 100%; }

  .eo-tbl thead { display: none; }
  .eo-tbl tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3px 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .eo-tbl td { border: 0; padding: 0; }
  .eo-tbl .c-kod { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .eo-tbl .c-bas { grid-column: 2; }
  .eo-tbl .c-tut { grid-column: 3; grid-row: 1 / span 2; }
  .eo-tbl .c-git { display: none; }
  .eo-toplam { padding: 14px 16px 4px; }

  .eo-od { flex-wrap: wrap; }
  .eo-od .tut { width: 100%; text-align: left; padding-left: 46px; margin-top: -4px; }
  .eo-od .tut .alt { display: inline; margin-left: 6px; }
}

/* Detay sayfası başlığı — ikon + başlık aynı satırda.
   (Bu kurallar önceden ek_odeme_detay.php içindeki <style> bloğundaydı; sayfa
   yeniden yazılınca ortak dosyaya taşındı ki her detay sayfası aynı görünsün.) */
.head-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.page-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-1);
  display: grid; place-items: center; flex-shrink: 0; }
.ro-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 480px) {
  .head-row { gap: 11px; }
  .page-ico { width: 40px; height: 40px; border-radius: 12px; }
}

/* Metin içine gömülen küçük ikonlar satır kırmasın: global svg{display:block}
   kuralı bunları alt satıra atıyordu ("05.09.2026 / [ikon] / 2" gibi). */
.eo-tbl .c-bas .tiny svg,
.eo-od .orta .alt svg,
.kal-tbl .c-bas .tiny svg { display: inline-block; vertical-align: -1px; }

/* Bilet kartı alt rozetleri — hem yönetici hem müşteri liste kartlarında.
   Eskiden yalnızca admin_p28_p34/odemeler.php içinde tanımlıydı; müşteri
   tarafında aynı sınıflar kullanılınca stilsiz kalıyordu. */
.tk-kalan { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--warn); }
.tk-kalan.bitti { color: var(--ok); }
.tk-indirim { font-size: 11.5px; font-weight: 700; color: var(--ok); margin-top: 2px; }
.tk-bekleyen { font-size: 11.5px; font-weight: 700; color: var(--info); margin-top: 2px; }

/* ==========================================================================
   TALEP FORMU BİLEŞENLERİ
   --------------------------------------------------------------------------
   Bölüm başlıkları (.fs), ücret kutusu (.price-box), davet satırı (.inv-row) ve
   e-posta çipleri (.chip-list). Eskiden yalnızca rehberlik_hizmetim.php içindeki
   <style> bloğundaydı; yönetici paneli de aynı formu kullanınca oradaki kopya
   yetmiyordu. Tek yerde durması iki tarafın birebir aynı görünmesini sağlıyor.
   ========================================================================== */
.price-box { background: var(--ok-soft); border: 1.5px solid #a7f3d0; border-radius: var(--r-lg); padding: 18px 20px; }
.pb-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; }
.pb-sep { margin: 12px 0; border-top: 1px dashed #a7f3d0; }
.pb-total { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.pb-total-lbl { font-size: 11px; font-weight: 700; letter-spacing: .09em; color: #047857; }
.pb-total b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #047857; line-height: 1; }
.pb-total .tiny { color: #059669; }
.fs { padding: 22px 24px; border-bottom: 1px solid var(--line-2); }
.fs:last-child { border-bottom: 0; }
.fs-hd { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; flex-wrap: wrap; }
.fs-hd h3 { font-size: 16px; }
.fs-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-1); display: grid; place-items: center; flex-shrink: 0; }
.fs-ico svg { width: 16px; height: 16px; }
.fs-hd .sp { margin-left: auto; }
.inv-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inv-row .field { flex: 1; min-width: 220px; margin-bottom: 0; }
.chip-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip-list .chip { display: flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand-1); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; font-weight: 600; }
.chip-list .chip button { border: 0; background: transparent; cursor: pointer; color: inherit; display: grid; place-items: center; padding: 3px; }

/* Yönetici formunda e-posta ile müşteri arama önerileri */
.y-oneri { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.y-oneri:empty { margin-top: 0; }
.y-oner { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  padding: 8px 11px; border: 1px solid var(--line-box); border-radius: 9px; background: var(--bg-soft); cursor: pointer; }
.y-oner:hover { border-color: var(--brand-1); background: var(--brand-soft); }
.y-oner b { font-size: 13px; }
.y-oner span { font-size: 11.5px; color: var(--muted); }

/* Grup üye listesi (yönetici) */
.uye-liste { display: flex; flex-direction: column; margin-top: 12px; }
.uye-sat { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.uye-sat:last-child { border-bottom: 0; }
.uye-sat.pasif { opacity: .55; }
.uye-sat .uye-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.uye-sat .uye-orta b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .fs { padding: 18px 16px; }
  .uye-sat { flex-wrap: wrap; }
  .uye-sat .uye-orta { flex-basis: 100%; }
}

/* Ödeme özeti satırları — etiket ile tutar aynı ağırlıkta olunca hangisinin
   ne olduğu okunmuyordu. Etiket sönük ve normal, tutar koyu ve kalın;
   "Kalan" satırı da ayrı bir blok gibi öne çıkıyor. */
.pay-total { color: var(--ink); }
.pay-total > span { font-weight: 600; color: var(--muted); font-size: 13.5px; }
.pay-total > b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* İlk özet satırı dışındakiler arasında çizgi tekrar etmesin. */
.pay-total + .pay-total { margin-top: 0; padding-top: 6px; border-top: 0; }
.pay-total.pt-kalan { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.pay-total.pt-kalan > span { color: var(--ink); font-weight: 700; font-size: 14.5px; }
.pay-total.pt-kalan > b { font-size: 19px; letter-spacing: -.3px; }

/* ==========================================================================
   .card.ac — açılır kart (<details>/<summary>)
   --------------------------------------------------------------------------
   Uzun listeler sayfayı şişiriyordu. Başlık satırı özeti taşıyor (kalem sayısı,
   toplam, kalan); ayrıntı isteyen açıyor. <details> tercih edildi: klavye ve
   ekran okuyucu desteği hazır, JavaScript gerekmiyor.
   ========================================================================== */
.card.ac > summary { cursor: pointer; list-style: none; user-select: none; }
.card.ac > summary::-webkit-details-marker { display: none; }
.card.ac > summary:hover { background: var(--bg-soft); }
.card.ac > summary:focus-visible { outline: 2px solid var(--brand-1); outline-offset: -2px; }
.card.ac .ac-sag { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); }
.card.ac .ac-sag b { font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card.ac .ac-sag svg { flex-shrink: 0; transition: transform .18s var(--ease, ease); }
.card.ac[open] > summary .ac-sag svg { transform: rotate(180deg); }
.card.ac[open] > summary { border-bottom: 1px solid var(--line-2); }
@media (max-width: 480px) {
  .card.ac .ac-sag b { font-size: 12.5px; }
}

/* Ek ödeme açıklaması — ayrı bir karta gerek yok, başlığın altında tek paragraf. */
.eo-aciklama { margin: -6px 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Yeşil eylem düğmesi — "Ödeme Bildir" gibi olumlu/para hareketi eylemleri için.
   Marka kırmızısı bu bağlamda uyarı gibi okunuyordu. */
.btn-ok { background: var(--ok); color: #fff; border-color: transparent; }
.btn-ok:hover:not(:disabled) { background: #047857; box-shadow: 0 4px 14px rgba(5, 150, 105, .26); }

/* ==========================================================================
   "Bugün ödenirse" kutusu — yeniden tasarım
   --------------------------------------------------------------------------
   Önceki hali düz bir bilgi kutusuydu: tutar, ücret ve uzun not aynı ağırlıkta
   akıyordu. Artık asıl rakam öne çıkıyor, ücret satırı ayrı bir zemine oturuyor,
   uzun açıklama küçük ve sönük bir dipnota iniyor.
   ========================================================================== */
.ot-kutu {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, #f5f8ff 0%, #eef3fe 58%, #e9eefc 100%);
  border: 1px solid #dbe4fb; border-radius: 14px; padding: 16px 18px 15px;
}
.ot-kutu::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--info), #7aa2f0);
}
.ot-kutu .ot-ust { align-items: center; margin-bottom: 2px; }
.ot-kutu .ot-ust .k { font-size: 11px; letter-spacing: .1em; color: #4c6bb5; }
.ot-kutu .ot-sec {
  background: #fff; border-color: #d3ddf7; border-radius: 9px; padding: 6px 28px 6px 10px;
  font-size: 12.5px; box-shadow: 0 1px 2px rgba(31, 58, 122, .06);
}
.ot-kutu .ot-tutar { color: #1e3a8a; font-size: 30px; letter-spacing: -1px; margin-top: 2px; }
/* Ücret satırı ayrı bir zeminde: tutarın parçası değil, içindeki kalem. */
.ot-kutu #otDetay:not(:empty) {
  margin-top: 11px; padding: 9px 12px; background: rgba(255, 255, 255, .72);
  border: 1px solid #e2e9fb; border-radius: 10px;
}
.ot-kutu .kk-sat { font-size: 12.5px; line-height: 1.5; }
.ot-kutu .kk-sat .k { color: #566a99; }
.ot-kutu .kk-sat .v { color: #1e3a8a; }
.ot-kutu .kk-not {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed #d7e0f7;
  font-size: 11px; line-height: 1.55; color: #7186b3;
}
.ot-kutu .kk-ayrac { display: none; }
@media (max-width: 480px) {
  .ot-kutu { padding: 14px 15px; }
  .ot-kutu .ot-tutar { font-size: 26px; }
}

/* Eksik bırakılan alan: kısa bir titreme + kırmızı çerçeve. Sayfa o alana
   kaydırılıp odaklanıyor; kullanıcı formun neresinde takıldığını arayıp
   bulmak zorunda kalmasın. */
@keyframes alanTitre {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}
.alan-hata { animation: alanTitre .5s var(--ease, ease); }
.alan-hata > input, .alan-hata > select, .alan-hata > textarea,
.alan-hata input, .alan-hata select, .alan-hata textarea {
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 3px var(--bad-soft) !important;
}
@media (prefers-reduced-motion: reduce) { .alan-hata { animation: none; } }

/* Randevu detayı — okunabilirlik düzeltmeleri */

/* Etiketler çok sönüktü (--muted-2, 10.5px): değerle arasındaki fark
   okunurluğu artırmak yerine etiketi kaybediyordu. */
.info-item .k { font-size: 11px; color: var(--muted); letter-spacing: .07em; }

/* Ücret: sayfadaki en önemli rakam. İki sütun kaplar ve yeşil zemine oturur. */
.info-item.ii-ucret {
  grid-column: span 2; background: var(--ok-soft); border-color: #bbf0d6;
}
.info-item.ii-ucret::before { background: var(--ok); opacity: 1; }
.info-item.ii-ucret .k { color: #047857; }
.info-item.ii-ucret .v { font-size: 26px; font-weight: 800; color: #047857; letter-spacing: -.5px; }
@media (max-width: 560px) { .info-item.ii-ucret { grid-column: span 1; } }

/* Program gün satırı: artık her gün açılır-kapanır. */
.tl-gecmis-grup > summary.tl-gun { cursor: pointer; list-style: none; }
.tl-gecmis-grup > summary.tl-gun::-webkit-details-marker { display: none; }
/* Ok işareti satırın SAĞ ucunda: sol tarafta takvim ikonuyla yan yana durunca
   ikisi birbirine karışıyordu. */
.tl-gecmis-grup > summary.tl-gun > svg:first-child {
  order: 99; margin-left: 10px; opacity: .8;
  transition: transform .18s var(--ease, ease);
}
.tl-gecmis-grup[open] > summary.tl-gun > svg:first-child { transform: rotate(180deg); }
/* Kapalı günler arasında nefes payı; hepsi kapalıyken tek bir blok gibi
   görünüyordu. Gün başlığının kendi üst boşluğu <details> üzerine taşındı. */
.tl-gecmis-grup + .tl-gecmis-grup { margin-top: 8px; }
.tl-gecmis-grup > summary.tl-gun { margin-top: 0; }
.tl-gecmis-grup[open] { margin-bottom: 6px; }

/* datetime-local alanının altındaki okunur karşılık. Tarayıcının gösterim
   biçimi (yyyy/aa/gg) sayfadan değiştirilemiyor; seçilen tarih burada
   gün/ay/yıl olarak doğrulanabiliyor. */
.tarih-okunur { margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--brand-1); }
.tarih-okunur.bos { display: none; }

/* ---------- Düğme varyantları ---------- */
/* Açık mavi: ikincil ama olumlu eylemler (Güncelle gibi). */
.btn-info-soft { background: var(--info-soft); color: var(--info); border-color: #cfe0fb; }
.btn-info-soft:hover:not(:disabled) { background: #e0eaff; border-color: var(--info); }

/* ---------- "Şu anda sürüyor" şeridi ----------
   Randevu tarihleri içindeysek sayfanın en üstünde durur. Aylar önce
   oluşturulmuş bir kayıtta bile hizmetin bugün yaşandığı hemen anlaşılsın. */
.su-anda-serit {
  display: flex; align-items: center; gap: 13px; margin-bottom: 18px;
  padding: 13px 18px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--ok-soft), #e6f9f0);
  border: 1px solid #bbf0d6; color: #047857;
}
.su-anda-serit b { display: block; font-size: 15px; }
.su-anda-serit span:not(.sa-nokta) { font-size: 12.5px; opacity: .85; }
.su-anda-serit .sa-nokta { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.su-anda-serit .sa-nokta i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, .55); animation: saNabiz 1.8s infinite;
}
@keyframes saNabiz {
  70% { box-shadow: 0 0 0 11px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
@media (prefers-reduced-motion: reduce) { .su-anda-serit .sa-nokta i { animation: none; } }

/* ---------- Başarı kutusu ---------- */
.basari-modal .basari-ikon {
  display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto;
  border-radius: 50%; background: var(--ok-soft); color: var(--ok);
  animation: basariPop .45s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes basariPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.basari-cubuk { margin-top: 20px; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.basari-cubuk i { display: block; height: 100%; width: 100%; background: var(--ok); transform-origin: left;
  animation: basariSay 4s linear forwards; }
@keyframes basariSay { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .basari-modal .basari-ikon { animation: none; }
  .basari-cubuk i { animation: none; }
}

/* Ortak başarı kutusu (YPUI.basari): tik çizilerek gelir, halka arkasından
   genişler. Yönetici tarafındaki .basari-modal'ın gelişmiş hâli. */
.yp-basari .modal-body { text-align: center; padding: 36px 28px 26px; }
.yp-basari .yp-basari-baslik { margin: 18px 0 6px; font-size: 19px; }
.yp-basari .yp-basari-metin { margin: 0; line-height: 1.5; }
.yp-basari .yp-basari-kod-satir { margin: 16px 0 0; }
.yp-basari .yp-basari-kod { margin-left: 0; font-size: 13px; padding: 6px 12px;
  border-radius: 8px; background: var(--ok-soft); color: var(--ok); }
.yp-basari-ikon { display: block; width: 76px; height: 76px; margin: 0 auto; position: relative; }
.yp-basari-ikon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok-soft);
  animation: ybDalga .6s cubic-bezier(.2, 1.3, .4, 1) both;
}
.yp-basari-ikon svg { position: relative; z-index: 1; width: 76px; height: 76px;
  fill: none; stroke: var(--ok); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.yp-basari-ikon .yb-halka { stroke-dasharray: 145; stroke-dashoffset: 145; opacity: .35;
  animation: ybCiz .55s ease-out .05s forwards; }
.yp-basari-ikon .yb-tik { stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: ybCiz .35s ease-out .38s forwards; }
@keyframes ybCiz { to { stroke-dashoffset: 0; } }
@keyframes ybDalga { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .yp-basari-ikon::after, .yp-basari-ikon .yb-halka, .yp-basari-ikon .yb-tik { animation: none; }
  .yp-basari-ikon .yb-halka, .yp-basari-ikon .yb-tik { stroke-dashoffset: 0; }
}

/* ---------- Başlık tipografisi ----------
   Başlıklar gövde yazısıyla aynı aileden geliyordu; biraz daha sıkı harf
   aralığı ve optik boyutlandırma ile ayrışıyor. */
h1, h2, h3, h4, .pane-head h1, .card-head h3 {
  font-feature-settings: "ss01" 1, "cv01" 1;
  letter-spacing: -.025em;
}
h1, .pane-head h1 { letter-spacing: -.035em; }
.card-head h3, .fs-hd h3 { font-size: 15.5px; letter-spacing: -.02em; }

/* Ücret bölümün en altında. Etiket ile rakam YAN YANA — space-between ile
   iki uca dağılınca aralarındaki bağ kopuyordu. */
.info-item.ii-ucret-alt { margin-top: 18px; display: flex; align-items: flex-start; gap: 14px; padding: 15px 20px; }
/* Etiket rakamın ilk satırıyla hizalanır; altındaki yazılı okunuş bloğu
   hizayı bozmasın diye baseline yerine flex-start + küçük bir üst pay. */
.info-item.ii-ucret-alt .k { margin-bottom: 0; font-size: 12.5px; letter-spacing: .08em; flex-shrink: 0; padding-top: 5px; }
.info-item.ii-ucret-alt .v { font-size: 22px; letter-spacing: -.4px; }
@media (max-width: 480px) { .info-item.ii-ucret-alt .v { font-size: 19px; } }

/* Açıklama gridde tam satır kaplar: uzun metin dar kutuda okunmuyor. */
.info-item.ii-genis { grid-column: 1 / -1; }

/* Detay sayfalarının bilgi bloğu (rehberlik / ulaşım / otel): kutucuk ızgarası
   yerine satır satır tablo. Kullanıcı isteği (25 Eyl 2026): dört sütunlu
   kutular karmaşık duruyordu; sol sütunda etiket, sağda değer, satırlar
   arasında ince çizgi ve hafif zebra. */
.info-grid.bilgi-tablo {
  display: block; border: 1px solid var(--line-box); border-radius: 12px; overflow: hidden; background: #fff;
}
.info-grid.bilgi-tablo .info-item {
  display: grid; grid-template-columns: minmax(150px, 28%) minmax(0, 1fr); gap: 18px; align-items: baseline;
  padding: 11px 18px; background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--line-2);
}
.info-grid.bilgi-tablo .info-item:last-child { border-bottom: 0; }
.info-grid.bilgi-tablo .info-item:nth-child(even) { background: var(--bg-soft); }
.info-grid.bilgi-tablo .info-item::before { display: none; }
.info-grid.bilgi-tablo .info-item .k {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted);
}
.info-grid.bilgi-tablo .info-item .v { font-size: 14.5px; font-weight: 600; }
/* "20.10.2026 · Salı <br> saat 09:00 (Çin saati)" tabloda tek satır olur. */
.info-grid.bilgi-tablo .info-item .v > br { display: none; }
.info-grid.bilgi-tablo .info-item .v > br + .tiny::before { content: " · "; }
@media (max-width: 520px) {
  .info-grid.bilgi-tablo .info-item { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
  .info-grid.bilgi-tablo .info-item .k { font-size: 12.5px; }
  .info-grid.bilgi-tablo .info-item .v { font-size: 14px; }
}

/* Açılır kart gövdesi — JS yükseklik animasyonu için sarmalayıcı.
   Kapalıyken <details> zaten göstermiyor; burada yalnızca geçiş sırasında
   taşmayı engelliyoruz. */
.ak-govde { will-change: height; }

/* Ücretin yazıyla okunuşu — rakamın altında, sönük ve küçük. */
.ucret-yazi { display: block; margin-top: 4px; font-size: 12px; font-weight: 600;
  color: #047857; opacity: .75; letter-spacing: 0; }

/* Yönetici bilet listesinde müşteri satırı — kartta kimin talebi olduğu
   görünmeli, müşteri tarafında bu bilgi yok. */
.tk-musteri { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.tk-musteri b { color: var(--ink-2); font-weight: 700; }
.tk-liste { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 20px; }
@media (max-width: 700px) { .tk-liste { padding: 4px 14px 16px; } }

/* Yönetici kartında müşteri satırı: ad soyad üstte, nickname + e-posta altta. */
.tk-musteri { flex-wrap: wrap; }
.tk-musteri .tk-mus-alt { width: 100%; padding-left: 19px; font-size: 11.5px; color: var(--muted-2); font-weight: 600; }

/* ==========================================================================
   Program zaman çizelgesi — müşteri (randevu_detay.php) ve yönetici
   (admin_p28_p34/randevu_duzenle.php) aynı görünümü paylaşsın diye burada.
   ========================================================================== */
/* --- Program zaman çizelgesi --- */
.tl-gun { background: #14346b; color: #fff; padding: 9px 16px; border-radius: 9px; margin: 18px 0 0; display: flex; align-items: center; gap: 10px; }
.tl-gun:first-child { margin-top: 0; }
.tl-gun b { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.tl-gun .adet { margin-left: auto; font-size: 11.5px; font-weight: 700; opacity: 1;
  background: rgba(255,255,255,.16); padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.tl-bugun { display: inline-flex; align-items: center; gap: 5px; background: rgba(34,197,94,.18); color: #6ee7a0;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; }
.tl-bugun i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: tlBlink 1.1s steps(1) infinite; }

.tl-gun-et { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #dbe6fa; }
.tl-gun-et.yarin { background: rgba(147,197,253,.22); color: #bfdbfe; }
.tl-gecmis-grup > summary { cursor: pointer; list-style: none; background: #4a5a75; }
.tl-gecmis-grup > summary::-webkit-details-marker { display: none; }
.tl-gecmis-grup > summary svg:first-child { transition: transform .2s; }
.tl-gecmis-grup[open] > summary svg:first-child { transform: rotate(180deg); }

/* Nöron benzeri bağlantı: dikey aks + her satırda bir düğüm. */
.tl-liste { position: relative; padding: 6px 0 2px 34px; }
.tl-liste::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0, #c9d6ee 10px, #c9d6ee calc(100% - 10px), transparent 100%); }
.tl-satir { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; }
.tl-satir::before { content: ""; position: absolute; left: -28px; top: 15px; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2.5px solid #7d9ccc; box-shadow: 0 0 0 3px #fff; }
.tl-satir::after { content: ""; position: absolute; left: -18px; top: 20px; width: 12px; height: 2px; background: #c9d6ee; }
.tl-satir + .tl-satir { border-top: 1px dashed var(--line-2); }

.tl-saat { font-size: 12px; font-weight: 700; color: var(--ink-2); min-width: 42px; padding-top: 2px; font-variant-numeric: tabular-nums; }
/* Program satırı: başlık öne çıkar, yer bir rozet olur, açıklama altta.
   Önceden üçü de aynı ağırlıktaydı ve konum ikonu (global svg{display:block}
   yüzünden) kendi satırına düşüp araya boşluk açıyordu. */
.tl-icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tl-icerik .bs { font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.tl-icerik .yer {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 11.5px; font-weight: 600; color: var(--info); background: var(--info-soft);
  border-radius: 20px; padding: 3px 10px 3px 8px; margin: 0;
}
.tl-icerik .yer svg { display: inline-block; flex-shrink: 0; }
.tl-icerik .ack {
  font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.55;
  padding-left: 10px; border-left: 2px solid var(--line-2);
}
.tl-acts { display: flex; gap: 4px; flex-shrink: 0; }
.tl-acts button { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 3px; border-radius: 6px; }
.tl-acts button:hover { background: var(--bg-2); color: var(--ink); }

/* Geçmiş kalemler soluk ve düğümü dolu. */
.tl-satir.gecmis { opacity: .55; }
.tl-satir.gecmis::before { background: #b9c4d6; border-color: #b9c4d6; }

/* Şu anda yaşanan durak. */
.tl-satir.simdi::before { border-color: var(--ok); background: var(--ok); animation: tlPulse 1.4s ease-in-out infinite; }
@keyframes tlPulse { 0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(22,163,74,.55); } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(22,163,74,0); } }
.tl-simdi-et { display: inline-flex; align-items: center; gap: 5px; background: var(--ok-soft); color: var(--ok);
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 7px; vertical-align: 1px; }
.tl-simdi-et i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: tlBlink 1.1s steps(1) infinite; }
@keyframes tlBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }

/* Eşleştirilmiş hizmetler program kalemlerinden ayrışsın. */
.tl-satir.bagli { background: #f4f8ff; border-radius: 10px; padding: 10px 12px; margin: 6px 0; border: 1px solid #dbe6fa; }
.tl-satir.bagli + .tl-satir { border-top: 0; }
.tl-satir.bagli::before { border-color: #3b6fd4; background: #fff; }
.tl-rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-right: 6px; }
.tl-rozet.u { background: #e3edff; color: #1f4fa8; }
.tl-rozet.o { background: #e2f6e9; color: #16713c; }

.tl-kat { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tl-kat .kisi { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-2); border: 1px solid var(--line-2);
  font-size: 11px; padding: 2px 6px 2px 8px; border-radius: 999px; }
.tl-kat .kisi button { border: 0; background: transparent; cursor: pointer; color: var(--bad); padding: 0 1px; line-height: 1; font-size: 13px; }
@media (max-width: 560px) { .tl-liste { padding-left: 28px; } .tl-satir::before { left: -25px; } .tl-satir::after { left: -15px; width: 10px; } }

/* ==========================================================================
   Ulaşım bileşenleri — talep listesi, detay ve güncelleme sayfaları ortak.
   Eskiden yalnızca ulasim_hizmetim.php içindeki <style> bloğundaydı.
   ========================================================================== */
.leg { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; background: var(--bg-soft); }
.veh-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.veh-pick .pick { flex-direction: column; text-align: center; padding: 16px 10px; gap: 6px; }
.driver-strip { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid #a7f3d0; }
.driver-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.driver-strip .foto { font-size: 20px; width: 36px; height: 36px; border-radius: 9px; background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; flex-shrink: 0; }
.driver-strip .mid { flex: 1; min-width: 0; }
.driver-strip .mid b { font-size: 13px; }
.driver-strip .mid .live-lbl { font-weight: 400; color: var(--ok); font-size: 11px; }
.driver-strip .veh { font-size: 11.5px; color: var(--muted); display: block; }
.tk-leg-txt .ok, .tk-time-sub .ok { color: var(--info); font-weight: 700; padding: 0 7px; }
.driver-strip .veh code { background: var(--panel); padding: 1px 5px; border-radius: 4px; font-size: 10.5px; }
.photo-drop { border: 1.5px dashed #c7d2fe; border-radius: var(--r-lg); background: var(--brand-soft); padding: 16px; text-align: center; cursor: pointer; }
.photo-drop.full { opacity: .5; cursor: not-allowed; pointer-events: none; }
.photo-drop svg { width: 22px; height: 22px; color: var(--brand-1); margin: 0 auto 6px; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.photo-item { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-item .pi-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(15,23,42,.65); color: #fff; display: grid; place-items: center; border: 0; cursor: pointer; }
.pax-list { display: flex; flex-direction: column; }
.pax-row { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.pax-row:last-child { border-bottom: 0; }
.pax-row .avatar { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
.pax-row .pax-nm { font-weight: 700; font-size: 13.5px; }
.pax-row .pax-tel { font-size: 12px; color: var(--muted); }
.leg-list { display: flex; flex-direction: column; gap: 10px; }
.leg-row { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; }
.leg-row:hover { border-color: var(--brand-1); background: var(--bg-soft); }
.leg-row .lr-pt { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.leg-row .lr-pt span { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; width: 52px; flex-shrink: 0; }
.leg-row .lr-sep { width: 1px; height: 12px; background: var(--line); margin: 3px 0 3px 26px; }
.leg-row .lr-dates { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.leg-row .lr-dates b { color: var(--ink); font-weight: 700; }

/* Güncelleme sayfasındaki talep kodu: sayfanın kimliği olduğu için normal
   .tk-code'dan bir tık büyük. */
.tk-code.upd-kod { font-size: 15px; padding: 5px 11px; letter-spacing: .04em; }

/* Güzergah kartı — kalkış/varış ayrımı renkle okunsun, hepsi aynı tonda
   olduğunda satırlar birbirine karışıyordu. */
.leg-row .lr-bas { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin: -14px -16px 12px; padding: 9px 14px;
  background: var(--bg-soft); border-bottom: 1px solid var(--line-2); border-radius: var(--r) var(--r) 0 0; }
.leg-row .lr-no { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--ink-2); text-transform: uppercase; }
.leg-row .lr-pt { position: relative; padding-left: 18px; }
.leg-row .lr-pt::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--ok); background: #fff; }
.leg-row .lr-varis::before { border-color: var(--bad); }
.leg-row .lr-kalkis span { color: var(--ok); }
.leg-row .lr-varis span { color: var(--bad); }
.leg-row .lr-sep { margin-left: 4px; }
.leg-row .lr-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.leg-row .lr-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--info); background: var(--info-soft); border-radius: 20px; padding: 3px 10px; }
.leg-row .lr-meta svg { display: inline-block; flex-shrink: 0; }

/* Güncelleme formundaki fotoğraf alanı — modaldeki küçük kutudan daha okunaklı. */
.foto-alan .photo-drop { padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.foto-alan .photo-drop b { font-size: 14px; }
.foto-alan .photo-grid { gap: 12px; }
.foto-alan .photo-item { width: 118px; height: 118px; border-radius: 12px; }
@media (max-width: 560px) { .foto-alan .photo-item { width: 96px; height: 96px; } }
.tk-varis-fs { margin-top: 12px !important; border-style: dashed; }

/* ==========================================================================
   Zengin seçici (.rs-*) — <select> içinde başlık, tarih ve kod tek satıra
   sıkışıp okunmuyordu; üçünü ayrı ayrı biçimlendiren açılır liste.
   ========================================================================== */
.rs-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border: 1.5px solid var(--line-box); border-radius: 10px;
  background: var(--panel); cursor: pointer; color: var(--ink); font: inherit;
}
.rs-btn:hover { border-color: var(--brand-1); }
.rs-btn > svg { margin-left: auto; flex-shrink: 0; color: var(--muted); }
.rs-secili { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rs-ad { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.rs-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-tarih { font-size: 11.5px; font-weight: 600; color: var(--info); background: var(--info-soft); padding: 2px 8px; border-radius: 999px; }
.rs-kod { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 5px; }
.rs-bos { font-size: 14px; color: var(--muted); }

.rs-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin-top: 6px;
  max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.rs-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rs-sat {
  width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: inherit;
}
.rs-sat:hover { background: var(--bg-soft); }
.rs-sat.on { background: var(--brand-soft); }
.rs-sat.on .rs-ad { color: var(--brand-1); }

/* Kapanmış kayıt künyesi (iptal / red / sonlandırıldı) — yönetici düzenleme
   sayfalarında ilk bakışta görünsün. */
.card.kunye-kapali { background: var(--bad-soft, #fdecec); border-color: #f4b8b8; }
.card.kunye-kapali .card-head h3 { color: var(--bad); }
.card.kunye-kapali .card-head p,
.card.kunye-kapali .card-head .tk-code { color: #a33; }
.card.kunye-kapali .tk-code { background: rgba(217, 58, 58, .1); border-color: #f4b8b8; }

/* İptal talebi kutusu — bilgi satırları etiketli, düğmeler tek sırada. */
.it-satir { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font-size: 13px; }
.it-lbl { flex-shrink: 0; width: 46px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; opacity: .75; }
.modal-foot.it-foot { flex-wrap: nowrap; gap: 8px; }
.modal-foot.it-foot .btn { white-space: nowrap; }

/* Dikkat çeken kırmızı durumlar — bekleyen iptal talebi ve iptal/red edilmiş
   kayıtlar. Yanıp sönme yalnızca küçük bir nokta ve yumuşak bir halka; metin
   okunurluğu bozulmasın diye yazıya animasyon uygulanmıyor. */
.alert.yanip { align-items: center; }
.yanip-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); flex-shrink: 0;
  animation: yanipSon 1.1s steps(1) infinite; }
@keyframes yanipSon { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
.badge.yanip-rozet { animation: rozetNabiz 1.6s ease-in-out infinite; }
@keyframes rozetNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 58, 58, .45); }
  50% { box-shadow: 0 0 0 6px rgba(217, 58, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .yanip-nokta, .badge.yanip-rozet { animation: none; }
}

/* Güzergahın kaynağı (hazır / manuel) kutunun sağ üst köşesinde: adreslerin
   arasında dururken satırı bölüyor, hangi güzergaha ait olduğu karışıyordu. */
.leg-row { position: relative; }
.leg-row .lr-kaynak { position: absolute; top: 12px; right: 14px; z-index: 1; }
.leg-row:has(.lr-kaynak) .lr-pt b { padding-right: 130px; }
@media (max-width: 560px) {
  .leg-row .lr-kaynak { position: static; display: inline-flex; margin-bottom: 8px; }
  .leg-row:has(.lr-kaynak) .lr-pt b { padding-right: 0; }
}

/* Ulaşım kartında bağlı rehberlik randevusu rozeti. */
.tk-bagli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding: 9px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok);
  border: 1px solid #bfe6d2; font-size: 12.5px; font-weight: 600; }
.tk-bagli svg { flex-shrink: 0; }
.tk-bagli:hover { background: #dff2e8; border-color: #9ed9bd; }
.tk-bagli:active { transform: translateY(1px); }
.tk-bagli .tkb-ad { font-weight: 700; color: #15603f; }
.tk-bagli .tkb-kod { margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tk-bagli > svg:last-child { opacity: .7; }
a.tk-bagli { text-decoration: none; transition: background .15s ease, border-color .15s ease; }
@media (max-width: 560px) { .tk-bagli .tkb-kod { margin-left: 0; } }

/* Bağlı hizmet kutusu (programdaki ulaşım/otel satırı). */
.bg-ad { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.bg-satir { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--line-2); }
.bg-satir:first-of-type { border-top: 0; }
.bg-satir .k { flex: 0 0 44%; font-size: 12.5px; color: var(--muted); }
.bg-satir .v { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; word-break: break-word; }
@media (max-width: 460px) {
  .bg-satir { flex-direction: column; gap: 2px; }
  .bg-satir .k { flex: none; }
}

/* Detay sayfalarının üstündeki küçük sayfa etiketi. Kayıt başlığı tek harf bile
   olabildiği için sayfanın hangi hizmete ait olduğu buradan okunuyor. */
.sayfa-etiket { display: flex; align-items: center; gap: 7px; margin: 0 0 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); }
.sayfa-etiket svg { flex-shrink: 0; opacity: .8; }

/* Detay sayfası başlık kartı (rehberlik / ulaşım / otel detayı). Kullanıcı
   isteği (25 Eyl 2026): düz başlık + gri alt satır + tek başına duran pembe
   düğme dağınık duruyordu. Artık ödeme detayındaki kartla aynı dil: hizmet
   renginde sol şerit ve etiket, büyük başlık, bilgi çipleri, altta işlemler. */
.detay-bas { --db-renk: var(--brand-1); --db-zemin: var(--brand-soft);
  position: relative; margin: 0 0 20px; background: #fff; border: 1px solid var(--line-box);
  border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.detay-bas::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--db-renk); }
.detay-bas.hz-rehberlik { --db-renk: #7c5cff; --db-zemin: #f1edff; }
.detay-bas.hz-ulasim    { --db-renk: #2f80ed; --db-zemin: #eaf2fd; }
.detay-bas.hz-otel      { --db-renk: #ec7f1f; --db-zemin: #fef1e4; }
.db-ust { padding: 20px 24px 18px 26px; background: linear-gradient(135deg, #fff 0%, #fff 45%, var(--db-zemin) 100%); }
.db-sat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.db-hizmet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--db-zemin); color: var(--db-renk); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.db-hizmet svg { flex-shrink: 0; }
.db-sat .tk-code { margin-left: auto; font-size: 12px; }
.db-ad { margin: 0; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.25; letter-spacing: -.03em; overflow-wrap: anywhere; }
.db-ad .zh { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.db-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.db-cip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line-box); font-size: 13px; font-weight: 600; color: var(--ink); }
.db-cip svg { color: var(--db-renk); flex-shrink: 0; }
.db-cip small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.db-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 24px 14px 26px; border-top: 1px solid var(--line-2); background: #fff; }
@media (max-width: 560px) {
  .db-ust { padding: 16px 16px 14px 18px; }
  .db-alt { padding: 12px 16px 12px 18px; }
  .db-sat .tk-code { margin-left: 0; flex-basis: 100%; order: 3; }
  .db-cip { font-size: 12.5px; padding: 5px 9px; }
  .db-alt .btn { flex: 1 1 auto; justify-content: center; }
}

/* Para birimi seçici (otel tarama sayfaları). */
.pane-head-kur { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pane-head-kur > div { flex: 1 1 260px; min-width: 0; }
.kur-sec-kap { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto;
  border: 1px solid var(--line-box); border-radius: 999px;
  background: #fff; color: var(--muted); cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.kur-sec-kap:hover { border-color: #cfd2d8; color: var(--ink-2); box-shadow: 0 2px 8px rgba(24, 39, 75, .08); }
.kur-sec-kap:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(232, 71, 78, .1); }
/* Seçim kutusu hapın tamamını kaplar: hapın her yerine basınca liste açılır
   (önceden yalnızca ortadaki kısa yazı tıklanıyordu). Simge üstte ama tıklamayı geçirir. */
.kur-sec-kap > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.kur-sec { border: 0; padding: 6px 30px 6px 33px; height: auto; min-height: 0; width: auto;
  border-radius: 999px; background-color: transparent; background-position: right 10px center; background-size: 14px;
  font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1.5; }
.kur-sec:focus { outline: none; box-shadow: none; }
.kur-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 0 0 10px; }
/* Seçilen birimdeki karşılık: asıl tutarın altında, küçük ve soluk. */
.ro-ref { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0; }
.ro-yaklasik { margin: 8px 0 0; line-height: 1.5; }
.ro-yaklasik[hidden] { display: none; }

/* Tanıtım görseli önizlemesi (otel ayarları). */
.reklam-onizleme { display: block; max-width: 320px; aspect-ratio: 3 / 1; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line-box); background: var(--bg-soft); }
.reklam-onizleme img { width: 100%; height: 100%; object-fit: contain; display: block; }
.reklam-onizleme[hidden] { display: none; }

/* ---------- Ödeme durum bandı ----------
   Üç ödeme sayfasında da aynı: hizmet ödemesi, ek ödeme ve yönetici görünümü. */
.durum-band { border-radius: var(--r-lg); padding: 16px 20px; display: flex;
  align-items: center; gap: 14px; margin-bottom: 18px; }
.durum-band.ok { background: var(--ok-soft); color: #047857; }
.durum-band.amber { background: var(--warn-soft); color: #92400e; }
.durum-band.red { background: var(--bad-soft); color: #991b1b; }
.durum-band .db-ico { width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,.6); display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Makbuz gövdesi ----------
   Sayfa hizmetten hizmete değişmesin diye tek parça: başlık, durum, hesap
   dökümü ve ödeme aynı kabın içinde. */
.mkb { border: 1px solid var(--line-box); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: var(--sh-1); }
.mkb-ust { padding: 20px 22px; background: linear-gradient(135deg, #f8fafc, #eef2f9);
  border-bottom: 1px solid var(--line-box); }
.mkb-ad { margin: 0 0 4px; font-size: 21px; letter-spacing: -.02em; }
.mkb-ozet { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.mkb-ic { padding: 18px 22px 22px; }
.mkb-ic .durum-band { margin-bottom: 18px; }
.mkb-ode { width: 100%; justify-content: center; margin-bottom: 14px; }

/* ---------- Hesap özeti ---------- */
.oz-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 20px; }
.oz-kutu { background: var(--bg-soft); border: 1px solid var(--line-box); border-radius: 12px; padding: 11px 13px; }
.oz-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.oz-v { font-size: 17px; font-weight: 800; margin-top: 3px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
/* Kalan borç kutusu, ödeme durumunun rengini taşır. Hepsi yeşilken ödenmemiş
   para "olumlu" görünüyordu. */
.oz-kalan { background: var(--ok-soft); border-color: #cdead9; }
.oz-kalan .oz-v { color: #146b4a; }
.oz-kalan.d-amber { background: #fff8e6; border-color: #f2e2bb; }
.oz-kalan.d-amber .oz-v { color: #8a6d1f; }
.oz-kalan.d-red { background: #fdf0f0; border-color: #f3d5d5; }
.oz-kalan.d-red .oz-v { color: #b02a2a; }
.oz-indirim .oz-v { color: var(--ok); }
.oz-yazi { font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1.4; margin-top: 3px; }

/* ---------- Ödeme kayıtları ----------
   Kapalıyken tek satır; açılınca kur, ücret, açıklama ve dekont görünür.
   Çok ödeme olan kayıtlarda sayfa dağılmasın diye kapalı başlıyor. */
.od-baslik { margin: 0 0 10px; font-size: 13px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 8px; }
.od-baslik span { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--line-box); border-radius: 999px; padding: 1px 8px; }
/* Ödeme Kayıtları bölümü açılır-kapanır; varsayılan açık, kartlar kapalı. */
.od-bolum { margin: 0 0 14px; }
.od-bolum > summary.od-baslik { list-style: none; cursor: pointer; margin: 0; padding: 11px 12px;
  border: 1px solid var(--line-box); border-radius: 12px; background: #fff; transition: border-color .18s ease; }
.od-bolum > summary::-webkit-details-marker { display: none; }
.od-bolum > summary:hover { border-color: #d6d9e1; }
.od-bolum > summary:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.od-bolum .od-bolum-ok { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; background: var(--bg-soft); border: 0; color: var(--muted);
  transition: transform .2s ease, background .18s ease, color .18s ease; }
.od-bolum[open] .od-bolum-ok { transform: rotate(180deg); background: var(--ink); color: #fff; }
.od-bolum[open] > summary.od-baslik { margin-bottom: 10px; }
.od-bos { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 22px; margin: 0 0 18px; border: 1px dashed var(--line-box); border-radius: 12px;
  color: var(--muted); font-size: 13px; background: var(--bg-soft); }

.od-kart { border: 1px solid var(--line-box); border-radius: 12px; margin-bottom: 8px;
  overflow: hidden; background: #fff; }
.od-kart[open] { border-color: #dcdce1; box-shadow: var(--sh-1); }
.od-kart > summary { list-style: none; cursor: pointer; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px; }
.od-kart > summary::-webkit-details-marker { display: none; }
.od-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  flex: 0 0 auto; background: var(--ok-soft); color: var(--ok); }
.od-kart.bekliyor .od-ico { background: var(--warn-soft); color: var(--warn); }
.od-kart.red .od-ico { background: var(--bad-soft); color: var(--bad); }
.od-kart.red .od-tutar { color: var(--muted); text-decoration: line-through; }
.od-orta { flex: 1; min-width: 0; }
.od-yontem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 700; }
.od-zaman { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.od-kod { display: inline-block; margin-top: 5px; font-size: 10.5px; }
.od-tutar { font-size: 16px; font-weight: 800; color: var(--ok); flex: 0 0 auto;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-kart.bekliyor .od-tutar { color: var(--muted); }
.od-ok { flex: 0 0 auto; color: var(--muted-2); display: grid; place-items: center;
  transition: transform .2s var(--ease, ease); }
.od-kart[open] .od-ok { transform: rotate(180deg); }

.od-govde { padding: 0 14px 14px 58px; }
.od-sat { display: flex; justify-content: space-between; gap: 14px; font-size: 13px;
  padding: 7px 0; border-bottom: 1px dashed var(--line); }
.od-sat:last-of-type { border-bottom: 0; }
.od-sat .k { color: var(--ink-2); font-weight: 500; flex: 0 0 auto; }
.od-sat .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.od-sat .od-metin { font-weight: 500; font-variant-numeric: normal; }
.od-sat .od-masraf { font-style: italic; font-size: 12px; color: var(--muted); font-weight: 400; }
.od-sat.od-vurgu .v { color: var(--ok); font-weight: 800; }
.od-kart.bekliyor .od-sat.od-vurgu .v { color: var(--warn); }

/* "Ödeme Kayıtları" başlığı ile kartlar BİTİŞİK: tek parça bir liste gibi
   (kullanıcı isteği, 25 Eyl 2026). Açıkken başlığın alt köşeleri düzleşir,
   kartlar arada boşluk bırakmadan altına eklenir, son kart listeyi kapatır. */
.od-bolum[open] > summary.od-baslik { margin-bottom: 0; border-radius: 12px 12px 0 0; background: var(--bg-soft); }
.od-bolum .od-kart { margin: 0; border-radius: 0; border-top: 0; box-shadow: none; }
.od-bolum .od-kart[open] { background: #fcfcfd; box-shadow: none; }
.od-bolum .od-kart:last-of-type { border-radius: 0 0 12px 12px; }

.od-kanit { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.od-kanit a,
.od-kanit button { display: block; width: 56px; height: 56px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line-box); background: var(--bg-soft); padding: 0; }
.od-kanit button { cursor: zoom-in; }
.od-kanit button:hover, .od-kanit a:hover { border-color: var(--brand-1); }
.od-kanit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.od-pdf { width: 100%; height: 100%; display: grid; place-items: center; gap: 2px;
  font-size: 10px; font-weight: 700; color: var(--bad); }
.od-yok { margin: 11px 0 0; font-size: 12px; color: var(--muted); }
/* Yöneticinin itiraza cevabı. */
.yanit-kutu { background: var(--bg-soft); border: 1px solid var(--line-box); border-radius: 10px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }

@media (max-width: 560px) {
  .mkb-ust, .mkb-ic { padding-left: 15px; padding-right: 15px; }
  .mkb-ad { font-size: 18px; }
  .od-govde { padding-left: 14px; }
  .od-sat { flex-direction: column; gap: 2px; }
  .od-sat .v { text-align: left; }
}

/* Tutarın yazıyla karşılığı. */
.tutar-yazi { margin: -6px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  line-height: 1.5; }
.tutar-yazi:empty { display: none; }
/* Farklı para biriminde bildirimde borca ne kadar sayılacağı. */
.karsilik-yazi { margin: 0 0 12px; padding: 8px 11px; border-radius: 10px;
  background: var(--info-soft); color: var(--info); font-size: 12.5px; line-height: 1.5; }
.karsilik-yazi.yok { background: var(--bad-soft); color: var(--bad); }
.karsilik-yazi .ky-not { font-size: 11.5px; opacity: .8; }
.karsilik-yazi[hidden] { display: none; }
.df-yazi { font-style: italic; }

/* Havale hesabı: her satır tek tek kopyalanabilir. */
.banka-kutu { border: 1px solid var(--info-soft); background: #f7faff; border-radius: var(--r-lg);
  padding: 12px 14px; margin-bottom: 16px; }
.bk-bas { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px;
  font-size: 12px; color: var(--info); line-height: 1.5; }
.bk-bas svg { flex: 0 0 auto; margin-top: 1px; }
.bh-kart + .bh-kart { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-box); }
.bh-sat { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line-box); border-radius: 10px; padding: 8px 10px;
  margin-bottom: 6px; transition: border-color .16s ease, background .16s ease; }
.bh-sat:hover { border-color: var(--info); background: #fdfeff; }
.bh-et { flex: 0 0 74px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.bh-dg { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  word-break: break-all; }
.bh-ico { flex: 0 0 auto; color: var(--muted); display: grid; place-items: center; }
.bh-sat:hover .bh-ico { color: var(--info); }
@media (max-width: 460px) {
  .bh-sat { flex-wrap: wrap; gap: 4px 10px; }
  .bh-et { flex-basis: 100%; }
}


/* ---------- Ek ödeme harcama kalemleri ----------
   Ödeme kayıtlarıyla aynı görsel dil: tek satır, sağda tutar, tıklanınca
   ayrıntı kutusu açılıyor. */
.kalem-liste { display: flex; flex-direction: column; gap: 6px; }
.ks-orta { flex: 1; min-width: 0; }
.ks-orta b { display: block; font-size: 13.5px; }
.ks-alt { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ks-asil { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.ks-ok { flex: 0 0 auto; color: var(--muted-2); display: grid; place-items: center; }
.mkb-not { margin: 0 0 16px; padding: 11px 13px; background: var(--bg-soft);
  border: 1px solid var(--line-box); border-radius: 10px; font-size: 13px; line-height: 1.6; }

/* ---------- Fotoğraf kırpılmasın ---------- */
/* Kart kapağı gibi ölçüsü sabit olması gereken yuvalarda fotoğrafın tamamı
   görünür (contain); kenarda kalan boşluğu aynı fotoğrafın bulanık kopyası
   doldurur. Arka planı site.js koyar (YPUI.fotoArka). Fotoğrafın kendi
   oranında durabildiği yerlerde bu yardımcıya gerek yoktur. */
.foto-tam { position: relative; isolation: isolate; }
/* Bulanık kopya en alta iner; isolation sayesinde kutunun dışına taşmaz.
   Görsele z-index verilmez, yoksa üzerindeki yıldız ve kalp rozetlerini örter. */
.foto-tam::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--foto, none); background-size: cover; background-position: center;
  filter: blur(20px) saturate(1.25) brightness(.94); transform: scale(1.25); }
.foto-tam > img { position: relative; }

/* ---------- Otel detay sayfası ---------- */
.otel-foto-serit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.of-kare { display: grid; place-items: center; border-radius: var(--r-md);
  overflow: hidden; background: var(--line-3, #f1f4f9); border: 1px solid var(--line-2); }
.of-kare img { display: block; width: auto; height: auto;
  max-width: 100%; max-height: 190px; }
.of-kare.of-emoji { font-size: 40px; line-height: 1; width: 150px; aspect-ratio: 4 / 3; }
@media (max-width: 560px) {
  .otel-foto-serit { gap: 8px; }
  .of-kare img { max-height: 150px; }
  .of-kare.of-emoji { width: 120px; }
}

.adres-liste { display: flex; flex-direction: column; gap: 2px; }
.adres-sat { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;
  border-top: 1px dashed var(--line-2); }
.adres-sat:first-child { border-top: 0; }
.adres-sat .lbl { flex: 0 0 120px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.adres-sat .deg { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.6; word-break: break-word; }
.adres-sat .deg.zh { font-size: 18px; line-height: 1.7; }
.adres-sat .qc-kopya { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center;
  gap: 6px; cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--muted); }
.adres-sat .qc-kopya:hover { color: var(--ink); border-color: var(--line-2); }
.adres-sat .qc-kopya.ok { color: var(--ok); border-color: #bfe6d2; background: var(--ok-soft); }

.tutar-kutu { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px;
  border-radius: var(--r-md); background: var(--ok-soft); border-left: 3px solid var(--ok); }
.tutar-kutu .tk-lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ok); }
.tutar-kutu .tk-buyuk { font-size: 24px; letter-spacing: -.02em; color: var(--ok); }

#otelHarita { height: 280px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); }

@media (max-width: 560px) {
  .adres-sat { flex-direction: column; gap: 4px; }
  .adres-sat .lbl { flex: none; padding-top: 0; }
}

/* ---------- Otel kataloğu ---------- */
.otel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.otel-kart { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), border-color .18s ease; }
.otel-kart:hover { transform: translateY(-3px); border-color: #cfd9ec; box-shadow: 0 10px 28px rgba(24, 39, 75, .1); }
.ok-foto { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef2f9, #e4ebf6); overflow: hidden; }
.ok-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.og-emoji, .ok-foto .og-emoji { font-size: 52px; line-height: 1; }
.ok-yildiz { position: absolute; top: 10px; left: 10px; background: rgba(17, 24, 39, .78); color: #ffd166;
  font-size: 12px; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; }
.ok-govde { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ok-ad { font-size: 16px; letter-spacing: -.02em; line-height: 1.3; }
.ok-zh { font-size: 13px; color: var(--muted); }
.ok-yer { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.ok-ack { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.ok-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ok-etiketler span { font-size: 11.5px; background: var(--line-3, #f1f4f9); border-radius: 999px; padding: 3px 9px; color: var(--ink-2); }
.ok-alt { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line-2); }
.ok-fiyat { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ok); white-space: nowrap; }
.ok-gece { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.bolge-sat { padding: 8px 0; border-top: 1px dashed var(--line-2); }
.bolge-sat:first-of-type { border-top: 0; }
.katalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kat-kart { display: flex; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.kat-kart.pasif { opacity: .55; }
.kk-foto { flex: 0 0 68px; height: 68px; display: grid; place-items: center; border-radius: 10px;
  background: var(--line-3, #f1f4f9); overflow: hidden; }
.kk-foto img { width: 100%; height: 100%; object-fit: cover; }
.kk-emoji { font-size: 30px; }
.kk-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kk-yildiz { display: flex; justify-content: space-between; gap: 8px; color: #e0a12a; font-size: 12px; }
.kk-alt { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.kk-fiyat { font-weight: 700; color: var(--ok); font-size: 14px; }

/* ---------- Otel sayfası (katalog detayı) ---------- */
.otel-yildiz { color: #e0a12a; font-size: 17px; letter-spacing: .08em; }
.otel-galeri { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 108px; gap: 10px; }
.og-kare { display: grid; place-items: center; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(135deg, #eef2f9, #e4ebf6); border: 1px solid var(--line-2); }
.og-kare.buyuk { grid-column: span 2; grid-row: span 2; }
.og-kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-emoji-kutu { font-size: 40px; }
.og-kare.buyuk.og-emoji-kutu { font-size: 72px; }

.otel-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.otel-rez { position: sticky; top: 20px; }
.rez-ozet { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--ok-soft); border: 1px solid #cfe9dc; }
.ro-sat { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.ro-sat.toplam { border-top: 1px dashed #a9d8c2; margin-top: 6px; padding-top: 10px; font-size: 16px; }
.ro-sat.toplam b { color: var(--ok); font-size: 19px; letter-spacing: -.02em; }
.mis-sat { display: flex; gap: 8px; margin-bottom: 8px; }
.mis-sat input { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .otel-duzen { grid-template-columns: 1fr; }
  .otel-rez { position: static; }
  .otel-galeri { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 96px; }
}

/* ---------- Otel fotoğraf slaytı (sonsuz döngü) ---------- */
.otel-slayt { position: relative; overflow: hidden; padding: 4px 0 34px; }
.os-yol { display: flex; align-items: center; gap: 14px; will-change: transform; }
.os-kare { flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer; border: 1px solid var(--line-2);
  background: linear-gradient(135deg, #eef2f9, #e4ebf6);
  transform: scale(.9); opacity: .45; filter: saturate(.65);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease, filter .45s ease, box-shadow .45s ease; }
/* Ortadaki kareye basmak fotoğrafı tam boyda açar (assets/js/site.js). */
.os-kare.etkin { transform: scale(1); opacity: 1; filter: none; cursor: zoom-in;
  box-shadow: 0 14px 36px rgba(24, 39, 75, .16); }
.os-kare.etkin.os-bos { cursor: default; }
/* Fotoğraf sabit bir çerçeveye sokulmaz: kendi ölçüsünde durur, yalnızca çok
   büyükse ekrana sığacak kadar küçültülür. Böylece hiçbir kenarı kesilmez. */
.os-kare img { display: block; width: auto; height: auto;
  max-width: min(720px, 78vw); max-height: clamp(240px, 46vh, 440px); }
.os-kare.os-bos { width: min(520px, 78vw); aspect-ratio: 16 / 9; }
.os-emoji { font-size: 76px; line-height: 1; }
.os-ok { position: absolute; top: calc(50% - 17px); transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.94);
  color: var(--ink); box-shadow: 0 4px 14px rgba(24, 39, 75, .12);
  transition: background .18s ease, transform .18s ease; }
.os-ok:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.os-ok.sol { left: 10px; }
.os-ok.sag { right: 10px; }
.os-alt { position: absolute; left: 0; right: 0; bottom: 4px;
  display: flex; align-items: center; justify-content: center; gap: 14px; }
.os-sayac { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line-2);
  padding: 3px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.os-nokta { display: flex; justify-content: center; gap: 7px; }
.os-nokta span { width: 7px; height: 7px; border-radius: 50%; background: #c7d2e4; cursor: pointer;
  transition: width .3s ease, background .3s ease; }
.os-nokta span.on { width: 22px; border-radius: 999px; background: var(--brand-1); }
@media (max-width: 700px) {
  .os-yol { gap: 10px; }
  .os-kare img { max-width: 86vw; max-height: clamp(200px, 38vh, 330px); }
  .os-kare.os-bos { width: 86vw; }
  .os-emoji { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-yol { transition: none !important; }
  .os-kare { transition: none; }
}

/* ---------- Otel filtre çubuğu ---------- */
.of-ust { display: flex; gap: 10px; align-items: center; }
.of-ara { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.of-ara svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.of-ara input { width: 100%; padding-left: 40px; }
.of-mobil { display: none; }
.of-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 16px; }
.of-rozet { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  margin-left: 6px; border-radius: 999px; background: var(--brand-1); color: #fff; font-size: 11px; font-weight: 700; }
.of-rozet[hidden] { display: none; }

@media (max-width: 760px) {
  /* Filtreler alttan açılan bir tabakaya iner. Önceki sürümde aynı kutulara
     hem absolute hem static konum veriliyordu ve buton bozuk çiziliyordu. */
  .of-mobil { display: inline-flex; }
  .of-ust { gap: 8px; }
  #filtreAc { flex: 0 0 auto; white-space: nowrap; }

  .of-panel {
    position: fixed; inset: 0; z-index: 90;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: rgba(17, 24, 39, .45);
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .of-panel.acik { visibility: visible; opacity: 1; }
  .of-panel > div {
    background: #fff; padding: 16px 18px;
    transform: translateY(28px);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  .of-panel.acik > div { transform: translateY(0); }
  .of-panel-bas { display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 1px solid var(--line-2); font-size: 16px; }
  .of-alanlar { grid-template-columns: 1fr; margin-top: 0; max-height: 56vh; overflow-y: auto; }
  .of-panel-alt { display: flex; gap: 10px; border-top: 1px solid var(--line-2);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .of-panel-alt .btn { flex: 1; }
  body.of-kilit { overflow: hidden; }
}

/* Dar ekranda otel kartı yatay: fotoğraf solda, bilgiler sağda. Dikey kart
   listede çok yer kaplıyor ve iki karttan fazlası ekrana sığmıyordu. */
@media (max-width: 700px) {
  .otel-grid { grid-template-columns: 1fr; gap: 12px; }
  .otel-kart { flex-direction: row; align-items: stretch; }
  .otel-kart:hover { transform: none; }
  .ok-foto { flex: 0 0 116px; aspect-ratio: auto; border-radius: 0; }
  .og-emoji, .ok-foto .og-emoji { font-size: 34px; }
  .ok-yildiz { top: 6px; left: 6px; font-size: 10px; padding: 3px 7px; letter-spacing: 0; }
  .ok-govde { padding: 11px 13px; gap: 2px; }
  .ok-ad { font-size: 14.5px; }
  /* Çince ad dar ekranda satır harcıyor; açıklama ise otelin avantajını
     gösterdiği için iki satıra kırpılarak kalıyor. */
  .ok-zh, .ok-etiketler { display: none; }
  .ok-yer { font-size: 11.5px; }
  .ok-ack { margin-top: 2px; font-size: 11.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ok-alt { padding-top: 8px; align-items: center; }
  .ok-fiyat { font-size: 16px; }
}

/* ==========================================================================
   OTELLER SAYFASI — zengin görünüm
   Sayfa bir vitrin olduğu için diğer liste sayfalarından ayrışıyor: yumuşak
   hareketli zemin, cam etkili filtre çubuğu ve kartlarda sıralı giriş.
   ========================================================================== */
body[data-page="otel_ara"] { position: relative; }
body[data-page="otel_ara"]::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52vw 46vw at 12% 8%, rgba(99, 102, 241, .10), transparent 62%),
    radial-gradient(46vw 42vw at 88% 4%, rgba(236, 72, 153, .08), transparent 60%),
    radial-gradient(58vw 50vw at 70% 92%, rgba(16, 185, 129, .08), transparent 64%);
  animation: otelZemin 22s ease-in-out infinite alternate;
}
@keyframes otelZemin {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

body[data-page="otel_ara"] .pane-head h1 {
  background: linear-gradient(96deg, var(--brand-1) 0%, #7c5cff 42%, #12a37a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%; animation: otelBaslik 9s ease-in-out infinite;
}
@keyframes otelBaslik { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

body[data-page="otel_ara"] .otel-filtre {
  background: rgba(255, 255, 255, .74); backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 10px 34px rgba(24, 39, 75, .08);
}
body[data-page="otel_ara"] .of-ara input { transition: box-shadow .25s ease, border-color .25s ease; }
body[data-page="otel_ara"] .of-ara input:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }

/* Kartlar sırayla belirir; gecikme JS tarafında satır satır veriliyor. */
.otel-kart { animation: kartGir .55s cubic-bezier(.22, .61, .36, 1) both; position: relative; }
@keyframes kartGir { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.otel-kart .ok-foto::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(17, 24, 39, .42) 100%);
  transition: opacity .35s ease;
}
.otel-kart:hover .ok-foto::after { opacity: 1; }
.otel-kart .ok-foto img, .otel-kart .ok-foto .og-emoji {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
/* Üzerine gelince büyüyen kısım fotoğrafın kendisi değil, arkasındaki bulanık
   kopya: böylece hareket duruyor ama fotoğrafın kenarları kesilmiyor. */
.otel-kart .ok-foto::before { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.otel-kart:hover .ok-foto::before { transform: scale(1.34); }
.otel-kart:hover .ok-foto:not(.foto-tam) img { transform: scale(1.07); }
.otel-kart:hover .ok-foto .og-emoji { transform: scale(1.12) rotate(-3deg); }

.ok-yildiz {
  background: linear-gradient(135deg, rgba(17, 24, 39, .84), rgba(55, 48, 107, .84));
  backdrop-filter: blur(4px); overflow: hidden;
}
.ok-yildiz::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
}
.otel-kart:hover .ok-yildiz::after { animation: yildizParla 1s ease forwards; }
@keyframes yildizParla { to { transform: translateX(120%); } }

.ok-fiyat {
  background: linear-gradient(120deg, #12a37a, #1f9d63 55%, #0e7f88);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.otel-kart:hover { border-color: rgba(124, 92, 255, .38); box-shadow: 0 16px 40px rgba(76, 62, 160, .16); }

@media (prefers-reduced-motion: reduce) {
  body[data-page="otel_ara"]::before,
  body[data-page="otel_ara"] .pane-head h1 { animation: none; }
  .otel-kart { animation: none; }
  .otel-kart:hover .ok-foto img, .otel-kart:hover .ok-foto .og-emoji { transform: none; }
}

/* Otel listesi sayfa çubuğu. */
.otel-sayfa { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 22px; flex-wrap: wrap; }
.otel-sayfa .os-btn { min-width: 38px; height: 38px; padding: 0 11px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.otel-sayfa .os-btn:hover:not(:disabled):not(.on) { border-color: #c8d2e8; transform: translateY(-1px); }
.otel-sayfa .os-btn.on { background: var(--brand-1); border-color: var(--brand-1); color: #fff; }
.otel-sayfa .os-btn:disabled { opacity: .38; cursor: default; }
.otel-sayfa .os-uc { color: var(--muted); padding: 0 2px; }

/* ---------- Yönetici otel kataloğu listesi ---------- */
.kat-filtre { display: block; }
.kf-ust { display: flex; gap: 10px; align-items: center; }
.kf-ara { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.kf-ara svg { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.kf-ara input { width: 100%; padding-left: 38px; }
.kf-mobil { display: none; }
.kf-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 16px; }
.kf-alanlar label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.kf-panel-alt { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 820px) {
  .kf-mobil { display: inline-flex; }
  #kfAc { flex: 0 0 auto; white-space: nowrap; }
  .kf-panel {
    position: fixed; inset: 0; z-index: 90;
    display: flex; flex-direction: column; justify-content: flex-end;
    background: rgba(17, 24, 39, .45);
    visibility: hidden; opacity: 0;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .kf-panel.acik { visibility: visible; opacity: 1; }
  .kf-panel > div { background: #fff; padding: 16px 18px; margin: 0;
    transform: translateY(28px); transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
  .kf-panel.acik > div { transform: translateY(0); }
  .kf-panel-bas { display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 1px solid var(--line-2); font-size: 16px; }
  .kf-alanlar { grid-template-columns: 1fr; max-height: 56vh; overflow-y: auto; }
  .kf-panel-alt { border-top: 1px solid var(--line-2);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .kf-panel-alt .btn { flex: 1; }
}

.kat-liste { display: flex; flex-direction: column; gap: 10px; }
.kat-sat { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.kat-sat:hover { border-color: #c6d2ea; box-shadow: 0 8px 22px rgba(24, 39, 75, .08); transform: translateY(-1px); }
.kat-sat.pasif { opacity: .62; background: #fbfcfe; }
.ks-foto { position: relative; flex: 0 0 76px; height: 62px; display: grid; place-items: center;
  border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #eef2f9, #e4ebf6); color: var(--muted); }
.ks-foto img { width: 100%; height: 100%; object-fit: cover; }
.ks-emoji { font-size: 28px; }
.ks-foto-adet { position: absolute; right: 4px; bottom: 4px; background: rgba(17, 24, 39, .74); color: #fff;
  font-size: 10px; padding: 1px 6px; border-radius: 999px; }
.ks-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ks-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ks-ad { font-size: 14.5px; letter-spacing: -.01em; }
.ks-yildiz { color: #e0a12a; font-size: 12px; letter-spacing: .04em; }
.ks-alt-bilgi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ks-alt-bilgi > span { display: inline-flex; align-items: center; gap: 5px; }
.ks-alt-bilgi .tk-code { margin-left: 0; }
.ks-fiyat { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; }
.ks-fiyat b { font-size: 15px; color: var(--ok); letter-spacing: -.02em; }
.ks-ok { color: var(--muted); display: flex; }

.kat-sayfa { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.kat-sayfa .ks-btnler { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.kat-sayfa .os-btn { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px;
  text-decoration: none; border: 1px solid var(--line); background: #fff; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); transition: border-color .18s ease, background .18s ease; }
.kat-sayfa .os-btn:hover:not(.on):not(.pasif) { border-color: #c8d2e8; }
.kat-sayfa .os-btn.on { background: var(--brand-1); border-color: var(--brand-1); color: #fff; }
.kat-sayfa .os-btn.pasif { opacity: .38; pointer-events: none; }

/* Yönetici otel formu: yıldız seçici ve fotoğraf önizlemesi. */
.yildiz-sec { display: flex; gap: 4px; }
.yildiz-sec button { width: 40px; height: 40px; cursor: pointer; font-size: 20px; line-height: 1;
  border: 1px solid var(--line); background: #fff; border-radius: 9px; color: #d6dced;
  transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.yildiz-sec button:hover { transform: translateY(-2px); }
.yildiz-sec button.on { color: #e0a12a; border-color: #f0d9a8; background: #fffaf0; }
.foto-onizleme { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.fo-kare { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--line-2); background: linear-gradient(135deg, #eef2f9, #e4ebf6); }
.fo-kare img { width: 100%; height: 100%; object-fit: cover; }
.fo-kare span { font-size: 30px; }
.fo-kare.kapak { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.fo-et { position: absolute; left: 5px; bottom: 5px; background: var(--ok); color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 999px; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.switch-row > span:first-child { font-size: 13.5px; font-weight: 600; }

/* ==========================================================================
   OTELLER — filtre çubuğu zengin görünüm
   Kart bir arama vitrini gibi dursun: degrade çerçeve, cam yüzey, üzerinden
   yavaşça geçen ışık ve odaklanınca renklenen alanlar.
   ========================================================================== */
body[data-page="otel_ara"] .otel-filtre {
  position: relative; border: 0; border-radius: 20px; overflow: hidden;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(125deg, rgba(99,102,241,.55), rgba(236,72,153,.42) 38%, rgba(16,185,129,.5) 72%, rgba(99,102,241,.55)) border-box;
  border: 1.5px solid transparent;
  background-size: 100% 100%, 260% 260%;
  animation: filtreCerceve 14s ease-in-out infinite;
  box-shadow: 0 18px 44px rgba(38, 43, 92, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
@keyframes filtreCerceve {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50%      { background-position: 0 0, 100% 50%; }
}
body[data-page="otel_ara"] .otel-filtre > .fs { position: relative; z-index: 1; }

/* Arama alanı: hap biçimli, odakta renkli halka. */
body[data-page="otel_ara"] .of-ara input {
  height: 52px; border-radius: 999px; font-size: 14.5px;
  border-color: #e4e9f4; background: linear-gradient(180deg, #fbfcff, #f4f7fd);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
body[data-page="otel_ara"] .of-ara input:hover { background: #fff; border-color: #d6ddef; }
body[data-page="otel_ara"] .of-ara input:focus {
  background: #fff; border-color: rgba(124, 92, 255, .55);
  box-shadow: 0 0 0 5px rgba(124, 92, 255, .13), 0 6px 18px rgba(76, 62, 160, .1);
}
body[data-page="otel_ara"] .of-ara svg { left: 18px; transition: color .3s ease, transform .3s ease; }
body[data-page="otel_ara"] .of-ara input:focus + svg,
body[data-page="otel_ara"] .of-ara:focus-within svg { color: #7c5cff; transform: scale(1.08); }

/* Etiketler ince ve büyük harf; alanlar hafif renkli. */
body[data-page="otel_ara"] .of-alanlar label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8b93a9;
}
body[data-page="otel_ara"] .of-alanlar select {
  height: 46px; border-radius: 13px; font-weight: 600; cursor: pointer;
  border-color: #e6eaf5; background-color: #fbfcff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background-color .25s ease;
}
body[data-page="otel_ara"] .of-alanlar select:hover { transform: translateY(-1px); background-color: #fff; border-color: #d3dbf0; }
body[data-page="otel_ara"] .of-alanlar select:focus {
  border-color: rgba(124, 92, 255, .5); box-shadow: 0 0 0 4px rgba(124, 92, 255, .12);
}
/* Bir seçim yapıldığında alan renklensin: hangi filtrenin açık olduğu görünsün. */
body[data-page="otel_ara"] .of-alanlar select.dolu {
  border-color: rgba(31, 157, 99, .45); background-color: #f4fbf7; color: #146b4a;
}

body[data-page="otel_ara"] #sonucSayi {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid var(--line-2);
  font-weight: 600; color: var(--ink-2); backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="otel_ara"] .otel-filtre { animation: none; }
}

/* ---------- Otel bilgileri tablosu ---------- */
.ozel-kart { border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(31, 41, 78, .09), inset 0 1px 0 rgba(255, 255, 255, .8); }
.ozel-kart > .card-head {
  background: linear-gradient(120deg, #f7f9ff, #fdf7fb 55%, #f5fbf8);
  border-bottom: 1px solid var(--line-2);
}
.otel-tablo { width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.otel-tablo tr + tr th, .otel-tablo tr + tr td { border-top: 1px solid var(--line-2); }
.otel-tablo th, .otel-tablo td { padding: 14px 16px; text-align: left; vertical-align: middle; }
.otel-tablo th {
  width: 42%; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: linear-gradient(90deg, #fafbfe, #f6f8fd);
  border-right: 1px solid var(--line-2); white-space: nowrap;
}
.otel-tablo td { font-size: 14.5px; font-weight: 600; color: var(--ink); background: #fff; }
.otel-tablo tr { transition: background .18s ease; }
.otel-tablo tbody tr:hover td { background: #fbfcff; }
.otel-tablo .ot-ico { display: inline-grid; place-items: center; width: 26px; height: 26px;
  margin-right: 9px; vertical-align: -8px; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-1); }
.otel-tablo .ot-yildiz { color: #e0a12a; font-size: 16px; letter-spacing: .06em; }
.otel-tablo .ot-yildiz i { color: #dfe4ef; font-style: normal; }
.otel-tablo .ot-fiyat { font-size: 17px; color: var(--ok); letter-spacing: -.02em; }
.otel-tablo .ot-chipler { display: flex; flex-wrap: wrap; gap: 6px; }
.otel-tablo .ot-chipler span { font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; background: var(--line-3, #f1f4f9); color: var(--ink-2); }

@media (max-width: 560px) {
  .otel-tablo th, .otel-tablo td { padding: 11px 12px; }
  .otel-tablo th { width: 46%; font-size: 11.5px; white-space: normal; }
  .otel-tablo .ot-ico { width: 22px; height: 22px; margin-right: 7px; vertical-align: -6px; }
}

/* ---------- Favori butonu ---------- */
.fav-btn { position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  color: #9aa4b8; box-shadow: 0 3px 10px rgba(24, 39, 75, .14);
  transition: transform .2s var(--ease, ease), color .2s ease, background .2s ease; }
.fav-btn:hover { transform: scale(1.12); background: #fff; color: #e5484d; }
.fav-btn svg { fill: none; transition: fill .2s ease; }
.fav-btn.on { color: #e5484d; }
.fav-btn.on svg { fill: #e5484d; }
.fav-btn.zipla { animation: favZipla .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes favZipla { 0% { transform: scale(1); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
@media (max-width: 700px) { .fav-btn { top: 6px; right: 6px; width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .fav-btn, .fav-btn.zipla { animation: none; transition: none; } }
.otel-kart.cikiyor { opacity: 0; transform: scale(.95); transition: opacity .25s ease, transform .25s ease; }
.fiyat-elle { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fiyat-elle input { min-width: 0; flex: 1; }
.fiyat-elle span { color: var(--muted); font-weight: 600; }
.fiyat-elle[hidden] { display: none; }

/* ---------- Otel tanıtım şeridi ---------- */
.reklam-slayt { position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(31, 41, 78, .1); }
.rk-yol { display: flex; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.rk-kare { flex: 0 0 100%; aspect-ratio: 3 / 1; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; background-color: #e7ecf6;
  text-decoration: none; color: #fff; position: relative; }
.rk-kare::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 23, 42, .68)); }
.rk-yazi { position: relative; z-index: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.rk-yazi b { font-size: 21px; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.rk-yazi span { font-size: 13.5px; opacity: .94; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.rk-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink);
  box-shadow: 0 3px 12px rgba(24, 39, 75, .16); transition: background .18s ease, transform .18s ease; }
.rk-ok:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.rk-ok.sol { left: 12px; }
.rk-ok.sag { right: 12px; }
.rk-nokta { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 7px; }
.rk-nokta span { width: 8px; height: 8px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .55); transition: width .3s ease, background .3s ease; }
.rk-nokta span.on { width: 24px; border-radius: 999px; background: #fff; }

.reklam-liste { display: flex; flex-direction: column; gap: 10px; }
.reklam-sat { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); }
.reklam-sat.pasif { opacity: .55; }
.rs-gorsel { flex: 0 0 92px; height: 52px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; background: var(--line-3, #f1f4f9); color: var(--muted); }
.rs-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.rs-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-govde b { font-size: 13.5px; }

/* Tanıtım görselleri (Otel Ayarları): sürükle-bırak + tıklayınca düzenle */
.reklam-sat { cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; }
.reklam-sat:hover { border-color: #d5d9e1; box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
.reklam-sat:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.reklam-sat.tasiniyor { opacity: .6; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); border-color: var(--brand-1); }
body.rs-surukleniyor, body.rs-surukleniyor * { cursor: grabbing !important; user-select: none; }
.rs-tut { flex: 0 0 auto; width: 30px; height: 40px; display: grid; place-items: center; border: 0; background: transparent;
  color: var(--muted); border-radius: 8px; cursor: grab; touch-action: none; padding: 0; }
.rs-tut:hover, .rs-tut:focus-visible { background: var(--bg-soft); color: var(--ink); }
.rs-govde .rs-yol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-arac { display: flex; gap: 6px; flex-shrink: 0; }
.rs-arac form { margin: 0; }
@media (max-width: 620px) {
  .reklam-sat { flex-wrap: wrap; }
  .rs-gorsel { flex-basis: 76px; height: 44px; }
  .rs-govde { flex-basis: calc(100% - 140px); }
  .rs-arac { width: 100%; justify-content: flex-end; }
}

@media (max-width: 700px) {
  .rk-kare { aspect-ratio: 2 / 1; }
  .rk-yazi { padding: 14px 16px; }
  .rk-yazi b { font-size: 17px; }
  .rk-yazi span { font-size: 12px; }
  .rk-ok { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .rk-yol { transition: none; } }

/* Oteller listesi: başlık, tanıtım şeridi ve filtre daha az yer kaplasın,
   otel kartları ilk ekranda görünsün. */
body[data-page="otel_ara"] .shell { padding-top: 16px; }
body[data-page="otel_ara"] .pane-head { margin-bottom: 14px; }
body[data-page="otel_ara"] .pane-head h1 { margin-bottom: 2px; }
body[data-page="otel_ara"] .reklam-slayt.mb-16 { margin-bottom: 14px; }
body[data-page="otel_ara"] .otel-filtre.mb-16 { margin-bottom: 14px; }
body[data-page="otel_ara"] .otel-filtre > .fs { padding: 16px 20px; }
body[data-page="otel_ara"] .of-ara input { height: 46px; }
body[data-page="otel_ara"] .of-alanlar { margin-top: 12px; }
@media (min-width: 701px) {
  body[data-page="otel_ara"] .rk-kare { aspect-ratio: 9 / 2; }
  body[data-page="otel_ara"] .pane-head .lead { font-size: 15.5px; }
}

/* Donatı çipleri (Otel Ayarları) */
.donati-cip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; }
.donati-cip form { display: inline-flex; }
.donati-cip button { border: 0; background: var(--line-3, #f1f4f9); color: var(--muted); cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; line-height: 1; font-size: 15px; }
.donati-cip button:hover { background: #fde8e8; color: var(--bad); }

/* Yönetici oda listesi */
.oda-liste { display: flex; flex-direction: column; gap: 12px; }
.oda-kart { display: flex; gap: 14px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); }
.oda-kart.pasif { opacity: .58; background: #fbfcfe; }
.ok2-foto { position: relative; flex: 0 0 84px; height: 66px; border-radius: 10px; overflow: hidden; display: grid;
  place-items: center; background: linear-gradient(135deg, #eef2f9, #e4ebf6); color: var(--muted); }
.ok2-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Fotoğraf sayısı + büyüteç düğmesi (müşteri kartındaki .os-sayi ile aynı). */
.ok2-foto .ok2-sayi { position: absolute; right: 4px; bottom: 4px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px; cursor: zoom-in;
  font-size: 10px; font-weight: 700; color: #fff; background: rgba(17, 24, 39, .72);
  border: 0; border-radius: 999px; padding: 2px 7px; transition: background .15s ease; }
.ok2-foto .ok2-sayi:hover { background: rgba(17, 24, 39, .92); }
.ok2-emoji { font-size: 28px; }
.ok2-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ok2-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14.5px; }
.ok2-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ok2-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ok2-donati { display: flex; gap: 6px; flex-wrap: wrap; }
.ok2-donati span { font-size: 11.5px; background: var(--line-3, #f1f4f9); border-radius: 999px; padding: 3px 9px; }
.ok2-donati span.var { background: var(--ok-soft); color: #146b4a; }
.ok2-donati span.yok { color: var(--muted); text-decoration: line-through; }
/* Beşten fazlası sayıyla; kart tek satırda kalsın. */
.ok2-donati span.ok2-fazla { background: transparent; border: 1px dashed var(--line-box);
  color: var(--muted); font-weight: 700; text-decoration: none; }
.ok2-sag { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.ok2-fiyat { font-size: 16px; color: var(--ok); letter-spacing: -.02em; }
@media (max-width: 640px) {
  .oda-kart { flex-wrap: wrap; }
  .ok2-sag { width: 100%; align-items: flex-start; text-align: left; }
}

/* ---------- Oda seçimi (müşteri) ---------- */
.oda-secim { display: flex; flex-direction: column; gap: 12px; }
.os-kart { position: relative; display: flex; gap: 14px; align-items: stretch; cursor: pointer;
  padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.os-kart:hover { border-color: #c3cfe8; transform: translateY(-1px); }
.os-kart.secili { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); background: #fcfffd; }
.os-kart input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.os-foto { flex: 0 0 108px; border-radius: 11px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef2f9, #e4ebf6); }
.os-foto img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.os-emoji2 { font-size: 34px; }
.os-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.os-ad { font-size: 15.5px; letter-spacing: -.01em; }
.os-ack { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.os-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.os-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.os-donati { display: flex; gap: 6px; flex-wrap: wrap; }
.os-donati span { font-size: 11.5px; background: var(--line-3, #f1f4f9); border-radius: 999px; padding: 3px 9px; }
.os-fiyat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; }
.os-fiyat b { font-size: 19px; color: var(--ok); letter-spacing: -.02em; white-space: nowrap; }
.os-sec { display: none; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ok);
  background: var(--ok-soft); border-radius: 999px; padding: 4px 10px; }
.os-kart.secili .os-sec { display: inline-flex; }
/* Odanın kaç fotoğrafı olduğunu söyleyen ve büyüteci açan düğme. Fotoğraflar
   yüklenebiliyordu ama müşteri yalnızca kapağı görüyordu. */
.os-foto { position: relative; }
.os-foto .os-sayi { position: absolute; right: 5px; bottom: 5px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; cursor: zoom-in;
  font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: .02em;
  background: rgba(17, 24, 39, .72); border: 0; border-radius: 999px; padding: 3px 8px;
  transition: background .15s ease; }
.os-foto .os-sayi:hover { background: rgba(17, 24, 39, .92); }
/* Donatı listesinin sonundaki sayı bir donatı değil; ayrı görünsün. */
.os-donati span.os-fazla { background: transparent; border: 1px dashed var(--line);
  color: var(--muted); font-weight: 600; }
.ro-not { margin: 8px 0 0; color: #8a6d1f; background: #fff8e6; border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
.ro-not[hidden] { display: none; }
@media (max-width: 600px) {
  .os-kart { flex-wrap: wrap; }
  .os-foto { flex: 0 0 72px; height: 72px; }
  .os-fiyat { width: 100%; align-items: flex-start; }
}

/* Rezervasyon kartındaki fotoğraf şeridi: en fazla üç fotoğraf, başlığın
   üstünde. Hiçbiri kırpılmaz; her fotoğraf kendi en-boy oranında durur, sığmazsa
   şerit yana kaydırılır. */
.rez-kapak { display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.rez-kapak::-webkit-scrollbar { display: none; }
.rez-kapak > span { flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
  border-radius: 10px; scroll-snap-align: start;
  background: linear-gradient(135deg, #eef2f9, #e4ebf6); }
.rez-kapak img { display: block; width: auto; height: auto; max-height: 104px; }
.rez-kapak .rk-emoji { font-size: 34px; line-height: 1; padding: 30px 34px; }
@media (max-width: 600px) {
  .rez-kapak { gap: 5px; }
  .rez-kapak img { max-height: 84px; }
  .rez-kapak .rk-emoji { font-size: 26px; padding: 22px 26px; }
}
.km-yildiz { color: #e0a12a; letter-spacing: .06em; }

/* ---------- Yönetici fotoğraf yöneticisi ---------- */
.foto-arac { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.foto-arac select { max-width: 210px; }
.foto-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.fo-kart { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: grab;
  border: 2px solid var(--line-2); background: #f1f4f9;
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease; }
.fo-kart img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.fo-kart.kapak { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.fo-kart.gizli { opacity: .45; }
.fo-kart.tasiniyor { opacity: .35; cursor: grabbing; }
.fo-rozet { position: absolute; top: 7px; left: 7px; z-index: 2; font-size: 10.5px; font-weight: 700;
  background: var(--ok); color: #fff; border-radius: 999px; padding: 3px 9px; }
.fo-rozet.gizliet { background: #6b7280; left: auto; right: 7px; }
.fo-arac { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 4px;
  padding: 6px; background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .72));
  opacity: 0; transition: opacity .18s ease; }
.fo-kart:hover .fo-arac { opacity: 1; }
.fo-btn { flex: 1; cursor: pointer; border: 0; border-radius: 7px; padding: 5px 0;
  background: rgba(255, 255, 255, .92); font-size: 13px; line-height: 1; color: var(--ink); }
.fo-btn:hover { background: #fff; }
.fo-btn.sil:hover { background: #fde8e8; color: var(--bad); }
@media (hover: none) { .fo-arac { opacity: 1; } }
.fo-kart .fo-emoji { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; }

/* Seçilen müşteri şeridi ve arama açılır listesi (yönetici formları).
   Daha önce yalnızca randevu_duzenle.php içindeydi; otel rezervasyon formu da
   aynı bileşeni kullanıyor. */
.sel-user { margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--ok-soft, #eaf7f0); color: var(--ok); font-size: 13.5px; }
.sel-user.hidden { display: none; }
#musteriDD { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }

/* ---------- Yönetici rezervasyon formu: otel ve oda seçimi ---------- */
.secim-liste { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 2px; }
.sk-kart { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.sk-kart:hover { border-color: #c3cfe8; }
.sk-kart.secili { border-color: var(--ok); background: #fbfffd; box-shadow: 0 0 0 3px var(--ok-soft); }
.sk-foto { flex: 0 0 62px; height: 48px; border-radius: 9px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef2f9, #e4ebf6); }
.sk-foto img { width: 100%; height: 100%; object-fit: cover; }
.sk-emoji { font-size: 24px; }
.sk-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sk-govde b { font-size: 14px; letter-spacing: -.01em; }
.sk-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.sk-yildiz { color: #e0a12a; letter-spacing: .04em; }
.sk-sag { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; }
.sk-sag b { font-size: 14px; color: var(--ok); white-space: nowrap; }

.ucret-kutu { margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: var(--ok-soft); border: 1px solid #cfe9dc; }
.uk-sat { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.uk-sat.toplam { border-top: 1px dashed #a9d8c2; margin-top: 6px; padding-top: 10px; font-size: 15px; }
.uk-sat.toplam b { color: var(--ok); font-size: 19px; letter-spacing: -.02em; }
.ucret-kutu p { margin: 8px 0 0; line-height: 1.5; }
.ucret-kutu p[hidden] { display: none; }

@media (max-width: 640px) {
  .sk-kart { flex-wrap: wrap; }
  .sk-sag { width: 100%; flex-direction: row; align-items: baseline; gap: 6px; text-align: left; }
  .secim-liste { max-height: 340px; }
  .mis-sat { flex-direction: column; align-items: stretch; }
  .mis-sat .btn { align-self: flex-end; }
}

/* Otel ve oda seçimi arasındaki ayraç ve elle girilen otel özeti. */
.secim-ayrac { border: 0; border-top: 1px solid var(--line-2); margin: 20px 0; }
.secim-ayrac[hidden] { display: none; }
.manuel-ozet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
  padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid #d9dcf5; }
.manuel-ozet.hidden { display: none; }
.manuel-ozet .mo-ic { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.manuel-ozet .mo-ic b { font-size: 14px; }
.ks-fiyat-yok { color: var(--muted) !important; font-size: 15px; }

/* Yönetici katalog satırı dar ekranda: fotoğraf üstte kalsın, bilgi alta insin. */
@media (max-width: 640px) {
  /* Yalnız .kat-sat içinde: aynı .ks-* adları müşterinin harcama satırında da
     var; kapsamsız yazılınca oradaki fiyata kesikli çizgi ve tam genişlik veriyordu. */
  .kat-sat { flex-wrap: wrap; row-gap: 10px; }
  .kat-sat .ks-foto { flex: 0 0 64px; height: 52px; }
  .kat-sat .ks-orta { flex: 1 1 auto; min-width: 140px; }
  .kat-sat .ks-ad { font-size: 13.5px; }
  .kat-sat .ks-alt-bilgi { gap: 10px; font-size: 11px; }
  .kat-sat .ks-fiyat { flex: 1 1 100%; text-align: left; flex-direction: row; align-items: baseline; gap: 6px;
    padding-top: 8px; border-top: 1px dashed var(--line-2); }
  .kat-sat .ks-ok { position: absolute; right: 12px; top: 16px; }
  .kat-sat { position: relative; padding-right: 34px; }
}

/* ---------- Sezon fiyatı (yönetici otel formu) ----------
   Eskiden altı kutu etiketsiz yan yana diziliyordu; sıkışınca hangisinin ne
   olduğu anlaşılmıyordu. Artık her aralık kendi kartında duruyor, her alanın
   üstünde adı yazıyor ve kart altında kaç geceyi kapsadığı özetleniyor. */
#fiyatAralik { counter-reset: fa; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

/* Hiç aralık yokken bölüm boş bir boşluk gibi durmasın. */
#fiyatAralik:empty::before {
  content: "Henüz tarih aralığı yok. Bütün geceler odanın kendi ücretinden hesaplanır.";
  display: block; padding: 18px 16px; text-align: center; font-size: 12.5px; color: var(--muted);
  border: 1px dashed var(--line-box); border-radius: var(--r-lg); background: var(--bg-soft);
}

.fa-sat { counter-increment: fa; display: flex; flex-direction: column; gap: 11px;
  padding: 13px 14px 14px; border: 1px solid var(--line-box); border-radius: var(--r-lg);
  background: #fff; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.fa-sat:hover { border-color: #dcdce1; }
.fa-sat:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(232, 71, 78, .1); }
.fa-sat.hata { border-color: var(--bad); background: var(--bad-soft); }

/* Üst satır: sıra numarası, sezon adı, silme düğmesi. */
.fa-ust { display: flex; align-items: center; gap: 10px; }
.fa-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line-box); }
.fa-no::before { content: counter(fa); }   /* satır silinince numaralar kendiliğinden kayar */
.fa-ad { flex: 1 1 auto; min-width: 0; }
.fa-sil { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; padding: 0; color: var(--muted);
  background: transparent; border: 1px solid transparent;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
.fa-sil:hover { background: var(--bad-soft); color: var(--bad); border-color: #f6cdcd; }
.fa-sil:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 1px; }

/* Alanlar: dar ekranda kendiliğinden alt alta iner. */
.fa-alan { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.fa-kutu { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fa-etiket { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.fa-kutu > input, .fa-kutu > select { width: 100%; min-width: 0; }

/* Tutar kutusunun içinde otelin para birimi yazar. */
.fa-para { position: relative; display: block; }
.fa-para input { width: 100%; padding-right: 52px; }
.fa-birim { position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); pointer-events: none; }

/* Kaç geceyi kapsadığı ya da tarih hatası. */
.fa-ozet { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.fa-ozet[hidden] { display: none; }
.fa-ozet svg { flex: 0 0 auto; color: var(--muted); }
.fa-sat.hata .fa-ozet { color: var(--bad); font-weight: 600; }
.fa-sat.hata .fa-ozet svg { color: var(--bad); }

@media (max-width: 420px) {
  .fa-alan { grid-template-columns: 1fr; }
  .fa-sat { padding: 12px; }
}

/* Oda özellikleri: var (yeşil tik) / yok (soluk çarpı). */
.donati-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.dn-cip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; background: var(--ok-soft); color: #146b4a; }
.dn-cip svg { flex-shrink: 0; }
.dn-cip.yok { background: var(--line-3, #f1f4f9); color: var(--muted); text-decoration: line-through;
  text-decoration-color: rgba(120, 128, 145, .55); }
.dn-cip.yok svg { text-decoration: none; }

/* Üç durumlu donatı seçimi (yönetici oda formu). */
.donati-secim { display: flex; flex-direction: column; gap: 8px; }
.ds-sat { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; }
.ds-ad { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.ds-secenek { display: flex; gap: 4px; background: var(--line-3, #f1f4f9); border-radius: 999px; padding: 3px; }
.ds-secenek label { cursor: pointer; }
.ds-secenek input { position: absolute; opacity: 0; pointer-events: none; }
.ds-secenek span { display: block; padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap;
  transition: background .15s ease, color .15s ease; }
.ds-secenek input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(24, 39, 75, .12); }
.ds-secenek input:checked + span.var { background: var(--ok); color: #fff; }
.ds-secenek input:checked + span.yok { background: #e5484d; color: #fff; }
@media (max-width: 560px) {
  .ds-sat { flex-direction: column; align-items: stretch; gap: 8px; }
  .ds-secenek { justify-content: space-between; }
  .ds-secenek label { flex: 1; }
  .ds-secenek span { text-align: center; }
}


/* ==========================================================================
   Fotoğraf büyüteci
   Oda ve otel fotoğraflarını tam boyda göstermek için. Kırpma yok: görsel
   kutuya sığdırılır, kendi en-boy oranını korur.
   ========================================================================== */
.foto-kutu { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.foto-kutu[hidden] { display: none; }
.fk-arka { position: absolute; inset: 0; background: rgba(13, 17, 27, .78); backdrop-filter: blur(3px); }
.fk-ic { position: relative; z-index: 1; width: min(960px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 10px; }
.fk-ust { display: flex; align-items: center; gap: 12px; color: #fff; }
.fk-baslik { font-size: 15px; font-weight: 700; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-sayac { font-size: 12px; opacity: .78; font-variant-numeric: tabular-nums; }
.fk-kapat { width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 20px; line-height: 1;
  transition: background .15s ease; }
.fk-kapat:hover { background: rgba(255, 255, 255, .3); }
.fk-govde { position: relative; display: grid; place-items: center; min-height: 0; }
.fk-resim { display: block; max-width: 100%; max-height: calc(100vh - 120px);
  width: auto; height: auto; border-radius: 12px; background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.fk-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: #16181d; font-size: 24px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); transition: background .15s ease; }
.fk-ok:hover { background: #fff; }
.fk-ok.sol { left: -8px; }
.fk-ok.sag { right: -8px; }
.fk-ok[hidden] { display: none; }
@media (max-width: 620px) {
  .foto-kutu { padding: 14px; }
  .fk-resim { max-height: calc(100vh - 100px); }
  .fk-ok { width: 34px; height: 34px; font-size: 20px; }
  .fk-ok.sol { left: 2px; }
  .fk-ok.sag { right: 2px; }
}

/* ==========================================================================
   Müşteri itirazı kutusu (yönetici)
   Hizmet ödemesi ve ek ödeme yönetim sayfalarında ortak. Daha önce yalnızca
   işaretleme vardı, kural yoktu: kutu düz metin olarak çıkıyordu.
   ========================================================================== */
.itiraz-kutu { border: 1px solid #f3d5d5; background: #fdf0f0; border-radius: var(--r-md);
  padding: 14px 16px; margin: 0 0 16px; }
.itiraz-kutu.yanitli { border-color: #cdead9; background: #f3faf6; }
.ik-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #991b1b; }
.itiraz-kutu.yanitli .ik-ust { color: #146b4a; }
.ik-ust b { font-size: 14px; }
.ik-ust svg { flex: 0 0 auto; }
.ik-metin { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }
.ik-yanit { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  background: #fff; border: 1px solid var(--line-box); }
.ik-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ik-form textarea { width: 100%; resize: vertical; min-height: 56px; font: inherit; font-size: 13.5px;
  padding: 9px 11px; border: 1px solid var(--line-box); border-radius: 10px; background: #fff; color: var(--ink); }
.ik-form textarea:focus { outline: 0; border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ==========================================================================
   ÖDEMELER — MOBİL
   --------------------------------------------------------------------------
   Dar ekranda müşterinin tek bir soruya cevap araması gerekiyor: "ne kadar
   borcum kaldı". Bu blok o rakamı büyütüp öne çıkarır, geri kalanı sakinleştirir
   ve dokunma hedeflerini parmakla basılabilir boyuta getirir.
   Yalnızca görünüm; hiçbir kural işleyişi değiştirmez.
   ========================================================================== */

/* ---------- Sekme şeridi ----------
   Şerit zaten yana kayıyordu ama son sekme kenarda kesiliyor ve kaydırılabildiği
   anlaşılmıyordu. Sağ kenara solma ekliyoruz: "devamı var" işareti. */
@media (max-width: 700px) {
  /* Yana kaydırılan şeritte son sekme kenarda kesiliyor ve kaydırılabildiği
     anlaşılmıyordu. Mobilde şerit ızgaraya dönüşür: bütün sekmeler görünür,
     hiçbiri gizli kalmaz, her biri parmakla basılabilir. */
  .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    border-bottom: 0;
    margin-bottom: 16px;
  }
  .tabs > button,
  .tabs > a.tab-lnk {
    white-space: normal;
    text-align: center;
    padding: 11px 10px;
    min-height: 44px;
    font-size: 13px;
    line-height: 1.3;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .tabs > button.on,
  .tabs > a.tab-lnk.on {
    border-color: var(--brand-1);
    background: var(--brand-soft);
    font-weight: 700;
  }
  /* Üç sekmeli listelerde (Ödenmedi / Kısmi / Ödendi) tek satırda üçe böl. */
  .tabs:has(> *:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs:has(> *:nth-child(3):last-child) > * { font-size: 12px; padding: 10px 4px; }
}

@media (max-width: 560px) {
  /* ---------- Müşteri: ödeme kartı kökanı ----------
     "ÖDENEN 0 USD / 149,10 USD" iki rakamı yan yana koyuyor ve hangisinin
     önemli olduğu belirsiz kalıyordu. Mobilde kalan borç öne geçer. */
  .tk-price { font-size: 21px; }
  .tk-price-alt { display: block; font-size: 12px; font-weight: 600; margin-top: 1px; }
  .tk-kalan { font-size: 15px; margin-top: 8px; letter-spacing: -.01em; }
  .tk-bekleyen { font-size: 12px; margin-top: 4px; }

  /* Kart altındaki eylemler: parmakla basılabilir yükseklik. */
  .tk-acts { gap: 8px; margin-top: 12px; }
  .tk-acts .btn { min-height: 42px; font-size: 13px; padding: 10px 14px; }
  .tk-acts .btn svg { width: 15px; height: 15px; }

  /* ---------- Özet şeridi: kalan borç tam satır ----------
     İki küçük kutu yan yana kalır (tutar ve ödenen), kalan borç tek başına
     tam satıra geçip büyür. Müşteri ekranı açtığında gözü oraya düşsün. */
  .oz-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .oz-kutu { padding: 12px; }
  .oz-k { font-size: 10px; }
  .oz-v { font-size: 16px; }
  .oz-kutu.oz-kalan { grid-column: 1 / -1; padding: 16px 14px; }
  .oz-kalan .oz-k { font-size: 11px; }
  .oz-kalan .oz-v { font-size: 27px; line-height: 1.15; }
  .oz-kalan .oz-yazi { font-size: 12px; margin-top: 4px; }
  /* İndirim kutusu da tam satır: eksi işaretli rakam yarım kutuda sıkışıyordu. */
  .oz-kutu.oz-indirim { grid-column: 1 / -1; }

  /* ---------- Ödeme kaydı satırı ----------
     İkon + yöntem + rozet + tarih + tutar + ok tek satıra sığmıyor, tutar
     tarihin üstüne biniyordu. Tutar kendi satırına iner. */
  .od-kart > summary { flex-wrap: wrap; padding: 12px; gap: 10px; row-gap: 8px; }
  .od-orta { flex: 1 1 calc(100% - 84px); }
  .od-yontem { font-size: 13px; }
  .od-tutar { flex: 1 1 100%; order: 3; font-size: 18px; text-align: right; }
  .od-ok { order: 2; margin-left: auto; }
  .od-govde { padding: 0 12px 14px; }
  .od-sat { flex-wrap: wrap; row-gap: 2px; }
  .od-sat .k { flex: 1 1 100%; font-size: 12px; }
  .od-sat .v { flex: 1 1 100%; text-align: left; }

  /* Makbuz gövdesindeki eylem düğmeleri de tam satır. */
  .mkb .flex.gap-10 > .btn,
  .mkb .flex.gap-10 > form > .btn { flex: 1 1 100%; justify-content: center; min-height: 46px; }

}

/* ---------- Yönetici tarafı ---------- */
@media (max-width: 560px) {
  /* Ödeme kartı kökanındaki tutar kutusu: müşteri tarafıyla aynı hiyerarşi. */
  .adm-body .ts-toplam { font-size: 20px; }
  .adm-body .ts-kalan { font-size: 15px; }

  /* Ödeme detayında kalan borç kutusu tam satır (müşteri tarafındaki gibi). */
  .adm-body .oz-kutu.oz-kalan { grid-column: 1 / -1; }

  /* Modal içindeki iki sütunlu alanlar tek sütuna iner: para birimi ve tutar
     yan yana sıkışınca rakam okunmuyordu. */
  .adm-body .modal .grid.g2 { grid-template-columns: minmax(0, 1fr); }

  /* Onay/ret düğmeleri: küçük ikon düğmeler parmakla ıskalanıyordu. */
  .adm-body .od-kart .btn-sm,
  .adm-body .bb-sat .btn-sm { min-height: 40px; }
}

/* ==========================================================================
   HARCAMA KALEMLERİ — akordeon + fiş görseli
   --------------------------------------------------------------------------
   Bölüm varsayılan kapalı; çok kalemli kayıtlarda sayfa metrelerce uzuyordu.
   Her kalem kendi akordeon satırı: solda fiş küçük görseli ve fiş sayısı,
   açılınca ayrıntı ve fişlerin tamamı. Mobil öncelikli ölçülendirildi.
   ========================================================================== */

.kalem-sat {
  border: 1px solid var(--line-box); border-radius: 12px; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kalem-sat[open] { border-color: #dcdce1; box-shadow: var(--sh-1); }
.kalem-sat > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
}
.kalem-sat > summary::-webkit-details-marker { display: none; }
.kalem-sat .ks-ok { transition: transform .2s var(--ease, ease); }
.kalem-sat[open] .ks-ok { transform: rotate(180deg); }

/* Açılan gövde: künye, ayrıntı ve fişler. */
.ks-govde { padding: 0 12px 12px; }
.ks-kunye { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ks-kunye span {
  flex: 1 1 140px; min-width: 0; background: var(--bg-soft);
  border: 1px solid var(--line-box); border-radius: 10px; padding: 8px 10px;
}
.ks-kunye i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ks-kunye b { display: block; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.ks-ack { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--line-box); border-radius: 10px; padding: 10px 12px; }

.ks-fis-liste { display: flex; gap: 8px; flex-wrap: wrap; }
.ks-fis {
  width: 96px; height: 96px; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--line-3, #f1f4f9); cursor: zoom-in; display: block;
}
.ks-fis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-fis:hover { border-color: var(--brand-1); }
.ks-fis-yok { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; color: var(--muted); }

@media (max-width: 560px) {
  /* Dar ekranda satır daralır ama fiş görseli okunur kalır. */
  .kalem-sat > summary { gap: 10px; padding: 9px 10px; }
  .ks-foto { flex: 0 0 60px; height: 52px; }
  .ks-ad { font-size: 13.5px; }
  .ks-alt-bilgi { gap: 8px; font-size: 11.5px; }
  .ks-fiyat b { font-size: 14px; }
  .ks-govde { padding: 0 10px 10px; }
  .ks-kunye span { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .ks-kunye i { display: inline; }
  .ks-kunye b { margin-top: 0; text-align: right; }
  /* Fişler iki sütun: tek sütun çok yer kaplıyor, üç sütun küçük kalıyor. */
  .ks-fis-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ks-fis { width: 100%; height: 110px; }

}

/* ---------- Harcama kalemi satırı (müşteri, ek_odeme_detay.php) — modern kart ----------
   Tüm kurallar .kalem-sat altında: aynı .ks-* adları yönetici otel kataloğunda da
   kullanılıyor, kapsamsız kurallar birbirine sızıyordu. Satır bir ızgara:
   fiş/emoji · başlık + haplar · tutar · aç/kapa. Telefonda tutar sağ üstte sabit,
   aç/kapa altına iner; tutar hiç kırılmaz. */
.kalem-liste { gap: 8px; }
.kalem-sat { border: 1px solid var(--line-box); border-radius: 14px; background: #fff; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease; }
.kalem-sat:hover { border-color: #d6d9e1; box-shadow: 0 6px 18px rgba(16, 24, 40, .06); }
.kalem-sat[open] { border-color: #d6d9e1; box-shadow: 0 10px 26px rgba(16, 24, 40, .08); }
.kalem-sat > summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 28px;
  grid-template-areas: "foto orta fiyat ok"; align-items: center; gap: 14px; padding: 12px 14px; }
.kalem-sat > summary:focus-visible { outline: 2px solid var(--brand-1); outline-offset: -2px; border-radius: 14px; }
.kalem-sat .ks-foto { grid-area: foto; width: 56px; height: 56px; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, #f3f4f8, #e9ebf2); border: 1px solid var(--line-box); }
.kalem-sat .ks-emoji { font-size: 26px; line-height: 1; }
.kalem-sat .ks-foto-adet { right: 4px; bottom: 4px; font-weight: 700; }
.kalem-sat .ks-orta { grid-area: orta; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kalem-sat .ks-ad { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kalem-sat .ks-alt-bilgi { gap: 6px; font-size: 12px; }
.kalem-sat .ks-alt-bilgi > span { padding: 3px 9px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--line-box); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.kalem-sat .ks-alt-bilgi svg { width: 12px; height: 12px; color: var(--muted); }
.kalem-sat .ks-fiyat { grid-area: fiyat; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-align: right; white-space: nowrap; flex: none; border: 0; padding: 0; }
.kalem-sat .ks-fiyat b { font-size: 15.5px; font-weight: 800; color: var(--ok); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.kalem-sat .ks-asil { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.kalem-sat .ks-ok { grid-area: ok; position: static; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-soft); color: var(--muted);
  transition: transform .2s ease, background .18s ease, color .18s ease; }
.kalem-sat:hover .ks-ok { color: var(--ink); }
.kalem-sat[open] .ks-ok { background: var(--ink); color: #fff; transform: rotate(180deg); }
.kalem-sat .ks-govde { border-top: 1px solid var(--line-2); padding: 14px; background: #fcfcfd; }
/* Künye: kalemin tüm ayrıntısı tek tabloda, satır satır — solda etiket, sağda değer
   (Harcama ID, Tarih, Harcamanın aslı, Açıklama, Fiş). Etiketler büyük harfe
   ÇEVRİLMEZ: sayfa İngilizce kipteyken tarayıcı "Tarih"i "TARIH" yapıyordu
   (İngilizce büyük harf kuralı, i → I). */
.kalem-sat .ks-kunye { display: block; margin: 0; background: #fff; border: 1px solid var(--line-box);
  border-radius: 12px; overflow: hidden; }
.kalem-sat .ks-kunye .ks-k-sat { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline;
  gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); }
.kalem-sat .ks-kunye .ks-k-sat:last-child { border-bottom: 0; }
.kalem-sat .ks-kunye i { display: block; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--muted); }
.kalem-sat .ks-kunye b { display: block; margin: 0; font-size: 13.5px; font-weight: 700; text-align: left;
  color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kalem-sat .ks-kunye .ks-k-metin { font-weight: 500; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }
.kalem-sat .ks-kunye .ks-k-yok { font-weight: 500; color: var(--muted); }
.kalem-sat .ks-kunye .ks-k-fis { align-items: start; }
.kalem-sat .ks-kunye .ks-k-fis > i { padding-top: 2px; }
.kalem-sat .ks-k-fis .ks-fis-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.kalem-sat .ks-k-fis .ks-fis { width: 88px; height: 88px; border-radius: 10px; }

@media (max-width: 560px) {
  .kalem-sat > summary { grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "foto orta fiyat" "foto orta ok"; align-items: start; gap: 6px 12px; padding: 12px; }
  .kalem-sat .ks-foto { width: 48px; height: 48px; border-radius: 11px; }
  .kalem-sat .ks-emoji { font-size: 22px; }
  .kalem-sat .ks-ad { font-size: 14px; }
  .kalem-sat .ks-alt-bilgi { font-size: 11.5px; }
  .kalem-sat .ks-fiyat b { font-size: 14.5px; }
  .kalem-sat .ks-ok { justify-self: end; align-self: end; width: 26px; height: 26px; }
  .kalem-sat .ks-govde { padding: 12px; }
  .kalem-sat .ks-kunye .ks-k-sat { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .kalem-sat .ks-k-fis .ks-fis-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kalem-sat .ks-k-fis .ks-fis { width: 100%; height: 84px; }
}
/* Ödeme satırında ikinci saat: kayıt Çin saatiyle tutulur, müşteri kendi
   ülkesinin karşılığını da görür (bkz. yerel_karsilik / yerel_saat_etiketi). */
.od-yerel { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.tk-yerel { font-style: normal; color: var(--muted); }

/* ==========================================================================
   Bildirim pop-up'ı (includes/bildirim_popup.php)
   Renk --bpu-renk / --bpu-yumusak ile bildirim türünden gelir.
   ========================================================================== */
.bpu { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; --bpu-renk: #2f6fe4; --bpu-yumusak: #edf3fe; }
.bpu[hidden] { display: none; }
.bpu-arka { position: absolute; inset: 0; background: rgba(15, 18, 28, .52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s ease; }
.bpu-kutu { position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 24px;
  padding: 26px 26px 18px; box-shadow: 0 30px 80px rgba(15, 18, 28, .28), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .3s ease, transform .38s cubic-bezier(.2, .9, .25, 1.15); outline: none; }
.bpu-kutu::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 118px; border-radius: 24px 24px 0 0; pointer-events: none;
  background: radial-gradient(420px 150px at 18% -30%, var(--bpu-yumusak), transparent 72%), linear-gradient(180deg, var(--bpu-yumusak), rgba(255, 255, 255, 0)); }
.bpu.bpu-acik .bpu-arka { opacity: 1; }
.bpu.bpu-acik .bpu-kutu { opacity: 1; transform: none; }
.bpu.bpu-cik .bpu-arka { opacity: 0; }
.bpu.bpu-cik .bpu-kutu { opacity: 0; transform: translateY(10px) scale(.98); transition-duration: .2s; }
html.bpu-kilit, html.bpu-kilit body { overflow: hidden; }
.bpu-x { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .85);
  color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.bpu-x:hover { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.bpu-ust { position: relative; display: flex; align-items: center; gap: 13px; margin: 2px 42px 18px 0; }
.bpu-ico { width: 54px; height: 54px; flex-shrink: 0; border-radius: 17px; display: grid; place-items: center; color: #fff; background: var(--bpu-renk);
  box-shadow: 0 10px 24px -8px var(--bpu-renk); animation: bpuIco .7s cubic-bezier(.2, .9, .25, 1.3) .15s both; }
@keyframes bpuIco { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bpu-ust-yazi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bpu-tur { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bpu-renk); }
.bpu-zaman { font-size: 12.5px; color: var(--muted); }
.bpu-sira { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--line-box); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.bpu-baslik { position: relative; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); overflow-wrap: anywhere; }
.bpu-metin { position: relative; margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.bpu-metin[hidden] { display: none; }
.bpu-dugmeler { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.bpu-dugmeler .btn { min-height: 46px; padding-left: 20px; padding-right: 20px; }
.bpu-dugmeler .btn[hidden] { display: none; }
.bpu-dugmeler .btn-primary svg { transition: transform .2s ease; }
.bpu-dugmeler .btn-primary:hover svg { transform: translateX(3px); }
.bpu-imza { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted-2); }
.bpu-imza-logo { width: 18px; height: 18px; border-radius: 6px; background: var(--brand-grad); color: #fff; font-size: 8.5px; font-weight: 800; display: grid; place-items: center; }
@media (max-width: 560px) {
  .bpu { place-items: end center; padding: 0; }
  .bpu-kutu { width: 100%; border-radius: 24px 24px 0 0; padding: 22px 20px calc(16px + env(safe-area-inset-bottom)); transform: translateY(40px); max-height: 88vh; }
  .bpu-kutu::before { border-radius: 24px 24px 0 0; }
  .bpu-baslik { font-size: 19px; }
  .bpu-dugmeler { flex-direction: column-reverse; }
  .bpu-dugmeler .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .bpu-kutu, .bpu-arka { transition: none; } .bpu-ico { animation: none; } }

/* ---------- Üst menü ikonları ----------
   Masaüstünde ikon metnin ÜSTÜNDE: yan yana konunca sekiz ikon ~170 px ister,
   Türkçe menüde 1001–1440 px arasında logo ile menü arasında 19–24 px boşluk
   kalıyor (ölçüldü) — başlık taşardı. Üst üste düzen genişlik eklemez.
   Mobil açılır menüde ikon solda, kendi renginin açık tonunda bir kutuda. */
.main-nav a { --nav-renk: var(--brand-1); --nav-zemin: var(--brand-soft); }
.main-nav a[data-nav="index"]     { --nav-renk: #e8474e; --nav-zemin: #fdeef0; }
.main-nav a[data-nav="rehberlik"] { --nav-renk: #7c5cff; --nav-zemin: #f1edff; }
.main-nav a[data-nav="ulasim"]    { --nav-renk: #2f80ed; --nav-zemin: #eaf2fd; }
.main-nav a[data-nav="otel_ara"]  { --nav-renk: #ec7f1f; --nav-zemin: #fef1e4; }
.main-nav a[data-nav="urunler"]   { --nav-renk: #1a9f69; --nav-zemin: #e6f6ef; }
.main-nav a[data-nav="galeri"]    { --nav-renk: #d9468f; --nav-zemin: #fcebf4; }
.main-nav a[data-nav="hakkimda"]  { --nav-renk: #0e9aab; --nav-zemin: #e4f5f7; }
.main-nav a[data-nav="iletisim"]  { --nav-renk: #c48a00; --nav-zemin: #fdf5dd; }

.main-nav .nav-ico { display: grid; place-items: center; color: var(--nav-renk); flex-shrink: 0; }
.main-nav .nav-ico svg { width: 18px; height: 18px; display: block; transition: transform .25s var(--ease-out); }
.main-nav a:hover .nav-ico svg { transform: translateY(-1px) scale(1.1); }

@media (min-width: 1001px) {
  .main-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding-top: 7px; padding-bottom: 9px; line-height: 1.2; font-size: 13.5px;
  }
  .main-nav a::after { bottom: 2px; background: var(--nav-renk); }
  .main-nav a:hover { color: var(--nav-renk); }
  .main-nav .nav-ayrac { height: 34px; }
}

@media (max-width: 1000px) {
  .main-nav a { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; }
  .main-nav .nav-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--nav-zemin); }
  .main-nav a:hover { background: var(--bg-soft); color: var(--ink); }
  .main-nav a.active { background: var(--nav-zemin); color: var(--ink); }
}