/* ============================================================
   İKİYAKA TUR tasarım sistemi
   Dünya: gece laciverti + köpük beyazı + turkuaz dalga + gün batımı
   Kontrast sözleşmesi:
   - --dalga üstüne asla açık yazı gelmez, --dalga yazı olarak yalnız koyu zeminde
   - --gunes üstüne daima --ink yazı
   - beyaz yazı yalnız --gece / --gece-2 / --derin üstünde
   ============================================================ */

:root {
  --gece: #0A2A3D;
  --gece-2: #0E3B55;
  --derin: #005880;
  --derin-koyu: #00466A;
  --dalga: #30ABD5;
  --dalga-acik: #7FCCE8;
  --kopuk: #F2F7FA;
  --beyaz: #FFFFFF;
  --gunes: #E5A15C;
  --gunes-acik: #F2C083;
  --ink: #0B2433;
  --ink-yumus: #3D5A6C;
  --cizgi: #D7E4EC;
  --hata: #B3261E;
  --wa: #128C7E;
  --f-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --f-govde: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --r: 14px;
  --r-kucuk: 10px;
  --golge: 0 10px 30px rgba(10, 42, 61, .10);
  --golge-derin: 0 24px 60px rgba(10, 42, 61, .22);
  --gecis: .25s ease;
  --kap: 1200px;
}

/* ---------- Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-govde);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--kopuk);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--derin); text-decoration: none; }
a:hover { color: var(--derin-koyu); }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--dalga); color: var(--gece); }
:focus-visible { outline: 2px solid var(--dalga); outline-offset: 3px; border-radius: 4px; }

.atlama {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--gece); color: var(--beyaz); padding: 10px 18px; border-radius: 8px;
}
.atlama:focus { left: 8px; color: var(--beyaz); }

.kap { max-width: var(--kap); margin-inline: auto; padding-inline: 24px; }
.ikn { flex-shrink: 0; vertical-align: -.18em; }

/* ---------- Tipografi ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.18; letter-spacing: normal; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.125rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
strong { font-weight: 700; }

.bolum-bas { max-width: 680px; margin-bottom: clamp(36px, 6vw, 68px); }
.bolum-bas--orta { margin-inline: auto; text-align: center; }
.bolum-bas--orta .bolum-bas__ust { display: flex; align-items: center; justify-content: center; gap: 16px; }
.bolum-bas--orta .bolum-bas__ust::before, .bolum-bas--orta .bolum-bas__ust::after {
  content: ''; height: 1px; width: 52px; background: var(--dalga); opacity: .55;
}
.bolum-bas--orta .bolum-bas__alt { margin-inline: auto; }
.bolum-bas__ust {
  font-family: var(--f-govde); font-weight: 500; font-size: .84rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--derin);
  margin-bottom: 10px; text-wrap: balance;
}
.bolum-bas__baslik { color: var(--ink); text-wrap: balance; }
.bolum-bas__alt { margin-top: 12px; color: var(--ink-yumus); max-width: 56ch; text-wrap: pretty; }
.bolum-bas--koyu .bolum-bas__ust { color: var(--dalga-acik); }
.bolum-bas--koyu .bolum-bas__baslik { color: var(--beyaz); }
.bolum-bas--koyu .bolum-bas__alt { color: rgba(255, 255, 255, .78); }

.bolum { padding-block: clamp(72px, 10vw, 136px); }
.bolum--koyu { background: var(--gece); color: var(--beyaz); }
.bolum--beyaz { background: var(--beyaz); }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-govde); font-weight: 500; font-size: .95rem;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis), color var(--gecis);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--dolu { background: var(--derin); color: var(--beyaz); }
.btn--dolu:hover { background: var(--derin-koyu); color: var(--beyaz); box-shadow: var(--golge); }
.btn--govde { background: var(--gece); color: var(--beyaz); }
.btn--govde:hover { background: var(--gece-2); color: var(--beyaz); }
.btn--dalga { background: var(--dalga); color: var(--gece); }
.btn--dalga:hover { background: var(--dalga-acik); color: var(--gece); box-shadow: var(--golge); }
.btn--gunes { background: var(--gunes); color: var(--ink); }
.btn--gunes:hover { background: var(--gunes-acik); color: var(--ink); box-shadow: var(--golge); }
.btn--cerceve-acik { border-color: rgba(255, 255, 255, .55); color: var(--beyaz); }
.btn--cerceve-acik:hover { border-color: var(--beyaz); background: rgba(255, 255, 255, .08); color: var(--beyaz); }
.btn--wa { background: var(--wa); color: var(--beyaz); }
.btn--wa:hover { background: #0F7568; color: var(--beyaz); }
.btn--wa-cizgi {
  border-color: var(--wa); color: var(--wa); padding: 12px 14px;
}
.btn--wa-cizgi:hover { background: var(--wa); color: var(--beyaz); }

/* ---------- Üst menü ---------- */
.ust {
  position: fixed; inset-inline: 0; top: 0; z-index: 90;
  transition: background var(--gecis), box-shadow var(--gecis), padding var(--gecis);
  padding-block: 14px;
}
.ust .kap { max-width: none; padding-inline: clamp(18px, 2.6vw, 44px); }
.ust__ic { display: flex; align-items: center; gap: 20px; }
.ust__logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ust__logo img { width: 112px; height: 86px; object-fit: contain; transition: width var(--gecis), height var(--gecis); filter: drop-shadow(0 4px 14px rgba(6, 22, 32, .25)); }
.ust__logo-yazi {
  font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; letter-spacing: .1em;
  color: var(--ink); text-transform: uppercase; white-space: nowrap; transform: translateY(1px);
}
.ust__logo-yazi em { font-style: normal; font-weight: 400; letter-spacing: .18em; opacity: .9; }
.ust__sag { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.ust__nav { display: flex; align-items: center; gap: 4px; }
.ust__nav > a, .ust__acilir > button {
  font-weight: 500; font-size: .88rem; color: var(--ink); padding: 9px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ust__nav > a:hover, .ust__acilir > button:hover { background: rgba(0, 88, 128, .08); color: var(--derin); }
.ust__ok { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ust__acilir { position: relative; }
.ust__panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: var(--beyaz); border-radius: var(--r-kucuk); box-shadow: var(--golge-derin);
  padding: 8px; display: none; flex-direction: column;
}
.ust__acilir:hover .ust__panel, .ust__acilir:focus-within .ust__panel, .ust__panel--acik { display: flex; }
.ust__panel a { padding: 10px 14px; border-radius: 8px; font-weight: 600; font-size: .92rem; color: var(--ink); }
.ust__panel a:hover { background: var(--kopuk); color: var(--derin); }
/* Beyaz hap: menü + profil (viravira imzası) */
.ust__hap-kap { position: relative; }
.ust__hap {
  display: flex; align-items: center; gap: 10px; background: var(--beyaz); color: var(--ink);
  border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: 0 2px 12px rgba(10, 42, 61, .18);
  transition: box-shadow var(--gecis);
}
.ust__hap:hover { box-shadow: 0 4px 18px rgba(10, 42, 61, .28); }
.ust__hap-profil {
  width: 34px; height: 34px; border-radius: 50%; background: var(--gece); color: var(--beyaz);
  display: flex; align-items: center; justify-content: center;
}
.ust__acilan {
  position: absolute; right: 0; top: calc(100% + 12px); width: 300px; max-height: min(72vh, 640px);
  overflow-y: auto; background: var(--beyaz); border-radius: 16px; box-shadow: var(--golge-derin);
  padding: 10px; z-index: 130;
}
.ust__acilan-bolum { padding: 6px 0; }
.ust__acilan-bolum + .ust__acilan-bolum { border-top: 1px solid var(--cizgi); }
.ust__acilan-baslik {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-yumus); padding: 8px 12px 4px;
}
.ust__acilan a, .ust__acilan button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; font-size: .93rem; font-weight: 400; color: var(--ink);
}
.ust__acilan a:hover, .ust__acilan button:hover { background: var(--kopuk); color: var(--derin); }
.ust__acilan .ikn { color: var(--derin); flex-shrink: 0; }

.ust__eylem { display: flex; align-items: center; gap: 14px; }
.ust__dil {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-govde); font-weight: 500; font-size: .82rem;
  color: var(--ink); border: 1.6px solid var(--cizgi); padding: 6px 12px; border-radius: 999px;
}
.ust__dil svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
/* Aşağı oku bayrak gibi çerçevelenmesin */
.ust__dil .ikn { box-shadow: none; opacity: .65; transition: transform var(--gecis); }
.ust__dil[aria-expanded="true"] .ikn { transform: rotate(180deg); }

