/* ============================================================
   ALPINE — kayak/dağ oteli için sıcak, karlı-dağ temalı tasarım
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Karla:wght@400;500;600;700;800&display=swap');

:root{
  --al-ink: #1d2733;
  --al-ink-soft: rgba(29,39,51,.66);
  --al-ink-faint: rgba(29,39,51,.46);
  --al-bg: #f4f7fa;
  --al-bg-alt: #e8eef3;
  --al-surface: #ffffff;
  --al-line: rgba(29,39,51,.10);
  --al-line-strong: rgba(29,39,51,.18);
  --al-navy: #1b3a56;
  --al-navy-dark: #102636;
  --al-ember: #d97b2c;
  --al-ember-dark: #b0611e;
  --al-ember-soft: rgba(217,123,44,.14);
  --al-ice-soft: rgba(74,143,196,.14);
  --al-shadow-sm: 0 8px 22px rgba(29,39,51,.09);
  --al-shadow-md: 0 20px 46px rgba(29,39,51,.14);
  --al-shadow-lg: 0 30px 70px rgba(29,39,51,.22);
  --al-radius: 18px;
  --al-radius-lg: 28px;
  --al-radius-sm: 10px;
  --al-font-display: 'Abril Fatface', Georgia, serif;
  --al-font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--al-bg);
  color: var(--al-ink);
  font-family: var(--al-font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; }
a{ color: inherit; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4{
  font-family: var(--al-font-display);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  color: var(--al-ink);
}

.al-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--al-font-sans);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--al-ember-dark);
}
.al-eyebrow i{ font-size: 14px; }

.al-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--al-navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.al-btn:hover{ transform: translateY(-2px); box-shadow: var(--al-shadow-sm); }
.al-btn.ember{ background: var(--al-ember); }
.al-btn.ember:hover{ background: var(--al-ember-dark); }
.al-btn.navy{ background: var(--al-navy); }
.al-btn.navy:hover{ background: var(--al-navy-dark); }
.al-btn.outline{ background: transparent; border-color: var(--al-line-strong); color: var(--al-ink); }
.al-btn.outline:hover{ background: var(--al-surface); }
.al-btn.outline.light{ border-color: rgba(255,255,255,.5); color: #fff; }
.al-btn.outline.light:hover{ background: rgba(255,255,255,.14); }
.al-btn.block{ width: 100%; }
.al-btn[disabled]{ opacity: .5; cursor: not-allowed; transform: none !important; }

.al-card{
  background: var(--al-surface);
  border: 1px solid var(--al-line);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow-sm);
}

.al-section{ padding: 64px 0; }
.al-section.tight{ padding: 36px 0; }

.al-section-head{ margin-bottom: 34px; }
.al-section-head h2{ font-size: 36px; margin-top: 12px; }
.al-section-head p{ color: var(--al-ink-soft); margin-top: 10px; max-width: 520px; }

.al-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--al-bg-alt);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--al-ink-soft);
}

.al-empty{
  border: 1px dashed var(--al-line-strong);
  border-radius: var(--al-radius);
  background: var(--al-surface);
  padding: 46px 26px;
  text-align: center;
  color: var(--al-ink-soft);
}
.al-empty .ico{ font-size: 32px; margin-bottom: 12px; }
.al-empty h3{ font-size: 20px; margin-bottom: 6px; }

@media (max-width: 720px){
  .al-section{ padding: 44px 0; }
  .al-section-head h2{ font-size: 27px; }
}