/* Sentez Arayuz Vitrini — sayfaya ozgu katman. YALNIZ ana sitenin tokenlari (style.css :root); yeni token yok.
   Tum siniflar vt- onekli (app.js .vitrin karuseliyle cakismasin). Site yalniz koyu tema. */
.vt-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vt-liste{padding-top:var(--s6)}
.vt-liste .sec-head{margin-bottom:var(--s3)}

/* arac cubugu: cipler (iki ucta oklar) + acilir arama; kaydirinca sabit menunun altinda yapisir */
.vt-arac{position:sticky;top:72px;z-index:50;display:flex;gap:var(--s2);align-items:center;flex-wrap:nowrap;
  padding:12px 0;margin-bottom:var(--s4);background:rgba(8,8,10,.92);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.vt-filtre-kap{position:relative;flex:1 1 0;min-width:0}
.vt-filtre{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  scroll-padding-inline:64px}  /* = kenar seridi taban genisligi: klavyeyle odaklanan cip okun altinda kalmaz */
.vt-filtre::-webkit-scrollbar{display:none}
/* oklar: yalniz satir o yone kayabiliyorsa (vt.js .is-gorunur); arkada sayfa zemininden saydama solma.
   Kenar seridi tiklamayi gecirir (pointer-events:none): yalniz 44px dugme tiklanir, ortulen kisim zaten kaymis bolum.
   Taban genislik min-width (vt.js okur, scroll-padding ile ayni); yarim kalan cip varsa vt.js seridi onu da
   ortecek kadar genisletir: cip ya seritlerin arasinda tam gorunur ya tamamen disarida (okun altinda yarim cip yok). */
.vt-filtre__kenar{position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;min-width:64px;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s,width .15s ease-out}
.vt-filtre__kenar--geri{left:0;justify-content:flex-start;background:linear-gradient(to right,var(--bg) 46px,transparent)}
.vt-filtre__kenar--ileri{right:0;justify-content:flex-end;background:linear-gradient(to left,var(--bg) 46px,transparent)}
.vt-filtre__kenar.is-gorunur{opacity:1;visibility:visible;transition:opacity .2s ease-out,visibility 0s,width .15s ease-out}
.vt-filtre__ok{pointer-events:auto;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--white);cursor:pointer;display:grid;place-items:center;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .2s var(--ease)}
.vt-filtre__ok:hover{background:var(--surface-2);border-color:rgba(224,34,31,.5)}
.vt-filtre__ok:active{transform:scale(.92)}
.vt-filtre__ok:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.vt-cip{flex:0 0 auto;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:transparent;color:var(--body);font:600 12px/1 var(--sans);letter-spacing:.04em;cursor:pointer;white-space:nowrap;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.vt-cip span{color:var(--muted);margin-left:4px;font-weight:500}
.vt-cip:hover{color:var(--white);border-color:rgba(255,255,255,.3)}
.vt-cip.is-aktif{color:var(--white);border-color:var(--red)}
.vt-cip:focus-visible,.vt-sec:focus-visible,.vt-buyut:focus-visible,.vt-kart__canli:focus-visible,
.vt-lb__kapat:focus-visible,.vt-lb__varyant:focus-visible,.vt-secim__temizle:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.vt-cip:focus-visible{outline-offset:-3px}  /* .vt-filtre overflow-x:auto disaridaki halkayi kirpar: halka icte */
/* acilir arama: kapaliyken 44px yuvarlak ikon; acilinca hap genisler (genislik + saydamlik, ~250ms ease-out).
   Kenar cizgisi ic golge: yukseklik tam 44px kalir. Odak halkasi hapin kendisinde (ikon da alan da). */
.vt-ara{position:relative;flex:0 0 auto;display:flex;align-items:center;width:44px;height:44px;overflow:hidden;
  border-radius:var(--r-pill);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);
  transition:width .25s var(--ease),box-shadow .25s ease-out}
.vt-ara:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.vt-ara.is-acik{width:280px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
/* kirmizi halka yalniz metin alani odaginda ya da klavye odaginda (fareyle kapatinca ikonda takili kalmaz).
   :has desteklemeyen tarayici ikinci kurali butunuyle atar ve :focus-within ile eskisi gibi davranir. */
.vt-ara:focus-within{outline:2px solid var(--red);outline-offset:2px}
.vt-ara:focus-within:not(:has(input:focus)):not(:has(:focus-visible)){outline:0}
.vt-ara__ac,.vt-ara__kapat{flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);
  background:transparent;color:var(--white);cursor:pointer;display:grid;place-items:center}
