@charset "UTF-8";
/* ==========================================================================
   Didim Seyahat — site.css
   Mobil öncelikli. Çerçeve yok, bağımlılık yok.
   Marka renkleri logodan örneklendi: #2C3590 / #00ADEF / #F7941D
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tasarım değişkenleri
   -------------------------------------------------------------------------- */
:root {
  /* Marka */
  --lacivert:      #2C3590;
  --lacivert-koyu: #1E2569;
  --lacivert-acik: #4A55C4;
  --cam:           #00ADEF;
  --cam-koyu:      #0090C8;
  --turuncu:       #F7941D;
  --turuncu-koyu:  #D97B08;

  /* Zemin ve yüzeyler — nötrler laciverte çalıyor, gri değil */
  --zemin:      #FFFFFF;
  --zemin-alt:  #F4F6FC;
  --kart:       #FFFFFF;
  --kart-alt:   #F8F9FD;
  --derin:      #131A42;
  --derin-2:    #1C2456;

  /* Metin */
  --metin:      #131832;
  --metin-2:    #454C71;
  --metin-3:    #737A9E;
  --metin-ters: #EEF0FA;

  /* Çizgi */
  --cizgi:      #DFE3F0;
  --cizgi-soft: #EDEFF7;

  /* Anlamsal */
  --basari:  #12855E;
  --uyari:   #C77A05;
  --hata:    #C0392B;

  /* Tipografi */
  --f-govde: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --f-veri:  "Cascadia Mono", ui-monospace, Consolas, "SF Mono",
             "Liberation Mono", monospace;

  /* Akışkan tip ölçeği */
  --t-xs:  0.78rem;
  --t-sm:  0.875rem;
  --t-md:  1rem;
  --t-lg:  1.09rem;
  --t-xl:  clamp(1.2rem,  1.05rem + 0.75vw, 1.45rem);
  --t-2xl: clamp(1.45rem, 1.2rem  + 1.25vw, 2rem);
  --t-3xl: clamp(1.8rem,  1.4rem  + 2vw,   2.75rem);
  --t-4xl: clamp(2.15rem, 1.6rem  + 2.8vw, 3.4rem);

  /* Boşluk */
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px;
  --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px; --a9: 88px;

  /* Yuvarlaklık — bilinçli olarak ölçülü */
  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;

  /* Gölge */
  --g-1: 0 1px 2px rgba(19,26,66,.06), 0 1px 3px rgba(19,26,66,.05);
  --g-2: 0 3px 8px rgba(19,26,66,.07), 0 1px 3px rgba(19,26,66,.05);
  --g-3: 0 12px 32px rgba(19,26,66,.13), 0 3px 8px rgba(19,26,66,.07);

  --kapsayici: 1200px;
  --dar:       780px;

  --gecis: 180ms cubic-bezier(.4,0,.2,1);
}

/* Varsayılan tema BEYAZ. Koyu tema yalnızca kullanıcı üstteki anahtarla
   seçerse devreye girer — işletim sisteminin koyu moduna göre kendiliğinden
   değişmez. (Sitenin gündüz görünümü marka görünümüdür.) */
:root { color-scheme: light; }

:root[data-tema="koyu"] {
  color-scheme: dark;

  --lacivert:      #8E99EE;
  --lacivert-koyu: #6D79DC;
  --lacivert-acik: #A8B1F5;
  --cam:           #3FC6F7;
  --cam-koyu:      #6FD5FA;
  --turuncu:       #FFB155;
  --turuncu-koyu:  #FFC078;

  --zemin:      #0C1024;
  --zemin-alt:  #121732;
  --kart:       #171D3A;
  --kart-alt:   #1E2549;
  --derin:      #070A1A;
  --derin-2:    #131A3A;

  --metin:      #EEF0F9;
  --metin-2:    #BAC0D8;
  --metin-3:    #8B92B4;

  --cizgi:      #2B3358;
  --cizgi-soft: #1F2648;

  --basari: #3ECB98;
  --uyari:  #FFBE45;
  --hata:   #F5806F;

  --g-1: 0 1px 2px rgba(0,0,0,.4);
  --g-2: 0 3px 8px rgba(0,0,0,.46);
  --g-3: 0 12px 32px rgba(0,0,0,.56);
}

/* Koyu temada hero fotoğrafını hafif kısarak metin okunurluğunu koru */
:root[data-tema="koyu"] .hero img { filter: brightness(.86) saturate(.95); }

/* Logo: gündüz temada normal (lacivert yazılı), koyu temada beyaz sürüm.
   Koyu zeminde lacivert yazı okunmuyordu. */
.logo-gece   { display: none; }
:root[data-tema="koyu"] .logo-gunduz { display: none; }
:root[data-tema="koyu"] .logo-gece   { display: block; }
:root[data-tema="koyu"] .arama-karti { background: var(--kart); }

/* --------------------------------------------------------------------------
   2. Sıfırlama
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--f-govde);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.028em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); letter-spacing: -0.012em; }

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--lacivert); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--lacivert-acik); }

:focus-visible {
  outline: 3px solid var(--cam);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Düzen yardımcıları
   -------------------------------------------------------------------------- */
.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin-inline: auto;
  padding-inline: var(--a4);
}
@media (min-width: 640px)  { .kapsayici { padding-inline: var(--a5); } }
@media (min-width: 1024px) { .kapsayici { padding-inline: var(--a6); } }

.dar { max-width: var(--dar); }

.bolum { padding-block: var(--a7); }
@media (min-width: 768px)  { .bolum { padding-block: var(--a8); } }
@media (min-width: 1200px) { .bolum { padding-block: var(--a9); } }

.bolum-alt { background: var(--zemin-alt); }

.yigin      { display: flex; flex-direction: column; gap: var(--a5); }
.yigin-sm   { display: flex; flex-direction: column; gap: var(--a3); }
.yigin-lg   { display: flex; flex-direction: column; gap: var(--a6); }

.bolum-basi { display: flex; flex-direction: column; gap: var(--a3); margin-bottom: var(--a6); }
.bolum-basi p { color: var(--metin-2); max-width: 62ch; font-size: var(--t-lg); }

.ust-etiket {
  font-family: var(--f-veri);
  font-size: var(--t-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cam-koyu);
  font-weight: 600;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla-baglantisi {
  position: absolute; top: -60px; left: var(--a4); z-index: 200;
  background: var(--lacivert); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r) var(--r); font-weight: 600; text-decoration: none;
  transition: top var(--gecis);
}
.atla-baglantisi:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   4. Düğmeler — mobilde dokunma hedefi en az 48px
   -------------------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis),
              transform var(--gecis), box-shadow var(--gecis);
}
.dugme:active { transform: translateY(1px); }

.dugme-ana {
  background: var(--lacivert);
  color: #fff;
  box-shadow: var(--g-1);
}
.dugme-ana:hover { background: var(--lacivert-koyu); color: #fff; box-shadow: var(--g-2); }

.dugme-vurgu {
  background: var(--turuncu);
  color: #241300;
  box-shadow: var(--g-1);
}
.dugme-vurgu:hover { background: var(--turuncu-koyu); color: #241300; box-shadow: var(--g-2); }

.dugme-cizgi {
  background: transparent;
  color: var(--lacivert);
  border-color: var(--cizgi);
}
.dugme-cizgi:hover { background: var(--kart-alt); border-color: var(--lacivert); color: var(--lacivert); }

.dugme-hayalet {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
}
.dugme-hayalet:hover { background: rgba(255,255,255,.2); color: #fff; }

/* --------------------------------------------------------------------------
   5. Üst şerit + başlık
   -------------------------------------------------------------------------- */
/* Üst şerit marka laciverti — camgöbeği yalnızca ikon/vurgu rengi olarak kalıyor */
.ust-serit {
  background: var(--derin);
  color: #C9D0EC;
  font-size: var(--t-sm);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ust-serit svg { color: var(--cam); }
.ust-serit .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4);
  min-height: 48px;
  flex-wrap: wrap;
}
.ust-serit-slogan { display: none; }
@media (min-width: 900px) { .ust-serit-slogan { display: block; } }

.ust-serit-linkler { display: flex; align-items: center; gap: var(--a2); margin-left: auto; }
/* Dokunma hedefi en az 44px yükseklik */
.ust-serit a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 7px;
  color: #F2FBFF;
  text-decoration: none;
  font-weight: 500;
}
.ust-serit a:hover { color: #fff; text-decoration: underline; }
.ust-serit .ayrac { color: rgba(255,255,255,.4); }
.ust-serit-tel {
  display: inline-flex; align-items: center; gap: 7px;
  font-variant-numeric: tabular-nums;
  color: #fff !important; font-weight: 600;
  margin-right: auto;
}

/* Telefonda dar üst şeridi tek, kullanılabilir çağrı bağlantısına indir. */
@media (max-width: 560px) {
  .ust-serit .kapsayici {
    min-height: 44px;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .ust-serit-tel { margin-inline: auto; white-space: nowrap; }
  .ust-serit-linkler { display: none; }
}

/* Başlık */
.baslik-cubugu {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis);
}
.baslik-cubugu.kaydirildi { box-shadow: var(--g-2); }

.baslik-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4);
  min-height: 68px;
}
@media (min-width: 1024px) { .baslik-ic { min-height: 78px; } }

