/* ================================================================
   URUN FOTOGRAFI ATOLYESI
   Premium editorial / clean studio aesthetic
   ================================================================ */

/* -------- RESET -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* -------- TOKENS -------- */
:root{
  /* palette */
  --c-bg:#f8f7f5;
  --c-bg2:#f1f0ec;
  --c-surface:#ffffff;
  --c-surface2:#fafaf8;
  --c-border:#e4e1db;
  --c-border-lt:#edeae5;
  --c-text:#262420;
  --c-text2:#5c5850;
  --c-text3:#928e85;
  --c-accent:#4a6e5d;
  --c-accent-h:#3b5a4b;
  --c-accent-lt:#e9f0ec;
  --c-accent-super:#f4f8f6;
  --c-danger:#b44;

  /* shadows */
  --sh-xs:0 1px 2px rgba(38,36,32,.05);
  --sh-sm:0 2px 8px rgba(38,36,32,.06);
  --sh-md:0 8px 30px rgba(38,36,32,.08);
  --sh-lg:0 16px 50px rgba(38,36,32,.10);
  --sh-up:0 -4px 24px rgba(38,36,32,.06);

  /* type */
  --f-sans:"Inter","Segoe UI",system-ui,sans-serif;
  --f-serif:"Lora","Georgia",serif;

  /* layout */
  --max-w:1120px;
  --hdr-h:56px;
  --r:5px;--r-lg:10px;--r-xl:14px;
  --ease:.22s cubic-bezier(.4,0,.2,1);
}

/* dark */
@media(prefers-color-scheme:dark){:root{
  --c-bg:#17171a;--c-bg2:#1e1e21;--c-surface:#222226;--c-surface2:#2a2a2e;
  --c-border:#3a3a3e;--c-border-lt:#303034;
  --c-text:#e4e2de;--c-text2:#a09d96;--c-text3:#706d66;
  --c-accent:#7daa94;--c-accent-h:#93bda8;--c-accent-lt:#252f2a;--c-accent-super:#1e2622;
  --sh-xs:0 1px 2px rgba(0,0,0,.2);--sh-sm:0 2px 8px rgba(0,0,0,.25);
  --sh-md:0 8px 30px rgba(0,0,0,.3);--sh-lg:0 16px 50px rgba(0,0,0,.35);
  --sh-up:0 -4px 24px rgba(0,0,0,.25);
}}

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

/* -------- BASE -------- */
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--f-sans);background:var(--c-bg);color:var(--c-text);
  line-height:1.7;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;font-size:.9375rem;
}

/* -------- TYPOGRAPHY -------- */
h1,h2,h3,h4,h5,h6{font-family:var(--f-serif);font-weight:600;line-height:1.25;color:var(--c-text)}
h1{font-size:clamp(1.6rem,3.5vw,2.2rem);letter-spacing:-.025em;margin-bottom:.75rem}
h2{font-size:clamp(1.25rem,2.5vw,1.55rem);letter-spacing:-.015em;margin-bottom:.65rem}
h3{font-size:clamp(1.05rem,2vw,1.2rem);margin-bottom:.5rem}
h4{font-size:1rem;margin-bottom:.4rem}
p{margin-bottom:.9rem}
a{color:var(--c-accent);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--c-accent-h)}
a:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:2px}
strong{font-weight:600}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.4rem;margin-bottom:.9rem}
li{margin-bottom:.25rem}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--c-border-lt);margin:2rem 0}

/* -------- LAYOUT -------- */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 1.25rem}
@media(min-width:768px){.container{padding:0 2rem}}
main{flex:1}

/* -------- SKIP -------- */
.skip-link{
  position:absolute;top:-100%;left:1rem;background:var(--c-accent);color:#fff;
  padding:.45rem .9rem;border-radius:var(--r);z-index:10000;font-size:.8125rem;
}
.skip-link:focus{top:.5rem}

/* -------- BUTTONS -------- */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 1.4rem;font-size:.85rem;font-weight:500;font-family:var(--f-sans);
  border-radius:var(--r);cursor:pointer;border:1px solid transparent;
  text-decoration:none;transition:all var(--ease);line-height:1.4;
}
.btn-primary{background:var(--c-accent);color:#fff;border-color:var(--c-accent);box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--c-accent-h);border-color:var(--c-accent-h);color:#fff;box-shadow:var(--sh-sm);transform:translateY(-1px)}
.btn-secondary{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border);box-shadow:var(--sh-xs)}
.btn-secondary:hover{border-color:var(--c-accent);color:var(--c-accent);box-shadow:var(--sh-sm)}

