/* ═══════════════════════════════════════════════════════════════════════
   FreeFiber — app.css v2.0 | Design System Foundation
   ═══════════════════════════════════════════════════════════════════════
   Load order: app.css → ff-design.css → select2(cdn) → page.css
   
   Structure:
     1. Design Tokens
     2. Reset & Base
     3. Layout
     4. Header & Navbar
     5. Footer
     6. Buttons
     7. Forms & Inputs
     8. Select2 Overrides
     9. Cards
    10. FAQ Accordion
    11. WhatsApp Widget
    12. Inner Page Hero
    13. Utilities
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --ff-navy:    #302782;
  --ff-navy-dk: #1e1856;
  --ff-navy-lt: #4A3DB0;
  --ff-cyan:    #00ADEF;
  --ff-cyan-lt: #29BCEF;
  --ff-cyan-dk: #0091CC;

  /* Accent palette */
  --ff-amber:    #f59e0b;
  --ff-amber-dk: #d97706;
  --ff-teal:     #06b6d4;
  --ff-teal-dk:  #0891b2;
  --ff-emerald:  #10b981;
  --ff-rose:     #ef4444;

  /* Tints */
  --brand-100: #E0F5FF;
  --brand-50:  #F0F4FF;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #302782 0%, #00ADEF 100%);
  --grad-soft:  linear-gradient(150deg, rgba(48,39,130,.06) 0%, rgba(0,173,239,.04) 100%);
  --grad-navy:  linear-gradient(135deg, #302782 0%, #4a3fa0 100%);
  --grad-cyan:  linear-gradient(135deg, #00ADEF 0%, #00c8ff 100%);
  --grad-dark:  linear-gradient(155deg, #0d0b2e 0%, #302782 55%, #1a4a7a 100%);

  /* Neutrals */
  --white:    #ffffff;
  --gray-50:  #F8F9FC;
  --gray-100: #F0F3F8;
  --gray-200: #E2E6F0;
  --gray-300: #C5CADE;
  --gray-400: #9199B4;
  --gray-500: #636B88;
  --gray-600: #454C66;
  --gray-700: #2D3350;
  --gray-800: #1B2040;
  --gray-900: #0D1230;

  /* Semantic */
  --bg:         #F4F5FA;
  --bg-white:   #ffffff;
  --bg-soft:    var(--gray-50);
  --text:       var(--gray-800);
  --text-muted: var(--gray-500);
  --border:     var(--gray-200);
  --border-soft:rgba(48,39,130,.10);

  /* Typography */
  --font: 'Satoshi', system-ui, -apple-system, sans-serif;
  --text-xs:  13px;  --text-sm:  14px;  --text-base:16px;
  --text-md:  17px;  --text-lg:  19px;  --text-xl:  22px;
  --text-2xl: 28px;  --text-3xl: 36px;  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-hero:clamp(38px, 5.5vw, 62px);

  --fw-regular:  400;  --fw-medium:  500;
  --fw-semibold: 600;  --fw-bold:    700;
  --fw-extrabold:800;

  --lh-tight:1.1;   --lh-snug:1.3;   --lh-base:1.65;
  --ls-tight:-0.03em; --ls-snug:-0.02em;

  /* Spacing & Layout */
  --container:     1140px;
  --container-wide:1320px;
  --gutter:        24px;
  --section-gap:   88px;

  /* Radius */
  --r-sm:  10px;  --r-md:  16px;
  --r-lg:  22px;  --r-xl:  28px;
  --r-pill:999px;

  /* Shadows */
  --sh-xs:   0 1px 2px rgba(13,18,48,.06);
  --sh-sm:   0 2px 8px rgba(13,18,48,.08);
  --sh-md:   0 8px 28px rgba(13,18,48,.11);
  --sh-lg:   0 16px 56px rgba(13,18,48,.15);
  --sh-xl:   0 24px 64px rgba(13,18,48,.18);
  --sh-navy: 0 8px 24px rgba(48,39,130,.28);
  --sh-cyan: 0 8px 24px rgba(0,173,239,.35);
  --sh-glow: 0 0 40px rgba(0,173,239,.20);

  /* Header */
  --header-h: 72px;

  /* Transitions */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;  --dur-base:250ms;  --dur-slow:400ms;
}
@media(max-width:980px){
  :root{--header-h:68px;--gutter:20px;--section-gap:64px}
}
@media(max-width:768px){
  :root{--header-h:62px;--gutter:16px;--section-gap:52px}
}


/* ── 2. RESET & BASE ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media(max-width:480px){html{font-size:15px}}

html,body{overflow-x:hidden;max-width:100%;margin:0;padding:0}

body{
  padding-top:var(--header-h);
  font-family:var(--font);
  font-size:var(--text-base);
  line-height:var(--lh-base);
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 45% at 0 0,rgba(48,39,130,.055) 0%,transparent 55%),
    radial-gradient(ellipse 55% 40% at 100% 0,rgba(0,173,239,.040) 0%,transparent 50%),
    radial-gradient(ellipse 50% 35% at 50% 100%,rgba(48,39,130,.028) 0%,transparent 55%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
body.has-hero{padding-top:0}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font);font-weight:var(--fw-extrabold);
  line-height:var(--lh-tight);letter-spacing:var(--ls-snug);
  color:var(--gray-900);margin:0;
}
h1{font-size:var(--text-5xl);letter-spacing:var(--ls-tight)}
h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-xl)}
h4{font-size:18px;font-weight:var(--fw-bold)}
@media(max-width:768px){h1{font-size:var(--text-4xl)}h2{font-size:var(--text-2xl)}}

p{line-height:1.7;margin:0 0 14px}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2,h3,p,a,button{overflow-wrap:anywhere;word-break:break-word}

/* Mobile input zoom fix */
@media(max-width:768px){input,select,textarea{font-size:16px!important}}

/* Kill legacy elements that may remain in markup */
.mobile-header,.nav-toggle,.hero-abstract-bg,
.hero-mesh-grid,.hero-glow,.top-banner{display:none!important}


/* ── 3. LAYOUT ──────────────────────────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container--wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter)}
.container--full{max-width:none;width:100%;margin:0;padding:0 var(--gutter)}
@media(max-width:520px){.container,.container--full{padding:0 16px}}

.page{padding:28px 0 48px}
.page-body{padding:16px 0 32px}

.section-head{text-align:center;margin-bottom:48px}
.section-head h2{font-size:clamp(24px,2.8vw,36px);color:var(--ff-navy);margin-bottom:12px}
.section-head p{color:var(--gray-500);font-size:16px;max-width:64ch;margin:0 auto;line-height:var(--lh-base);text-align:center}


/* ── 4. HEADER & NAVBAR ─────────────────────────────────────────────── */
.site-header{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:1000;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--gray-200);
  transition:background var(--dur-slow) var(--ease-io),
             box-shadow var(--dur-slow) var(--ease-io),
             border-color var(--dur-slow) var(--ease-io);
}
/* Hero: always opaque — no transparency */
body.has-hero .site-header:not([data-shrink="1"]){
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(48,39,130,.10);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
/* Scroll: frosted glass */
.site-header[data-shrink="1"]{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--gray-200);
  box-shadow:0 1px 20px rgba(13,18,48,.09);
}

.site-header__inner{
  height:var(--header-h);display:flex;align-items:center;
  max-width:var(--container);margin:0 auto;padding:0 var(--gutter);
}
.site-header__shell{
  display:flex;align-items:center;width:100%;
  position:relative;z-index:1;padding:0;
}

/* Logo */
.brand{display:flex;align-items:center;flex-shrink:0;margin-right:auto;text-decoration:none;position:relative;z-index:2}
.brand__logo{height:36px;width:auto;max-width:175px;object-fit:contain;transition:var(--dur-base)}
@media(max-width:768px){.brand__logo{height:28px}}

/* Nav links */
.nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  height:36px;padding:0 12px;border-radius:var(--r-sm);
  font-family:var(--font);font-size:14px;font-weight:var(--fw-semibold);
  color:var(--gray-700);white-space:nowrap;text-decoration:none;
  background:transparent;border:none;cursor:pointer;
  letter-spacing:-.01em;
  transition:color var(--dur-fast),background var(--dur-fast);
}
.nav__link:hover{color:var(--ff-navy);background:rgba(48,39,130,.07)}
.nav__link.is-active{color:var(--ff-navy);font-weight:var(--fw-bold)}
.nav__link.is-active::after{display:none;
  content:'';position:absolute;bottom:4px;left:12px;right:12px;
  height:2px;background:var(--ff-navy);border-radius:2px;
}
.nav__link--disabled{opacity:.55;cursor:not-allowed;user-select:none}

