:root{
  /* WRS Car palette: navy #1A435D, gold #C9AD7D */
  --navy:#1A435D; --navy-2:#23557A; --ink:#14213D; --paper:#F6F4EE; --card:#FFFFFF;
  --amber:#C9AD7D; --amber-d:#B8975F; --teal:#1F8A8A; --muted:#5B6473; --line:#E3DFD4;
  --ok:#1E8E5A; --danger:#C0392B; --radius:18px; --shadow:0 10px 30px rgba(26,67,93,.10);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* animasyon: yumuşak ve yaylı geçişler (tüm arayüzde tekrar kullanılır) */
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --pop-shadow:0 24px 60px rgba(10,18,32,.28);
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0B1626; --card:#132238; --ink:#F3F1EA; --muted:#A9B4C6; --line:#22344F; --shadow:0 10px 30px rgba(0,0,0,.35); }
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--paper); color:var(--ink); line-height:1.45; }
[dir=rtl] body{ font-family:'DM Sans',system-ui,'Segoe UI',Tahoma,sans-serif }
h1,h2,h3{ margin:0; font-weight:600 }
h1{ font-family:'Oswald','DM Sans',sans-serif; font-weight:500; font-size:clamp(34px,6vw,64px); line-height:1.05; letter-spacing:-.01em }
h2{ font-size:clamp(22px,3vw,30px) }
p{ margin:0 }
a{ color:inherit }
button{ font:inherit; cursor:pointer }
input,select{ font:inherit; color:inherit }
.muted{ color:var(--muted) }
.small{ font-size:13px }
svg{ fill:currentColor }

/* header */
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px clamp(16px,4vw,48px); background:var(--navy); color:#F6F4EE; padding-top:calc(12px + env(safe-area-inset-top,0px)); }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; flex:0 1 auto }
.brand img{ height:40px; width:auto; max-width:min(260px,52vw); object-fit:contain; object-position:left center; display:block }
[dir=rtl] .brand img{ object-position:right center }
.top-controls{ display:flex; gap:8px; align-items:center }
.select-wrap{ position:relative; display:inline-flex }
.select-wrap select{ appearance:none; -webkit-appearance:none; padding:8px 30px 8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#F6F4EE; font-weight:600; font-size:14px }
.select-wrap::after{ content:""; position:absolute; right:12px; top:50%; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-70%) rotate(45deg); pointer-events:none; opacity:.8 }
[dir=rtl] .select-wrap select{ padding:8px 12px 8px 30px }
[dir=rtl] .select-wrap::after{ right:auto; left:12px }
.results .select-wrap select{ background:var(--card); color:var(--ink); border-color:var(--line) }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; border:1px solid transparent; padding:12px 18px; font-weight:600; transition:transform .06s ease, background .15s ease }
.btn:active{ transform:scale(.98) }
.btn.primary{ background:var(--amber); color:var(--navy) }
.btn.primary:hover{ background:var(--amber-d) }
.btn.big{ padding:16px 20px; font-size:17px }
.btn.big svg{ width:22px; height:22px }
.btn.ghost{ background:transparent; border-color:var(--line); color:inherit }
.btn.small{ padding:8px 12px; font-size:14px }
.btn.dark{ background:var(--navy); color:#F6F4EE }
.btn[disabled]{ opacity:.6; cursor:progress }
.link{ background:none; border:0; color:var(--teal); font-weight:600; padding:0; text-decoration:underline }

/* hero */
main{ padding:0 clamp(16px,4vw,48px) }
.hero{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center; padding:clamp(28px,6vw,80px) 0 }
.eyebrow{ color:var(--amber); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; margin-bottom:14px }
.lead{ font-size:clamp(16px,1.6vw,20px); color:var(--muted); margin:18px 0 22px; max-width:56ch }
.trust{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.trust li{ display:flex; align-items:center; gap:10px; font-weight:500 }
.trust svg{ width:20px; height:20px; color:var(--ok); flex:none }

.search-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(18px,3vw,28px); display:grid; grid-template-columns:1fr 1fr; gap:14px }
.field{ display:flex; flex-direction:column; gap:6px; grid-column:1 / -1 }
.field.half{ grid-column:auto }
.field label{ font-size:13px; font-weight:600; color:var(--muted); display:flex; justify-content:space-between; align-items:center }
.field input{ width:100%; padding:14px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper); font-size:16px }
.field input:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:transparent }
.search-card .btn{ grid-column:1 / -1; margin-top:4px }
.fineprint{ grid-column:1 / -1; font-size:12.5px; color:var(--muted) }
.combo{ position:relative }
.combo-list{ position:absolute; z-index:15; left:0; right:0; top:calc(100% + 6px); max-height:300px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow) }
.combo-list .grp{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:10px 14px 4px; font-weight:700 }
.combo-list .opt{ padding:11px 14px; display:flex; align-items:center; gap:10px; cursor:pointer }
.combo-list .opt:hover,.combo-list .opt.active{ background:rgba(201,173,125,.18) }
.combo-list .opt svg{ width:18px; height:18px; color:var(--teal); flex:none }
.combo-list .opt .code{ margin-inline-start:auto; font-size:12px; font-weight:700; color:var(--muted) }