/* Dil açılır menüsü */
.ust__dil-kap { position: relative; }
.ust__dil { background: transparent; cursor: pointer; }
.ust__dil-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90;
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 12px;
  box-shadow: var(--golge); padding: 6px; min-width: 168px; list-style: none; margin: 0;
}
.ust__dil-menu li { margin: 0; }
.ust__dil-menu a, .ust__dil-secili {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; font-size: .9rem; font-weight: 500;
  color: var(--ink); white-space: nowrap;
}
.ust__dil-menu svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex-shrink: 0; }
.ust__dil-menu a:hover { background: var(--kopuk); color: var(--derin); }
.ust__dil-secili { background: var(--kopuk); font-weight: 700; cursor: default; }
.ust__tel, .ust__uye { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; color: var(--ink); white-space: nowrap; }
.ust__tel:hover, .ust__uye:hover { color: var(--derin); }
.ust__rez { padding: 11px 20px; font-size: .9rem; }
.ust__menu { display: none; color: var(--ink); padding: 6px; }

/* Şeffaf durum (hero üstünde) */
.ust--seffaf:not(.ust--kaydi) { background: linear-gradient(180deg, rgba(10, 42, 61, .55), transparent); }
.ust--seffaf:not(.ust--kaydi) .ust__logo-yazi,
.ust--seffaf:not(.ust--kaydi) .ust__nav > a,
.ust--seffaf:not(.ust--kaydi) .ust__acilir > button,
.ust--seffaf:not(.ust--kaydi) .ust__tel,
.ust--seffaf:not(.ust--kaydi) .ust__uye,
.ust--seffaf:not(.ust--kaydi) .ust__dil,
.ust--seffaf:not(.ust--kaydi) .ust__menu { color: var(--beyaz); }
.ust--seffaf:not(.ust--kaydi) .ust__nav > a:hover,
.ust--seffaf:not(.ust--kaydi) .ust__acilir > button:hover { background: rgba(255, 255, 255, .14); color: var(--beyaz); }
.ust__logo-acik { display: none; }
.ust--seffaf:not(.ust--kaydi) .ust__logo-koyu { display: none; }
.ust--seffaf:not(.ust--kaydi) .ust__logo-acik { display: block; }

/* Kaydırılmış ve düz sayfa durumu */
.ust--kaydi, .ust--dolu { background: var(--beyaz); box-shadow: 0 2px 20px rgba(10, 42, 61, .10); padding-block: 8px; }
.ust--kaydi .ust__logo img, .ust--dolu .ust__logo img { width: 70px; height: 54px; filter: none; }
@media (max-width: 1220px) { .ust__logo-yazi { display: none; } }
@media (max-width: 640px) {
  .ust__logo img { width: 74px; height: 57px; }
  .ust--kaydi .ust__logo img, .ust--dolu .ust__logo img { width: 54px; height: 41px; }
}

/* ---------- Mobil menü ---------- */
.mobil {
  position: fixed; inset: 0; z-index: 120; background: var(--gece); color: var(--beyaz);
  display: flex; flex-direction: column; padding: 18px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.mobil__bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mobil__kapat { color: var(--beyaz); padding: 8px; }
.mobil__nav { display: flex; flex-direction: column; }
.mobil__nav > a, .mobil__nav summary {
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 400; letter-spacing: .04em;
  color: var(--beyaz); padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.mobil__nav summary::-webkit-details-marker { display: none; }
.mobil__nav summary::after { content: '+'; font-size: 1.3rem; color: var(--dalga-acik); }
.mobil__nav details[open] summary::after { content: '–'; }
.mobil__nav details a {
  display: block; padding: 10px 0 10px 18px; color: rgba(255, 255, 255, .82); font-size: 1.05rem;
}
.mobil__nav details a:hover { color: var(--dalga-acik); }
.mobil__dil { color: var(--dalga-acik) !important; }
.mobil__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: min(71svh, 660px); display: flex; flex-direction: column;
  justify-content: center; color: var(--beyaz); overflow: hidden; background: var(--gece);
  padding-top: 100px; padding-bottom: 22px;
}
.hero__slaytlar, .hero__slaytlar img { position: absolute; inset: 0; }
.hero__slaytlar img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.6s ease; will-change: opacity;
}
.hero__slaytlar img.aktif { opacity: 1; }
.hero__ort {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 54%, rgba(10, 42, 61, .46) 0%, rgba(10, 42, 61, .18) 58%, rgba(10, 42, 61, 0) 78%),
    linear-gradient(180deg, rgba(10, 42, 61, .42) 0%, rgba(10, 42, 61, .12) 45%, rgba(10, 42, 61, .5) 100%);
}
.hero__ic {
  position: relative; z-index: 2; padding-block: 22px; margin-top: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__eyebrow { display: none; }
.hero__baslik {
  text-transform: none; font-weight: 700; letter-spacing: normal; text-wrap: balance;
  text-shadow: 0 2px 6px rgba(6, 22, 32, .55), 0 6px 30px rgba(6, 22, 32, .55);
}
.hero__baslik strong {
  font-weight: 700; display: inline; color: var(--beyaz);
  text-shadow: 0 2px 6px rgba(6, 22, 32, .55), 0 6px 30px rgba(6, 22, 32, .55);
}
.hero__alt {
  margin-top: 14px; max-width: 62ch; font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 500;
  color: var(--beyaz); text-wrap: pretty; text-shadow: 0 2px 12px rgba(6, 22, 32, .55);
}

/* Arama modülü (kart hali: liste sayfası filtresi) */
.arama {
  margin-top: 46px; background: var(--beyaz); border-radius: var(--r);
  box-shadow: var(--golge-derin); padding: 18px; max-width: 980px;
  display: grid; grid-template-columns: 1.1fr 1fr 1.2fr auto; gap: 14px; align-items: end;
}
.arama__alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.arama__alan label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-yumus); display: flex; gap: 6px; align-items: center; white-space: nowrap;
}
.arama .btn { padding-block: 14px; }

/* Hap biçimli hero araması (viravira ölçüleri) */
.arama--hap {
  grid-template-columns: 1.1fr 1fr 1.3fr auto;
  border-radius: 999px; padding: 8px 8px 8px 34px; gap: 0; align-items: center;
  width: min(100%, 960px);
}
.arama--hap .arama__alan { padding: 6px 22px 8px 18px; border-left: 1.4px solid var(--cizgi); gap: 2px; }
.arama--hap .arama__alan:first-child { border-left: 0; padding-left: 0; }
.arama--hap .arama__alan label { font-size: .7rem; }
.arama--hap input, .arama--hap select {
  border: 0; padding: 2px 0; border-radius: 0; background: transparent; font-weight: 600;
}

/* Tarih alanı.
   iOS Safari boş bir date input'ta HİÇBİR ŞEY basmaz (Chrome "gg.aa.yyyy" yazar),
   alan bomboş görünüyordu. Ayrıca iOS değeri dikeyde ortalayıp sola değil ortaya
   yaslıyor. Aşağısı iki sorunu da çözer: yerleşim düzeltilir, alan boşken kendi
   ipucumuz basılır, odaklanınca gerçek alan görünür. */
