/* ==========================================================
   ÜMRANIYE PLİSE PERDE — DESIGN SYSTEM
   Design Tokens / Typography Scale / Spacing Scale
   ========================================================== */

/* ---- TOKENS ---- */
:root {
  /* Brand */
  --c-primary:       #83bd81;
  --c-primary-dark:  #6aa868;
  --c-primary-light: #c1e0c0;
  --c-primary-50:    #f0f8f0;
  --c-secondary:     #404e5e;
  --c-secondary-dark:#2e3a47;
  --c-secondary-light:#5e6f82;

  /* Neutrals */
  --c-white:   #ffffff;
  --c-bg:      #f8faf8;
  --c-surface: #ffffff;
  --c-border:  #e2ece2;
  --c-border-strong: #c8d9c7;
  --c-text:    #1a2330;
  --c-text-muted: #5a6a78;
  --c-text-light: #8898a8;

  /* Semantic */
  --c-success: #83bd81;
  --c-info:    #4a90d9;
  --c-warn:    #e8a838;

  /* Typography — System Font Stack */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

  /* Type Scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px */

  /* Font Weight */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extrabold:800;

  /* Line Height */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;

  /* Letter Spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide:  0.04em;
  --ls-wider: 0.08em;

  /* Spacing Scale (4px base) */
  --sp-1:  0.25rem;  /* 4px */
  --sp-2:  0.5rem;   /* 8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */
  --sp-32: 8rem;     /* 128px */

  /* Section Padding */
  --section-py: clamp(3rem, 6vw, 6rem);
  --section-gap: clamp(3rem, 5vw, 5rem);

  /* Container */
  --container-max: 1366px;
  --container-px: clamp(1rem, 5vw, 2rem);

  /* Border Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(64,78,94,.06);
  --shadow-sm: 0 2px 8px rgba(64,78,94,.08);
  --shadow-md: 0 4px 16px rgba(64,78,94,.10);
  --shadow-lg: 0 8px 32px rgba(64,78,94,.12);
  --shadow-xl: 0 16px 48px rgba(64,78,94,.14);

  /* Transitions */
  --tr-fast:   150ms ease;
  --tr-base:   250ms ease;
  --tr-slow:   400ms ease;
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-base);font-size:var(--text-base);line-height:var(--lh-normal);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
table{border-collapse:collapse;width:100%}

/* ---- CONTAINER ---- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-px)}
.container--narrow{max-width:800px}
.container--wide{max-width:1400px}

/* ---- TYPOGRAPHY ---- */
h1,.h1{font-size:clamp(var(--text-3xl),5vw,var(--text-5xl));font-weight:var(--fw-extrabold);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--c-secondary)}
h2,.h2{font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl));font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--c-secondary)}
h3,.h3{font-size:clamp(var(--text-xl),2.5vw,var(--text-2xl));font-weight:var(--fw-semibold);line-height:var(--lh-snug);color:var(--c-secondary)}
h4,.h4{font-size:clamp(var(--text-lg),2vw,var(--text-xl));font-weight:var(--fw-semibold);line-height:var(--lh-normal);color:var(--c-secondary)}
h5,.h5{font-size:var(--text-md);font-weight:var(--fw-semibold);line-height:var(--lh-normal);color:var(--c-secondary)}
h6,.h6{font-size:var(--text-base);font-weight:var(--fw-semibold);line-height:var(--lh-normal);color:var(--c-secondary)}
p{font-size:var(--text-base);line-height:var(--lh-relaxed);color:var(--c-text);margin-bottom:var(--sp-4)}
p:last-child{margin-bottom:0}
.text-sm{font-size:var(--text-sm);line-height:var(--lh-normal)}
.text-xs{font-size:var(--text-xs);line-height:var(--lh-normal)}
.text-lg{font-size:var(--text-lg)}
.text-muted{color:var(--c-text-muted)}
.text-light{color:var(--c-text-light)}
.text-primary{color:var(--c-primary-dark)}
.text-center{text-align:center}
.text-white{color:var(--c-white)}
strong{font-weight:var(--fw-bold)}
em{font-style:italic}