/* ================================================================
   HEADER + NAVIGATION
   ================================================================ */
html.menu-open{overflow:hidden}

.site-header{
  position:sticky;top:0;z-index:500;
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface);
}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--max-w);margin:0 auto;
  padding:0 1.25rem;height:var(--hdr-h);
}
@media(min-width:768px){.header-inner{padding:0 2rem}}

.site-logo{
  font-family:var(--f-serif);font-size:1rem;font-weight:700;
  color:var(--c-text);text-decoration:none;white-space:nowrap;
  letter-spacing:-.01em;flex-shrink:0;
}
.site-logo:hover{color:var(--c-accent)}
.site-logo span{font-weight:400;color:var(--c-text3);margin-left:.1em}

/* ---- Hamburger / X toggle ---- */
.nav-toggle{
  display:none;background:none;border:1px solid var(--c-border);
  border-radius:var(--r);cursor:pointer;padding:0;color:var(--c-text);
  width:34px;height:34px;align-items:center;justify-content:center;
  transition:border-color var(--ease),background var(--ease);
  flex-shrink:0;position:relative;z-index:600;
}
.nav-toggle:hover{border-color:var(--c-accent);background:var(--c-accent-super)}
.nav-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;transition:opacity .15s}
.nav-toggle.is-active svg{opacity:0}
.nav-toggle::before,.nav-toggle::after{
  content:"";position:absolute;width:16px;height:2px;background:currentColor;
  border-radius:1px;left:50%;top:50%;opacity:0;
  transition:transform .2s ease,opacity .15s;
}
.nav-toggle.is-active::before{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle.is-active::after{opacity:1;transform:translate(-50%,-50%) rotate(-45deg)}

/* ---- Desktop nav ---- */
.nav-main{display:flex;align-items:center}
.nav-main>ul{display:flex;list-style:none;gap:1px;padding:0;margin:0;align-items:center}
.nav-main>ul>li>a{
  display:block;padding:.35rem .55rem;font-size:.8rem;font-weight:500;
  color:var(--c-text2);border-radius:var(--r);white-space:nowrap;
  transition:background var(--ease),color var(--ease);
}
.nav-main>ul>li>a:hover,
.nav-main>ul>li>a[aria-current="page"]{background:var(--c-accent-lt);color:var(--c-accent)}

/* ---- Desktop dropdown ---- */
.nav-dropdown{position:relative}
.nav-dropdown-btn{
  display:inline-flex;align-items:center;gap:.2rem;background:none;border:none;
  cursor:pointer;padding:.35rem .55rem;font-size:.8rem;font-weight:500;
  font-family:var(--f-sans);color:var(--c-text2);border-radius:var(--r);
  white-space:nowrap;transition:background var(--ease),color var(--ease);
}
.nav-dropdown-btn:hover,
.nav-dropdown-btn[aria-current="true"]{background:var(--c-accent-lt);color:var(--c-accent)}
.nav-dropdown-btn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform var(--ease)}
.nav-dropdown[aria-expanded="true"] .nav-dropdown-btn svg{transform:rotate(180deg)}
.nav-dropdown[aria-expanded="true"] .nav-dropdown-btn{background:var(--c-accent-lt);color:var(--c-accent)}