.logo { display: flex; align-items: center; flex: none; min-height: 48px; }
.logo img { width: 168px; height: auto; }
@media (min-width: 1024px) { .logo img { width: 196px; } }

/* --------------------------------------------------------------------------
   6. Gezinme — masaüstü
   -------------------------------------------------------------------------- */
.ana-menu { display: none; }

@media (min-width: 1024px) {
  .ana-menu { display: flex; align-items: center; gap: var(--a1); }
  .ana-menu > li { position: relative; list-style: none; }

  .ana-menu > li > a,
  .ana-menu > li > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    background: none;
    border-radius: var(--r-sm);
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -0.008em;
    color: var(--metin);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--gecis), background var(--gecis);
  }
  .ana-menu > li > a:hover,
  .ana-menu > li > button:hover { color: var(--lacivert); background: var(--kart-alt); }
  .ana-menu > li > a.etkin { color: var(--lacivert); }
  .ana-menu > li > a.etkin::after {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
    height: 2px; background: var(--cam); border-radius: 2px;
  }

  .ok { width: 9px; height: 9px; flex: none; transition: transform var(--gecis); }
  [aria-expanded="true"] .ok { transform: rotate(180deg); }

  .alt-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 252px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--r);
    box-shadow: var(--g-3);
    padding: var(--a2);
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
  }
  .ana-menu > li:hover > .alt-menu,
  .ana-menu > li:focus-within > .alt-menu,
  .alt-menu.acik { opacity: 1; visibility: visible; transform: translateY(0); }

  .alt-menu li { list-style: none; }
  .alt-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    color: var(--metin-2);
    text-decoration: none;
    transition: background var(--gecis), color var(--gecis);
  }
  .alt-menu a:hover { background: var(--kart-alt); color: var(--lacivert); }
}

.baslik-eylem { display: flex; align-items: center; gap: var(--a2); }

/* Dil değiştirici — TR / EN */
.dil-secici {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--kart);
  flex: none;
}
.dil-secici a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 44px;
  padding: 0 10px;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--metin-3);
  text-decoration: none;
  transition: background var(--gecis), color var(--gecis);
}
.dil-secici a + a { border-left: 1px solid var(--cizgi); }
.dil-secici a:hover { background: var(--kart-alt); color: var(--metin); }
.dil-secici a.etkin {
  background: var(--lacivert);
  color: #fff;
}
/* Dar ekranda başlık çubuğu logo + dil + tema + hamburger'i taşıyamıyordu
   (360px'de 41px taşma). Dil değiştirici 560px altında çekmeceye taşınıyor. */
@media (max-width: 560px) {
  .baslik-ic > .baslik-eylem > .dil-secici { display: none; }
  .logo img { width: 142px; }
  .baslik-eylem { gap: var(--a1); }
}
@media (max-width: 400px) {
  .logo img { width: 128px; }
  .tema-dugmesi { width: 42px; height: 42px; }
  .menu-dugmesi { width: 42px; height: 42px; }
}

/* Çekmece içindeki dil değiştirici — dar ekranda buradan seçilir */
.cekmece-dil {
  display: flex;
  gap: var(--a2);
  margin-top: var(--a4);
  padding-top: var(--a4);
  border-top: 1px solid var(--cizgi);
}
.cekmece-dil a {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  font-weight: 700;
  color: var(--metin-2);
  text-decoration: none;
}
.cekmece-dil a.etkin { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
@media (min-width: 561px) { .cekmece-dil { display: none; } }

/* Tema anahtarı — gündüz / gece */
.tema-dugmesi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--kart);
  color: var(--metin-2);
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.tema-dugmesi:hover { background: var(--kart-alt); color: var(--lacivert); border-color: var(--lacivert); }
.tema-dugmesi svg { width: 20px; height: 20px; }
.tema-dugmesi .ay  { display: block; }
.tema-dugmesi .gunes { display: none; }
:root[data-tema="koyu"] .tema-dugmesi .ay    { display: none; }
:root[data-tema="koyu"] .tema-dugmesi .gunes { display: block; }
.baslik-eylem .dugme { min-height: 44px; padding: 10px 18px; font-size: var(--t-sm); }
/* Üye Girişi / Yeni Üyelik düğmeleri.
   1024–1279 arasında masaüstü menüsü açılıyor ama başlık çubuğu
   logo + menü + dil + tema + iki düğmeyi taşıyamıyordu (1085px gerekiyor,
   961px yer var). Düğmeler 1280px'den itibaren gösteriliyor; altında
   üyelik bağlantıları zaten "Online İşlemler" menüsünde ve çekmecede var. */
.gizli-mobil { display: none; }
@media (min-width: 768px)  and (max-width: 1023px) { .gizli-mobil { display: inline-flex; } }
@media (min-width: 1280px) { .gizli-mobil { display: inline-flex; } }

/* 1024–1279 arasında menü öğelerini biraz sıkıştır */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ana-menu > li > a,
  .ana-menu > li > button { padding: 10px 10px; font-size: var(--t-sm); }
  .logo img { width: 172px; }
}

/* --------------------------------------------------------------------------
   7. Gezinme — mobil çekmece
   -------------------------------------------------------------------------- */
.menu-dugmesi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--kart);
  cursor: pointer;
  flex: none;
}
@media (min-width: 1024px) { .menu-dugmesi { display: none; } }

.menu-dugmesi span {
  position: relative;
  display: block;
  width: 19px; height: 2px;
  background: var(--metin);
  border-radius: 2px;
  transition: background var(--gecis);
}
.menu-dugmesi span::before,
.menu-dugmesi span::after {
  content: ""; position: absolute; left: 0;
  width: 19px; height: 2px; background: var(--metin); border-radius: 2px;
  transition: transform var(--gecis), top var(--gecis);
}
.menu-dugmesi span::before { top: -6px; }
.menu-dugmesi span::after  { top:  6px; }
.menu-dugmesi[aria-expanded="true"] span { background: transparent; }
.menu-dugmesi[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.cekmece-perde {
  position: fixed; inset: 0;
  background: rgba(11,15,38,.55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
  z-index: 95;
}
.cekmece-perde.acik { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .cekmece-perde { display: none; } }

.cekmece {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--zemin);
  z-index: 96;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--g-3);
}
.cekmece.acik { transform: translateX(0); }
@media (min-width: 1024px) { .cekmece { display: none; } }

.cekmece-basi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a4); padding: var(--a4);
  border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; background: var(--zemin); z-index: 2;
}
.cekmece-basi img { width: 148px; }
.cekmece-kapat {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--kart); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--metin-2);
}
.cekmece-govde { padding: var(--a3) var(--a4) var(--a6); }

.cekmece-menu { list-style: none; }
.cekmece-menu > li { border-bottom: 1px solid var(--cizgi-soft); }
.cekmece-menu > li > a,
.cekmece-menu > li > button {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a3);
  width: 100%;
  min-height: 54px;
  padding: 12px 2px;
  border: 0; background: none;
  font-size: var(--t-md); font-weight: 600;
  color: var(--metin);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cekmece-menu > li > a.etkin { color: var(--lacivert); }
.cekmece-menu .ok { width: 11px; height: 11px; flex: none; transition: transform var(--gecis); }
.cekmece-menu [aria-expanded="true"] .ok { transform: rotate(180deg); }