/* Dropdown */
.nav__link--dropdown{cursor:pointer}
.nav__caret{
  display:inline-block;width:0;height:0;
  border:4px solid transparent;border-top-color:currentColor;
  margin-top:3px;flex-shrink:0;transition:transform var(--dur-fast);
}
.nav__dropdown.is-open .nav__caret{transform:rotate(180deg)}
.nav__dropdown{position:relative}
.nav__dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:180px;background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:6px;
  opacity:0;visibility:hidden;z-index:200;
  transition:opacity var(--dur-fast),visibility var(--dur-fast),
             transform var(--dur-fast) var(--ease-out);
}
.nav__dropdown.is-open .nav__dropdown-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav__dropdown-item{
  display:flex;align-items:center;padding:10px 14px;border-radius:9px;
  font-family:var(--font);font-size:14px;font-weight:var(--fw-semibold);
  color:var(--gray-700);text-decoration:none;border:none;background:none;
  cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);
}
.nav__dropdown-item::after,.nav__dropdown-item::before{display:none}
.nav__dropdown-item:hover{background:rgba(48,39,130,.07);color:var(--ff-navy);text-decoration:none}
.nav__dropdown-item.is-active{background:rgba(48,39,130,.06);color:var(--ff-navy);font-weight:var(--fw-bold)}

