/* =========================================================
   La Bien Theme – main.css (clean)
   - Tokens > Base > Layout > Components > Sections > Responsive
   ========================================================= */

/* ===== 1) Tokens (TEK :root) ===== */
:root{
  --brand-navy:#0a2342;
  --brand-gold:#c9a33b;

  --ink:#1c1d20;
  --muted:#5e636b;

  --beige:#F5E9DC;
  --card:#ffffff;
  --card-br:#e9ecf2;
  --pill:#f7efe2;

  --container:1200px;
  --gutter:20px;

  --radius-1:10px;
  --radius-2:14px;
  --radius-pill:999px;

  --shadow-1:0 10px 24px rgba(0,0,0,.06);

  /* hero */
  --lbn-hero-h:clamp(220px, 34vh, 420px);
  --lbn-hero-pad:clamp(16px, 3.2vw, 32px);

  /* breakpoints (dokümantasyon amaçlı) */
  /* md: 992px, sm: 600px */
}

/* ===== 2) Base / Reset ===== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ margin:0; padding:0; }

body{
  background:var(--beige);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

a{ color:inherit; }
a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(201,163,59,.55);
  outline-offset:2px;
  border-radius:12px;
}

h1,h3,h4{ color:var(--brand-navy); }
h2{ color:#2b2f36; }

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ===== Sticky Footer Layout (short pages fix) ===== */
html, body { height: 100%; }

body{
  min-height: 100vh;        /* modern mobil viewport */
  display: flex;
  flex-direction: column;
}

/* Senin template'lerde ana alan: <main id="content"> */
#content{
  flex: 1 0 auto;
}

/* Footer üst boşluğu content’e verelim (footer margin-top:auto olacağı için) */
#content{
  padding-bottom: 40px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== 3) Buttons (anchor-based global) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  text-decoration:none;
  font-weight:600;

  padding:12px 18px;
  border-radius:var(--radius-pill);
  border:2px solid transparent;

  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-1px); }

.btn--primary{
  background:var(--brand-gold);
  color:#1b1b1b;
}
.btn--primary:hover{
  background:#d8b454;
  color:#1b1b1b;
}

.btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.33);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.13);
  color:#fff;
}

/* ===== 4) Header / Menu ===== */
.site-header{
  position:relative;
  width:100%;
  top:0;
  left:0;
  right:0;
  z-index:60;
}

/* Home hero overlay header */
.site-header--overlay{
  position:absolute;
  inset:0 0 auto 0;
  z-index:60;
  background:linear-gradient(
    180deg,
    rgba(255,240,219,.92),
    rgba(255,240,219,.58),
    rgba(255,240,219,0)
  );
  border-bottom:0;
}

/* Sticky */
.site-header.is-sticky{
  position:fixed;
  inset:0 0 auto 0;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-1);
}

/* Fixed olunca içerik altına kaymasın: JS body padding-top set eder */
body.has-sticky-header{}

/* Top nav inner */
.nav-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:10px 16px;

  display:flex;
  align-items:center;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand__logo,
.brand__img{
  width:34px;
  height:34px;
  border-radius:8px;
}
.brand__logo{ background:var(--brand-gold); }
.brand__img{ object-fit:contain; }
.brand__name{
  font-weight:900;
  letter-spacing:.3px;
  color:var(--brand-navy);
}

/* Desktop nav */
.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.nav .menu{
  margin:0;
  padding:0;
  list-style:none;

  display:flex;
  align-items:center;
  gap:10px;
}
.nav .menu > li{ margin:0; padding:0; }
.nav .menu a{
  color:var(--brand-navy);
  text-decoration:none;

  padding:8px 12px;
  border-radius:10px;
  display:inline-flex;
}
.nav .menu a:hover{
  background:rgba(0,0,0,.03);
}

/* CTA + social */
.call{
  font-weight:600;
  color:var(--brand-navy);
  text-decoration:none;
}
.btn-res{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:10px 14px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-weight:600;

  background:var(--brand-gold);
  color:#1b1b1b;
}
.btn-res:hover{ background:#d8b454; }

.social a{
  color:#fff;
  font-size:16px;
  padding:6px;
}

/* Burger */
.burger{
  display:none;
  margin-left:8px;

  width:42px;
  height:42px;
  border-radius:10px;

  border:1px solid rgba(0,0,0,.07);
  background:#fff;
}
.burger span{
  display:block;
  width:20px;
  height:2px;
  background:#111;
  margin:5px auto;
}

/* Mobilde burger sağa yaslansın (logo ile yapışmasın) */
.burger{
  margin-left: auto;      /* sağa iter */
}

/* İstersen sağdan boşluğu biraz artır (opsiyonel) */
.nav-inner{
  padding-right: 18px;    /* mevcut 16px -> az daha nefes */
}


/* ===== 5) Mobile Drawer ===== */
.drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(86vw, 360px);

  background:#fff;
  z-index:80;

  transform:translateX(100%);
  transition:transform .28s ease;
  box-shadow:-20px 0 40px rgba(0,0,0,.15);
}
.drawer.is-open{ transform:none; }

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 16px;
  border-bottom:1px solid #eee;
}