input[type="date"] { -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* Tarih alanı: etiket üstte, input ve ipucu AYNI ızgara hücresinde.
   Önce ipucu `position:absolute; bottom:2px` ile konumlanıyordu; iOS'ta boş bir
   date input neredeyse sıfır yükseklikte olduğu için kutu kısalıyor ve ipucu
   etiketin ÜSTÜNE biniyordu. Aynı hücrede istiflemek input'un yüksekliğine dair
   hiçbir varsayım yapmaz, iki tarayıcıda da hizalı durur. */
.arama__alan--tarih { display: grid; grid-template-rows: auto auto; align-items: center; }
.arama__alan--tarih > label { grid-row: 1; }
.arama__alan--tarih > input[type="date"],
.arama__alan--tarih > .arama__ipucu { grid-row: 2; grid-column: 1; align-self: center; }
.arama__alan--tarih > input[type="date"] { min-height: 1.6em; }
/* text-align açıkça veriliyor: hero içeriği ortalı olduğu için span bunu miras
   alıyordu ve ipucu, diğer alan değerlerinin (1-12 kişi, Hepsi) aksine ortada
   duruyordu. Form denetimleri bu mirası kendiliğinden sıfırlar, düz span almaz. */
.arama__ipucu { pointer-events: none; font-weight: 600; color: var(--ink); visibility: hidden; text-align: left; }
/* Boşken: tarayıcının kendi metnini gizle, ipucunu göster */
.arama__alan.bos > input[type="date"] { color: transparent; }
.arama__alan.bos > .arama__ipucu { visibility: visible; }
/* Odaklanınca gerçek alan geri gelir, ipucu çekilir */
.arama__alan.bos:focus-within > input[type="date"] { color: var(--ink); }
.arama__alan.bos:focus-within > .arama__ipucu { visibility: hidden; }
.arama--hap input:focus, .arama--hap select:focus { box-shadow: none; }
.arama--hap .btn { border-radius: 999px; padding: 19px 36px; font-size: 1rem; font-weight: 500; white-space: nowrap; }

/* Popüler aramalar satırı */
.hero__populer {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  font-size: .95rem; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 10px rgba(6, 22, 32, .6);
}
.hero__populer strong { font-weight: 700; }
.hero__populer a { color: var(--beyaz); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.hero__populer a:hover { color: var(--gunes-acik); }

/* Slayt noktaları */
.hero__noktalar { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.hero__noktalar button {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .45);
  transition: background var(--gecis), transform var(--gecis); padding: 0;
}
.hero__noktalar button.aktif { background: var(--beyaz); transform: scale(1.25); }

/* Hero altı özellik sırası */
.ozellik-sira { background: var(--beyaz); padding-block: clamp(16px, 2vw, 26px) clamp(36px, 4.5vw, 52px); }

/* Hizmet sayfası: ilgili blog yazıları listesi */
.ilgili-yazilar { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ilgili-yazilar a { display: inline-flex; align-items: center; gap: 8px; color: var(--derin); font-weight: 500; }
.ilgili-yazilar a:hover { text-decoration: underline; }

/* Fiyat sayfası: şeffaf karşılaştırma tablosu + etken kartları */
.fiyat-tablo-kap { overflow-x: auto; border: 1.4px solid var(--cizgi); border-radius: var(--r); background: var(--beyaz); box-shadow: var(--golge); }
.fiyat-tablo { width: 100%; border-collapse: collapse; min-width: 640px; }
.fiyat-tablo th, .fiyat-tablo td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--cizgi); }
.fiyat-tablo th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-yumus); background: var(--kopuk); }
.fiyat-tablo tr:last-child td { border-bottom: none; }
.fiyat-tablo__tip { color: var(--ink-yumus); font-size: .84rem; }
.fiyat-tablo__uye { color: var(--derin); font-weight: 700; }
.fiyat-tablo .btn { padding: 8px 16px; font-size: .84rem; white-space: nowrap; }
.fiyat-uye-cta { margin-top: 14px; display: flex; align-items: center; gap: 8px; color: var(--derin); }
.fiyat-uye-cta a { color: inherit; font-weight: 600; }
.fiyat-etken-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.fiyat-etken { background: var(--beyaz); border: 1.4px solid var(--cizgi); border-radius: var(--r); padding: 22px 20px; }
.fiyat-etken h3 { margin: 12px 0 6px; font-size: 1.05rem; }
.fiyat-etken p { color: var(--ink-yumus); font-size: .92rem; line-height: 1.6; }

/* GEO özet: yapay zeka aramaları için kim/nerede/ne kadar cevabı, sakin tek paragraf */
.giris-ozet { background: var(--beyaz); padding-block: 0 clamp(30px, 4vw, 46px); }
.giris-ozet p { max-width: 860px; margin-inline: auto; text-align: center; color: var(--ink-yumus); font-size: .98rem; line-height: 1.75; }
.ozellik-sira__ic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; text-align: center; }
.ozellik-sira__kalem { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ozellik-sira__kalem h3 { font-family: var(--f-govde); font-weight: 700; font-size: 1.08rem; }
.ozellik-sira__kalem p { color: var(--ink-yumus); font-size: .94rem; max-width: 26ch; text-wrap: balance; }

/* Viravira tarzı ikon: çizgi ikon + arkasında açık mavi leke */
/* Leke ikonu SARAR, arkasından kaymaz: inset:0 ile kapsayıcıyla aynı daire.
   Önceki hali 50x50 lekeyi right/bottom ile sağ alta itiyordu, ikon 44x44 ortada
   kalınca ikisi hizasız duruyordu. */
.ikon-halka {
  width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;
  color: var(--gece); position: relative; border: 0; background: none; box-shadow: none; border-radius: 0;
}
.ikon-halka .ikn { position: relative; z-index: 1; stroke-width: 1.7px; width: 38px; height: 38px; }
.ikon-halka::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(127, 204, 232, .42);
}
.ikon-halka--koyu { color: var(--beyaz); }
.ikon-halka--koyu::before { background: rgba(48, 171, 213, .35); }

/* Güven şeridi */
.guven {
  position: relative; z-index: 2; margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .18); padding-block: 16px;
}
.guven__ic { display: flex; flex-wrap: wrap; gap: 12px 36px; }
.guven__kalem { display: inline-flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.guven__kalem .ikn { color: var(--gunes-acik); }

/* ---------- Form öğeleri ---------- */
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--beyaz);
  border: 1.6px solid var(--cizgi); border-radius: 10px;
  padding: 12px 14px; width: 100%; transition: border-color var(--gecis), box-shadow var(--gecis);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--derin); box-shadow: 0 0 0 4px rgba(48, 171, 213, .22);
}
input.hatali, select.hatali, textarea.hatali { border-color: var(--hata); }
.form-hata { color: var(--hata); font-weight: 600; font-size: .92rem; margin-top: 10px; }
.form-basari {
  background: #E7F4EC; border: 1.6px solid #2E7D4F; color: #17522F;
  border-radius: var(--r-kucuk); padding: 16px 18px; font-weight: 600;
}
.onay-kutu { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--ink-yumus); }
.onay-kutu input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--derin); flex-shrink: 0; }
.onay-kutu a { text-decoration: underline; }

/* ---------- Yat kartı ---------- */
/* auto-fill 400px eşiğiyle geniş ekranda 2 sütun kuruyordu; filo 4 yatken
   2+2 oturuyordu, Keyfim çıkıp 3 yat kalınca 2+1 olup yanında koca bir boşluk
   bırakıyordu. auto-fit + daha küçük eşik: 3 yat tek sırada dizilir, sayı
   değişirse yerleşim kendini toplar. */
.yat-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 26px; }
/* Kartlar .gorun sarmalayıcısının içinde duruyor. Sarmalayıcı ızgara/şerit
   hücresi olarak esneyip en uzun karta uyuyor ama kartın kendisi içeriği
   kadar kalıyordu: İkiyaka Yat 2'de "kamara" satırı olmadığı için o kart
   mobilde 17px kısa duruyordu. Sarmalayıcı flex yapılıp kart onu doldurur. */
.yat-izgara > *, .org-izgara > * { display: flex; }
.yat-izgara > * > .yat-kart { flex: 1; }
.yat-kart {
  background: var(--beyaz); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--golge); display: flex; flex-direction: column;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.yat-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-derin); }
/* Kapak oranı, tekne dış çekim setinin oranıdır (1512x803). Yuva 3/2 kalırsa
   object-fit:cover kareyi soldan sağdan %10 kırpar ve teknenin burnu/kıçı
   kenara dayanır; kadraj boyunca teknenin tamamı görünsün diye yuva görsele
   uyduruldu. Set: uret/tekne-seti-normalize.py */
.yat-kart__foto { position: relative; aspect-ratio: 1512 / 803; overflow: hidden; display: block; }
.yat-kart__foto img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
  transition: opacity .5s ease, transform .8s ease;
}
.yat-kart:hover .yat-kart__foto img { transform: scale(1.05); }
.yat-kart__foto-ikinci { opacity: 0; }
.yat-kart:hover .yat-kart__foto-ikinci { opacity: 1; }
.yat-kart__tip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(10, 42, 61, .82); color: var(--beyaz);
  font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 13px 5px; border-radius: 999px; white-space: nowrap;
}
.yat-kart__govde { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.yat-kart__ad a { color: var(--ink); }
.yat-kart__ad a:hover { color: var(--derin); }
.yat-kart__spec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.yat-kart__spec li { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-yumus); white-space: nowrap; }
.yat-kart__spec .ikn { color: var(--derin); }
.yat-kart__fiyat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.yat-kart__fiyat strong { font-size: 1.32rem; color: var(--derin); font-weight: 700; white-space: nowrap; }
.yat-kart__fiyat del { color: var(--ink-yumus); font-size: .95rem; }
.yat-kart__fiyat span { color: var(--ink-yumus); font-size: .88rem; }
.yat-kart__uye-rozet {
  font-style: normal; background: var(--gunes); color: var(--ink);
  font-size: .72rem; font-weight: 700; padding: 4px 11px 3px; border-radius: 999px; white-space: nowrap;
}
.yat-kart__eylem { display: flex; gap: 10px; }
.yat-kart__eylem .btn--govde { flex: 1; }