.nav-dropdown-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:auto;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);width:260px;max-width:calc(100vw - 2rem);padding:.35rem;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:300;max-height:70vh;overflow-y:auto;
}
.nav-dropdown-menu::-webkit-scrollbar{width:4px}
.nav-dropdown-menu::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
.nav-dropdown[aria-expanded="true"] .nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-dropdown-menu a{
  display:block;padding:.38rem .6rem;font-size:.78rem;
  border-radius:var(--r);color:var(--c-text2);
  transition:background var(--ease),color var(--ease);
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"]{background:var(--c-accent-lt);color:var(--c-accent)}

/* ---- Mobile nav (<=900px) ---- */
@media(max-width:900px){
  .nav-toggle{display:flex}

  /* Full-screen overlay below header */
  .nav-main{
    position:fixed;
    top:var(--hdr-h);left:0;right:0;bottom:0;
    background:var(--c-surface);
    overflow-y:auto;overflow-x:hidden;
    z-index:550;
    visibility:hidden;opacity:0;pointer-events:none;
    transition:visibility .2s,opacity .2s ease;
    display:flex;flex-direction:column;align-items:center;
    padding:0;
  }
  .nav-main.is-open{visibility:visible;opacity:1;pointer-events:auto}

  /* Reset UL */
  .nav-main>ul{
    flex-direction:column;align-items:stretch;
    gap:0;padding:0;margin:0;list-style:none;width:100%;
  }

  /* Menu items */
  .nav-main>ul>li{
    border-bottom:1px solid var(--c-border-lt);
  }
  .nav-main>ul>li:last-child{border-bottom:none}

  .nav-main>ul>li>a{
    display:block;padding:.95rem 1rem;
    font-size:1rem;font-weight:500;
    text-align:center;
    border-radius:0;background:none;white-space:normal;
  }
  .nav-main>ul>li>a:hover{color:var(--c-accent);background:var(--c-accent-super)}
  .nav-main>ul>li>a[aria-current="page"]{color:var(--c-accent);font-weight:600}

  /* Dropdown button */
  .nav-dropdown{width:100%}
  .nav-dropdown-btn{
    display:flex;width:100%;
    padding:.95rem 1rem;font-size:1rem;font-weight:500;
    justify-content:center;gap:.3rem;
    border-radius:0;background:none;border-bottom:none;
  }
  .nav-dropdown-btn:hover{color:var(--c-accent);background:var(--c-accent-super)}
  .nav-dropdown-btn[aria-current="true"]{color:var(--c-accent);font-weight:600;background:none}

  /* Dropdown submenu */
  .nav-dropdown-menu{
    position:static;width:100%;max-width:none;
    box-shadow:none;border:none;border-radius:0;
    background:var(--c-bg2);
    margin:0;padding:.3rem 0;
    opacity:1;visibility:visible;transform:none;
    display:none;max-height:none;
  }
  .nav-dropdown[aria-expanded="true"] .nav-dropdown-menu{display:block}

  .nav-dropdown-menu a{
    display:block;padding:.7rem 1rem;
    font-size:.9rem;text-align:center;
    border-radius:0;background:none;
    border-bottom:1px solid var(--c-border-lt);
  }
  .nav-dropdown-menu a:last-child{border-bottom:none}
  .nav-dropdown-menu a:hover{color:var(--c-accent);background:var(--c-accent-super)}
  .nav-dropdown-menu a[aria-current="page"]{color:var(--c-accent);font-weight:600}
}

/* ================================================================
   HERO (index)
   ================================================================ */
.hero-section{
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,4vw,2.5rem);
  background:linear-gradient(180deg,var(--c-surface) 0%,var(--c-bg) 100%);
}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
}
.hero-text h1{font-size:clamp(1.55rem,3.5vw,2.3rem);line-height:1.18;margin-bottom:.6rem}
.hero-lead{font-size:clamp(.88rem,1.5vw,1rem);color:var(--c-text2);line-height:1.75;margin-bottom:.5rem}
.hero-text > p{color:var(--c-text2);font-size:.875rem}
.hero-text .btn{margin-top:.85rem}
.hero-visual{position:relative}
.hero-figure{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--c-border);
  box-shadow:var(--sh-md);background:var(--c-bg2);
}
.hero-figure img{width:100%;height:auto;display:block;object-fit:cover}
.hero-figure figcaption{
  padding:.45rem .75rem;font-size:.725rem;color:var(--c-text3);
  background:var(--c-surface);border-top:1px solid var(--c-border-lt);
}
@media(max-width:768px){
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero-visual{order:-1}
}
@media(max-width:600px){.hero-section{padding:1.5rem 0 1.25rem}}

/* ================================================================
   INDEX SECTIONS
   ================================================================ */
.section-padding,.articles-section,.why-section,.learn-section{padding:clamp(2rem,4vw,3rem) 0}
.intro-section{background:var(--c-bg2);border-top:1px solid var(--c-border-lt);border-bottom:1px solid var(--c-border-lt)}
.tips-section{background:var(--c-bg2);border-top:1px solid var(--c-border-lt);border-bottom:1px solid var(--c-border-lt)}
.suggested-section{background:var(--c-bg2);border-top:1px solid var(--c-border-lt)}