.cekmece-alt {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(.4,0,.2,1);
}
.cekmece-alt.acik { max-height: 56rem; }
.cekmece-alt a {
  display: block;
  min-height: 46px;
  padding: 11px 2px 11px var(--a4);
  border-left: 2px solid var(--cizgi);
  margin-left: 2px;
  font-size: var(--t-sm);
  color: var(--metin-2);
  text-decoration: none;
}
.cekmece-alt a:hover { color: var(--lacivert); border-left-color: var(--cam); }

.cekmece-eylem { display: flex; flex-direction: column; gap: var(--a2); margin-top: var(--a5); }
.cekmece-iletisim {
  margin-top: var(--a5); padding-top: var(--a3);
  border-top: 1px solid var(--cizgi);
  display: flex; flex-direction: column;
  font-size: var(--t-sm); color: var(--metin-2);
}
.cekmece-iletisim a {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 48px; padding-block: 6px;
  color: var(--metin-2); text-decoration: none;
}
.cekmece-iletisim strong { color: var(--metin); font-family: var(--f-veri); }

body.kilitli { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Hero + bilet arama kutusu (iframe BiletAll'a ait, dokunulmadı)
   -------------------------------------------------------------------------- */
/* ---- Hero: tam genişlik, tek fotoğraf -------------------------------------
   Slogan görselin İÇİNDE yazılı olduğu için tek pikselin kırpılması bile
   yazıyı kesiyor.

   Bu yüzden hero'ya SABİT YÜKSEKLİK VERİLMİYOR. Ne aspect-ratio, ne height,
   ne max-height, ne object-fit var. Görselin yüksekliği kendi oranından
   geliyor (width:100% + height:auto). Sabit yükseklikli bir kap olmadığı için
   kırpma teknik olarak mümkün değil — tarayıcının kırpacağı bir alan yok.

   Yükseklik ekran genişliğine göre kendiliğinden değişir:
     ≤ 500px    : hero-mobil     1080x1350
     501–768px  : hero-tablet    1448x1086
     769–1300px : hero-masaustu  1774x887
     ≥ 1301px   : hero-genis     1915x821
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--zemin);
}

/* Banner ekranın tamamını kaplar — yanlarda boşluk kalmaz.
   Yüksekliğini kendi oranı belirlediği için genişletmek kırpmaya yol açmaz;
   görsel sadece büyür, hiçbir yeri kesilmez. */
.hero picture {
  display: block;
  width: 100%;
  overflow: hidden;
  background: #BFE3F7;            /* görsel yüklenene kadar gökyüzü tonu */
}
.hero img {
  display: block;
  width: 100%;
  height: auto;                   /* oranı görselin kendisi belirler */
}

/* ---- Arama şeridi: beyaz bant, kart hero'nun altına biner ----
   BiletAll iframe'i moduleType=2 ile yatay geliyor (form 111px).
   Takvim açılınca 339px'e indiği için çerçeve 360px; formun altında kalan
   şeffaf alan bandın beyazıyla aynı, bu yüzden görünmez. */
.arama-serit {
  position: relative;
  z-index: 4;
  background: var(--zemin);
}

/* Arama kartı banner'ın ÜSTÜNE BİNMİYOR.
   Önceden margin-top negatifti (-48px / -62px) ve kart görselin alt şeridini
   örtüyordu: otobüsün tekerlekleri ve zemindeki taşlar kartın altında kalıyor,
   görsel kırpılmış gibi görünüyordu. Kırpılan bir şey yoktu — üstü örtülüyordu.
   Artık kart görselin altında, kendi boşluğuyla duruyor. */
.arama-karti {
  position: relative;
  margin-top: var(--a4);
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  box-shadow: var(--g-3);
  padding: var(--a5) var(--a4);
}
@media (min-width: 700px) {
  .arama-karti { margin-top: var(--a5); padding: var(--a5); }
}

/* ---- Kendi sefer arama formumuz ----
   display:grid burada !important ile korunuyor: form üzerine eklenen
   değiştirici sınıflar başka bir bileşenin display kuralına takılırsa
   düzen sessizce bozuluyor. */
.ara-formu {
  display: grid !important;
  gap: var(--a3);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  width: 100%;
}
@media (min-width: 900px) {
  .ara-formu {
    /* Nereden · değiştir · Nereye · Tarih · Ara — tam genişlik */
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) minmax(0,0.85fr) auto;
    gap: var(--a4);
  }
}

.ara-alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ara-alan label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.ara-alan label svg { width: 14px; height: 14px; color: var(--cam-koyu); flex: none; }

.ara-alan select,
.ara-alan input[type="date"] {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--kart);
  color: var(--metin);
  font-size: var(--t-md);
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.ara-alan select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23737A9E' stroke-width='2'%3E%3Cpath d='M2 4.5 6 8.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.ara-alan input[type="date"] { appearance: auto; -webkit-appearance: auto; }
.ara-alan select:focus,
.ara-alan input[type="date"]:focus {
  outline: none;
  border-color: var(--lacivert);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lacivert) 18%, transparent);
}

.ara-degistir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin: 0 auto;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  background: var(--kart);
  color: var(--lacivert);
  cursor: pointer;
  transition: background var(--gecis), transform var(--gecis), border-color var(--gecis);
}
.ara-degistir:hover { background: var(--kart-alt); border-color: var(--lacivert); }
.ara-degistir:active { transform: rotate(180deg); }
.ara-degistir svg { width: 19px; height: 19px; }
@media (min-width: 860px) { .ara-degistir { margin-bottom: 4px; } }

.ara-gonder { min-height: 54px; white-space: nowrap; }
.ara-gonder svg { width: 18px; height: 18px; }

.ara-hata {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--hata);
}

.ara-kisayol {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2);
  margin-top: var(--a1);
  font-size: var(--t-sm);
  color: var(--metin-3);
}
.ara-kisayol button {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid var(--cizgi);
  border-radius: 100px;
  background: var(--kart);
  color: var(--metin-2);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.ara-kisayol button:hover,
.ara-kisayol button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--cam) 12%, transparent);
  border-color: var(--cam);
  color: var(--lacivert);
}

/* Bilet-al sayfasındaki arama şeridi */
.ara-serit-sayfa {
  background: var(--zemin-alt);
  border-bottom: 1px solid var(--cizgi);
  padding-block: var(--a5);
}

/* Gömülü BiletAll sefer listesi */
.gomulu-bilet {
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--kart);
}
.gomulu-bilet iframe {
  width: 100%;
  min-width: 100%;
  height: 85vh;
  height: 85svh;
  min-height: 720px;
  max-height: 1100px;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .gomulu-bilet iframe { height: 82vh; height: 82svh; min-height: 620px; }
}

.gomulu-not {
  margin-top: var(--a4);
  font-size: var(--t-sm);
  color: var(--metin-3);
}

/* Henüz arama yapılmamış hali — hata değil, davet */
.bos-durum {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--a8) var(--a5);
  background: var(--kart-alt);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
}
.bos-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: var(--a4);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cam) 14%, transparent);
  color: var(--cam-koyu);
}
.bos-ikon svg { width: 34px; height: 34px; }
.bos-durum h2 { font-size: var(--t-2xl); }
.bos-durum p {
  margin-top: var(--a3);
  max-width: 46ch;
  color: var(--metin-2);
}
.bos-kisayol {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: var(--a2);
  margin-top: var(--a6);
  font-size: var(--t-sm); color: var(--metin-3);
}
.bos-kisayol a {
  display: inline-flex; align-items: center;
  min-height: 42px; padding: 8px 16px;
  border: 1px solid var(--cizgi);
  border-radius: 100px;
  background: var(--kart);
  color: var(--lacivert);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--gecis), background var(--gecis);
}
.bos-kisayol a:hover {
  border-color: var(--lacivert);
  background: color-mix(in srgb, var(--lacivert) 8%, var(--kart));
}

/* Online işlem sayfalarının altındaki güven şeridi */
.online-yardim {
  display: grid; gap: var(--a3);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--a5);
}
@media (min-width: 700px) { .online-yardim { grid-template-columns: 1fr 1fr; gap: var(--a4); } }
.online-yardim > div {
  display: flex; align-items: flex-start; gap: var(--a3);
  padding: var(--a4);
  background: var(--kart-alt);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
}
.online-yardim svg { width: 24px; height: 24px; flex: none; color: var(--cam-koyu); margin-top: 2px; }
.online-yardim b { display: block; font-size: var(--t-sm); }
.online-yardim span { display: block; font-size: var(--t-sm); color: var(--metin-2); margin-top: 3px; line-height: 1.55; }