/* "farklı yerde teslim et" anahtarı (iOS tarzı) */
.switch-row{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; user-select:none; margin:-4px 0 -2px }
.switch-row input{ position:absolute; opacity:0; width:0; height:0 }
.switch{ position:relative; flex:none; width:42px; height:24px; border-radius:999px; background:var(--line); transition:background .25s var(--ease) }
.switch::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .28s var(--spring) }
.switch-row input:checked + .switch{ background:var(--teal) }
.switch-row input:checked + .switch::after{ transform:translateX(18px) }
[dir=rtl] .switch-row input:checked + .switch::after{ transform:translateX(-18px) }
.switch-row input:focus-visible + .switch{ outline:2px solid var(--amber); outline-offset:2px }

/* açılır alan (teslim yeri) — grid satır oranıyla yumuşak yükseklik geçişi */
.collapsible{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .38s var(--ease), opacity .3s var(--ease) }
.collapsible.open{ grid-template-rows:1fr; opacity:1 }
.collapsible-inner{ min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:6px }

/* özel tarih/saat tetikleyicisi */
.date-trigger{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--paper); color:inherit; font-size:15.5px; font-weight:600; text-align:start; transition:border-color .15s var(--ease), box-shadow .2s var(--ease) }
.date-trigger svg{ width:19px; height:19px; color:var(--teal); flex:none }
.date-trigger:hover{ border-color:var(--amber) }
.date-trigger.active{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(201,173,125,.22) }
.dt-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* tarih seçici popover */
.dp-backdrop{ position:fixed; inset:0; background:rgba(10,18,32,.28); z-index:34; opacity:0; animation:dpFade .2s var(--ease) forwards }
@keyframes dpFade{ to{ opacity:1 } }
.dp-pop{ position:fixed; z-index:35; width:320px; max-width:calc(100vw - 24px); background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--pop-shadow); padding:14px 14px 12px;
  transform-origin:top center; animation:dpPop .28s var(--spring) both }