/* Header CTA */
.btn--cta{
  flex-shrink:0;display:inline-flex;align-items:center;
  height:38px;padding:0 18px;margin-left:14px;
  border-radius:var(--r-pill);background:var(--ff-navy);color:#fff;
  font-family:var(--font);font-size:13.5px;font-weight:var(--fw-bold);
  white-space:nowrap;text-decoration:none;border:none;cursor:pointer;
  position:relative;z-index:2;box-shadow:var(--sh-navy);
  transition:background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast);
}
.btn--cta:hover{background:var(--ff-navy-lt);box-shadow:0 10px 28px rgba(48,39,130,.36);transform:translateY(-1px)}

/* Hamburger toggle */
.site-header__toggle{
  display:none;width:38px;height:38px;border:none;background:transparent;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;border-radius:8px;color:var(--gray-800);
  margin-left:6px;padding:0;position:relative;z-index:2;
  transition:background var(--dur-fast);
}
.site-header__toggle:hover{background:rgba(48,39,130,.07)}
.site-header__toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px}

/* Mobile panel */
.mobile-nav{
  position:absolute;top:calc(100% + 8px);right:var(--gutter);
  width:min(310px,calc(100vw - 32px));background:#fff;
  border:1px solid var(--gray-200);border-radius:18px;
  box-shadow:var(--sh-lg);padding:6px;display:none;z-index:1100;
}
.mobile-nav.is-open{display:block}
.mobile-nav__item{
  display:block;padding:12px 16px;border-radius:12px;
  font-family:var(--font);font-size:15px;font-weight:var(--fw-bold);
  color:var(--gray-700);text-decoration:none;text-align:center;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.mobile-nav__item:hover{background:rgba(48,39,130,.06);color:var(--ff-navy)}
.mobile-nav__item--highlight{background:rgba(48,39,130,.07);color:var(--ff-navy);margin-bottom:4px}

/* Responsive nav breakpoints */
@media(max-width:991px){
  .nav,.btn--cta{display:none!important}
  .site-header__toggle{display:flex}
  .site-header__inner{position:relative}
}
@media(min-width:992px){
  .site-header__toggle{display:none!important}
  .mobile-nav{display:none!important}
}
@media(max-width:1200px){
  .nav__link{padding:0 9px;font-size:13.5px}
  .btn--cta{padding:0 14px;margin-left:10px;font-size:13px}
}


/* ── 5. FOOTER ──────────────────────────────────────────────────────── */
.site-footer{
  background:#f7f7fb;color:#374151;
  border-top:2px solid var(--ff-navy);
  position:relative;
}
.site-footer .container{padding-left:28px;padding-right:28px}
.site-footer__grid{
  display:grid;grid-template-columns:1fr;gap:22px;padding:34px 0 22px;
}
@media(min-width:992px){.site-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px}}
@media(max-width:991px) and (min-width:561px){.site-footer__grid{grid-template-columns:repeat(2,1fr)}}

.site-footer__col{text-align:left;min-width:0}
.site-footer__title{
  color:var(--ff-navy);font-weight:var(--fw-bold);
  margin-bottom:14px;font-size:var(--text-sm);
  letter-spacing:var(--ls-snug);text-transform:uppercase;
}
.site-footer__col a{
  font-size:var(--text-sm);line-height:1.35;display:block;
  margin:0 0 10px;color:var(--text-muted);font-weight:var(--fw-semibold);
  transition:color var(--dur-fast);
}
.site-footer__col a:hover{color:var(--ff-navy)}

