/* === Combined stylesheet for Concierge & Destinations (style3.css) === */
/* Order: concierge, then destinations (to preserve any later overrides). */

/* === Concierge.css (original inline) === */
:root{
      --maxw:1140px;
      --pad: min(4vw, 32px);
      --gap: clamp(20px, 4vw, 48px);
      --lead: clamp(18px, 2.2vw, 22px);
      --cta_lead: clamp(18px, 2.2vw, 22px);
      --heading: clamp(34px, 6vw, 64px);
      --h2: clamp(28px, 4vw, 44px);
      --h3: clamp(20px, 2.6vw, 26px);
      --muted:#6f7378;
      --ink:#111318;
      --paper:#ffffff;
      --soft:#f6f7f8;
      --brand:#111318;
      --radius:20px;
      --shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
    body{font-family:"PT Serif", Georgia, serif; line-height:1.5}

    /* Header (referansla aynı) */
    .header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee; }
    .header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pad)}
    .logo-icon{height:42px;width:auto;display:block}
    .nav a{
      color:var(--ink); text-decoration:none; margin:0 10px;
      font-weight:400; font-size:16px; letter-spacing:.02em;
    }
    .nav a.btn{padding:10px 16px;border:1px solid #ddd;border-radius:999px}

    /* Hero */
    .hero{position:relative; min-height:76vh; display:grid; place-items:end start; overflow:hidden; background:#000}
    .hero .media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72) contrast(1.05)}
    .hero .container{position:relative; z-index:1; padding: clamp(40px, 8vw, 100px) var(--pad); width:min(var(--maxw),100%); color:#fff}
    .kicker{letter-spacing:.2em; text-transform:uppercase; font-size:12px; font-weight:700; opacity:.9}
    .hero h1{font-size:var(--heading); line-height:1.05; margin:.6rem 0 1rem}
    .lead{font-size:var(--lead); max-width: 60ch; opacity:.95}

    /* Tagline */
    .tagline{ padding: clamp(20px, 4vw, 36px) 0; background: transparent; }
    .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, 2.0vw, 21px); text-align:center}

    /* Services grid – Alternating image/text (destinations yapısıyla aynı) */
    .services{padding: clamp(48px, 7vw, 96px) var(--pad)}
    .services .inner{width:min(var(--maxw),100%); margin:0 auto; display:grid; gap: clamp(32px, 4vw, 48px)}
    .svc{
      display:grid; gap: clamp(18px, 2vw, 24px);
      grid-template-columns: 1.32fr 0.88fr; /* görsel %20 büyük */
      align-items: center;
    }
    .svc.flip{grid-template-columns: 0.88fr 1.32fr}
    @media (max-width:1000px){ .svc, .svc.flip{grid-template-columns:1fr} }

    .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}
    .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;
    }

    .copy{padding:6px; font-size: clamp(16px, 2.1vw, 19px); line-height:1.62}
    .copy p{color:var(--muted); margin:.5rem 0}

    /* Breaker */
    .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)}

    /* CTA (buton siyah/beyaz oval ve ortalı — referansla aynı) */
    .cta{padding: clamp(56px, 8vw, 110px) var(--pad); background:#fff}
    .cta .inner{width:min(860px,100%); margin:0 auto; text-align:center}
    .cta-lead{font-size: var(--lead); max-width:60ch; margin-inline:auto; text-align:center; color:var(--muted); display:block}
    .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}
    .form input, .form textarea{width:100%; padding:12px 14px; border:1px solid #e2e5e8; border-radius:12px; font: inherit; background:#fff}
    .form textarea{grid-column:1/-1; min-height:140px}
    @media (max-width:720px){ .form{grid-template-columns:1fr} }
    .cta .btn{
      appearance:none;
      border:1px solid #111318;
      background:#111318;
      color:#fff;
      padding:12px 18px;
      border-radius:999px;
      font-weight:700;
      letter-spacing:.01em;
      text-decoration:none;
      display:inline-block;
      cursor:pointer;
      transition:opacity .2s ease;
    }
    .cta .btn:hover{ opacity:.9 }

    /* Util */
    .center{text-align:center}
    .spacer{height: clamp(40px, 7vh, 80px)}
    .footer small{ font-size:14px; font-weight:400; line-height:1.6 }

/* === Destinations.css (original inline) === */
:root{
      --maxw:1140px;
      --pad: min(4vw, 32px);
      --gap: clamp(20px, 4vw, 48px);
      --lead: clamp(18px, 2.2vw, 22px);
      --cta_lead: clamp(18px, 2.2vw, 22px);
      --heading: clamp(34px, 6vw, 64px);
      --h2: clamp(28px, 4vw, 44px);
      --h3: clamp(20px, 2.6vw, 26px);
      --muted:#6f7378;
      --ink:#111318;
      --paper:#ffffff;
      --soft:#f6f7f8;
      --brand:#111318;
      --radius:20px;
      --shadow: 0 10px 30px rgba(0,0,0,.06);
    }

    html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
    body{font-family:"PT Serif", Georgia, serif; line-height:1.5}

    /* Header */
    .header{
      position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee;
    }
    .header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--pad)}
    .logo-icon{height:42px;width:auto;display:block}
    .nav a{
      color:var(--ink); text-decoration:none; margin:0 10px;
      font-weight:400; font-size:16px; letter-spacing:.02em;
    }
    .nav a.btn{padding:10px 16px;border:1px solid #ddd;border-radius:999px}

    /* Hero — Bespoke ile aynı yükseklik */
    .hero{position:relative; min-height:76vh; display:grid; place-items:end start; overflow:hidden; background:#000}
    .hero .media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.72) contrast(1.05)}
    .hero .container{position:relative; z-index:1; padding: clamp(40px, 8vw, 100px) var(--pad); width:min(var(--maxw),100%); color:#fff}
    .kicker{letter-spacing:.2em; text-transform:uppercase; font-size:12px; font-weight:700; opacity:.9}
    .hero h1{font-size:var(--heading); line-height:1.05; margin:.6rem 0 1rem}
    .lead{font-size:var(--lead); max-width: 60ch; opacity:.95}

    /* 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, 2.0vw, 21px); text-align:center}

    /* Locations grid – Alternating image/text */
    .locations{padding: clamp(48px, 7vw, 96px) var(--pad)}
    .locations .inner{width:min(var(--maxw),100%); margin:0 auto; display:grid; gap: clamp(32px, 4vw, 48px)}
    .loc{display:grid; gap: clamp(18px, 2vw, 24px); grid-template-columns: 1.32fr 0.88fr; align-items: center}
    .loc.flip{grid-template-columns: 0.88fr 1.32fr}
    @media (max-width:1000px){ .loc, .loc.flip{grid-template-columns:1fr} }

    .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}
    .media-wrap .city{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}

    /* Şehir metinleri */
    .copy{padding:6px; font-size: clamp(16px, 2.1vw, 19px); line-height:1.62}
    .copy p{color:var(--muted); margin:.5rem 0}

    /* Breaker */
    .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)}

    /* CTA */
    .cta{padding: clamp(56px, 8vw, 110px) var(--pad); background:#fff}
    .cta .inner{width:min(860px,100%); margin:0 auto; text-align:center}
    .cta-lead{font-size: var(--lead); max-width:60ch; margin-inline:auto; text-align:center; color:var(--muted); display:block}
    .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}
    .form input, .form textarea{width:100%; padding:12px 14px; border:1px solid #e2e5e8; border-radius:12px; font: inherit; background:#fff}
    .form textarea{grid-column:1/-1; min-height:140px}
    @media (max-width:720px){ .form{grid-template-columns:1fr} }

    /* CTA buton stili */
    .cta .btn{appearance:none; border:1px solid #111318; background:#111318; color:#fff; padding:12px 18px; border-radius:999px; font-weight:700; letter-spacing:.01em; text-decoration:none; display:inline-block; cursor:pointer; transition:opacity .2s ease}
    .cta .btn:hover{ opacity:.9 }

    /* Util */
    .center{text-align:center}
    .spacer{height: clamp(40px, 7vh, 80px)}
    .footer small{ font-size:14px; font-weight:400; line-height:1.6 }