@keyframes dpPop{ from{ opacity:0; transform:translateY(-6px) scale(.96) } to{ opacity:1; transform:none } }
.dp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px }
.dp-title{ font-weight:700; font-size:15.5px; text-transform:capitalize }
.dp-nav{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); display:grid; place-items:center }
.dp-nav svg{ width:20px; height:20px }
.dp-nav:hover{ background:rgba(201,173,125,.16); border-color:var(--amber) }
[dir=rtl] .dp-nav svg{ transform:scaleX(-1) }
.dp-week,.dp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.dp-week{ margin-bottom:4px }
.dp-week span{ text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; padding:4px 0 }
.dp-grid{ animation:dpMonth .26s var(--ease) both }
.dp-grid.left{ animation-name:dpSlideL } .dp-grid.right{ animation-name:dpSlideR }
@keyframes dpMonth{ from{ opacity:.3 } to{ opacity:1 } }
@keyframes dpSlideL{ from{ opacity:0; transform:translateX(14px) } to{ opacity:1; transform:none } }
@keyframes dpSlideR{ from{ opacity:0; transform:translateX(-14px) } to{ opacity:1; transform:none } }
.dp-day{ aspect-ratio:1; display:grid; place-items:center; border:0; background:none; color:var(--ink); font-size:14px; font-weight:600; border-radius:50%; position:relative; transition:background .15s var(--ease), color .15s var(--ease), transform .12s var(--spring) }
.dp-day.mut{ color:transparent; pointer-events:none }
.dp-day.off{ color:var(--muted); opacity:.32; pointer-events:none }
.dp-day.today::after{ content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--amber) }
.dp-day:not(.off):not(.mut):hover{ background:rgba(201,173,125,.2) }
.dp-day.sel{ background:var(--navy); color:#F6F4EE; transform:scale(1.04) }
.dp-day.sel.today::after{ background:#F6F4EE }
/* saat çarkı */
.dp-time{ position:relative; display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 6px; height:132px }
.dp-band{ position:absolute; left:8px; right:8px; top:50%; height:38px; transform:translateY(-50%); border-radius:10px; background:rgba(201,173,125,.16); pointer-events:none }
.dp-colon{ font-weight:700; font-size:20px; color:var(--muted); z-index:1 }
.dp-wheel{ height:132px; width:74px; padding:47px 0; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(#0000, #000 26%, #000 74%, #0000); mask-image:linear-gradient(#0000, #000 26%, #000 74%, #0000) }
.dp-wheel::-webkit-scrollbar{ display:none }
.dp-wheel .w{ height:38px; scroll-snap-align:center; display:grid; place-items:center; font-size:18px; font-weight:600; color:var(--muted); transition:color .15s var(--ease), transform .15s var(--ease) }
.dp-wheel .w.on{ color:var(--ink); transform:scale(1.12) }
.dp-actions{ display:flex; gap:8px; margin-top:8px }
.dp-actions .btn{ flex:1 }

/* results */
.results{ padding:8px 0 40px }
.results-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:14px; margin-bottom:18px }
.tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ border:1px solid var(--line); background:var(--card); color:inherit; border-radius:999px; padding:7px 13px; font-size:14px; font-weight:500 }
.chip.on{ background:var(--navy); color:#F6F4EE; border-color:var(--navy) }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px }
.car{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); animation:rise .35s ease both }
@keyframes rise{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.car-art{ position:relative; background:linear-gradient(135deg,var(--navy),var(--navy-2)); padding:18px 18px 8px; color:#F6F4EE; min-height:150px }
.car-art svg{ width:100%; height:110px; display:block; fill:none }
.car-art.photo{ padding:0; background:#E9E6DF }
.car-art.photo img{ width:100%; height:150px; object-fit:cover; display:block }
.car-art.photo .cls{ background:rgba(26,67,93,.78) }
.car-art .cls{ position:absolute; top:12px; inset-inline-start:14px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.14); padding:5px 9px; border-radius:999px }
.car-art .badge{ position:absolute; top:12px; inset-inline-end:14px; font-size:11px; font-weight:700; background:var(--amber); color:var(--navy); padding:5px 9px; border-radius:999px }
/* tedarikçi rozeti: WRS altın, Yolcu360 vendor'ı gri */
.sup{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:999px; vertical-align:middle; margin-inline-end:6px; line-height:1.5 }
.sup.gold{ background:var(--amber); color:var(--navy) }
.sup.grey{ background:var(--line); color:var(--muted); letter-spacing:0 }
#supStatus{ font-size:12.5px; margin-top:2px }
#supStatus:empty{ display:none }
.car-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; flex:1 }
.car h3{ font-size:20px; line-height:1.15 }
.car .sub{ color:var(--muted); font-size:13.5px }
.specs{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13.5px; color:var(--muted) }
.specs span{ display:inline-flex; align-items:center; gap:5px }
.specs svg{ width:16px; height:16px }
.price-row{ display:flex; align-items:end; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; border-top:1px dashed var(--line) }
.price .total{ font-family:'Oswald',sans-serif; font-size:30px; font-weight:500; line-height:1 }
.price .per{ font-size:13px; color:var(--muted) }
.dep{ font-size:12.5px; color:var(--muted); text-align:end }
.dep b{ color:var(--ink) }
.car .btn{ width:100% }

.skeleton .car-art,.skeleton .line{ background:linear-gradient(90deg,var(--line) 25%,rgba(255,255,255,.35) 50%,var(--line) 75%); background-size:200% 100%; animation:sh 1.2s infinite }
.skeleton .line{ height:14px; border-radius:6px }
.skeleton .line.w{ width:70% } .skeleton .line.s{ width:40% }
@keyframes sh{ to{ background-position:-200% 0 } }
.empty,.error{ background:var(--card); border:1px dashed var(--line); border-radius:var(--radius); padding:28px; text-align:center; color:var(--muted) }
.error{ border-color:var(--danger); color:var(--danger); display:flex; flex-direction:column; gap:12px; align-items:center }

/* how */
.how{ padding:20px 0 60px }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px }
.step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px }
.step span{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--amber); color:var(--navy); font-weight:700; margin-bottom:12px }
.step h3{ font-size:18px; margin-bottom:6px }
.step p{ color:var(--muted); font-size:14.5px }

/* Arama ve üretken yanıt sistemleri için açık, taranabilir hizmet özeti */
.seo-copy{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,64px); padding:0 0 64px }
.seo-intro p{ color:var(--muted); margin-top:12px; max-width:62ch }
.faq-list{ display:flex; flex-direction:column; gap:10px }
.faq-list details{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px }
.faq-list summary{ cursor:pointer; font-weight:600 }
.faq-list p{ color:var(--muted); font-size:14.5px; margin-top:10px }

.foot{ padding:24px clamp(16px,4vw,48px) calc(28px + var(--safe-b)); border-top:1px solid var(--line); color:var(--muted); font-size:14px; display:flex; flex-direction:column; gap:6px }