/* ---------- Organizasyon kartları ---------- */
.org-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.org-kart {
  position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5;
  display: block; box-shadow: var(--golge);
}
.org-kart--genis { grid-column: span 2; aspect-ratio: auto; }
.org-kart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.org-kart:hover img { transform: scale(1.06); }
.org-kart__ort {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 42, 61, 0) 26%, rgba(10, 42, 61, .94) 100%);
}
.org-kart__yazi {
  position: absolute; inset-inline: 0; bottom: 0; padding: 22px;
  display: flex; flex-direction: column; gap: 7px;
}
.org-kart__yazi strong {
  font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; letter-spacing: normal;
  text-transform: none; color: var(--beyaz); text-wrap: balance;
}
.org-kart__alt {
  color: rgba(255, 255, 255, .88); font-size: .92rem; line-height: 1.5; max-width: 42ch; text-wrap: pretty;
}
.org-kart__git {
  display: inline-flex; align-items: center; gap: 7px; color: var(--dalga-acik);
  font-size: .88rem; font-weight: 700; opacity: 0; transform: translateY(6px);
  transition: opacity var(--gecis), transform var(--gecis);
}
.org-kart:hover .org-kart__git { opacity: 1; transform: none; }

/* ---------- Boğaz haritası ---------- */
.bogaz-bolum { background: var(--gece); }
.bogaz-bolum__ic { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.bogaz { width: 100%; max-width: 460px; height: auto; margin-inline: auto; display: block; }
.bogaz__kiyi { stroke: var(--dalga); stroke-width: 2; opacity: .75; }
.bogaz__kopru { stroke: var(--gunes-acik); stroke-width: 2.4; opacity: .9; }
.bogaz__kopru-kule { stroke: var(--gunes-acik); stroke-width: 1.6; opacity: .7; }
.bogaz__deniz { font: 400 11px var(--f-display); letter-spacing: .32em; fill: rgba(127, 204, 232, .78); }
.bogaz__yaka { font: 400 13px var(--f-display); letter-spacing: .5em; fill: rgba(255, 255, 255, .30); text-anchor: middle; }
.bogaz__ad { font: 600 13px var(--f-govde); fill: rgba(255, 255, 255, .92); }
.bogaz__pin { fill: var(--gunes-acik); }
.bogaz__hale { fill: rgba(229, 161, 92, .22); transform-origin: center; transform-box: fill-box; animation: hale 2.6s ease-out infinite; }
.bogaz__nokta { cursor: pointer; }
.bogaz__nokta--secili .bogaz__pin, .bogaz__nokta:hover .bogaz__pin { fill: var(--dalga-acik); }
.bogaz__nokta--secili .bogaz__ad, .bogaz__nokta:hover .bogaz__ad { fill: var(--dalga-acik); }
@keyframes hale { 0% { transform: scale(.55); opacity: .9; } 70% { transform: scale(1.25); opacity: 0; } 100% { opacity: 0; } }

.binis-liste { display: flex; flex-direction: column; gap: 28px; }
.binis-liste__yaka {
  color: var(--dalga-acik); font-family: var(--f-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px;
}
/* Yaka başlıkları koyu bölümün içinde ama kendi renk kuralları yoktu: varsayılan
   --ink (#0B2433) --gece (#0A2A3D) zemine düşüyordu, ölçülen kontrast 1,07 —
   yani başlıklar görünmüyordu. Bölümün diğer üst başlıklarıyla aynı açık maviye
   alındı (ölçülen kontrast 8,7). */
.bogaz-bolum .binis-liste h3 {
  color: var(--dalga-acik); font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
}
.binis-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.binis-izgara .binis-cip { width: 100%; justify-content: flex-start; }
.binis-cipler { display: flex; flex-wrap: wrap; gap: 12px; }
.binis-cip {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.4px solid rgba(255, 255, 255, .30); color: var(--beyaz);
  padding: 13px 20px; border-radius: 999px; font-weight: 500; font-size: .95rem;
  transition: border-color var(--gecis), background var(--gecis); white-space: nowrap; cursor: pointer;
}
.binis-cip:hover, .binis-cip--secili { border-color: var(--dalga-acik); background: rgba(48, 171, 213, .14); color: var(--beyaz); }
.binis-cip .ikn { color: var(--gunes-acik); }

/* Google Maps bloğu */
.gmaps-kart {
  border-radius: var(--r); overflow: hidden; background: var(--gece-2);
  box-shadow: var(--golge-derin); aspect-ratio: 4 / 3.4; position: relative;
}
.gmaps-kart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gmaps-ipucu { margin-top: 12px; font-size: .88rem; color: rgba(255, 255, 255, .65); }

/* Google yorumları */
.yorum-ozet { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.yorum-ozet__puan { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--ink); }
.yorum-ozet__detay { display: flex; flex-direction: column; gap: 4px; }
.yorum-ozet__yildizlar { color: var(--gunes); display: inline-flex; gap: 3px; }
.yorum-ozet__kaynak { color: var(--ink-yumus); font-size: .95rem; }
.yorum-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }

/* Akan yorum şeridi */
.yorum-serit { overflow: hidden; }
.yorum-serit__ic { display: flex; gap: 22px; width: max-content; align-items: flex-start; animation: yorum-kay 45s linear infinite; }
.yorum-serit__ic:hover { animation-play-state: paused; }
.yorum-serit__kopya { display: flex; gap: 22px; align-items: flex-start; }
.yorum-serit .yorum-kart { width: min(340px, 78vw); flex-shrink: 0; }
@keyframes yorum-kay { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }
@media (prefers-reduced-motion: reduce) {
  .yorum-serit__ic { animation: none; flex-wrap: wrap; width: auto; }
  .yorum-serit__kopya { display: none; }
}

.yorum-kart {
  background: var(--beyaz); border-radius: var(--r); box-shadow: var(--golge);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.yorum-kart__yildizlar { color: var(--gunes); display: inline-flex; gap: 2px; }
.yorum-kart p { color: #2E4655; font-size: .96rem; }
.yorum-kart footer { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--ink-yumus); }
.yorum-kart footer strong { color: var(--ink); }

/* ---------- Adımlar ---------- */
.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 4vw, 44px); }
.adim__no {
  font-family: var(--f-display); font-weight: 400; font-size: 3.4rem; color: var(--dalga);
  line-height: 1; display: flex; align-items: center; gap: 18px;
}
.adim__no::after { content: ''; flex: 1; height: 1px; background: var(--cizgi); }
/* Küçük daire, ikon da orantılı küçülür: 38px sabit kalsa daire içinde sıkışırdı */
.adim__no .ikon-halka { width: 58px; height: 58px; }
.adim__no .ikon-halka .ikn { width: 29px; height: 29px; }
.adim h3 { margin: 16px 0 10px; }
.adim p { color: var(--ink-yumus); text-wrap: pretty; }

/* ---------- Galeri ---------- */
.serit { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 330px); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.serit::-webkit-scrollbar { height: 8px; }
.serit::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 99px; }
.serit a, .serit figure { scroll-snap-align: start; border-radius: var(--r-kucuk); overflow: hidden; aspect-ratio: 4 / 3; position: relative; margin: 0; }
.serit figure { cursor: zoom-in; }
.serit img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.serit a:hover img, .serit figure:hover img { transform: scale(1.05); }

.filtre-cipler { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filtre-cip {
  border: 1.6px solid var(--cizgi); background: var(--beyaz); color: var(--ink-yumus);
  padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: .9rem;
  transition: all var(--gecis); white-space: nowrap;
}
.filtre-cip:hover { border-color: var(--derin); color: var(--derin); }
.filtre-cip--secili { background: var(--gece); border-color: var(--gece); color: var(--beyaz); }
.galeri-izgara { columns: 3; column-gap: 18px; }
.galeri-izgara figure { margin-bottom: 18px; break-inside: avoid; border-radius: var(--r-kucuk); overflow: hidden; position: relative; cursor: zoom-in; }
.galeri-izgara img { width: 100%; transition: transform .6s ease; }
.galeri-izgara figure:hover img { transform: scale(1.04); }

/* Işık kutusu */
.isik {
  position: fixed; inset: 0; z-index: 150; background: rgba(6, 22, 32, .94);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.isik__sahne { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.isik img { max-width: min(1100px, 92vw); max-height: 78vh; width: auto; height: auto; border-radius: 8px; box-shadow: var(--golge-derin); }
/* Yeni kare inerken görsel hafifçe soluyor: boş beyaz sıçrama yerine yumuşak geçiş */
.isik__sahne--bekliyor img { opacity: .35; }
.isik__sahne img { transition: opacity .2s ease; }
.isik__yazi {
  display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .82);
  font-size: .88rem; letter-spacing: .01em; min-height: 20px;
}
.isik__baslik { font-weight: 500; }
.isik__sayac {
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .6);
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .22);
}
.isik__baslik:empty + .isik__sayac { padding-left: 0; border-left: 0; }
.isik__kapat, .isik__onceki, .isik__sonraki {
  position: absolute; color: var(--beyaz); padding: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); transition: background var(--gecis);
}
.isik__kapat:hover, .isik__onceki:hover, .isik__sonraki:hover { background: rgba(255, 255, 255, .22); }
.isik__kapat { top: 20px; right: 20px; }
.isik__onceki { left: 16px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.isik__sonraki { right: 16px; top: 50%; transform: translateY(-50%); }
/* Mobilde gezinme kaydırmayla yapılır; oklar başparmak altında kalmasın diye alta iner */
@media (max-width: 700px) {
  .isik { padding: 14px; }
  .isik img { max-width: 96vw; max-height: 68vh; }
  .isik__onceki, .isik__sonraki { top: auto; bottom: 22px; transform: none; }
  .isik__onceki { left: 24px; transform: rotate(180deg); }
  .isik__sonraki { right: 24px; }
}

/* ---------- SSS ---------- */
.sss { max-width: 780px; }
.sss__kalem { background: var(--beyaz); border-radius: var(--r-kucuk); margin-bottom: 12px; box-shadow: var(--golge); overflow: hidden; }
.sss__kalem summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; font-weight: 700; font-size: 1.02rem; color: var(--ink);
  list-style: none;
}
.sss__kalem summary::-webkit-details-marker { display: none; }
.sss__ok { transform: rotate(90deg); transition: transform var(--gecis); color: var(--derin); }
.sss__kalem[open] .sss__ok { transform: rotate(-90deg); }
.sss__cevap { padding: 0 22px 20px; color: var(--ink-yumus); max-width: 68ch; }
.bolum--koyu .sss__kalem { background: var(--gece-2); }
.bolum--koyu .sss__kalem summary { color: var(--beyaz); }
.bolum--koyu .sss__cevap { color: rgba(255, 255, 255, .78); }
.bolum--koyu .sss__ok { color: var(--dalga-acik); }

