/* =====================================================================
   RİNAS TURİZM — ÖN YÜZ
   Palet markanın kendi altın mühründen alındı: antrasit + altın + krem.
   Umre/hac tarafında ağırbaşlı, kültür turlarında ferah durması için
   koyu yalnız başlık/alt bilgi ve vurgu bloklarında kullanılıyor.
   ===================================================================== */

:root {
  --gece:      #12161A;
  --gece-2:    #0B0E11;
  --gece-3:    #1D242B;
  --altin:     #C9A227;
  --altin-ac:  #E0BC55;
  --altin-koy: #9A7A17;
  --bej:       #B79C74;

  --kagit:     #FDFBF7;
  --kagit-2:   #F6F1E7;
  --ak:        #FFFFFF;
  --murekkep:  #171C21;
  --murekkep-2:#55606B;
  --murekkep-3:#8A949E;
  --cizgi:     #E7E0D3;

  --yesil-wa:  #25D366;

  --en: 1220px;
  --bosluk: 22px;
  --r:     16px;
  --r-sm:  10px;
  --r-lg:  24px;

  --golge-1: 0 1px 2px rgba(23,28,33,.05), 0 2px 8px rgba(23,28,33,.05);
  --golge-2: 0 3px 8px rgba(23,28,33,.06), 0 12px 28px rgba(23,28,33,.08);
  --golge-3: 0 6px 14px rgba(23,28,33,.07), 0 22px 48px rgba(23,28,33,.13);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  font-size: 16.5px; line-height: 1.68;
  color: var(--murekkep); background: var(--kagit);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--altin-koy); text-decoration: none; }
a:hover { color: var(--gece); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.14rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2rem 0; }

.sarmal { width: 100%; max-width: var(--en); margin-inline: auto; padding-inline: var(--bosluk); }
.dar { max-width: 800px; }
.orta { text-align: center; }
.gizli-erisim {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.atla {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--altin); color: #221A00; padding: .6em 1em; border-radius: 0 0 8px 8px;
}
.atla:focus { top: 0; }
.ikon { width: 1.05em; height: 1.05em; flex: none; }
.ayrac { color: var(--murekkep-3); margin-inline: .4em; }

/* ================================================== Instagram şeridi
   ⚠ Panelden aç/kapa (Ayarlar → Üst şerit). */
.ig-serit {
  background: linear-gradient(90deg, #4B2A6A 0%, #B3277B 45%, #E8802F 100%);
  color: #fff; font-size: .88rem;
  /* ⚠ Altındaki siyah bant kaldırıldı; şerit doğrudan beyaz menüye
     oturuyor (Emir'in isteği). */
}
.ig-serit .sarmal {
  display: flex; align-items: center; gap: .7rem;
  padding-block: .5rem; flex-wrap: wrap; justify-content: center;
}
.ig-ikon svg { width: 19px; height: 19px; display: block; }
.ig-metin { font-weight: 500; }
.ig-dugme {
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4);
  padding: .18em .9em; border-radius: 999px; font-weight: 600; font-size: .84rem;
  backdrop-filter: blur(4px);
}
.ig-dugme:hover { background: #fff; color: #B3277B; }

/* ------------------------------------------------------------ başlık */
.tepe {
  background: var(--ak); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 40; box-shadow: var(--golge-1);
}
.tepe .sarmal { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; }

.marka { display: flex; align-items: center; gap: .7rem; flex: none; }
.marka img { border-radius: 50%; }
.marka-yazi strong {
  display: block; font-size: 1.16rem; letter-spacing: .06em; color: var(--gece);
  font-weight: 800; line-height: 1.1;
}
.marka-yazi strong span { color: var(--altin-koy); }
.marka-yazi small {
  display: block; font-size: .69rem; color: var(--murekkep-3);
  letter-spacing: .1em; text-transform: uppercase;
}

.menu { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.menu > a, .menu-alt > button {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55em .85em; border-radius: 999px; font-size: .95rem; font-weight: 600;
  color: var(--murekkep); background: none; border: 0; font-family: inherit; cursor: pointer;
}
.menu > a:hover, .menu-alt > button:hover { background: var(--kagit-2); color: var(--gece); }
.menu > a[aria-current="page"] { background: var(--kagit-2); color: var(--altin-koy); }

.menu-alt { position: relative; }
.menu-alt > button::after {
  content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.menu-kutu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px;
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r-sm);
  box-shadow: var(--golge-2); padding: .4rem; display: none; z-index: 50;
}
.menu-alt.acik .menu-kutu { display: block; }
.menu-kutu a {
  display: block; padding: .5em .7em; border-radius: 6px;
  color: var(--murekkep); font-size: .93rem;
}
.menu-kutu a:hover { background: var(--kagit-2); color: var(--altin-koy); }

.menu-ac { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-ac span { width: 22px; height: 2px; background: var(--gece); border-radius: 2px; }
.tepe-btn { flex: none; display: flex; align-items: center; gap: .7rem; }
/* Siyah üst bant kalkınca telefon buraya taşındı. */
.tepe-tel {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--murekkep); font-weight: 700; font-size: .95rem; white-space: nowrap;
}
.tepe-tel .ikon { color: var(--altin-koy); }
.tepe-tel:hover { color: var(--altin-koy); }
@media (max-width: 1120px) { .tepe-tel span { display: none; } }

/* ------------------------------------------------------------ düğme */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .68em 1.4em; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-altin { background: var(--altin); color: #221A00; }
.btn-altin:hover { background: var(--altin-ac); color: #221A00; }
.btn-gece  { background: var(--gece); color: #fff; }
.btn-gece:hover { background: var(--gece-3); color: #fff; }
.btn-cizgi { background: var(--ak); color: var(--gece); border-color: var(--cizgi); }
.btn-cizgi:hover { background: var(--kagit-2); color: var(--gece); }
.btn-wa    { background: var(--yesil-wa); color: #06331A; }
.btn-wa:hover { background: #1FBF5B; color: #06331A; }
.btn-hayalet { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); }
.btn-hayalet:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-kucuk { padding: .45em 1em; font-size: .86rem; }
.btn-grup { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ bölüm */
.bolum { padding-block: clamp(2.4rem, 5vw, 4.2rem); }
.bolum-kagit { background: var(--kagit-2); }
.bolum-gece  { background: var(--gece); color: #C7CFD6; position: relative; overflow: hidden; }
.bolum-gece h2, .bolum-gece h3 { color: #fff; }
.bolum-bas { max-width: 62ch; margin-bottom: 1.9rem; }
.bolum-bas p { color: var(--murekkep-2); font-size: 1.04rem; margin-bottom: 0; }
.bolum-gece .bolum-bas p { color: #9FAAB4; }
.ustbaslik {
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--altin-koy); margin-bottom: .5rem;
}
.bolum-gece .ustbaslik { color: var(--altin); }

/* ⚠ İslami geometrik doku — çok soluk, yalnız koyu bölümlerde.
   Desen zeminde kalmalı; metnin okunmasına karışırsa amacından çıkar. */
.desen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .10;
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 26px, rgba(201,162,39,.5) 26px 27px),
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(201,162,39,.5) 26px 27px);
  /* ⚠ 23.09.2026 — MASKE KALDIRILDI (Emir: "bazi yerlerde var
     bazi yerlerde yok, tamamina yaysan iyi olur" - hata.png).
     Eskiden ustten elips seklinde soluyordu: desen bolumun ust-orta
     kisminda gorunup alt koselerde kayboluyordu. Artik bolumun tamamini
     kapliyor. Tam kaplamada .16 opaklik fazla oldugu icin .10 yapildi -
     doku hissi kaliyor, metnin okunurlugunu bozmuyor. */
}
.desen > * { position: relative; z-index: 1; }

/* ============================================ "Yaklaşan ___ Turları"
   Referans düzeni: başlık + soluk silüet · ilk İKİ tur büyük kart,
   yan yana · altında dört küçük kart · en altta "tümü" şeridi. */

/* ⚠ 23.08.2026 — Emir: *"başlık resimle ortalanmış olması gerekmez mi,
   hizalanması yani"*. Önce `flex-end` idi: başlık, yanındaki panoramanın
   ALT kenarına hizalanıyor, panorama başlığın çok yukarısına taşıyordu.
   `center` ile ikisinin dikey ortası çakışıyor — Emir'in gönderdiği
   `ornek.png` de böyle. */
.blok-bas {
  display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; flex-wrap: wrap;
}
.blok-bas h2 { margin: 0; }
.blok-bas h2 span { color: var(--bej); }
/* ⚠ Ortalama açıldığı için çizginin eski `margin-bottom` payı kalktı —
   yoksa satırın ortasından yukarı kayıyordu. */
.blok-cizgi { flex: 1; height: 1px; background: var(--cizgi); min-width: 40px; }

.blok-etiket {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem;
  font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--murekkep-2);
}
.blok-etiket .cizgi { flex: 1; height: 1px; background: var(--cizgi); }
.blok-etiket .ikon { color: var(--altin-koy); }

.tur-buyuk-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px;
}
.tur-kucuk-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}

/* --- büyük kart --- */
.tur-buyuk {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--golge-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.tur-buyuk:hover { box-shadow: var(--golge-2); transform: translateY(-2px); }
.tur-buyuk .kare { position: relative; background: var(--kagit-2); overflow: hidden; }
.tur-buyuk .kare a,
.tur-buyuk .kare picture { display: block; width: 100%; height: 100%; }
.tur-buyuk .kare img { width: 100%; height: 100%; object-fit: cover;
                       aspect-ratio: 4/3.4; display: block; }
.tur-buyuk .govde {
  padding: 1.3rem 1.35rem 1.2rem; display: flex; flex-direction: column; min-width: 0;
}
.tur-buyuk h3 { font-size: 1.24rem; margin-bottom: .7rem; }
.tur-buyuk h3 a { color: var(--gece); }
.tur-buyuk h3 a:hover { color: var(--altin-koy); }

.tur-satir { display: flex; align-items: center; gap: .45rem; color: var(--murekkep-2);
             font-size: .92rem; margin-bottom: .35rem; }
.tur-satir .ikon { color: var(--bej); }
.tur-satir b { color: var(--murekkep); font-weight: 650; }

.tur-alt { margin-top: auto; padding-top: 1rem; display: flex; align-items: flex-end;
           gap: .8rem; flex-wrap: wrap; }
.tur-fiyat { margin-left: auto; text-align: right; line-height: 1.15; }
.tur-fiyat small { display: block; font-size: .68rem; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--murekkep-3); }
.tur-fiyat b { font-size: 1.45rem; color: var(--gece); font-weight: 800; }
.tur-fiyat .sor { font-size: .92rem; font-weight: 700; color: var(--altin-koy); }
/* ⚠ Fiyat girilmemiş büyük kart (26.08.2026). Varsayılan `.tur-fiyat`
   sağa yaslı ve `margin-left:auto` ile sağa itiliyor; fiyat yokken bu
   yazıyı kartın sağ alt köşesinde iki satıra sıkıştırıyordu.
   Fiyat yokken tam satır alıp SOLDAN başlıyor — küçük kartlardaki
   "Fiyat için sorun" ile aynı hizada.
   ⚠ Fiyat VARSA bu sınıf hiç basılmıyor, eski görünüm aynen duruyor. */
.tur-fiyat.fiyat-yok { width: 100%; margin-left: 0; text-align: left; }

/* tarih rozeti — fotoğrafın üstünde */
.tarih-rozet {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--ak); border-radius: 12px; padding: .35rem .6rem;
  text-align: center; box-shadow: var(--golge-2); line-height: 1.05;
}
.tarih-rozet b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--gece); }
.tarih-rozet small { display: block; font-size: .64rem; letter-spacing: .08em;
                     color: var(--murekkep-3); font-weight: 700; }
