/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden;font-family:'Libre Franklin','Helvetica Neue',sans-serif;color:#2A3038;background:#FAF9F7}
::selection{background:rgba(158,124,69,0.15);color:#151A1E}
input::placeholder,textarea::placeholder{color:#B0B5BC}
button{font-family:inherit}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ═══════════════════════════════════════════
   CSS VARIABLES (Design Tokens)
   ═══════════════════════════════════════════ */
:root{
  --ink:#151A1E;--charcoal:#2A3038;--slate:#505862;--stone:#697180;
  --silver:#B0B5BC;--mist:#E8EAED;--ivory:#F6F5F2;--cream:#FAF9F7;
  --white:#FFFFFF;--gold:#9E7C45;--gold-light:#B8964F;
  --gold-muted:rgba(158,124,69,0.08);--gold-border:rgba(158,124,69,0.2);
  --font-heading:'Cormorant Garamond','Georgia',serif;
  --font-body:'Libre Franklin','Helvetica Neue',sans-serif;
  --hero-gradient:linear-gradient(165deg,#151A1E 0%,#1C2430 40%,#243040 100%);
  --transition-reveal:0.7s cubic-bezier(0.22,1,0.36,1);
  --transition-hover:0.3s ease;
  --transition-nav:0.4s ease;
}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all var(--transition-nav)}
.navbar.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--mist)}
.navbar.transparent{background:transparent;border-bottom:1px solid transparent}
.nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:76px;transition:height var(--transition-nav)}
.navbar.scrolled .nav-inner{height:64px}
.logo-btn{background:none;border:none;cursor:pointer;text-align:left;display:flex;flex-direction:column;text-decoration:none}
.logo-name{font-family:var(--font-heading);font-size:21px;font-weight:600;letter-spacing:0.02em;transition:color var(--transition-nav)}
.logo-sub{font-family:var(--font-body);font-size:9px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;margin-top:1px;transition:color var(--transition-nav)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:400;padding-bottom:2px;border-bottom:1.5px solid transparent;transition:color var(--transition-hover);text-decoration:none}
.nav-link.active{font-weight:500;border-bottom-color:var(--gold)}
.mob-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}

/* Dark nav state for hero */
.navbar.transparent .logo-name{color:#fff}
.navbar.transparent .logo-sub{color:rgba(255,255,255,0.5)}
.navbar.transparent .nav-link{color:rgba(255,255,255,0.85)}
.navbar.scrolled .logo-name{color:var(--ink)}
.navbar.scrolled .logo-sub{color:var(--stone)}
.navbar.scrolled .nav-link{color:var(--slate)}
.navbar.scrolled .nav-link.active{color:var(--ink)}

/* Mobile overlay */
.mobile-menu{position:fixed;inset:0;z-index:1001;background:rgba(21,26,30,0.97);display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;backdrop-filter:blur(20px)}
.mobile-menu.open{display:flex}
.mobile-menu a,.mobile-menu button.mobile-close{background:none;border:none;cursor:pointer;font-family:var(--font-heading);font-size:28px;font-weight:400;color:#fff;padding:12px 16px;min-height:48px;text-decoration:none;display:inline-flex;align-items:center}
.mobile-close{position:absolute;top:24px;right:24px;background:none;border:none;cursor:pointer}

@media(max-width:768px){
  .nav-links{display:none!important}
  .mob-toggle{display:flex!important}
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */
.section-label{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold)}
.h2{font-family:var(--font-heading);font-size:clamp(26px,3.5vw,42px);font-weight:400;line-height:1.2;color:var(--ink)}
.body-text{font-family:var(--font-body);font-size:15px;font-weight:300;line-height:1.85;color:var(--slate)}
.gold-rule{width:48px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px}
.gold-rule.centered{margin:0 auto}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;border:none;border-radius:2px;cursor:pointer;transition:all var(--transition-hover);background:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-light)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;border:1px solid var(--gold-border);border-radius:2px;cursor:pointer;transition:all var(--transition-hover);background:transparent;color:var(--gold)}
.btn-outline:hover{background:var(--gold-muted)}
.btn-outline.small{padding:10px 22px;font-size:12px}

/* ═══════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════ */
.section{padding:96px 24px}
.section-inner{max-width:1120px;margin:0 auto}
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}
.bg-ivory{background:var(--ivory)}
.bg-dark{background:var(--hero-gradient)}
.divider{height:1px;background:var(--mist)}