/* ---------- Blog ---------- */
.blog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.blog-kart { background: var(--beyaz); border-radius: var(--r); overflow: hidden; box-shadow: var(--golge); display: flex; flex-direction: column; transition: transform var(--gecis), box-shadow var(--gecis); }
.blog-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-derin); }
.blog-kart__foto { aspect-ratio: 16 / 9; overflow: hidden; display: block; background: var(--gece-2); }
.blog-kart__foto img { width: 100%; height: 100%; object-fit: cover; }
.blog-kart__bos { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dalga); }
.blog-kart__govde { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.blog-kart time { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-yumus); }
.blog-kart h3 { font-family: var(--f-govde); font-weight: 700; font-size: 1.08rem; line-height: 1.4; }
.blog-kart h3 a { color: var(--ink); }
.blog-kart h3 a:hover { color: var(--derin); }
.blog-kart p { color: var(--ink-yumus); font-size: .93rem; }
.blog-kart__git { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--derin); font-weight: 700; font-size: .9rem; }

.makale { max-width: 760px; margin-inline: auto; }
.makale > p, .makale li { color: #2E4655; font-size: 1.05rem; }
.makale > p { margin-bottom: 18px; text-wrap: pretty; }
.makale h2 { margin: 38px 0 14px; font-size: 1.6rem; }
.makale h3 { margin: 28px 0 10px; }
.makale ul, .makale ol { margin: 0 0 18px 22px; }
.makale ul { list-style: disc; }
.makale ol { list-style: decimal; }
.makale a { text-decoration: underline; }
.makale blockquote { border-left: 3px solid var(--dalga); padding: 6px 0 6px 20px; color: var(--ink-yumus); margin-bottom: 18px; }

/* Blog yazısı zenginleştirmeleri (10 Ağu 2026).
   Migre yazılar düz paragraf yığınıydı; kısa cevap kutusu, içindekiler ve
   yazı içi görsel hem okumayı bölüyor hem de arama/yapay zeka tarafına
   yapılandırılmış işaret veriyor. */
.makale-ozet {
  background: var(--kopuk); border-left: 4px solid var(--derin);
  border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0;
  padding: 18px 22px; margin-bottom: 26px;
}
.makale-ozet__ust {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--derin); font-weight: 700; margin-bottom: 6px;
}
.makale-ozet p:last-child { color: var(--ink); font-size: 1.02rem; margin: 0; text-wrap: pretty; }

.makale-icindekiler {
  border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
  padding: 18px 22px 16px; margin-bottom: 30px; background: var(--beyaz);
}
.makale-icindekiler__ust {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-yumus); font-weight: 700; margin-bottom: 10px;
}
.makale-icindekiler ol { margin: 0 0 0 20px; list-style: decimal; }
.makale-icindekiler ul { margin: 0; list-style: none; }
.makale-icindekiler--sade li { padding-left: 0; }
.makale-icindekiler li { margin-bottom: 5px; font-size: .97rem; }
.makale-icindekiler a { color: var(--derin); text-decoration: none; }
.makale-icindekiler a:hover { text-decoration: underline; }

.makale-gorsel { position: relative; margin: 34px 0 30px; }
.makale-gorsel img { width: 100%; height: auto; border-radius: var(--r-kucuk); display: block; }
.makale-gorsel figcaption {
  margin-top: 8px; font-size: .86rem; color: var(--ink-yumus); text-align: center;
}
/* Yazı içi görselde işaret alt yazının üstünde, kadranın içinde kalmalı */
.makale-gorsel .yz-isaret { bottom: 42px; }

/* h2'lere id verildi: sabit header'ın altına kaymasın diye kaydırma payı */
.makale h2[id] { scroll-margin-top: 96px; }

/* Blog yan sütunu */
.yan-yazilar { background: var(--beyaz); border-radius: var(--r); box-shadow: var(--golge); padding: 22px; }
.yan-yazi { display: flex; gap: 14px; padding-block: 12px; border-bottom: 1px solid var(--cizgi); align-items: center; }
.yan-yazi:last-of-type { border-bottom: 0; }
.yan-yazi img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
/* Flex öğesinin varsayılan min-width'i auto'dur: içindeki uzun başlık kutuyu
   içerikten daha dar olmaya bırakmıyordu ve mobilde yazı sağa taşıyordu
   (390px'te sayfa 452px'e çıkıyordu). min-width:0 küçülmeye izin verir. */
.yan-yazi > span { min-width: 0; }
.yan-yazi strong { overflow-wrap: anywhere; }
.yan-yazi time { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-yumus); margin-bottom: 3px; }
.yan-yazi strong { font-size: .9rem; line-height: 1.4; color: var(--ink); font-weight: 600; }
.yan-yazi:hover strong { color: var(--derin); }

/* Marka dalga deseni (koyu bölümlerde hafif doku) */
.bolum--koyu, .bogaz-bolum, .cta {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90'%3E%3Cpath d='M0 22c18-10 30-10 47 0s29 10 46 0 30-10 47 0' fill='none' stroke='%237FCCE8' stroke-opacity='.05' stroke-width='2'/%3E%3Cpath d='M0 66c18-10 30-10 47 0s29 10 46 0 30-10 47 0' fill='none' stroke='%2330ABD5' stroke-opacity='.04' stroke-width='2'/%3E%3C/svg%3E");
}
.bolum--koyu { background-color: var(--gece); }
.bogaz-bolum { background-color: var(--gece); }

/* Yat vektörü filigranı (açık bölüm köşe dekoru) */
.dekor-yat { position: relative; overflow: hidden; }
.dekor-yat::after {
  content: ''; position: absolute; right: -30px; top: 26px; width: 340px; height: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23005880' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h40l-4 4H9z'/%3E%3Cpath d='M10 17c0-2 1.5-4 4-4h16c3 0 5 1.6 6 4'/%3E%3Cpath d='M16 13V7h8l6 6'/%3E%3Cpath d='M24 7l2-3'/%3E%3Cpath d='M2 21c2 1.4 4 1.4 6 0M40 21c2 1.4 4 1.4 6 0'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; opacity: .06; pointer-events: none;
}