/* ⚠ Tarihi kesinleşmemiş kalkış (26.08.2026). Gün/ay yerine tek
   kelime giriyor, o yüzden <small> yok ve punto daha küçük —
   "YAKINDA" 1.2rem'de rozetin dışına taşıyordu.
   Altın zemin bilerek: tarihli rozet beyaz, bu ondan ayrılsın ama
   göze "eksik/hatalı" gibi görünmesin. */
.tarih-rozet.rozet-yakinda { background: var(--altin); padding: .45rem .7rem; }
.tarih-rozet.rozet-yakinda b {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; color: #221A00;
}
.tur-kucuk .kare .etiket-yakinda {
  background: linear-gradient(transparent, rgba(201,162,39,.95)); color: #221A00;
}

.kare-rozet {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--altin); color: #221A00; font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: .25em .7em; border-radius: 999px;
}
.kare-not {
  position: absolute; bottom: 12px; left: 12px; z-index: 2;
  background: rgba(18,22,26,.85); color: #fff; font-size: .74rem; font-weight: 600;
  padding: .25em .7em; border-radius: 999px; backdrop-filter: blur(4px);
}

/* --- küçük kart --- */
.tur-kucuk {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: stretch;
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r-sm);
  overflow: hidden; box-shadow: var(--golge-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.tur-kucuk:hover { box-shadow: var(--golge-2); transform: translateY(-2px); }
/* ⚠ `a` ve `picture` BLOK olmalı: satır içi kalırlarsa `height:100%`
   yok sayılıyor ve koyu kapak görseli kartın metin alanına taşıyor. */
.tur-kucuk .kare { position: relative; overflow: hidden; }
.tur-kucuk .kare a,
.tur-kucuk .kare picture { display: block; width: 100%; height: 100%; }
.tur-kucuk .kare img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tur-kucuk .kare .etiket {
  position: absolute; left: 0; bottom: 0; right: 0;
  background: linear-gradient(transparent, rgba(11,14,17,.9));
  color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  padding: 1.4rem .5rem .35rem; text-align: center;
}
.tur-kucuk .govde { padding: .8rem .95rem; display: flex; flex-direction: column; min-width: 0; }
.tur-kucuk h3 { font-size: 1rem; margin-bottom: .3rem; }
.tur-kucuk h3 a { color: var(--gece); }
.tur-kucuk h3 a:hover { color: var(--altin-koy); }
.tur-kucuk .tur-satir { font-size: .84rem; margin-bottom: .15rem; }
/* ⚠ SINIF ÇAKIŞMASI DERSİ: bu satır önce `.alt` diye adlandırılmıştı
   ama alt bilgi (footer) de `.alt`. Footer'ın koyu zemini kartın içine
   sızıyordu. Genel adlar (alt, ust, kutu) tek başlarına kullanılmaz. */
.tur-kucuk .kart-alt { margin-top: auto; padding-top: .5rem; display: flex; align-items: center; gap: .5rem; }
.tur-kucuk .kart-alt .fiyat { font-weight: 800; color: var(--altin-koy); font-size: .98rem; }
.tur-kucuk .kart-alt .fiyat.sor { font-size: .82rem; font-weight: 700; }
.tur-kucuk .kart-alt .git {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--kagit-2); color: var(--gece);
}
.tur-kucuk .kart-alt .git:hover { background: var(--altin); }

