/* ==========================================================================
   SAYFA · ANASAYFA
   Yalnizca anasayfada kullanilan bloklar. Ortak parcalar 04-components'ta.
   ========================================================================== */

/* ------------------------------------------------------------------- HERO */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(88px, 13vh, 132px);
  /* Alt bosluk cerez bandi ve mobil CTA cubugunu hesaba katar */
  padding-bottom: clamp(48px, 9vh, 104px);
  background: var(--c-ink);
  color: var(--c-paper);
  overflow: hidden;
}

.hero__backdrop { position: absolute; inset: 0; }

/* HERO SLAYTI
   Uc kare sirayla gecer. JavaScript YOK: animasyon saf CSS oldugu icin
   betikler kapaliyken ya da yuklenemediginde ilk kare yerinde durur ve
   hero bos kalmaz.

   Kareler ust uste yigilir; sonraki katman oncekinin uzerine binerek
   acilir, bu yuzden yalnizca opaklik animasyonu yeterlidir. */
.hero__layer {
  position: absolute;
  inset: 0;
  border-radius: 0;
  opacity: 0;
}

/* JS'siz taban durum: ilk kare her zaman gorunur. */
.hero__layer:first-child { opacity: 1; }

.hero__layer > picture,
.hero__layer > img,
.hero__layer picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* ODAK YUKARIDA: hero fotograflarinda anlatan kisim ust yaridadir
     (tabela, cardak catisi, agaclar). Merkeze hizalanınca binanin
     onundeki cop bidonlari ve klima uniteleri kadraja giriyordu.
     %38 ile alt serit kirpilir, gokyuzu ve yapi korunur. */
  object-position: center 38%;
}

/* Tek kare varsa animasyona gerek yok; ilk katman zaten gorunur. */

/* GECIKME NEDEN BOYLE: animation-delay NEGATIF verilir, yani animasyon
   "zaten su kadar sure gecmis gibi" baslar. Katman i icin yerel zaman
   (t + gecikme) olur; i. karenin t = i x 7sn'de gorunmesi icin gecikme
   -(N - i) x 7sn olmalidir. Duz -i x 7sn verildiginde sira 1, 3, 2
   diye donuyordu.

   Kare sayisi degisince dongu suresi ve gecis yuzdeleri de degisir;
   bu yuzden 2 ve 3 kare ayri ayri yazildi. Panelden en fazla uc slayt
   girilebiliyor, dolayisiyla bu iki durum yeterlidir. */

