/* ── Marka ana sayfasi "Iz" (2026-10-13) — views/brand-home.ejs section.iz · public/js/brand-iz.js ──
   Ilham: Likya Yolu'nun kayalara boyanmis kirmizi-beyaz isaretleri. Harita kagidi zemin, silik es-yukselti
   cizgileri; solda duragin fotografi, sagda metni ve altinda patika: boyali taslar = duraklar, yuruyucu
   bir sonrakine yurur, yurunen yol kirmiziyla dolar. Tek cesur renk: isaret kirmizisi. */
.iz { --iz-kagit: #ece5d7; --iz-murekkep: #24211c; --iz-yazi: #3a352d; --iz-soluk: #74695a; --iz-altin: #9a7a45;
  --iz-kirmizi: #b0442c; --iz-beyaz: #fbf8f2; --iz-tas: #cfc6b5; --iz-cizgi: rgba(36,33,28,.13);
  position: relative; overflow: hidden; background: var(--iz-kagit); color: var(--iz-yazi);
  padding: clamp(64px, 9vh, 104px) 0 clamp(64px, 9vh, 100px); }
.iz-harita { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.iz-harita path { fill: none; stroke: rgba(120,98,66,.16); stroke-width: 1; }
.iz-ic { position: relative; padding: 0 max(24px, calc((100vw - 1180px) / 2)); }

.iz-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(30px, 4.5vh, 48px); }
.iz-etiket { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--iz-altin); margin-bottom: 14px; }
.iz-etiket::before { content: ""; width: 18px; height: 10px; flex: 0 0 auto;
  background: linear-gradient(var(--iz-beyaz) 0 50%, var(--iz-kirmizi) 50% 100%); box-shadow: 0 0 0 1px rgba(36,33,28,.12); border-radius: 1px; }
.iz .iz-baslik { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -.01em; color: var(--iz-murekkep); }
.iz .iz-baslik em { font-style: italic; color: var(--iz-altin); }
.iz .iz-not { margin: 0; max-width: 340px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--iz-soluk); text-align: right; }

/* sahne: solda fotograf, sagda metin + patika */
.iz-sahne { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 76px); align-items: stretch; }
.iz-gorseller { position: relative; aspect-ratio: 4 / 5; max-height: clamp(360px, 54vh, 500px); width: 100%; justify-self: start;
  border-radius: 2px; overflow: hidden; background: #d8cfbf; box-shadow: 0 40px 70px -46px rgba(36,33,28,.7); }
.iz-gorsel { position: absolute; inset: 0; display: block; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.25,1); z-index: 0; }
.iz-gorsel.is-geri { clip-path: inset(0 0 0 100%); }
.iz-gorsel.is-on { clip-path: inset(0 0 0 0); z-index: 1; }
.iz-gorsel span { position: absolute; inset: 0; background-size: cover; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.2,.75,.2,1); }
.iz-gorsel.is-on span { transform: none; }
.iz-gorsel.is-on:hover span { transform: scale(1.03); }
.iz-sayac { position: absolute; left: 16px; bottom: 14px; z-index: 2; padding: 6px 10px; background: rgba(251,248,242,.92); border-radius: 1px;
  font-family: var(--serif); font-size: 15px; letter-spacing: .06em; color: var(--iz-soluk); }
.iz-no { color: var(--iz-murekkep); }

.iz-sag { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.iz-metinler { position: relative; min-height: 220px; }
.iz-metin[hidden] { display: none; }
.iz-metin.is-on { animation: izMetin .8s cubic-bezier(.2,.75,.2,1) both; }
@keyframes izMetin { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.iz-kart-etiket { font-family: var(--sans); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--iz-kirmizi); margin-bottom: 14px; }
.iz .iz-kart-baslik { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.1vw, 46px); line-height: 1.06; color: var(--iz-murekkep); }
.iz .iz-kart-acik { margin: 0 0 22px; max-width: 520px; font-family: var(--serif); font-size: 18.5px; line-height: 1.65; color: var(--iz-yazi); }
.iz-link { display: inline-block; position: relative; padding-bottom: 7px; font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--iz-murekkep); text-decoration: none; }
.iz-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 34px; background: var(--iz-kirmizi); transition: width .5s cubic-bezier(.2,.75,.2,1); }
.iz-link:hover::after { width: 100%; }
.iz-link span { display: inline-block; transition: transform .3s; }
.iz-link:hover span { transform: translateX(4px); }