/* Footer - brand col */
.site-footer__col--brand{padding-right:8px}
.site-footer__logoLink{display:inline-block}
.site-footer__logo{height:44px;width:auto;display:block}
.site-footer__slogan{margin-top:10px;font-weight:var(--fw-extrabold);color:var(--ff-navy);letter-spacing:-.2px}
.site-footer__contact{margin-top:12px;font-size:14px;color:var(--text-muted);line-height:1.6}
.site-footer__contact a{display:inline;color:var(--ff-navy);padding:0;margin:0}
.site-footer__contact a:hover{text-decoration:underline}

.site-footer__cta{
  margin-top:6px;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:12px 16px;border-radius:var(--r-pill);
  background:var(--ff-navy);color:#fff;font-weight:var(--fw-extrabold);
  width:fit-content;transition:filter var(--dur-fast);
}
.site-footer__cta:hover{filter:brightness(.95)}
.site-footer__cta--disabled{opacity:.55;cursor:not-allowed;filter:none}

.site-footer__bottom{
  border-top:1px solid var(--border);padding:14px 0 18px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.site-footer__brand{color:#9CA3AF;font-size:12.5px}
.site-footer__brand a{display:inline;color:var(--ff-navy);font-size:12.5px;margin:0}
.site-footer__brand a:hover{text-decoration:underline}
.site-footer__sep{opacity:.55;margin:0 6px}
@media(max-width:560px){.site-footer__bottom{flex-direction:column;text-align:center}}
@media(max-width:980px){.site-footer .container{padding-left:18px;padding-right:18px}}


/* ── 6. BUTTONS — Premium Design System ─────────────────────────────── */

/* Base shared */
.bt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 26px;border-radius:var(--r-md);
  font-family:var(--font);font-size:15px;font-weight:var(--fw-bold);
  letter-spacing:.01em;text-decoration:none;border:2px solid transparent;
  cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-fast),border-color var(--dur-fast);
}
/* Sheen overlay */
.bt-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
  opacity:0;transition:opacity var(--dur-fast);pointer-events:none;
}
.bt-btn:hover::before{opacity:1}
.bt-btn:active{transform:translateY(0)!important}

/* Variants */
.bt-btn-primary{background:var(--ff-navy);color:#fff;border-color:var(--ff-navy);box-shadow:var(--sh-navy)}
.bt-btn-primary:hover{background:var(--ff-navy-lt);transform:translateY(-2px);box-shadow:0 12px 32px rgba(48,39,130,.38)}

.bt-btn-cyan{background:var(--ff-cyan);color:#fff;border-color:var(--ff-cyan);box-shadow:var(--sh-cyan)}
.bt-btn-cyan:hover{background:var(--ff-cyan-lt);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,173,239,.45)}

.bt-btn-outline{background:transparent;color:var(--ff-navy);border-color:rgba(48,39,130,.25)}
.bt-btn-outline:hover{background:rgba(48,39,130,.05);border-color:var(--ff-navy);transform:translateY(-1px);box-shadow:var(--sh-sm)}

.bt-btn-ghost{background:rgba(255,255,255,.10);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.bt-btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.60);color:#fff}

.bt-btn-white{background:#fff;color:var(--ff-navy);border-color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.bt-btn-white:hover{background:#f0f2ff;transform:translateY(-1px)}

.bt-btn-whatsapp{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.38)}
.bt-btn-whatsapp:hover{background:#1ebe5a;transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.50)}

/* Hero buttons — larger */
.hbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 28px;border-radius:var(--r-md);
  font-family:var(--font);font-size:16px;font-weight:var(--fw-bold);
  text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-fast),border-color var(--dur-fast);
}
.hbtn--primary{background:var(--ff-cyan);color:#fff;border-color:var(--ff-cyan);box-shadow:var(--sh-cyan)}
.hbtn--primary:hover{background:var(--ff-cyan-lt);transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,173,239,.50)}
.hbtn--ghost{background:rgba(255,255,255,.10);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.32);backdrop-filter:blur(6px)}
.hbtn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.60);color:#fff}

