/* ═══════════════════════════════════════════════════════════
   TEMA & DEĞİŞKENLER
═══════════════════════════════════════════════════════════ */
:root {
  --navy:    #6B2CBF;   /* asset pack: Purple */
  --purple-d:#4B168C;   /* asset pack: Purple dark */
  --purple-lt:#F1ECFB;
  --gold:    #F59E0B;   /* asset pack: Orange */
  --gold-lt: #FFF7ED;
  --green:   #8CC20F;   /* asset pack: Green */
  --green-d: #6BA000;   /* asset pack: Green dark */
  --green-lt:#F3F9E4;
  --red:     #D94040;
  --blue:    #2563EB;

  --bg:      #F8FAFC;   /* asset pack: Soft background */
  --surface: #FFFFFF;
  --surface2:#F1F5F9;
  --border:  #E5E7EB;   /* asset pack: Border */
  --text:    #151722;   /* asset pack: Text */
  --muted:   #667085;   /* asset pack: Muted */
  --radius:  14px;
  --radius-lg:18px;
  --ring:    rgba(107,44,191,.14);
  --shadow:  0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(75,22,140,.10);
}
[data-theme="dark"] {
  --bg:      #0F1117;
  --surface: #1A1D26;
  --surface2:#222632;
  --border:  #2E3347;
  --text:    #E8E6E0;
  --muted:   #8A8880;
  --shadow:  0 2px 12px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --gold-lt: #3A2A0A;
  --green-lt:#1E2A0E;
  --purple-lt:#241639;
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden;
  transition: background .3s, color .3s;
  padding-bottom: env(safe-area-inset-bottom);
}
h1,h2,h3 { font-family: 'Poppins', system-ui, sans-serif; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
/* ── Beta Banner ── */
.beta-banner {
  position: sticky; top: 0; z-index: 201;
  background: var(--green-lt);
  color: var(--text);
  height: 36px;
  overflow: hidden;
  display: flex; align-items: center;
  border-bottom: 1px solid #E2EFC8;
}
[data-theme="dark"] .beta-banner { border-bottom-color: #2E3A1B; }
.beta-track {
  display: inline-flex; align-items: center; gap: 0;
  white-space: nowrap;
  animation: betaScroll 38s linear infinite;
}
.beta-track:hover { animation-play-state: paused; }
.beta-item {
  font-size: 13px; letter-spacing: .01em;
  padding: 0 32px;
  opacity: .95;
}
.beta-item strong { color: var(--green-d); }
.beta-sep {
  color: var(--green); font-size: 12px; opacity: .7;
  flex-shrink: 0;
}
@keyframes betaScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .beta-banner { height: 32px; }
  .beta-item { font-size: 12px; padding: 0 20px; }
}

.header {
  position: sticky; top: 36px; z-index: 200;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
@media (max-width: 600px) {
  .header { top: 32px; }
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 64px;
}
.logo {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.logo-img { height: 30px; width: auto; display: block; }
.logo-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--navy); display: flex; align-items: center;
  justify-content: center; font-size: 18px; font-weight: 700;
  color: var(--gold); font-family: 'Poppins', system-ui, sans-serif;
}
.logo-text { font-family: 'Poppins', system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--text); }
.logo-text span { color: var(--gold); }

.header-search {
  display: none;
}
.header-search input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 24px; padding: 9px 16px 9px 40px;
  font-size: 14px; color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.header-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.header-search input::placeholder { color: var(--muted); }
.header-search .search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 15px; pointer-events: none;
}
nav.main-nav {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.nav-btn {
  background: transparent; border: none; color: var(--muted);
  padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  transition: all .15s; white-space: nowrap;
}
.nav-btn:hover { background: var(--surface2); color: var(--text); }
.nav-btn.active { color: var(--navy); font-weight: 600; }
[data-theme="dark"] .nav-btn.active { color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.theme-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all .2s; flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--gold); }
.btn-support {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--navy), var(--purple-d));
  color: #fff; border: none; padding: 9px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(107,44,191,.28); transition: all .18s;
}
.btn-support:hover { filter: brightness(1.06); box-shadow: 0 4px 16px rgba(107,44,191,.36); transform: translateY(-1px); }
.btn-support .ui-icon { width: 16px; height: 16px; }
@media (max-width: 600px) { .logo-img { height: 26px; } .btn-support { display: none; } }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 6px;
  flex-shrink: 0; order: -1;
}
.hamburger span {
  width: 22px; height: 2px; background: var(--text);
  border-radius: 2px; transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
═══════════════════════════════════════════════════════════ */
.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1100;
}
.drawer-overlay.open { display: block; }
.nav-drawer {
  position: fixed; top: 0; left: 0; width: 80%; max-width: 300px; bottom: 0;
  background: var(--surface); z-index: 1101; padding: 0 16px 16px;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.nav-drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}
.drawer-title { font-weight: 700; font-size: 15px; color: var(--navy); }
[data-theme="dark"] .drawer-title { color: var(--gold); }
.drawer-close-btn {
  background: var(--surface2); border: none; border-radius: 8px;
  width: 32px; height: 32px; font-size: 16px; color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.drawer-close-btn:hover { background: var(--border); }
.drawer-nav-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px; border-radius: 10px;
  background: none; border: none; color: var(--text);
  font-size: 15px; font-weight: 500; text-align: left;
  transition: background .15s; margin-bottom: 4px;
}
.drawer-nav-btn:hover { background: var(--surface2); }
.drawer-nav-btn .icon { font-size: 20px; width: 28px; text-align: center; }

