/* =========================================================
   Unified Throne Voyages Stylesheet
   HEADER: logo büyük + nav altta + ortalanmış
   HERO: içerik sayfanın solunda, dibine yapışmadan, ortalara kadar yayılıyor
   ========================================================= */

/* ===== DESIGN TOKENS ===== */

:root{
  /* Marka renkleri (Throne Voyages) */
  --tv-ocean:#0e5475;
  --tv-ocean-900:#0a3e58;
  --tv-cream:#f8f9fa;
  --tv-gold:#b88a2b;
  --tv-text:#0f1a22;
  --tv-muted:#6c7a86;
  --tv-white:#ffffff;

  /* Typography / layout scale (fluid) */
  --maxw: clamp(1140px, 80vw, 1500px);
  --pad:min(4vw,32px);
  --gap:clamp(20px,4vw,48px);
  --lead:clamp(18px,2.2vw,22px);
  --about_lead:clamp(16px,2.2vw,18px);
  --cta_lead:var(--lead);
  --heading:clamp(34px,6vw,64px);
  --h2:clamp(28px,4vw,44px);
  --h3:clamp(20px,2.6vw,26px);

  /* Nötr tonlar (marka ile uyumlu) */
  --muted:var(--tv-muted);
  --ink:var(--tv-text);
  --paper:var(--tv-white);
  --soft:#f6f7f8;
  --brand:var(--tv-text);

  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.06);

  /* Transportation spesifik */
  --img-ratio:16/10;
}

/* Transportation sayfasında biraz daha geniş layout */
body.transportation{
  --maxw:1280px;
  --gap:clamp(18px,3.6vw,40px);
  --img-h:clamp(200px,24vw,280px);
}

/* ===== GLOBAL RESETS & BASE ===== */

html{
  box-sizing:border-box;
  scroll-behavior:smooth;
  scroll-padding-top:80px; /* anchor offset */
}

*,*::before,*::after{
  box-sizing:inherit;
}

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}

body{
  font-family:"PT Serif",Georgia,serif;
  line-height:1.5;
}

/* Global font family */
body,
h1,h2,h3,h4,h5,h6,
p,a,li,
input,textarea,select{
  font-family:"PT Serif",Georgia,serif;
}

/* Images */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Container – genel sayfa içerikleri için ortalanmış */
.container{
  width:min(var(--maxw),92%);
  margin-inline:auto;
}

/* Links (genel) */
a{
  text-decoration:none;
  color:var(--tv-ocean);
  transition:opacity .2s ease;
}

a:hover{
  opacity:.9;
}

/* Metin içi sade linkler (link-plain) */
a.link-plain{
  color:inherit !important;
  text-decoration:none !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
}

a.link-plain:hover,
a.link-plain:focus-visible{
  text-decoration:underline !important;
  text-underline-offset:0.15em !important;
}

/* Başlık içi linkler alt çizgi almasın */
h2 > a.link-plain,
h2 > a.link-plain:hover,
h2 > a.link-plain:focus-visible{
  text-decoration:none !important;
}

/* ===== TYPOGRAPHY ===== */

h1,h2,h3,h4,h5,h6{
  color:var(--ink);
  line-height:1.2;
  margin:0 0 .6rem;
}

h1{
  font-size:var(--heading);
}

h2{
  font-size:var(--h2);
}

h3{
  font-size:var(--h3);
}

/* Kicker (hero üstü küçük başlık) */
.kicker{
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:700;
  opacity:.9;
}

/* Section intro – genel giriş paragrafı */
.section-intro,
.lead{
  font-size:var(--lead);
  line-height:1.7;
  color:var(--muted);
}

/* ===== BUTTONS (Tek sistem) ===== */