.section-desc{font-size:.925rem;color:var(--c-text2);max-width:560px;margin-bottom:1.5rem;line-height:1.7}
.two-column-text{columns:2;column-gap:2.5rem;column-rule:1px solid var(--c-border-lt)}
.two-column-text p{font-size:.9rem;color:var(--c-text2);line-height:1.75}
@media(max-width:700px){.two-column-text{columns:1;column-rule:none}}

.intro-content{max-width:none}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-top:1.25rem}
.why-item{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:1.4rem;transition:box-shadow var(--ease),transform var(--ease);
}
.why-item:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)}
.why-item h3{font-size:.95rem;color:var(--c-accent-h)}
.why-item p{font-size:.85rem;color:var(--c-text2);margin:0;line-height:1.65}

/* Learn */
.learn-content{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.learn-block{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:1.4rem;position:relative;overflow:hidden;
  transition:box-shadow var(--ease),transform var(--ease);
}
.learn-block:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)}
.learn-block::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c-accent);opacity:.5;border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.learn-block h3{font-size:.95rem}
.learn-block p{font-size:.85rem;color:var(--c-text2);margin:0;line-height:1.65}
.learn-cta{margin-top:1.75rem;text-align:center}

/* Tips grid */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.tip-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:1.4rem}
.tip-card h3{font-size:.95rem}
.tip-card p{font-size:.85rem;color:var(--c-text2);margin:0;line-height:1.65}
.tip-list{list-style:none;padding:0;margin:0}
.tip-list li{padding:.4rem 0;font-size:.85rem;color:var(--c-text2);line-height:1.65;border-bottom:1px solid var(--c-border-lt)}
.tip-list li:last-child{border-bottom:none}
.tip-list li strong{color:var(--c-text);font-weight:500}

/* Suggested */
.suggested-list{list-style:none;padding:0;counter-reset:s;max-width:560px}
.suggested-list li{
  counter-increment:s;padding:.6rem 0;border-bottom:1px solid var(--c-border-lt);font-size:.875rem;
}
.suggested-list li::before{
  content:counter(s);display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--c-accent-lt);color:var(--c-accent);
  font-size:.7rem;font-weight:600;margin-right:.6rem;vertical-align:middle;
}
.suggested-list a{color:var(--c-text)}.suggested-list a:hover{color:var(--c-accent)}

/* ================================================================
   TYPE SELECTOR (index)
   ================================================================ */
.type-selector-section{background:var(--c-surface);border-top:1px solid var(--c-border-lt);border-bottom:1px solid var(--c-border-lt)}
.type-selector-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.25rem 0}
@media(max-width:600px){.type-selector-buttons{grid-template-columns:1fr 1fr}}

.type-btn{
  background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:var(--r-lg);
  padding:1rem .6rem;cursor:pointer;text-align:center;font-family:var(--f-sans);
  font-size:.82rem;font-weight:500;color:var(--c-text2);
  transition:all var(--ease);
}
.type-btn:hover{border-color:var(--c-accent);color:var(--c-accent);box-shadow:var(--sh-sm)}
.type-btn.active,.type-btn[aria-pressed="true"]{
  border-color:var(--c-accent);background:var(--c-accent-lt);color:var(--c-accent);
  box-shadow:inset 0 -2px 0 var(--c-accent);
}

.type-content-panels{margin-top:.75rem}
.type-panel{
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--r-xl);
  padding:clamp(1.25rem,3vw,2rem);display:none;
}
.type-panel--active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.panel-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.panel-info h3{font-size:1.05rem}
.panel-info > p{font-size:.875rem;color:var(--c-text2);line-height:1.7}
.panel-info .btn{margin-top:.85rem}

/* ================================================================
   CARDS
   ================================================================ */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:1.5rem 0}