/* --- iki kare: 14 sn dongu --- */
.hero__backdrop[data-slayt-sayisi="2"] .hero__layer {
  animation: hero-slayt-2 14s linear infinite;
  animation-delay: calc((2 - var(--slayt, 0)) * -7s);
}
@keyframes hero-slayt-2 {
  0%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

/* --- uc kare: 21 sn dongu, kare basina 7 sn --- */
.hero__backdrop[data-slayt-sayisi="3"] .hero__layer {
  animation: hero-slayt-3 21s linear infinite;
  animation-delay: calc((3 - var(--slayt, 0)) * -7s);
}
@keyframes hero-slayt-3 {
  0%     { opacity: 1; }
  28%    { opacity: 1; }   /* ~6 sn tam gorunur */
  33.34% { opacity: 0; }   /* 1 sn'lik gecis */
  94.66% { opacity: 0; }
  100%   { opacity: 1; }
}

/* Cok yavas yaklasma: kare canlanir ama hareket fark edilmez.
   Olcek 1.06'yi gecmez; daha fazlasi kirpma hissi verir. */
.hero__backdrop[data-slayt-sayisi="2"] .hero__layer picture,
.hero__backdrop[data-slayt-sayisi="3"] .hero__layer picture {
  animation: hero-yaklas 21s ease-in-out infinite;
  animation-delay: inherit;
  transform-origin: 50% 55%;
  will-change: transform;
}

@keyframes hero-yaklas {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Hareket azaltma acikken slayt DURUR ve ilk kare kalir.
   Donen arka plan bu ayari acan kullanici icin rahatsiz edicidir. */
@media (prefers-reduced-motion: reduce) {
  .hero__backdrop .hero__layer,
  .hero__backdrop .hero__layer picture,
  .hero__backdrop .hero__layer > img {
    animation: none !important;
  }
  .hero__layer { opacity: 0; }
  .hero__layer:first-child { opacity: 1; }
}

/* Hero yer tutucusunun etiketi ekranin ortasinda durup mobilde metnin
   uzerine biniyordu. Hangi fotografin nereye gelecegi assets/img/README.md
   dosyasinda yazili; ekranda gostermeye gerek yok. */
.hero__layer .media__label { display: none; }

/* Metnin okunabilmesi icin iki katmanli karartma */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* UST: header bu perdenin uzerinde duruyor. Fotografin ust kismi
       acik gokyuzune denk geldiginde menu baglantilari kayboluyordu;
       bu katman header seridini her fotografta okunur tutar. */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-ink) 74%, transparent) 0%,
      color-mix(in srgb, var(--c-ink) 34%, transparent) 16%,
      transparent 32%),
    /* SOL: baslik ve giris metni bloğu. Perde metnin okundugu kadar
       koyu; fotografi gereksiz karartmaz. Kontrast a11y testiyle
       dogrulanir, "goze iyi geliyor" ile degil.

       DEGERLER YUKSELTILDI: hero artik uc kare arasinda geciyor ve
       kareler farkli parlaklikta. En aydinlik olanda baslik kontrasti
       2.95:1'e dusuyordu (gereken 3:1). Perde EN AYDINLIK kareye gore
       ayarlanir; boylece slayt hangi kareye gecerse gecsin metin
       okunur kalir. */
    linear-gradient(100deg,
      color-mix(in srgb, var(--c-ink) 90%, transparent),
      color-mix(in srgb, var(--c-ink) 78%, transparent) 46%,
      color-mix(in srgb, var(--c-ink) 30%, transparent) 74%,
      transparent),
    /* ALT: bir sonraki bolume gecis. Bina karesinde girisin onundeki
       su bidonlari ve klima uniteleri bu seride kaliyor; perde biraz
       daha uzun ve koyu tutularak geri cekilirler. Fotografin anlatan
       kismi (tabela, cati, gokyuzu) ust yaridadir, oraya dokunmaz. */
    linear-gradient(to top,
      color-mix(in srgb, var(--c-ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--c-ink) 40%, transparent) 18%,
      transparent 42%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-container-lg);
  margin-inline: auto;
  padding-inline: var(--sp-gutter) clamp(76px, 9vw, 150px);
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 2.6vh, 34px);
}

.hero__eyebrow { color: var(--c-paper-82); }

.hero__title {
  margin: 0;
  font-size: var(--t-hero);
  /* 0.92 idi: italik "başka" ve "sofra" gibi kelimelerde ş/ğ/p alt
     uzantilari .hero__line'in overflow:hidden'i tarafindan kirpiliyordu. */
  line-height: 1.0;
  max-width: 16ch;
}

/* Baslik satirlari asagidan yukari kayarak girer */
.hero__line {
  display: block;
  overflow: hidden;
  /* Alt uzantilar icin pay: ş, ç, ğ, p, y harfleri kirpilmasin */
  padding-bottom: 0.06em;
}
.hero__line > * {
  display: block;
  transform: translateY(110%);
  animation: hero-rise 1100ms var(--e-out) forwards;
}
.hero__line:nth-child(2) > * { animation-delay: 90ms; }
.hero__line em { font-style: italic; }

@keyframes hero-rise {
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__line > * { transform: none; animation: none; }
}

.hero__lead {
  margin: 0;
  max-width: 38ch;
  font-size: var(--t-lead);
  color: color-mix(in srgb, var(--c-paper) 86%, transparent);
}