/* --- "tümü" şeridi --- */
.blok-tumu {
  display: flex; align-items: center; gap: .6rem; margin-top: 18px;
  background: var(--kagit-2); border: 1px solid var(--cizgi); border-radius: var(--r-sm);
  padding: .95rem 1.2rem; font-weight: 700; color: var(--gece);
}
.blok-tumu:hover { background: #F0E9DA; color: var(--gece); }
.blok-tumu .sayi { color: var(--murekkep-3); font-weight: 600; }
.blok-tumu .ikon { margin-left: auto; color: var(--altin-koy); }

/* --------------------------------------------------------- vitrin */
.vitrin { position: relative; background: var(--gece); color: #fff; overflow: hidden; }
.vitrin-raf { position: relative; }
.slayt { position: relative; }
.slayt[hidden] { display: none; }
.slayt-zemin { position: absolute; inset: 0; }
.slayt-zemin img { width: 100%; height: 100%; object-fit: cover; }
.slayt-zemin::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,14,17,.94) 0%, rgba(11,14,17,.78) 45%, rgba(11,14,17,.35) 100%);
}
.slayt .sarmal { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem); }
.slayt-metin { max-width: 640px; }
.slayt h1, .slayt .slayt-baslik {
  color: #fff; margin-bottom: .4em;
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem);
}
.slayt p { color: #CBD4DC; font-size: 1.06rem; max-width: 52ch; }
.slayt .btn-grup { margin-top: 1.6rem; }
.slayt-rozet {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(201,162,39,.16); border: 1px solid rgba(201,162,39,.5);
  color: var(--altin-ac); border-radius: 999px; padding: .35em 1em;
  font-size: .84rem; font-weight: 700; margin-bottom: 1.1rem;
}
.slayt-kumanda { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.slayt-kumanda > * { pointer-events: auto; }
.slayt-ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; backdrop-filter: blur(6px);
}
.slayt-ok:hover { background: rgba(255,255,255,.26); }
.slayt-ok.geri  { left: clamp(8px, 1.6vw, 22px); }
.slayt-ok.ileri { right: clamp(8px, 1.6vw, 22px); }
.slayt-ok svg { width: 20px; height: 20px; }
.slayt-noktalar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px;
  display: flex; gap: .4rem;
}
.slayt-noktalar button {
  width: 28px; height: 5px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.35);
}
.slayt-noktalar button[aria-selected="true"] { background: var(--altin); width: 44px; }

/* ------------------------------------------------------ güven şeridi */
.guven { background: var(--gece-2); color: #A9B3BC; }
.guven .sarmal {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%), 1fr));
  gap: 1.2rem; padding-block: 1.6rem;
}
.guven-madde { display: flex; gap: .8rem; align-items: flex-start; }
.guven-madde .ikon { width: 26px; height: 26px; color: var(--altin); }
.guven-madde strong { display: block; color: #fff; font-size: .98rem; }
.guven-madde span { font-size: .87rem; }

/* --------------------------------------------------------- kategori */
.kat-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); gap: 16px;
}
/* ⚠ 26.08.2026 · min-height 190 → 150 (Emir: "başlık ve tur sayısı
   arasında mesafe çok"). Kutu içeriğinden uzundu, `.sayi` de
   `margin-top:auto` ile en dibe itiliyordu; ikisi birleşince açıklama
   ile "3 tur →" arasında koca bir boşluk kalıyordu. `margin-top:auto`
   duruyor — aynı satırdaki kutuların sayıları hizalı kalsın diye. */
.kat-kutu {
  position: relative; display: block; border-radius: var(--r); overflow: hidden;
  background: var(--gece); min-height: 150px; box-shadow: var(--golge-1);
}
.kat-kutu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55;
                transition: transform .3s ease, opacity .3s ease; }