.card{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:1.3rem;display:flex;flex-direction:column;position:relative;
  transition:box-shadow var(--ease),transform var(--ease);
}
.card::after{
  content:"";position:absolute;bottom:0;left:1rem;right:1rem;height:2px;
  background:var(--c-accent);border-radius:0 0 2px 2px;
  transform:scaleX(0);transition:transform var(--ease);transform-origin:left;
}
.card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.card:hover::after{transform:scaleX(1)}
.card-body{flex:1}
.card h3{font-size:.95rem}
.card h3 a{color:var(--c-text);text-decoration:none}
.card h3 a:hover{color:var(--c-accent)}
.card p,.card-body p{color:var(--c-text2);font-size:.825rem;margin-top:.3rem;line-height:1.6}
.card-tag{
  display:inline-block;font-size:.625rem;font-weight:600;padding:.15rem .5rem;
  border-radius:100px;background:var(--c-accent-lt);color:var(--c-accent);margin-bottom:.5rem;
  letter-spacing:.04em;text-transform:uppercase;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.breadcrumb,.breadcrumb-list{
  padding:.5rem 0;font-size:.775rem;color:var(--c-text3);
}
.breadcrumb-list{display:flex;list-style:none;margin:0;gap:.25rem;flex-wrap:wrap}
.breadcrumb a,.breadcrumb-list a{color:var(--c-text3)}
.breadcrumb a:hover,.breadcrumb-list a:hover{color:var(--c-accent)}
.breadcrumb span{margin:0 .3rem}
.breadcrumb-list li+li::before{content:"/";margin-right:.35rem;color:var(--c-border)}

/* ================================================================
   ARTICLE PAGES
   ================================================================ */
.article-layout,.content-layout{
  display:grid;grid-template-columns:1fr 220px;gap:2.5rem;
  padding:1.5rem 0 3rem;
}
@media(max-width:960px){.article-layout,.content-layout{grid-template-columns:1fr;gap:1.5rem}}

.article-content{min-width:0}
.article-content h1{margin-bottom:.5rem}
.article-content h2{
  margin-top:2.25rem;padding-top:1.25rem;
  border-top:1px solid var(--c-border-lt);
}
.article-content h3{margin-top:1.5rem}
.article-content p{line-height:1.78;font-size:.9rem;color:var(--c-text)}
.article-content > ul,.article-content > ol{font-size:.9rem}
.article-content a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-border)}
.article-content a:hover{text-decoration-color:var(--c-accent)}
.article-header h1{margin-bottom:.5rem}
.article-content section{margin-bottom:.5rem}
.article-content section:first-of-type{margin-top:0}

.article-meta{
  display:flex;gap:1rem;flex-wrap:wrap;
  font-size:.775rem;color:var(--c-text3);margin-bottom:1.5rem;
  padding-bottom:.75rem;border-bottom:1px solid var(--c-border);
}

/* Sidebar */
.sidebar{position:sticky;top:calc(var(--hdr-h) + 1rem);align-self:start}
.sidebar-block,.sidebar-section{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:1rem;margin-bottom:.85rem;
}
.sidebar-block h4,.sidebar-section h4{
  font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-text3);margin-bottom:.55rem;font-family:var(--f-sans);font-weight:600;
  padding-bottom:.4rem;border-bottom:1px solid var(--c-border-lt);
}
.sidebar-block ul,.sidebar-section ul{list-style:none;padding:0;margin:0}
.sidebar-block li,.sidebar-section li{margin:0}
.sidebar-block a,.sidebar-section a{
  display:block;padding:.32rem .55rem;font-size:.78rem;color:var(--c-text2);
  border-left:2px solid transparent;border-radius:0 var(--r) var(--r) 0;
  transition:all var(--ease);
}
.sidebar-block a:hover,.sidebar-section a:hover,
.sidebar-block a.is-active,.sidebar-section a.is-active{
  border-left-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-super);
}
.sidebar-block a.is-active{font-weight:500}

/* Scroll-spy TOC (generated by JS) */
.sidebar-toc{background:var(--c-accent-super);border-color:var(--c-accent-lt)}
.sidebar-toc h4{color:var(--c-accent)}
.sidebar-toc a.is-active{
  border-left-color:var(--c-accent);color:var(--c-accent);
  background:var(--c-accent-lt);font-weight:500;
}

/* Related */
.related-articles{
  background:var(--c-accent-super);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:1.15rem;margin-top:1.75rem;
}
.related-articles h3{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text3);margin-bottom:.55rem;font-family:var(--f-sans);font-weight:600}
.related-articles ul{list-style:none;padding:0;margin:0}
.related-articles li{margin-bottom:.15rem}
.related-articles a{font-size:.825rem;color:var(--c-text2)}
.related-articles a:hover{color:var(--c-accent)}

/* ================================================================
   ARTICLE IMAGES
   ================================================================ */