/* ------------------------------------------------------- Hizli musaitlik */

.quick-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  max-width: 920px;
  padding: 10px;
  border-radius: clamp(var(--r-lg), 4vw, var(--r-pill));
  background: color-mix(in srgb, var(--c-paper) 93%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  color: var(--c-ink);
}

.quick-search__field {
  flex: 1 1 150px;
  min-width: 0;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.quick-search__field:hover { background: var(--c-fog); }

.quick-search__field :is(input, select) {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}
.quick-search__field :is(input, select):focus { outline: none; }
.quick-search__field:focus-within {
  background: var(--c-fog);
  outline: 2px solid var(--c-leaf);
  outline-offset: 2px;
}

.quick-search__divider {
  width: 1px;
  height: 32px;
  background: var(--c-line);
}

.quick-search__submit { flex: 0 0 auto; margin-inline-start: auto; }

@media (max-width: 640px) {
  .quick-search__divider { display: none; }
  .quick-search__field { flex: 1 1 100%; }
  .quick-search__submit { width: 100%; margin-inline-start: 0; }
}

/* ------------------------------------------------------- Mevsim anahtari */

/* ------------------------------------------------------------ Guven serit */

.trust-strip { padding-block: 14px; }
.trust-strip .marquee__item { color: var(--c-forest); }

/* ------------------------------------------------------------ Yirtik kenar */

.torn-edge { line-height: 0; }
.torn-edge svg { display: block; width: 100%; height: clamp(24px, 3vw, 48px); }
.torn-edge--down { background: var(--c-paper); }
.torn-edge--down path { fill: var(--c-ink); }
.torn-edge--footer { background: var(--c-fog); }
.torn-edge--footer path { fill: var(--c-ink); }
.torn-edge--footer svg { height: clamp(20px, 2.4vw, 40px); }

/* -------------------------------------------------------------- Restoran */

.restaurant-split {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .restaurant-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.restaurant-split__media {
  position: relative;
  min-height: clamp(320px, 52vw, 720px);
  border-radius: 0;
}
.restaurant-split__body { padding: clamp(48px, 7vw, 120px) clamp(24px, 5vw, 88px); }
.restaurant-split .price-row { border-bottom-color: var(--c-line-dark); }

/* ------------------------------------------------------ Ne ararsan burada */

.finders { position: relative; }

/* SATIR YERLESIMI
   Solda baslik, sagda kucuk bir kare vardi; arada 700 piksellik olu
   bant kaliyordu. Ikon ve ok isareti o bandi baglar, goz soldan saga
   akar. Ok esnek bosluktan SONRA gelir, yani kare her zaman en sagda
   hizali durur. */
.finder-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding-block: clamp(16px, 2vw, 26px);
  border-top: 1px solid var(--c-line-dark);
  color: var(--c-paper);
  transition: color var(--d-slow) var(--e-out);
}
.finder-row:hover { color: var(--c-accent); }

.finder-row__ikon {
  flex: 0 0 auto;
  display: inline-flex;
  opacity: 0.45;
  transition: opacity var(--d-base) var(--e-out);
}
.finder-row:hover .finder-row__ikon { opacity: 0.9; }

/* Baslik esnek: kalan genisligi doldurur, ok isaretini saga iter. */
.finder-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-display);
  font-variation-settings: var(--f-display-vars);
  font-weight: var(--w-display);
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}

/* Nereye gidilecegini soyleyen kisa etiket. Mono ve kucuk: basligin
   yanindaki ikinci bir baslik gibi durmaz, bilgi olarak okunur. */
.finder-row__hedef {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: lowercase;
  opacity: 0.5;
  transition: opacity var(--d-base) var(--e-out);
}
.finder-row:hover .finder-row__hedef { opacity: 0.85; }