/* Dış kaynak kartları (yol durumu) */
.kaynak-izgara { display: grid; gap: var(--a4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .kaynak-izgara { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .kaynak-izgara { grid-template-columns: repeat(3,1fr); } }

.kaynak-kart {
  display: flex; flex-direction: column; gap: var(--a2);
  padding: var(--a5);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--metin);
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.kaynak-kart:hover {
  border-color: var(--lacivert); transform: translateY(-2px);
  box-shadow: var(--g-2); color: var(--metin);
}
.kaynak-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: var(--a1);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--cam) 13%, transparent);
  color: var(--cam-koyu);
}
.kaynak-ikon svg { width: 23px; height: 23px; }
.kaynak-kart b { font-size: var(--t-lg); letter-spacing: -0.015em; }
.kaynak-kart > span:not(.kaynak-ikon):not(.kaynak-git) {
  font-size: var(--t-sm); color: var(--metin-2); line-height: 1.6;
}
.kaynak-git {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: var(--a3);
  font-size: var(--t-sm); font-weight: 600; color: var(--lacivert);
}
.kaynak-git svg { width: 15px; height: 15px; }

.kaynak-ozet {
  padding: var(--a5);
  background: var(--kart-alt);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
}
.kaynak-ozet h3 { font-size: var(--t-md); margin-bottom: var(--a3); }
.kaynak-ozet ul { list-style: none; display: flex; flex-direction: column; gap: var(--a2); }
.kaynak-ozet li {
  display: flex; align-items: center; gap: var(--a2);
  font-weight: 600; font-size: var(--t-sm);
  padding-bottom: var(--a2);
  border-bottom: 1px solid var(--cizgi-soft);
}
.kaynak-ozet li span { color: var(--cam-koyu); }
.kaynak-ozet li:last-of-type { border-bottom: 0; }
.kaynak-ozet p { margin-top: var(--a3); font-size: var(--t-sm); color: var(--metin-3); }

/* --------------------------------------------------------------------------
   9. Hızlı işlemler
   -------------------------------------------------------------------------- */
.hizli-izgara {
  display: grid;
  gap: var(--a3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .hizli-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a4); } }
@media (min-width: 1024px) { .hizli-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.hizli {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--a2);
  padding: var(--a4) var(--a3);
  min-height: 104px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--metin);
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.hizli:hover {
  border-color: var(--lacivert);
  transform: translateY(-2px);
  box-shadow: var(--g-2);
  color: var(--metin);
}
.hizli svg { width: 26px; height: 26px; color: var(--lacivert); flex: none; }
.hizli b { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }

/* Ana sayfa işlem merkezi */
.islem-bolumu {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--cam) 12%, transparent), transparent 22rem),
    var(--zemin-alt);
}
.islem-basi,
.konfor-basi {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--a6);
  margin-bottom: var(--a6);
}
.islem-basi h2,
.konfor-basi h2 {
  margin-top: 5px;
  max-width: 700px;
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.65rem);
  letter-spacing: -.035em;
}
.islem-basi > p,
.konfor-basi > p {
  max-width: 500px;
  color: var(--metin-2);
  font-size: var(--t-sm);
  line-height: 1.7;
}
.islem-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-veri);
  color: var(--cam-koyu);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.islem-kicker::before { content: ""; width: 28px; height: 2px; background: var(--turuncu); }
.islem-izgara {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--a3);
}
.islem-karti {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 168px;
  padding: var(--a4);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--kart);
  color: var(--metin);
  text-decoration: none;
  box-shadow: var(--g-1);
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.islem-karti::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--cam), var(--turuncu));
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
.islem-karti:hover {
  color: var(--metin);
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--cam) 42%, var(--cizgi));
  box-shadow: var(--g-3);
}
.islem-karti:hover::before { transform: scaleX(1); }
.islem-ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--cam-koyu);
  background: color-mix(in srgb, var(--cam) 13%, var(--kart));
}
.islem-ikon svg { width: 23px; height: 23px; }
.islem-metin { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: var(--a4); }
.islem-metin b { font-size: var(--t-md); line-height: 1.25; }
.islem-metin small { color: var(--metin-3); font-size: .72rem; line-height: 1.35; }
.islem-ok {
  position: absolute;
  right: var(--a4);
  top: var(--a4);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 10%, transparent);
  font-size: 1.15rem;
  transition: transform var(--gecis), background var(--gecis);
}
.islem-karti:hover .islem-ok { transform: translateX(3px); background: color-mix(in srgb, var(--turuncu) 18%, transparent); }
@media (min-width: 700px) { .islem-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a4); } }
@media (min-width: 1080px) { .islem-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .islem-basi,
  .konfor-basi { align-items: flex-start; flex-direction: column; gap: var(--a3); }
}
@media (max-width: 480px) {
  .islem-izgara { grid-template-columns: minmax(0, 1fr); }
  .islem-karti { min-height: 112px; display: grid; grid-template-columns: 46px minmax(0,1fr) 30px; align-items: center; gap: var(--a3); }
  .islem-metin { margin: 0; padding: 0; }
  .islem-ok { position: static; }
}

/* Otobüs içi deneyim vitrini */
.konfor-bolumu { background: var(--zemin); }
.konfor-vitrin { display: grid; gap: var(--a4); }
.konfor-ana {
  position: relative;
  min-height: 410px;
  padding: clamp(26px, 4vw, 48px);
  overflow: hidden;
  border-radius: calc(var(--r-lg) + 8px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(13,174,220,.32), transparent 18rem),
    linear-gradient(145deg, #10153C, #142D56 72%, #0B6B91);
  box-shadow: 0 26px 70px rgba(9,14,42,.2);
  isolation: isolate;
}
.konfor-ana::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.konfor-etiket {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #D4DBF5;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.konfor-sayi {
  margin-top: var(--a5);
  color: var(--turuncu);
  font-family: var(--f-veri);
  font-size: clamp(3rem, 2.2rem + 3vw, 5.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
}
.konfor-ana h3 { margin-top: 8px; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); }
.konfor-ana > p { position: relative; z-index: 1; max-width: 440px; margin-top: var(--a3); color: #CCD5F1; line-height: 1.65; }
.konfor-mini-bilgiler { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a5); }
.konfor-mini-bilgiler span { display: flex; flex-direction: column; min-width: 92px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); background: rgba(255,255,255,.07); color: #BFC9EA; font-size: .68rem; }
.konfor-mini-bilgiler b { color: #fff; font-family: var(--f-veri); font-size: var(--t-sm); }
.konfor-koltuk { position: absolute; right: -18px; bottom: -20px; width: clamp(180px, 26vw, 300px); color: rgba(255,255,255,.13); transform: rotate(-4deg); }
.konfor-ozellikler { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--a3); }
.konfor-ozellik {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--a3);
  min-height: 130px;
  padding: var(--a4);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--kart);
  color: var(--metin);
  box-shadow: var(--g-1);
}
.konfor-ikon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; color: var(--cam-koyu); background: color-mix(in srgb, var(--cam) 13%, var(--kart)); }
.konfor-ikon svg { width: 21px; height: 21px; }
.konfor-ozellik > span:nth-child(2) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.konfor-ozellik b { font-size: var(--t-sm); line-height: 1.25; }
.konfor-ozellik small { color: var(--metin-3); font-size: .72rem; line-height: 1.45; }
.konfor-servis { grid-column: 1 / -1; align-items: center; min-height: 96px; padding-right: 58px; text-decoration: none; transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis); }
.konfor-servis .islem-ok { top: 50%; transform: translateY(-50%); }
.konfor-servis:hover { color: var(--metin); transform: translateY(-3px); border-color: color-mix(in srgb, var(--cam) 42%, var(--cizgi)); box-shadow: var(--g-2); }
.konfor-servis:hover .islem-ok { transform: translate(3px,-50%); }
@media (min-width: 950px) {
  .konfor-vitrin { grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); gap: var(--a5); }
  .konfor-ana { min-height: 430px; }
}
@media (max-width: 560px) {
  .konfor-ozellikler { grid-template-columns: minmax(0,1fr); }
  .konfor-servis { grid-column: auto; }
  .konfor-ana { min-height: 450px; }
  .konfor-mini-bilgiler span { min-width: 82px; }
}