.btn{
  appearance:none;
  border-radius:999px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.btn:hover{
  background:rgba(255,255,255,.18);
}

/* Koyu buton varyantı (global CTA’lar) */
.btn.dark{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

/* Açık buton varyantı */
.btn.light{
  border-color:#ddd;
  background:#fff;
  color:var(--ink);
}

/* Outline varyant */
.btn.outline{
  background:transparent;
  color:var(--ink);
  border:2px solid currentColor;
}

.btn.outline:hover{
  background:var(--ink);
  color:#fff;
}

/* Hero içindeki butonlar beyaz ağırlıklı */
.hero .btn{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);
  color:#fff;
}

.hero .btn:hover{
  background:rgba(255,255,255,.22);
}

/* CTA bloklarındaki buton – koyu */
.cta .btn{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

/* ===== HEADER — centered + stacked (logo büyük + nav altta) ===== */

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid #eee;
}

.header .inner{
  display:flex;
  flex-direction:column;        /* üst üste hizalama */
  align-items:center;           /* ortalama */
  justify-content:center;
  padding:20px 0;
  gap:14px;                     /* logo ile menü arası boşluk */
}

/* Logo & brand */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.brand .logo-icon{
  height:110px;                 /* büyük logo */
  width:auto;
  display:block;
}

/* Eğer text logo varsa */
.header .brand-text{
  font-size:32px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}

/* NAV MENÜ — logonun altında, ortalanmış */
.nav{
  display:flex;
  gap:26px;
  justify-content:center;
  align-items:center;
}

.nav a{
  color:var(--ink);
  font-size:18px;
  font-weight:400;
  letter-spacing:.02em;
  text-decoration:none;
}

.nav a:hover{
  opacity:.7;
}

/* Nav içindeki özel btn kullanılırsa */
.nav a.btn{
  padding:8px 16px;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-size:16px;
}

/* Mobil görünüm */
@media (max-width:700px){
  .nav{
    flex-wrap:wrap;
    gap:18px;
  }
  .brand .logo-icon{
    height:90px; /* mobilde biraz küçült */
  }
}

/* ===== HERO — içerik sayfanın solunda, dibine yapışmadan, ortalara kadar yayılıyor ===== */

.hero{
  position:relative;
  min-height:76vh;
  display:flex;
  align-items:center;                /* dikey ortalama */
  justify-content:flex-start;        /* solda */
  overflow:hidden;
  background:#000;
}

/* Arkaplan (slideshow + normal) */
.hero .media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.72) contrast(1.05);
  z-index:1;
}

.hero-slideshow{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
}

.hero-slideshow .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.5s ease-in-out;
}

.hero-slideshow .slide.active{
  opacity:1;
  z-index:2;
}

/* İçerik kutusu – sol tarafta, ama yarım sayfaya kadar uzayabilir */
.hero .container,
.hero .content{
  position:relative;
  z-index:3;
  width:min(var(--maxw),100%);
  max-width:clamp(640px,60vw,900px);    /* sol yarı + biraz ötesine kadar uzansın */
  margin-left:clamp(16px,5vw,40px);     /* ekran solundan nefes payı */
  margin-right:auto;
  padding:0;
  text-align:left;
}

/* Başlık */
.hero h1{
  color:#fff;
  margin:0 0 18px;
  line-height:1.05;
}

/* Lead text – artık container genişliği kadar yayılabilir */
.hero .lead,
.hero .content p{
  color:#e9f2f7;
  max-width:100%;
  margin:0 0 22px;
  text-align:left;
}

/* CTA butonları */
.hero .cta-row{
  display:flex;
  gap:12px;
  margin-top:20px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

/* Index özel hero açıklama (u-d4c0d27e) */
.u-d4c0d27e{
  max-width:100%;
  color:#e9f2f7 !important;
  font-size:20px !important;
  line-height:1.6;
}

@media (max-width:600px){
  .u-d4c0d27e{
    font-size:18px !important;
  }
}

/* ===== SECTIONS / LAYOUT ===== */

.section{
  padding:72px 0;
}

.section.light{
  background:var(--tv-cream);
}

.section.white{
  background:#fff;
}

/* Manifesto / block tipleri (Bespoke, vb.) */
.block{
  padding:clamp(56px,8vw,110px) var(--pad);
  display:grid;
  place-items:center;
  background:var(--paper);
}

.block .inner{
  width:min(var(--maxw),100%);
  text-align:center;
}

.block h2{
  font-size:var(--h2);
  line-height:1.1;
  margin:0 0 12px;
}

.block p{
  max-width:72ch;
  margin:0 auto;
  color:var(--muted);
  font-size:var(--lead);
}

/* Breaker tam genişlik görsel */
.breaker{
  height:clamp(260px,40vh,420px);
  position:relative;
  overflow:hidden;
  background:#000;
}

.breaker img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.78) contrast(1.05);
}

/* ===== GENEL GRIDLER ===== */

/* Index’te kullanılan grid (kartlar) – 3 kolon */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}

/* Diğer sayfalarda kullanılan 3 kolonlu grid */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}

@media (max-width:900px){
  .grid-3,
  .grid3{
    grid-template-columns:1fr;
  }
}

/* Split layout (text + görsel) */
.split{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:center;
}

@media (max-width:900px){
  .split{
    grid-template-columns:1fr;
  }
}

/* List with icons */
.list-icons{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:12px;
}

.list-icons li{
  display:flex;
  align-items:center;
  gap:10px;
}