/* ═══════════════════════════════════════════
   REVEAL ANIMATION
   ═══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--transition-reveal),transform var(--transition-reveal)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--hero-gradient)}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,rgba(158,124,69,0.06) 0%,transparent 60%);pointer-events:none}
.hero-circle{position:absolute;right:-5%;top:15%;width:420px;height:420px;border:1px solid rgba(158,124,69,0.08);border-radius:50%;pointer-events:none}
.hero-content{max-width:1120px;margin:0 auto;padding:140px 24px 100px;width:100%;position:relative;z-index:1}
.hero h1{font-family:var(--font-heading);font-size:clamp(36px,5.5vw,68px);font-weight:400;line-height:1.12;color:#fff;max-width:720px}
.hero h1 em{color:var(--gold-light);font-style:italic}
.hero-desc{font-family:var(--font-body);font-size:clamp(15px,1.6vw,17.5px);font-weight:300;line-height:1.7;color:rgba(255,255,255,0.55);max-width:540px;margin-top:28px}
.hero-btns{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap}
.hero-fade{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--cream),transparent);pointer-events:none}

/* ═══════════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════════ */
.page-hero{background:var(--cream);padding:140px 24px 64px}
.page-hero .section-inner{max-width:1120px;margin:0 auto}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:40px;font-family:var(--font-body);font-size:12px}
.breadcrumb button,.breadcrumb a{font-family:var(--font-body);font-size:12px;color:var(--stone);background:none;border:none;cursor:pointer;padding:8px 4px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.breadcrumb .sep{color:var(--silver);font-size:11px}
.breadcrumb .current{font-weight:500;color:var(--gold)}
.page-hero h1{font-family:var(--font-heading);font-size:clamp(36px,5vw,58px);font-weight:400;line-height:1.12;color:var(--ink);margin-top:24px}
.page-hero h1 em{font-style:italic;color:var(--gold)}

/* ═══════════════════════════════════════════
   PRACTICE AREAS GRID
   ═══════════════════════════════════════════ */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:1px;background:var(--mist);border:1px solid var(--mist)}
.area-card{background:var(--white);padding:36px 32px;cursor:pointer;transition:all var(--transition-hover);height:100%}
.area-card:hover{background:var(--cream)}
.area-card h3{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:10px}
.area-card p{font-family:var(--font-body);font-size:13.5px;font-weight:300;line-height:1.7;color:var(--slate)}
.area-card .peek{margin-top:18px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateX(-6px);transition:all var(--transition-hover);display:flex;align-items:center;gap:4px}
.area-card:hover .peek{opacity:1;transform:translateX(0)}

/* ═══════════════════════════════════════════
   WHY US
   ═══════════════════════════════════════════ */
.why-item{padding:32px 0;display:flex;gap:20px}
.why-num{font-family:var(--font-heading);font-size:14px;font-weight:600;color:var(--gold);flex-shrink:0;margin-top:2px}
.why-item h3{font-family:var(--font-heading);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:8px}
.why-item p{font-family:var(--font-body);font-size:14.5px;font-weight:300;line-height:1.75;color:var(--slate)}

/* ═══════════════════════════════════════════
   PROCESS STEPS
   ═══════════════════════════════════════════ */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.process-step{padding:40px 32px}
.process-num{font-family:var(--font-heading);font-size:32px;font-weight:300;color:var(--gold-border);display:block;margin-bottom:20px}
.process-step h3{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:12px}
.process-step p{font-family:var(--font-body);font-size:14px;font-weight:300;line-height:1.75;color:var(--slate)}
@media(min-width:769px){.process-step+.process-step{border-left:1px solid var(--mist)}}
@media(max-width:768px){.process-step+.process-step{border-top:1px solid var(--mist)}}

/* ═══════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════ */
.accordion-item{border-bottom:1px solid var(--mist)}
.accordion-btn{width:100%;padding:22px 0;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;text-align:left}
.accordion-btn span{font-family:var(--font-heading);font-size:17.5px;font-weight:500;color:var(--ink);line-height:1.4}
.accordion-btn svg{flex-shrink:0;margin-top:4px;transition:transform var(--transition-hover)}
.accordion-btn.open svg{transform:rotate(45deg)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height 0.45s cubic-bezier(0.22,1,0.36,1)}
.accordion-content p{font-family:var(--font-body);font-size:14.5px;font-weight:300;line-height:1.8;color:var(--slate);padding-bottom:22px;max-width:540px}