.finder-row__ok {
  flex: 0 0 auto;
  display: inline-flex;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.finder-row:hover .finder-row__ok,
.finder-row:focus-visible .finder-row__ok { opacity: 0.85; transform: translateX(0); }

.finder-row__thumb {
  flex: 0 0 auto;
  width: 64px;
  border-radius: var(--r-md);
  /* Yer tutucuyken cok soluktu (0.4). Gercek fotograf gelince bu deger
     kareyi tanınmaz hale getiriyor; okunur bir taban veriyoruz. */
  opacity: 0.78;
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.finder-row:hover .finder-row__thumb { opacity: 1; transform: scale(1.05); }

@media (min-width: 700px) {
  .finder-row__thumb { width: 108px; }
}

/* Dar ekranda ok ile ikon gizlenir: 380 piksellik satirda baslik ve
   kare zaten yer kaplar, ucuncu bir oge sikistirirdi. */
@media (max-width: 560px) {
  .finder-row__ok,
  .finder-row__hedef,
  .finder-row__ikon { display: none; }
}

/* ---------------------------------------------------------------- Galeri */

.gallery { overflow: hidden; }
.gallery__rows { display: flex; flex-direction: column; gap: var(--sp-4); }
.gallery__track { gap: var(--sp-4); padding-inline-end: var(--sp-4); }

.gallery__cell {
  display: block;
  flex: 0 0 auto;
  width: clamp(160px, 22vw, 260px);
  border-radius: var(--r-lg);
  transition: transform 500ms var(--e-out);
}
.gallery__cell:hover { transform: scale(1.04); }

/* ------------------------------------------------------------ Blog karti */

.post-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  gap: 0;
  transition: transform var(--d-reveal) var(--e-out), box-shadow var(--d-reveal) var(--e-out);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.post-card .card__media { border-radius: 0; margin: 0; }
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 20px;
}

.post-card__date {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  line-height: 1.5;
  pointer-events: none;
}

/* ------------------------------------------------------------------- CTA */

.cta-split {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--c-fog);
}
@media (min-width: 900px) {
  .cta-split { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
}

.cta-split__panel {
  position: relative;
  padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 80px);
  background: var(--c-forest);
  color: var(--c-paper);
  overflow: hidden;
}

.cta-split__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}
.cta-split__route path {
  fill: none;
  stroke: var(--c-paper);
  stroke-width: 1.2;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw-route 2.4s linear forwards;
  animation-delay: 300ms;
}
.cta-split__route path:nth-child(2) { animation-delay: 600ms; }

@keyframes draw-route {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-split__route path { animation: none; stroke-dashoffset: 0; }
}

.cta-split__content { position: relative; max-width: 34ch; }

.cta-split__quote {
  margin: var(--sp-5) 0 var(--sp-7);
  font-family: var(--f-display);
  font-variation-settings: var(--f-display-vars);
  font-weight: var(--w-display);
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}

.cta-split__media {
  position: relative;
  min-height: clamp(260px, 38vw, 520px);
  border-radius: 0;
}

/* ==========================================================================
   Taste denetimi sonrasi eklenen bloklar
   ========================================================================== */

/* ------------------------------------------------------- Kart ipucu oku
   "İncele →" gibi metinlerde ok, kart hover'inda kayar.               */

.card__cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-forest);
  font-weight: 500;
}
.card__cue::after {
  content: "\2192";
  font-family: var(--f-mono);
  transition: transform var(--d-base) var(--e-out);
}
.card:hover .card__cue::after { transform: translateX(5px); }

/* ---------------------------------------------------- Organizasyon seridi
   Dort farkli zeminli karo. Ayni beyaz kartin dort kez tekrarlanmasi
   yapay zeka uretimi izgaralarin en bilinen imzasidir; her karo farkli
   bir yuzey tasiyor.                                                   */

/* Sutun sayisi ACIK yazilir. `auto-fit` genis ekranda 4 sutun uretip
   3 organizasyon turunun yanina bos bir hucre birakiyordu. */