.kat-kutu:hover img { transform: scale(1.05); opacity: .42; }
.kat-kutu .ic {
  position: relative; z-index: 1; padding: 1.2rem 1.25rem;
  display: flex; flex-direction: column; height: 100%; min-height: 150px; color: #fff;
}
.kat-kutu .ic h3 { color: #fff; margin-bottom: .25rem; }
.kat-kutu .ic p { color: #C4CDD5; font-size: .88rem; margin: 0; }
.kat-kutu .ic .sayi {
  margin-top: auto; padding-top: .6rem; color: var(--altin-ac);
  font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: .35rem;
}

/* --------------------------------------------------------- tur sayfası */
.sayfa-bas {
  background: var(--gece); color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.4rem);
}
.sayfa-bas h1 { color: #fff; }
.sayfa-bas p { color: #A9B3BC; max-width: 62ch; margin-bottom: 0; }
.kirinti { font-size: .84rem; color: #8A949E; margin-bottom: .8rem; }
.kirinti a { color: #B9C2CA; }
.kirinti a:hover { color: var(--altin-ac); }

.iki-sutun { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.yan-kart {
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 1.3rem; box-shadow: var(--golge-1); margin-bottom: 1.1rem;
}
.yan-kart.vurgu { background: var(--gece); color: #C7CFD6; border-color: var(--gece); }
.yan-kart.vurgu h3 { color: #fff; }
.yan-kart h3 { font-size: 1.05rem; }
.yan-kart .btn { width: 100%; margin-top: .5rem; }
.yan-kart .fiyat-buyuk { font-size: 1.7rem; font-weight: 800; color: var(--altin-ac); }
.yan-kart .fiyat-sor { font-size: 1.02rem; font-weight: 700; color: var(--altin-ac); }

.ayirt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%),1fr));
         gap: 12px; margin: 0 0 1.6rem; }
.ayirt div {
  background: var(--ak); border: 1px solid var(--cizgi); border-left: 3px solid var(--altin);
  border-radius: var(--r-sm); padding: .8rem .95rem;
}
.ayirt dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--murekkep-3); font-weight: 700; }
.ayirt dd { margin: .15rem 0 0; font-weight: 650; }
/* ⚠ Kutu içindeki ikinci satır ("kişi başı", "+2 tarih daha").
   Blok yapılıyor ki rakamın altına insin, yanına sıkışmasın. */
.ayirt dd small { display: block; font-weight: 500; font-size: .74rem;
                  color: var(--murekkep-3); margin-top: .1rem; }

.program { list-style: none; padding: 0; margin: 0 0 1.6rem; counter-reset: p; }
.program li {
  position: relative; padding-left: 2.4rem; margin-bottom: .7rem; counter-increment: p;
}
.program li::before {
  content: counter(p); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gece); color: var(--altin-ac); font-size: .78rem; font-weight: 800;
}
.dahil-liste { list-style: none; padding: 0; }
.dahil-liste li { display: flex; gap: .55rem; align-items: flex-start; }
.dahil-liste .ikon { margin-top: .3em; }
.dahil-liste.var .ikon  { color: #1F7A4C; }
.dahil-liste.yok .ikon  { color: #A6242B; }

.kalkis-tablo { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.kalkis-tablo th, .kalkis-tablo td { padding: .75rem .9rem; text-align: left; border-bottom: 1px solid var(--cizgi); }
.kalkis-tablo thead th { background: var(--kagit-2); font-size: .76rem; letter-spacing: .08em;
                         text-transform: uppercase; color: var(--murekkep-2); }
.kalkis-tablo .sag { text-align: right; }
.tablo-sar { overflow-x: auto; }

/* ------------------------------------------------------------ KADRO
   Ekip kartları — panelden `[kadro 2] … [/kadro]` bloğuyla konuyor.
   Emir'in gönderdiği `kadro.png` örneğine göre: üstte YATAY fotoğraf,
   altında ortalanmış açık zeminli bilgi paneli, adın altında kısa çizgi.
   ⚠ `.galeri` ile aynı kırılma mantığı: sütun sayısı dar ekranda
     kademeli iniyor, kart hiçbir zaman okunamayacak kadar daralmıyor. */
.kadro {
  display: grid;
  gap: 20px;
  margin: 1.8rem 0;
  grid-template-columns: repeat(var(--ks, 2), minmax(0, 1fr));
}
.kadro-1 { --ks: 1; }
.kadro-2 { --ks: 2; }
.kadro-3 { --ks: 3; }
.kadro-4 { --ks: 4; }
.kadro-5 { --ks: 5; }
.kadro-6 { --ks: 6; }

/* ⚠ min-width:0 olmadan ızgara öğesi daralmıyor (NOTLAR §9/3).
   ⚠ Emir (23.08.2026): *"arka plan rengi ile aynı duruyor, dış ışıma
     gölgelendirme ekle ya da bir tık daha koyu yap."* Haklıydı: kart
     beyaz, sayfa krem — aradaki fark neredeyse görünmüyordu.
     İki önlem birlikte: (1) kartın altına GÖLGE, (2) bilgi paneli bir
     tık koyu (`--kagit-2`). Gölge, kartı `bolum` ve `bolum-kagit`
     bölümlerinin İKİSİNDEN de ayırıyor; tek başına renk seçilseydi
     bölümlerden birinde yine kaybolurdu. */
.kadro-kart {
  min-width: 0;
  background: var(--ak);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--golge-2);
  transition: box-shadow .25s ease, transform .25s ease;
}
.kadro-kart:hover {
  box-shadow: var(--golge-3);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .kadro-kart { transition: none; }
  .kadro-kart:hover { transform: none; }
}

.kadro-foto { background: var(--kagit-2); line-height: 0; }
.kadro-foto picture, .kadro-foto img { display: block; width: 100%; }
.kadro-foto img { aspect-ratio: 4 / 3; object-fit: cover; }

.kadro-ic {
  padding: 1.1rem 1rem 1.2rem;
  text-align: center;
  background: var(--kagit-2);      /* fotoğraftan ve sayfadan bir tık koyu */
  border-top: 1px solid var(--cizgi);
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
}
.kadro-ic h3 {
  margin: 0;
  font-size: .98rem; font-weight: 750;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gece);
  overflow-wrap: anywhere;
}
/* Adın altındaki kısa çizgi — örnekteki ayraç */
.kadro-ic h3::after {
  content: ''; display: block;
  width: 34px; height: 3px; margin: .7rem auto .8rem;
  background: var(--altin); border-radius: 2px;
}
.kadro-unvan {
  margin: 0 0 .2rem; font-size: .88rem; color: var(--murekkep-2);
}
.kadro-ozet {
  margin: .4rem 0 0; font-size: .84rem; line-height: 1.6;
  color: var(--murekkep-3);
}

.kadro-baglar {
  margin-top: auto; padding-top: .9rem;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  width: 100%;
}
/* ⚠ ÖZGÜLLÜK: kadro bloğu `.icerik-metin`in İÇİNDE basılıyor ve orada
   `.icerik-metin a { color: altın; text-decoration: underline }` kuralı
   var. Düz `.kadro-bag` yazılınca o kural kazanıyordu — WhatsApp
   hapının içindeki yazı beyaz yerine altın ve altı çizili çıkıyordu.
   Bu yüzden kurallar `.icerik-metin` ile birlikte yazılıyor.
   ⚠ §60'taki dersin devamı: var olan bir kuralı ezecekseniz
     özgüllüğü ölçün, ummayın. */
.kadro-bag,
.icerik-metin .kadro-bag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 600;
  color: var(--gece); text-decoration: none;
  max-width: 100%; overflow-wrap: anywhere;
}
.kadro-bag:hover,
.icerik-metin .kadro-bag:hover { color: var(--altin-koy); text-decoration: underline; }
.kadro-bag .ikon { width: 16px; height: 16px; flex: none; color: var(--altin-koy); }
/* ⚠ WhatsApp düğmesi — sitedeki büyük `.btn-wa`dan FARKLI bilerek.
   Emir: *"whatsapp ve içindeki yazı güzel durmuyor, uyumlu renk kullan,
   yeşile iç renk beyaz gibi."*
   ⚠ Eski hâl OKUNAKSIZ DEĞİLDİ — koyu yeşil yazı (#06331A) parlak
     yeşilin (#25D366) üstünde 7.08:1 kontrast veriyor, ölçüldü. Sorun
     kontrast değil GÖRÜNÜMdü: küçük hapta bulanık duruyordu. Değişiklik
     Emir'in tercihi.
   ⚠ AMA beyaz yazı marka yeşilinin (#25D366) üstünde 1.87:1 verir —
     bu gerçekten okunmaz. Beyaz istendiği için zemin bir tık koyulaştı:
     #0E7A40 · beyazla **5.42:1** (ölçüldü, AA'yı geçiyor).
     Yeşilin kendisi değişti ama WhatsApp ikonu tanınmayı taşıyor. */
.kadro-wa,
.icerik-metin .kadro-wa {
  background: #0E7A40; color: #fff;
  border-radius: 999px; padding: .5em 1.2em;
  text-decoration: none;
}
.kadro-wa:hover,
.icerik-metin .kadro-wa:hover {
  background: #0B6534; color: #fff; text-decoration: none;
}
.kadro-wa .ikon,
.icerik-metin .kadro-wa .ikon { color: #fff; }

/* Dar ekranda kademeli iniş — 5 ve 6 sütun telefonda okunmuyor */
@media (max-width: 1000px) {
  .kadro-5, .kadro-6 { --ks: 4; }
}
@media (max-width: 860px) {
  .kadro-4, .kadro-5, .kadro-6 { --ks: 3; }
}
@media (max-width: 700px) {
  .kadro-3, .kadro-4, .kadro-5, .kadro-6 { --ks: 2; }
  .kadro { gap: 14px; }
}
@media (max-width: 480px) {
  /* ⚠ Telefonda tek sütun: iki sütunda ad ve unvan kırılıp okunmuyordu. */
  .kadro { --ks: 1 !important; }
  .kadro-kart { max-width: 380px; margin: 0 auto; width: 100%; }
}

/* ------------------------------------------- İÇERİĞE YAZILAN TABLO
   Panelden `| a | b |` yazılınca çıkan tablo (metin() → tablo_yaz()).
   ⚠ HER ZAMAN kaydırma kutusunda: sütun sayısını kullanıcı belirlediği
     için telefonda taşma kaçınılmaz. Tablo kendi içinde yatay kayıyor,
     SAYFA kaymıyor — projenin "taşma 0" kuralı böyle korunuyor
     (bkz. NOTLAR §9/3: ızgara öğesi min-width dersi).
   ⚠ -webkit-overflow-scrolling: iOS'ta parmakla kaydırma akıcı olsun. */
.icerik-tablo {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6rem 0;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--ak);
}
.icerik-tablo table {
  width: 100%;
  border-collapse: collapse;
  /* Dar hücrelerde sözcükler üst üste binmesin diye en az genişlik */
  min-width: 30rem;
  font-size: .94rem;
}
.icerik-tablo th,
.icerik-tablo td {
  padding: .7rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}
.icerik-tablo thead th {
  background: var(--kagit-2);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--murekkep-2);
  font-weight: 700;
  white-space: nowrap;
}
.icerik-tablo tbody tr:last-child th,
.icerik-tablo tbody tr:last-child td { border-bottom: 0; }
/* Başlıksız tabloda ilk sütun okunması kolay olsun */
.icerik-tablo tbody tr:nth-child(even) { background: var(--kagit); }

/* ⚠ Kaydırılabildiğini göstermek için sağ kenarda soluk bir gölge —
   yoksa telefonda üçüncü sütunun varlığı fark edilmiyor. */