/* --------------------------------------------------------------------------
   10. Popüler güzergâhlar
   -------------------------------------------------------------------------- */
.guzergah-izgara {
  display: grid;
  gap: var(--a3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .guzergah-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); } }
@media (min-width: 1024px) { .guzergah-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a4); } }

/* Kart oranı kaynak görsele göre seçildi: elimizdeki şehir görselleri 640x175
   band formatında. Dikey karta kırpmak 5x büyütme demek ve bulanıklaşıyor.
   Daha uzun/editoryal kart için gerçek dikey şehir fotoğrafları gerekli. */
.guzergah {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--derin-2);
  isolation: isolate;
  box-shadow: var(--g-1);
  transition: transform 320ms cubic-bezier(.4,0,.2,1), box-shadow 320ms;
}
@media (min-width: 600px) { .guzergah { aspect-ratio: 3 / 2; } }
.guzergah:hover { transform: translateY(-4px); box-shadow: var(--g-3); color: #fff; }

.guzergah img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms cubic-bezier(.22,.8,.3,1);
}
.guzergah:hover img { transform: scale(1.07); }

/* Alttan yukarı okunabilirlik perdesi — marka laciverti tonunda */
.guzergah::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      rgba(11,14,36,.94) 0%,
      rgba(11,14,36,.72) 26%,
      rgba(11,14,36,.20) 58%,
      rgba(11,14,36,.04) 100%);
  transition: opacity var(--gecis);
}

.guzergah-ic {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  padding: var(--a4) var(--a4) var(--a4);
  gap: 2px;
}
@media (min-width: 1024px) { .guzergah-ic { padding: var(--a5) var(--a4); } }

.guzergah-ust {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cam);
}
.guzergah-sehir {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
}
.guzergah-not {
  font-size: var(--t-xs);
  color: #B9C1E4;
  margin-top: 4px;
  line-height: 1.45;
}

/* Eylem satırı: masaüstünde hover'da açılır, dokunmatikte hep görünür */
.guzergah-eylem {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--a3);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--turuncu);
}
.guzergah-eylem svg { width: 16px; height: 16px; transition: transform var(--gecis); }
.guzergah:hover .guzergah-eylem svg { transform: translateX(4px); }

@media (hover: hover) and (min-width: 768px) {
  .guzergah-eylem {
    max-height: 0; margin-top: 0; opacity: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(.4,0,.2,1),
                opacity 260ms, margin-top 300ms;
  }
  .guzergah:hover .guzergah-eylem,
  .guzergah:focus-visible .guzergah-eylem {
    max-height: 2.5rem; margin-top: var(--a3); opacity: 1;
  }
}

.guzergah-tum {
  margin-top: var(--a5);
  font-size: var(--t-sm);
  color: var(--metin-3);
}

/* Yeni destinasyon vitrini — büyük odak kartı + kompakt rota kartları */
.rota-vitrin {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 12%, rgba(13,174,220,.22), transparent 32rem),
    radial-gradient(circle at 8% 88%, rgba(255,145,23,.14), transparent 28rem),
    var(--derin);
}
.rota-vitrin::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.rota-vitrin > .kapsayici { position: relative; z-index: 1; }
.rota-vitrin-basi {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--a5);
  margin-bottom: var(--a6);
}
.rota-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--a2);
  font-family: var(--f-veri);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--turuncu);
}
.rota-kicker::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.rota-vitrin-basi h1 {
  max-width: 900px;
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 2.7vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.045em;
}
.rota-vitrin-basi p { max-width: 62ch; margin-top: var(--a3); color: #BFC9EA; }
.rota-tumu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 48px;
  padding: 0 var(--a4);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.rota-tumu:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.rota-tumu svg { width: 18px; height: 18px; }

.rota-duzen { display: grid; gap: var(--a4); }
.rota-odak {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: calc(var(--r-lg) + 6px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 24px 70px rgba(5,8,28,.32);
  isolation: isolate;
}
.rota-odak::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7,11,35,.94) 0%, rgba(7,11,35,.68) 44%, rgba(7,11,35,.08) 78%),
              linear-gradient(to top, rgba(7,11,35,.62), transparent 50%);
}
.rota-odak > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.rota-odak:hover { color: #fff; }
.rota-odak:hover > img { transform: scale(1.055); }
.rota-odak-icerik {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, 4vw, 52px);
}
.rota-rozet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: auto;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(9,14,42,.48);
  backdrop-filter: blur(10px);
  font-size: var(--t-xs);
  font-weight: 700;
}
.rota-rozet svg { width: 15px; height: 15px; color: var(--cam); }
.rota-etiket { font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cam); }
.rota-odak strong { margin-top: 3px; font-size: clamp(2.8rem, 2rem + 3vw, 5rem); line-height: .98; letter-spacing: -.055em; color: #fff; }
.rota-aciklama { margin-top: var(--a3); color: #D9DFF4; }
.rota-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--a5); font-size: var(--t-sm); font-weight: 800; color: var(--turuncu); }
.rota-cta svg { width: 18px; height: 18px; transition: transform var(--gecis); }
.rota-odak:hover .rota-cta svg { transform: translateX(5px); }

.rota-yan { display: grid; gap: var(--a3); }
.rota-mini {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr) 40px;
  align-items: center;
  gap: var(--a4);
  min-height: 112px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.065);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.rota-mini:hover { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); transform: translateX(4px); }
.rota-mini-gorsel { height: 92px; overflow: hidden; border-radius: calc(var(--r) - 2px); background: var(--derin-2); }
.rota-mini-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms cubic-bezier(.2,.8,.2,1); }
.rota-mini:hover .rota-mini-gorsel img { transform: scale(1.08); }
.rota-mini-icerik { display: flex; flex-direction: column; min-width: 0; }
.rota-mini-icerik small { font-family: var(--f-veri); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cam); }
.rota-mini-icerik strong { margin-top: 2px; font-size: var(--t-xl); color: #fff; }
.rota-mini-icerik > span { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-xs); color: #BFC9EA; }
.rota-mini-ok { width: 22px; height: 22px; color: var(--turuncu); transition: transform var(--gecis); }
.rota-mini:hover .rota-mini-ok { transform: translateX(4px); }
.rota-mini-simge {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #087FB4, #11B6D8 58%, #FF9117 59%, #FFB246);
}
.rota-mini-simge svg { width: 48px; height: 48px; }

@media (min-width: 900px) {
  .rota-duzen { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); }
  .rota-yan { grid-template-rows: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .rota-vitrin-basi { align-items: flex-start; flex-direction: column; }
  .rota-tumu { width: 100%; justify-content: center; }
  .rota-odak { min-height: 350px; }
  .rota-odak::after { background: linear-gradient(to top, rgba(7,11,35,.96) 0%, rgba(7,11,35,.5) 62%, rgba(7,11,35,.08) 100%); }
}
@media (max-width: 430px) {
  .rota-mini { grid-template-columns: 82px minmax(0,1fr) 24px; gap: var(--a3); padding: 8px 10px 8px 8px; }
  .rota-mini-gorsel { height: 78px; }
  .rota-mini-icerik strong { font-size: var(--t-lg); }
  .rota-mini-icerik > span { font-size: .72rem; }
  .rota-odak { min-height: 330px; }
}

/* --------------------------------------------------------------------------
   11. Adım şeridi
   -------------------------------------------------------------------------- */
.adimlar {
  display: grid;
  gap: var(--a4);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: adim;
}
@media (min-width: 640px)  { .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .adimlar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a5); } }

.adim {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  padding: var(--a5) var(--a4);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  position: relative;
}
.adim::before {
  counter-increment: adim;
  content: counter(adim);
  font-family: var(--f-veri);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--cam-koyu);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--cam);
  border-radius: 50%;
  margin-bottom: var(--a1);
}
.adim b { font-size: var(--t-md); font-weight: 600; }
.adim span { font-size: var(--t-sm); color: var(--metin-2); line-height: 1.55; }

/* --------------------------------------------------------------------------
   12. Kartlar / hizmetler
   -------------------------------------------------------------------------- */
.kart-izgara {
  display: grid;
  gap: var(--a4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px)  { .kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kart-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kart-izgara.ikili { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .kart-izgara.ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kart {
  display: flex;
  flex-direction: column;
  gap: var(--a3);
  padding: var(--a5);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
}
.kart-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--cam) 13%, transparent);
  color: var(--cam-koyu);
}
.kart-ikon svg { width: 22px; height: 22px; }
.kart p { color: var(--metin-2); font-size: var(--t-sm); line-height: 1.6; }