/* Generic .btn (legacy compat) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--r-pill);
  font-family:var(--font);font-size:15px;font-weight:var(--fw-bold);
  text-decoration:none;cursor:pointer;border:none;
  transition:background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast);
}
.btn--primary{background:var(--ff-navy);color:#fff;box-shadow:var(--sh-navy)}
.btn--primary:hover{background:var(--ff-navy-lt);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ff-navy);border:1.5px solid var(--ff-navy)}
.btn--ghost:hover{background:var(--brand-50)}
.btn--disabled,.bt-btn--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}


/* ── 7. FORMS & INPUTS ─────────────────────────────────────────────── */
.ff-input,
.contact-input,
.contact-textarea{
  width:100%;height:52px;border-radius:var(--r-md);
  border:2px solid rgba(48,39,130,.14);
  background:rgba(255,255,255,.85);padding:0 16px;
  font-family:var(--font);font-weight:var(--fw-semibold);
  font-size:15px;color:var(--text);outline:none;
  box-shadow:0 4px 12px rgba(16,24,40,.04);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.contact-textarea{height:auto;padding:14px 16px;resize:vertical;min-height:120px}
.ff-input:focus,.contact-input:focus,.contact-textarea:focus{
  border-color:rgba(48,39,130,.45);
  box-shadow:0 0 0 4px rgba(48,39,130,.08),0 4px 12px rgba(16,24,40,.06);
}
.ff-input:disabled{opacity:.6;cursor:not-allowed;background:rgba(200,200,200,.2)}

.ff-label,.contact-label{
  display:block;font-size:12px;font-weight:var(--fw-extrabold);
  letter-spacing:.02em;color:rgba(48,39,130,.90);margin:0 0 8px;
}
.contact-label{font-size:14px;margin-bottom:6px}


/* ── 8. SELECT2 OVERRIDES ───────────────────────────────────────────── */
select.ff-select2{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:-1;pointer-events:none}
.select2-container{width:100%!important;z-index:100;font-family:var(--font)}

.select2-container .select2-selection--single{
  height:52px!important;border-radius:var(--r-md)!important;
  border:2px solid rgba(48,39,130,.14)!important;
  background:rgba(255,255,255,.85)!important;
  display:flex!important;align-items:center!important;
  padding:0 16px!important;
  box-shadow:0 4px 12px rgba(16,24,40,.04);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.select2-container--open .select2-selection--single{
  border-color:rgba(48,39,130,.45)!important;
  box-shadow:0 0 0 4px rgba(48,39,130,.08)!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--text)!important;font-weight:var(--fw-semibold);font-size:15px;
  line-height:52px!important;padding:0!important;font-family:var(--font);
  display:block!important;width:100%!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.select2-container .select2-selection__placeholder{color:var(--gray-400)!important;font-weight:var(--fw-semibold)}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100%!important;top:0!important;right:10px!important;width:24px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:var(--gray-600) transparent transparent!important;
  border-style:solid!important;border-width:5px 4px 0 4px!important;
  margin:0!important;position:static!important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent var(--gray-600)!important;
  border-width:0 4px 5px 4px!important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
  color:var(--gray-600)!important;font-weight:var(--fw-extrabold)!important;
  font-size:14px!important;margin-right:10px!important;
  display:flex!important;align-items:center!important;
}

.select2-dropdown{
  border-radius:var(--r-md)!important;
  border:2px solid rgba(48,39,130,.12)!important;
  box-shadow:var(--sh-lg)!important;
  z-index:99999!important;background:#fff;
  margin-top:4px!important;overflow:hidden;
}
.select2-search__field{
  height:44px!important;border:none!important;
  border-bottom:1px solid rgba(48,39,130,.10)!important;
  border-radius:0!important;padding:10px 16px!important;
  font-weight:var(--fw-semibold);font-family:var(--font);
  outline:none!important;width:100%!important;box-sizing:border-box!important;
}
.select2-results__option{
  padding:11px 16px!important;font-weight:var(--fw-semibold);font-size:14px;
  transition:background var(--dur-fast);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background-color:rgba(48,39,130,.08)!important;
  color:var(--ff-navy)!important;font-weight:var(--fw-bold);
}

/* Select2 inside dark band (altyapı) */
.altyapi-band__card .select2-container--default .select2-selection--single{
  background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.20)!important;
}
.altyapi-band__card .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:rgba(255,255,255,.90)!important;
}
.altyapi-band__card .select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:rgba(255,255,255,.50) transparent transparent!important;
}


/* ── 9. CARDS ───────────────────────────────────────────────────────── */