@media (max-width: 700px) {
  .icerik-tablo {
    background:
      linear-gradient(to right, var(--ak) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
      linear-gradient(to left,  var(--ak) 30%, rgba(255,255,255,0)) right / 40px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(18,22,26,.14), transparent) left / 14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(18,22,26,.14), transparent) right / 14px 100% no-repeat,
      var(--ak);
    background-attachment: local, local, scroll, scroll, local;
  }
  .icerik-tablo table { font-size: .88rem; min-width: 26rem; }
  .icerik-tablo th, .icerik-tablo td { padding: .6rem .7rem; }
}

/* ----------------------------------------------------------- SSS */
.sss { border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; background: var(--ak); }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss details:last-child { border-bottom: 0; }
.sss summary {
  padding: 1rem 1.2rem; cursor: pointer; font-weight: 650; list-style: none;
  display: flex; align-items: center; gap: .8rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ''; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--murekkep-3); border-bottom: 2px solid var(--murekkep-3);
  transform: rotate(45deg); transition: transform .18s ease;
}
.sss details[open] summary::after { transform: rotate(-135deg); }
.sss .cevap { padding: 0 1.2rem 1.1rem; color: var(--murekkep-2); }

/* ⚠ Adres çubuğunda #s-… varsa o madde vurgulanıyor. AÇMAYI CSS yapamaz
   (details[open] bir öznitelik, :target ile değiştirilemiyor) —
   açma işini varlik/js/site.js üstleniyor. Buradaki yalnız vurgu. */
.sss details:target {
  background: var(--altin-sis, rgba(201,162,39,.10));
  box-shadow: inset 3px 0 0 var(--altin);
}
.sss details:target > summary { color: var(--murekkep); }

/* --------------------------------------------------------- bülten */
.bulten { background: var(--gece); color: #C7CFD6; position: relative; overflow: hidden; }
.bulten .sarmal {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(20px, 4vw, 48px); align-items: center; padding-block: clamp(2.2rem, 4vw, 3.4rem);
}
.bulten h2 { color: #fff; margin-bottom: .3em; }
.bulten p { color: #9FAAB4; margin-bottom: 0; }
.bulten-form { display: grid; gap: .6rem; }
.bulten-form input {
  width: 100%; padding: .8em 1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07); color: #fff; font: inherit;
}
.bulten-form input::placeholder { color: #8A949E; }
.bulten-form input:focus { outline: 2px solid var(--altin); outline-offset: 1px; }
.bulten-not { font-size: .78rem; color: #7E8892; margin: 0; }

/* ------------------------------------------------------------ alt */
.alt { background: var(--gece-2); color: #8E99A3; padding-block: 2.6rem 1.4rem; font-size: .92rem; }
.alt-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; }
.alt h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
.alt ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.alt a { color: #B7C1CA; }
.alt a:hover { color: var(--altin-ac); }
.alt .marka-yazi strong { color: #fff; }
.alt .marka-yazi strong span { color: var(--altin); }
.alt .marka-yazi small { color: #7E8892; }
.alt-marka { margin-bottom: 1rem; }
.alt-ozet { max-width: 40ch; }
.alt-belge { font-size: .85rem; margin-bottom: .3em; }
.alt-belge strong { color: var(--altin); }
.alt-yasal {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .84rem;
}
.alt-son {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08);
  /* ⚠ 23.09.2026 — adres satırı kaldırıldı, telif ortalandı.
     space-between iki çocuk varken doğruydu; tek satır kalınca metni
     sola yapıştırıyordu. */
  display: flex; gap: 1rem; justify-content: center; text-align: center; flex-wrap: wrap;
  font-size: .82rem; color: #6E7982;
}

/* ------------------------------------------------- mobil eylem çubuğu */
.eylem { display: none; }
.wa-yuzen {
  position: fixed; right: 18px; bottom: 22px; z-index: 45;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--yesil-wa); color: #fff; display: grid; place-items: center;
  box-shadow: var(--golge-3);
}
.wa-yuzen .ikon { width: 28px; height: 28px; }
.wa-yuzen:hover { color: #fff; transform: translateY(-2px); }

/* ---------------------------------------------------------- bildirim */
.uyari-kutu {
  background: #FDF4E0; border: 1px solid #EBD6A2; border-left: 3px solid var(--altin);
  border-radius: var(--r-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
}
.iyi-kutu {
  background: #E8F5EE; border: 1px solid #BEE0CD; border-left: 3px solid #1F7A4C;
  border-radius: var(--r-sm); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
}
.bos-kutu { color: var(--murekkep-3); padding: 2rem 0; }

/* -------------------------------------------------------- yazı listesi */
.yazi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%),1fr)); gap: 18px; }
.yazi-kart {
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--golge-1); display: flex; flex-direction: column;
}
.yazi-kart:hover { box-shadow: var(--golge-2); }
.yazi-kart img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.yazi-kart .govde { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.yazi-kart h3 { font-size: 1.08rem; }
.yazi-kart h3 a { color: var(--gece); }
.yazi-kart p { color: var(--murekkep-2); font-size: .93rem; }
.yazi-kart .tarih { margin-top: auto; padding-top: .6rem; font-size: .82rem; color: var(--murekkep-3); }

.icerik-metin { max-width: 72ch; }
/* ⚠ Aşağıdaki etiketlerin tamamını panelde yazılan metin üretiyor
   (cekirdek/yardim.php → metin()). Biri biçimsiz kalırsa blog yazısı
   dağılmış görünür; yeni bir etiket eklenirse burası da güncellenmeli. */
.icerik-metin > :first-child { margin-top: 0; }
.icerik-metin h2 { margin-top: 1.8em; }
.icerik-metin h3 { margin-top: 1.5em; }
.icerik-metin h4 { margin-top: 1.3em; font-size: 1.02rem; }
.icerik-metin li { margin: .3em 0; }
.icerik-metin a  { color: var(--altin-koy); text-decoration: underline;
                   text-underline-offset: .18em; overflow-wrap: anywhere; }
.icerik-metin a:hover { color: var(--gece); }
/* Başlıklara çapa kimliği veriliyor; adresten doğrudan o bölüme gelinebilir */
.icerik-metin :target { scroll-margin-top: 90px; }

.icerik-metin blockquote, .cevap blockquote {
  margin: 1.4em 0;
  padding: .9em 1.2em;
  border-left: 3px solid var(--altin);
  background: var(--kagit-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--murekkep-2);
  font-style: italic;
}
.icerik-metin blockquote > :last-child, .cevap blockquote > :last-child { margin-bottom: 0; }


/* ------------------------------------------------------------ GALERİ
   İKİ YERDEN besleniyor, ikisi de aynı sınıfı kullanır:
     1) panelde `[galeri N] … [/galeri]` → metin() → galeri_yaz()
     2) tur sayfasının foto galerisi (sayfa/tur.php) → `.galeri.galeri-3`
   ⚠ 21.08–22.08 arası bu blok bir İKİNCİ `.galeri` tanımının üstüne
     binmişti; tur galerisi telefonda da 3 sütuna kilitleniyordu. Eski
     tanım silindi — buraya ikinci bir `.galeri { }` YAZILMAYACAK.
   ⚠ Her kare `a.buyut` içinde; büyütme penceresi kendiliğinden yakalıyor. */
.galeri {
  display: grid;
  gap: 12px;
  margin: 1.8rem 0;
  grid-template-columns: repeat(var(--sut, 3), minmax(0, 1fr));
}
.galeri-1 { --sut: 1; }
.galeri-2 { --sut: 2; }
.galeri-3 { --sut: 3; }
.galeri-4 { --sut: 4; }
.galeri-5 { --sut: 5; }
.galeri-6 { --sut: 6; }

/* ⚠ min-width:0 olmadan ızgara öğesi daralmıyor, dar ekranda taşırıyor */
.galeri > figure { margin: 0; min-width: 0; }

.galeri a.buyut {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--kagit-2);
  line-height: 0;
}
.galeri picture, .galeri img { display: block; width: 100%; height: 100%; }
.galeri img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s ease;
}
.galeri a.buyut:hover img { transform: scale(1.04); }
.galeri a.buyut:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; }

