/* ═══════════════════════════════════════════════════════
   POPPINS — Self-hosted (Google Fonts CDN yok)
   latin-ext: Türkçe karakterler (ğ Ğ ş Ş İ ı)
   ══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('src/fonts/poppins-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,
                 U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,
                 U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
                 U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('src/fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,
                 U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,
                 U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-display: swap;
  src: url('src/fonts/poppins-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,
                 U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,
                 U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
                 U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-display: swap;
  src: url('src/fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,
                 U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,
                 U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Tabeladan alınan renk paleti
   ══════════════════════════════════════════════════════ */
:root {
  /* Renkler */
  --dark:        #1A1A1A;  /* tabelanın koyu arka planı */
  --dark-2:      #252525;
  --dark-3:      #2E2E2E;
  --gold:        #D4960A;  /* tabeladaki altın sarısı yazı */
  --gold-hover:  #E8A80C;
  --gold-pale:   #FFF6D6;
  --cream:       #FAF6EF;  /* açık section arka planı */
  --cream-2:     #F2EAE0;
  --white:       #FFFFFF;
  --text:        #1A1A1A;
  --text-muted:  #6B5F52;
  --border:      #E5DDD4;

  /* Tipografi */
  --font: 'Poppins', system-ui, -apple-system, sans-serif;

  /* Boyutlar */
  --nav-h:    70px;
  --radius:   8px;
  --radius-lg: 16px;
  --container: 1200px;

  /* Gölgeler */
  --shadow:     0 4px 24px rgba(0,0,0,.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,.12);
  --shadow-dark:0 12px 40px rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family:var(--font);
  color:var(--text);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
}
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
ul   { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit }
em   { font-style:normal }

/* SVG ikonlar */
.svg-icon {
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-0.125em;
  fill:currentColor;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════
   TİPOGRAFİ
   ══════════════════════════════════════════════════════ */
h1,h2,h3,h4 { font-weight:600; line-height:1.2; }
h1 { font-size:clamp(2rem, 5vw, 3.6rem) }
h2 { font-size:clamp(1.6rem, 3vw, 2.4rem) }
h3 { font-size:clamp(1rem, 2vw, 1.2rem) }
p  { font-size:1rem; line-height:1.7 }

.text-white      { color:var(--white) }
.text-muted-light{ color:rgba(255,255,255,.6) }

.section-label {
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.6rem;
}

.section-header {
  text-align:center;
  margin-bottom:3rem;
}
.section-desc {
  color:var(--text-muted);
  max-width:580px;
  margin:.75rem auto 0;
  font-size:.95rem;
}

/* ═══════════════════════════════════════════════════════
   DÜĞMELER
   ══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.875rem 2rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.95rem;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  line-height:1;
}
.btn-primary {
  background:var(--gold);
  color:var(--dark);
}
.btn-primary:hover {
  background:var(--gold-hover);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(212,150,10,.4);
}
.btn-outline-gold {
  border:2px solid rgba(255,255,255,.8);
  color:var(--white);
}
.btn-outline-gold:hover {
  background:rgba(255,255,255,.12);
  border-color:var(--white);
}

/* ═══════════════════════════════════════════════════════
   LAYOUT — container, section
   ══════════════════════════════════════════════════════ */
.container {
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}
section {
  padding:5rem 0;
  background:var(--white);
}
.section-dark  { background:var(--dark) }
.section-cream { background:var(--cream) }

/* ═══════════════════════════════════════════════════════
   NAVİGASYON
   ══════════════════════════════════════════════════════ */
.nav {
  position:fixed;
  inset:0 0 auto 0;
  z-index:900;
  height:var(--nav-h);
  transition:background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
.nav.scrolled {
  background:rgba(26,26,26,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 24px rgba(0,0,0,.4);
}

.nav-inner {
  display:flex;
  align-items:center;
  height:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
  gap:2rem;
}

/* Marka */
.nav-brand {
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
}
.nav-brand-icon {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:600;
  color:var(--dark);
  flex-shrink:0;
}
.nav-brand-text {
  font-size:1rem;
  font-weight:600;
  color:var(--white);
  line-height:1.2;
}
.nav-brand-text em {
  color:var(--gold);
}

/* Linkler */
.nav-links {
  display:flex;
  align-items:center;
  gap:1.75rem;
  margin-left:auto;
}
.nav-links a {
  color:rgba(255,255,255,.82);
  font-size:.9rem;
  font-weight:500;
  transition:color .2s;
  white-space:nowrap;
}
.nav-links a:hover { color:var(--gold) }

.nav-cta {
  background:var(--gold) !important;
  color:var(--dark) !important;
  padding:.5rem 1.25rem !important;
  border-radius:var(--radius) !important;
  font-weight:600 !important;
  transition:background .2s, transform .2s !important;
}
.nav-cta:hover {
  background:var(--gold-hover) !important;
  transform:translateY(-1px);
}

/* Hamburger */
.nav-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  color:var(--white);
  font-size:1.5rem;
  padding:.5rem;
  margin-left:auto;
}

/* ═══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
#hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.hero-bg {
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-overlay {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    160deg,
    rgba(26,26,26,.80) 0%,
    rgba(26,26,26,.60) 60%,
    rgba(26,26,26,.72) 100%
  );
}

.hero-content {
  position:relative;
  z-index:2;
  padding:1.5rem;
  max-width:820px;
}

.hero-eyebrow {
  display:inline-block;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}

.hero-content h1 {
  color:var(--white);
  margin-bottom:1.25rem;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.hero-content h1 span {
  display:block;
  color:var(--gold);
}

.hero-content p {
  color:rgba(255,255,255,.85);
  font-size:1.1rem;
  margin-bottom:2.25rem;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}

.hero-actions {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* Scroll indicator */
.hero-scroll {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  color:rgba(255,255,255,.55);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  animation:heroScroll 2s ease-in-out infinite;
}
@keyframes heroScroll {
  0%,100% { transform:translateX(-50%) translateY(0) }
  50%      { transform:translateX(-50%) translateY(-6px) }
}

/* ═══════════════════════════════════════════════════════
   HAKKIMIZDA
   ══════════════════════════════════════════════════════ */
#hakkimizda { background:var(--cream) }

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.about-image {
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-dark);
  position:relative;
}
.about-image::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:var(--gold);
}
.about-image img {
  width:100%;
  height:460px;
  object-fit:cover;
  object-position:top center;
}