.badge{
  width:28px;
  height:28px;
  background:var(--tv-cream);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--tv-ocean);
  font-weight:700;
}

/* ===== CARD BİLEŞENLERİ ===== */

/* Bespoke / Index kart alanı (Signature Ways to Travel vb.) */
.cards{
  padding:clamp(50px,7vw,96px) var(--pad);
  background:var(--soft);
}

.cards .inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
}

.cards h2{
  font-size:var(--h2);
  text-align:center;
  margin:0 0 28px;
}

/* Genel kart */
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  display:grid;
  gap:10px;
  align-content:start;
}

/* GLOBAL CARD TYPOGRAPHY — ALL CARDS SAME SIZE */
.card h3{
  font-size:clamp(20px, 2vw, 26px); /* Transportation ile uyumlu */
  margin:0;
}

.card p{
  font-size:clamp(16px, 1.5vw, 17px); /* Transport ile aynı ölçek */
  color:var(--muted);
  line-height:1.55;
  margin:0;
}

/* Index kart görselleri – hem daha geniş kart, hem daha yüksek görsel */
.card img{
  width:100%;
  height:clamp(260px, 22vw, 320px);
  object-fit:cover;
  border-radius:12px;
}
/* Kart içinde görselin hemen altındaki başlık biraz aşağı insin */
.card img + h3{
  margin-top:12px; /* istersen 10–16px arası oynayabilirsin */
}

/* Celebrations kart görseli */
.card .thumb{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* Transportation kartları (grid4) */
body.transportation .cards{
  padding:clamp(44px,6.2vw,80px) var(--pad) clamp(36px,5vw,64px);
  background:var(--soft);
}

body.transportation .grid4{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (max-width:640px){
  body.transportation .grid4{
    grid-template-columns:1fr;
  }
}

body.transportation .card{
  padding:0;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  align-content:start;
  overflow:hidden;
}

body.transportation .card .img-wrap{
  width:100%;
  height:var(--img-h);
  aspect-ratio:var(--img-ratio);
  overflow:hidden;
}

body.transportation .card .img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translateZ(0);
}

body.transportation .card .body{
  padding:18px 20px 16px;
  display:grid;
  gap:8px;
}

/* ===== DESTINATIONS & CONCIERGE LAYOUTLARI ===== */

/* Tagline */
.tagline{
  padding:clamp(20px,4vw,36px) 0;
}

.tagline h2{
  margin:0;
  font-size:clamp(24px,3.4vw,34px);
  line-height:1.15;
  text-align:center;
}

.tagline p{
  margin:.5rem auto 0;
  max-width:70ch;
  color:var(--muted);
  font-size:clamp(18px,2vw,21px);
  text-align:center;
}

/* Destinations – locations grid */
.locations,
.services{
  padding:clamp(48px,7vw,96px) var(--pad);
}

.locations .inner,
.services .inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
  display:grid;
  gap:clamp(32px,4vw,48px);
}

/* Tek bileşen tipi: .loc / .svc */
.loc,
.loc.flip,
.svc,
.svc.flip{
  display:grid;
  gap:clamp(18px,2vw,24px);
  grid-template-columns:1.32fr .88fr;
  align-items:center;
}

.loc.flip,
.svc.flip{
  grid-template-columns:.88fr 1.32fr;
}

@media (max-width:1000px){
  .loc,
  .loc.flip,
  .svc,
  .svc.flip{
    grid-template-columns:1fr;
  }
}

/* Media wrap */
.media-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:0;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow);
}

.media-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.95) contrast(1.05);
}

.media-wrap .shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.48) 0%,rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* Alt başlık (city / title) */
.media-wrap .city,
.media-wrap .title{
  position:absolute;
  left:18px;
  bottom:14px;
  right:18px;
  color:#fff;
  font-size:clamp(26px,3.8vw,40px);
  line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.35);
  letter-spacing:.01em;
}

/* Metin bloğu */
.copy{
  padding:6px;
  font-size:clamp(16px,2.1vw,19px);
  line-height:1.62;
}

.copy p{
  color:var(--muted);
  margin:.5rem 0;
}

/* Hizmet/şehir kartını komple tıklanabilir yapmak için */
.svc-link{
  display:block;
}

.svc-link article:hover{
  opacity:.92;
  transition:opacity .25s ease;
}

/* ===== SÜREÇ (PROCESS) BLOĞU ===== */

.process{
  padding:clamp(56px,7vw,96px) var(--pad);
  background:#fff;
}

.process .inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
}

.process h2{
  font-size:var(--h2);
  margin:0 0 24px;
}