/* ---------- CTA ---------- */
.cta { position: relative; padding-block: clamp(70px, 11vw, 130px); overflow: hidden; color: var(--beyaz); }
.cta__zemin { position: absolute; inset: 0; background: linear-gradient(rgba(10, 42, 61, .72), rgba(10, 42, 61, .78)), url('../img/galeri/g87.webp') center/cover; }
.cta__ic { position: relative; text-align: center; max-width: 640px; }
.cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); text-transform: none; font-weight: 700; letter-spacing: normal; }
.cta p { margin: 14px auto 28px; color: rgba(255, 255, 255, .88); max-width: 46ch; }
.cta__butonlar { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.alt { background: var(--gece); color: rgba(255, 255, 255, .80); }
.alt__dalga { height: 44px; background: var(--kopuk); }
.alt__dalga svg { width: 100%; height: 100%; display: block; }
.alt a { color: rgba(255, 255, 255, .80); }
.alt a:hover { color: var(--dalga-acik); }
.alt__ic { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 34px; padding-block: 56px 40px; }
.alt__marka p { margin: 16px 0; max-width: 30ch; text-wrap: pretty; }
.alt__puan { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; margin-bottom: 12px; }
.alt__yildizlar { color: var(--gunes-acik); display: inline-flex; gap: 2px; }
.alt__ig { font-weight: 600; }
.alt__sutun { display: flex; flex-direction: column; gap: 10px; }
.alt__sutun h3 {
  font-size: .82rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--dalga-acik); margin-bottom: 6px;
}
.alt__sutun a { font-size: .95rem; }
.alt__iletisim a, .alt__iletisim address { display: flex; align-items: flex-start; gap: 10px; font-style: normal; font-size: .95rem; }
.alt__iletisim .ikn { color: var(--gunes-acik); margin-top: 3px; }
.alt__cizgi {
  border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: .85rem;
}
.alt__cizgi nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Yüzen ögeler ---------- */
.wa-yuzen {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: var(--beyaz);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(18, 140, 126, .45);
  transition: transform var(--gecis);
}
.wa-yuzen:hover { transform: scale(1.08); color: var(--beyaz); }

.mobil-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 85; display: none;
  grid-template-columns: 1fr 1fr 1.4fr; background: var(--beyaz);
  border-top: 1px solid var(--cizgi); padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(10, 42, 61, .10);
}
.mobil-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px 8px; font-size: .72rem; font-weight: 700; color: var(--ink-yumus);
}
.mobil-bar a .ikn { color: var(--derin); }
.mobil-bar__rez { background: var(--derin); color: var(--beyaz) !important; }
/* DİKKAT: seçici `.mobil-bar a .ikn` kadar özgül olmak zorunda. `.mobil-bar__rez .ikn`
   (0,2,0) o kuralı (0,2,1) yenemiyordu ve rezervasyon ikonu lacivert zemine
   lacivert çiziliyordu, yani görünmüyordu. Araya `a` eklendi. */
.mobil-bar a.mobil-bar__rez .ikn { color: var(--beyaz); }

/* ---------- Kampanya penceresi ---------- */
.pencere { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 22px; }
.pencere__zemin { position: absolute; inset: 0; background: rgba(6, 22, 32, .62); backdrop-filter: blur(3px); }
.pencere__kutu {
  position: relative; background: var(--beyaz); border-radius: 18px; max-width: 430px; width: 100%;
  padding: 34px 30px 26px; text-align: center; box-shadow: var(--golge-derin);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.pencere__kapat { position: absolute; top: 12px; right: 12px; color: var(--ink-yumus); padding: 6px; }
.pencere__rozet {
  display: inline-flex; align-items: center; gap: 7px; background: var(--gunes); color: var(--ink);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px 6px; border-radius: 999px; white-space: nowrap;
}
.pencere__kutu h2 { font-size: 1.7rem; }
.pencere__kutu p { color: var(--ink-yumus); max-width: 34ch; }
.pencere__gec { color: var(--ink-yumus); font-size: .9rem; text-decoration: underline; }

/* ---------- Kirinti ---------- */
.kirinti { font-size: .85rem; margin-bottom: 18px; }
.kirinti ol { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-yumus); }
.kirinti li:not(:last-child)::after { content: '›'; margin-left: 6px; color: var(--cizgi); }
.kirinti a { color: var(--ink-yumus); }
.kirinti a:hover { color: var(--derin); }
.kirinti [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Sayfa başlık bandı (iç sayfalar) ---------- */
/* Üretilmiş görsel işareti: okunur ama sessiz. Ziyaretçi sahnenin temsili
   olduğunu görebilmeli, tasarımın önüne de geçmemeli. Kapsayıcılar zaten
   position:relative (.bant, .org-kart, .serit a). */
.yz-isaret {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  font-size: .66rem; letter-spacing: .04em; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  color: rgba(255, 255, 255, .92); background: rgba(6, 22, 32, .58);
  backdrop-filter: blur(3px); pointer-events: none; white-space: nowrap;
}
.bant .yz-isaret { right: 18px; bottom: 14px; }
@media (max-width: 700px) { .yz-isaret { font-size: .6rem; right: 8px; bottom: 8px; } }

.bant { background: var(--gece); color: var(--beyaz); padding: 132px 0 54px; position: relative; overflow: hidden; }
.bant--gorselli { min-height: 380px; display: flex; align-items: flex-end; }
.bant__foto { position: absolute; inset: 0; }
.bant__foto img { width: 100%; height: 100%; object-fit: cover; }
.bant__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 42, 61, .55), rgba(10, 42, 61, .80)); }
.bant .kap { position: relative; z-index: 2; }
.bant__ust { font-family: var(--f-display); font-size: .84rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dalga-acik); margin-bottom: 10px; }
.bant h1 { font-weight: 700; text-transform: none; letter-spacing: normal; font-size: clamp(1.9rem, 3.8vw, 2.9rem); text-wrap: balance; }
.bant__alt { margin-top: 12px; max-width: 60ch; color: rgba(255, 255, 255, .85); text-wrap: pretty; }
.bant .kirinti, .bant .kirinti a, .bant .kirinti ol { color: rgba(255, 255, 255, .70); }
.bant .kirinti [aria-current] { color: var(--beyaz); }

/* ---------- Yat detay ---------- */
.detay-galeri { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 12px; border-radius: var(--r); overflow: hidden; }
.detay-galeri button { position: relative; padding: 0; overflow: hidden; cursor: zoom-in; display: block; }
.detay-galeri img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.detay-galeri button:hover img { transform: scale(1.04); }
/* Ana kare 4/3 iken dış çekim setinin (1512x803) yatay kenarlarından yaklaşık
   %29'u kırpılıyordu, teknenin burnu kadrajın dışında kalıyordu. Yuva setin
   oranına çekildi: kırpma yok, yan kareler de aynı orana oturuyor. */
.detay-galeri__ana { grid-row: span 2; aspect-ratio: 1512 / 803; }
/* Yan kareler yükseklik yerine oranla kurulur. Yükseklikle kurulunca satırlar
   img'nin 800x468 intrinsic oranından besleniyor ve sağ sütun ana kareden
   uzun kalıyordu. Aynı oran = iki sütun aynı hizada biter. */
.detay-galeri__yan { height: auto; min-height: 0; aspect-ratio: 1512 / 803; }
.detay-galeri__daha {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(10, 42, 61, .58); color: var(--beyaz); font-weight: 700;
}
.detay-galeri__daha--mobil { display: none; }
.detay-yerlesim { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(26px, 4vw, 54px); align-items: start; margin-top: 34px; }
/* Blog yazısı biraz daha geniş metin sütunu ister. Şablonda satır içi stille
   verilmişti, satır içi stil mobil kuralı ezdiği için yazı sayfası mobilde tek
   sütuna düşmüyordu. */
.detay-yerlesim--yazi { grid-template-columns: 1.7fr 1fr; }
.detay-baslik { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.detay-baslik h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); text-transform: none; font-weight: 400; color: var(--ink); }
.detay-ozet { margin-top: 12px; color: var(--ink-yumus); max-width: 62ch; font-size: 1.04rem; text-wrap: pretty; }
.spec-tablo { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.spec-tablo div {
  background: var(--beyaz); border-radius: var(--r-kucuk); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; box-shadow: var(--golge);
}
.spec-tablo dt { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-yumus); display: flex; align-items: center; gap: 6px; }
.spec-tablo dt .ikn { color: var(--derin); }
.spec-tablo dd { font-size: 1.12rem; font-weight: 700; color: var(--ink); }
.ozellik-cipler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ozellik-cip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--beyaz);
  border: 1.4px solid var(--cizgi); border-radius: 999px; padding: 8px 16px;
  font-weight: 500; font-size: .9rem; color: var(--ink);
}
.ozellik-cip .ikn { color: var(--derin); }

.rez-kutu {
  position: sticky; top: 90px; background: var(--beyaz); border-radius: var(--r);
  box-shadow: var(--golge-derin); padding: 26px; display: flex; flex-direction: column; gap: 16px;
}
.rez-kutu__fiyat { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rez-kutu__fiyat strong { font-size: 1.9rem; color: var(--derin); }
.rez-kutu__fiyat del { color: var(--ink-yumus); }
.rez-kutu__fiyat span { color: var(--ink-yumus); }
.rez-kutu__uye {
  background: linear-gradient(100deg, rgba(229, 161, 92, .16), rgba(48, 171, 213, .12));
  border: 1.4px dashed var(--gunes); border-radius: var(--r-kucuk); padding: 11px 14px;
  font-size: .9rem; color: var(--ink); font-weight: 600;
}
.rez-kutu__uye a { text-decoration: underline; }
.rez-kutu form { display: flex; flex-direction: column; gap: 12px; }
.rez-kutu .alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rez-kutu__not { font-size: .82rem; color: var(--ink-yumus); }
.rez-kutu__guven { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--ink-yumus); }
.rez-kutu__guven .ikn { color: var(--wa); }