.org-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: clamp(28px, 4vw, 48px);
}

@media (min-width: 640px)  { .org-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .org-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* KART YERLESIMI
   Once kart 250px'e sabitlenmis, icerik uste birakilmisti; altta
   195 piksellik olu alan kaliyordu. Artik ikon uste, metin ALTA
   yaslanir (govde margin-top: auto) ve arada kalan bosluk kartin
   nefesi olur, bosluk degil. */
.org-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: clamp(190px, 21vw, 240px);
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  color: var(--c-ink);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}

.org-tile__ikon {
  display: block;
  opacity: 0.42;
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.org-tile:hover .org-tile__ikon { opacity: 0.7; transform: translateY(-2px); }

/* Metin bloku alta yaslanir; ikonla arasindaki bosluk otomatik. */
.org-tile__govde {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: auto;
}

/* Ok yalnizca kartin uzerine gelince belirir: durgun halde
   kalabalık yapmaz, etkilesimde yonu gosterir. */
.org-tile__ok {
  display: inline-flex;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.org-tile:hover .org-tile__ok,
.org-tile:focus-visible .org-tile__ok { opacity: 0.85; transform: translateX(0); }
.org-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.org-tile__capacity {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0.72;
}
.org-tile__name {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
}
.org-tile__lead { font-size: 0.875rem; opacity: 0.78; }

/* Dort ayri yuzey */
.org-tile--0 {
  background: var(--c-forest);
  color: var(--c-paper);
}
.org-tile--1 {
  background: var(--c-paper);
  border-color: var(--c-line);
}
.org-tile--2 {
  background: color-mix(in srgb, var(--c-ember) 20%, var(--c-paper));
  border-color: color-mix(in srgb, var(--c-ember) 42%, transparent);
}
.org-tile--3 {
  background: var(--c-ink);
  color: var(--c-paper);
}
.org-tile--0:hover,
.org-tile--3:hover { color: var(--c-paper); }

/* ------------------------------------------------------------ Bento galeri
   Yedi karo, yedi hucre. Bos hucre birakmayan asimetrik duzen.        */

.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: clamp(24px, 3vw, 40px);
}
.bento__cell {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  transition: transform var(--d-base) var(--e-out);
}
.bento__cell:hover { transform: scale(1.015); }

/* Fotograf gelene kadar hucreler ayni soluk kutu olmasin diye hafif ton
   farki. Gercek gorsel yuklendiginde .has-image bu zemini kapatir. */
.bento__cell--0 { background: color-mix(in srgb, var(--c-forest) 16%, var(--c-fog)); }
.bento__cell--3 { background: color-mix(in srgb, var(--c-ember) 14%, var(--c-fog)); }
.bento__cell--5 { background: color-mix(in srgb, var(--c-ink) 12%, var(--c-fog)); }

@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(0, 1fr);
  }
  /* 0: buyuk sol blok · 1-2: sag ust ikili · 3: genis sag · 4-6: alt ucllu */
  .bento__cell--0 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .bento__cell--1 { grid-column: span 1; aspect-ratio: auto; }
  .bento__cell--2 { grid-column: span 1; aspect-ratio: auto; }
  .bento__cell--3 { grid-column: span 2; aspect-ratio: auto; }
  .bento__cell--4,
  .bento__cell--5 { grid-column: span 1; aspect-ratio: auto; min-height: clamp(150px, 15vw, 210px); }
  /* Son karo iki sutun kaplar: aksi halde alt satirin sagi bos kalir ve
     izgara "yanlis planlanmis" gorunur. */
  .bento__cell--6 { grid-column: span 2; aspect-ratio: auto; min-height: clamp(150px, 15vw, 210px); }
}

/* ==========================================================================
   Restoran yapisina gecis sonrasi eklenen bloklar
   ========================================================================== */