/* ---- SECTION ---- */
.section{padding-block:var(--section-py)}
.section--alt{background:var(--c-primary-50)}
.section--white{background:var(--c-white)}
.section-header{margin-bottom:clamp(2rem,4vw,3.5rem);text-align:center}
.section-header .eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--c-primary-dark);background:var(--c-primary-50);border:1px solid var(--c-border);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-full);margin-bottom:var(--sp-4)}
.section-header h2{margin-bottom:var(--sp-4)}
.section-header .lead{font-size:var(--text-md);color:var(--c-text-muted);max-width:600px;margin-inline:auto;line-height:var(--lh-relaxed)}

/* ---- GRID ---- */
.grid{display:grid;gap:var(--sp-6)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid--6{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);font-size:var(--text-sm);font-weight:var(--fw-semibold);line-height:1;border-radius:var(--r-full);transition:all var(--tr-base);text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer;letter-spacing:0.01em}
.btn--primary{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}
.btn--primary:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--secondary{background:var(--c-secondary);color:var(--c-white);border-color:var(--c-secondary)}
.btn--secondary:hover{background:var(--c-secondary-dark);border-color:var(--c-secondary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--outline{background:transparent;color:var(--c-secondary);border-color:var(--c-border-strong)}
.btn--outline:hover{border-color:var(--c-primary);color:var(--c-primary-dark);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--c-primary-dark);border-color:transparent;padding-inline:var(--sp-4)}
.btn--ghost:hover{background:var(--c-primary-50)}
.btn--lg{padding:var(--sp-4) var(--sp-8);font-size:var(--text-base)}
.btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs)}
.btn--wa{background:#25d366;color:#fff;border-color:#25d366}
.btn--wa:hover{background:#1da851;border-color:#1da851;transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ---- CARD ---- */
.card{background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--tr-base),transform var(--tr-base)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card--flat{box-shadow:none}
.card--flat:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.card__icon{width:48px;height:48px;border-radius:var(--r-lg);background:var(--c-primary-50);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4)}
.card__icon svg{color:var(--c-primary-dark)}
.card__title{font-size:var(--text-md);font-weight:var(--fw-semibold);margin-bottom:var(--sp-2);color:var(--c-secondary)}
.card__body{font-size:var(--text-sm);color:var(--c-text-muted);line-height:var(--lh-relaxed)}

/* ---- BADGE ---- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:var(--fw-semibold);line-height:1}
.badge--primary{background:var(--c-primary-50);color:var(--c-primary-dark);border:1px solid var(--c-primary-light)}
.badge--secondary{background:#edf0f4;color:var(--c-secondary);border:1px solid #d4d9e0}
.badge--success{background:#f0f9f0;color:#2e7a2c;border:1px solid #b8ddb7}

/* ---- TABLE ---- */
.table-wrap{overflow-x:auto;border-radius:var(--r-xl);border:1px solid var(--c-border);box-shadow:var(--shadow-sm)}
.table-wrap table{font-size:var(--text-sm);min-width:600px}
.table-wrap thead{background:var(--c-secondary)}
.table-wrap thead th{color:var(--c-white);font-weight:var(--fw-semibold);padding:var(--sp-3) var(--sp-4);text-align:left;white-space:nowrap;letter-spacing:0.02em;font-size:var(--text-xs);text-transform:uppercase}
.table-wrap thead th:first-child{border-radius:0}
.table-wrap tbody tr{border-bottom:1px solid var(--c-border);transition:background var(--tr-fast)}
.table-wrap tbody tr:last-child{border-bottom:none}
.table-wrap tbody tr:hover{background:var(--c-primary-50)}
.table-wrap tbody td{padding:var(--sp-3) var(--sp-4);color:var(--c-text);line-height:var(--lh-normal);vertical-align:middle}
.table-wrap tbody td:first-child{font-weight:var(--fw-medium);color:var(--c-secondary)}
.table-wrap .check{color:var(--c-primary-dark);font-size:1.1em}
.table-wrap .cross{color:#c0392b}
.table-wrap .partial{color:var(--c-warn)}

/* ---- ACCORDION / FAQ ---- */
.accordion{border:1px solid var(--c-border);border-radius:var(--r-xl);overflow:hidden;background:var(--c-white)}
.accordion__item{border-bottom:1px solid var(--c-border)}
.accordion__item:last-child{border-bottom:none}
.accordion__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);font-size:var(--text-base);font-weight:var(--fw-semibold);color:var(--c-secondary);background:none;text-align:left;cursor:pointer;transition:background var(--tr-fast)}
.accordion__btn:hover{background:var(--c-primary-50)}
.accordion__btn[aria-expanded="true"]{color:var(--c-primary-dark)}
.accordion__icon{flex-shrink:0;width:20px;height:20px;transition:transform var(--tr-base)}
.accordion__btn[aria-expanded="true"] .accordion__icon{transform:rotate(180deg)}
.accordion__panel{display:none;padding:0 var(--sp-6) var(--sp-5);color:var(--c-text-muted);font-size:var(--text-sm);line-height:var(--lh-relaxed)}
.accordion__panel.open{display:block}