/* Tek sütunlu galeri tam boy okunur — kırpılmasın */
.galeri-1 img { aspect-ratio: auto; height: auto; }

/* ⚠ 5 ve 6 sütunda kare 4/3 kadraj çok basık kalıyor — bunlar
   "şerit" gibi okunsun diye kare kırpılıyor. */
.galeri-5 img, .galeri-6 img { aspect-ratio: 1 / 1; }

.galeri figcaption {
  margin-top: .45rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--murekkep-2);
  overflow-wrap: anywhere;
}

/* Dar ekranda 4 ve 5 sütun okunmuyor — kademeli iniyor */
@media (max-width: 1000px) {
  .galeri-6 { --sut: 4; }
}
@media (max-width: 900px) {
  .galeri-4, .galeri-5 { --sut: 3; }
  .galeri-6 { --sut: 3; }
}
@media (max-width: 640px) {
  .galeri-3, .galeri-4, .galeri-5, .galeri-6 { --sut: 2; }
  .galeri { gap: 8px; }
}
@media (max-width: 380px) {
  .galeri-2, .galeri-3, .galeri-4, .galeri-5, .galeri-6 { --sut: 2; }
  .galeri figcaption { font-size: .78rem; }
}

/* ------------------------------------------------------------ harita */
.harita-tam { position: relative; display: block; line-height: 0; background: var(--kagit-2); }
.harita-tam iframe { border: 0; display: block; width: 100%; height: clamp(300px, 38vh, 420px); }

/* Haritanın sol üstündeki logo kartı.
   ⚠ Kartın ÜSTÜNE biniyor ama haritayı KİLİTLEMİYOR: kutunun kendisi
   `pointer-events:none`, yalnız içindeki bağlantı tıklanabiliyor.
   Yoksa kartın altında kalan haritayı sürüklemek imkânsız oluyor.
   ⚠ Sol kenar `sarmal` ile hizalı: harita kenardan kenara ama kart
   sayfanın metin sütunuyla aynı çizgide başlıyor. */
.harita-kart {
  /* ⚠ Emir 24.08.2026: "sol üstten sağ üst tarafa alsan daha şık durur."
     Sağ kenar `sarmal` ile hizalı — harita kenardan kenara ama kart
     sayfanın metin sütunuyla aynı çizgide bitiyor. */
  position: absolute; z-index: 2; top: 18px;
  right: max(var(--bosluk), calc((100% - var(--en)) / 2 + var(--bosluk)));
  width: min(300px, calc(100% - var(--bosluk) * 2));
  pointer-events: none;
  padding: .85rem .95rem 1rem;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--cizgi); border-top: 3px solid var(--altin);
  border-radius: var(--r-sm); box-shadow: var(--golge-2);
  line-height: 1.55;
}
.harita-kart > * { pointer-events: auto; }

.harita-marka {
  display: flex; align-items: center; gap: .6rem;
  color: var(--murekkep); text-decoration: none;
}
.harita-marka img { flex: 0 0 auto; width: 46px; height: 46px; }
.harita-marka strong {
  display: block; font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.2;
}
.harita-marka small {
  display: inline-flex; align-items: center; gap: .25em;
  margin-top: .12rem; font-size: .82rem; font-weight: 600;
  color: var(--altin-koy);
}
.harita-marka small svg { width: 14px; height: 14px; transition: transform .18s ease; }
.harita-marka:hover strong { color: var(--altin-koy); }
.harita-marka:hover small svg { transform: translateX(3px); }
.harita-marka:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }

.harita-adres {
  margin: .7rem 0 0; padding-top: .7rem; border-top: 1px solid var(--cizgi);
  font-size: .86rem; color: var(--murekkep-2);
}

/* ⚠ Dar ekranda kart haritanın ÜSTÜNE değil ÖNÜNE geçiyor: 360 px'te
   harita zaten küçük, üstüne kart binince haritadan eser kalmıyordu. */
@media (max-width: 720px) {
  .harita-tam { display: flex; flex-direction: column; }
  .harita-kart {
    position: static; width: auto; top: auto; right: auto;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--ak);
    padding: .9rem var(--bosluk) 1rem;
  }
}

/* =====================================================================
   DAR EKRAN
   ===================================================================== */