.article-image{
  margin:1.5rem 0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--c-border);background:var(--c-bg2);
  box-shadow:var(--sh-xs);
}
.article-image img{width:100%;height:auto;display:block;object-fit:cover}
.article-image figcaption{
  padding:.5rem .8rem;font-size:.75rem;color:var(--c-text3);
  background:var(--c-surface);border-top:1px solid var(--c-border-lt);
}
.article-image--inline{float:right;width:40%;max-width:300px;margin:0 0 1.25rem 1.5rem}
@media(max-width:640px){.article-image--inline{float:none;width:100%;max-width:none;margin:1.25rem 0}}

/* ================================================================
   TIP BOX
   ================================================================ */
.tip-box{
  background:var(--c-accent-super);border:1px solid var(--c-accent-lt);
  border-left:3px solid var(--c-accent);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:1rem 1.15rem;margin:1.5rem 0;font-size:.875rem;
}
.tip-box strong{
  display:block;margin-bottom:.2rem;color:var(--c-accent);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
}
.tip-box a{text-decoration:underline}

/* ================================================================
   TABLE
   ================================================================ */
.content-table{width:100%;margin:1.5rem 0;font-size:.84rem;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border)}
.content-table th,.content-table td{padding:.55rem .7rem;text-align:left}
.content-table th{
  font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--c-text3);background:var(--c-bg2);border-bottom:1px solid var(--c-border);
}
.content-table td{border-bottom:1px solid var(--c-border-lt)}
.content-table tr:last-child td{border-bottom:none}
.content-table tr:hover td{background:var(--c-accent-super)}

@media(max-width:640px){
  .content-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ================================================================
   FAQ
   ================================================================ */
.faq-list{margin:1.25rem 0}
.faq-item{
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  margin-bottom:.5rem;overflow:hidden;background:var(--c-surface);
  transition:box-shadow var(--ease);
}
.faq-item:hover{box-shadow:var(--sh-xs)}
.faq-item[aria-expanded="true"]{box-shadow:var(--sh-sm);border-color:var(--c-accent-lt)}

.faq-question{
  width:100%;background:none;border:none;padding:.9rem 1.1rem;
  font-size:.875rem;font-family:var(--f-sans);font-weight:500;color:var(--c-text);
  text-align:left;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:.6rem;transition:background var(--ease);
}
.faq-question:hover{background:var(--c-bg2)}
.faq-question svg,.faq-chevron{
  width:14px;height:14px;stroke:var(--c-text3);fill:none;stroke-width:2.5;
  flex-shrink:0;transition:transform var(--ease);
}
.faq-item[aria-expanded="true"] .faq-question svg,
.faq-item[aria-expanded="true"] .faq-chevron{transform:rotate(180deg)}
.faq-item[aria-expanded="true"] .faq-question{background:var(--c-accent-super);color:var(--c-accent)}

.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer-inner{padding:.15rem 1.1rem 1.1rem;color:var(--c-text2);font-size:.875rem;line-height:1.75}
.faq-answer-inner p{margin-bottom:.5rem}
.faq-answer-inner a{text-decoration:underline}
.faq-extra{margin-top:.35rem;font-size:.8rem;color:var(--c-text3)}

/* ================================================================
   GLOSSARY
   ================================================================ */
.glossary-list{margin:1rem 0}
.glossary-term{padding:.9rem 0;border-bottom:1px solid var(--c-border-lt)}
.glossary-term:last-child{border-bottom:none}
.glossary-term dt{
  font-weight:600;font-family:var(--f-serif);font-size:.975rem;margin-bottom:.2rem;
  color:var(--c-accent-h);
}
.glossary-term dd{color:var(--c-text2);font-size:.875rem;line-height:1.7}
.glossary-extra{margin-top:.25rem;font-size:.8rem;color:var(--c-text3);font-style:italic}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-page{
  max-width:680px;margin:0 auto;padding:1.5rem 0 3rem;
}
.contact-page-header{text-align:center;margin-bottom:2rem}
.contact-page-header h1{margin-bottom:.5rem}
.contact-page-header p{color:var(--c-text2);font-size:.925rem;max-width:480px;margin:0 auto}

.contact-info{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:.75rem;margin-bottom:2.5rem;
}
@media(max-width:500px){.contact-info{grid-template-columns:1fr}}

.contact-info-item{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:1.1rem 1.25rem;transition:box-shadow var(--ease),border-color var(--ease);
  position:relative;overflow:hidden;
}
.contact-info-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c-accent);opacity:0;transition:opacity var(--ease);
}
.contact-info-item:hover{box-shadow:var(--sh-sm);border-color:var(--c-accent-lt)}
.contact-info-item:hover::before{opacity:1}
.contact-info-item h4{
  font-family:var(--f-sans);font-size:.65rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-text3);margin-bottom:.3rem;font-weight:600;
}
.contact-info-item p{font-size:.9rem;color:var(--c-text);margin:0;font-weight:500}