.drawer__close{
  border:1px solid #ddd;
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}

.drawer__nav{
  display:grid;
  padding:10px 14px;
}

/* Drawer menu UL/LI */
.drawer__nav .drawer-menu{
  margin:0;
  padding:0;
  list-style:none;

  display:grid;
  gap:2px;
}

/* IMPORTANT: Drawer background white => link color should NOT be white */
.drawer__nav .drawer-menu a,
.drawer__nav > a{
  padding:12px 10px;
  border-radius:10px;

  color:var(--brand-navy);
  text-decoration:none;
  display:block;
}
.drawer__nav .drawer-menu a:hover,
.drawer__nav > a:hover{
  background:rgba(0,0,0,.03);
}

.backdrop{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);

  z-index:75;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* ===== 6) Footer ===== */
.site-footer{
  background:#2b2f36;
  color:#cfd6df;
  margin-top: auto; /* footer’ı ekran dibine iter */
}


.footer-inner{
  max-width:var(--container);
  margin-inline:auto;
  padding:32px var(--gutter);

  display:grid;
  gap:18px;
  grid-template-columns:repeat(12, 1fr);
}

.f-col{ grid-column:span 3; }

.f-col h4{
  margin:0 0 8px;
  color:#fff;
}

.f-list{
  list-style:none;
  margin:0;
  padding:0;

  display:grid;
  gap:8px;
}
.f-list a{
  color:#cfd6df;
  text-decoration:none;
}
.f-list a:hover{ text-decoration:underline; }

.f-social a{
  color:#fff;
  font-size:18px;
  padding:6px;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.13);

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;

  padding:12px var(--gutter);
  color:#bfc7d1;
}
.footer-bottom a{
  color:#f7e6a1;
  text-decoration:none;
}
.footer-bottom a:hover{ text-decoration:underline; }

/* ===== 7) Hero ===== */
.lbn-hero{
  position:relative;
  isolation:isolate;

  min-height:var(--lbn-hero-h);
  background:#0b0c10;
  overflow:hidden;
}

.lbn-hero__media{
  position:absolute;
  inset:0;
  z-index:0;

  background:center/cover no-repeat;
  transform:scale(1.02);
  filter:brightness(.78) contrast(1.05);
}

.lbn-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    radial-gradient(1200px 520px at 18% 30%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55) 70%, rgba(0,0,0,.62));
}

.lbn-hero__wrap{
  position:relative;
  z-index:2;

  max-width:var(--container);
  margin-inline:auto;
  min-height:var(--lbn-hero-h);
  padding:var(--lbn-hero-pad);

  display:grid;
  align-content:end;
  gap:12px;
}

.lbn-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.lbn-hero__crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;

  font-size:14px;
  color:rgba(255,255,255,.85);
}
.lbn-hero__crumbs a{
  color:rgba(255,255,255,.9);
  text-decoration:none;
}
.lbn-hero__crumbs a:hover{ text-decoration:underline; }
.lbn-hero__crumbs .sep{ opacity:.6; }

.lbn-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;
  border-radius:var(--radius-pill);

  font-weight:700;
  text-decoration:none;

  background:var(--brand-gold);
  color:#1b1b1b;
  white-space:nowrap;

  transition:filter .15s ease, transform .15s ease;
}
.lbn-hero__btn:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

.lbn-hero__title{
  margin:0;
  color:#fff;
  font-size:clamp(28px, 3.2vw + 10px, 54px);
  line-height:1.1;
  letter-spacing:-0.02em;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===== 8) Responsive (tek çatı) ===== */
@media (max-width: 992px){
  /* header */
  .nav{ display:none; }
  .burger{
    display:inline-grid;
    place-items:center;
  }

  /* footer */
  .f-col{ grid-column:span 6; }
}

@media (max-width: 600px){
  /* hero: daha kompakt */
  :root{
    --lbn-hero-h:clamp(200px, 30vh, 320px);
  }
  .lbn-hero__btn{ width:100%; }
  .lbn-hero__top{ width:100%; }

  /* footer */
  .f-col{ grid-column:1 / -1; }

  /* container */
  .container{ padding-inline:16px; }
}

@media (max-width: 992px){
  .burger{ margin-left:auto; }
}