.steps{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:clamp(12px,2vw,18px);
}

@media (max-width:1000px){
  .steps{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .steps{
    grid-template-columns:1fr;
  }
}

.step{
  background:var(--soft);
  border-radius:14px;
  padding:18px 16px;
  display:grid;
  gap:8px;
  align-content:start;
}

.step .n{
  font-weight:700;
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  color:#555;
}

.step h3{
  margin:0;
  font-size:18px;
}

.step p{
  margin:0;
  color:var(--muted);
}

/* Transportation için hafif farklı spacing */
body.transportation .process{
  padding:clamp(50px,6.4vw,84px) var(--pad);
}

/* ===== CTA BLOKLARI & FORM ===== */

.cta{
  padding:clamp(56px,8vw,110px) var(--pad);
  background:#fff;
}

body.transportation .cta{
  padding:clamp(50px,7vw,90px) var(--pad);
}

.cta .inner{
  width:min(860px,100%);
  margin:0 auto;
  text-align:center;
  padding:0 var(--pad);
}

.cta h2{
  font-size:var(--h2);
  margin:0 0 10px;
}

.cta-lead{
  font-size:var(--lead);
  max-width:60ch;
  margin-inline:auto;
  text-align:center;
  color:var(--muted);
  display:block;
}

/* Form grid */
.form{
  margin-top:18px;
  text-align:left;
  background:#fff;
  border:1px solid #eee;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  display:grid;
  gap:14px;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}

.form > *{
  min-width:0;
}

.form textarea{
  grid-column:1/-1;
  min-height:140px;
}

@media (max-width:720px){
  .form{
    grid-template-columns:1fr;
  }
}

/* Form elemanları (plan/form bütünlüğü) */
input,
textarea,
select{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:16px;
  color:var(--ink);
  box-sizing:border-box;
  background:#fff;
}

input:focus,
textarea:focus,
select:focus{
  border-color:#bbb;
  outline:none;
  box-shadow:none;
}

/* Plan form utility class'leri (index’te kullanılıyor) */
.u-7fa56380{padding:20px;}
.u-990b1304{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.u-8f0e9474{padding:12px;border-radius:10px;border:1px solid:#ddd;}
.u-e0005366{grid-column:1/-1;padding:12px;border:1px solid:#ddd;border-radius:10px;}
.u-002535c2{margin-top:12px;}

/* Honeypot field */
.hp-field{
  position:absolute;
  left:-9999px;
  height:0;
  width:0;
  opacity:0;
}

/* Form içi center */
.form .center{
  grid-column:1/-1;
  text-align:center;
}

/* ===== FOOTER (TEK SİSTEM) ===== */

/* Genel footer (bütün sayfalar için) */
.footer{
  padding:30px var(--pad);
  border-top:1px solid #222;
  background:#111318;
  color:#ffffff;
}

/* 4 satırlı, ortalanmış layout */
.footer-inner{
  width:min(var(--maxw),100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;   /* 4 satır */
  align-items:center;
  text-align:center;
  gap:12px;
}

/* 1. satır – © ... */
.footer-copy{
  font-size:15px;
  opacity:.9;
  margin:0;
}

/* 2. + 3. satır – adres + telefon (alt alta, ortalı) */
.footer-contact-stacked{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:15px;
  opacity:.9;
}

/* Icon + text pair */
.footer-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.footer-icon{
  width:16px;
  height:16px;
  opacity:.9;
}

/* 4. satır – sosyal ikonlar */
.footer-social{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
}

.footer a{
  text-decoration:none;
  color:#ffffff;
  font-size:15px;
  letter-spacing:.02em;
}

.footer a:hover{
  opacity:.9;
}

.social-link{
  opacity:.85;
}

.social-link:hover{
  opacity:1;
}

.social-icon{
  width:30px;
  height:30px;
}

/* Küçük copyright (gerekirse başka yerde kullanılırsa) */
.footer small{
  font-size:14px;
  font-weight:400;
  line-height:1.6;
}

/* ===== UTILITY ===== */

.center{text-align:center;}
.spacer{height:clamp(40px,7vh,80px);}

/* Responsive hero heading küçültme (index dâhil) */
@media (max-width:900px){
  h1{
    font-size:40px;
  }
}

/* Başlığın fotoğrafa uzaklığı + ortalanması (Signature Ways to Travel) */
.inner h2 {
   margin-top: 40px;
   text-align: center;
}

/* About sayfası paragraf boyutu */
#about p{
  font-size:var(--about_lead);
  line-height:1.7;
  color:var(--muted);
}