/* ==========================================================================
   ANA SAYFA — VITRIN HERO
   Gorsel VE metin birlikte degisir; sagda o slayta ait tur listesi.
   ========================================================================== */

.v2-hero {
  position: relative;
  min-height: 620px;
  background: var(--koyu);
  overflow: hidden;
  isolation: isolate;
}

/* -- Arka plan gorselleri -- */
.v2-hero__ray { position: absolute; inset: 0; }
/* Gorsel CSS zemini olarak gelir — <img> yok.
   Boylece app.css'teki data-yedek iskelet/yedek katmani hero'ya hic
   dokunmuyor; o katman ilk slaytta gorseli gorunmez birakiyordu ve
   slayt silinince sorun yeni ilk slayta gecti. Butun slaytlar artik
   birebir ayni yolla yukleniyor. */
.v2-hero__s {
  position: absolute; inset: 0;
  background-color: var(--koyu);
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  opacity: 0; visibility: hidden;
  transition: opacity 1.3s var(--e), visibility 1.3s var(--e);
}
/* Ken Burns artik slaytin kendisinde: zemin gorseli transform ile
   olceklenince ayni etkiyi verir. */
.v2-hero__s.on { opacity: 1; visibility: visible; animation: kb 18s linear both; }
.v2-hero__perde {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,30,54,.92) 0%, rgba(16,30,54,.6) 52%, rgba(16,30,54,.25) 100%);
}

/* -- Metin katmani: slaytlar ust uste, yalnizca aktif gorunur -- */
.v2-hero__ic {
  position: relative; z-index: var(--z-2);
  min-height: 620px;
  display: grid;
  padding-block: var(--s10);
  color: var(--white);
}
.v2-hero__mt {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: 1fr 380px;
  align-items: center; gap: var(--s8);
}
/* Aktif slaytin ogeleri sirayla girer */
.v2-hero__mt.on > *      { animation: up .8s var(--e) both; }
.v2-hero__mt.on > *:nth-child(1) { animation-delay: .1s; }
.v2-hero__mt.on > *:nth-child(2) { animation-delay: .22s; }

.v2-hero__sol { max-width: 40ch; }
.v2-hero__etk {
  display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4);
  font-size: var(--fs-3xs); font-weight: var(--fw-700);
  letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--brand-200);
}
.v2-hero__etk::before { content: ""; width: 22px; height: 2px; background: var(--brand); }
.v2-hero__b {
  font-size: var(--fs-hero); font-weight: var(--fw-800);
  line-height: 1.08; letter-spacing: var(--ls-tt); color: var(--white);
}
.v2-hero__b em { color: var(--brand); font-style: normal; }
.v2-hero__a {
  margin-top: var(--s4); font-size: var(--fs-lead);
  line-height: 1.6; color: rgba(255,255,255,.82);
}
.v2-hero__bt { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* -- Sag kolon: o slayta ait turlar -- */
.v2-vit { display: flex; flex-direction: column; gap: var(--s3); }
.v2-vit__bas {
  display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1);
  font-size: var(--fs-3xs); font-weight: var(--fw-700);
  letter-spacing: var(--ls-cap); text-transform: uppercase; color: rgba(255,255,255,.72);
}
.v2-vit__bas svg { color: var(--brand-200); }
.v2-mini {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--s3);
  align-items: center; padding: var(--s3);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r2); backdrop-filter: blur(10px);
  transition: background var(--t2), transform var(--t2);
}
.v2-mini:hover { background: rgba(255,255,255,.2); transform: translateX(-4px); }
.v2-mini__g { position: relative; aspect-ratio: 1/1; border-radius: var(--r1); overflow: hidden; }
.v2-mini__g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-mini__ad { font-size: var(--fs-2xs); font-weight: var(--fw-700); line-height: 1.3; color: var(--white); }
.v2-mini__mt { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .04em; color: rgba(255,255,255,.65); }
.v2-mini__f {
  display: block; margin-top: var(--s1);
  font-size: var(--fs-2xs); font-weight: var(--fw-800); color: var(--brand-200);
}
.v2-mini__f s { margin-right: 4px; font-weight: var(--fw-500); color: rgba(255,255,255,.5); }

/* -- Alt: sayac + cubuklar + oklar -- */
.v2-hero__alt { position: absolute; left: 0; right: 0; bottom: var(--s6); z-index: var(--z-2); }
.v2-hero__alt-ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,.18);
}
.v2-hero__yer { display: flex; align-items: baseline; gap: var(--s3); color: var(--white); }
.v2-hero__no { font-size: var(--fs-h4); font-weight: var(--fw-800); letter-spacing: var(--ls-t); }
.v2-hero__no-t { color: rgba(255,255,255,.5); font-weight: var(--fw-500); }
.v2-hero__yer-a { font-size: var(--fs-2xs); color: rgba(255,255,255,.78); }