/* Vgate X Butonu */
.vgate-close-btn {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface2); border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 16px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, color .15s; z-index: 1;
}
.vgate-close-btn:hover { background: var(--border); color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
═══════════════════════════════════════════════════════════ */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, 1fr);
}
.bnav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--muted);
  font-size: 10px; font-weight: 500; padding: 4px 0;
  transition: color .15s;
}
.bnav-btn .icon { font-size: 20px; }
.bnav-btn.active { color: var(--navy); }
[data-theme="dark"] .bnav-btn.active { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  background: #fff url('/static/assets/ui/svg/hero-bg-desktop.svg') center top / cover no-repeat;
  color: var(--text); padding: 64px 24px 52px;
  text-align: center; position: relative; overflow: hidden;
}
@media (max-width: 700px) {
  .hero { background-image: url('/static/assets/ui/svg/hero-bg-mobile.svg'); }
}
[data-theme="dark"] .hero { background-color: var(--surface); background-blend-mode: luminosity; }
.hero-inner { max-width: 720px; margin: 0 auto; position: relative; }
.hero h1 { font-size: clamp(28px, 5vw, 46px); color: var(--text); margin-bottom: 14px; line-height: 1.18; font-weight: 800; }
.hero h1 span { color: var(--green); }
.hero p { font-size: 16px; color: var(--muted); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-search {
  display: flex; align-items: center; gap: 0; background: var(--surface); border-radius: 999px;
  overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  max-width: 600px; margin: 0 auto 24px; padding: 5px 5px 5px 0;
}
.hero-search::before {
  content: ''; width: 20px; height: 20px; flex-shrink: 0; margin: 0 4px 0 20px;
  background: var(--muted); -webkit-mask: url('/static/assets/ui/svg/icon-search.svg') center / contain no-repeat;
          mask: url('/static/assets/ui/svg/icon-search.svg') center / contain no-repeat;
}
.hero-search input {
  flex: 1; border: none; padding: 13px 12px;
  font-size: 15px; color: var(--text); outline: none;
  background: transparent; min-width: 0;
}
.hero-search button {
  background: var(--navy); border: none; color: #fff;
  padding: 12px 26px; font-weight: 700; font-size: 14px;
  white-space: nowrap; transition: background .2s, opacity .2s;
  border-radius: 999px; flex-shrink: 0;
}
.hero-search button:hover { background: var(--purple-d); }
.hero-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hero-chip {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: 20px;
  padding: 6px 14px; font-size: 12px; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.hero-chip:hover { background: var(--purple-lt); border-color: var(--navy); color: var(--navy); }

/* Trust bar */
.trust-bar {
  background: var(--surface); color: var(--text);
  padding: 12px 24px; border-bottom: 1px solid var(--border);
}
.trust-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 20px 32px; flex-wrap: wrap; row-gap: 8px;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.trust-item .t-icon { font-size: 16px; color: var(--green-d); }
.trust-dot { width: 6px; height: 6px; background: var(--border); border-radius: 50%; flex-shrink: 0; }
.kargo-bar {
  background: var(--surface2); color: var(--text);
  padding: 9px 24px; border-bottom: 1px solid var(--border);
}
.kargo-bar-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 16px 28px; flex-wrap: wrap; row-gap: 6px;
}
.kargo-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: .92; }
.kargo-item .k-icon { font-size: 14px; color: var(--navy); }
.kargo-dot { width: 4px; height: 4px; background: var(--border); border-radius: 50%; flex-shrink: 0; }
.why-us {
  background: var(--surface); padding: 40px 24px;
}
.why-us-inner {
  max-width: 1100px; margin: 0 auto;
}
.why-us h2 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 8px; text-align: center; }
.why-us h2 span { color: var(--gold); }
.why-us .sub { text-align: center; font-size: 14px; color: var(--text2); margin-bottom: 28px; }
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.why-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.why-card .w-icon { font-size: 28px; }
.why-card .w-title { font-size: 15px; font-weight: 700; color: var(--text); }
.why-card .w-desc { font-size: 13px; color: var(--text2); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════════════════ */
.main-wrap {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════
   QUICK ACTIONS
═══════════════════════════════════════════════════════════ */
.quick-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 32px auto 0; max-width: 1200px; padding: 0 24px;
  position: relative; z-index: 10; /* v2 */
}
.action-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; cursor: pointer; transition: all .22s; border: 1px solid var(--border);
}
.action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--navy); }
.action-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.action-card.video     .action-icon { background: var(--purple-lt); color: var(--navy); }
.action-card.answer    .action-icon { background: var(--green-lt);  color: var(--green-d); }
.action-card.tracking  .action-icon { background: var(--purple-lt); color: var(--navy); }
.action-card.contact   .action-icon { background: var(--green-lt);  color: var(--green-d); }
.action-card:hover.video     { border-color: var(--navy); }
.action-card:hover.answer    { border-color: var(--green); }
.action-card:hover.tracking  { border-color: var(--navy); }
.action-card:hover.contact   { border-color: var(--green); }
.action-title { font-size: 15px; font-weight: 700; color: var(--text); }
.action-desc  { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════════════ */
.sec { padding: 56px 0 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.sec-head h2 { font-size: clamp(20px, 3vw, 28px); color: var(--text); }
.sec-head h2 span { color: var(--gold); }
.see-all { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; transition: opacity .2s; }
[data-theme="dark"] .see-all { color: var(--gold); }
.see-all:hover { opacity: .7; }

/* ═══════════════════════════════════════════════════════════
   ORDER TRACKING PANEL
═══════════════════════════════════════════════════════════ */
.track-panel {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 28px; box-shadow: var(--shadow);
}
.track-form {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.track-form-group { flex: 1; min-width: 200px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: .5px; }
.form-input {
  width: 100%; background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--text);
  outline: none; transition: border-color .2s; font-family: inherit;
}
.form-input:focus { border-color: var(--navy); }
.form-input::placeholder { color: var(--muted); }
.track-btn {
  background: var(--navy); border: none; color: white;
  border-radius: 10px; padding: 13px 28px; font-size: 14px; font-weight: 700;
  transition: opacity .2s; white-space: nowrap;
}
.track-btn:hover { opacity: .87; }
.track-result {
  margin-top: 20px; padding: 20px; background: var(--surface2);
  border-radius: 10px; display: none;
}
.track-result.show { display: block; }
.track-status-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.status-badge {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
.status-badge.yeni          { background: #EBF3FF; color: #2563EB; }
.status-badge.hazirlaniyor  { background: #FEF3DC; color: #B97D0A; }
.status-badge.kargoda       { background: #E8F5EE; color: #0F9E6C; }
.status-badge.teslim_edildi { background: #E8F5EE; color: #0F9E6C; }
.status-badge.iptal         { background: #FDE8E8; color: #D94040; }
/* Progress steps */
.order-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 16px;
}
.step {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1;
}
.step-circle {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: var(--surface); font-weight: 700; flex-shrink: 0; z-index: 1;
  transition: all .3s;
}
.step.done .step-circle  { background: var(--green); border-color: var(--green); color: white; }
.step.curr .step-circle  { background: var(--navy); border-color: var(--navy); color: white; }
.step-label { font-size: 10px; color: var(--muted); text-align: center; }
.step.done .step-label, .step.curr .step-label { color: var(--text); font-weight: 600; }
.step-line { flex: 1; height: 2px; background: var(--border); margin-bottom: 18px; transition: background .3s; }
.step-line.done { background: var(--green); }

/* ═══════════════════════════════════════════════════════════
   TRACKING — PROFESSIONAL ANIMATED v3
═══════════════════════════════════════════════════════════ */

/* ── Anahtar animasyonlar ─────────────────────────────────── */
@keyframes tkFadeUp     { from {opacity:0; transform:translateY(18px);} to {opacity:1; transform:none;} }
@keyframes tkFadeIn     { from {opacity:0;} to {opacity:1;} }
@keyframes tkScaleIn    { from {opacity:0; transform:scale(.85);} to {opacity:1; transform:scale(1);} }
@keyframes tkSpin       { to { transform: rotate(360deg); } }
@keyframes tkShimmer    { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes tkPulse      {
  0%,100% { box-shadow: 0 0 0 0 rgba(107,224,164,.55); }
  50%     { box-shadow: 0 0 0 14px rgba(107,224,164,0); }
}
@keyframes tkPulseGold  {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
  50%     { box-shadow: 0 0 0 14px rgba(245,158,11,0); }
}
@keyframes tkRingPulse  {
  0%,100% { transform: scale(1); opacity:.6; }
  50%     { transform: scale(1.35); opacity:0; }
}
@keyframes tkProgressFill {
  from { width: 0; }
}
@keyframes tkProgressShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes tkTruckRoll {
  0%   { transform: translateX(-8%) translateY(0); }
  50%  { transform: translateX(0%)  translateY(-2px); }
  100% { transform: translateX(8%)  translateY(0); }
}
@keyframes tkWheel { to { transform: rotate(360deg); } }
@keyframes tkRoadDash {
  to { stroke-dashoffset: -28; }
}
@keyframes tkFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes tkConfettiFall {
  0%   { transform: translate(0,0) rotate(0); opacity:1; }
  100% { transform: translate(var(--cx, 0), 320px) rotate(720deg); opacity:0; }
}
@keyframes tkSparkle {
  0%,100% { transform: scale(0); opacity:0; }
  50%     { transform: scale(1); opacity:1; }
}
@keyframes tkParticleDrift {
  0%   { transform: translate(0,0); opacity:0; }
  20%  { opacity:.55; }
  100% { transform: translate(var(--dx, 60px), var(--dy, -80px)); opacity:0; }
}
@keyframes tkCheckIn {
  0%   { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}
@keyframes tkRotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-progress::after, .tk-stage.curr .tk-stage-icon, .tk-progress-shine,
  .tk-truck, .tk-truck .wheel, .tk-road path, .tk-hero-glow,
  .tk-hero, .tk-card, .tk-stage, .tk-particle, .tk-confetti, .tk-help-icon { animation: none !important; }
}

/* ── Empty state ──────────────────────────────────────────── */
.tk-empty {
  text-align: center; padding: 40px 18px 18px; color: var(--muted);
  animation: tkFadeUp .55s ease both;
}
.tk-empty-illustration {
  position: relative; width: 120px; height: 120px; margin: 0 auto 18px;
  animation: tkFloat 3.6s ease-in-out infinite;
}
.tk-empty-illustration svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 30px rgba(75,22,140,.22)); }
.tk-empty-illustration .spark {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  animation: tkSparkle 2.2s ease-in-out infinite;
}
.tk-empty-illustration .spark.s1 { top: 10%; right: 8%;  animation-delay:.0s; }
.tk-empty-illustration .spark.s2 { top: 30%; left:  4%;  animation-delay:.6s; background:#3FBA82; }
.tk-empty-illustration .spark.s3 { bottom: 12%; right: 22%; animation-delay:1.1s; background:#5C8AE6; }
.tk-empty h3 { font-size: 19px; color: var(--text); margin-bottom: 8px; font-weight: 700; }
.tk-empty p  { font-size: 14px; line-height: 1.65; max-width: 480px; margin: 0 auto; }
.tk-empty-tips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tk-tip {
  font-size: 12.5px; padding: 9px 16px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .25s ease;
}
.tk-tip:hover { transform: translateY(-2px); border-color: var(--gold); color: var(--text); }
.tk-tip strong { color: var(--text); }

/* ── Hero ────────────────────────────────────────────────── */
.tk-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4B168C 0%, #5B21A8 50%, #6B2CBF 100%);
  background-size: 200% 200%;
  color: white; border-radius: 20px; padding: 28px 30px;
  box-shadow: 0 18px 48px -8px rgba(75,22,140,.35), 0 4px 12px rgba(75,22,140,.18);
  animation: tkFadeUp .6s ease .05s both, tkProgressShine 14s ease-in-out infinite;
}
.tk-hero[data-stage="2"] { background-image: linear-gradient(135deg, #1F3A6F 0%, #2C5BA8 50%, #3A77D6 100%); }
.tk-hero[data-stage="3"] {
  background-image: linear-gradient(135deg, #0E6B47 0%, #128C5A 50%, #16A872 100%);
  box-shadow: 0 18px 48px -8px rgba(15,158,108,.42), 0 4px 12px rgba(15,158,108,.2);
}
.tk-hero.cancelled {
  background-image: linear-gradient(135deg, #5C2424 0%, #7A3030 50%, #963838 100%);
  box-shadow: 0 18px 48px -8px rgba(150,56,56,.35), 0 4px 12px rgba(150,56,56,.15);
}

/* Hero glow particles */
.tk-hero-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.tk-hero-glow {
  position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.22), transparent 65%);
  right: -120px; top: -140px;
  animation: tkFloat 8s ease-in-out infinite;
}
.tk-hero-glow.b {
  background: radial-gradient(circle, rgba(140,194,255,.15), transparent 65%);
  left: -120px; bottom: -160px; right:auto; top:auto;
  animation-duration: 11s; animation-delay: -3s;
}
.tk-particle {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  animation: tkParticleDrift 6s linear infinite;
}
.tk-hero-row, .tk-hero-meta, .tk-hero-msg { position: relative; z-index: 1; }
.tk-hero-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.tk-hero-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tk-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,.7);
  display: inline-flex; align-items: center; gap: 6px;
}
.tk-eyebrow::before {
  content:''; width: 18px; height: 1.5px; background: var(--gold); display:inline-block;
}
.tk-order-no {
  font-size: 26px; font-weight: 800; font-family: 'Poppins', system-ui, sans-serif;
  color: white; letter-spacing: .5px; word-break: break-all; line-height: 1.15;
}
.tk-status-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; font-size: 13px; font-weight: 700;
  backdrop-filter: blur(10px); white-space: nowrap;
  animation: tkScaleIn .5s ease .25s both;
}
.tk-status-pill .dot {
  position: relative; width: 9px; height: 9px; border-radius: 50%; background: #6BE0A4;
  animation: tkPulse 1.6s infinite;
}
.tk-status-pill svg { width: 16px; height: 16px; }
.tk-status-pill.cancelled .dot { background: #F4A4A4; animation: none; }
.tk-status-pill.delivered .dot { background: #FFE38A; animation: tkPulseGold 1.6s infinite; }
.tk-hero-meta {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px;
  font-size: 12.5px; color: rgba(255,255,255,.78);
}
.tk-hero-meta .m { display: flex; flex-direction: column; gap: 3px; animation: tkFadeUp .5s ease both; }
.tk-hero-meta .m:nth-child(1) { animation-delay:.30s; }
.tk-hero-meta .m:nth-child(2) { animation-delay:.38s; }
.tk-hero-meta .m:nth-child(3) { animation-delay:.46s; }
.tk-hero-meta .m:nth-child(4) { animation-delay:.54s; }
.tk-hero-meta .m b { color: white; font-weight: 700; font-size: 14.5px; }
.tk-hero-msg {
  margin-top: 18px; padding: 14px 16px; background: rgba(255,255,255,.10);
  border-left: 3px solid var(--gold); border-radius: 10px;
  font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.96);
  display: flex; gap: 10px; align-items: flex-start;
  animation: tkFadeUp .55s ease .55s both;
  backdrop-filter: blur(4px);
}
.tk-hero-msg .ic { font-size: 18px; line-height: 1; flex-shrink:0; margin-top:1px; }

/* ── Progress 4 stages with animated road ─────────────────── */
.tk-progress {
  margin-top: 26px; position: relative; padding: 8px 8px 4px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  animation: tkFadeUp .6s ease .15s both;
}
.tk-progress::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 32px;
  height: 4px; background: var(--border); border-radius: 4px; z-index: 0;
}
.tk-progress-fill {
  position: absolute; left: 12.5%; top: 32px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
  background-size: 200% 100%;
  z-index: 1; transition: width 1s cubic-bezier(.4,1.4,.5,1);
  animation: tkProgressShine 2.4s linear infinite;
  box-shadow: 0 0 10px rgba(245,158,11,.35);
}
.tk-stage {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center;
  animation: tkScaleIn .45s cubic-bezier(.34,1.56,.64,1) both;
}
.tk-stage:nth-child(1) { animation-delay:.20s; }
.tk-stage:nth-child(2) { animation-delay:.32s; }
.tk-stage:nth-child(3) { animation-delay:.44s; }
.tk-stage:nth-child(4) { animation-delay:.56s; }
.tk-stage-icon {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all .4s ease; color: var(--muted);
}
.tk-stage-icon svg { width: 28px; height: 28px; }
.tk-stage.done .tk-stage-icon {
  background: linear-gradient(145deg, #14B07A, #0F9E6C);
  border-color: var(--green); color: white;
}
.tk-stage.curr .tk-stage-icon {
  background: linear-gradient(145deg, #FBBF24, #F59E0B);
  border-color: var(--gold); color: var(--navy);
  box-shadow: 0 8px 22px -4px rgba(245,158,11,.55);
}
.tk-stage.curr .tk-stage-icon::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(245,158,11,.5);
  animation: tkRingPulse 1.8s ease-out infinite;
}
.tk-stage.curr .tk-stage-icon::after {
  content: ''; position: absolute; inset: -16px; border-radius: 50%;
  border: 2px solid rgba(245,158,11,.3);
  animation: tkRingPulse 1.8s ease-out .6s infinite;
}
.tk-stage-label { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.25; }
.tk-stage.done .tk-stage-label, .tk-stage.curr .tk-stage-label { color: var(--text); }
.tk-stage-time { font-size: 10.5px; color: var(--muted); margin-top: -2px; font-weight: 500; }
.tk-stage-desc {
  font-size: 11.5px; color: var(--muted); line-height: 1.4; max-width: 150px;
  display: none; margin-top: 2px;
}
.tk-stage.curr .tk-stage-desc { display: block; animation: tkFadeIn .4s ease .2s both; }

/* ── Two-column grid + cards ─────────────────────────────── */
.tk-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; margin-top: 24px;
}
.tk-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  animation: tkFadeUp .55s ease both;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tk-card.delay-1 { animation-delay:.20s; }
.tk-card.delay-2 { animation-delay:.32s; }
.tk-card.delay-3 { animation-delay:.44s; }
.tk-card-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.tk-card-head h4 {
  font-size: 13.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text);
}
.tk-card-head .tk-h-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-lt), rgba(245,158,11,.2));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.tk-card-head .tk-h-icon svg { width: 20px; height: 20px; }

/* ── Cargo card (animated truck) ─────────────────────────── */
.tk-cargo-route {
  position: relative; height: 90px; margin: 0 -8px 14px;
  background: linear-gradient(180deg, transparent 0%, transparent 60%, var(--surface2) 60%, var(--surface2) 100%);
  border-radius: 12px; overflow: hidden;
}
.tk-cargo-route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-road-line {
  fill: none; stroke: var(--border); stroke-width: 2; stroke-dasharray: 10 8;
  animation: tkRoadDash 1.4s linear infinite;
}
.tk-truck {
  position: absolute; bottom: 18px; left: 50%; width: 56px; height: 36px;
  transform: translateX(-50%); animation: tkTruckRoll 2.8s ease-in-out infinite;
}
.tk-truck svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.tk-truck .wheel { transform-origin: center; animation: tkWheel .5s linear infinite; }
.tk-cargo-pin {
  position: absolute; top: 12px; font-size: 18px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
.tk-cargo-pin.start { left: 6%; }
.tk-cargo-pin.end   { right: 6%; }

.tk-cargo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tk-cargo-logo {
  position: relative; width: 60px; height: 60px; border-radius: 14px;
  background: linear-gradient(145deg, var(--surface2), var(--surface));
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  font-size: 22px; font-weight: 800;
  color: var(--gold); letter-spacing: -.5px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.05);
}
.tk-cargo-logo[data-cc="yurtici"]  { background: linear-gradient(145deg,#1d3a8a,#142a63); color:#FFD400; }
.tk-cargo-logo[data-cc="aras"]     { background: linear-gradient(145deg,#0E5C9F,#08406F); color:#fff; }
.tk-cargo-logo[data-cc="ptt"]      { background: linear-gradient(145deg,#FFC400,#E8A800); color:#1B2E5B; }
.tk-cargo-logo[data-cc="mng"]      { background: linear-gradient(145deg,#E63534,#B92423); color:#fff; }
.tk-cargo-logo[data-cc="surat"]    { background: linear-gradient(145deg,#0E9F65,#087046); color:#fff; }
.tk-cargo-logo[data-cc="hepsijet"] { background: linear-gradient(145deg,#FF6000,#D44E00); color:#fff; }

.tk-cargo-info { flex: 1; min-width: 0; }
.tk-cargo-name { font-size: 16px; font-weight: 800; color: var(--text); }
.tk-cargo-sub  { font-size: 12px; color: var(--muted); margin-top: 3px;
  display: inline-flex; align-items: center; gap: 5px; }
.tk-cargo-sub::before {
  content:''; width: 6px; height: 6px; background: var(--green);
  border-radius: 50%; box-shadow: 0 0 0 0 rgba(15,158,108,.5);
  animation: tkPulse 1.8s infinite;
}
.tk-tracking-no {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--surface2), var(--gold-lt));
  border: 1px dashed var(--gold); border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14.5px; font-weight: 700; color: var(--text); word-break: break-all;
  letter-spacing: .5px;
}
.tk-copy-btn {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700;
  color: var(--muted); cursor: pointer; transition: all .2s ease;
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.tk-copy-btn svg { width: 13px; height: 13px; }
.tk-copy-btn:hover { background: var(--navy); color: white; border-color: var(--navy); transform: translateY(-1px); }
.tk-copy-btn.ok    { background: var(--green); color: white; border-color: var(--green); }
.tk-cargo-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 16px; padding: 14px 18px;
  background: linear-gradient(135deg, var(--navy), #2C4A91);
  color: white; border: none;
  border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .25s ease; text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 18px -6px rgba(75,22,140,.45);
}
.tk-cargo-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .65s ease;
}
.tk-cargo-cta:hover::before { transform: translateX(100%); }
.tk-cargo-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(75,22,140,.6); }
.tk-cargo-cta svg { width: 16px; height: 16px; }
.tk-cargo-empty {
  text-align: center; padding: 24px 12px; color: var(--muted);
  font-size: 13.5px; line-height: 1.6;
}
.tk-cargo-empty .ic {
  font-size: 40px; display: block; margin-bottom: 10px; opacity: .55;
  animation: tkFloat 3s ease-in-out infinite;
}

/* ── Timeline ─────────────────────────────────────────────── */
.tk-timeline { position: relative; padding-left: 4px; }
.tk-tl-item {
  position: relative; padding: 8px 0 22px 30px;
  border-left: 2px solid var(--border); margin-left: 8px;
  animation: tkFadeUp .4s ease both;
}
.tk-tl-item:nth-child(1) { animation-delay:.30s; }
.tk-tl-item:nth-child(2) { animation-delay:.40s; }
.tk-tl-item:nth-child(3) { animation-delay:.50s; }
.tk-tl-item:nth-child(4) { animation-delay:.60s; }
.tk-tl-item:nth-child(5) { animation-delay:.70s; }
.tk-tl-item:last-child { border-left-color: transparent; padding-bottom: 4px; }
.tk-tl-item::before {
  content: ''; position: absolute; left: -8px; top: 10px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--border);
  transition: all .3s;
}
.tk-tl-item.done::before {
  background: linear-gradient(145deg, #14B07A, #0F9E6C);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15,158,108,.18);
}
.tk-tl-item.curr::before {
  background: linear-gradient(145deg, #FBBF24, #F59E0B);
  border-color: var(--gold);
  animation: tkPulseGold 1.6s infinite;
}
.tk-tl-status { font-size: 14.5px; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px; }
.tk-tl-status svg { width: 14px; height: 14px; color: var(--muted); }
.tk-tl-time   { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tk-tl-note   {
  font-size: 13px; color: var(--text); margin-top: 8px; padding: 9px 12px;
  background: var(--surface2); border-radius: 10px; line-height: 1.5;
  border-left: 2px solid var(--gold);
}

/* ── Items ───────────────────────────────────────────────── */
.tk-items { display: flex; flex-direction: column; gap: 11px; }
.tk-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--surface2), var(--surface));
  border-radius: 12px; border: 1px solid var(--border);
  transition: all .25s ease;
  animation: tkFadeUp .4s ease both;
}
.tk-item:hover { border-color: var(--gold); transform: translateX(4px); }
.tk-item-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(145deg, var(--gold-lt), var(--surface));
  border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: var(--gold);
}
.tk-item-thumb svg { width: 22px; height: 22px; }
.tk-item-info { flex: 1; min-width: 0; }
.tk-item-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-item-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.tk-item-price { font-size: 14px; font-weight: 800; color: var(--navy); flex-shrink: 0; }
[data-theme="dark"] .tk-item-price { color: var(--gold); }
.tk-summary {
  margin-top: 16px; padding: 14px 16px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 7px; font-size: 13px;
}
.tk-summary .row { display: flex; justify-content: space-between; color: var(--muted); }
.tk-summary .row b { font-weight: 600; color: var(--text); }
.tk-summary .row.total {
  color: var(--text); font-weight: 800; font-size: 16px;
  padding-top: 8px; border-top: 1px solid var(--border); margin-top: 5px;
}
.tk-summary .row.total span:last-child {
  background: linear-gradient(135deg, var(--navy), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Help block ───────────────────────────────────────────── */
.tk-help {
  margin-top: 22px; padding: 22px 24px;
  background: linear-gradient(135deg, var(--gold-lt) 0%, var(--surface) 100%);
  border: 1px solid var(--gold); border-radius: 16px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  animation: tkFadeUp .55s ease .65s both;
}
.tk-help::before {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.18), transparent 70%);
}
.tk-help-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(145deg, var(--gold), #B97D0A);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
  box-shadow: 0 8px 18px -4px rgba(245,158,11,.5);
  animation: tkFloat 3s ease-in-out infinite;
}
.tk-help-icon svg { width: 26px; height: 26px; }
.tk-help-text { flex: 1; min-width: 200px; position: relative; z-index: 1; }
.tk-help-text h5 { font-size: 15px; font-weight: 800; color: var(--text); }
.tk-help-text p  { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.55; }
.tk-help-cta {
  background: linear-gradient(135deg, var(--navy), #2C4A91);
  color: white; border: none; padding: 12px 20px;
  border-radius: 12px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: all .25s ease;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 16px -4px rgba(75,22,140,.4);
  position: relative; z-index: 1;
}
.tk-help-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -4px rgba(75,22,140,.55); }
.tk-help-cta svg { width: 14px; height: 14px; }

/* ── Skeleton ─────────────────────────────────────────────── */
.tk-skel {
  background: linear-gradient(90deg, var(--surface2) 0%, var(--border) 50%, var(--surface2) 100%);
  background-size: 200% 100%; animation: tkShimmer 1.4s infinite;
  border-radius: 12px;
}
.tk-skel-hero  { height: 200px; }
.tk-skel-card  { height: 240px; margin-top: 22px; }

/* ── Error state ──────────────────────────────────────────── */
.tk-error {
  text-align: center; padding: 48px 20px; color: var(--muted);
  animation: tkFadeUp .55s ease both;
}
.tk-error .ic-wrap {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%; background: linear-gradient(145deg, #FDE8E8, #F9DADA);
  display: flex; align-items: center; justify-content: center;
  color: var(--red); animation: tkFloat 3.4s ease-in-out infinite;
}
.tk-error .ic-wrap svg { width: 48px; height: 48px; }
.tk-error h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; font-weight: 700; }
.tk-error p  { font-size: 14px; line-height: 1.65; max-width: 440px; margin: 0 auto; }
.tk-error-cta {
  margin-top: 22px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 10px 18px; border-radius: 10px; font-weight: 600;
  font-size: 13px; cursor: pointer; transition: all .2s;
}
.tk-error-cta:hover { background: var(--navy); color: white; border-color: var(--navy); }

/* ── Confetti (delivered celebration) ────────────────────── */
.tk-confetti-host {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden;
}
.tk-confetti {
  position: absolute; top: 0; width: 8px; height: 14px;
  border-radius: 2px;
  animation: tkConfettiFall 2.8s ease-in forwards;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .tk-grid { grid-template-columns: 1fr; }
  .tk-hero { padding: 22px 20px; }
  .tk-order-no { font-size: 21px; }
  .tk-progress { padding: 4px 0; }
  .tk-stage-icon { width: 50px; height: 50px; }
  .tk-stage-icon svg { width: 22px; height: 22px; }
  .tk-progress::before, .tk-progress-fill { top: 25px; }
  .tk-stage-label { font-size: 11.5px; }
  .tk-stage-desc  { display: none !important; }
  .tk-cargo-route { height: 80px; }
  .tk-help { padding: 18px 20px; }
  .tk-help-icon { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  .tk-stage-icon { width: 44px; height: 44px; }
  .tk-stage-icon svg { width: 18px; height: 18px; }
  .tk-progress::before, .tk-progress-fill { top: 22px; }
  .tk-hero-meta { gap: 18px; }
  .tk-tracking-no { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.faq-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.faq-cat-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  transition: all .15s; cursor: pointer;
}
.faq-cat-btn.active, .faq-cat-btn:hover {
  background: var(--navy); border-color: var(--navy); color: white;
}
[data-theme="dark"] .faq-cat-btn.active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.faq-cat-btn.ozgun { background: rgba(245,158,11,.12); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.faq-cat-btn.ozgun.active, .faq-cat-btn.ozgun:hover { background: var(--gold); border-color: var(--gold); color: white; }
/* Video sayfası — sol kategori menüsü (referans 2) */
.vlayout { display: grid; grid-template-columns: 244px 1fr; gap: 24px; align-items: start; }
.vsidebar { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 12px; box-shadow: var(--shadow); }
.vsidebar-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 2px 8px 10px; }
.vside-cats { display: flex; flex-direction: column; gap: 4px; }
.vside-cats .faq-cat-btn { width: 100%; text-align: left; border-radius: 10px; }
.vside-help { margin-top: 14px; background: var(--purple-lt); border: 1px solid #E6DBF7; border-radius: var(--radius); padding: 13px; display: flex; gap: 11px; align-items: flex-start; cursor: pointer; transition: box-shadow .15s; }
.vside-help:hover { box-shadow: var(--shadow); }
.vside-help-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vside-help b { display: block; font-size: 13px; color: var(--text); }
.vside-help span { font-size: 12px; color: var(--muted); line-height: 1.4; }
@media (max-width: 880px) {
  .vlayout { grid-template-columns: 1fr; gap: 16px; }
  .vsidebar { position: static; padding: 12px; }
  .vside-cats { flex-direction: row; overflow-x: auto; gap: 7px; padding-bottom: 4px; }
  .vside-cats .faq-cat-btn { width: auto; white-space: nowrap; flex-shrink: 0; }
  .vside-help { display: none; }
}
/* Kademeli video filtresi */
.vfilter { padding: 0; margin-bottom: 12px; }
.vfilter-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.vfilter-row + .vfilter-row { border-top: 1px dashed var(--border); }
.vfilter-label { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 64px; padding-top: 8px; letter-spacing: .3px; flex-shrink: 0; }
.vfilter-btns { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.vf-clear { margin-top: 12px; padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: all .15s; }
.vf-clear:hover { border-color: #d9342b; color: #d9342b; background: rgba(217,52,43,.06); }
@media (max-width: 600px) {
  .vfilter { padding: 12px; }
  .vfilter-row { flex-direction: column; align-items: stretch; gap: 7px; }
  .vfilter-label { min-width: 0; padding-top: 0; }
  .vfilter-btns { gap: 7px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .vfilter-btns::-webkit-scrollbar { display: none; }
  .vfilter-btns .faq-cat-btn { white-space: nowrap; flex-shrink: 0; padding: 7px 14px; }
}
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color .2s;
}
.faq-item:hover { border-color: var(--gold); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: none; border: none; color: var(--text);
  font-size: 14px; font-weight: 600; text-align: left; gap: 12px; cursor: pointer;
  transition: background .15s;
}
.faq-q:hover { background: var(--surface2); }
.faq-arrow { font-size: 12px; color: var(--muted); flex-shrink: 0; transition: transform .25s; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a {
  padding: 0 20px; max-height: 0; overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  font-size: 14px; color: var(--muted); line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 300px; padding: 0 20px 18px; }

/* ═══════════════════════════════════════════════════════════
   PRODUCTS CAROUSEL
═══════════════════════════════════════════════════════════ */
.products-scroll {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.products-scroll::-webkit-scrollbar { display: none; }
.prod-card {
  flex-shrink: 0; width: 180px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; scroll-snap-align: start;
  transition: all .2s;
}
.prod-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(245,158,11,.2); transform: translateY(-2px); }
.prod-img {
  width: 100%; aspect-ratio: 3/4; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; overflow: hidden;
}
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-info { padding: 12px; }
.prod-name { font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.prod-author { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.prod-price { font-size: 15px; font-weight: 700; color: var(--navy); }
[data-theme="dark"] .prod-price { color: var(--gold); }
.prod-stock { font-size: 10px; color: var(--green); margin-top: 2px; }
.prod-add-btn {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  background: var(--navy); border: none; border-radius: 7px;
  color: white; font-size: 12px; font-weight: 600; transition: opacity .2s;
  text-align: center; text-decoration: none; box-sizing: border-box; cursor: pointer;
}
.prod-add-btn:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════
   VIDEO GRID
═══════════════════════════════════════════════════════════ */
.video-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%),1fr)); gap: 16px;
}
/* Mobil taşma fix'i: grid/flex öğeleri içerik (480px YouTube kapağı) yüzünden şişmesin */
.video-grid > *, .vmain, .vsidebar, .video-card { min-width: 0; }
.video-thumb img { max-width: 100%; min-width: 0; }
.video-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: all .2s;
}
.video-card:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow); }
.video-thumb {
  width: 100%; aspect-ratio: 16/9; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.video-card:hover .video-play-overlay { opacity: 1; }
.play-circle {
  width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; padding-left: 3px; box-shadow: 0 6px 18px rgba(91,33,182,.4);
}
.video-info { padding: 12px; }
.video-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; }
.video-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 10px; padding: 3px 8px; border-radius: 10px;
  background: var(--surface2); color: var(--muted); font-weight: 500;
}
.badge.cat { background: rgba(75,22,140,.1); color: var(--navy); }
[data-theme="dark"] .badge.cat { background: rgba(245,158,11,.15); color: var(--gold); }
.badge.green { background: rgba(15,158,108,.12); color: var(--green); }

/* ═══════════════════════════════════════════════════════════
   OCR / FOTOĞRAF YÜKLEME
═══════════════════════════════════════════════════════════ */
.ocr-section {
  background: linear-gradient(135deg, var(--navy) 0%, #2A3F7A 100%);
  border-radius: 16px; padding: 32px; color: white;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.ocr-text { flex: 1; min-width: 200px; }
.ocr-text h3 { font-size: 22px; color: white; margin-bottom: 8px; }
.ocr-text p  { font-size: 14px; opacity: .8; line-height: 1.6; }
.ocr-upload {
  flex: 1; min-width: 240px;
  border: 2px dashed rgba(255,255,255,.3); border-radius: 12px;
  padding: 24px; text-align: center; cursor: pointer;
  transition: all .2s;
}
.ocr-upload:hover, .ocr-upload.drag {
  border-color: var(--gold); background: rgba(255,255,255,.07);
}
.ocr-upload-icon { font-size: 36px; margin-bottom: 8px; }
.ocr-upload p { font-size: 13px; opacity: .8; }
.ocr-upload small { font-size: 11px; opacity: .55; }
.ocr-result {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-top: 16px; display: none;
}
.ocr-result.show { display: block; }
.ocr-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ocr-tag { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.ocr-tag.sinav { background: rgba(75,22,140,.12); color: var(--navy); }
[data-theme="dark"] .ocr-tag.sinav { background: rgba(245,158,11,.15); color: var(--gold); }
.ocr-tag.ders  { background: rgba(15,158,108,.12); color: var(--green); }
.ocr-tag.soru  { background: rgba(217,64,64,.1);   color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; text-align: center;
  transition: all .2s; cursor: pointer;
}
.contact-card:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-2px); }
.contact-icon { font-size: 32px; margin-bottom: 12px; }
.contact-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.contact-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }
.contact-time  { font-size: 11px; color: var(--green); font-weight: 600; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════
   CHAT WIDGET (FLOATING)
═══════════════════════════════════════════════════════════ */
.chat-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--navy); border: none; color: white;
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(75,22,140,.4), 0 0 0 3px rgba(245,158,11,.45);
  transition: all .3s; display: flex; align-items: center; justify-content: center;
}
.chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(75,22,140,.5), 0 0 0 4px var(--gold); }
.chat-fab .notif-dot {
  position: absolute; top: 6px; right: 6px; width: 10px; height: 10px;
  background: var(--red); border-radius: 50%; border: 2px solid white;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.9)} }

/* Chat panel */
.chat-panel {
  position: fixed; bottom: 92px; right: 24px; z-index: 300;
  width: 360px; max-height: calc(100vh - 120px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(.95); opacity: 0;
  pointer-events: none; transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.chat-panel.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: all;
}
.chat-head {
  padding: 16px 20px; border-bottom: 2px solid var(--gold);
  display: flex; align-items: center; gap: 12px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, var(--navy), #2A3F7A); color: white;
}
.chat-head-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: 21px;
  color: var(--navy); flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}
.chat-head-info h4 { font-size: 16px; font-weight: 700; font-family: 'Poppins', system-ui, sans-serif; letter-spacing: .2px; }
.chat-head-info p  { font-size: 11px; opacity: .75; }
.online-dot-sm { width: 8px; height: 8px; background: var(--green); border-radius: 50%; display: inline-block; margin-right: 4px; animation: pulse 2s infinite; }
.chat-close { margin-left: auto; background: rgba(255,255,255,.15); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.chat-close:hover { background: rgba(255,255,255,.25); }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 200px; max-height: 380px;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.cmsg { max-width: 82%; animation: cmsgIn .28s cubic-bezier(.34,1.2,.64,1) both; }
.cmsg.user { align-self: flex-end; }
.cmsg.bot  { align-self: flex-start; }
@keyframes cmsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cmsg-bubble {
  padding: 11px 15px; border-radius: 16px;
  font-size: 13px; line-height: 1.55;
}
.cmsg.user .cmsg-bubble { background: var(--navy); color: white; border-bottom-right-radius: 5px; }
.cmsg.bot  .cmsg-bubble {
  background: var(--gold-lt); color: var(--text);
  border-left: 3px solid var(--gold); border-bottom-left-radius: 5px;
}
.cmsg-time { font-size: 10px; color: var(--muted); margin-top: 3px; }
.cmsg.user .cmsg-time { text-align: right; }
.chat-typing {
  display: none; align-self: flex-start;
  background: var(--surface2); border-radius: 14px 14px 14px 4px;
  padding: 10px 14px; gap: 4px; align-items: center;
}
.chat-typing span {
  width: 6px; height: 6px; background: var(--muted); border-radius: 50%;
  animation: dots 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-input-row {
  padding: 12px 16px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; align-items: flex-end;
}
.chat-photo-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-top: 1px solid var(--border);
  background: var(--surface2);
}
.chat-photo-preview .pp-thumb {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border);
}
.chat-photo-preview .pp-info {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-photo-preview .pp-info small { color: var(--muted); display: block; }
.chat-photo-preview .pp-x {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); cursor: pointer;
  font-size: 14px; color: var(--muted); flex-shrink: 0;
}
.chat-photo-preview .pp-x:hover { color: var(--red); border-color: var(--red); }
.chat-intent-chips {
  display: flex; gap: 6px; padding: 0 16px 8px; flex-wrap: wrap;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.chat-intent-chips button {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 5px 11px; font-size: 12px; color: var(--text); cursor: pointer;
  transition: all .15s;
}
.chat-intent-chips button:hover { border-color: var(--gold); color: var(--navy); background: var(--gold-lt); }
.chat-img-label {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; flex-shrink: 0; transition: all .2s;
}
.chat-img-label:hover { border-color: var(--navy); }
/* Fotoğraf menüsü */
.chat-media-wrap { position: relative; flex-shrink: 0; }
.chat-media-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15); overflow: hidden;
  min-width: 160px; z-index: 50;
  opacity: 0; transform: translateY(6px) scale(.97);
  pointer-events: none; transition: opacity .15s, transform .15s;
}
.chat-media-menu.open {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: all;
}
.chat-media-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 16px; background: none; border: none;
  font-size: 14px; color: var(--text); cursor: pointer; text-align: left;
  transition: background .15s;
}
.chat-media-menu button:hover { background: var(--surface2); }
.chat-media-menu button span.ico { font-size: 18px; }
.chat-textarea {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 18px; padding: 9px 14px; font-size: 13px; color: var(--text);
  font-family: inherit; outline: none; resize: none; max-height: 80px;
  transition: border-color .2s;
}
.chat-textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.chat-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); border: none; color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s, transform .15s;
}
.chat-send:hover { background: var(--gold); transform: scale(1.05); }
.chat-send svg { width: 15px; height: 15px; fill: white; transition: fill .2s; }
.chat-send:hover svg { fill: var(--navy); }
/* Mobil: alttan tam-genişlik bottom-sheet */
@media (max-width: 480px) {
  .chat-panel {
    right: 0; left: 0; bottom: 0; width: 100%;
    max-height: 88vh; border-radius: 18px 18px 0 0;
  }
  .chat-messages { max-height: none; }
  .chat-fab { bottom: 18px; right: 18px; }
}

/* ─── Chat views (intake / main / feedback) ─── */
.chat-view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.chat-view.active { display: flex; }
.intake-form { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.intake-form h3 { margin: 0 0 4px; font-size: 16px; color: var(--text); }
.intake-form p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.intake-form label { font-size: 12px; color: var(--muted); margin-bottom: -6px; }
.intake-form input {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 14px; background: var(--surface);
}
.intake-form input:focus { border-color: var(--navy); outline: none; }
.intake-form .req::after { content: ' *'; color: #d33; }
.intake-form label .opt { font-weight: 400; opacity: .75; font-size: 11px; }
.intake-form button {
  margin-top: 8px; padding: 11px; border: 0; border-radius: 10px;
  background: var(--navy); color: white; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.intake-form button:hover { opacity: .9; }
.intake-form button:disabled { opacity: .55; cursor: not-allowed; }
.intake-err { color: #d33; font-size: 12px; min-height: 16px; margin-top: 2px; }
.intake-foot { font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.5; }
.intake-foot a { color: var(--navy); text-decoration: underline; }

/* Idle warning toast */
.idle-warn {
  position: absolute; bottom: 70px; left: 12px; right: 12px;
  background: #fff3cd; color: #856404; padding: 10px 12px;
  border-radius: 10px; font-size: 13px; text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); display: none; z-index: 5;
  border: 1px solid #ffeeba;
}
.idle-warn.show { display: block; animation: idleSlide .25s ease-out; }
@keyframes idleSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Feedback view */
.fb-wrap { padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fb-wrap h3 { margin: 0; font-size: 17px; color: var(--text); text-align: center; }
.fb-wrap > p { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.fb-stars { display: flex; gap: 8px; justify-content: center; font-size: 42px; margin: 8px 0; user-select: none; }
.fb-star { cursor: pointer; color: #ddd; transition: color .2s, transform .2s; line-height: 1; }
.fb-star.fill { color: #fbbf24; animation: starPop .45s ease-out; }
@keyframes starPop {
  0%   { transform: scale(.4) rotate(-25deg); color: #ffe066; text-shadow: 0 0 0 #fbbf24; }
  45%  { transform: scale(1.55) rotate(12deg); color: #f59e0b; text-shadow: 0 0 16px #fbbf24, 0 0 28px rgba(251,191,36,.6); }
  75%  { transform: scale(.92) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); color: #fbbf24; }
}
.fb-rating-text { text-align: center; min-height: 18px; font-size: 13px; color: var(--muted); }
.fb-comment {
  width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  resize: vertical; min-height: 70px; font: inherit; font-size: 14px;
  background: var(--surface); box-sizing: border-box;
}
.fb-comment:focus { border-color: var(--navy); outline: none; }
.fb-actions { display: flex; gap: 8px; }
.fb-actions button {
  flex: 1; padding: 11px; border: 0; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fb-skip   { background: #eee; color: #444; }
.fb-submit { background: var(--navy); color: white; }
.fb-submit:disabled { opacity: .55; cursor: not-allowed; }
.fb-thanks { text-align: center; padding: 30px 18px; }
.fb-thanks .check { font-size: 64px; animation: checkPop .5s ease-out; }
@keyframes checkPop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(15deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Chat video/file buttons */
.chat-attachments { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.chat-att-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 12px; font-size: 12px; font-family: inherit;
  text-align: left; line-height: 1.4; cursor: pointer; transition: border-color .15s;
}
.chat-att-btn:hover { border-color: var(--navy); }
.chat-att-link {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 12px; font-size: 12px; text-decoration: none;
  transition: border-color .15s;
}
.chat-att-link:hover { border-color: var(--green); }
.chat-live-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(15,158,108,.1); border: 1px solid var(--green);
  border-radius: 8px; color: var(--green); padding: 7px 12px;
  font-size: 12px; font-weight: 600; text-decoration: none; margin-top: 6px;
}
/* Canlı desteğe bağlan butonu */
.chat-connect-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--navy); border: none; border-radius: 8px; color: #fff;
  padding: 8px 14px; font-size: 12px; font-weight: 700; margin-top: 6px;
}
.chat-connect-btn:hover { filter: brightness(1.08); }
.chat-connect-btn:disabled { opacity: .55; cursor: default; }
/* Temsilci mesaj baloncuğu (bottan görsel olarak ayrışsın) */
.cmsg.agent { align-self: flex-start; }
.cmsg.agent .cmsg-bubble {
  background: rgba(15,158,108,.12); border: 1px solid rgba(15,158,108,.45);
  border-bottom-left-radius: 4px;
}
.cmsg.agent .cmsg-who {
  font-size: 11px; font-weight: 700; color: var(--green); margin-bottom: 3px;
  display: flex; align-items: center; gap: 4px;
}
/* Sistem / sıra bilgisi notu (ortada, soluk) */
.cmsg.sys { align-self: center; max-width: 92%; }
.cmsg.sys .cmsg-bubble {
  background: rgba(10,94,149,.08); border: 1px dashed rgba(10,94,149,.3);
  color: var(--text2, #5a6b7b); font-size: 12px; text-align: center; font-style: italic;
}
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chat-chip {
  background: rgba(10,94,149,.12); border: 1px solid rgba(10,94,149,.35);
  border-radius: 20px; color: var(--navy-light, #60aadd); padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.chat-chip:hover { background: rgba(10,94,149,.25); border-color: var(--navy); }
.chat-chip-more { background: transparent; border-style: dashed; opacity: .85; }
.chat-chip-more:hover { background: rgba(10,94,149,.08); border-style: solid; opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   VIDEO GATE
═══════════════════════════════════════════════════════════ */
.vgate-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 450;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.vgate-overlay.active { display: flex; }
.vgate-box {
  background: var(--surface); border-radius: 20px;
  padding: 36px 32px; max-width: 440px; width: 100%;
  text-align: center; box-shadow: var(--shadow-lg);
}
.vgate-icon { font-size: 40px; margin-bottom: 16px; }
.vgate-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.vgate-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 0; }
.vgate-hint {
  font-size: 28px; font-weight: 800; letter-spacing: 2px;
  color: var(--navy); background: var(--surface2);
  border-radius: 12px; padding: 12px 20px; margin: 12px 0;
}
[data-theme="dark"] .vgate-hint { color: var(--gold); }
.vgate-input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 14px; background: var(--surface2);
  color: var(--text); margin-top: 16px; box-sizing: border-box;
  transition: border-color .2s;
}
.vgate-input:focus { outline: none; border-color: var(--navy); }
.vgate-err { min-height: 20px; font-size: 13px; color: var(--red); margin: 6px 0 0; }
.vgate-btn {
  width: 100%; padding: 13px; background: var(--navy); color: white;
  border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
  cursor: pointer; margin-top: 14px; transition: opacity .2s;
}
.vgate-btn:hover { opacity: .88; }
.vgate-btn:disabled { opacity: .5; cursor: default; }
.vgate-back {
  background: none; border: none; color: var(--muted); font-size: 13px;
  cursor: pointer; margin-top: 10px; text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO PLAYER MODAL
═══════════════════════════════════════════════════════════ */
.player-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 500;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.player-overlay.active { display: flex; }
.player-box {
  background: var(--surface); border-radius: 16px;
  width: 100%; max-width: 900px; padding: 16px; box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.player-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px;
}
.player-title { font-size: 14px; font-weight: 600; flex: 1; line-height: 1.4; }
.player-close {
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .2s;
}
.player-close:hover { border-color: var(--red); color: var(--red); }
.player-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
#playerTimestamps { margin-top: 12px; }
.pts-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.pts-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.pts-scroll::-webkit-scrollbar { height: 4px; }
.pts-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.pts-btn {
  flex-shrink: 0; min-width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 10px; transition: all .15s; line-height: 1.2;
}
.pts-btn:hover, .pts-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme="dark"] .pts-btn:hover, [data-theme="dark"] .pts-btn.active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.pts-btn .pts-time { font-size: 10px; font-weight: 400; opacity: .7; }

/* ═══════════════════════════════════════════════════════════
   CART MODAL
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 400;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--surface); border-radius: 16px; width: 100%; max-width: 480px;
  max-height: 80vh; overflow-y: auto; padding: 24px; box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.modal-head h2 { font-size: 20px; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 22px; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background: var(--navy); color: rgba(255,255,255,.75);
  padding: 48px 24px 24px; margin-top: 72px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.footer-brand .logo-text { color: white; font-size: 20px; }
.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 10px; max-width: 280px; }
.footer-col h4 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 14px; }
.footer-col a {
  display: block; font-size: 13px; color: rgba(255,255,255,.65);
  margin-bottom: 8px; transition: color .15s; cursor: pointer;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,.4);
}
.footer-socials { display: flex; gap: 12px; }
.footer-social {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.1); display: flex; align-items: center;
  justify-content: center; font-size: 15px; cursor: pointer; transition: background .2s;
}
.footer-social:hover { background: rgba(245,158,11,.3); }

/* ═══════════════════════════════════════════════════════════
   LOADING & EMPTY
═══════════════════════════════════════════════════════════ */
.loading { display: flex; justify-content: center; padding: 40px; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty p { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤900px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .contact-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 28px; }
  .header-search { display: none; }
  nav.main-nav   { display: none; }
  .hamburger     { display: flex; }
  .chat-panel    { width: calc(100vw - 32px); right: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤600px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .hero { padding: 36px 16px 60px; }
  .quick-actions { grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 16px; margin-top: 20px; }
  .action-card { padding: 18px 12px; }
  .action-icon { width: 44px; height: 44px; font-size: 22px; }
  .action-title { font-size: 13px; }
  .action-desc  { display: none; }
  .main-wrap { padding: 0 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand { display: none; }
  .chat-fab { bottom: 80px; right: 16px; }
  .bottom-nav { display: grid; }
  .ocr-section { flex-direction: column; gap: 20px; padding: 24px 16px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-search { flex-direction: column; border-radius: 12px; }
  .hero-search input  { border-radius: 12px 12px 0 0; }
  .hero-search button { border-radius: 0 0 12px 12px; }
  .header-inner { padding: 0 16px; }
}
/* ── TANITIM TURU STİLLERİ ── */
.tour-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000; display: none; backdrop-filter: blur(2px); }
.tour-popover { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; width: 280px; z-index: 2001; box-shadow: 0 20px 40px rgba(0,0,0,0.4); display: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.tour-popover h3 { margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--accent); }
.tour-popover p { font-size: 13px; line-height: 1.5; color: var(--text2); margin-bottom: 16px; }
.tour-btns { display: flex; justify-content: space-between; gap: 8px; }
.tour-btn { padding: 8px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; border: none; font-weight: 600; }
.tour-btn-next { background: #6366f1 !important; color: #ffffff !important; flex: 1; border: none; font-weight: bold; padding: 10px 16px; }
.tour-btn-skip { background: var(--glass); color: var(--text3); }
.tour-highlight { position: relative; z-index: 2001 !important; pointer-events: none; box-shadow: 0 0 0 1000vh rgba(0,0,0,0.7), 0 0 15px var(--accent) !important; border-radius: 8px; }


/* ── VIDEO GATE STİLLERİ ── */
.vgate-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; transition: all 0.3s; }
.vgate-overlay.active { display: flex; animation: fadeIn 0.3s ease; }
.vgate-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 40px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.5); transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.vgate-overlay.active .vgate-modal { transform: translateY(0); }
.vgate-modal h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.vgate-modal p { font-size: 14px; color: var(--text3); margin-bottom: 24px; line-height: 1.5; }
.vgate-hint { background: var(--glass); padding: 16px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 20px; letter-spacing: 3px; margin-bottom: 20px; color: var(--accent); border: 1px dashed var(--border); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* ── PROFESYONEL VIDEO GATE STİLLERİ ── */
.vgate-overlay { position: fixed; inset: 0; background: rgba(10, 14, 26, 0.8); backdrop-filter: blur(12px); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.vgate-overlay.active { display: flex; animation: vgateFadeIn 0.4s ease; }
.vgate-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 48px 32px; width: 100%; max-width: 440px; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,0.6); transform: scale(0.95) translateY(20px); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
.vgate-overlay.active .vgate-modal { transform: scale(1) translateY(0); }
.vgate-icon { width: 72px; height: 72px; background: linear-gradient(135deg, #6366f1, #06b6d4); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; margin: 0 auto 24px; box-shadow: 0 12px 24px rgba(99, 102, 241, 0.3); }
.vgate-modal h3 { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 12px; letter-spacing: -0.5px; }
.vgate-modal p { font-size: 15px; color: var(--text2); margin-bottom: 32px; line-height: 1.6; }
.vgate-input-group { text-align: left; margin-bottom: 24px; }
.vgate-input-group label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-bottom: 8px; margin-left: 4px; }
.vgate-input { width: 100%; background: var(--glass); border: 1.5px solid var(--border); border-radius: 14px; padding: 16px; color: var(--text); font-size: 16px; transition: all 0.3s; outline: none; }
.vgate-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
.vgate-hint-box { background: rgba(99, 102, 241, 0.05); border: 1px dashed var(--accent); border-radius: 14px; padding: 16px; margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vgate-hint-label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.vgate-hint-text { font-family: 'JetBrains Mono', monospace; font-size: 20px; letter-spacing: 3px; color: var(--text); font-weight: 700; }
.vgate-btn-main { background-color: #6366f1 !important; color: #ffffff !important; background: #6366f1 !important; color: #ffffff !important; width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 14px; padding: 18px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2); }
.vgate-btn-main:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(99, 102, 241, 0.3); background: var(--accent2); }
.vgate-btn-main:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.vgate-btn-back { background: none; border: none; color: var(--text3); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 16px; transition: color 0.3s; }
.vgate-btn-back:hover { color: var(--text); }
@keyframes vgateFadeIn { from { opacity: 0; } to { opacity: 1; } }


/* Visual refresh: generated hero image + SVG icon system */
.ui-icon{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-tile{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-tile .ui-icon{width:21px;height:21px}
.header-search .search-icon{width:16px;height:16px;font-size:0}.nav-btn,.drawer-nav-btn,.bnav-btn{display:inline-flex;align-items:center;gap:7px}.nav-btn .ui-icon,.drawer-nav-btn .ui-icon{width:17px;height:17px}.drawer-nav-btn .icon{width:28px;color:var(--navy);display:inline-flex;justify-content:center}[data-theme="dark"] .drawer-nav-btn .icon{color:var(--gold)}.bnav-btn .icon{height:20px;display:inline-flex;align-items:center}.bnav-btn .ui-icon{width:19px;height:19px}
.hero{background:#fff url('/static/assets/ui/svg/hero-bg-desktop.svg') center top/cover no-repeat;padding:72px 24px 64px;min-height:420px;text-align:center;display:flex;align-items:center}.hero::before{display:none}.hero::after{display:none}.hero-inner{width:100%;max-width:780px;margin:0 auto;z-index:1}.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.1;margin:0 auto 16px;letter-spacing:-.01em}.hero p{font-size:clamp(16px,1.6vw,18px);color:var(--muted);max-width:600px;margin:0 auto 30px;line-height:1.65}.hero-search{max-width:600px;margin:0 auto 24px}.hero-chips{justify-content:center;max-width:680px;margin:0 auto}.hero-chip{display:inline-flex;align-items:center;gap:7px}.hero-chip .ui-icon{width:14px;height:14px;color:var(--navy)}
.trust-item .t-icon,.kargo-item .k-icon{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}.trust-item .t-icon{background:var(--green-lt);color:var(--green-d)}.kargo-item .k-icon{background:var(--purple-lt);color:var(--navy)}.trust-item .t-icon .ui-icon,.kargo-item .k-icon .ui-icon{width:15px;height:15px}
.action-icon{color:var(--navy);font-size:0}.action-icon .ui-icon{width:28px;height:28px;stroke-width:1.8}
.why-card{gap:10px;transition:transform .2s,border-color .2s,box-shadow .2s}.why-card:hover{transform:translateY(-2px);border-color:rgba(107,44,191,.45);box-shadow:var(--shadow)}.why-card .w-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--purple-lt),rgba(255,255,255,.65));color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:0}.why-card .w-icon .ui-icon{width:23px;height:23px}[data-theme="dark"] .why-card .w-icon{background:rgba(107,44,191,.18);color:#C9A8F2}
.contact-icon{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;background:linear-gradient(135deg,var(--green-lt),var(--surface2));color:var(--green-d);display:flex;align-items:center;justify-content:center;border:1px solid var(--border);font-size:0}.contact-icon .ui-icon{width:28px;height:28px}
@media(max-width:600px){.hero{padding:44px 16px 52px;min-height:auto;background:#fff url('/static/assets/ui/svg/hero-bg-mobile.svg') center top/cover no-repeat;align-items:flex-start}.hero::before{display:none}.hero h1{font-size:clamp(30px,8vw,40px)}.hero p{font-size:15px}.action-icon{width:44px;height:44px}.action-icon .ui-icon{width:22px;height:22px}}


/* Clean header redesign: real logo + designed controls */
.header{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(229,231,235,.85);box-shadow:0 10px 28px rgba(75,22,140,.06)}
[data-theme="dark"] .header{background:rgba(26,29,38,.90);border-bottom-color:rgba(46,51,71,.9)}
.header-inner{height:74px;max-width:1240px;gap:18px}
.header-search{max-width:440px}.header-search input{height:42px;background:rgba(241,245,249,.82);border:1px solid rgba(229,231,235,.95);border-radius:999px;padding-left:42px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(75,22,140,.04)}.header-search .search-icon{width:17px;height:17px;font-size:0;color:var(--navy)}.header-search input:focus{background:#fff;border-color:rgba(107,44,191,.6);box-shadow:0 0 0 4px rgba(107,44,191,.12),0 10px 24px rgba(75,22,140,.08)}[data-theme="dark"] .header-search input{background:rgba(34,38,50,.82);box-shadow:none}.main-nav{gap:6px}.nav-btn{height:40px;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;border:1px solid transparent;color:var(--muted);font-weight:650}.nav-btn .ui-icon{width:16px;height:16px}.nav-btn:hover{background:rgba(107,44,191,.08);border-color:rgba(107,44,191,.22);color:var(--navy)}.nav-btn.active{background:linear-gradient(135deg,var(--navy),var(--purple-d));color:#fff;border-color:rgba(75,22,140,.85);box-shadow:0 9px 20px rgba(75,22,140,.20)}[data-theme="dark"] .nav-btn.active{background:linear-gradient(135deg,var(--green),var(--green-d));color:#10240A;border-color:rgba(140,194,15,.7)}.theme-btn{width:40px;height:40px;border-radius:13px;background:rgba(241,245,249,.86);box-shadow:0 6px 16px rgba(16,24,40,.06)}.theme-btn .ui-icon{width:18px;height:18px}[data-theme="dark"] .theme-btn{background:rgba(34,38,50,.86)}
@media(max-width:900px){.header-inner{height:68px}.logo{height:50px;min-width:178px}.logo img{height:37px!important;max-width:154px}.logo::after{display:none}}
@media(max-width:600px){.header-inner{height:62px;padding:0 14px;gap:11px}.logo{height:44px;min-width:142px;padding:5px 8px}.logo img{height:32px!important;max-width:126px}.theme-btn{width:34px;height:34px;border-radius:10px}.hamburger{padding:5px}}


/* Logo upscale placement: larger brand lockup */
.header-inner{height:86px;max-width:1320px;gap:20px}.logo{height:68px;min-width:292px;padding:9px 18px 9px 12px;border-radius:18px}.logo img{height:54px!important;max-width:248px}.logo::after{right:14px;bottom:7px;font-size:10px;padding:3px 9px}.header-search{max-width:390px}.header-search input{height:44px}.nav-btn{height:42px;padding:9px 12px;font-size:13px}.theme-btn{width:42px;height:42px}@media(max-width:1100px){.header-inner{gap:12px}.logo{min-width:250px}.logo img{height:49px!important;max-width:214px}.header-search{max-width:330px}.nav-btn{padding:8px 10px;font-size:12.5px}}@media(max-width:900px){.header-inner{height:76px}.logo{height:60px;min-width:238px}.logo img{height:48px!important;max-width:210px}.logo::after{display:none}}@media(max-width:600px){.header-inner{height:68px}.logo{height:54px;min-width:190px;padding:7px 10px}.logo img{height:42px!important;max-width:172px}.theme-btn{width:34px;height:34px}}


/* ── Chat/WA widget ── */
/* Bot sohbet balonu kaldırıldı; yerine WhatsApp balonu */
#chatFab, #chatPanel { display: none !important; }
.wa-bubble{
  position: fixed; bottom: 24px; right: 24px; z-index: 320;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(37,211,102,.5); text-decoration: none;
  transition: transform .2s, box-shadow .2s; animation: waPulse 2.4s infinite;
}
.wa-bubble:hover{ transform: scale(1.1); }
.wa-bubble svg{ width: 34px; height: 34px; }
.wa-bubble .wa-tip{
  position: absolute; right: 72px; background: #4B168C; color: #fff;
  padding: 7px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
  white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .2s, transform .2s; box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.wa-bubble .wa-tip::after{ content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:#4B168C; }
.wa-bubble:hover .wa-tip{ opacity:1; transform:translateX(0); }
@keyframes waPulse{ 0%{box-shadow:0 6px 22px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.45)} 70%{box-shadow:0 6px 22px rgba(37,211,102,.5),0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 6px 22px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,0)} }
@media (max-width:480px){ .wa-bubble{ bottom:18px; right:18px; width:56px; height:56px; } }

/* ═══ DESTEK TALEBİ KARTI ═══ */
.dt-kart{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);max-width:640px;margin:0 auto 36px;overflow:hidden}
.dt-sekmeler{display:flex;border-bottom:1px solid var(--border)}
.dt-sekme{flex:1;padding:14px;background:var(--surface2);border:none;font-size:14px;font-weight:700;
  color:var(--muted);cursor:pointer;transition:all .15s}
.dt-sekme.active{background:var(--surface);color:var(--navy);box-shadow:inset 0 -2.5px 0 var(--navy)}
.dt-pane{padding:18px}
.dt-satir{display:flex;gap:10px;margin-bottom:10px}
.dt-satir input,.dt-satir select,.dt-pane textarea{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--border);
  border-radius:11px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);outline:none}
.dt-satir input:focus,.dt-pane textarea:focus,.dt-satir select:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--ring)}
.dt-pane textarea{width:100%;resize:vertical;margin-bottom:12px}
.dt-gonder{width:100%;padding:13px;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;
  color:#fff;background:linear-gradient(115deg,var(--navy),var(--purple-d));transition:transform .15s}
.dt-gonder:active{transform:scale(.98)}
.dt-gonder:disabled{opacity:.6;cursor:wait}
.dt-gonder.dt-mini{width:auto;padding:11px 20px;font-size:13.5px;flex-shrink:0}
.dt-hata{color:#D94040;font-size:13px;margin-top:8px;min-height:16px}
.dt-basari{text-align:center;padding:8px 4px}
.dt-b-baslik{font-size:17px;font-weight:800;color:var(--green-d);margin-bottom:10px}
.dt-no{font-family:'Poppins',sans-serif;font-size:44px;font-weight:900;letter-spacing:6px;color:var(--navy);
  background:var(--purple-lt);border-radius:14px;padding:12px;margin-bottom:10px}
.dt-kopyala{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px 16px;
  font-size:13px;font-weight:700;cursor:pointer;color:var(--text);margin-bottom:10px}
.dt-basari p{font-size:12.5px;color:var(--muted);line-height:1.6}
.dt-durum-satir{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:10px}
.dt-durum{font-size:12px;font-weight:800;padding:4px 12px;border-radius:99px}
.dt-durum.acik{background:#FFF3D6;color:#9A6200}
.dt-durum.islemde{background:var(--purple-lt);color:var(--navy)}
.dt-durum.cozuldu,.dt-durum.kapatildi{background:var(--green-lt);color:var(--green-d)}
.dt-dizi{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
  background:var(--surface2);border-radius:12px;padding:12px}
.dt-mesaj{max-width:85%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.dt-mesaj.musteri{align-self:flex-end;background:var(--purple-lt);color:var(--text);border-bottom-right-radius:4px}
.dt-mesaj.temsilci{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.dt-mesaj .dt-m-kim{font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:3px}
@media(max-width:560px){.dt-satir{flex-direction:column}.dt-no{font-size:34px;letter-spacing:4px}}