/* patika */
.iz-patika { position: relative; height: 150px; margin-top: 26px; }
.iz-yol { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 108px; overflow: visible; }
.iz-yol path { fill: none; stroke-linecap: round; }
.iz-yol-ileri { stroke: rgba(36,33,28,.32); stroke-width: 1.4; stroke-dasharray: 1 7; }
.iz-yol-yurunen { stroke: var(--iz-kirmizi); stroke-width: 2; opacity: .85; }
.iz-yuruyen { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--iz-murekkep);
  box-shadow: 0 0 0 4px rgba(236,229,215,.95), 0 0 0 5px rgba(36,33,28,.25); z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .3s; }
.iz.is-yuruyor .iz-yuruyen { opacity: 1; } /* yalniz yururken: durakta tasin isaretini kapatmasin */

.iz-durak { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 132px; margin-left: -66px;
  padding: 0; background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  transform: translateY(-16px); } /* tasin ortasi yolun ustunde; ad alta sarkar (top JS'ten, px) */
.iz-tas { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0; width: 38px; height: 32px; padding: 6px 8px;
  background: var(--iz-tas); border-radius: 46% 54% 40% 60% / 55% 45% 58% 42%; box-shadow: inset 0 -3px 0 rgba(36,33,28,.12), 0 6px 12px -8px rgba(36,33,28,.6);
  transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .4s; opacity: .55; }
.iz-tas i { display: block; height: 7px; border-radius: 1px; }
.iz-tas i:first-child { background: var(--iz-beyaz); }
.iz-tas i:last-child { background: var(--iz-kirmizi); }
.iz-durak.is-gecildi .iz-tas, .iz-durak.is-on .iz-tas { opacity: 1; }
.iz-durak.is-on .iz-tas { transform: scale(1.3); }
.iz-durak:hover .iz-tas { transform: scale(1.18); opacity: 1; }
.iz-durak.is-on:hover .iz-tas { transform: scale(1.3); }
.iz-durak-ad { margin-top: 12px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.45;
  color: var(--iz-soluk); text-align: center; transition: color .3s; }
.iz-durak.is-on .iz-durak-ad { color: var(--iz-murekkep); }
.iz-durak:focus-visible { outline: none; }
.iz-durak:focus-visible .iz-tas { outline: 2px solid var(--iz-altin); outline-offset: 4px; }
.iz a:focus-visible { outline: 2px solid var(--iz-altin); outline-offset: 4px; }

/* sure cizgisi: aktif tasin altinda ince kirmizi cizgi dolar */
.iz-durak.is-on .iz-tas::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -7px; height: 1px; background: rgba(176,68,44,.25); }
.iz.is-akiyor .iz-durak.is-on .iz-tas::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: -7px; height: 1px; background: var(--iz-kirmizi);
  transform-origin: left; animation: izSure 7s linear forwards; }
@keyframes izSure { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .iz-bas { flex-direction: column; align-items: flex-start; gap: 14px; }
  .iz .iz-not { text-align: left; }
  .iz-sahne { grid-template-columns: 1fr; gap: 26px; }
  .iz-gorseller { aspect-ratio: 4 / 3; max-height: none; }
  .iz-metinler { min-height: 0; }
  .iz-durak { width: 56px; margin-left: -28px; }
  /* dar ekranda durak adi yok: aktif duragin basligi hemen ustte buyuk yaziyor; kenardan tasmasin */
  .iz-durak-ad, .iz-durak.is-on .iz-durak-ad { display: none; }
  .iz-patika { height: 92px; margin: 6px 22px 0; }
  .iz .iz-kart-acik { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .iz-gorsel, .iz-gorsel span, .iz-tas, .iz-metin.is-on { transition: none !important; animation: none !important; }
}