/* ============================================================
   Lezzet Rehberi — Baharat Carsisi + Bakir Isigi
   Full Design System
   ============================================================ */

/* --- Custom Properties --- */
:root {
  --header-h: 64px;
  --c-kahve: #2c1810;
  --c-grafit: #3a3330;
  --c-bakir: #b8652a;
  --c-bakir-h: #d4883e;
  --c-amber: #c9922a;
  --c-krem: #faf3eb;
  --c-krem-d: #f0e4d4;
  --c-beyaz: #fffcf8;
  --c-yazi: #2e2420;
  --c-yazi-l: #5c4a3e;
  --c-border: #d9c4ad;
  --c-shadow: rgba(44,24,16,.12);

  --ff-serif: 'Georgia','Palatino Linotype','Times New Roman',serif;
  --ff-sans: 'Segoe UI','Helvetica Neue',Arial,sans-serif;

  --w-max: 1200px;
  --w-narrow: 820px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--ff-sans);font-size:1rem;line-height:1.72;color:var(--c-yazi);background:var(--c-krem);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--header-h)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-bakir);text-decoration:none;transition:color .2s}
a:hover{color:var(--c-bakir-h)}
a:focus-visible{outline:2px solid var(--c-bakir);outline-offset:2px;border-radius:var(--r-sm)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
button:focus-visible{outline:2px solid var(--c-bakir);outline-offset:2px;border-radius:var(--r-sm)}
input,textarea,select{font-family:inherit;font-size:inherit}

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

/* --- Skip Link --- */
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--c-kahve);color:var(--c-krem);padding:.5rem 1rem;border-radius:var(--r-sm);z-index:9999;font-size:.875rem}
.skip-link:focus{top:1rem}

/* --- Textures --- */
.texture-spice{
  background:
    radial-gradient(ellipse at 20% 50%,rgba(184,101,42,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(201,146,42,.05) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(44,24,16,.03) 0%,transparent 50%),
    var(--c-krem);
}
.texture-copper{
  background:
    linear-gradient(135deg,rgba(184,101,42,.08) 0%,transparent 40%),
    linear-gradient(315deg,rgba(201,146,42,.06) 0%,transparent 40%),
    var(--c-krem);
}

/* --- Container --- */
.container{width:100%;max-width:var(--w-max);margin:0 auto;padding:0 1.5rem}
.content-narrow{max-width:var(--w-narrow);margin:0 auto}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  background:var(--c-kahve);
  color:var(--c-krem);
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--w-max);
  margin:0 auto;
  padding:.85rem 1.5rem;
}

/* Logo */
.site-logo{
  font-family:var(--ff-serif);
  font-size:1.4rem;
  font-weight:700;
  color:var(--c-krem);
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:.35rem;
  text-decoration:none;
  white-space:nowrap;
}
.site-logo:hover{color:var(--c-bakir-h)}
.logo-accent{color:var(--c-bakir-h)}

/* Main Nav */
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;gap:2px;align-items:center}
.nav-list>li>a{
  color:rgba(250,243,235,.85);
  padding:.55rem .9rem;
  border-radius:var(--r-sm);
  font-size:.875rem;
  transition:background .2s,color .2s;
  white-space:nowrap;
  display:block;
}
.nav-list>li>a:hover,
.nav-list>li>a.active{
  background:rgba(184,101,42,.22);
  color:var(--c-bakir-h);
}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{
  color:rgba(250,243,235,.85);
  padding:.55rem .9rem;
  border-radius:var(--r-sm);
  font-size:.875rem;
  display:flex;
  align-items:center;
  gap:.3rem;
  transition:background .2s,color .2s;
  white-space:nowrap;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active{background:rgba(184,101,42,.22);color:var(--c-bakir-h)}
.nav-dropdown-toggle svg{width:12px;height:12px;transition:transform .2s}
.nav-dropdown:hover .nav-dropdown-toggle svg{transform:rotate(180deg)}

.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  background:var(--c-beyaz);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:0 8px 28px var(--c-shadow);
  min-width:220px;
  padding:.4rem 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility .2s;
  z-index:100;
}
.nav-dropdown:hover .nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
/* Прозрачный мост над меню — перекрывает 4px зазор, не даёт :hover обрываться */
.nav-dropdown-menu::before{
  content:'';
  position:absolute;
  top:-8px;left:0;right:0;height:8px;
}
.nav-dropdown-menu a{
  display:block;
  padding:.5rem 1rem;
  color:var(--c-yazi);
  font-size:.875rem;
  transition:background .15s;
}
.nav-dropdown-menu a:hover{background:var(--c-krem);color:var(--c-bakir)}
.nav-dropdown-menu a.active{color:var(--c-bakir);font-weight:600}