.about-content h2 { margin-bottom:1.25rem }
.about-content p  { color:var(--text-muted); margin-bottom:1rem }

.about-badges {
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top:1.5rem;
}
.badge {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--text);
}
.badge .svg-icon {
  color:var(--gold);
  font-size:1.1em;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════
   NEDEN BİZ (koyu section)
   ══════════════════════════════════════════════════════ */
.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.5rem;
}

.feature-card {
  padding:2rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,150,10,.18);
  border-radius:var(--radius-lg);
  text-align:center;
  transition:background .28s ease, border-color .28s ease, transform .28s ease;
}
.feature-card:hover {
  background:rgba(212,150,10,.09);
  border-color:var(--gold);
  transform:translateY(-4px);
}

.feature-icon {
  width:64px;
  height:64px;
  background:rgba(212,150,10,.14);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.25rem;
  color:var(--gold);
}

.feature-card h3 { color:var(--white); margin-bottom:.75rem }
.feature-card p  { color:rgba(255,255,255,.58); font-size:.9rem }

/* ═══════════════════════════════════════════════════════
   MENÜ
   ══════════════════════════════════════════════════════ */
.menu-tabs {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:2.5rem;
}

.menu-tab {
  padding:.6rem 1.4rem;
  border-radius:50px;
  font-size:.875rem;
  font-weight:500;
  border:2px solid var(--border);
  color:var(--text-muted);
  transition:background .2s, border-color .2s, color .2s;
  background:transparent;
}
.menu-tab:hover,
.menu-tab.active {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--dark);
  font-weight:600;
}

.menu-category {
  display:none;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
}
.menu-category.active { display:grid }

.menu-item {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem;
  background:var(--cream);
  border-radius:var(--radius);
  border-left:3px solid var(--gold);
  transition:box-shadow .22s;
}
.menu-item:hover { box-shadow:var(--shadow) }

.menu-item-info h3 {
  font-size:.98rem;
  font-weight:600;
  margin-bottom:.3rem;
  color:var(--text);
}
.menu-item-info p {
  font-size:.82rem;
  color:var(--text-muted);
  line-height:1.5;
}

.menu-badge {
  flex-shrink:0;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--gold);
  background:var(--gold-pale);
  padding:.25rem .6rem;
  border-radius:50px;
  white-space:nowrap;
  align-self:flex-start;
}

.menu-note {
  text-align:center;
  margin-top:2.5rem;
  font-size:.85rem;
  color:var(--text-muted);
  font-style:italic;
}

/* ═══════════════════════════════════════════════════════
   GALERİ
   ══════════════════════════════════════════════════════ */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}

.gallery-item {
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  aspect-ratio:4/3;
}
.gallery-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.gallery-item:hover img { transform:scale(1.05) }
.gallery-caption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:.75rem 1rem;
  background:linear-gradient(transparent, rgba(26,26,26,.75));
  color:var(--white);
  font-size:.8rem;
  font-weight:500;
}

.gallery-soon {
  border-radius:var(--radius-lg);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dark-3);
  border:1px dashed rgba(212,150,10,.25);
  color:rgba(255,255,255,.3);
  font-size:.82rem;
  letter-spacing:.05em;
}

/* ═══════════════════════════════════════════════════════
   SSS (accordion)
   ══════════════════════════════════════════════════════ */
.faq-list {
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.faq-item {
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow .22s;
}
.faq-item[open] {
  box-shadow:var(--shadow);
  border-color:var(--gold);
}
.faq-item[open] .faq-icon {
  transform:rotate(180deg);
}

.faq-q {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.25rem;
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  list-style:none;
  transition:background .2s;
}
.faq-q:hover { background:var(--gold-pale) }
.faq-q::-webkit-details-marker { display:none }
.faq-q span { flex:1 }
.faq-icon {
  flex-shrink:0;
  color:var(--gold);
  font-size:1.2em;
  transition:transform .3s ease;
}

.faq-a {
  padding:.75rem 1.25rem 1.25rem;
  border-top:1px solid var(--border);
}
.faq-a p { font-size:.92rem; color:var(--text-muted) }

/* ═══════════════════════════════════════════════════════
   İLETİŞİM (koyu section)
   ══════════════════════════════════════════════════════ */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}