/* sheet */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(10,18,32,.55); z-index:30; backdrop-filter:blur(2px) }
.sheet{ position:fixed; z-index:31; background:var(--card); color:var(--ink); box-shadow:var(--shadow);
  inset-inline-end:0; top:0; bottom:0; width:min(520px,100%); overflow:auto; padding:22px 22px calc(22px + var(--safe-b)); animation:slide .25s ease }
@keyframes slide{ from{ transform:translateX(30px); opacity:0 } to{ transform:none; opacity:1 } }
[dir=rtl] .sheet{ animation-name:slideR }
@keyframes slideR{ from{ transform:translateX(-30px); opacity:0 } to{ transform:none; opacity:1 } }
.sheet-close{ position:absolute; top:12px; inset-inline-end:12px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--paper); font-size:22px; line-height:1 }
.sheet h2{ margin:6px 0 4px; padding-inline-end:44px }
.sheet .art{ background:linear-gradient(135deg,var(--navy),var(--navy-2)); border-radius:14px; padding:14px; margin:14px 0 }
.sheet .art svg{ width:100%; height:120px; fill:none }
.sheet .art.photo{ padding:0; overflow:hidden; background:#E9E6DF }
.sheet .art.photo img{ width:100%; height:200px; object-fit:cover; display:block }
.credit{ font-size:12px; color:var(--muted); margin:-8px 0 12px }
.kv{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; font-size:14.5px; padding:12px 0; border-top:1px solid var(--line) }
.kv dt{ color:var(--muted) } .kv dd{ margin:0; text-align:end; font-weight:600 }
.extras{ display:flex; flex-direction:column; gap:8px; padding:12px 0; border-top:1px solid var(--line) }
.extras label{ display:flex; align-items:center; gap:10px; font-size:14.5px }
.extras label span:last-child{ margin-inline-start:auto; color:var(--muted); font-weight:600 }
.extras input{ width:18px; height:18px; accent-color:var(--amber) }
.total-box{ background:var(--paper); border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; margin:10px 0 14px }
.total-box .t{ font-family:'Oswald',sans-serif; font-size:30px; font-weight:500 }
.flow{ display:flex; flex-direction:column; gap:10px; margin:14px 0 }
.flow .f{ display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:12px }
.flow .f.on{ border-color:var(--amber); background:rgba(201,173,125,.12) }
.flow .f span{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#F6F4EE; display:grid; place-items:center; font-size:13px; font-weight:700 }
.flow .f b{ display:block; font-size:14.5px } .flow .f small{ color:var(--muted) }
.note{ font-size:12.5px; color:var(--muted); margin-top:10px }
.form2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0 }
.form2 input{ width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); font-size:15px }
.form2 .full{ grid-column:1 / -1 }
.pay{ text-align:center; padding:20px 0 }
.pay .lock{ width:56px; height:56px; color:var(--ok); margin:0 auto 10px }
.toast{ position:fixed; left:50%; bottom:calc(20px + var(--safe-b)); transform:translateX(-50%); background:var(--navy); color:#F6F4EE; padding:12px 16px; border-radius:12px; z-index:40; font-size:14px; box-shadow:var(--shadow) }

/* responsive */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:22px }
  .seo-copy{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr }
  .search-card{ grid-template-columns:1fr 1fr }
  .top-controls .btn{ display:none }
}
@media (max-width:520px){
  .top{ gap:8px; padding-left:12px; padding-right:12px }
  .brand{ flex:1 1 auto; min-width:64px }
  .brand img{ height:32px !important; max-width:100% }
  .top-controls{ flex:0 1 auto; min-width:0; gap:6px }
  .select-wrap select{ padding:7px 24px 7px 9px; font-size:13px }
  .select-wrap::after{ right:9px }
  [dir=rtl] .select-wrap select{ padding:7px 9px 7px 24px }
  [dir=rtl] .select-wrap::after{ left:9px }
  .search-card{ grid-template-columns:1fr }
  .field.half{ grid-column:1 / -1 }
  .grid{ grid-template-columns:1fr }
  .sheet{ inset-inline-end:auto; left:0; right:0; top:auto; bottom:0; width:100%; max-height:92vh; border-radius:20px 20px 0 0; animation:up .25s ease }
  @keyframes up{ from{ transform:translateY(30px); opacity:0 } to{ transform:none; opacity:1 } }
  /* tarih seçici: mobilde alttan bottom-sheet */
  .dp-pop{ left:0 !important; right:0 !important; top:auto !important; bottom:0; width:100%; max-width:100%;
    border-radius:22px 22px 0 0; padding-bottom:calc(12px + var(--safe-b)); transform-origin:bottom center; animation-name:dpUp }
  @keyframes dpUp{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
  .dp-grid{ gap:3px } .dp-day{ font-size:15px }
}

/* hareketi azalt tercihi: efektleri kıs */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .dp-wheel{ scroll-behavior:auto }
}