/* Hamburger */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:.5rem;
  z-index:1001;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--c-krem);
  border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Scroll lock when mobile nav is open */
body.nav-open{overflow:hidden}

@media(max-width:960px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;top:0;right:-100%;width:300px;height:100vh;
    background:var(--c-kahve);
    flex-direction:column;align-items:stretch;
    padding:5rem 1.5rem 1.5rem;
    transition:right .3s;
    box-shadow:-4px 0 20px rgba(0,0,0,.3);
    overflow-y:auto;
  }
  .main-nav.open{right:0}
  .nav-list{flex-direction:column;gap:0;width:100%}
  .nav-list>li>a{padding:.85rem 1rem;border-radius:0;font-size:1rem;white-space:normal}
  .nav-dropdown-toggle{padding:.85rem 1rem;font-size:1rem;width:100%;justify-content:space-between;white-space:normal}
  /* Collapsed by default on mobile */
  .nav-dropdown-menu{
    position:static;transform:none;
    box-shadow:none;border:none;background:rgba(255,255,255,.06);
    border-radius:0;padding:0;min-width:0;
    max-height:0;overflow:hidden;
    opacity:0;visibility:hidden;
    transition:max-height .25s ease,opacity .2s,visibility .2s;
  }
  /* Expanded when .open is toggled by JS */
  .nav-dropdown.open .nav-dropdown-menu{
    max-height:400px;
    opacity:1;visibility:visible;
  }
  /* Arrow rotation on mobile via .open class */
  .nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg)}
  .nav-dropdown-menu a{color:rgba(250,243,235,.75);padding:.65rem 1rem .65rem 2.2rem;font-size:.9rem}
  .nav-dropdown-menu a:hover{background:rgba(184,101,42,.15);color:var(--c-bakir-h)}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:5rem 1.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 85%,rgba(184,101,42,.14) 0%,transparent 45%),
    radial-gradient(circle at 85% 15%,rgba(201,146,42,.11) 0%,transparent 45%);
  pointer-events:none;
}
.hero h1{
  font-family:var(--ff-serif);
  font-size:clamp(2rem,5vw,3.2rem);
  color:var(--c-kahve);
  margin-bottom:.75rem;
  line-height:1.18;
  position:relative;
}
.hero-subtitle,.hero p.hero-subtitle{
  font-size:1.15rem;
  color:var(--c-yazi-l);
  max-width:640px;
  margin:0 auto 2rem;
  line-height:1.65;
  position:relative;
}
.hero-cta{
  display:inline-block;
  background:var(--c-bakir);
  color:var(--c-beyaz);
  padding:.85rem 2.5rem;
  border-radius:var(--r-md);
  font-weight:600;
  font-size:1.05rem;
  transition:background .2s,transform .15s,box-shadow .2s;
  position:relative;
  box-shadow:0 4px 14px rgba(184,101,42,.3);
}
.hero-cta:hover{
  background:var(--c-bakir-h);
  color:var(--c-beyaz);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(184,101,42,.4);
}

@media(max-width:600px){
  .hero{padding:3rem 1rem}
}

/* ============================================================
   ORNAMENT DIVIDER
   ============================================================ */