/* ---- LISTS ---- */
.list-check{display:flex;flex-direction:column;gap:var(--sp-2)}
.list-check li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-sm);color:var(--c-text)}
.list-check li .icon-check{flex-shrink:0;color:var(--c-primary-dark);margin-top:2px}
.list-bullet{display:flex;flex-direction:column;gap:var(--sp-2);padding-left:var(--sp-4)}
.list-bullet li{position:relative;font-size:var(--text-sm);color:var(--c-text);line-height:var(--lh-relaxed);padding-left:var(--sp-4)}
.list-bullet li::before{content:'';position:absolute;left:0;top:0.55em;width:6px;height:6px;border-radius:50%;background:var(--c-primary)}

/* ---- DIVIDER ---- */
.divider{border:none;border-top:1px solid var(--c-border);margin-block:var(--sp-8)}

/* ---- HERO ---- */
.hero{background:linear-gradient(135deg,var(--c-white) 0%,var(--c-primary-50) 100%);padding-block:clamp(4rem,8vw,7rem) clamp(3rem,6vw,5.5rem);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 50%,rgba(131,189,129,.15) 0%,transparent 70%);pointer-events:none}
.hero__eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--c-primary-dark);background:var(--c-white);border:1px solid var(--c-primary-light);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);margin-bottom:var(--sp-5);box-shadow:var(--shadow-xs)}
.hero__title{margin-bottom:var(--sp-5)}
.hero__title span{color:var(--c-primary-dark)}
.hero__lead{font-size:clamp(var(--text-base),2vw,var(--text-md));color:var(--c-text-muted);max-width:560px;margin-bottom:var(--sp-8);line-height:var(--lh-relaxed)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-8)}
.hero__stats{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.hero__photo{width:100%;max-width:420px;aspect-ratio:3/4;border-radius:var(--r-2xl);border:2px solid var(--c-border);overflow:hidden;box-shadow:var(--shadow-xl);background:linear-gradient(160deg,var(--c-primary-50) 0%,var(--c-primary-light) 100%);margin:0;position:relative}
.hero__photo picture,.hero__photo img{width:100%;height:100%;display:block}
.hero__photo img{object-fit:cover}
.hero__photo figcaption{position:absolute;left:50%;bottom:var(--sp-5);transform:translateX(-50%);background:#fff;border:1px solid var(--c-border);border-radius:var(--r-full);padding:var(--sp-2) var(--sp-5);font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--c-secondary);box-shadow:var(--shadow-sm)}
.hero__stat-value{font-size:var(--text-2xl);font-weight:var(--fw-extrabold);color:var(--c-secondary);line-height:1}
.hero__stat-label{font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--sp-1)}

/* ---- TRUST BAR ---- */
.trust-bar{background:var(--c-white);border-block:1px solid var(--c-border);padding-block:var(--sp-6)}
.trust-bar__items{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-6) var(--sp-8)}
.trust-bar__item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--c-secondary);white-space:nowrap}
.trust-bar__item svg{color:var(--c-primary-dark)}