/* ------------------------------------------------------------ Hero eylemleri */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

/* Butonlarin yaninda duruyor; dokunma alani onlarla ayni yukseklikte
   olmali ki parmakla isabet ettirmek kolay olsun. */
.hero__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  font-family: var(--f-mono);
  font-size: var(--t-md);
  letter-spacing: 0.12em;
  color: var(--c-paper-82);
  border-bottom: 1px solid transparent;
}
.hero__phone:hover {
  color: var(--c-leaf);
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------- Menü önizleme */

.menu-preview { row-gap: clamp(40px, 5vw, 64px); }

.menu-preview__title {
  margin-bottom: var(--sp-3);
  font-size: var(--t-h3);
  font-weight: var(--w-display);
}

/* ----------------------------------------------------------- Çardak ikilisi
   Iki kart; ilki genis, ikincisi dar. Esit iki kart yerine asimetri.    */

.gazebo-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: clamp(28px, 4vw, 48px);
}

@media (min-width: 900px) {
  .gazebo-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.gazebo-card {
  display: grid;
  gap: var(--sp-4);
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--r-xl);
  color: var(--c-ink);
  transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.gazebo-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.gazebo-card--0 { background: var(--c-fog); border: 1px solid var(--c-line); }
.gazebo-card--1 { background: var(--c-ink); color: var(--c-paper); --c-muted: var(--c-stone); }
.gazebo-card--1:hover { color: var(--c-paper); }

.gazebo-card__media { border-radius: var(--r-lg); }

.gazebo-card__body { display: grid; gap: var(--sp-2); }

.gazebo-card__name {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
}
.gazebo-card__lead { font-size: 0.9375rem; opacity: 0.82; }

.gazebo-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ------------------------------------------------------------ Canlı müzik */

.event-band__media { border-radius: var(--r-xl); }

.event-band__includes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-band__includes li {
  position: relative;
  padding-inline-start: 18px;
  font-family: var(--f-mono);
  font-size: var(--t-md);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-stone);
}
.event-band__includes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--c-leaf);
  border-radius: var(--r-pill);
}

.event-band__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-ember);
}
.event-band__price-note {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-stone);
}

/* ------------------------------------------------------ Hakkımızda bölümü
   Anasayfanin ikinci bolumu: once kim oldugumuz. Iki katmanli:
   ustte asimetrik metin + gorsel, altta uc sutunlu deger seridi.       */

.home-about__intro { align-items: center; }

.home-about__media { position: relative; }

/* Gorsel, metin sutunundan bir tik tasarak duragan ikili duzeni kirar. */
@media (min-width: 900px) {
  .home-about__media { margin-inline-start: var(--sp-5); }
  .home-about__media .media { border-radius: var(--r-lg); }
}

/* Deger seridi ayri bir bolum degil; ustundeki metinle ayni bolumun
   ikinci katmani oldugu icin ince bir cizgiyle ayrilir.               */
.home-about__values {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--c-line);
}

/* --------------------------------------------------------------- Değerler */

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-6);
}

.value {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--c-leaf);
}
.value__title {
  margin: var(--sp-3) 0;
  font-size: var(--t-h3);
  font-weight: var(--w-display);
}
.value__body { margin: 0; color: var(--c-muted); }

/* -------------------------------------------------- Organizasyon karoları */

.org-tile__name { margin-top: 0; }

/* ================================================= ETKİNLİK KARUSELİ
   Yatay kaydirmali ray. Ok tuslari, fare ile surukleme ve ilerleme
   cubugu assets/js/modules/home.js icindeki initRail() tarafindan
   yonetilir.                                                        */

.rail--bleed {
  --rail-gutter: max(var(--sp-gutter), calc((100vw - var(--w-container)) / 2 + var(--sp-gutter)));

  margin-top: clamp(28px, 4vw, 48px);
  padding-inline: var(--rail-gutter);
  /* scroll-padding SART: onsuz scroll-snap ilk karti scrollport'un
     basina yapistirir ve soldaki bosluk gorunmez olur. */
  scroll-padding-inline: var(--rail-gutter);
}