.contact-info h2 { margin-bottom:.5rem }
.contact-intro {
  color:rgba(255,255,255,.65);
  margin-bottom:2rem;
  font-size:.95rem;
}

.contact-items { display:flex; flex-direction:column; gap:1.5rem }

.contact-item {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.contact-item-icon {
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:50%;
  background:rgba(212,150,10,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}
.contact-item-content { display:flex; flex-direction:column; gap:.2rem }
.contact-item-content strong {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.contact-item-content span,
.contact-item-content a {
  font-size:.95rem;
  color:rgba(255,255,255,.75);
  line-height:1.5;
}
.contact-item-content a:hover { color:var(--gold) }

.social-links {
  display:flex;
  gap:.75rem;
  margin-top:2rem;
}
.social-link {
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.8);
  transition:background .22s, color .22s, transform .22s;
}
.social-link:hover {
  background:var(--gold);
  color:var(--dark);
  border-color:var(--gold);
  transform:translateY(-3px);
}

.contact-map-box {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(212,150,10,.18);
  border-radius:var(--radius-lg);
  padding:3rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-height:320px;
}
.contact-map-box p {
  color:rgba(255,255,255,.65);
  font-size:.95rem;
  max-width:280px;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
footer {
  background:var(--dark);
  padding:4rem 0 2rem;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-logo-link {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.25rem;
}
.footer-logo-icon {
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:50%;
  background:var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  font-weight:700;
  color:var(--dark);
}
.footer-logo-name {
  display:block;
  font-size:.85rem;
  color:rgba(255,255,255,.6);
  line-height:1.2;
}
.footer-logo-sub {
  display:block;
  font-size:1rem;
  font-weight:600;
  color:var(--white);
  line-height:1.2;
}

.footer-brand p {
  font-size:.88rem;
  color:rgba(255,255,255,.5);
  line-height:1.7;
  max-width:280px;
}

.footer-social {
  display:flex;
  gap:.6rem;
  margin-top:1.5rem;
}
.footer-social a {
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.65);
  transition:background .2s, color .2s;
}
.footer-social a:hover { background:var(--gold); color:var(--dark) }

.footer-col h4 {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.25rem;
}
.footer-col ul { display:flex; flex-direction:column; gap:.65rem }
.footer-col ul li a,
.footer-col ul li span {
  font-size:.88rem;
  color:rgba(255,255,255,.5);
  transition:color .2s;
  line-height:1.4;
}
.footer-col ul li a:hover { color:var(--gold) }

.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.75rem;
  font-size:.78rem;
  color:rgba(255,255,255,.3);
}

/* ═══════════════════════════════════════════════════════
   RESPONSİF — 1024px
   ══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .about-grid   { grid-template-columns:1fr; gap:2.5rem }
  .about-image  { order:-1 }
  .about-image img { height:360px }
  .contact-grid { grid-template-columns:1fr }
  .footer-grid  { grid-template-columns:1fr 1fr }
}

/* ═══════════════════════════════════════════════════════
   RESPONSİF — 768px
   ══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  section { padding:3.5rem 0 }
  .section-header { margin-bottom:2rem }

  /* Nav mobil */
  .nav-links {
    display:none;
    position:fixed;
    top:var(--nav-h);
    left:0;
    right:0;
    background:rgba(26,26,26,.97);
    flex-direction:column;
    align-items:stretch;
    padding:1.5rem;
    gap:.25rem;
    border-top:1px solid rgba(212,150,10,.2);
  }
  .nav-links.open { display:flex }
  .nav-links a {
    padding:.75rem 1rem;
    border-radius:var(--radius);
    font-size:1rem;
  }
  .nav-links a:hover { background:rgba(212,150,10,.1) }
  .nav-cta {
    text-align:center !important;
    margin-top:.5rem;
  }
  .nav-toggle { display:flex }

  /* Hero */
  .hero-content p { font-size:1rem }
  .hero-actions { flex-direction:column; align-items:center }
  .btn { padding:.8rem 1.6rem }

  /* Features */
  .features-grid { grid-template-columns:1fr 1fr }

  /* Gallery */
  .gallery-grid { grid-template-columns:1fr }

  /* Contact */
  .contact-map-box { min-height:auto; padding:2rem 1.5rem }

  /* Footer */
  .footer-grid { grid-template-columns:1fr }
  .footer-bottom { flex-direction:column; text-align:center }
}

/* ═══════════════════════════════════════════════════════
   RESPONSİF — 480px
   ══════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .features-grid { grid-template-columns:1fr }
  .menu-category { grid-template-columns:1fr }
  .about-image img { height:260px }
  h1 { font-size:2rem }
  h2 { font-size:1.5rem }
}