/* Tarife cards */
.bt-card{
  background:rgba(255,255,255,.92);border:2px solid rgba(48,39,130,.08);
  border-radius:var(--r-lg);padding:28px 24px;position:relative;overflow:hidden;
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.bt-card:hover{border-color:rgba(48,39,130,.18);box-shadow:var(--sh-md)}
.bt-card--orange{border-top:4px solid var(--ff-amber)}
.bt-card--orange .bt-check{color:var(--ff-amber)}
.bt-card--airfiber{border-top:4px solid var(--ff-teal)}
.bt-card--airfiber .bt-check{color:var(--ff-teal)}

.bt-campaign-badge{
  position:absolute;top:-1px;right:16px;
  padding:6px 14px;border-radius:0 0 8px 8px;
  font-size:11px;font-weight:var(--fw-extrabold);color:#fff;
  text-transform:uppercase;letter-spacing:.05em;
  background:var(--grad-navy);z-index:1;
}
.bt-card--orange .bt-campaign-badge{background:linear-gradient(135deg,var(--ff-amber),var(--ff-amber-dk))}
.bt-card--airfiber .bt-campaign-badge{background:linear-gradient(135deg,var(--ff-teal),var(--ff-teal-dk))}

.bt-card-title{font-size:20px;font-weight:var(--fw-extrabold);color:var(--ff-navy);margin:0 0 16px}
.bt-feature-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.bt-feature-list li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:var(--fw-semibold);color:var(--gray-700)}
.bt-check{width:16px;height:16px;flex-shrink:0;color:var(--ff-cyan)}

.bt-card-pricing{text-align:center;padding:16px 0;border-top:2px solid rgba(48,39,130,.06);border-bottom:2px solid rgba(48,39,130,.06);margin-bottom:16px}
.bt-price{font-size:32px;font-weight:var(--fw-extrabold);color:var(--ff-navy);letter-spacing:var(--ls-tight)}
.bt-price span{font-size:15px;font-weight:var(--fw-semibold);color:var(--gray-500)}
.bt-card-actions{display:flex;flex-direction:column;gap:8px}
.bt-card-actions .bt-btn{width:100%;justify-content:center}

/* Info cards */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.info-card{border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--gray-200);padding:16px;box-shadow:var(--sh-sm)}
.info-card__title{font-weight:var(--fw-extrabold);margin:0 0 6px}
.info-card__text{color:var(--text-muted);margin:0}
@media(max-width:980px){.card-grid{grid-template-columns:1fr}}


/* ── 10. FAQ ACCORDION ──────────────────────────────────────────────── */
.bt-faq-section{padding:32px 0}
.bt-faq-title{font-size:clamp(22px,2.5vw,30px);font-weight:var(--fw-extrabold);color:var(--ff-navy);margin:0 0 28px;text-align:center}
.bt-faq-list{display:flex;flex-direction:column;gap:12px}

.bt-faq-item{
  background:rgba(255,255,255,.6);border:2px solid rgba(48,39,130,.08);
  border-radius:14px;overflow:visible;position:relative;
  transition:border-color var(--dur-base),box-shadow var(--dur-base);
}
.bt-faq-item:hover{border-color:rgba(0,173,239,.3);box-shadow:0 2px 8px rgba(0,173,239,.06)}
.bt-faq-item[open]{border-color:var(--ff-cyan);box-shadow:0 4px 12px rgba(0,173,239,.08)}

.bt-faq-question{
  padding:18px 22px;font-size:16px;font-weight:var(--fw-extrabold);
  color:var(--ff-navy);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  user-select:none;transition:color var(--dur-fast);
}
.bt-faq-question:hover{color:var(--ff-cyan)}
.bt-faq-question::-webkit-details-marker{display:none}
.bt-faq-question::after{
  content:'+';font-size:24px;color:var(--ff-cyan);margin-left:16px;
  flex-shrink:0;display:inline-block;line-height:1;
  transition:transform var(--dur-base) var(--ease-out);transform-origin:center;
}
.bt-faq-item[open] .bt-faq-question::after{transform:rotate(45deg)}

.bt-faq-answer{padding:0 22px 20px;font-size:14px;line-height:1.6;color:var(--gray-700)}
.bt-faq-answer p{margin:0}

/* Prevent layout-breaking transforms on FAQ */
.bt-faq-item,.bt-faq-item *,.bt-faq-question,.bt-faq-answer{
  will-change:auto;backface-visibility:visible;perspective:none;
}