.rail-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.rail-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--btn-ghost-border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--btn-ghost-fg);
  font-family: var(--f-mono);
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}
.rail-btn:hover:not([disabled]) {
  background: var(--c-leaf);
  border-color: var(--c-leaf);
  color: var(--c-ink);
}
.rail-btn[disabled] { opacity: 0.32; }

/* ------------------------------------------------------- Etkinlik karti */

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(260px, 76vw, 330px);
  background: color-mix(in srgb, var(--c-paper) 6%, transparent);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--d-slow) var(--e-out),
              border-color var(--d-slow) var(--e-out),
              background var(--d-slow) var(--e-out);
}
.event-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c-leaf) 55%, transparent);
  background: color-mix(in srgb, var(--c-paper) 10%, transparent);
}

/* One cikan etkinlik kor cizgisiyle ayrilir */
.event-card--featured { border-color: color-mix(in srgb, var(--c-ember) 60%, transparent); }

.event-card__media { display: block; border-radius: 0; }

.event-card__flag {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-ember);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  padding: 18px 18px 20px;
  border-top: 1px solid var(--c-line-dark);
}

.event-card__season {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.event-card__title {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: var(--t-h4);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.event-card__title a { color: var(--c-paper); }
.event-card:hover .event-card__title a { color: var(--c-leaf); }

.event-card__sub {
  font-size: 0.875rem;
  color: var(--c-muted);
}
.event-card__lead { font-size: 0.9375rem; color: var(--c-paper-82); }

.event-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-dark);
}

.event-card__price {
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  color: var(--c-warm);
  font-variant-numeric: lining-nums tabular-nums;
}
.event-card__price--ask { color: var(--c-muted); font-size: 0.8125rem; }
.event-card__price-note {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.event-card .card__cue { color: var(--c-leaf); }

/* ---------------------------------------------------------------- Instagram
   Solda cagri, sagda kare izgarasi. Kareler tesisin kendi fotograflaridir;
   canli akis cekilmez (bkz. home.php icindeki not).                        */

.insta__grid {
  display: grid;
  gap: var(--sp-gap);
  align-items: center;
}

@media (min-width: 900px) {
  .insta__grid { grid-template-columns: 5fr 7fr; }
}

.insta__metin { min-width: 0; }

/* Hesap adi: baglanti oldugu belli olsun ama buton gibi durmasin. */
.insta__hesap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--t-base);
  letter-spacing: 0.02em;
  color: var(--c-forest);
  text-decoration: none;
  transition: color var(--d-base) var(--e-out);
}
.insta__hesap:hover { color: var(--c-leaf-text); }

.insta__ikon {
  display: inline-grid;
  place-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  color: var(--c-paper);
  /* Instagram'in kendi renk gecisine yakin ama markanin disina cikmayan
     sicak bir gecis; logo taklidi degil, isaret. */
  background: linear-gradient(135deg, var(--c-ember), var(--c-forest));
}

/* Uc sutun x iki satir. Kareler tam kare: izgara duzensiz gorunmesin. */
.insta__kareler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.insta__kare {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 1 / 1;
  background: var(--c-line-dark);
}

.insta__kare :is(picture, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--d-slow) var(--e-out);
}

.insta__kare:hover :is(picture, img),
.insta__kare:focus-visible :is(picture, img) { transform: scale(1.06); }

/* Uzerine gelince hafif bir perde: tiklanabilir oldugu anlasilsin. */
.insta__kare::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-ink) 26%, transparent);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.insta__kare:hover::after,
.insta__kare:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .insta__kare :is(picture, img) { transition: none; }
  .insta__kare:hover :is(picture, img) { transform: none; }
}

@media (max-width: 560px) {
  .insta__kareler { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
}