/* =========================
       ROOT & BASE VARIABLES
       ========================= */
    :root{
      /* Senin renklerin */
      --primary: #02797e;
      --dark:#0f0f0f;
      --text:#1a1a1a;
      --muted: #535353;
      --bg:#ffffff;
      --shade: #f5f5f5;
      --ok:#0a7f2e;

      /* Ek yardımcı değişkenler (seninkileri etkilemez) */
      --line:#e6e7eb;
      --radius:14px;
      --radius-sm:10px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --shadow-sm:0 6px 18px rgba(0,0,0,.06);
    }

    *{box-sizing:border-box;}
    html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}

    /* =========================
       LAYOUT
       ========================= */
    .container{width:min(1200px,92%);margin:0 auto}
    .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap: 12px;}
    .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    @media (max-width:1000px){.grid-2{grid-template-columns:1fr}}
    @media (max-width:900px){.grid-4{grid-template-columns: 1fr;}}

    /* =========================
       BUTTONS & BADGES
       ========================= */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding:14px 18px;border-radius:8px;border:1px solid transparent;
      font-weight:600;cursor:pointer;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
      will-change:transform, box-shadow;
    }
    .btn-primary{background: var(--primary);color:#fff;box-shadow:0 6px 16px rgba(2,121,126,.18)}
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,121,126,.22)}
    .btn-light{background:#fff;border-color:#e5e7eb}
    .btn-light:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
    .btn:focus,.close:focus,input:focus{outline:2px solid #8ab4ff;outline-offset:2px}

    .badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
    .badge-save{background:#e9ffed;color: var(--primary);border: 1px solid #bcdcc2;}

    /* =========================
       TOPBAR
       ========================= */
    .topbar{background:#fff;border-bottom:1px solid #eee;padding:8px 0;}
    .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .brand{display:flex;gap:10px;align-items:center}
    .brand img{max-width:120px}
    .head-actions{display:flex;gap:10px;align-items:center}

    /* Header campaign inline */
    .header-campaign{
      display:flex;align-items:center;gap:10px;
      background:#fff8f2;border:1px solid #ffe2cc;border-radius:8px;
      padding:8px 14px;white-space:nowrap;overflow-x:auto;scrollbar-width:none
    }
    .header-campaign::-webkit-scrollbar{display:none}
    .hc-title{color:#b00000;font-weight:700}
    .hc-sub{color:#334155}
    .hc-divider{color:#999}
    .hc-timer{font-weight:700;font-variant-numeric:tabular-nums}
    .hc-spots{color:#111;font-weight:600}

    /* =========================
       HERO
       ========================= */
    .hero{position:relative;background:#ffffff;}
    .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:28px 0}
    @media (max-width:1000px){.hero-inner{grid-template-columns:1fr}}
    .hero h1{font-size:clamp(26px,4.2vw,44px);line-height:1.1;margin:18px 0}
    .hero p{color:var(--muted);font-size:clamp(14px,2.6vw,18px);margin:18px 0}
    .cta-row{display:flex;margin-top:2rem;gap:10px;flex-wrap: wrap;flex-direction: column;}
    .trust{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}
    .trust img{height: 80px;margin-right:1rem}

    .hero-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:10px;width:100%;margin-left:auto;margin-right:auto;box-shadow:var(--shadow-sm)}
    .hero-slider{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:10px}
    .hero-slider img{width:100%;height: 317px;object-fit:cover;object-position:50% 5%;scroll-snap-align:center;border-radius:10px}
    .slider-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
    .slider-dots i{width:8px;height:8px;border-radius:50%;background:#ddd}
    .slider-dots i.active{background:var(--primary)}

    /* =========================
       SECTIONS, CARDS, LISTS
       ========================= */
    section{padding:60px 0;}
    .section-muted{background:var(--shade)}
    .section-title{font-size:clamp(22px,3vw,30px);margin:0 0 6px}
    .section-sub{color:var(--muted);margin:14px 0 38px;max-width:600px;}

    .card{
      border:1px solid #eee;border-radius:12px;padding:32px;background:#fff;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      box-shadow:0 1px 0 rgba(0,0,0,.02);
    }
    .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dcdde2}
    .cards .card .icon{width:28px;height:28px;opacity:.9;margin-bottom:8px}

    .list{display:grid;gap:10px;margin:0;padding:0}
    .list li{list-style:none;padding-left:28px;position:relative}
    .list li:before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--ok)}

    .doc{width:100%;height:260px;object-fit:cover;border-radius:10px;margin-bottom:2rem;}
    .doc-price {object-fit: contain;background:black;width:100%;height:260px;border-radius:10px;margin-bottom: 2rem;}

    /* =========================
       BEFORE & AFTER
       ========================= */
    .bna{display:grid;grid-template-columns: repeat(4,1fr);gap:10px}
    @media (max-width:900px){.bna{grid-template-columns:repeat(2,1fr)}}
    a.bna-item img{border-radius:12px;border:3px solid #ffffff;transition:transform .18s ease, box-shadow .18s ease}
    a.bna-item:hover img{transform:scale(1.02);box-shadow:var(--shadow)}

    /* =========================
       TABLE
       ========================= */
    table{width:100%;border-collapse:separate;border-spacing:0 10px}
    th,td{text-align:left;padding:14px;background:#fff;border:1px solid #eee}
    th{background:#fafafa;font-weight:700}

    /* =========================
       MODAL & FORM
       ========================= */
    .modal{position:fixed;inset:0;background:rgba(15,15,15,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:50}
    .modal.open{display:flex}
    .modal-card{width:min(560px,100%);background:#fff;border-radius:14px;border:1px solid #e5e7eb;padding:20px;box-shadow:var(--shadow)}
    .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
    .close{background:none;border:0;font-size:22px;cursor:pointer}
    .form{display:grid;gap:12px;margin-top:8px}
    .field{display:flex;flex-direction:column;gap:6px}
    label{font-weight:600}
    input[type="text"],input[type="tel"]{height:48px;border:1px solid #e5e7eb;border-radius:10px;padding:0 14px;font-size:16px;transition:border-color .18s ease, box-shadow .18s ease}
    input[type="text"]:focus,input[type="tel"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(2,121,126,.12)}
    .legal{font-size:12px;color:var(--muted);margin-top:2rem !important;}
    .note{font-size:12px;color:#0b5;display:none}
    .note.show{display:block}
    .m0{margin:0}
    .m6{margin:6px 0 10px}

    /* =========================
       STICKY CTA (MOBILE)
       ========================= */
    .sticky-cta{position:fixed;left:0;right:0;bottom:0;display:none;gap:10px;background:#fff;border-top:1px solid #eee;padding:10px;z-index:40}
    .sticky-cta .btn{flex:1}
    @media (max-width:900px){.sticky-cta{display:flex}}

    /* =========================
       WHATSAPP FLOAT
       ========================= */
    .wa-float{position:fixed;right:14px;bottom:82px;z-index:41}
    @media (max-width:900px){.wa-float{display:none}} /* mobilde gizle */

    /* =========================
       FOOTER
       ========================= */
    .footer{padding:22px 0;border-top:1px solid #eee;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}

    /* =========================
       LIGHTBOX
       ========================= */
    .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
    .lightbox.open{display:flex}
    .lightbox-content{max-width:min(920px,92vw);max-height:86vh;margin:0;text-align:center;color:#fff}
    .lightbox-content img{max-width:100%;max-height:80vh;display:block;margin:0 auto;border-radius:8px;box-shadow:var(--shadow)}
    .lightbox-content figcaption{margin-top:8px;font-size:14px;opacity:.9}
    .lightbox-close{position:absolute;top:16px;right:16px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;width:40px;height:40px;font-size:22px;cursor:pointer;box-shadow:var(--shadow-sm)}
    .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:999px;width:42px;height:42px;font-size:20px;cursor:pointer;box-shadow:var(--shadow-sm)}
    .lightbox-nav.prev{left:16px}
    .lightbox-nav.next{right:16px}
    @media (max-width:900px){.lightbox-nav{display:none}}

    /* =========================
       COUNTDOWN
       ========================= */
    #countdown{ background:#fff; }
    #countdown .countdown-wrap{
    }
    #countdown .countdown-item{
      text-align:center;
      min-width: 23.3%;
      padding:10px 8px;
      border:1px solid #e5e7eb;
      border-radius:10px;
      background: #f5f5f5;
      box-shadow:0 1px 0 rgba(0,0,0,.02);
    }
    #countdown .count-num{
      font-size:34px; font-weight:800; line-height:1; letter-spacing:1px;
      display:block;
    }
    #countdown .count-label{ font-size:12px; color:#6b7280; text-transform:uppercase; }
    #countdown .count-sep{ font-size:26px; font-weight:700; color:#9ca3af; }

    #countdown .spots{ margin-top:8px; }
    #countdown .spots-text{/* display:flex; *//* gap:8px; *//* align-items:baseline; *//* justify-content:center; *//* margin: 25px 0px; */}
    #countdown .spots-bar{
    }
    #countdown .spots-fill{
      height:100%;
      background: var(--primary);
      width:88%; /* 88% dolu, 12 spot kaldı görseli */
    }

    /* =========================
       PERKS MEDIA
       ========================= */
    #perks .card-media{
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 16px;
      align-items: stretch;
    }
    #perks .card-media .media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      object-position: 22% 50%;
    }
    #perks .card-media .content{
      display: grid;
      align-content: start;
      gap: 10px;
    }
    @media (max-width: 900px){
      #perks .card-media{ grid-template-columns: 1fr; }
    }
    figure.media {padding:0 !important;margin:0;}

    /* =========================
       EDGE ACTIONS (RIGHT STRIP)
       ========================= */
    .edge-actions{
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: grid;
      gap: 10px;
      z-index: 70;
      pointer-events: none;
    }
    .edge-actions .edge-btn{
      pointer-events: auto;
      position: relative;
      width: 48px;
      height: 220px;
      border: 0;
      border-radius: 10px 0 0 10px;
      color: #fff;
      background: #b00000;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0,0,0,.18);
      transform: rotate(0deg);
      transform-origin: right center;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
    }
    .edge-actions .edge-btn span{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      letter-spacing: .2px;
      white-space: nowrap;
      font-size: 14px;
      rotate: 90deg;
    }
    .edge-actions .edge-primary{background:#b00000;}
    .edge-actions .edge-whatsapp{background:#25D366;}
    .edge-actions .edge-dark{background:#111827;}
    .edge-actions .edge-dark #edge-cd{font-weight:800;font-style:normal}
    .edge-actions .edge-dark #edge-spots{font-style:normal;opacity:.85;font-weight:600}
    .edge-actions .edge-btn:hover{filter:brightness(1.03)}

    @media (max-width: 900px){
      .edge-actions{ display:none; }
      /* Mobil üst şerit varyasyonu (istersen aç) */
      .edge-actions{
        position: fixed; top:0; left:0; right:0; transform:none;
        display:flex; gap:8px; padding:6px;
        background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
        z-index:90; pointer-events:auto;
      }
      .edge-actions .edge-btn{
        transform:none; width:30%; height:33px; border-radius:10px; flex:1 1 0; padding:0 10px;
        box-shadow:0 4px 12px rgba(0,0,0,.12); rotate:0deg;
      }
      .edge-actions .edge-btn span{font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;rotate:0deg}
      .edge-actions .edge-dark #edge-spots{opacity:.9;margin-left:6px}
      button.edge-btn.edge-primary.js-open-form{display:none}
    }

    /* =========================
       TYPO & SMALL TWEAKS
       ========================= */
    h3{margin-top:0}
    h2{margin:12px 0}
    img.button-svg{max-width:28px;filter:invert(1);rotate:28deg;margin-right:12px}
    button.btn.btn-primary.js-open-form{min-width:182px}
    input#phone{width:100%}

    /* =========================
       REVEAL ANIMATIONS
       (IntersectionObserver uyumlu)
       ========================= */
    :root { --reveal-distance: 22px; }
    .reveal{opacity: 1;transform:translateY(var(--reveal-distance));transition:transform .8s ease, opacity .8s ease;transition-delay:var(--reveal-delay,0ms);will-change:transform,opacity}
    .reveal.is-visible{opacity:1;transform:none}
    .reveal-up{transform:translateY(var(--reveal-distance))}
    .reveal-right{transform:translateX(24px)}
    .reveal-zoom{transform:scale(.96)}
    @media (prefers-reduced-motion: reduce){
      .reveal,.reveal.is-visible{opacity:1;transform:none;transition:none}
    }

    /* =========================
       PRICE BADGE (yeşil etiket)
       ========================= */
    .price{
      display:inline-flex; align-items:center; width:100%;
      gap:8px; background:#f9f9f9; border:1px solid #e0e0e0;
      border-radius:6px; padding:6px 12px; margin:0 0 18px 0;
      font-weight:600; font-family:"Inter", sans-serif;
    }
    .price-old{color:#999;font-size:.95rem;text-decoration:line-through}
    .price-new{
      background:#24d366; color:#fff; font-weight:700; padding:4px 10px;
      border-radius:4px; font-size:1rem; line-height:1.2; box-shadow:0 2px 4px rgba(0,0,0,0.08)
    }
    .card:hover .price-new{transform:scale(1.05);transition:all .25s ease;background:#19ad51}
    span.price-old{color:#b00000}

    /* =========================
       MICRO INTERACTIONS
       ========================= */
    .card h3{display:flex;align-items:center;gap:8px}
    .card h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0));margin-left:6px}
    .card:hover h3::after{background:linear-gradient(90deg, rgba(2,121,126,.35), rgba(0,0,0,0))}

    /* ========== Root & Reset ========== */
    :root{
      --brand: #02797e;
      --brand-ink: #02797e;
      --ink:#1b1f23;
      --muted:#6b7280;
      --bg:#ffffff;
      --bg-alt:#f7f7f8;
      --card:#ffffff;
      --line:#e6e7eb;
      --radius:14px;
      --radius-sm:10px;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --shadow-sm:0 6px 18px rgba(0,0,0,.06);
      --container:1160px;
    }

    *{box-sizing:border-box;}
    html{scroll-behavior:smooth}
    body{
      margin:0; background:var(--bg); color:var(--ink);
      font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    img,video{}
    a{text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:var(--container);margin:0 auto;padding: 0 12px;}

    /* ========== Topbar ========== */
    .topbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(10px); background:rgba(255,255,255,.82); border-bottom:1px solid var(--line)}
    .topbar .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
    .topbar .brand img{height:34px}
    .header-campaign{display:flex; align-items:center; gap:10px; font-size:.925rem; color:var(--muted)}
    .header-campaign b{color:var(--ink)}
    .hc-divider{opacity:.5}
    .head-actions .btn{white-space:nowrap}

    /* ========== Badges & Buttons ========== */
    .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;font-weight:600;font-size: .7rem;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
    .badge-save{}

    .btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; border-radius:10px; padding:12px 16px; font-weight:700; transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
    .btn img.button-svg{height:18px}
    .btn-primary{color:#fff;box-shadow: 0 6px 16px rgb(2 121 126 / 26%);}
    .btn-primary:hover{transform:translateY(-1px);box-shadow: 0 10px 22px rgb(2 121 126 / 29%);background: #004346;}
    .btn-light{background: #f5f5f5;color: black;border: 1px solid #5f5f5f;}
    .btn-light:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}

    /* ========== Hero ========== */
    .hero{
      padding:48px 0 22px;
      background: radial-gradient(1000px 600px at 80% -5%, rgb(2 121 126 / 13%), transparent 60%), linear-gradient(#fff, #fff);
    }
    .hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
    .hero h1{margin:10px 0 6px; font-size:44px; line-height:1.1; letter-spacing:-.02em}
    .hero h2{margin:0 0 12px; color:#2b2f36; font-weight:600}
    .hero p{color:#4a4f57}
    .trust{display:flex; gap:12px; align-items:center; margin:14px 0}
    .cta-row{}

    /* — hero card & slider (scroll-snap ile uyumlu) — */
    .hero-card{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}

    .hero-slider::-webkit-scrollbar{display:none}
    .slider-dots{display:flex; gap:6px; justify-content:center; margin-top:8px}
    .slider-dots i{width:8px; height:8px; border-radius:50%; background:#d4d4d8}
    .slider-dots i.active{}

    /* ========== Sections ========== */
    .section-muted{background:var(--bg-alt)}
    section{padding:54px 0}
    .section-title{font-size:28px; margin:0 0 8px}
    .section-sub{color:var(--muted); margin:0 0 22px}

    /* ========== Cards & Grids ========== */
    .cards, .grid-2, .grid-4{display:grid; gap:18px}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:20px;
      box-shadow:var(--shadow-sm);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#dcdde2}
    .card .icon{height:34px; width:auto; opacity:.9}
    ul.list{margin:10px 0 0; padding:0 0 0 18px}
    img.doc, img.doc-price{border-radius:12px; margin-bottom:12px}
    #packages .card .doc-price{aspect-ratio:16/9; object-fit:cover} /* paket görsellerine düzgün kırpma */

    /* ========== PRICE (badge) ========== */
    .price{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:#fff;
      border: 1px dashed rgb(2 121 126);
      border-radius:999px;
      padding:8px 12px;
      margin:10px 0 14px;
      box-shadow: 0 4px 14px rgb(2 121 126 / 24%);
    }
    .price-old{color:#9b9faa; font-size:.95rem; text-decoration:line-through}
    .price-new{color:#fff;font-weight:800;padding:6px 12px;border-radius:999px;letter-spacing:.2px}
    .card:hover .price-new{transform:translateY(-1px); transition:transform .18s ease}

    /* ========== Before & After grid ========== */
    .bna{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
    .bna .bna-item img{border-radius:12px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease}
    .bna .bna-item:hover img{transform:scale(1.02); box-shadow:var(--shadow)}

    /* ========== Lightbox ========== */
    .lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:60; padding:20px}
    .lightbox[aria-hidden="false"]{display:flex}
    .lightbox-content{margin:0; max-width:min(90vw,1000px)}
    .lightbox-content img{width:100%; border-radius:12px; box-shadow:var(--shadow)}
    .lightbox-close,.lightbox-nav{position:absolute; top:18px; background:#fff; border:0; width:40px; height:40px; border-radius:999px; box-shadow:var(--shadow); cursor:pointer}
    .lightbox-close{right:18px}
    .lightbox-nav.prev{left:18px; top:50%; transform:translateY(-50%)}
    .lightbox-nav.next{right:18px; top:50%; transform:translateY(-50%)}

    /* ========== Countdown ========== */
    .countdown-wrap{display:flex; align-items:center; gap:10px; justify-content:center; padding:6px 10px; border:1px dashed var(--line); border-radius:12px; background:#fff}
    .countdown-item{display:grid; place-items:center; padding:6px 10px; min-width:72px; border-radius:10px; background:linear-gradient(#fff,#f9fafb); border:1px solid var(--line)}
    .count-num{font-size:20px; font-weight:800}
    .count-label{font-size:.8rem; color:var(--muted)}
    .count-sep{opacity:.4}
    .spots{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0}
    .spots-text{display:grid;}
    .spots-bar{flex:1;height:8px;background: #b0000042;border-radius:999px;width: 100%;overflow:hidden;}
    .spots-fill{height:100%; background:linear-gradient(90deg, var(--brand), #ff6a6a)}

    /* ========== Payments cards ========== */
    #payments .card h3{margin:6px 0 8px}
    #payments .list li{margin:6px 0}

    /* ========== Table ========== */
    table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px}
    thead th{background: var(--primary);color:#fff;text-align:left;padding:12px}
    tbody td{padding:12px; border-bottom:1px solid var(--line); background:#fff}
    tbody tr:last-child td{border-bottom:0}
    tbody tr:hover td{background:#fafafa}

    /* ========== Edge Actions ========== */
    .edge-actions{right:14px;z-index: 90;}
    .edge-btn{transform-origin:right center; transform:rotate(-90deg); background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; box-shadow:var(--shadow-sm); cursor:pointer}
    .edge-primary{background:var(--brand); color:#fff; border-color:transparent}
    .edge-dark{background:#0f172a; color:#fff; border-color:#0f172a}
    .edge-whatsapp{background:#22c55e; color:#fff; border-color:#22c55e}
    .edge-btn:hover{filter:brightness(.96)}

    /* ========== Sticky CTA (mobile) ========== */
    .sticky-cta{
      position:sticky; bottom:0; z-index:45; padding:10px 14px; display:none;
      background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-top:1px solid var(--line)
    }
    @media (max-width: 860px){ .sticky-cta{display:flex; gap:10px; justify-content:space-between} }

    /* ========== Modal ========== */
    .modal{position:fixed;inset: 0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:70;padding:20px}
    .modal-card{
      width:min(620px,94vw); background:#fff; border-radius:16px; border:1px solid var(--line);
      box-shadow:var(--shadow); padding:18px
    }
    .modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
    .modal .m6{margin:8px 0 12px; color:var(--muted)}
    .form .field{display:grid; gap:6px; margin:10px 0}
    .form input{height:46px; border:1px solid var(--line); border-radius:10px; padding:0 12px; outline:none}
    .form input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(176,0,0,.15)}
    .note{display:none; font-size:.9rem; color:var(--muted); margin-top:8px}

    /* ========== Footer ========== */
    footer{padding: 1.2rem;border-top:1px solid var(--line);background:#fff}
    footer nav{display:flex; gap:14px}
    footer a{color:#4b5563}
    footer a:hover{color:var(--brand)}

    /* ========== Accessibility focus ========== */
    :focus-visible{outline:3px solid rgba(176,0,0,.35); outline-offset:2px}

    /* ========== Section specific tweaks ========== */
    #perks .card-media{}
    #perks .media img{box-shadow:var(--shadow-sm)}

    /* ========== Utilities ========== */
    .m0{margin:0}
    .m6{margin:6px 0}
    [aria-live="polite"]{contain:layout paint}

    /* ========== Reveal animations (compatible with existing JS) ========== */
    .reveal{}
    .reveal.is-visible{}
    .reveal-right{transform:translateX(24px)}
    .reveal-zoom{transform:scale(.96)}
    @media (prefers-reduced-motion: reduce){
      .reveal,.reveal.is-visible{opacity:1; transform:none; transition:none}
    }

    /* ========== Responsive ========== */
    @media (max-width: 1100px){
      .hero-inner{grid-template-columns:1fr; gap:20px}
      .hero h1{font-size:38px}
      .grid-4{grid-template-columns: repeat(1,1fr);}
      #perks .card-media{grid-template-columns:1fr}
    }

    @media (min-width: 1100px){
      .cta-row {flex-direction: row;}
      #countdown .spots-text {
        display: flex;
        gap: 8px;
        align-items: baseline;
        justify-content: center;
        margin: 25px 0px;
      }
      .hero-slider img { height: 498px; }
    }

    @media (max-width: 720px){
      section{padding:40px 0}
      .grid-2{grid-template-columns:1fr}
      .bna{grid-template-columns:repeat(2,1fr)}
      .hero h1{font-size: 36px;max-width: 80%;margin-top: 1rem;margin-bottom: 1rem;}
      .edge-actions{}
      .hero-card{padding:8px}
      .hero-slider img{}
      .countdown-item.reveal.reveal-up.is-visible { min-width: 19% !important; }
      #countdown .count-num { font-size: 26px; }
      #countdown .count-label { font-size: 8px; margin-top: 4px; }
      .spots.reveal.reveal-up.is-visible { margin-top: 16px !important; margin-bottom: 16px !important; }
    }
    
    /* =========================
       MOBILE TWEAKS (MAIN REQUEST AREA)
       ========================= */
    @media (max-width: 768px){
      /* 1. Üst barı görünür yap (daha önce display:none vardı) */
      .topbar{
          display: block !important; 
          z-index: 99999; 
          position: relative;
      }

      .topbar-inner{
          /* 2. Logoları yan yana hizala */
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          justify-content: space-between !important;
          align-items: center;
          gap: 10px;
          text-align: left;
      }

      .header-campaign{
          flex-wrap:wrap;
          justify-content:center;
          white-space:normal;
          display:none; /* Yer açmak için kampanya yazısını gizliyoruz */
      }
      
      .head-actions {
          width: auto;
          justify-content: flex-end;
      }

      /* 3. Butonu mobilde gizle */
      .head-actions .btn {
          display: none !important;
      }

      /* 4. İkinci logonun inline float stillerini sıfırla */
      .head-actions img {
          float: none !important;
          margin: 0 !important;
          padding-left: 0 !important;
          max-width: 80px;
      }
      
      /* Diğer mobil ayarlar */
      figure.hero-card.reveal.reveal-zoom.is-visible{margin-top: 1rem;}
      figure.hero-card{order:-1}
      .container.footer{}
    }

    /* ========== Small cosmetic micro-interactions ========== */
    .card h3{display:flex; align-items:center; gap:8px}
    .card h3::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0)); margin-left:6px}
    .card:hover h3::after{background: linear-gradient(90deg, rgb(2 121 126 / 46%), rgba(0, 0, 0, 0));}

    small.left { text-align: left; }
    small.right { text-align: right; float: right; }

    div#lightbox {
        z-index: 99999;
    }

    div#leadModal {
        z-index: 9999;
    }

    .stories-container {
          max-width: 1200px;
          margin: 0 auto;
        }

        .stories-strip {
          position: relative;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
          scrollbar-color: #ccc transparent;
        }

        .stories-strip::-webkit-scrollbar {
          height: 6px;
        }

        .stories-strip::-webkit-scrollbar-track {
          background: transparent;
        }

        .stories-strip::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 3px;
        }

        .stories-list {
          display: flex;
          gap: 12px;
          padding: 10px 0;
          list-style: none;
        }
    .stories-strip {
        padding: 0;
    }
        .story-card {
          position: relative;
          width: calc((100% - 36px) / 3.5);
          aspect-ratio: 9 / 16;
          flex-shrink: 0;
          border-radius: 12px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.2s;
        }

        .story-card:hover {
        }

        .story-card:focus {
          outline: 3px solid #667eea;
          outline-offset: 2px;
        }

        .story-thumbnail {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .story-overlay {
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.2s;
        }

        .story-card:hover .story-overlay {
          opacity: 1;
        }

        .play-icon {
          width: 48px;
          height: 48px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .play-icon::after {
          content: '';
          width: 0;
          height: 0;
          border-left: 16px solid #333;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          margin-left: 4px;
        }

        .modal {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.95);
          z-index: 9999;
          align-items: center;
          justify-content: center;
        }

        .modal.active {
          display: flex;
        }

        .modal-content {
          position: relative;
          width: 100%;
          height: 100%;
          max-width: 500px;
          max-height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .progress-bar {
          position: absolute;
          top: 20px;
          left: 20px;
          right: 20px;
          height: 3px;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 2px;
          overflow: hidden;
          z-index: 10;
        }

        .progress-fill {
          height: 100%;
          background: #fff;
          width: 0%;
          transition: width 0.1s linear;
        }

        .modal-video {
          width: 100%;
          height: 100%;
          object-fit: contain;
          background: #000;
        }

        .modal-controls {
          position: absolute;
          bottom: 40px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 12px;
          z-index: 10;
        }

        .control-btn {
          width: 48px;
          height: 48px;
          background: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;
          color: #fff;
          font-size: 18px;
        }

        .control-btn:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: scale(1.1);
        }

        .control-btn:focus {
          outline: 2px solid #fff;
          outline-offset: 2px;
        }

        .close-btn {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 40px;
          height: 40px;
          background: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: 50%;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24px;
          z-index: 10;
        }

        .close-btn:hover {
          background: rgba(255, 255, 255, 0.3);
        }

        .nav-area {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 30%;
          cursor: pointer;
          z-index: 5;
        }

        .nav-area.prev {
          left: 0;
        }

        .nav-area.next {
          right: 0;
        }

        .error-message {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(255, 59, 48, 0.9);
          color: #fff;
          padding: 16px 24px;
          border-radius: 8px;
          font-size: 14px;
          z-index: 20;
          text-align: center;
        }

        @media (max-width: 768px) {
          .story-card {
            width: calc((100% - 12px) / 1.5);
          }

          p.wd-reviews-text {
        max-width: 85%;
    }

          footer {
        text-align: center;
        width: 100%;
    }

    small.right {
        float: none;
        width: 100%;
        text-align: center;
        display: block;
        position: relative;
    }

    small.left {
    }
          header.hero {
        padding-top: 4rem;
    }

    footer {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }

          .modal-content {
            max-width: 100%;
          }

          .control-btn {
            width: 44px;
            height: 44px;
          }
        }
        

    /* Nav buttons wrapper context */
    .stories-container{ position:relative; }

    /* Desktop nav buttons */
    .stories-nav{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius:50%;
      border:1px solid #e5e7eb;
      background:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,.12);
      display:grid;
      place-items:center;
      cursor:pointer;
      z-index:3;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .stories-nav span{
      font-size:20px;
      line-height:1;
      font-weight:700;
      color:#111827;
    }
    .stories-nav:hover{
      transform:translateY(-50%) scale(1.06);
      box-shadow:0 10px 22px rgba(0,0,0,.16);
    }
    .stories-nav:active{
      transform:translateY(-50%) scale(0.98);
    }

    /* Konumlar */
    .stories-nav.prev{ left:-6px; }
    .stories-nav.next{ right:-6px; }

    /* Şeridin üstünde tıklanabilir kalsın */
    .stories-strip{ position:relative; z-index:1; }

    /* Mobilde gizle */
    @media (max-width: 768px){
      .stories-nav{ display:none; }
      .countdown-item.is-visible {
        min-width: 19.3% !important;
    }
    }
    b#hc-left {
        color: #009600;
    }

    /* ====== Reviews component (isolated) ====== */
    .wd-reviews { padding: 54px 0; }
    .wd-reviews-title { margin: 0 0 8px; font-size: 28px; }
    .wd-reviews-sub { margin: 0 0 18px; color: var(--muted); }

    /* rail + strip */
    .wd-reviews-rail { position: relative; }
    .wd-reviews-strip {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: clamp(240px, 28vw, 320px);
      gap: 14px;
      padding: 6px 6px 12px;
      margin: 0;
      list-style: none;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .wd-reviews-strip::-webkit-scrollbar { height: 8px; }
    .wd-reviews-strip::-webkit-scrollbar-thumb {
      background: #d1d5db; border-radius: 4px;
    }
    .wd-reviews-strip::-webkit-scrollbar-track { background: transparent; }

    /* card */
    .wd-reviews-card{
      scroll-snap-align: start;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 2rem;
      box-shadow: 0 6px 18px rgba(0,0,0,.06);
      display: grid;
      gap: 10px;
    }
    .wd-reviews-head{ display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
    .wd-reviews-avatar{
      width: 44px; height: 44px; border-radius: 50%;
      display: grid; place-items: center;
      font-weight: 800; letter-spacing: .4px;
      background: linear-gradient(135deg, #02797e, #7ad2d6);
      color:#fff;
    }
    .wd-reviews-name{ font-weight: 700; }

    /* stars */
    .wd-reviews-stars{
      position: relative; height: 18px; width: 112px; /* 5 yıldız x 22px + aralık */
      display: inline-block;
    }
    .wd-reviews-stars-bg,
    .wd-reviews-stars-fill{
      position: absolute; inset: 0;
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="20" viewBox="0 0 110 20" fill="none"><g fill="%23000"><path d="M10 0l2.94 6.01 6.64.97-4.79 4.67 1.13 6.59L10 15.88 4.08 18.24l1.13-6.59L.42 6.98l6.64-.97L10 0Z"/><use href="%23s" x="22"/><use href="%23s" x="44"/><use href="%23s" x="66"/><use href="%23s" x="88"/></g><defs><path id="s" d="M10 0l2.94 6.01 6.64.97-4.79 4.67 1.13 6.59L10 15.88 4.08 18.24l1.13-6.59L.42 6.98l6.64-.97L10 0Z"/></defs></svg>') center/contain no-repeat;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="110" height="20" viewBox="0 0 110 20" fill="none"><g fill="%23000"><path d="M10 0l2.94 6.01 6.64.97-4.79 4.67 1.13 6.59L10 15.88 4.08 18.24l1.13-6.59L.42 6.98l6.64-.97L10 0Z"/><use href="%23s" x="22"/><use href="%23s" x="44"/><use href="%23s" x="66"/><use href="%23s" x="88"/></g><defs><path id="s" d="M10 0l2.94 6.01 6.64.97-4.79 4.67 1.13 6.59L10 15.88 4.08 18.24l1.13-6.59L.42 6.98l6.64-.97L10 0Z"/></defs></svg>') center/contain no-repeat;
    }
    .wd-reviews-stars-bg{ background: #e5e7eb; }
    .wd-reviews-stars-fill{
      background: #fbbf24; /* amber */
      width: 0%; overflow: hidden;
    }
    .wd-reviews-score{
      margin-left: 6px; font-weight: 700; font-size: 12px; color:#374151;
      vertical-align: top;
    }

    /* text */
    .wd-reviews-text{margin: 0;font-size: 14px;}

    /* nav buttons (desktop) */
    .wd-reviews-nav{
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 40px; height: 40px; border-radius: 50%;
      border:1px solid var(--line); background:#fff; color:#111827;
      display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.12);
      z-index: 2;
    }
    .wd-reviews-nav:hover{ transform: translateY(-50%) scale(1.06); }
    .wd-reviews-nav.is-prev{ left: -6px; }
    .wd-reviews-nav.is-next{ right: -6px; }

    /* responsive */
    @media (max-width: 860px){
      .wd-reviews-strip{ grid-auto-columns: 80%; }
      .wd-reviews-nav{ display: none; }
    }

    .wd-reviews-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    strong.wd-reviews-name {
        width: 100%;
    }

    .edge-actions .edge-btn span {
        color: white;
    }