.ornament-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1.5rem 0;
}
.ornament-divider::before,
.ornament-divider::after{
  content:'';height:1px;flex:1;max-width:120px;
  background:linear-gradient(to right,transparent,var(--c-border),transparent);
}
.ornament-icon{width:24px;height:24px;color:var(--c-bakir)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:4rem 1.5rem}
.section-title{
  font-family:var(--ff-serif);
  font-size:clamp(1.5rem,3vw,1.9rem);
  color:var(--c-kahve);
  margin-bottom:1.5rem;
  text-align:center;
  position:relative;
}
.section-title::after{
  content:'';display:block;
  width:60px;height:3px;
  background:linear-gradient(to right,var(--c-bakir),var(--c-amber));
  margin:.5rem auto 0;
  border-radius:2px;
}
.section-intro{
  text-align:center;
  color:var(--c-yazi-l);
  max-width:640px;
  margin:0 auto 2rem;
  font-size:1.05rem;
  line-height:1.65;
}

/* ============================================================
   CARDS
   ============================================================ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
  max-width:var(--w-max);
  margin:0 auto;
}
.card{
  background:var(--c-beyaz);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 2px 8px var(--c-shadow);
  transition:box-shadow .25s,transform .25s;
}
.card:hover{
  box-shadow:0 8px 28px var(--c-shadow);
  transform:translateY(-3px);
}

/* Card image placeholders */
.card-image{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--ff-serif);
  font-size:.8rem;
  color:var(--c-yazi-l);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.card-image-bakir{
  background:
    radial-gradient(circle at 30% 70%,rgba(184,101,42,.2) 0%,transparent 50%),
    radial-gradient(circle at 70% 30%,rgba(201,146,42,.16) 0%,transparent 50%),
    linear-gradient(160deg,#e8d5c0,#d4b896);
}
.card-image-baharat{
  background:
    radial-gradient(circle at 20% 40%,rgba(139,69,19,.16) 0%,transparent 40%),
    radial-gradient(circle at 80% 60%,rgba(184,101,42,.13) 0%,transparent 40%),
    linear-gradient(135deg,#c9a882,#b8956e);
}
.card-image-pazar{
  background:
    radial-gradient(circle at 50% 50%,rgba(184,101,42,.12) 0%,transparent 50%),
    linear-gradient(180deg,#d9c4ad,#c4a882);
}

.card-body{padding:1.25rem 1.5rem}
.card-body h3{
  font-family:var(--ff-serif);
  font-size:1.15rem;
  color:var(--c-kahve);
  margin-bottom:.4rem;
  line-height:1.3;
}
.card-body p{
  font-size:.9rem;
  color:var(--c-yazi-l);
  margin-bottom:.85rem;
  line-height:1.6;
}
.card-link{
  font-size:.875rem;
  font-weight:600;
  color:var(--c-bakir);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.card-link::after{content:'\2192';transition:transform .2s}
.card-link:hover::after{transform:translateX(4px)}

/* ============================================================
   PLACEHOLDER PANELS
   ============================================================ */
.placeholder-panel{
  border-radius:var(--r-md);
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  margin:1.5rem 0;
}
.placeholder-panel span{
  font-family:var(--ff-serif);
  font-size:.8rem;
  color:var(--c-yazi-l);
  opacity:.55;
  text-transform:uppercase;
  letter-spacing:.1em;
}

/* ============================================================
   SCENARIO CARDS
   ============================================================ */
.scenario-card{
  background:var(--c-beyaz);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  padding:1.5rem;
  box-shadow:0 2px 8px var(--c-shadow);
  transition:box-shadow .25s,transform .25s;
}
.scenario-card:hover{
  box-shadow:0 6px 20px var(--c-shadow);
  transform:translateY(-2px);
}
.scenario-card h3{
  font-family:var(--ff-serif);
  color:var(--c-kahve);
  margin-bottom:.5rem;
  font-size:1.1rem;
}
.scenario-card p{
  font-size:.9rem;
  color:var(--c-yazi-l);
  line-height:1.6;
  margin-bottom:.6rem;
}
.scenario-tag{
  display:inline-block;
  background:rgba(184,101,42,.1);
  color:var(--c-bakir);
  font-size:.72rem;
  padding:2px .5rem;
  border-radius:var(--r-sm);
  font-weight:600;
  margin-right:.3rem;
  margin-bottom:.3rem;
}

/* ============================================================
   FILTERS
   ============================================================ */
.filters-bar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  padding:1.5rem 0 2rem;
  justify-content:center;
}
.filter-group{display:flex;flex-direction:column;gap:.3rem}
.filter-group label{
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c-yazi-l);
}
.filter-group select{
  padding:.5rem .85rem;
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  background:var(--c-beyaz);
  color:var(--c-yazi);
  min-width:180px;
}
.filter-group select:focus{outline:2px solid var(--c-bakir);outline-offset:1px}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.article-header{
  padding:3.5rem 1.5rem 2rem;
  text-align:center;
}
.article-header .container{max-width:var(--w-max);margin:0 auto}
.article-header h1{
  font-family:var(--ff-serif);
  font-size:clamp(1.75rem,4vw,2.5rem);
  color:var(--c-kahve);
  margin-bottom:.75rem;
  line-height:1.22;
}
.article-header .lead{
  font-size:1.08rem;
  color:var(--c-yazi-l);
  max-width:640px;
  margin:0 auto;
  line-height:1.65;
}
.article-body{padding:0 1.5rem 4rem}
.article-body h2{
  font-family:var(--ff-serif);
  font-size:1.45rem;
  color:var(--c-kahve);
  margin:2.5rem 0 1rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--c-border);
}
.article-body h3{
  font-family:var(--ff-serif);
  font-size:1.15rem;
  color:var(--c-grafit);
  margin:1.8rem 0 .5rem;
}
.article-body p{margin-bottom:1rem;line-height:1.8}
.article-body ul:not(.related-links ul),.article-body ol{margin-bottom:1rem;padding-left:1.5rem}
.article-body ul:not(.related-links ul){list-style:disc}
.article-body ol{list-style:decimal}
.article-body li:not(.related-links li){margin-bottom:.4rem;line-height:1.7}
/* related-links внутри article-body — сбрасываем наследованные стили */
.article-body .related-links ul{list-style:none;padding-left:0;margin-bottom:0}
.article-body .related-links li{margin-bottom:0;line-height:inherit}

/* Float images */
.img-float-right{
  float:right;
  max-width:340px;
  width:100%;
  height:auto;
  margin:0 0 1rem 1.5rem;
  border-radius:var(--r-md);
  box-shadow:0 4px 16px var(--c-shadow);
}
.img-float-left{
  float:left;
  max-width:340px;
  width:100%;
  height:auto;
  margin:0 1.5rem 1rem 0;
  border-radius:var(--r-md);
  box-shadow:0 4px 16px var(--c-shadow);
}
@media(max-width:600px){
  .img-float-right,.img-float-left{
    float:none;
    max-width:100%;
    margin:0 0 1rem 0;
  }
}

/* ============================================================
   INFO BOX
   ============================================================ */
.info-box{
  background:var(--c-beyaz);
  border-left:4px solid var(--c-bakir);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1.25rem 1.5rem;
  margin:1.8rem 0;
  box-shadow:0 2px 8px var(--c-shadow);
}
.info-box p{margin-bottom:.5rem}
.info-box p:last-child{margin-bottom:0}

/* ============================================================
   RELATED LINKS
   ============================================================ */
.related-links{
  background:linear-gradient(135deg,var(--c-krem-d) 0%,rgba(240,228,212,.55) 100%);
  border-left:4px solid var(--c-bakir);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:1.75rem 2rem;
  margin-top:2.5rem;
}
/* когда related-links — прямой потомок main (как в iletisim.html) */
section.related-links{
  max-width:var(--w-narrow);
  margin:0 auto 3rem;
  padding-left:1.75rem;
  padding-right:1.75rem;
}
.related-links h2,.related-links h3{
  font-family:var(--ff-serif);
  font-size:1.1rem;
  color:var(--c-kahve);
  margin-bottom:1.1rem;
  font-weight:700;
}
.related-links ul{padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.related-links li{margin:0;padding:0;position:static}
.related-links li::before{display:none}
.related-links a{
  display:inline-flex;
  align-items:center;
  padding:.45rem .95rem;
  background:var(--c-beyaz);
  border:1px solid var(--c-border);
  border-radius:2rem;
  color:var(--c-bakir);
  font-size:.875rem;
  font-weight:500;
  word-break:break-word;
  overflow-wrap:break-word;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.related-links a:hover{
  background:var(--c-bakir);
  border-color:var(--c-bakir);
  color:var(--c-beyaz);
  box-shadow:0 3px 10px rgba(184,101,42,.25);
  text-decoration:none;
}

/* ============================================================
   CONTACT FORM CARD
   ============================================================ */
.contact-form-section{
  background:var(--c-beyaz);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:0 6px 28px var(--c-shadow);
  padding:2.5rem 2rem;
  max-width:var(--w-narrow);
  margin:0 auto 2.5rem;
}
.contact-form-section h2{
  font-family:var(--ff-serif);
  color:var(--c-kahve);
  margin-bottom:.4rem;
}
.contact-form-section>p{
  color:var(--c-yazi-l);
  margin-bottom:1.5rem;
  font-size:.9375rem;
}
@media(max-width:600px){
  .contact-form-section{padding:1.5rem 1.25rem}
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{
  padding:.75rem 1.5rem;
  max-width:var(--w-max);
  margin:0 auto;
  font-size:.85rem;
  color:var(--c-yazi-l);
}
.breadcrumb a{color:var(--c-bakir)}
.breadcrumb span{margin:0 .3rem;opacity:.5}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list{max-width:var(--w-narrow);margin:0 auto}
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-question{
  width:100%;text-align:left;
  padding:1.2rem 0;
  font-size:1.05rem;
  font-weight:600;
  color:var(--c-kahve);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-family:var(--ff-serif);
  transition:color .2s;
}
.faq-question:hover{color:var(--c-bakir)}
.faq-question svg{
  width:20px;height:20px;flex-shrink:0;
  transition:transform .2s;
  color:var(--c-bakir);
}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s}
.faq-answer-inner{
  padding:0 0 1.2rem;
  color:var(--c-yazi-l);
  line-height:1.7;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem;
  margin-bottom:2rem;
}
.contact-card{
  background:var(--c-beyaz);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:1.25rem 1.25rem 1.25rem 1rem;
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  transition:box-shadow .2s,border-color .2s;
}
.contact-card:hover{
  border-color:var(--c-bakir);
  box-shadow:0 4px 16px var(--c-shadow);
}
.contact-card-icon{
  width:40px;height:40px;
  background:rgba(184,101,42,.1);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--c-bakir);
}
.contact-card-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.contact-card>div{min-width:0} /* не даём тексту выходить за рамку */
.contact-card h4{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--c-yazi-l);
  margin-bottom:.3rem;
  font-weight:600;
}
.contact-card p,.contact-card address{
  color:var(--c-yazi);
  font-size:.9375rem;
  line-height:1.55;
  font-style:normal;
  word-break:break-word;
  overflow-wrap:break-word;
}
.contact-card a{
  color:var(--c-bakir);
  font-weight:500;
  text-decoration:none;
  transition:color .15s;
  word-break:break-all;
}
.contact-card a:hover{color:var(--c-bakir-h);text-decoration:underline}
@media(max-width:600px){
  .contact-info-grid{grid-template-columns:1fr}
}

.form-group{margin-bottom:1.25rem}
.form-group label{
  display:block;
  font-weight:600;
  margin-bottom:.4rem;
  color:var(--c-kahve);
  font-size:.875rem;
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:.75rem 1rem;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  background:var(--c-beyaz);
  color:var(--c-yazi);
  transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--c-bakir);
  box-shadow:0 0 0 3px rgba(184,101,42,.15);
}
.form-group textarea{min-height:140px;resize:vertical}
.form-group .error-text{
  color:#b33;font-size:.75rem;margin-top:.25rem;display:none;
}
.form-group.has-error input,
.form-group.has-error textarea{border-color:#b33}
.form-group.has-error .error-text{display:block}

.form-consent,.form-checkbox{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-bottom:1.25rem;
}
.form-consent input[type="checkbox"],
.form-checkbox input[type="checkbox"]{
  margin-top:4px;accent-color:var(--c-bakir);
  width:18px;height:18px;flex-shrink:0;
}
.form-consent label,
.form-checkbox label{
  font-size:.875rem;color:var(--c-yazi-l);line-height:1.5;
}

.btn-submit{
  background:var(--c-bakir);
  color:var(--c-beyaz);
  padding:.75rem 2rem;
  border:none;
  border-radius:var(--r-md);
  font-weight:600;
  font-size:1rem;
  transition:background .2s,box-shadow .2s;
  box-shadow:0 4px 12px rgba(184,101,42,.25);
}
.btn-submit:hover{background:var(--c-bakir-h);box-shadow:0 6px 18px rgba(184,101,42,.35)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}

.form-message{
  margin-top:1rem;
  padding:1rem;
  border-radius:var(--r-md);
  font-size:.875rem;
  display:none;
}
.form-message.success{display:block;background:#e8f5e8;color:#2d6a2d;border:1px solid #b8dab8}
.form-message.error{display:block;background:#fde8e8;color:#8b2020;border:1px solid #e8b8b8}

.form-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  padding:3rem 1.5rem 2rem;
  text-align:center;
  background:
    radial-gradient(ellipse at 30% 70%,rgba(184,101,42,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 30%,rgba(201,146,42,.05) 0%,transparent 50%),
    var(--c-krem);
}
.page-hero h1{
  font-family:var(--ff-serif);
  font-size:clamp(1.75rem,4vw,2.5rem);
  color:var(--c-kahve);
  margin-bottom:.5rem;
  line-height:1.22;
}
.page-hero p{
  font-size:1.05rem;
  color:var(--c-yazi-l);
  max-width:600px;
  margin:0 auto;
  line-height:1.6;
}

/* Content section wrapper (inner pages) */
.content-section{
  padding:2rem 1.5rem 4rem;
  max-width:var(--w-narrow);
  margin:0 auto;
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-content{
  padding:2rem 1.5rem 4rem;
  max-width:var(--w-narrow);
  margin:0 auto;
}
.legal-content h1{
  font-family:var(--ff-serif);
  font-size:clamp(1.5rem,3vw,2rem);
  color:var(--c-kahve);
  margin-bottom:1.5rem;
}
.legal-content h2{
  font-family:var(--ff-serif);
  font-size:1.2rem;
  color:var(--c-grafit);
  margin:1.8rem 0 .75rem;
}
.legal-content h3{
  font-family:var(--ff-serif);
  font-size:1.05rem;
  color:var(--c-grafit);
  margin:1.4rem 0 .5rem;
}
.legal-content p,.legal-content li{
  color:var(--c-yazi-l);line-height:1.8;margin-bottom:.75rem;
}
.legal-content ul{list-style:disc;padding-left:1.5rem}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */
.sitemap-columns{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:2rem;
  padding:2rem 1.5rem 4rem;
  max-width:var(--w-max);
  margin:0 auto;
}
.sitemap-columns h3,.sitemap-col h3{
  font-family:var(--ff-serif);
  color:var(--c-kahve);
  margin-bottom:.75rem;
  font-size:1.1rem;
}
.sitemap-columns ul,.sitemap-col ul{padding-left:1rem}
.sitemap-columns li,.sitemap-col li{margin-bottom:.4rem}
.sitemap-columns a,.sitemap-col a{font-size:.9rem}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--c-kahve);
  color:rgba(250,243,235,.8);
  padding:3.5rem 1.5rem 1.5rem;
}
.footer-inner{
  max-width:var(--w-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2rem;
}
.footer-col h4{
  font-family:var(--ff-serif);
  font-size:1.05rem;
  color:var(--c-krem);
  margin-bottom:.85rem;
}
.footer-col a{
  display:block;
  color:rgba(250,243,235,.7);
  font-size:.875rem;
  padding:.25rem 0;
  transition:color .2s;
}
.footer-col a:hover{color:var(--c-bakir-h)}
.footer-col p{font-size:.875rem;line-height:1.6;opacity:.7}

.footer-bottom{
  max-width:var(--w-max);
  margin:2rem auto 0;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  font-size:.75rem;
  opacity:.5;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--c-kahve);
  color:var(--c-krem);
  padding:1.5rem;
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
  z-index:9998;
  transform:translateY(100%);
  transition:transform .3s;
}
.cookie-banner.visible{transform:translateY(0)}
.cookie-inner{
  max-width:var(--w-max);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
}
.cookie-text{flex:1;min-width:260px;font-size:.875rem;line-height:1.6}
.cookie-text a{color:var(--c-bakir-h)}
.cookie-buttons{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-btn{
  padding:.5rem 1.25rem;
  border-radius:var(--r-sm);
  font-size:.85rem;
  font-weight:600;
  transition:background .2s,color .2s;
  border:1px solid transparent;
  white-space:nowrap;
}
.cookie-btn-accept{background:var(--c-bakir);color:var(--c-beyaz)}
.cookie-btn-accept:hover{background:var(--c-bakir-h)}
.cookie-btn-reject{background:transparent;color:var(--c-krem);border-color:rgba(250,243,235,.4)}
.cookie-btn-reject:hover{background:rgba(255,255,255,.1)}
.cookie-btn-settings{background:transparent;color:rgba(250,243,235,.75);border-color:rgba(255,255,255,.15)}
.cookie-btn-settings:hover{background:rgba(255,255,255,.08)}

.cookie-settings-panel{
  display:none;
  width:100%;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.cookie-settings-panel.visible{display:block}
.cookie-category{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem 0;
}
.cookie-category-info h4{font-size:.875rem;margin-bottom:2px}
.cookie-category-info p{font-size:.75rem;opacity:.65}
.cookie-toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.cookie-toggle input{opacity:0;width:0;height:0;position:absolute}
.cookie-toggle-slider{
  position:absolute;inset:0;
  background:rgba(255,255,255,.2);
  border-radius:12px;
  cursor:pointer;
  transition:background .2s;
}
.cookie-toggle-slider::before{
  content:'';
  position:absolute;left:3px;top:3px;
  width:18px;height:18px;
  background:var(--c-krem);
  border-radius:50%;
  transition:transform .2s;
}
.cookie-toggle input:checked+.cookie-toggle-slider{background:var(--c-bakir)}
.cookie-toggle input:checked+.cookie-toggle-slider::before{transform:translateX(20px)}
.cookie-toggle input:disabled+.cookie-toggle-slider{opacity:.5;cursor:not-allowed}
.cookie-save-btn{
  margin-top:.75rem;
  padding:.5rem 1.5rem;
  background:var(--c-bakir);
  color:var(--c-beyaz);
  border-radius:var(--r-sm);
  font-size:.85rem;
  font-weight:600;
}
.cookie-save-btn:hover{background:var(--c-bakir-h)}

/* ============================================================
   UTILITY
   ============================================================ */
.text-center{text-align:center}
.mt-lg{margin-top:1.25rem}
.mt-xl{margin-top:2rem}
.mb-lg{margin-bottom:1.25rem}
.mb-xl{margin-bottom:2rem}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .site-header,.site-footer,.cookie-banner,.nav-toggle{display:none}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}