/* --------------------------------------------------------------------------
   13. Akordeon (SSS)
   -------------------------------------------------------------------------- */
.akordeon { display: flex; flex-direction: column; gap: var(--a2); }

.sss {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
}
.sss-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a4);
  width: 100%;
  min-height: 60px;
  padding: var(--a4);
  border: 0; background: none;
  font-size: var(--t-md); font-weight: 600;
  color: var(--metin);
  text-align: left;
  cursor: pointer;
  transition: background var(--gecis);
}
.sss-baslik:hover { background: var(--kart-alt); }
.sss-isaret {
  position: relative; width: 15px; height: 15px; flex: none;
}
.sss-isaret::before, .sss-isaret::after {
  content: ""; position: absolute; background: var(--lacivert); border-radius: 2px;
  transition: transform var(--gecis), opacity var(--gecis);
}
.sss-isaret::before { top: 6px; left: 0;   width: 15px; height: 2px; }
.sss-isaret::after  { top: 0;   left: 6px; width: 2px;  height: 15px; }
.sss-baslik[aria-expanded="true"] .sss-isaret::after { transform: rotate(90deg); opacity: 0; }

/* Not: "grid-template-rows: 0fr -> 1fr" hilesi bu yapıda içerik yüksekliğine
   çözülmüyordu (satır her zaman 0 kalıyor). max-height güvenilir çalışıyor. */
.sss-govde {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(.4,0,.2,1);
}
.sss-govde.acik { max-height: 60rem; }
.sss-govde p {
  padding: 0 var(--a4) var(--a4);
  color: var(--metin-2);
  font-size: var(--t-sm);
  line-height: 1.68;
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   14. Sayfa başlığı (iç sayfalar)
   -------------------------------------------------------------------------- */
.sayfa-basi {
  position: relative;
  background: var(--derin);
  color: #fff;
  padding-block: var(--a6) var(--a7);
  overflow: hidden;
  isolation: isolate;
}
.sayfa-basi::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(0,173,239,.25), transparent 64%),
    linear-gradient(160deg, #17215D 0%, #131A42 58%, #101637 100%);
}
.sayfa-basi h1 { color: #fff; font-size: var(--t-3xl); }
.sayfa-basi p { color: #BCC4E8; max-width: 60ch; margin-top: var(--a2); }

.kirinti {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin-bottom: var(--a3);
  font-size: var(--t-sm); color: #8F99C9;
}
.kirinti a { color: #8F99C9; text-decoration: none; }
.kirinti a:hover { color: #fff; text-decoration: underline; }
.kirinti li:not(:last-child)::after { content: "›"; margin-left: 6px; opacity: .6; }
.kirinti [aria-current] { color: #DDE3FA; }

/* --------------------------------------------------------------------------
   15. Zengin metin (içerik sayfaları)
   -------------------------------------------------------------------------- */
.metin-govde { max-width: 72ch; }
.metin-govde > * + * { margin-top: var(--a4); }
.metin-govde p { color: var(--metin-2); line-height: 1.75; }
.metin-govde h2 { font-size: var(--t-2xl); margin-top: var(--a6); color: var(--metin); }
.metin-govde h3 { font-size: var(--t-xl); margin-top: var(--a5); color: var(--metin); }
.metin-govde ul, .metin-govde ol { padding-left: var(--a5); display: flex; flex-direction: column; gap: var(--a2); }
.metin-govde li { color: var(--metin-2); line-height: 1.7; }
.metin-govde strong { color: var(--metin); font-weight: 600; }
.metin-govde a { color: var(--lacivert); }

.bilgi-kutusu {
  border-left: 3px solid var(--turuncu);
  background: color-mix(in srgb, var(--turuncu) 9%, transparent);
  padding: var(--a4) var(--a5);
  border-radius: 0 var(--r) var(--r) 0;
}
.bilgi-kutusu p { color: var(--metin-2); }
.bilgi-kutusu strong { color: var(--metin); }

/* --------------------------------------------------------------------------
   16. Şube listesi
   -------------------------------------------------------------------------- */
.sube-arama {
  position: relative;
  max-width: 460px;
}
.sube-arama input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px 12px 46px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--kart);
  font-size: var(--t-md);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.sube-arama input:focus {
  outline: none;
  border-color: var(--lacivert);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lacivert) 18%, transparent);
}
.sube-arama svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--metin-3); pointer-events: none;
}

.sube-izgara {
  display: grid;
  gap: var(--a3);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--a5);
}
@media (min-width: 600px)  { .sube-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sube-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sube {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  padding: var(--a4);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  transition: border-color var(--gecis);
}
.sube:hover { border-color: var(--lacivert); }
.sube-ad {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--metin);
}
.sube-tel { display: flex; flex-direction: column; gap: 2px; }
/* Telefon bağlantıları sayfanın ana dokunma hedefi — 44px altına düşmemeli */
.sube-tel a {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: var(--r-sm);
  font-family: var(--f-veri);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
  color: var(--lacivert);
  text-decoration: none;
  transition: background var(--gecis);
}
.sube-tel a:hover { background: var(--kart-alt); }
.sube-tel a:hover { text-decoration: underline; }
.sube-tel svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.sube-bos { color: var(--metin-3); font-size: var(--t-sm); font-style: italic; }

.sube-sayac { font-size: var(--t-sm); color: var(--metin-3); margin-top: var(--a3); }

/* --------------------------------------------------------------------------
   16b. Servis güzergâhları
   -------------------------------------------------------------------------- */
.servis-sehirler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-bottom: var(--a6);
}
.servis-sehirler a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--a4);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--kart);
  color: var(--metin-2);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.servis-sehirler a:hover { color: var(--lacivert); border-color: var(--lacivert); background: var(--kart-alt); }

.merkez {
  scroll-margin-top: 110px;
  margin-bottom: var(--a6);
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--kart), var(--kart-alt));
  box-shadow: var(--g-1);
}
.merkez:last-child { margin-bottom: 0; }

.merkez-basi {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--a2) var(--a3);
  padding-bottom: var(--a3);
  margin-bottom: var(--a2);
  border-bottom: 2px solid var(--lacivert);
}
.merkez-basi h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.merkez-etiket {
  font-family: var(--f-veri);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.merkez-not { color: var(--metin-2); font-size: var(--t-sm); margin-bottom: var(--a4); }

.hat-izgara {
  display: grid;
  gap: var(--a3);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--a4);
}
@media (min-width: 700px)  { .hat-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); } }
@media (min-width: 1100px) { .hat-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hat {
  padding: var(--a4);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
.hat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lacivert) 45%, var(--cizgi)); box-shadow: var(--g-1); }
.hat h3 {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lacivert);
  margin-bottom: var(--a3);
}
.hat-not {
  margin-top: var(--a3);
  font-size: var(--t-xs);
  color: var(--turuncu-koyu);
  font-weight: 600;
}

/* Durak listesi — güzergâh çizgisi motifi */
.duraklar { list-style: none; display: flex; flex-direction: column; gap: 0; }
.duraklar li {
  position: relative;
  padding: 5px 0 5px var(--a5);
  font-size: var(--t-sm);
  color: var(--metin-2);
  line-height: 1.45;
}
.duraklar li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kart);
  border: 2px solid var(--cam);
  z-index: 1;
}
.duraklar li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px; top: 19px; bottom: -3px;
  width: 1px;
  background: var(--cizgi);
}

/* --------------------------------------------------------------------------
   17. İletişim formu
   -------------------------------------------------------------------------- */
.form-izgara {
  display: grid;
  gap: var(--a5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .form-izgara { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--a7); } }

.alan { display: flex; flex-direction: column; gap: 7px; }
.alan label { font-size: var(--t-sm); font-weight: 600; color: var(--metin); }
.alan label .zorunlu { color: var(--hata); }

.alan input, .alan textarea, .alan select {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--kart);
  font-size: var(--t-md);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.alan input:focus, .alan textarea:focus, .alan select:focus {
  outline: none;
  border-color: var(--lacivert);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lacivert) 18%, transparent);
}
.alan .yardim { font-size: var(--t-xs); color: var(--metin-3); }
.alan-hata { font-size: var(--t-xs); color: var(--hata); font-weight: 600; }
.alan input[aria-invalid="true"], .alan textarea[aria-invalid="true"] { border-color: var(--hata); }