/* ═══════════════════════════════════════════
   FINAL CTA (dark band)
   ═══════════════════════════════════════════ */
.cta-dark{background:var(--hero-gradient);padding:108px 24px;position:relative;overflow:hidden}
.cta-dark .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(158,124,69,0.06) 0%,transparent 70%);pointer-events:none}
.cta-dark h2{font-family:var(--font-heading);font-size:clamp(28px,4vw,46px);font-weight:400;line-height:1.2;color:#fff;margin-top:28px}
.cta-dark .desc{font-family:var(--font-body);font-size:16px;font-weight:300;line-height:1.7;color:rgba(255,255,255,0.5);margin-top:20px;max-width:480px}
.cta-dark .privacy-note{font-family:var(--font-body);font-size:12.5px;font-weight:300;color:rgba(255,255,255,0.25);margin-top:48px}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer{background:var(--ink);padding:64px 24px 40px}
.footer-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:48px}
.footer-col-label{font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.25)}
.footer-link{font-family:var(--font-body);font-size:13px;font-weight:300;color:rgba(255,255,255,0.45);cursor:pointer;background:none;border:none;padding:6px 0;text-align:left;min-height:44px;display:flex;align-items:center;text-decoration:none}
.footer-link:hover{color:rgba(255,255,255,0.65)}
.footer-link.gold{color:var(--gold-light);font-weight:400}
.footer-bottom{max-width:1120px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-copy{font-family:var(--font-body);font-size:12px;font-weight:300;color:rgba(255,255,255,0.2)}
.footer-legal{display:flex;gap:12px;flex-wrap:wrap}
.footer-legal a{font-family:var(--font-body);font-size:11.5px;font-weight:300;color:rgba(255,255,255,0.2);cursor:pointer;background:none;border:none;padding:8px 4px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.footer-legal a:hover{color:rgba(255,255,255,0.45)}

/* ═══════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════ */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;background:var(--mist);border:1px solid var(--mist);border-radius:3px;overflow:hidden}
.contact-card{background:var(--cream);padding:40px 32px}
.contact-card .label{font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:14px}
.contact-card .value{font-family:var(--font-heading);font-size:20px;font-weight:500;color:var(--ink);white-space:pre-line;line-height:1.4}
.contact-card .note{font-family:var(--font-body);font-size:12.5px;font-weight:300;color:var(--stone);margin-top:14px;display:block}
.form-label{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.06em;color:var(--charcoal);display:block;margin-bottom:8px}
.form-input{width:100%;padding:14px 16px;font-family:var(--font-body);font-size:14.5px;font-weight:300;color:var(--ink);background:var(--white);border:1px solid var(--mist);border-radius:2px;outline:none;transition:border-color var(--transition-hover)}
.form-input:focus{border-color:var(--gold)}
textarea.form-input{min-height:130px;resize:vertical;line-height:1.6}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A818A' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 40px;font-family:var(--font-body);font-size:14.5px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;border:none;border-radius:2px;cursor:pointer;transition:all var(--transition-hover);background:var(--gold);color:#fff}
.submit-btn:disabled{background:var(--mist);color:var(--stone);cursor:not-allowed}
.submit-btn:not(:disabled):hover{background:var(--gold-light)}

/* ═══════════════════════════════════════════
   SCENARIO CARDS
   ═══════════════════════════════════════════ */
.scenario-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1px;background:var(--mist);border:1px solid var(--mist);border-radius:3px;overflow:hidden}
.scenario-card{background:var(--white);padding:32px 28px;height:100%}
.scenario-card .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--gold);flex-shrink:0}
.scenario-card h3{font-family:var(--font-heading);font-size:19px;font-weight:600;color:var(--ink)}
.scenario-card p{font-family:var(--font-body);font-size:14px;font-weight:300;line-height:1.75;color:var(--slate);margin-top:14px}

/* ═══════════════════════════════════════════
   SERVICE BOX
   ═══════════════════════════════════════════ */
.service-box{background:var(--cream);border:1px solid var(--mist);border-radius:3px;padding:36px 32px}
.service-box .box-label{font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--stone);display:block;margin-bottom:24px}
.service-item{padding:14px 0;display:flex;align-items:flex-start;gap:14px}
.service-item+.service-item{border-top:1px solid var(--mist)}
.service-item span{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.65;color:var(--charcoal)}