/* ---- NAV ---- */
.navbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-xs)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--sp-3);gap:var(--sp-4);position:relative}
.navbar__logo{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.navbar__logo-img{height:40px;width:auto}
.navbar__logo-text{font-size:var(--text-base);font-weight:var(--fw-bold);color:var(--c-secondary);line-height:1.2}
.navbar__logo-text span{color:var(--c-primary-dark);display:block;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:0.05em;text-transform:uppercase}
.navbar__nav{display:flex;align-items:center;gap:var(--sp-6)}
.navbar__menu{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.navbar__menu a{color:var(--c-secondary);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-full);transition:color var(--tr-fast),background var(--tr-fast)}
.navbar__menu a:hover{color:var(--c-primary-dark);background:var(--c-primary-50)}
.navbar__actions{display:flex;align-items:center;gap:var(--sp-3)}
.navbar__tel{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--c-secondary);display:flex;align-items:center;gap:var(--sp-2)}
.navbar__tel:hover{color:var(--c-primary-dark)}
.navbar__toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border-radius:var(--r-full);border:1px solid var(--c-border);align-items:center;justify-content:center;background:#fff;box-shadow:var(--shadow-xs);transition:all var(--tr-fast)}
.navbar__toggle span{width:18px;height:2px;background:var(--c-secondary);transition:transform var(--tr-fast),opacity var(--tr-fast)}
.navbar__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbar__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- PRODUCT TABS ---- */
.product-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-8);justify-content:center}
.product-tab{padding:var(--sp-2) var(--sp-5);border-radius:var(--r-full);font-size:var(--text-sm);font-weight:var(--fw-semibold);border:2px solid var(--c-border);color:var(--c-text-muted);cursor:pointer;transition:all var(--tr-base);background:var(--c-white)}
.product-tab.active,.product-tab:hover{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}

/* ---- STEP ---- */
.steps{display:flex;flex-direction:column;gap:var(--sp-6);counter-reset:step}
.step{display:flex;gap:var(--sp-5);align-items:flex-start;counter-increment:step}
.step__num{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--c-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--fw-bold);font-size:var(--text-sm)}
.step__body{flex:1}
.step__title{font-size:var(--text-md);font-weight:var(--fw-semibold);color:var(--c-secondary);margin-bottom:var(--sp-2)}
.step__desc{font-size:var(--text-sm);color:var(--c-text-muted);line-height:var(--lh-relaxed)}

/* ---- CTA BLOCK ---- */
.cta-block{background:linear-gradient(135deg,var(--c-secondary) 0%,var(--c-secondary-dark) 100%);border-radius:var(--r-2xl);padding:clamp(2.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden}
.cta-block::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(131,189,129,.2) 0%,transparent 70%);pointer-events:none}
.cta-block__title{font-size:clamp(var(--text-xl),3vw,var(--text-3xl));font-weight:var(--fw-extrabold);color:#fff;margin-bottom:var(--sp-4)}
.cta-block__lead{color:rgba(255,255,255,.75);margin-bottom:var(--sp-8);font-size:var(--text-md);max-width:500px;margin-inline:auto}
.cta-block__btns{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}

/* ---- GALLERY ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--sp-4)}
.gallery-item{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--c-border);position:relative;display:block}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--tr-slow)}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-3);font-size:var(--text-xs);font-weight:var(--fw-semibold);color:#fff;background:linear-gradient(0deg,rgba(64,78,94,.85) 0%,rgba(64,78,94,0) 100%)}

/* ---- COLOR SWATCHES ---- */
.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.swatch{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}
.swatch__dot{width:40px;height:40px;border-radius:50%;border:2px solid var(--c-border);box-shadow:var(--shadow-xs)}
.swatch__label{font-size:var(--text-xs);color:var(--c-text-muted);font-weight:var(--fw-medium)}

/* ---- COMPARISON TABLE OVERRIDE ---- */
.compare-table thead th.th-highlight{background:var(--c-primary);color:#fff}
.compare-table tbody td.td-highlight{background:var(--c-primary-50);font-weight:var(--fw-semibold);color:var(--c-primary-dark)}

/* ---- DISTRICT TAGS ---- */
.district-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.district-tag{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--r-full);font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--c-secondary);transition:all var(--tr-fast)}
.district-tag:hover{background:var(--c-primary-50);border-color:var(--c-primary-light);color:var(--c-primary-dark)}
.district-tag svg{color:var(--c-primary-dark)}