.vt-ara__ac:focus-visible,.vt-ara__kapat:focus-visible{outline:0}  /* halka hapta */
.vt-ara.is-acik .vt-ara__ac{color:var(--red-2)}
.vt-ara__kapat{color:var(--muted)}
.vt-ara__kapat:hover{color:var(--white)}
.vt-ara__alan,.vt-ara__kapat{opacity:0;visibility:hidden;transform:translateX(8px);
  transition:opacity .1s ease-out,transform .1s ease-out,visibility 0s linear .1s}
.vt-ara__alan{flex:1 1 auto;min-width:0;display:flex}
.vt-ara.is-acik .vt-ara__alan,.vt-ara.is-acik .vt-ara__kapat{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease-out .05s,transform .22s ease-out .05s,visibility 0s}
.vt-ara input{width:100%;min-width:0;height:44px;padding:0 2px;border:0;border-radius:0;background:transparent;
  color:var(--white);font:15px var(--sans);outline:0;-webkit-appearance:none;appearance:none}
.vt-ara input::placeholder{color:var(--muted)}
.vt-ara input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}  /* kendi x dugmemiz var */

/* kategori gruplari */
.vt-grup{margin-bottom:var(--s6);content-visibility:auto;contain-intrinsic-size:auto 1400px}
.vt-grup[hidden],.vt-kart[hidden]{display:none}
.vt-grup__baslik{font-family:var(--disp);font-weight:700;font-size:28px;line-height:1.15;text-transform:uppercase;color:var(--white);margin:0 0 var(--s3)}
.vt-grup__baslik span{color:var(--red-2);font-size:16px;vertical-align:super;margin-left:4px}
.vt-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}

/* kart: /isler/ .work dilinde */
.vt-kart{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.vt-kart:hover{border-color:rgba(224,34,31,.4);transform:translateY(-4px)}
.vt-kart.is-secili{border-color:var(--red)}
.vt-kart__medya{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(100deg,transparent 30%,var(--glass) 50%,transparent 70%) 0 0/300% 100% var(--surface-2);
  animation:vt-iskelet 1.4s linear infinite}
.vt-kart__medya.is-yuklendi{animation:none;background:var(--surface-2)}
@keyframes vt-iskelet{to{background-position:-150% 0}}
.vt-kart__medya img{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vt-kart__medya img{object-fit:cover;object-position:top center}
.vt-kart__canli{position:absolute;right:12px;bottom:12px;z-index:2;min-height:44px;padding:0 18px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.25);background:rgba(8,8,10,.78);color:var(--white);font:700 12.5px/1 var(--sans);
  letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vt-kart__canli:hover{background:var(--red);border-color:var(--red)}
.vt-kart__govde{display:flex;flex-direction:column;gap:8px;padding:var(--s3);flex:1}
.vt-kart__kat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red-2)}
.vt-rozet{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 10px;
  border-radius:var(--r-pill);border:1px solid var(--line);color:var(--body)}
.vt-kart__ad{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.15;text-transform:uppercase;color:var(--white);margin:0}
.vt-kart__aciklama{font-size:15px;line-height:1.55;color:var(--body);margin:0}
.vt-kart__aksiyon{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:var(--s1)}
.vt-sec{min-height:44px;padding:0 20px;border-radius:var(--r-pill);border:1px solid var(--white);background:var(--white);color:var(--bg);
  font:700 12.5px/1 var(--sans);letter-spacing:.06em;cursor:pointer}
.vt-sec:hover{background:var(--red);border-color:var(--red);color:var(--white)}
.vt-kart.is-secili .vt-sec{background:transparent;color:var(--white);border-color:var(--red)}
.vt-buyut{min-height:44px;min-width:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:transparent;color:var(--white);font:600 12.5px/1 var(--sans);cursor:pointer}
.vt-buyut:hover{border-color:rgba(255,255,255,.4)}
.vt-yeni{display:inline-flex;min-height:44px;align-items:center;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.vt-yeni:hover{color:var(--white)}
.vt-bos{color:var(--body);padding:var(--s4) 0}

/* 02 size ozel */
.vt-ozel__btn{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s4)}
.vt-ozel__wa{margin:var(--s3) 0 0;color:var(--muted)}
.vt-ozel__wa a{color:var(--white)}