/* ---------- Üyelik ---------- */
.uye-yerlesim { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: start; }
.uye-kart { background: var(--beyaz); border-radius: var(--r); box-shadow: var(--golge); padding: 30px; }
.uye-kart h2 { margin-bottom: 18px; font-size: 1.5rem; }
.uye-kart form { display: flex; flex-direction: column; gap: 14px; }
.uye-avantaj { background: var(--gece); color: var(--beyaz); border-radius: var(--r); padding: 30px; }
.uye-avantaj h2 { color: var(--beyaz); font-size: 1.5rem; margin-bottom: 18px; }
.uye-avantaj ul { display: flex; flex-direction: column; gap: 14px; }
.uye-avantaj li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .88); }
.uye-avantaj .ikn { color: var(--gunes-acik); margin-top: 3px; }

/* ---------- Kampanyalar sayfası ---------- */
.kamp-one {
  display: grid; grid-template-columns: 1.05fr 1fr; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--golge-derin); background: var(--gece); color: var(--beyaz);
  min-height: 440px;
}
.kamp-one__panel { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; justify-content: center; }
.kamp-one__rozet {
  display: inline-flex; align-items: center; gap: 7px; background: var(--gunes); color: var(--ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px 6px; border-radius: 999px;
}
.kamp-one__oran {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: .95; color: var(--gunes-acik); display: flex; align-items: baseline; gap: 12px;
}
.kamp-one__oran span { font-size: 1.1rem; font-weight: 500; color: rgba(255, 255, 255, .8); letter-spacing: .06em; }
.kamp-one__panel h2 { color: var(--beyaz); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.kamp-one__panel > p { color: rgba(255, 255, 255, .85); max-width: 50ch; }
.kamp-one__eylem { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.kamp-one__foto { position: relative; min-height: 300px; }
.kamp-one__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.kamp-gecerlilik { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; opacity: .92; }
.kamp-one .kamp-gecerlilik .ikn { color: var(--gunes-acik); }

.kod-cip {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1.6px dashed var(--gunes); border-radius: 12px; padding: 9px 10px 9px 16px;
  background: rgba(229, 161, 92, .10);
}
.kod-cip__etiket { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.kod-cip strong { font-size: 1.05rem; letter-spacing: .14em; font-weight: 700; }
.kod-cip button {
  display: inline-flex; align-items: center; gap: 6px; background: var(--gunes); color: var(--ink);
  font-size: .8rem; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  transition: background var(--gecis), transform var(--gecis);
}
.kod-cip button:hover { background: var(--gunes-acik); }
.kod-cip button.kopyalandi { background: #2E7D4F; color: var(--beyaz); }
.kamp-kart .kod-cip { background: rgba(229, 161, 92, .12); color: var(--ink); }

.kamp-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.kamp-kart {
  background: var(--beyaz); border-radius: var(--r); overflow: hidden; box-shadow: var(--golge);
  display: flex; flex-direction: column; transition: transform var(--gecis), box-shadow var(--gecis);
}
.kamp-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-derin); }
.kamp-kart__foto { position: relative; aspect-ratio: 16 / 8.4; }
.kamp-kart__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kamp-kart__oran-rozet {
  position: absolute; left: 18px; bottom: -20px; z-index: 2;
  background: var(--gunes); color: var(--ink); font-family: var(--f-display); font-weight: 700;
  font-size: 1.5rem; padding: 12px 18px; border-radius: 16px; box-shadow: var(--golge);
}
.kamp-kart .kampanya-kart__rozet { position: absolute; top: 14px; right: 14px; }
.kamp-kart__govde { padding: 34px 24px 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex: 1; }
.kamp-kart__govde h3 { font-size: 1.2rem; }
.kamp-kart__govde > p { color: var(--ink-yumus); font-size: .95rem; }
.kamp-kart__govde .kamp-gecerlilik { color: var(--ink); }
.kamp-kart__govde .kamp-gecerlilik .ikn { color: var(--derin); }
.kamp-kart__govde .btn { margin-top: auto; }

@media (max-width: 860px) {
  .kamp-one { grid-template-columns: 1fr; }
  .kamp-one__foto { order: -1; min-height: 220px; }
  .kamp-izgara { grid-template-columns: 1fr; }
}

/* ---------- Kampanya kartları ---------- */
.kampanya-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.kampanya-kart {
  background: var(--beyaz); border-radius: var(--r); box-shadow: var(--golge);
  padding: 28px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
}
.kampanya-kart::before {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--dalga), var(--derin));
}
.kampanya-kart__oran { font-family: var(--f-display); font-weight: 400; font-size: 2.6rem; color: var(--derin); line-height: 1; }
.kampanya-kart h3 { font-family: var(--f-govde); font-weight: 700; font-size: 1.12rem; }
.kampanya-kart p { color: var(--ink-yumus); font-size: .95rem; flex: 1; }
.kampanya-kart__rozet {
  position: absolute; top: 18px; right: 18px; background: var(--gunes); color: var(--ink);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px 4px; border-radius: 999px;
}

/* ---------- Cila paketi (Ağu 2026 denetimi) ---------- */

/* Çapa hedefleri sabit menünün altında kalmasın */
[id] { scroll-margin-top: 104px; }

/* Grid sütunları içerik (yatay şerit) yüzünden viewport'u aşmasın */
.detay-yerlesim > * { min-width: 0; }

/* Üst menü: rezervasyon CTA hapı + telefon */
.ust__rez-cta { padding: 10px 20px; font-size: .88rem; white-space: nowrap; }
.ust--kaydi .ust__rez-cta, .ust--dolu .ust__rez-cta { padding: 9px 18px; }

/* Şeffaf menüde okunurluk: koyu gradyan biraz güçlü + yazı gölgesi */
.ust--seffaf:not(.ust--kaydi) { background: linear-gradient(180deg, rgba(10, 42, 61, .62), transparent); }
.ust--seffaf:not(.ust--kaydi) .ust__nav > a,
.ust--seffaf:not(.ust--kaydi) .ust__tel { text-shadow: 0 1px 6px rgba(6, 22, 32, .5); }

/* Hap aramada odak geri bildirimi */
.arama--hap .arama__alan:focus-within { background: var(--kopuk); border-radius: 999px; }
.arama--hap .arama__alan:focus-within label { color: var(--derin); }

/* Slayt noktaları: 44px görünmez dokunma alanı */
.hero__noktalar button { position: relative; }
.hero__noktalar button::before { content: ''; position: absolute; inset: -17px; border-radius: 50%; }

/* Işık kutusu yumuşak giriş */
.isik { animation: isik-gir .22s ease; }
.isik img { animation: isik-foto .26s ease; }
@keyframes isik-gir { from { opacity: 0; } }
@keyframes isik-foto { from { opacity: 0; transform: scale(.985); } }

/* Organizasyon kartı oku dokunmatikte her zaman görünür */
@media (max-width: 860px) { .org-kart__git { opacity: 1; } }

/* Yorum şeridi mobilde elle kaydırılır (animasyon durur) */
@media (max-width: 640px) {
  .yorum-serit { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .yorum-serit::-webkit-scrollbar { display: none; }
  .yorum-serit__ic { animation: none; }
  .yorum-serit .yorum-kart { scroll-snap-align: start; }
  .ust__rez-cta { display: none; }
}

/* Nötr boş durum (sonuç yokluğu başarı değildir) */
.form-notr {
  background: var(--kopuk); border: 1.4px solid var(--cizgi); color: var(--ink);
  border-radius: var(--r-kucuk); padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* Yat listesi filtre formu: üç sütun (dördüncü boş sütun kalksın) */
#yat-filtre { grid-template-columns: 1fr 1.2fr auto; }
@media (max-width: 860px) { #yat-filtre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { #yat-filtre { grid-template-columns: 1fr; } }

/* Seçili tarih çipi (hero aramasından taşınan tarih) */
.tarih-cip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gece); color: var(--beyaz);
  border-radius: 999px; padding: 8px 16px; font-size: .9rem; font-weight: 600; margin-bottom: 16px;
}
.tarih-cip a { color: var(--dalga-acik); font-weight: 700; }

/* Kenar çubuğu sosyal kanıt */
.rez-kutu__kanit { border-top: 1px solid var(--cizgi); padding-top: 14px; margin-top: 4px; }
.rez-kutu__kanit-yildiz { display: flex; align-items: center; gap: 8px; color: var(--gunes); font-size: .9rem; }
.rez-kutu__kanit-yildiz strong { color: var(--ink); }
.rez-kutu__kanit blockquote { margin-top: 8px; color: var(--ink-yumus); font-size: .88rem; line-height: 1.55; font-style: normal; }
.rez-kutu__kanit cite { font-style: normal; font-size: .8rem; color: var(--ink-yumus); }

/* Harita iframe yüklenirken nabız */
.gmaps-kart.yukleniyor iframe { opacity: .35; transition: opacity .3s ease; }

/* Kampanya öne çıkan fotoğrafına marka katmanı */
.kamp-one__foto { position: relative; }
.kamp-one__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(10, 42, 61, .05), rgba(10, 42, 61, .3)); pointer-events: none; }