/* ---- ICON BOX ---- */
.icon-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-6);gap:var(--sp-4)}
.icon-box__icon{width:64px;height:64px;border-radius:var(--r-xl);background:var(--c-primary-50);border:1px solid var(--c-primary-light);display:flex;align-items:center;justify-content:center}
.icon-box__icon svg{color:var(--c-primary-dark)}
.icon-box__title{font-size:var(--text-md);font-weight:var(--fw-semibold);color:var(--c-secondary)}
.icon-box__desc{font-size:var(--text-sm);color:var(--c-text-muted);line-height:var(--lh-relaxed)}

/* ---- FOOTER ---- */
.footer{background:var(--c-secondary);color:rgba(255,255,255,.8);padding-block:var(--sp-16) var(--sp-8)}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-8);margin-bottom:var(--sp-10)}
.footer__logo-text{font-size:var(--text-lg);font-weight:var(--fw-bold);color:#fff;margin-bottom:var(--sp-3)}
.footer__desc{font-size:var(--text-sm);line-height:var(--lh-relaxed);color:rgba(255,255,255,.65)}
.footer__heading{font-size:var(--text-sm);font-weight:var(--fw-bold);color:#fff;text-transform:uppercase;letter-spacing:var(--ls-wider);margin-bottom:var(--sp-4)}
.footer__links{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer__links a{font-size:var(--text-sm);color:rgba(255,255,255,.65);transition:color var(--tr-fast)}
.footer__links a:hover{color:#fff}
.footer__contact-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:rgba(255,255,255,.75);margin-bottom:var(--sp-3)}
.footer__contact-item svg{color:var(--c-primary);flex-shrink:0}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;font-size:var(--text-xs);color:rgba(255,255,255,.45)}

/* ---- FLOATING WA ---- */
.float-wa{position:fixed;bottom:var(--sp-6);right:var(--sp-6);z-index:999;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:all var(--tr-base)}
.float-wa:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}
.float-wa svg{color:#fff}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .navbar__nav{gap:var(--sp-4)}
}
@media(max-width:900px){
  .navbar__toggle{display:flex}
  .navbar__nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-sm);padding:var(--sp-6) var(--container-px);flex-direction:column;align-items:flex-start;gap:var(--sp-5);max-height:0;opacity:0;pointer-events:none;transition:max-height var(--tr-base),opacity var(--tr-base)}
  .navbar__nav.open{max-height:600px;opacity:1;pointer-events:auto}
  .navbar__menu{flex-direction:column;align-items:flex-start;width:100%;gap:var(--sp-3)}
  .navbar__menu a{width:100%}
  .navbar__actions{flex-direction:column;align-items:flex-start;width:100%}
}
@media(max-width:768px){
  .navbar__logo-text span{display:none}
  .hero__stats{gap:var(--sp-5)}
  .hide-mobile{display:none}
}
@media(min-width:1024px){
  .hero__layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--sp-12)}
  .steps{gap:var(--sp-8)}
}