/* 03 teklif */
.vt-teklif{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.vt-teklif__alt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:var(--s4) 0 var(--s1)}
.vt-secilenler{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.vt-secilenler li{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 14px;border:1px solid var(--line);
  border-radius:var(--r-pill);color:var(--white);font-size:14px}
.vt-secilenler .vt-secilenler__bos{padding:0;border:0;color:var(--body)}
.vt-secilenler__cikar{width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-2);color:var(--white);cursor:pointer;font-size:16px;line-height:1}
.vt-secilenler__cikar:hover{background:var(--red)}
.vt-secilenler__cikar:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.vt-form .vt-onay{display:flex;gap:10px;align-items:flex-start;margin:14px 0 18px;font-size:14px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--body);cursor:pointer}
.vt-form .vt-onay input{width:auto;margin-top:3px}
.vt-form .vt-onay a{color:var(--white)}
.vt-form .btn{min-height:44px}

/* yapiskan secim cubugu */
.vt-secim{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--bg-2);border-top:1px solid var(--line);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px))}
.vt-secim[hidden]{display:none}
.vt-secim__in{display:flex;gap:var(--s2);align-items:center;justify-content:flex-end}
.vt-secim__bilgi{margin-right:auto;color:var(--body)}
.vt-secim__bilgi b{color:var(--white)}
.vt-secim__temizle{min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--muted);
  font:600 13px var(--sans);cursor:pointer;text-decoration:underline}
.vt-secim__teklif{width:auto;margin-top:0;gap:0}
body.vt-secim-acik .footer{padding-bottom:96px}

/* buyuk onizleme (lightbox) */
.vt-lb{position:fixed;inset:0;z-index:100;background:rgba(8,8,10,.86);display:flex;align-items:center;justify-content:center;padding:24px}
.vt-lb__kutu{display:flex;flex-direction:column;width:min(1280px,100%);height:min(860px,100%);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.vt-lb__bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line)}
.vt-lb__ad{font-family:var(--disp);font-size:20px;line-height:1.15;text-transform:uppercase;color:var(--white);margin-right:auto}
.vt-lb__varyant{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;
  color:var(--body);font:600 12.5px var(--sans);cursor:pointer}
.vt-lb__varyant[aria-pressed="true"]{color:var(--white);border-color:var(--red)}
.vt-lb__bar .btn{width:auto;margin-top:0}
.vt-lb__kapat{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--white);font-size:22px;cursor:pointer}
.vt-lb__iframe{flex:1;width:100%;border:0;background:var(--white)}
body.vt-lb-acik{overflow:hidden}

@media(max-width:1080px){.vt-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}.vt-ara.is-acik{width:240px}}
@media(max-width:860px){.vt-teklif{grid-template-columns:1fr;gap:28px}}
@media(max-width:620px){
  .vt-izgara{grid-template-columns:1fr}
  /* dar ekran: cipler + arama ikonu tek satir; acik arama satirin ustune sagdan genisler (yukseklik degismez) */
  .vt-arac{gap:10px;padding-right:54px}
  .vt-ara{position:absolute;right:0;top:12px;z-index:3}
  .vt-ara.is-acik{width:100%}
  /* metin varken: alan ustte kendi satirinda, cip satiri altta tam genislikte (arac cubugu iki satir) */
  .vt-arac.is-ara-metinli{padding-top:66px;padding-right:0}
  .vt-lb{padding:0}
  .vt-lb__kutu{width:100%;height:100%;border:0;border-radius:0}
  /* dar ekran: 1. satir baslik + kapat, sonra varyant sekmeleri, sonra Sec + WhatsApp yan yana */
  .vt-lb__bar{gap:8px;padding:8px 8px 8px 16px}
  .vt-lb__ad{order:-2;flex:1 0 calc(100% - 60px);min-width:0;font-size:18px}
  .vt-lb__kapat{order:-1;flex:0 0 44px}
  .vt-lb__varyant{flex:1 1 calc(50% - 4px);min-width:0;padding:4px 10px;line-height:1.2}
  .vt-lb__bar .btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;min-height:44px;padding:0 12px;letter-spacing:.08em}
  .vt-secim__bilgi{display:none}
  .vt-form{padding:var(--s3)}
}
@media(prefers-reduced-motion:reduce){
  .vt-kart__medya{animation:none}
  .vt-kart,.vt-cip,.vt-ara,.vt-ara__alan,.vt-ara__kapat,.vt-filtre__kenar,.vt-filtre__ok,
  .vt-ara.is-acik .vt-ara__alan,.vt-ara.is-acik .vt-ara__kapat,.vt-filtre__kenar.is-gorunur{transition:none}
  /* sitenin genel kurali (*{transition-duration:.01ms!important}) torunlarda da miras visibility'yi bir an gizli tutar,
     focus() tutmazdi: arama ve ok torunlarinda gecis hic yok */
  .vt-ara *,.vt-filtre-kap *{transition:none}
  .vt-ara__alan,.vt-ara__kapat{transform:none}
  .vt-filtre__ok:active{transform:none}
  .vt-kart:hover{transform:none}
}