/* ── 11. WHATSAPP WIDGET ────────────────────────────────────────────── */
.wa-widget{
  position:fixed;right:16px;bottom:16px;z-index:2000;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(48,39,130,.16);border-radius:18px;
  box-shadow:0 18px 40px rgba(2,6,23,.14);backdrop-filter:blur(8px);
  padding:14px 16px;
}
.wa-widget__main{display:flex;flex-direction:column;gap:2px;min-width:240px;color:inherit}
.wa-widget__title{font-size:18px;font-weight:var(--fw-semibold);color:var(--ff-navy);line-height:1.15}
.wa-widget__sub{font-size:12px;color:var(--text-muted);font-weight:var(--fw-semibold);line-height:1.15}
.wa-widget__toggle{
  border:1px solid rgba(48,39,130,.16);background:rgba(255,255,255,.75);
  color:var(--ff-navy);border-radius:16px;width:54px;height:54px;
  cursor:pointer;font-weight:var(--fw-extrabold);
  transition:transform var(--dur-fast);
}
.wa-widget__toggle:hover{transform:translateY(-1px)}

.wa-widget__reopen{
  position:fixed;right:16px;bottom:16px;z-index:2000;
  width:54px;height:54px;border-radius:var(--r-pill);
  border:1px solid rgba(48,39,130,.16);background:rgba(255,255,255,.92);
  box-shadow:0 18px 40px rgba(2,6,23,.14);backdrop-filter:blur(8px);
  color:var(--ff-navy);font-weight:var(--fw-extrabold);
  cursor:pointer;display:none;
}
html.wa-collapsed .wa-widget{display:none}
html.wa-collapsed .wa-widget__reopen{display:inline-flex;align-items:center;justify-content:center}


/* ── 12. INNER PAGE HERO ────────────────────────────────────────────── */
.page-hero-section{
  position:relative;overflow:hidden;
  padding:52px var(--gutter) 56px;text-align:center;
  display:flex;align-items:center;justify-content:center;
  min-height:168px;background:var(--grad-dark);
}
.page-hero-section::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px;pointer-events:none;
}
.page-hero-section::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ff-cyan) 40%,rgba(0,173,239,.35) 60%,transparent);
}
.hero-content-wrapper{position:relative;z-index:1;max-width:700px;margin:0 auto}
.page-hero-section h1{font-size:clamp(22px,3vw,36px);color:#fff;margin-bottom:12px}
.breadcrumb{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--fw-medium);color:rgba(255,255,255,.58)}
.breadcrumb a{color:rgba(255,255,255,.75);transition:color var(--dur-fast)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .separator{opacity:.4}
.breadcrumb .current{color:rgba(255,255,255,.88);font-weight:var(--fw-bold)}


/* ── 13. UTILITIES ──────────────────────────────────────────────────── */
.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}
.spacer-sm{height:16px}.spacer-md{height:32px}.spacer-lg{height:48px}
.field-honey{position:absolute;left:-9999px;opacity:0;pointer-events:none}