@media (max-width: 1000px) {
  .iki-sutun { grid-template-columns: 1fr; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .menu-ac { display: flex; margin-left: auto; }

  /* ═══════════════════════════════════════════════════════════════
     MOBİL MENÜ — ALTTAN AÇILAN SAYFA (24.08.2026)

     ⚠ ÖNCE SAĞDAN ÇEKMECEYDİ, İKİ SEBEPLE DEĞİŞTİ:
       1. Emir: "menüler solda açılmasın, diğer yaptığımız siteler gibi
          tıklayınca altta açılsın."
       2. ⚠⚠ ÇALIŞMIYORDU: karartma perdesi menünün ÜSTÜNE biniyordu.
          Ekran kararıyor, menüye dokunulamıyordu.

     ⚠ HATANIN SEBEBİ — YIĞIN BAĞLAMI (stacking context):
       `.tepe` `position: sticky; z-index: 40` ile KENDİ yığın bağlamını
       kuruyor. `.menu` onun İÇİNDE olduğu için `z-index: 60` yalnız o
       bağlamın içinde geçerli; dış dünyada başlığın 40'ı sayılıyor.
       `.menu-perde` ise `<body>`nin doğrudan çocuğu, z-index 55.
       55 > 40 → perde bütün başlığı, açık menü dahil, örtüyor.

     ⚠ ÇÖZÜM: menüye daha büyük z-index vermek İŞE YARAMAZ — çocuk,
       ebeveyninin bağlamından dışarı çıkamaz. Menü açıkken BAŞLIĞIN
       KENDİSİ yükseltiliyor (`body.kilitli .tepe`), aşağıda.
     ═══════════════════════════════════════════════════════════════ */
  .menu {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-height: 82vh;
    background: var(--ak); flex-direction: column; align-items: stretch;
    gap: 0; margin-left: 0; z-index: 60;
    padding: 1.6rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%); transition: transform .24s ease;
    box-shadow: 0 -8px 40px rgba(0,0,0,.22);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* Tutamak çizgisi — sayfanın yukarı çekilebilir olduğunu anlatan işaret.
     Ayrı bir HTML öğesi eklenmedi; süs olduğu için ::before yetiyor. */
  .menu::before {
    content: ''; position: absolute; top: .6rem; left: 50%;
    transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 999px; background: var(--cizgi);
  }
  .menu.acik { transform: none; }
  .menu > a, .menu-alt > button { width: 100%; justify-content: flex-start; border-radius: var(--r-sm); }
  .menu > a, .menu-kutu a { padding-block: .8em; }   /* parmak hedefi büyüsün */
  .menu-alt { width: 100%; }
  .menu-kutu { position: static; box-shadow: none; border: 0; padding-left: 1rem; }

  .menu-perde { position: fixed; inset: 0; background: rgba(11,14,17,.5); z-index: 55; }
  .menu-perde[hidden] { display: none; }

  /* ⚠ ASIL DÜZELTME: menü açıkken başlık perdenin üstüne çıkıyor.
     `body.kilitli` sınıfını menüyü açan JS zaten koyuyor (site.js). */
  body.kilitli .tepe { z-index: 70; }
  .tepe-btn { display: none; }
  .bulten .sarmal { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .tur-buyuk-izgara { grid-template-columns: 1fr; }
  .tur-kucuk-izgara { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .eylem {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--ak); border-top: 1px solid var(--cizgi);
    box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  }
  .eylem a {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .5rem .3rem; font-size: .72rem; font-weight: 700; color: var(--murekkep-2);
  }
  .eylem .ikon { width: 20px; height: 20px; }
  .eylem .e-wa { color: var(--yesil-wa); }
  .wa-yuzen { display: none; }
  body { padding-bottom: 58px; }
  .alt { padding-bottom: 4.5rem; }
  .slayt-ok { display: none; }
}
@media (max-width: 620px) {
  .alt-izgara { grid-template-columns: 1fr; }
  .tur-buyuk { grid-template-columns: 1fr; }
  .tur-buyuk .kare img { aspect-ratio: 16/10; }
  .ust-bilgi .sarmal { justify-content: center; }
  .ust-sag { margin-left: 0; width: 100%; text-align: center; }
}
@media (max-width: 420px) {
  .tur-kucuk { grid-template-columns: 92px minmax(0,1fr); }
  .marka-yazi strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================== blok süsleri (23.08.2026, Emir'in isteği)
   Sağ ÜST  → sepya panorama (Emir'in hazırlattığı suluboya)
   Sağ ALT  → ince çizgi silüet, "Tüm ___" şeridinin ucunda
   Örnek: masaüstündeki `ornek.png`.
   ===================================================================== */

/* ⚠ SIRITMAMA: kaynak kareler BEYAZ zeminli, sayfa zemini krem.
     `multiply` beyazı görünmez yapıyor, sepya tonlar zeminin üstüne
     oturuyor — kenarında dikdörtgen iz kalmıyor. Kenarlar ayrıca
     `kurulum/panorama-hazirla.php` içinde beyaza doğru yumuşatıldı. */
.blok-panorama {
  display: block; flex: none;
  width: clamp(240px, 34vw, 520px);
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
}
.blok-panorama img { display: block; width: 100%; height: auto; }

/* ── Tablet (700–860 px): başlığın yanına sığmıyor, kendi satırına iniyor. */
@media (max-width: 860px) {
  .blok-bas .blok-cizgi { display: none; }
  .blok-panorama {
    width: min(100%, 420px);
    margin: .2rem auto 0;
  }
}

/* ── Telefon (≤700 px): TAMAMEN GİZLİ. Emir sordu, birlikte karar verildi.
   Üç sebep:
     1. Bu kare başlığın YANINDA durmak üzere tasarlandı. Alt alta
        inince süs olmaktan çıkıp içerikle yarışan bir bant oluyor.
     2. Telefonda ilk tur kartını ~130 px aşağı itiyor — dikey yerin en
        kıymetli olduğu ekranda.
     3. 350 px genişlikte suluboyanın ayrıntısı (insanlar, kemerler,
        palmiyeler) okunmuyor; bej bir lekeye dönüşüyor — hiç olmamasından
        daha kötü.
   ⚠ Çizilen silüet zaten ≤700 px'te gizliydi; ikisi artık aynı eşikte. */
@media (max-width: 700px) {
  .blok-panorama { display: none; }
}

/* Blok köşesindeki soluk silüet — dekor, resim değil. */
.blok-silue {
  width: clamp(160px, 26vw, 300px); height: auto; opacity: .38; flex: none;
  margin-bottom: .2rem;
}
@media (max-width: 700px) { .blok-silue { display: none; } }

/* ⚠ "Tüm ___" şeridindeki hâli: küçük ve okun solunda.
     `.suslu` sınıfı okun kendi margin-left:auto kuralını kapatıyor;
     iki otomatik boşluk olsaydı aradaki yeri bölüp silüeti ortaya
     iterlerdi. */
.blok-tumu .blok-silue {
  width: auto; height: clamp(26px, 4.5vw, 40px);
  opacity: .3; margin: 0 0 0 auto;
}
.blok-tumu.suslu .ikon { margin-left: .8rem; }
@media (max-width: 700px) { .blok-tumu .blok-silue { display: none; } }

/* --------------------------------------------------- tur detay ekleri */
.tur-kapak { margin: 0 0 1.6rem; border-radius: var(--r); overflow: hidden; box-shadow: var(--golge-2); }
.tur-kapak img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.satir-iki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); gap: 1.6rem; margin-bottom: 1.6rem; }
.yan-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.yan-liste a { font-weight: 650; color: var(--gece); display: block; }
.yan-liste a:hover { color: var(--altin-koy); }
.yan-liste small { color: var(--murekkep-3); font-size: .82rem; }
.rozet-altin-kucuk {
  display: inline-block; background: #FBF1D6; color: #6B4B05; font-size: .68rem;
  font-weight: 800; letter-spacing: .04em; padding: .12em .5em; border-radius: 999px;
  text-transform: uppercase;
}
.soluk { color: var(--murekkep-3); }

/* ------------------------------------------------------------ süzgeç */
.suzgec {
  display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.6rem;
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: 999px;
  padding: .55rem .8rem;
}
.suzgec select {
  font: inherit; font-size: .92rem; padding: .35em .8em; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--kagit); color: var(--murekkep);
}
.suzgec-sayi { margin-left: auto; color: var(--murekkep-3); font-size: .88rem; padding-right: .5rem; }
.tur-liste { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .tur-liste { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 820px)  { .tur-liste { grid-template-columns: 1fr; } }

/* ------------------------------------------------- büyütme penceresi */
.buyut { position: relative; display: block; }
body.kilitli { overflow: hidden; }
.buyutec {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; gap: clamp(6px,2vw,22px); padding: clamp(12px,3vw,32px);
  background: rgba(8,10,12,.94); backdrop-filter: blur(8px);
}
.buyutec[hidden] { display: none; }
.buyutec-sekil { margin: 0; display: flex; flex-direction: column; align-items: center;
                 gap: .8rem; max-width: min(1000px,100%); min-width: 0; }
.buyutec img { display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto;
               border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.buyutec-altyazi { display: flex; gap: .9rem; align-items: baseline; justify-content: center;
                   flex-wrap: wrap; text-align: center; max-width: 60ch; }
.buyutec-yazi { color: #F3EDE2; font-weight: 600; }
.buyutec-sayac { color: var(--bej); font-size: .82rem; letter-spacing: .08em; }
.buyutec-kapat, .buyutec-ok {
  flex: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
}
.buyutec-kapat:hover, .buyutec-ok:hover { background: rgba(255,255,255,.2); }
.buyutec-kapat { position: absolute; top: clamp(12px,3vw,26px); left: clamp(12px,3vw,26px);
                 width: 44px; height: 44px; z-index: 2; }
.buyutec-ok { width: 52px; height: 52px; }
.buyutec-ok[hidden] { display: none; }
.buyutec svg { width: 22px; height: 22px; }
@media (max-width: 620px) {
  .buyutec { flex-wrap: wrap; align-content: center; }
  .buyutec-sekil { order: 1; flex: 1 0 100%; }
  .buyutec-ok.geri { order: 2; } .buyutec-ok.ileri { order: 3; }
  .buyutec img { max-height: 62vh; }
}

/* --------------------------------------------------------- iletişim */
/* ⚠ Emir 24.08.2026: üst şerit DÖRT karttan ÜÇ karta indi (WhatsApp,
   Telefon, Ofis). Instagram kartı silinmedi, sağ sütunun en altına
   taşındı. Sınıf adı da `-dort`tan `-uc`ye çevrildi: sayıyı yalan
   söyleyen sınıf adı bırakmak, sonraki turda yanlış yere bakmaya yol
   açıyor (NOTLAR §9, §31, §60, §72 — özgüllük/ad dersleri). */
.iletisim-uc {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px;
  align-items: stretch; margin-bottom: 2.2rem;
}
.iletisim-kart {
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 1.4rem 1.3rem 1.3rem; display: flex; flex-direction: column; min-width: 0;
  box-shadow: var(--golge-1);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.iletisim-kart:hover { border-color: var(--bej); box-shadow: var(--golge-2); transform: translateY(-2px); }
.kart-ikon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--kagit-2); color: var(--altin-koy); margin-bottom: .9rem;
}
.kart-ikon .ikon { width: 22px; height: 22px; }
.iletisim-kart h3 { font-size: 1.02rem; margin-bottom: .45rem; color: var(--gece); }
.iletisim-kart p { margin-bottom: 0; overflow-wrap: anywhere; }
.iletisim-kart a { font-weight: 700; }
.kart-not { margin-top: auto; padding-top: .6rem; font-size: .86rem; color: var(--murekkep-3); }
@media (max-width: 980px) { .iletisim-uc { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .iletisim-uc { grid-template-columns: 1fr; } }

/* ⚠ `align-items: start` DEĞİL `stretch`: Emir'in isteği "form ile 3 kart
   aynı hizada olsun". Sütun formun boyuna uzuyor, kartlar aradaki farkı
   eşit paylaşıyor; böylece son kartın altı formun altıyla aynı çizgide
   bitiyor. Fark kartlara dağıtılıyor, boşluklara değil — arası açılan
   kartlar dağınık duruyordu. */
.iletisim-alt { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(20px,3vw,40px); align-items: stretch; }
@media (max-width: 900px) { .iletisim-alt { grid-template-columns: 1fr; } }

/* ⚠ Bu blok YALNIZ iletişim sayfasının sağ sütununu bağlıyor.
   `.yan-kart` tur sayfalarında da kullanılıyor; kuralları oraya
   sızdırmamak için hepsi `.iletisim-yan` ile başlıyor. */
.iletisim-yan { display: flex; flex-direction: column; gap: 1.1rem; height: 100%; }
.iletisim-yan .yan-kart {
  margin-bottom: 0; flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.iletisim-yan .yan-kart h3 {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
}
.iletisim-yan .yan-kart p { margin-bottom: 0; overflow-wrap: anywhere; }
.iletisim-yan .yan-kart a { font-weight: 700; color: var(--altin-ac); }
.iletisim-yan .yan-kart a:hover { color: #fff; }
/* Not satırı kartın dibine oturuyor — üst şeritteki kartlarla aynı desen. */
.iletisim-yan .kart-not { margin-top: auto; padding-top: .8rem; color: #8D99A5; }
/* Kartlar forma göre uzayınca ortada boşluk kalıyordu: başlık üstte,
   not altta sabit; aradaki gövde artan boşluğu iki yana eşit paylaşıp
   ortalanıyor. */
.iletisim-yan .yan-kart > :not(h3):not(.kart-not) { margin-block: auto; }

/* Başlıktaki ikon rozeti: gece zeminde altın. */
.yan-ikon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(201, 162, 39, .16); color: var(--altin-ac);
}
.yan-ikon .ikon { width: 19px; height: 19px; }

/* Dar ekranda sütun formun altına iniyor; uzatma kuralı orada anlamsız. */
@media (max-width: 900px) {
  .iletisim-yan { height: auto; }
  .iletisim-yan .yan-kart { flex: 0 0 auto; }
}
.form-kutu {
  background: var(--ak); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--golge-1);
}
/* ⚠ `.form-not` ve `.onay-satir` kuralları 24.08.2026'da SİLİNDİ:
   Emir iletişim formundan açıklama paragrafını ve gizlilik onayı
   kutusunu kaldırttı, geriye kimsenin kullanmadığı kural kalmasın
   diye stilleri de düştü (öksüz dosya dersinin CSS hâli, §34). */
.form-kutu label { display: block; font-size: .86rem; font-weight: 650; color: var(--murekkep-2); margin-bottom: .3rem; }
.form-kutu input[type=text], .form-kutu input[type=tel], .form-kutu input[type=email],
.form-kutu select, .form-kutu textarea {
  width: 100%; padding: .65em .8em; font: inherit; border: 1px solid var(--cizgi);
  border-radius: var(--r-sm); background: var(--kagit); color: var(--murekkep);
}
.form-kutu textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.form-kutu :is(input,select,textarea):focus { outline: 2px solid var(--altin); outline-offset: 1px; }
.form-kutu .alan { margin-bottom: .8rem; }

/* ⚠ Emir 24.08.2026: "form çok uzun… kutular çok büyük… Adınız Soyadınız
   ile e-postanız arası çok boşluk var… mesajınız kutusu çok çok uzun."
   ⚠ `.satir-iki` TUR SAYFASINDA DA kullanılıyor (sayfa/tur.php:177).
   Bu yüzden daraltma `.form-kutu` ile kapsandı — kural oraya sızarsa
   tur sayfasının iki sütunlu bloğu da sıkışırdı (§60 sızıntı dersi). */
.form-kutu .satir-iki { gap: .8rem; margin-bottom: .8rem; }
.form-kutu label { margin-bottom: .22rem; }
/* Kutu yüksekliği yalnız dolgudan değil SATIR YÜKSEKLİĞİNDEN de geliyor:
   gövdenin 1.68'i form kutularında gereksiz yer kaplıyordu. */
.form-kutu :is(input,select,textarea) { padding: .5em .75em; line-height: 1.45; }
.form-kutu h2 { margin-bottom: .35em; }

/* Mesaj kutusunun altındaki karakter sayacı. Sınıra yaklaşınca renk
   değiştiriyor; sayı JS'ten geliyor ama kutunun `maxlength`i HTML'de —
   JS kapalıyken de sınır işliyor. */
.sayac {
  margin: .3rem 0 0; font-size: .8rem; color: var(--murekkep-3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.sayac.dolmak-uzere { color: var(--altin-koy); font-weight: 700; }
.sayac.doldu { color: #A3242C; font-weight: 700; }
.form-hata { background: #FBEBEC; border: 1px solid #F0CFD1; color: #7C1B21;
             border-radius: var(--r-sm); padding: .7rem .9rem; font-size: .9rem; margin: .8rem 0 0; }

/* Aynı önlem: kapak bağlantıları blok olmalı. */
.yazi-kart > a, .yazi-kart > a picture { display: block; }
.kat-kutu picture { display: block; position: absolute; inset: 0; }
.kat-kutu picture img { width: 100%; height: 100%; object-fit: cover; }
.slayt-zemin picture { display: block; width: 100%; height: 100%; }
.tur-kapak picture { display: block; }

/* =====================================================================
   DAR EKRAN TAŞMA DÜZELTMELERİ
   ⚠ 320/360/390 px ölçümünde iki gerçek taşma bulundu:

   1) `.iki-sutun` bir ızgara; ızgara öğesinin varsayılan `min-width: auto`
      değeri, içindeki geniş öğenin (kalkış tablosu) daralmasını
      engelliyordu. Sütunlara `min-width: 0` verilince tablo kendi
      kaydırma kutusunda kalıyor.

   2) Mobil menü çekmecesi `translateX(100%)` ile sağda duruyor ama
      `html` öğesinin yatay kaydırma genişliğine ekleniyordu. `body`de
      `overflow-x: hidden` vardı; asıl kaydırma kutusu `html` olduğu için
      oraya da konması gerekiyor.
   ===================================================================== */
html { overflow-x: hidden; }
.iki-sutun > * { min-width: 0; }
.ana-sutun, .yan-sutun { min-width: 0; }
.ana-sutun table { max-width: 100%; }
/* Uzun otel adı, e-posta ve adres satırları kartı zorlamasın */
.tur-satir span, .yan-kart p, .icerik-metin p, .program li { overflow-wrap: anywhere; }