.v2-hero__gez { display: flex; align-items: center; gap: var(--s4); }
.v2-hero__cub { display: flex; gap: var(--s2); }
.v2-hero__c {
  position: relative; width: 30px; height: 3px;
  background: rgba(255,255,255,.28); border-radius: var(--rp);
  overflow: hidden; transition: width var(--t2);
}
.v2-hero__c.on { width: 56px; }
.v2-hero__c .dlg {
  position: absolute; inset: 0; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
}
.v2-hero__c.on .dlg { animation: ilr var(--sure, 7s) linear both; }
.v2-hero.durdu .v2-hero__c.on .dlg { animation-play-state: paused; }

.v2-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--white);
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--rp);
  transition: all var(--t2);
}
.v2-ok:hover { background: var(--white); border-color: var(--white); color: var(--koyu); }

/* -- Arama seridi -- */
/* Arama kutusu KART olarak durur.
   Onceki surumde kart duzlestiriliyordu (golge/yuvarlaklik sifir, ic
   bosluklar kaldirilmis); sekme seridi ile alanlar iki ayri parca gibi
   goruluyordu. Artik tonlu bir seridin uzerinde tek beyaz kart —
   sekmeler, alanlar ve populer cipler ayni cercevenin bolumleri. */
.v2-ara { background: var(--mist); border-bottom: 1px solid var(--line);
          padding-block: var(--s6); }

@media (max-width: 1100px) {
  .v2-hero__mt { grid-template-columns: 1fr; }
  .v2-vit { display: none; }
}
@media (max-width: 900px) {
  .v2-hero, .v2-hero__ic { min-height: 520px; }
  .v2-hero__perde { background: var(--veil-hero-m); }
  .v2-hero__ic { padding-block: var(--s9) calc(var(--s10) + var(--s4)); }
  .v2-hero__mt { align-items: flex-end; }
  .v2-ok { display: none; }
}


/* ==========================================================================
   INSTAGRAM KAYAN BANDI (.insb)
   --------------------------------------------------------------------------
   Kareler tek satirda, ekranin bir ucundan digerine surekli akar. Bant
   sayfanin tam genisligini kaplar; iki ucu maskeyle silinerek biter,
   boylece kareler kenarda kesilmis gibi degil "gelip gecerken" gorunur.

   SONSUZ AKIS: isaretlemede liste IKI KEZ basilir. Ray kendi genisliginin
   yarisi kadar kayinca ikinci kopyanin basi, birincinin basiyla tam ayni
   yere gelir ve animasyon basa donunce gecis fark edilmez.

   ARALIK NEDEN "gap" DEGIL "margin-right":
   gap kullanilirsa raydaki N kare arasinda N-1 aralik olur ve raydin tam
   yarisi bir kare setine denk GELMEZ — her tur basinda yarim aralik kadar
   (6 px) zipluyordu. margin-right ile her kare "genislik + aralik" olarak
   esit sayilir, yarisi tam bir sete denk gelir ve dikis kaybolur.

   Uzerine gelince durur: bir kareye tiklamak isteyen ziyaretci hareketli
   hedefi kovalamak zorunda kalmasin.
   ========================================================================== */
.insb { position: relative; overflow: hidden;
        /* Tam genislik: .kap sinirlarinin disina cikar */
        width: 100%; padding-block: var(--s2);
        /* Iki uc silinerek biter */
        -webkit-mask-image: linear-gradient(90deg, transparent 0,
                            #000 7%, #000 93%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0,
                            #000 7%, #000 93%, transparent 100%); }

.insb__ray { display: flex; width: max-content;
             animation: insb-kay var(--ins-sure, 40s) linear infinite; }

.insb:hover .insb__ray,
.insb:focus-within .insb__ray { animation-play-state: paused; }

@keyframes insb-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ins__k { position: relative; display: block; flex: none;
          width: 148px; height: 148px; margin-right: 12px;
          overflow: hidden; background: var(--mist-2);
          border-radius: var(--r3);
          transition: transform var(--t2), box-shadow var(--t2); }
.ins__k img { width: 100%; height: 100%; object-fit: cover;
              transition: transform var(--t3); }

.ins__k:hover { transform: translateY(-4px); box-shadow: var(--sh3); }
.ins__k:hover img { transform: scale(1.07); }
.ins__k:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.ins__vd { position: absolute; right: 7px; top: 7px;
           display: inline-flex; align-items: center; justify-content: center;
           width: 22px; height: 22px; color: var(--koyu);
           background: rgba(255,255,255,.92); border-radius: var(--rp); }

@media (max-width: 680px) {
  .ins__k { width: 116px; height: 116px; margin-right: 10px; }
}

/* Hareketi azaltma tercihinde bant akmaz; parmakla kaydirilabilir kalir.
   Ikinci kopya ekranda durmasi sorun degil — ayni kareler, zararsiz. */
@media (prefers-reduced-motion: reduce) {
  .insb { overflow-x: auto; scrollbar-width: none; }
  .insb::-webkit-scrollbar { display: none; }
  .insb__ray { animation: none; }
}