/* ═══════════════════════════════════════════
   DETAIL PROCESS STEPS
   ═══════════════════════════════════════════ */
.detail-steps .step-row{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;padding:36px 0}
.detail-steps .step-row+.step-row{border-top:1px solid var(--mist)}
.step-num{width:40px;height:40px;border-radius:50%;border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:14px;font-weight:600;color:var(--gold);flex-shrink:0}
.step-row h3{font-family:var(--font-heading);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:10px}
.step-row .body-text{margin-top:0}

/* ═══════════════════════════════════════════
   URGENCY BAND
   ═══════════════════════════════════════════ */
.urgency-band{padding:80px 24px;background:var(--hero-gradient);position:relative;overflow:hidden}
.urgency-band h2{font-family:var(--font-heading);font-size:clamp(24px,3vw,34px);font-weight:400;line-height:1.25;color:rgba(255,255,255,0.9);margin-top:16px}
.urgency-band p{font-family:var(--font-body);font-size:15px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.55)}
.urgency-band .disclaimer{font-family:var(--font-body);font-size:13px;font-weight:300;font-style:italic;line-height:1.7;color:rgba(255,255,255,0.3);margin-top:8px;border-left:2px solid var(--gold-border);padding-left:16px}

/* ═══════════════════════════════════════════
   RELATED AREAS
   ═══════════════════════════════════════════ */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:1px;background:var(--mist);border:1px solid var(--mist);border-radius:3px;overflow:hidden}
.related-card{background:var(--white);padding:32px 28px;cursor:pointer;transition:background var(--transition-hover);height:100%}
.related-card:hover{background:var(--ivory)}
.related-card h3{font-family:var(--font-heading);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:10px}
.related-card p{font-family:var(--font-body);font-size:13.5px;font-weight:300;line-height:1.7;color:var(--slate)}

/* ═══════════════════════════════════════════
   AREAS HUB CARDS
   ═══════════════════════════════════════════ */
.area-hub-row{padding:72px 0}
.area-hub-row+.area-hub-row{border-top:1px solid var(--mist)}
.area-hub-num{font-family:var(--font-heading);font-size:13px;font-weight:500;color:var(--gold-border)}

/* ═══════════════════════════════════════════
   SUCCESS STATE
   ═══════════════════════════════════════════ */
.success-icon{width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 28px}

/* ═══════════════════════════════════════════
   SIDEBAR INFO BOX
   ═══════════════════════════════════════════ */
.info-box{background:var(--white);border:1px solid var(--mist);border-radius:3px;padding:36px 28px}
.info-box .box-label{font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:24px}
.info-box-item{padding:18px 0}
.info-box-item+.info-box-item{border-top:1px solid var(--mist)}
.info-box-item h4{font-family:var(--font-heading);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px}
.info-box-item p{font-family:var(--font-body);font-size:13px;font-weight:300;line-height:1.7;color:var(--slate)}
.quick-contact-box{background:var(--hero-gradient);border-radius:3px;padding:32px 28px;margin-top:28px}
.quick-contact-box .box-label{font-family:var(--font-body);font-size:10.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:16px}
.quick-contact-box p{font-family:var(--font-body);font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,0.5);margin-bottom:16px}
.quick-contact-box a{font-family:var(--font-heading);font-size:22px;font-weight:500;color:#fff;text-decoration:none}

/* ═══════════════════════════════════════════
   BLOG / ARTICLES
   ═══════════════════════════════════════════ */
.cat-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px}
.cat-btn{font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0.04em;padding:8px 18px;border:1px solid var(--mist);border-radius:20px;background:var(--white);color:var(--slate);cursor:pointer;transition:all var(--transition-hover)}
.cat-btn:hover{border-color:var(--gold-border);color:var(--charcoal)}
.cat-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:1px;background:var(--mist);border:1px solid var(--mist);border-radius:3px;overflow:hidden}
.article-card{background:var(--white);padding:36px 32px;cursor:pointer;transition:all var(--transition-hover);display:flex;flex-direction:column;height:100%}
.article-card:hover{background:var(--cream)}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.article-cat{font-family:var(--font-body);font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);background:var(--gold-muted);padding:4px 10px;border-radius:2px}
.article-date{font-family:var(--font-body);font-size:11.5px;font-weight:300;color:var(--stone)}
.article-read{font-family:var(--font-body);font-size:11.5px;font-weight:300;color:var(--silver)}
.article-card h3{font-family:var(--font-heading);font-size:21px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:12px;flex-grow:0}
.article-card .excerpt{font-family:var(--font-body);font-size:13.5px;font-weight:300;line-height:1.7;color:var(--slate);flex-grow:1}
.article-card .read-more{margin-top:20px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateX(-6px);transition:all var(--transition-hover);display:flex;align-items:center;gap:4px}
.article-card:hover .read-more{opacity:1;transform:translateX(0)}
.no-articles{text-align:center;padding:80px 24px;background:var(--white);border-radius:3px;border:1px solid var(--mist)}
.no-articles p{font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--stone)}