/* Çerez onay çubuğu */
.cerez {
  position: fixed; inset-inline: 14px; bottom: 14px; z-index: 90; margin-inline: auto; max-width: 720px;
  background: var(--gece); color: #E8F1F6; border-radius: var(--r); box-shadow: var(--golge);
  padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
}
.cerez p { font-size: .86rem; line-height: 1.5; flex: 1 1 320px; margin: 0; }
.cerez a { color: var(--dalga-acik); text-decoration: underline; }
.cerez__butonlar { display: flex; gap: 8px; }
.cerez .btn { padding: 9px 18px; font-size: .86rem; }
.cerez__red { background: transparent; border: 1.4px solid rgba(255, 255, 255, .35); color: #E8F1F6; }
@media (max-width: 640px) { .cerez { bottom: calc(70px + env(safe-area-inset-bottom)); } }

/* Ekran okuyucu duyuruları */
.sr-canli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Görünme animasyonu ---------- */
.gorun { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.gorun--oldu { opacity: 1; transform: none; }

/* ---------- Duyarlılık ---------- */
@media (max-width: 1080px) {
  .ust__nav { display: none; }
  .ust__tel span, .ust__uye span { display: none; }
  .org-izgara { grid-template-columns: 1fr 1fr; }
  .org-kart--genis { grid-column: span 2; }
  .galeri-izgara { columns: 2; }
}
@media (max-width: 860px) {
  .arama { grid-template-columns: 1fr 1fr; }
  .arama .btn { grid-column: span 2; }
  .bogaz-bolum__ic { grid-template-columns: 1fr; }
  .ozellik-sira__ic { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .detay-yerlesim { grid-template-columns: 1fr; }
  .rez-kutu { position: static; }
  .uye-yerlesim { grid-template-columns: 1fr; }
  .alt__ic { grid-template-columns: 1fr 1fr; padding-block: 44px 30px; }
  .adimlar { grid-template-columns: 1fr; gap: 30px; }
  .detay-galeri { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .detay-galeri__ana { grid-row: auto; }
  .detay-galeri__yan { height: auto; aspect-ratio: 16 / 8; }
  /* Mobilde tek yan kare gösteriliyor. Eskiden ilki gizleniyordu; dış çekim
     seti listenin başına geçince gizlenen kare en güçlü kare oldu. Artık
     ikincisi gizleniyor, "+N" sayacı da o zaman ilk kareye taşınır. */
  /* nth-of-type/first-of-type BUTON sayar, sınıfı değil: ilk buton ana kare
     olduğu için eski `:first-of-type` kuralı hiçbir zaman eşleşmiyordu.
     Kardeş seçici sınıfa göre çalışır ve ikinci yan kareyi hedefler. */
  .detay-galeri__yan + .detay-galeri__yan { display: none; }
  .detay-galeri__daha--mobil { display: flex; }
}
@media (max-width: 640px) {
  body { padding-bottom: 62px; }
  .mobil-bar { display: grid; }
  /* Yüzen WhatsApp düğmesi mobilde GİZLİ: alt çubukta zaten WhatsApp var, yani
     aynı eylemin ikinci kopyasıydı ve hero'daki "Popüler" bağlantılarının
     üstüne binip tıklanmalarını engelliyordu. Geri istenirse bu kuralı
     display:flex yapmak yeterli. */
  .wa-yuzen { display: none; }
  .ust__rez, .ust__tel { display: none; }
  /* Hero mobilde SIKIŞTIRILIR. Sebep: gerçek telefonda Safari'nin üst/alt
     çubukları ve bizim sabit alt menümüz ~175px yiyor, kullanılabilir alan
     844 değil ~670px oluyordu. Bu yüzden arama kartının altındaki "Popüler:"
     bağlantıları katlamanın altında kalıyordu. Aşağıdaki paylar ölçülerek
     kısıldı (toplam ~75px), böylece Popüler satırı ilk ekranda görünür. */
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 34px; }
  .hero__ic { margin-top: 0; }
  .hero__alt { font-size: 1rem; margin-top: 10px; }
  .arama { grid-template-columns: 1fr; padding: 16px; }
  .arama .btn { grid-column: auto; }
  /* Sabit alt menü (62px) hero'nun ÜSTÜNE biniyor: gerçek kullanılabilir yükseklik
     ~609px. Paylar buna göre kısıldı. Hero'nun üst payına dokunulmadı, yoksa
     başlık şeffaf header'ın altına giriyor. */
  .arama--hap { border-radius: 26px; padding: 8px 20px 10px; gap: 0; margin-top: 14px; }
  .arama--hap .arama__alan { border-left: 0; border-bottom: 1.4px solid var(--cizgi); padding: 8px 2px; }
  .arama--hap .arama__alan:first-child { padding-top: 6px; }
  .arama--hap .btn { width: 100%; margin-top: 8px; padding: 15px; font-size: 1.02rem; }
  .hero__populer { margin-top: 12px; }
  .hero__noktalar { margin-top: 16px; }

  /* Viravira mobil kalıbı: kart bölümleri yatay kaydırmalı vitrine döner */
  .yat-izgara, .org-izgara {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    padding-bottom: 12px; margin-inline: -18px; padding-inline: 18px;
    scrollbar-width: none;
  }
  .yat-izgara::-webkit-scrollbar, .org-izgara::-webkit-scrollbar { display: none; }
  .yat-izgara > *, .org-izgara > * { scroll-snap-align: center; }
  .org-kart--genis { grid-column: auto; }
  .kampanya-izgara, .blog-izgara {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    padding-bottom: 12px; margin-inline: -18px; padding-inline: 18px; scrollbar-width: none;
  }
  .kampanya-izgara::-webkit-scrollbar, .blog-izgara::-webkit-scrollbar { display: none; }
  .kampanya-izgara > *, .blog-izgara > * { scroll-snap-align: center; }

  /* Mobilde görünme animasyonu kapalı: yatay şeritlerle çakışıp kartları gizliyordu */
  .gorun { opacity: 1; transform: none; transition: none; }
  .guven__ic { gap: 10px 22px; }
  .guven__kalem { font-size: .84rem; }
  .org-izgara { grid-template-columns: 1fr; }
  .org-kart--genis { grid-column: auto; aspect-ratio: 4 / 5; }
  .org-kart { aspect-ratio: 4 / 5; }
  .galeri-izgara { columns: 1; }
  .alt__ic { grid-template-columns: 1fr; }
  .alt__cizgi { flex-direction: column; align-items: flex-start; }
  .bant { padding-top: 108px; }
  .kap { padding-inline: 18px; }
  .pencere__kutu { padding: 28px 22px 22px; }
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .gorun { opacity: 1; transform: none; }
  .hero__slaytlar img { transition: none; }
}

/* ---------- Baskı ---------- */
@media print {
  .ust, .alt, .wa-yuzen, .mobil-bar, .pencere, .cta { display: none !important; }
  body { background: #fff; padding: 0; }
}

/* ─────────────────────────────────────────────────────────────
   MOBİL DOKUNMA HEDEFLERİ (11 Ağu 2026)
   390px ölçümünde 11 öğe dikeyde 25-37px kalıyordu: yatay isabet
   tutuyor ama parmak dikeyde ıskalıyordu. Görsel boyut korunur,
   yalnızca tıklanabilir alan 44px'e çıkar (WCAG 2.5.8 / Google).
   Ölçüm yöntemi: uret/mobil-olcum.html + elementFromPoint isabet testi.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Hero "Popüler:" hızlı bağlantıları (25px -> 44px isabet alanı).
     inline-block + padding 38px'te kalıyordu (satır yüksekliği dolguyu
     yutuyor), inline-flex + min-height kesin sonuç veriyor. */
  .hero__populer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
  .hero__populer { line-height: 1.2; }

  /* Arama hapındaki tarih ve açılır listeler (25-32px -> 44px) */
  .arama__alan input[type="date"],
  .arama__alan select { min-height: 44px; }
  .arama--hap .arama__alan { padding-top: 8px; padding-bottom: 8px; }

  /* Dil seçici (37px -> 44px) */
  .ust__dil { min-height: 44px; }

  /* Kampanya penceresi kapat/geç düğmeleri */
  .pencere__kapat { min-width: 44px; min-height: 44px; }
  .pencere__gec { display: inline-block; padding: 10px 8px; }
}