/* Contact alerts */
.contact-alert{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-radius:var(--r-md);font-size:14px;font-weight:var(--fw-semibold);margin-bottom:20px;
}
.contact-alert--success{background:rgba(16,185,129,.08);border:1.5px solid rgba(16,185,129,.25);color:#065f46}
.contact-alert--error{background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.25);color:#b91c1c}
.contact-alert svg{flex-shrink:0}

/* Consent */
.contact-consent{margin:16px 0 20px}
.contact-consent-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.contact-checkbox{margin-top:3px;accent-color:var(--ff-navy)}
.contact-checkbox-text{font-size:13px;color:var(--gray-600);line-height:1.5}
.contact-checkbox-text a{color:var(--ff-cyan);font-weight:var(--fw-bold)}



/* ═══════════════════════════════════════════════════════════════════════
   WhatsApp Widget — Panel & Trigger (yeni yapı)
   ═══════════════════════════════════════════════════════════════════════ */

/* Trigger — sağ alt köşede sabit yuvarlak buton */
.wa-widget__trigger{
  position:fixed;right:20px;bottom:20px;z-index:2001;
  width:56px;height:56px;
  border-radius:50%;border:none;
  background:#25D366;
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.wa-widget__trigger svg{width:28px;height:28px}
.wa-widget__trigger:hover{
  transform:scale(1.08);
  box-shadow:0 6px 24px rgba(37,211,102,.5);
}

/* Panel — trigger'ın üstünde açılan kart */
.wa-widget__panel{
  position:fixed;right:20px;bottom:88px;z-index:2002;
  width:320px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.96);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.wa-widget__panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* Panel close button */
.wa-widget__panel-close{
  position:absolute;top:12px;right:12px;z-index:1;
  width:28px;height:28px;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.2);
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.wa-widget__panel-close:hover{background:rgba(255,255,255,.35)}

/* Panel header */
.wa-widget__panel-head{
  background:#075E54;
  padding:20px 18px;
  display:flex;align-items:center;gap:12px;
  color:#fff;
}
.wa-widget__panel-icon{
  width:40px;height:40px;flex-shrink:0;
  background:#25D366;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.wa-widget__panel-icon svg{width:22px;height:22px;fill:#fff}
.wa-widget__panel-title{
  font-size:15px;font-weight:700;color:#fff;line-height:1.2;
}
.wa-widget__panel-sub{
  font-size:12px;color:rgba(255,255,255,.7);margin-top:2px;
}

/* Panel link — "Şimdi Mesaj Gönder" butonu */
.wa-widget__panel-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:16px;padding:12px 20px;
  background:#25D366;
  color:#fff;
  border-radius:24px;
  font-size:14px;font-weight:600;
  text-decoration:none;
  transition:background .2s;
}
.wa-widget__panel-link:hover{background:#20BD5A;color:#fff}
.wa-widget__panel-link svg{width:16px;height:16px;fill:#fff}

/* Mobile responsive */
@media(max-width:480px){
  .wa-widget__panel{right:12px;bottom:78px;width:calc(100vw - 24px);max-width:320px}
  .wa-widget__trigger{right:14px;bottom:16px;width:50px;height:50px}
  .wa-widget__trigger svg{width:24px;height:24px}
}

/* Çerez bandı görünürken widget bandın üstüne çıkar (--ff-cookie-h JS ile ölçülür) */
html.has-cookie-banner .wa-widget__trigger{bottom:calc(20px + var(--ff-cookie-h, 84px))}
html.has-cookie-banner .wa-widget__panel{bottom:calc(88px + var(--ff-cookie-h, 84px))}
@media(max-width:480px){
  html.has-cookie-banner .wa-widget__trigger{bottom:calc(16px + var(--ff-cookie-h, 84px))}
  html.has-cookie-banner .wa-widget__panel{bottom:calc(78px + var(--ff-cookie-h, 84px))}
}

/* Override: wa-widget container artık sadece wrapper, görünmez */
.wa-widget{
  position:fixed;right:0;bottom:0;z-index:2000;
  display:block;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  backdrop-filter:none !important;
  pointer-events:none;
}
.wa-widget > *{pointer-events:auto}

/* Air Fiber campaign badge — cyan (modifier class) */
.bt-campaign-badge--airfiber{
  background:linear-gradient(135deg, var(--ff-teal, #06b6d4), var(--ff-teal-dk, #0891b2)) !important;
}

/* ── Cookie Banner ─────────────────────────────────────────────────── */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:3000;
  background:rgba(13,11,46,.97);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,173,239,.15);
  padding:16px 24px;
  animation:cookieSlideUp .4s ease;
}
@keyframes cookieSlideUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.cookie-banner__inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.cookie-banner__text{
  flex:1;min-width:0;
}
.cookie-banner__text p{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,.8);
  line-height:1.5;
}
.cookie-banner__text a{
  color:var(--ff-cyan, #00ADEF);
  font-weight:var(--fw-semibold, 600);
  text-decoration:none;
}
.cookie-banner__text a:hover{text-decoration:underline}
.cookie-banner__actions{
  display:flex;gap:10px;flex-shrink:0;
}
.cookie-banner__btn{
  padding:9px 20px;
  border-radius:var(--r-pill, 50px);
  font-size:13px;
  font-weight:var(--fw-bold, 700);
  cursor:pointer;
  border:none;
  transition:all .2s;
  font-family:var(--font);
}
.cookie-banner__btn--accept{
  background:var(--ff-cyan, #00ADEF);
  color:#fff;
}
.cookie-banner__btn--accept:hover{background:var(--ff-cyan-dk, #0091CC)}
.cookie-banner__btn--reject{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);
}
.cookie-banner__btn--reject:hover{
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
@media(max-width:640px){
  .cookie-banner__inner{flex-direction:column;text-align:center;gap:14px}
  .cookie-banner__actions{width:100%;justify-content:center}
}

/* Navbar dropdown — hover ile açılsın (desktop) */
@media(min-width:1025px){
  .nav__dropdown:hover .nav__dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
    pointer-events:auto;
  }
  .nav__dropdown:hover .nav__caret{transform:rotate(180deg)}
}