/* Article Detail */
.article-body{max-width:720px}
.article-body h2{font-family:var(--font-heading);font-size:clamp(22px,3vw,28px);font-weight:500;color:var(--ink);margin-top:48px;margin-bottom:16px;line-height:1.25}
.article-body h3{font-family:var(--font-heading);font-size:clamp(18px,2.5vw,22px);font-weight:600;color:var(--charcoal);margin-top:36px;margin-bottom:12px;line-height:1.3}
.article-body p{font-family:var(--font-body);font-size:15.5px;font-weight:300;line-height:1.9;color:var(--slate);margin-bottom:20px}
.article-body p strong{font-weight:500;color:var(--charcoal)}
.article-body ul,.article-body ol{margin:16px 0 24px 20px;display:flex;flex-direction:column;gap:10px}
.article-body li{font-family:var(--font-body);font-size:15px;font-weight:300;line-height:1.75;color:var(--slate)}
.article-body blockquote{margin:32px 0;padding:20px 24px;border-left:3px solid var(--gold);background:var(--gold-muted);border-radius:0 3px 3px 0}
.article-body blockquote p{font-size:14.5px;font-weight:300;font-style:italic;color:var(--charcoal);margin-bottom:0}
.article-disclaimer{margin-top:56px;padding:24px 28px;border-left:3px solid var(--mist);background:var(--ivory);border-radius:0 3px 3px 0}
.article-disclaimer p{font-family:var(--font-body);font-size:13px;font-weight:300;font-style:italic;line-height:1.7;color:var(--stone);margin:0}
.article-cta-inline{margin-top:40px;padding:36px 32px;background:var(--cream);border:1px solid var(--mist);border-radius:3px;text-align:center}
.article-cta-inline h3{font-family:var(--font-heading);font-size:24px;font-weight:500;color:var(--ink);margin-bottom:12px}
.article-cta-inline p{font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--slate);margin-bottom:24px;max-width:440px;margin-left:auto;margin-right:auto}
.article-sidebar{position:sticky;top:100px}
.tag-link{display:inline-block;font-family:var(--font-body);font-size:11px;font-weight:400;letter-spacing:0.04em;padding:6px 14px;border:1px solid var(--mist);border-radius:20px;color:var(--slate);cursor:pointer;transition:all var(--transition-hover);margin:0 6px 8px 0}
.tag-link:hover{border-color:var(--gold-border);color:var(--gold)}
.article-detail-grid{display:grid;grid-template-columns:1fr 300px;gap:72px;align-items:start}
@media(max-width:900px){
  .article-detail-grid{grid-template-columns:1fr;gap:48px}
  .article-sidebar{position:static}
}

/* ═══════════════════════════════════════════
   PAGE VISIBILITY
   ═══════════════════════════════════════════ */
.page{display:none}
.page.active{display:block}

/* ═══════════════════════════════════════════
   RESPONSIVE GRID UTIL
   ═══════════════════════════════════════════ */
.grid-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:72px;align-items:start}
.grid-2col-narrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:64px}
@media(max-width:400px){
  .grid-2col,.grid-2col-narrow{grid-template-columns:1fr!important}
}

/* ═══════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════ */
input[type="checkbox"]{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0}

/* Focus visible */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Skip Navigation Link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;font-family:var(--font-body);font-size:14px;font-weight:500;color:#fff;background:var(--gold);padding:12px 24px;text-decoration:none;border-radius:2px}
.skip-link:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;overflow:visible}