/* Form card */
.contact-form-card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.25rem);
  box-shadow:var(--sh-sm);
}
.contact-form-card h2{font-size:1.25rem;margin-bottom:.35rem}
.contact-form-card > p{color:var(--c-text2);font-size:.875rem;margin-bottom:1.5rem}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}

/* ================================================================
   FORM
   ================================================================ */
.form-group{margin-bottom:1.1rem}
.form-group label{
  display:block;font-size:.82rem;font-weight:500;
  margin-bottom:.35rem;color:var(--c-text);
}
.required,.required-star{color:var(--c-danger)}

.form-input,.form-textarea,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea{
  width:100%;padding:.65rem .85rem;font-size:.875rem;font-family:var(--f-sans);
  background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:var(--r);
  color:var(--c-text);transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
.form-input:focus,.form-textarea:focus,
.form-group input:focus,
.form-group textarea:focus{
  outline:none;border-color:var(--c-accent);background:var(--c-surface);
  box-shadow:0 0 0 3px rgba(74,110,93,.1);
}
.form-textarea,.form-group textarea{min-height:120px;resize:vertical}
.form-input::placeholder,.form-textarea::placeholder,
input::placeholder,textarea::placeholder{color:var(--c-text3);opacity:.7}

.form-consent,.form-checkbox{
  display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;
  color:var(--c-text2);margin:1.25rem 0;line-height:1.55;
}
.form-consent input[type="checkbox"],.form-checkbox input[type="checkbox"]{
  margin-top:.2rem;accent-color:var(--c-accent);width:16px;height:16px;flex-shrink:0;
  cursor:pointer;
}

.form-submit{
  padding:.7rem 2rem;font-size:.9rem;font-weight:500;font-family:var(--f-sans);
  background:var(--c-accent);color:#fff;border:none;border-radius:var(--r);
  cursor:pointer;transition:all var(--ease);box-shadow:var(--sh-xs);
  display:inline-flex;align-items:center;gap:.4rem;
}
.form-submit:hover{background:var(--c-accent-h);box-shadow:var(--sh-md);transform:translateY(-1px)}
.form-submit:active{transform:translateY(0);box-shadow:var(--sh-xs)}
.form-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.form-message{
  margin-top:.85rem;padding:.7rem 1rem;border-radius:var(--r-lg);font-size:.85rem;
  display:none;line-height:1.5;
}
.form-message--success{display:block;background:#edf6ef;color:#2d6a4f;border:1px solid #b7e4c7}
.form-message--error{display:block;background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

.hp-field{position:absolute;left:-9999px}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer{
  background:var(--c-surface);border-top:1px solid var(--c-border);
  padding:2.5rem 0 1.25rem;margin-top:clamp(2rem,4vw,3.5rem);
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.75rem;
  margin-bottom:1.5rem;
}
.footer-brand .site-logo{font-size:.95rem}
.footer-brand p{color:var(--c-text2);font-size:.8rem;margin-top:.45rem;max-width:250px;line-height:1.6}
.footer-col h5{
  font-family:var(--f-sans);font-size:.625rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-text3);margin-bottom:.55rem;font-weight:600;
}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:.2rem}
.footer-col a{font-size:.8rem;color:var(--c-text2)}
.footer-col a:hover{color:var(--c-accent)}

.footer-bottom{
  border-top:1px solid var(--c-border);padding-top:1rem;
  text-align:center;font-size:.725rem;color:var(--c-text3);
}

@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ================================================================
   COOKIE BANNER
   ================================================================ */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--c-surface);border-top:1px solid var(--c-border);
  box-shadow:var(--sh-up);padding:1rem;z-index:9999;display:none;
}
.cookie-banner.is-visible{display:block}
.cookie-banner-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.cookie-banner p{font-size:.8rem;color:var(--c-text2);margin:0;flex:1;min-width:0}
.cookie-banner a{text-decoration:underline}

.cookie-actions{display:flex;gap:.4rem;flex-wrap:wrap}