.onay {
  display: flex; align-items: flex-start; gap: var(--a3);
  font-size: var(--t-sm); color: var(--metin-2); line-height: 1.55;
}
/* Onay metni flex öğesi; min-width:auto yüzünden dar ekranda daralmıyordu */
.onay > span { min-width: 0; }
.onay input {
  width: 21px; height: 21px; min-height: 0; flex: none; margin-top: 2px;
  accent-color: var(--lacivert); cursor: pointer;
}

.iletisim-bilgi { display: flex; flex-direction: column; gap: var(--a4); }
.iletisim-satir {
  display: flex; align-items: flex-start; gap: var(--a3);
  padding-bottom: var(--a4);
  border-bottom: 1px solid var(--cizgi-soft);
}
.iletisim-satir:last-child { border-bottom: 0; padding-bottom: 0; }
.iletisim-satir svg { width: 20px; height: 20px; color: var(--cam-koyu); flex: none; margin-top: 3px; }
/* Flex öğeleri de min-width:auto taşır; uzun ünvan/e-posta satırı daraltmıyordu */
.iletisim-satir > div { min-width: 0; }
.iletisim-satir .deger { overflow-wrap: anywhere; }
.iletisim-satir .etiket {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--metin-3); font-weight: 600;
}
.iletisim-satir .deger { font-size: var(--t-md); color: var(--metin); margin-top: 2px; }
.iletisim-satir .deger a { color: var(--metin); text-decoration: none; }
.iletisim-satir .deger a:hover { color: var(--lacivert); text-decoration: underline; }
.iletisim-satir .deger.tel { font-family: var(--f-veri); font-weight: 600; font-variant-numeric: tabular-nums; }

.uyari-kutusu {
  display: flex; align-items: flex-start; gap: var(--a3);
  padding: var(--a4) var(--a5);
  border-radius: var(--r);
  border: 1px solid;
  font-size: var(--t-sm);
  line-height: 1.6;
}
.uyari-kutusu svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.uyari-basari { border-color: color-mix(in srgb, var(--basari) 40%, transparent);
                background: color-mix(in srgb, var(--basari) 9%, transparent); color: var(--metin); }
.uyari-basari svg { color: var(--basari); }
.uyari-hata { border-color: color-mix(in srgb, var(--hata) 40%, transparent);
              background: color-mix(in srgb, var(--hata) 9%, transparent); color: var(--metin); }
.uyari-hata svg { color: var(--hata); }

/* --------------------------------------------------------------------------
   17b. Kilometre taşları (Hakkımızda)
   -------------------------------------------------------------------------- */
.kilometre-tasi {
  display: grid;
  gap: var(--a3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .kilometre-tasi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a4); } }

.kt {
  display: flex;
  flex-direction: column;
  gap: var(--a1);
  padding: var(--a5) var(--a4);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  border-top: 3px solid var(--cam);
}
.kt-sayi {
  font-family: var(--f-veri);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--lacivert);
}
.kt-ad { font-size: var(--t-sm); color: var(--metin-2); line-height: 1.4; }

/* --------------------------------------------------------------------------
   17c. İkili düzen (metin + görsel)
   -------------------------------------------------------------------------- */
.ikili-duzen {
  display: grid;
  gap: var(--a6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .ikili-duzen { grid-template-columns: 1.15fr 1fr; gap: var(--a7); align-items: center; }
}

/* --------------------------------------------------------------------------
   17d. Mobil uygulama kartları
   -------------------------------------------------------------------------- */
.uygulama-izgara {
  display: grid;
  gap: var(--a3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .uygulama-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); } }

.uygulama-kart {
  display: flex;
  align-items: center;
  gap: var(--a4);
  padding: var(--a5);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--metin);
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.uygulama-kart:hover {
  border-color: var(--lacivert);
  transform: translateY(-2px);
  box-shadow: var(--g-2);
  color: var(--metin);
}
.uygulama-kart svg { width: 36px; height: 36px; flex: none; color: var(--lacivert); }
.uygulama-kart .ust { display: block; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.015em; }
.uygulama-kart .alt { display: block; font-size: var(--t-sm); color: var(--metin-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   17e. Hukuki metin (KVKK) ve sicil bilgileri
   -------------------------------------------------------------------------- */
.metin-govde.hukuki {
  max-width: 76ch;
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--metin-2);
}
.metin-govde.hukuki br + br { content: ""; display: block; height: var(--a3); }

.sicil-kutusu {
  margin-top: var(--a7);
  padding: var(--a5);
  background: var(--kart-alt);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
}
.sicil-kutusu h2 {
  font-size: var(--t-lg);
  margin-bottom: var(--a4);
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--cizgi);
}
.sicil-kutusu dl { margin: 0; display: flex; flex-direction: column; gap: var(--a3); }
.sicil-kutusu dl > div { display: grid; gap: 2px; }
@media (min-width: 600px) {
  .sicil-kutusu dl > div { grid-template-columns: 190px 1fr; gap: var(--a4); align-items: baseline; }
}
.sicil-kutusu dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  color: var(--metin-3);
}
.sicil-kutusu dd { margin: 0; font-size: var(--t-sm); color: var(--metin); }
.sicil-kutusu dd a { color: var(--lacivert); }

/* --------------------------------------------------------------------------
   18. Gömülü servisler (sefer, yolcum nerede, hava, yol)
   -------------------------------------------------------------------------- */
.gomulu {
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--kart);
  box-shadow: var(--g-1);
}
.gomulu iframe {
  width: 100%; border: 0; display: block;
  height: 80vh; height: 80svh; min-height: 620px; max-height: 1000px;
}
.gomulu.kisa iframe { min-height: 520px; }
@media (max-width: 640px) { .gomulu iframe { min-height: 560px; } }

/* --------------------------------------------------------------------------
   19. Galeri
   -------------------------------------------------------------------------- */
.galeri-izgara {
  display: grid;
  gap: var(--a3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .galeri-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .galeri-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.galeri-oge {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--kart-alt);
  border: 1px solid var(--cizgi);
  cursor: zoom-in;
}
.galeri-oge img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 380ms cubic-bezier(.4,0,.2,1);
}
.galeri-oge:hover img { transform: scale(1.05); }

/* Basit ışık kutusu */
.isik-kutusu {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,10,28,.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--a4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
}
.isik-kutusu.acik { opacity: 1; visibility: visible; }
.isik-kutusu img { max-width: 100%; max-height: 88vh; border-radius: var(--r); }
.isik-kapat {
  position: absolute; top: var(--a4); right: var(--a4);
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--r);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: 24px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   20. Alt bilgi
   -------------------------------------------------------------------------- */
.alt-bilgi {
  background: var(--derin);
  color: #AEB7DE;
  padding-block: var(--a7) var(--a5);
  margin-top: var(--a8);
}
.alt-izgara {
  display: grid;
  gap: var(--a6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .alt-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .alt-izgara { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--a7); } }

.alt-bilgi h3 {
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  margin-bottom: var(--a3);
}
.alt-bilgi ul { list-style: none; display: flex; flex-direction: column; gap: var(--a2); }
.alt-bilgi a { color: #AEB7DE; text-decoration: none; font-size: var(--t-sm); }
.alt-bilgi a:hover { color: #fff; text-decoration: underline; }
.alt-bilgi p { font-size: var(--t-sm); line-height: 1.7; }

.alt-logo img { width: 190px; margin-bottom: var(--a4); }

.sosyal { display: flex; gap: var(--a2); margin-top: var(--a4); }
.sosyal a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r);
  color: #AEB7DE;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.sosyal a:hover { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.sosyal svg { width: 19px; height: 19px; }

.uygulama-linkleri { display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a3); }
.uygulama-linkleri a { display: inline-flex; align-items: center; min-height: 46px; }
.uygulama-linkleri img { height: 42px; width: auto; }

.alt-iletisim { display: flex; flex-direction: column; gap: var(--a1); }
.alt-iletisim div {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 44px; font-size: var(--t-sm);
}
.alt-iletisim svg { width: 17px; height: 17px; color: var(--cam); flex: none; }
.alt-iletisim a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--f-veri); font-variant-numeric: tabular-nums;
}
/* Adres satırı sarabilir, dikey hizala */
.alt-iletisim div:has(span) { align-items: flex-start; padding-block: 10px; }
.alt-iletisim div:has(span) svg { margin-top: 3px; }