/* ═══════════════════════════════════════════
   COOKIE CONSENT BANNER
   ═══════════════════════════════════════════ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:1002;background:var(--ink);border-top:1px solid rgba(158,124,69,0.15);padding:20px 24px;transform:translateY(100%);opacity:0;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),opacity 0.5s ease}
.cookie-banner.visible{transform:translateY(0);opacity:1}
.cookie-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookie-text{flex:1;min-width:280px}
.cookie-text p{font-family:var(--font-body);font-size:13px;font-weight:300;line-height:1.65;color:rgba(255,255,255,0.5)}
.cookie-link{background:none;border:none;padding:0;font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--gold-light);cursor:pointer;border-bottom:1px solid var(--gold-border);display:inline}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-accept{padding:10px 24px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;background:var(--gold);color:#fff;border:none;border-radius:2px;cursor:pointer;transition:background var(--transition-hover)}
.cookie-accept:hover{background:var(--gold-light)}
.cookie-decline{padding:10px 24px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;background:transparent;color:rgba(255,255,255,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:2px;cursor:pointer;transition:all var(--transition-hover)}
.cookie-decline:hover{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.6)}
@media(max-width:600px){.cookie-inner{flex-direction:column;align-items:stretch;text-align:center}.cookie-actions{justify-content:center}}
/* ═══════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   Bu bloğu css/style.css dosyasının EN SONUNA yapıştırın.
   ═══════════════════════════════════════════════════ */

.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 0;
  transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.whatsapp-float.cookie-visible {
  bottom: 110px;
}

.whatsapp-float__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 4px 14px rgba(37, 211, 102, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
  position: relative;
}

.whatsapp-float__btn:hover {
  transform: scale(1.08);
  box-shadow:
    0 6px 20px rgba(37, 211, 102, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.12);
}

.whatsapp-float__btn:active {
  transform: scale(0.96);
}

.whatsapp-float__btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  flex-shrink: 0;
}

/* Tooltip */
.whatsapp-float__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #1a1a1a;
  font-family: var(--font-body, 'Libre Franklin', sans-serif);
  font-size: 13px;
  font-weight: 400;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(-50%) translateX(8px);
}

.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #fff;
  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.04);
}

.whatsapp-float__btn:hover + .whatsapp-float__tooltip,
.whatsapp-float:hover .whatsapp-float__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Pulse — sayfa açıldığında 3 kez nabız atarak dikkat çeker */
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(37,211,102,0.3), 0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow: 0 4px 14px rgba(37,211,102,0.3), 0 0 0 12px rgba(37,211,102,0); }
}

.whatsapp-float__btn.pulse {
  animation: wa-pulse 2s ease-in-out 3;
}

/* Responsive */
@media (max-width: 768px) {
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-float.cookie-visible {
    bottom: 100px;
  }
  .whatsapp-float__btn {
    width: 52px;
    height: 52px;
  }
  .whatsapp-float__btn svg {
    width: 26px;
    height: 26px;
  }
  .whatsapp-float__tooltip {
    display: none;
  }
}
/* ─── Son Makaleler (Anasayfa) ─── */
.home-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-top: 48px;
}
.home-article-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--mist, #E8EAED);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.home-article-card:hover {
  border-color: var(--gold, #9E7C45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.home-article-card .card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--stone, #7A818A);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.home-article-card .card-meta .card-tag {
  color: var(--gold, #9E7C45);
  font-weight: 500;
}
.home-article-card h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #151A1E);
  line-height: 1.35;
  margin: 16px 0 12px;
}
.home-article-card p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--slate, #505862);
  margin: 0;
}
.home-article-card .card-link {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--gold, #9E7C45);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}
.home-article-card:hover .card-link {
  gap: 10px;
}
/* ═══════════════════════════════════════════
   Makale Paylaşım Bloğu
   ═══════════════════════════════════════════ */
.article-share {
  padding-top: 0 !important;
  padding-bottom: 88px;
}
.article-share .share-box {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
  /* Reveal'a bağlı değil — her zaman görünür */
  opacity: 1;
  transform: none;
}
.article-share .share-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: var(--stone);
  letter-spacing: 0.02em;
}
.article-share .share-divider {
  width: 32px;
  height: 1px;
  background: var(--gold);
  margin: 18px auto 26px;
  opacity: 0.7;
}
.article-share .share-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.article-share .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.article-share .share-btn:hover,
.article-share .share-btn:focus-visible {
  color: var(--charcoal);
  border-color: var(--gold);
  outline: none;
}
.article-share .share-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.article-share .share-feedback {
  display: block;
  margin-top: 20px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  min-height: 14px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.article-share .share-feedback.visible { opacity: 1; }

@media (max-width: 600px) {
  .article-share { padding-bottom: 64px; }
  .article-share .share-btn {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}