.cookie-btn{
  padding:.4rem .9rem;font-size:.775rem;font-weight:500;font-family:var(--f-sans);
  border-radius:var(--r);cursor:pointer;border:1px solid var(--c-border);
  transition:all var(--ease);
}
.cookie-btn--accept{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.cookie-btn--accept:hover{background:var(--c-accent-h);border-color:var(--c-accent-h)}
.cookie-btn--reject{background:var(--c-surface);color:var(--c-text)}
.cookie-btn--reject:hover{background:var(--c-bg2)}
.cookie-btn--settings{background:var(--c-surface);color:var(--c-text)}
.cookie-btn--settings:hover{background:var(--c-bg2)}

.cookie-settings-panel{
  display:none;width:100%;margin-top:.5rem;padding-top:.65rem;border-top:1px solid var(--c-border);
}
.cookie-settings-panel.is-visible{display:block}

.cookie-setting-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;font-size:.82rem}
.cookie-setting-row span{color:var(--c-text);font-weight:500}
.cookie-setting-row small{display:block;color:var(--c-text3);font-size:.7rem;font-weight:400}

.toggle{position:relative;width:38px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{
  position:absolute;inset:0;background:var(--c-border);border-radius:10px;
  cursor:pointer;transition:background var(--ease);
}
.toggle-slider::before{
  content:"";position:absolute;width:14px;height:14px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:transform var(--ease);box-shadow:var(--sh-xs);
}
.toggle input:checked+.toggle-slider{background:var(--c-accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px)}
.toggle input:disabled+.toggle-slider{opacity:.45;cursor:default}

.cookie-save-btn{
  margin-top:.5rem;padding:.35rem .9rem;font-size:.775rem;font-weight:500;
  font-family:var(--f-sans);background:var(--c-accent);color:#fff;border:none;
  border-radius:var(--r);cursor:pointer;transition:background var(--ease);
}
.cookie-save-btn:hover{background:var(--c-accent-h)}

@media(max-width:640px){
  .cookie-banner-inner{flex-direction:column;align-items:flex-start}
  .cookie-banner p{margin-bottom:.25rem}
}

/* ================================================================
   SPECIAL PAGES
   ================================================================ */
/* 404 */
.page-404{text-align:center;padding:clamp(3rem,8vw,6rem) 0}
.page-404 h1{font-size:clamp(3.5rem,12vw,7rem);color:var(--c-border);line-height:1;margin-bottom:.3rem;font-weight:700}
.page-404 h2{font-size:clamp(1.1rem,2.5vw,1.4rem);margin-bottom:.65rem}
.page-404 p{color:var(--c-text2);font-size:.95rem;margin-bottom:1.5rem;max-width:380px;margin-left:auto;margin-right:auto}
.page-404 > .container > a{
  display:inline-block;padding:.65rem 1.4rem;background:var(--c-accent);
  color:#fff;border-radius:var(--r);font-size:.85rem;font-weight:500;
}
.page-404 > .container > a:hover{background:var(--c-accent-h);color:#fff}

/* Sitemap */
.sitemap-columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem;margin:1.5rem 0}
.sitemap-columns h3,.sitemap-group h3{font-size:.9rem;margin-bottom:.5rem;color:var(--c-accent-h)}
.sitemap-columns ul,.sitemap-group ul{list-style:none;padding:0}
.sitemap-columns li,.sitemap-group li{padding:.15rem 0}
.sitemap-columns a,.sitemap-group a{font-size:.85rem;color:var(--c-text2)}
.sitemap-columns a:hover,.sitemap-group a:hover{color:var(--c-accent)}

/* Legal */
.legal-content{max-width:680px;padding:2rem 0}
.legal-content h1{margin-bottom:.85rem}
.legal-content h2{margin-top:1.75rem;font-size:1.2rem;border:none;padding:0}
.legal-content h3{margin-top:1.25rem;font-size:1rem}
.legal-content p,.legal-content li{font-size:.875rem;color:var(--c-text2);line-height:1.75}
.legal-content a{text-decoration:underline;text-underline-offset:2px}

/* ================================================================
   UTILITIES
   ================================================================ */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.text-center{text-align:center}
.section{padding:2.5rem 0}

/* ================================================================
   PRINT
   ================================================================ */
@media print{
  .site-header,.site-footer,.cookie-banner,.sidebar,.nav-toggle{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .article-layout,.content-layout{grid-template-columns:1fr}
  a{color:#000;text-decoration:underline}
  .card{box-shadow:none;border:1px solid #ccc}
}