.alt-son {
  margin-top: var(--a6);
  padding-top: var(--a4);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--a3);
  font-size: var(--t-xs);
  color: #8A93BE;
}
.alt-son ul { flex-direction: row; flex-wrap: wrap; gap: var(--a4); }
.alt-son a { font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   21. Mobil yapışkan çağrı çubuğu
   -------------------------------------------------------------------------- */
.mobil-cubuk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cizgi);
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -3px 14px rgba(19,26,66,.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 768px) { .mobil-cubuk { display: none; } }

.mobil-cubuk a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px;
  background: var(--kart);
  color: var(--metin);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.mobil-cubuk a.vurgu { background: var(--lacivert); color: #fff; }
.mobil-cubuk svg { width: 18px; height: 18px; flex: none; }

body.cubuk-var { padding-bottom: 57px; }
@media (min-width: 768px) { body.cubuk-var { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   22. Yukarı çık
   -------------------------------------------------------------------------- */
.yukari {
  position: fixed;
  right: var(--a4);
  bottom: calc(57px + var(--a4));
  z-index: 79;
  width: 46px; height: 46px;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  background: var(--kart);
  color: var(--lacivert);
  box-shadow: var(--g-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--gecis), visibility var(--gecis), transform var(--gecis);
}
.yukari.gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari svg { width: 19px; height: 19px; }
@media (min-width: 768px) { .yukari { bottom: var(--a5); right: var(--a5); } }

/* --------------------------------------------------------------------------
   23. Çerez bildirimi
   -------------------------------------------------------------------------- */
.cerez {
  position: fixed;
  left: var(--a4); right: var(--a4);
  bottom: calc(57px + var(--a4));
  z-index: 100;
  max-width: 520px;
  padding: var(--a5);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  box-shadow: var(--g-3);
  display: none;
  flex-direction: column;
  gap: var(--a3);
}
.cerez.gorunur { display: flex; }
.cerez p { font-size: var(--t-sm); color: var(--metin-2); line-height: 1.6; }
.cerez .dugmeler { display: flex; gap: var(--a2); flex-wrap: wrap; }
.cerez .dugme { min-height: 44px; padding: 10px 18px; font-size: var(--t-sm); }
@media (min-width: 768px) { .cerez { left: auto; right: var(--a5); bottom: var(--a5); } }

/* --------------------------------------------------------------------------
   23a. Hava durumu
   -------------------------------------------------------------------------- */
.hava-yukleniyor,
.hava-hata {
  display: flex; flex-direction: column; align-items: center; gap: var(--a3);
  padding: var(--a8) var(--a4);
  color: var(--metin-3);
  text-align: center;
}
.hava-hata svg { width: 40px; height: 40px; color: var(--metin-3); }
.hava-spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--cizgi);
  border-top-color: var(--lacivert);
  border-radius: 50%;
  animation: hava-don 700ms linear infinite;
}
@keyframes hava-don { to { transform: rotate(360deg); } }

/* ---- Bugün kartı ---- */
.hava-bugun {
  display: grid; gap: var(--a5);
  padding: var(--a5);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--lacivert) 0%, var(--lacivert-koyu) 62%, #141A52 100%);
  color: #fff;
  box-shadow: var(--g-2);
}
:root[data-tema="koyu"] .hava-bugun {
  background: linear-gradient(135deg, var(--kart-alt) 0%, var(--derin-2) 100%);
  border: 1px solid var(--cizgi);
}
@media (min-width: 760px) {
  .hava-bugun { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--a7); padding: var(--a6); }
}
.hava-bugun-etiket {
  display: inline-block;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
:root[data-tema="koyu"] .hava-bugun-etiket { color: var(--metin-3); }
.hava-bugun-derece { display: flex; align-items: center; gap: var(--a4); margin-top: var(--a2); }
.hava-bugun-derece strong {
  font-size: clamp(3rem, 2.2rem + 4vw, 4.6rem);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
}
.hava-bugun-durum { display: block; margin-top: var(--a2); font-size: var(--t-lg); color: rgba(255,255,255,.9); }
:root[data-tema="koyu"] .hava-bugun-durum { color: var(--metin-2); }

.hava-ikon { display: inline-flex; color: var(--turuncu); }
.hava-ikon svg { width: 30px; height: 30px; }
.hava-ikon-buyuk svg { width: clamp(52px, 9vw, 76px); height: clamp(52px, 9vw, 76px); }

.hava-olcum {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3);
  margin: 0;
}
@media (min-width: 480px) { .hava-olcum { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .hava-olcum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); } }
.hava-olcum > div {
  padding: var(--a3);
  border-radius: var(--r);
  background: rgba(255,255,255,.1);
}
:root[data-tema="koyu"] .hava-olcum > div { background: rgba(255,255,255,.05); }
.hava-olcum dt {
  font-size: var(--t-xs); font-weight: 600;
  color: rgba(255,255,255,.7);
}
:root[data-tema="koyu"] .hava-olcum dt { color: var(--metin-3); }
.hava-olcum dd { margin: 4px 0 0; font-size: var(--t-lg); font-weight: 700; }

/* ---- 7 gün ---- */
.hava-haftalik-baslik {
  margin: var(--a7) 0 var(--a4);
  font-size: var(--t-xl);
}
.hava-gunler {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.hava-gun {
  display: flex; flex-direction: column; align-items: center; gap: var(--a2);
  padding: var(--a4) var(--a3);
  text-align: center;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  transition: border-color var(--gecis), transform var(--gecis);
}
.hava-gun:hover { border-color: var(--lacivert-acik); transform: translateY(-2px); }
.hava-gun.bugun { border-color: var(--lacivert); box-shadow: var(--g-1); }
.hava-gun-ad { font-size: var(--t-sm); font-weight: 700; color: var(--metin); }
.hava-gun-durum { font-size: var(--t-xs); color: var(--metin-3); line-height: 1.35; }
.hava-gun-derece { display: flex; align-items: baseline; gap: 6px; margin-top: var(--a1); }
.hava-gun-derece b { font-size: var(--t-lg); font-weight: 700; color: var(--metin); }
.hava-gun-derece small { font-size: var(--t-sm); color: var(--metin-3); }

.hava-kaynak {
  margin-top: var(--a5);
  font-size: var(--t-sm); color: var(--metin-3);
}

/* --------------------------------------------------------------------------
   23b. Giriş reklamı (pop-up)
   Kare (1:1) görsel. Genişlik hem ekrana hem yüksekliğe göre sınırlanıyor;
   böylece alçak ekranlarda kapatma düğmesi asla ekran dışında kalmıyor.
   -------------------------------------------------------------------------- */
.reklam-perde {
  position: fixed; inset: 0;
  z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: var(--a4);
  background: rgba(8, 11, 28, .74);
  opacity: 0;
  transition: opacity 220ms ease;
}
.reklam-perde[hidden] { display: none; }
.reklam-perde.acik { opacity: 1; }

.reklam-kutu {
  position: relative;
  width: min(460px, 92vw, 78vh);   /* 1:1 olduğu için yükseklik de sınır */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--kart);
  box-shadow: var(--g-3);
  transform: translateY(12px) scale(.985);
  transition: transform 260ms cubic-bezier(.2, .8, .3, 1);
}
.reklam-perde.acik .reklam-kutu { transform: none; }

.reklam-gorsel { display: block; }
.reklam-gorsel img { display: block; width: 100%; height: auto; }

.reklam-kapat {
  position: absolute; top: 10px; right: 10px;
  z-index: 2;
  width: 44px; height: 44px;   /* dokunma hedefi en az 44px */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--derin);
  box-shadow: var(--g-2);
  cursor: pointer;
  transition: background var(--gecis), transform var(--gecis);
}
.reklam-kapat:hover { background: #fff; transform: scale(1.06); }
.reklam-kapat svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   24. Erişilebilirlik ve baskı
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .ust-serit, .baslik-cubugu, .mobil-cubuk, .yukari, .cerez, .cekmece, .cekmece-perde { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .sayfa-basi { background: #fff !important; color: #000 !important; }
  .hero h1, .sayfa-basi h1 { color: #000 !important; }
}