/*
Theme Name: Doveanore Digital
Author: Doveanore
Version: 1.0
*/

:root{
  --bg:#050505;
  --bg2:#09090f;
  --ink:#ffffff;
  --muted:rgba(255,255,255,.72);
  --mute2:rgba(255,255,255,.48);
  --gold:#d4af37;
  --line:rgba(255,255,255,.14);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:26px;
  --max:1180px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 800px at 75% 15%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg) 100%);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.wrap{ width:min(var(--max), 100% - 2*clamp(14px,4vw,34px)); margin:0 auto; }

/* =========================
   HEADER
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,5,5,.82), rgba(5,5,5,.35));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 180px;
}
.brand img{
  height:38px; /* logo büyüklüğü buradan */
  width:auto;
  display:block;
}
.brand .brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.brand .brand-text b{
  font-size:14px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.brand .brand-text span{
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mute2);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-links a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 14px;
  border-radius:999px;
  transition:.25s var(--ease);
}
.nav-links a:hover{
  color:#fff;
  background: rgba(255,255,255,.05);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color:var(--ink);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition: all .25s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{
  background: var(--gold);
  border-color: var(--gold);
  color:#000;
  transform: translateY(-1px);
}
.btn.primary{
  background: rgba(255,255,255,.10);
}
.btn.primary:hover{
  background: var(--gold);
  color:#000;
}
/* ============================================================
   🚑 KURTARMA PAKETİ: NASIL ÇALIŞIR & MARKALAR & MOBİL
   ============================================================ */

/* 1. NASIL ÇALIŞIR BÖLÜMÜ */
.how-it-works-section {
    padding: 100px 0 !important;
    background: #050505 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    text-align: center !important;
    display: block !important;
}

.steps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    margin-top: 40px !important;
}

.step-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    padding: 40px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
}

.step-number {
    font-size: 50px !important;
    font-weight: 900 !important;
    color: rgba(255,255,255,0.1) !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.step-card h3 { 
    color: #fff !important; 
    font-size: 1.5rem !important; 
    margin-bottom: 10px !important;
}

.step-card p { 
    color: #aaa !important; 
    font-size: 0.9rem !important; 
}

/* 2. MARKALAR BÖLÜMÜ */
.brands-section {
    padding: 60px 0 !important;
    background: #000 !important;
    border-top: 1px solid #111 !important;
    border-bottom: 1px solid #111 !important;
    text-align: center !important;
}

.brands-grid {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    opacity: 0.6 !important;
}

.brand-item {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #fff !important;
    text-transform: uppercase !important;
}

/* 3. MOBİL DÜZELTMELER (MODAL & TAŞMA) */
@media (max-width: 900px) {
    /* Nasıl Çalışır - Mobilde Alt Alta */
    .steps-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Kurumsal Sayfası Taşma Fix */
    .b2b-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Mobil Modal Kaydırma Fix */
    .modal {
        align-items: flex-start !important;
        overflow-y: auto !important; /* Kaydırmayı aç */
        padding-top: 20px !important;
    }
    
    .modal-content {
        height: auto !important;
        min-height: 100vh !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .modal-info {
        padding-bottom: 120px !important; /* Buton için altta boşluk */
    }
    
    #modalAddBtn {
        margin-top: 20px !important;
        margin-bottom: 40px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
/* Mobile toggle */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  position:relative;
  flex:0 0 auto;
}
.nav-toggle span{
  position:absolute;
  left:50%;
  width:18px;
  height:2px;
  background:#fff;
  transform: translateX(-50%);
  transition: .25s var(--ease);
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:21px; opacity:.9; }
.nav-toggle span:nth-child(3){ top:28px; }

.site-header.open .nav-toggle span:nth-child(1){
  top:21px;
  transform: translateX(-50%) rotate(45deg);
}
.site-header.open .nav-toggle span:nth-child(2){
  opacity:0;
}
.site-header.open .nav-toggle span:nth-child(3){
  top:21px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Mobile panel */
.mobile-panel{
  display:none;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(5,5,5,.92);
  backdrop-filter: blur(14px);
}
.mobile-panel-inner{
  padding: 14px 0 18px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.mobile-panel a{
  padding:12px 14px;
  border-radius:12px;
  color: var(--muted);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
}
.mobile-panel a:hover{
  color:#fff;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.mobile-cta{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* =========================
   HERO (DESKTOP/TABLET)
========================= */
.hero{
  position: relative;
  padding: clamp(70px, 9vw, 120px) 0 clamp(50px, 7vw, 90px);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: contrast(1.05) brightness(.85);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 50% 35%, rgba(0,0,0,.20), rgba(0,0,0,.70)),
    linear-gradient(180deg, rgba(5,5,5,.30), rgba(5,5,5,.88));
}

.hero-content{
  position:relative;
  z-index:2;
  min-height: 70vh;
  display:grid;
  grid-template-columns: 1fr;
  align-content:center;
  row-gap:26px;
}

/* Yazı sol blok */
.hero-text{
  text-align:left;
  max-width:560px;
}

.hero-kicker{
  display:inline-block;
  color: var(--gold);
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom: 14px;
  opacity:.95;
}

.hero-title{
  margin:0;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.05;
}

.hero-lead{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Butonlar alt blok */
.hero-actions{
  display:flex;
  gap:12px;
  justify-content:flex-start;
  flex-wrap:wrap;
}

/* Placeholder sections */
.section{
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
/* ============================================================
   🛠 MODAL FORM ALANLARI TAMİRİ (GİRDİ KUTULARI)
   ============================================================ */

/* 1. Kapsayıcı Kutu (Tasarım Bilgileri) */
.customization-box {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
}

.customization-title {
    color: #d4af37 !important; /* Gold Başlık */
    margin-bottom: 15px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
}

/* 2. Başlıklar (İsim, Not vs. yazıları) */
.field span {
    color: #ccc !important; /* Hafif gri */
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 8px !important;
    margin-top: 15px !important;
}

/* 3. Yazı Kutuları (Input & Textarea) */
.field input[type="text"],
.field textarea {
    background-color: #000 !important; /* SİMSİYAH ZEMİN */
    border: 1px solid #333 !important; /* Koyu gri çerçeve */
    color: #fff !important;            /* Beyaz yazı */
    border-radius: 8px !important;
    padding: 15px !important;          /* İç ferahlık */
    width: 100% !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: 0.3s !important;
    resize: none !important;
}

/* Tıklayınca (Focus) - Gold Çerçeve Yansın */
.field input[type="text"]:focus,
.field textarea:focus {
    border-color: #d4af37 !important; 
    box-shadow: 0 0 15px rgba(212,175,55,0.15) !important;
}

/* İçindeki Silik Yazı (Placeholder) */
.field input::placeholder,
.field textarea::placeholder {
    color: #555 !important; /* Koyu gri */
    font-style: italic !important;
    font-weight: 400 !important;
}

/* 4. Dosya Yükleme Kutusu */
.field input[type="file"] {
    background-color: #0a0a0a !important;
    color: #aaa !important;
    border: 1px dashed #444 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    width: 100% !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.field input[type="file"]::file-selector-button {
    background: #333 !important;
    color: #fff !important;
    border: none !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
}

/* Altındaki küçük uyarı yazısı */
.field small {
    color: #666 !important;
    margin-top: 5px !important;
    display: block !important;
}
/* =========================
   FOOTER
========================= */
.site-footer{
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(5,5,5,.55);
  backdrop-filter: blur(14px);
}

.footer-inner{
  padding: 48px 0 34px;
  text-align: center;
}

.footer-logo img{
  height: 44px;
  width: auto;
  display: inline-block;
  opacity: .95;
}

.footer-nav{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 26px;
}

.footer-nav a{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  transition: .25s var(--ease);
}
.footer-nav a:hover{
  color:#fff;
  background: rgba(255,255,255,.04);
}

.footer-social{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap: 12px;
}
.footer-social .soc{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  transition: .25s var(--ease);
  color: rgba(255,255,255,.85);
  font-size: 16px;
}
.footer-social .soc:hover{
  border-color: var(--gold);
  background: rgba(212,175,55,.12);
  color:#fff;
  transform: translateY(-1px);
}

.footer-divider{
  margin: 22px auto;
  height: 1px;
  width: min(860px, 100%);
  background: rgba(255,255,255,.08);
}

.footer-legal{
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1.8;
}

.footer-legal a{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  transition: .25s var(--ease);
}
.footer-legal a:hover{
  color: rgba(255,255,255,.85);
}
.footer-legal .sep{
  color: rgba(255,255,255,.22);
  font-size: 11px;
  padding: 0 4px;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-top: 10px;
}

.footer-copy{
  margin:0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.pay-icons{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end;
}
.pay-icons img{
  height:18px;
  width:auto;
  opacity:.85;
  filter: grayscale(100%);
  transition: .25s var(--ease);
}
.pay-icons img:hover{
  opacity:1;
  filter: grayscale(0%);
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */
@media (max-width: 900px){

  /* HEADER mobile: taşmayı engelle */
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; margin-left: 6px; }
  .mobile-panel{ display:block; }
  .site-header:not(.open) .mobile-panel{ display:none; }

  /* Mobilde üstteki butonlar taşır: kapat (menü panelinde var) */
  .header-actions .btn{ display:none; }

  .brand{ min-width:0; }
  .brand img{
    height:32px;
    max-width: 170px;
  }

  /* HERO mobile: video küçült + yazı hafif üstüne binsin */
  .hero{
    min-height: 100vh;
    padding-top: 86px;
    padding-bottom: 54px;
  }

  /* mobilde video artık blok gibi */
  .hero-media{
    position: relative;
    height: 56vh;
  }
  .hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: contrast(1.02) brightness(.80);
  }

  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.18) 38%,
        rgba(0,0,0,.88) 100%
      );
  }

  /* Yazıyı biraz yukarı al: videonun üstüne hafif binsin */
  .hero-content{
    min-height: auto;
    margin-top: 46vh; /* 56vh video + üstüne binme = editorial look */
    row-gap: 18px;
  }

  .hero-text{
    max-width: 92%;
    text-align: left;
  }

  .hero-title{
    font-size: 2.10rem;
    line-height: 1.15;
  }

  .hero-lead{
    font-size: 0.95rem;
    margin-top: 10px;
  }

  .hero-actions{
    margin-top: 16px;
    gap: 12px;
    justify-content:flex-start;
  }

  /* FOOTER mobile */
  .footer-bottom{
    flex-direction: column;
    justify-content:center;
  }
}
/* ===== FORCE MOBILE HERO OVERLAP (FINAL FIX) ===== */
@media (max-width: 900px){

  /* video yüksekliği */
  .hero .hero-media{
    position: relative !important;
    height: 56vh !important;
    overflow: hidden !important;
  }

  /* yazıyı videoya yaklaştır / hafif üstüne bindir */
  .hero .hero-content{
    margin-top: 0 !important;            /* eski margin-top’u sıfırla */
    padding-bottom: 36px !important;
    transform: translateY(-10vh) !important; /* 🔥 asıl bindirme */
  }

  /* çok boşluk varsa bu da keser */
  .hero{
    padding-bottom: 40px !important;
  }
}
/* ===== FIX: LOGO – VIDEO GAP REMOVE ===== */
@media (max-width: 900px){

  /* Hero üst boşluğu sıfırla */
  .hero{
    padding-top: 0 !important;
  }

  /* Video header'ın hemen altından başlasın */
  .hero-media{
    margin-top: 0 !important;
  }
}
/* =========================
   NFC ECOSYSTEM SECTION
========================= */
.ecosystem-section{
  padding: 120px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #050505 0%, #07070a 100%);
}

.ecosystem-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: clamp(32px, 6vw, 80px);
}

.ecosystem-visual{
  position:relative;
}

.ecosystem-visual img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.55));
}

.ecosystem-content{
  max-width: 520px;
}

.eco-kicker{
  display:inline-block;
  margin-bottom:14px;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--gold);
}

.eco-title{
  margin:0;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height:1.12;
}

.eco-title strong{
  color: var(--gold);
  font-weight:600;
}

.eco-text{
  margin-top:16px;
  font-size:1rem;
  line-height:1.75;
  color: var(--muted);
}

.eco-text.muted{
  color: rgba(255,255,255,.55);
}

.eco-actions{
  margin-top:26px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px){
  .ecosystem-section{
    padding: 80px 0;
  }

  .ecosystem-grid{
    grid-template-columns: 1fr;
    text-align:left;
  }

  .ecosystem-visual{
    order:1;
  }

  .ecosystem-content{
    order:2;
  }

  .eco-title{
    font-size: 2rem;
  }
}
/* ===== REMOVE HERO GAP ===== */
.hero{
  min-height: auto !important;
  padding-bottom: 0 !important;
}

.hero + section{
  margin-top: 0 !important;
}
/* =========================
   WHY US
========================= */
.why-section{
  padding: 120px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 600px at 80% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #050505 0%, #07070a 100%);
}

.why-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: clamp(30px, 6vw, 80px);
}

.why-visual img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
}

.why-content{
  max-width: 560px;
}

.why-kicker{
  display:inline-block;
  margin-bottom:14px;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color: var(--gold);
}

.why-title{
  margin:0;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  line-height:1.12;
}

.why-lead{
  margin-top: 16px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 1rem;
}

.why-cards{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.why-card{
  display:flex;
  gap:12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  transition: .25s var(--ease);
}

.why-card:hover{
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.06);
  transform: translateY(-2px);
}

.why-icon{
  width:40px;
  height:40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 18px;
  flex: 0 0 auto;
}

.why-card h3{
  margin: 2px 0 6px;
  font-size: 13px;
  letter-spacing: .02em;
}

.why-card p{
  margin:0;
  color: rgba(255,255,255,.62);
  font-size: 12.5px;
  line-height: 1.55;
}

.why-actions{
  margin-top: 26px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* MOBILE */
@media (max-width: 900px){
  .why-section{ padding: 80px 0; }
  .why-grid{ grid-template-columns: 1fr; }
  .why-cards{ grid-template-columns: 1fr; }
}
/* =========================
   FEATURES GRID (Wave style)
========================= */
.features-section{
  padding: 110px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #050505 0%, #07070a 100%);
}

.features-head{
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.features-kicker{
  display:inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.features-title{
  margin: 0;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1.12;
}

.features-sub{
  margin: 14px 0 0;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
}

.features-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card{
  display:block;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  transition: .25s var(--ease);
  min-height: 260px;
}

.feature-card:hover{
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.35);
  background: rgba(212,175,55,.06);
}

.feature-media{
  height: 118px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 16px;
}

.feature-media img{
  max-height: 118px;
  max-width: 100%;
  width: auto;
  height: auto;
  display:block;
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.45));
}

.feature-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .01em;
}

.feature-card p{
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1100px){
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .features-section{ padding: 80px 0; }
  .features-grid{ grid-template-columns: 1fr; }
  .feature-card{ min-height: auto; }
}
/* =========================
   CONTACT SECTION
========================= */
.contact-section{
  padding: 110px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(800px 500px at 70% 0%, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg, #060606 0%, #08080c 100%);
}

.contact-box{
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 40px;
  border-radius: 26px;
  text-align: center;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}

.contact-box h2{
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: .02em;
}

.contact-box p{
  margin: 0 0 28px;
  color: rgba(255,255,255,.65);
  line-height: 1.7;
}

.contact-actions{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-actions .btn{
  min-width: 180px;
}

/* Mobile */
@media (max-width: 640px){
  .contact-section{
    padding: 80px 0;
  }

  .contact-box{
    padding: 36px 22px;
    border-radius: 22px;
  }

  .contact-actions{
    gap: 12px;
  }

  .contact-actions .btn{
    width: 100%;
  }
}
/* =========================
   MOBILE PRODUCTS SLIDER
========================= */
.features-slider{
  position: relative;
}

@media (max-width: 900px){

  .features-grid{
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }

  .features-grid::-webkit-scrollbar{
    display: none;
  }

  .feature-card{
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* SAĞ / SOL BUTONLAR */
  .slider-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 42px;
    height: 42px;
    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);

    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: .25s ease;
  }

  .slider-btn:hover{
    background: rgba(212,175,55,.35);
    border-color: rgba(212,175,55,.8);
    color: #000;
  }

  .slider-btn.prev{
    left: -6px;
  }

  .slider-btn.next{
    right: -6px;
  }
}
/* ===== HIDE SLIDER ON DESKTOP ===== */
.slider-btn{
  display: none;
}

/* ===== SHOW SLIDER ONLY ON MOBILE ===== */
@media (max-width: 900px){

  .slider-btn{
    display: flex;
    align-items: center;
    justify-content: center;
  }

}
/* ============================================================
   📱 MOBİL FİNAL DÜZELTMELERİ (WHATSAPP & MODAL SCROLL)
   ============================================================ */

/* 1. KURUMSAL SAYFASI: WHATSAPP BUTONUNU KÜÇÜLT */
@media (max-width: 900px) {
    .b2b-cta .btn {
        width: auto !important;       /* Tam genişlik olmasın */
        display: inline-flex !important; /* İçerik kadar yer kaplasın */
        font-size: 11px !important;   /* Yazıyı küçült */
        padding: 12px 25px !important; /* Butonu daralt */
        border-radius: 50px !important;
        margin: 0 auto !important;    /* Ortala */
    }
    
    .b2b-cta .btn i {
        font-size: 18px !important;   /* İkonu da küçült */
        margin-right: 8px !important;
    }
    
    .b2b-cta h2 {
        font-size: 1.6rem !important; /* Başlığı biraz topla */
    }
    
    .cta-box {
        padding: 30px 20px !important; /* Kutunun iç boşluğunu azalt */
    }
}

/* 2. MODAL DÜZENİ: İÇERİĞİ KUTUYA HAPSET VE KAYDIR */
@media (max-width: 900px) {
    
    /* Modalın Dış Çerçevesi (Ekranı Kaplasın ama Taşmasın) */
    .modal-content {
        display: flex !important;
        flex-direction: column !important;
        width: 95% !important;
        height: 85vh !important;      /* Ekranın %85'i kadar olsun */
        max-height: 85vh !important;  /* Asla ekranı geçmesin */
        margin: 5vh auto !important;  /* Ortala */
        overflow: hidden !important;  /* Dışarı taşmayı engelle */
        border-radius: 12px !important;
    }

    /* İÇERİK ALANI (SCROLL BURADA OLACAK) */
    .modal-info {
        flex: 1 !important;           /* Kalan alanı kapla */
        overflow-y: auto !important;  /* 🔥 AŞAĞI KAYDIRMAYI AÇ */
        padding: 20px !important;
        padding-bottom: 60px !important; /* En altta rahat boşluk */
        -webkit-overflow-scrolling: touch; /* iPhone'da yağ gibi kaysın */
    }

    /* Resim Alanı (Sabit Kalsın, Kaymasın) */
    .modal-img-container {
        flex: 0 0 auto !important;    /* Boyutu içeriğe göre sabitle */
        border-bottom: 1px solid #222 !important;
        padding: 10px !important;
        background: #fff !important;
    }

    .main-img-box {
        height: 180px !important;     /* Resmi biraz küçült yer kalsın */
        border: none !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #modalImage {
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Yazı Alanları (Inputlar) Düzgün görünsün */
    .customization-box input, 
    .customization-box textarea {
        background: #000 !important;
        color: #fff !important;
        border: 1px solid #333 !important;
    }
}
/* ============================================================
   🌑 MOBİL MODAL: RESİM ARKASINI SİYAH YAP (FİNAL RÖTUŞ)
   ============================================================ */
@media (max-width: 900px) {
    /* Resimlerin Arkasındaki Beyazlığı Öldür */
    .modal-img-container {
        background-color: #000 !important; /* Siyah Zemin */
        border-bottom: 1px solid #222 !important; /* Altına koyu çizgi */
    }

    /* Resim Kutusunun Kendisi */
    .main-img-box {
        background-color: #000 !important; /* Siyah */
        border: none !important;
    }
    
    /* Küçük Resimler (Varsa) */
    .thumbnails-row {
        background-color: #000 !important;
    }
}
/* =========================
   STORE / MAGAZA
========================= */
.store-hero {
  padding: 130px 0 80px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* Arkaya hafif gold glow ve doku ekledik */
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.15), transparent 40%),
    linear-gradient(180deg, #050505 0%, #07070a 100%);
  position: relative;
  overflow: hidden;
}

/* Başlığın altına hafif bir yansıma çizgisi */
.store-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #d4af37;
    margin: 20px auto 0;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(212,175,55,0.5);
}

.store-hero-inner{
  text-align:center;
  max-width: 820px;
  margin: 0 auto;
}

.store-kicker{
  display:inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

.store-title{
  margin:0;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.1;
}

.store-sub{
  margin: 14px auto 0;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  max-width: 640px;
}

.store-actions{
  margin-top: 26px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

.store-filters{
  padding: 26px 0 12px;
  background: rgba(5,5,5,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}

.filter-row{
  display:flex;
  gap: 10px;
  overflow-x:auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.filter-row::-webkit-scrollbar{ display:none; }

.filter-chip{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: .25s var(--ease);
}
.filter-chip:hover{
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.08);
  color:#fff;
}
.filter-chip.active{
  border-color: rgba(212,175,55,.75);
  background: rgba(212,175,55,.14);
  color:#fff;
}

.store-grid-section{
  padding: 60px 0 110px;
  background: linear-gradient(180deg, #050505 0%, #07070a 100%);
}

.store-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Kartın Kendisi */
.product-card {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(20,20,25,0.4); /* Biraz daha şeffaf */
  backdrop-filter: blur(10px);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover Durumu - Yukarı Kalkma ve Gold Çerçeve */
.product-card:hover {
  transform: translateY(-7px) scale(1.02);
  border-color: #d4af37;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(212,175,55,0.2);
}

/* Resim Alanı */
.product-media {
  height: 220px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);
  position: relative;
  overflow: hidden;
}

/* Hover'da Resim Yakınlaşsın */
.product-card:hover .product-media img {
  transform: scale(1.1);
  filter: brightness(1.1);
}
.product-media img {
  transition: transform 0.5s ease;
}

/* --- NFC SCAN EFEKTİ (Işık Geçişi) --- */
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(212,175,55,0.2), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
  z-index: 1;
  pointer-events: none;
}
.product-card:hover::before {
  left: 150%;
  transition: 0.7s;
}

.product-body{
  padding: 18px 18px 20px;
}

.product-body h3{
  margin: 0 0 10px;
  font-size: 18px;
}

.product-body p{
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  font-size: 14px;
}

.product-meta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.price{
  color: rgba(255,255,255,.82);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

.badge{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: rgba(212,175,55,.10);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  white-space: nowrap;
}

.product-cta{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.product-cta .btn{
  flex: 1 1 auto;
  min-width: 150px;
}

/* Responsive */
@media (max-width: 1100px){
  .store-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .store-grid{ grid-template-columns: 1fr; }
  .product-media{ height: 180px; }
  .store-grid-section{ padding: 42px 0 90px; }
}
/* =========================
   DOVÉA NORÉ - MAGAZA (CSV)
========================= */

/* Sayfa arka planı (hero ve grid ile uyumlu) */
.store-hero{
  padding: 120px 0 70px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #050505 0%, #07070a 100%);
}
.store-kicker{
  display:inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}
.store-title{
  margin:0;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.08;
}
.store-sub{
  margin: 14px auto 0;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  max-width: 720px;
}

/* Filtre alanı */
.store-filters{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 18px 0 10px;
  background: rgba(5,5,5,.62);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.filter-row{
  display:flex;
  gap: 10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.filter-row::-webkit-scrollbar{ display:none; }
.filter-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.74);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: .22s var(--ease);
  flex: 0 0 auto;
}
.filter-btn:hover{
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.08);
  color:#fff;
}
.filter-btn.active{
  border-color: rgba(212,175,55,.85);
  background: rgba(212,175,55,.14);
  color:#fff;
}

/* Ürün grid */
.store-grid-section{
  padding: 48px 0 110px;
  background: linear-gradient(180deg, #050505 0%, #07070a 100%);
}
.store-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Ürün kartı */
.product-card{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  cursor:pointer;
  transition: .24s var(--ease);
}
.product-card:hover{
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.35);
  background: rgba(212,175,55,.06);
}
.product-media{
  height: 190px;
  background: rgba(0,0,0,.28);
}
.product-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.product-body{
  padding: 18px 18px 20px;
}
.product-body h3{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: .01em;
}
.product-body p{
  margin: 0;
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  font-size: 14px;
  min-height: 44px;
}
.product-meta{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.price{
  color: rgba(255,255,255,.86);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.badge{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: rgba(212,175,55,.10);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  white-space: nowrap;
}

/* =========================
   MODAL (Ürün Detay)
========================= */
.modal{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(12px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.modal-content{
  width: min(980px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,10,.92);
  overflow:hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
  position: relative;
}
.close-btn{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  transition: .2s var(--ease);
}
.close-btn:hover{
  background: rgba(212,175,55,.10);
  border-color: rgba(212,175,55,.35);
}

.modal-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
}
.modal-img-container{
  padding: 22px;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(600px 400px at 50% 10%, rgba(255,255,255,.06), transparent 60%),
    rgba(255,255,255,.02);
}
.main-img-box{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.main-img-box img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display:block;
}
.thumbnails-row{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x:auto;
  padding-bottom: 6px;
}
.thumbnails-row::-webkit-scrollbar{ display:none; }
.thumb-img{
  width: 74px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition: .2s var(--ease);
}
.thumb-img:hover{
  border-color: rgba(212,175,55,.35);
  transform: translateY(-1px);
}

.modal-info{
  padding: 22px 22px 24px;
}
.modal-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
}
.modal-info h2{
  margin: 10px 0 12px;
  font-size: 26px;
  line-height: 1.15;
}
.modal-price-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.modal-price{
  font-size: 18px;
  color: rgba(255,255,255,.92);
  letter-spacing: .06em;
}
.modal-tag{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.45);
  background: rgba(212,175,55,.12);
  color: rgba(255,255,255,.90);
  font-size: 12px;
}
.modal-desc{
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  font-size: 14px;
  margin: 0 0 18px;
}
.modal-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-actions .btn{
  flex: 1 1 auto;
  min-width: 160px;
}
.modal-note{
  margin-top: 14px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1100px){
  .store-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .modal-grid{ grid-template-columns: 1fr; }
  .modal-img-container{ border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .main-img-box img{ height: 320px; }
}
@media (max-width: 700px){
  .store-hero{ padding: 92px 0 50px; }
  .store-grid{ grid-template-columns: 1fr; }
  .product-media{ height: 180px; }
  .store-grid-section{ padding: 34px 0 80px; }
}
/* ====== MAGAZA FINAL FIX (zoom + mobil modal) ====== */

/* Ürün kart görselleri: KIRPMA YOK -> contain */
.product-media{
  height: 210px;                 /* biraz daha premium görünür */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.22);
}
.product-media img{
  width: 100%;
  height: 100%;
  object-fit: contain !important; /* cover'ı öldür */
  display:block;
}

/* MODAL: ekran dışına taşma olmasın */
.modal{
  padding: 14px;
}
.modal-content{
  width: min(980px, 100%);
  max-height: 92vh;              /* mobilde taşmayı bitirir */
  overflow: hidden;
}

/* Modal içi scroll (mobilde aşırı uzarsa) */
.modal-grid{
  max-height: 92vh;
}
.modal-info{
  overflow: auto;
  max-height: 92vh;
}

/* Modal sol görsel alanı */
.modal-img-container{
  padding: 18px;
}
.main-img-box{
  display:flex;
  align-items:center;
  justify-content:center;
}
.main-img-box img{
  width: 100%;
  height: min(420px, 46vh);      /* mobilde görüntü dev olmasın */
  object-fit: contain !important; /* kırpma yok */
  background: rgba(0,0,0,.18);
}
/* Mobilde modal tek kolon, butonlar alt alta */
@media (max-width: 860px){
  .modal-grid{
    grid-template-columns: 1fr !important;
  }
  .modal-img-container{
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .modal-actions{
    flex-direction: column;
  }
  .modal-actions .btn{
    width: 100%;
    min-width: unset;
  }
}

/* Çok küçük ekran: kart görsel yüksekliğini azalt */
@media (max-width: 520px){
  .product-media{
    height: 185px;
    padding: 12px;
  }
  .main-img-box img{
    height: min(320px, 40vh);
  }
}
#modalThumbnails,
.thumbnails-row{ display:none !important; }
/* THUMBNAILS (2-3 görsel) - premium ve düzgün */
.thumbnails-row{
  display:flex !important;
  gap: 10px;
  margin-top: 12px;
  overflow-x:auto;
  padding-bottom: 6px;
}
.thumbnails-row::-webkit-scrollbar{ display:none; }

.thumb-img{
  width: 78px;
  height: 58px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: .2s var(--ease);
  opacity: .85;
}
.thumb-img:hover{
  opacity: 1;
  border-color: rgba(212,175,55,.35);
  transform: translateY(-1px);
}
.thumb-img.active{
  opacity: 1;
  border-color: rgba(212,175,55,.85);
  box-shadow: 0 0 0 4px rgba(212,175,55,.10);
}
/* =========================
   FİNAL WHATSAPP BUTONU
========================= */
.final-whatsapp-btn {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    width: 65px !important;
    height: 65px !important;
    background-color: #d4af37 !important; /* Gold Rengi */
    color: #000 !important;               /* İkon Rengi */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 36px !important;
    border: 2px solid #fff !important;    /* Beyaz Çerçeve */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4) !important;
    z-index: 999999 !important;           /* Her şeyin üstünde */
    text-decoration: none !important;
    transition: transform 0.3s ease !important;
}

/* Üzerine Gelince */
.final-whatsapp-btn:hover {
    transform: scale(1.1) !important;
    background-color: #25D366 !important; /* Yeşil olsun */
    color: #fff !important;
    border-color: #25D366 !important;
}

/* Mobilde Biraz Küçülsün */
@media (max-width: 768px) {
    .final-whatsapp-btn {
        width: 55px !important;
        height: 55px !important;
        font-size: 30px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}
/* =========================
   STORE / MODAL (FINAL CSS)
   ========================= */

/* Modal Backdrop */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}

/* Modal Box */
.modal-content{
  width: min(1100px, 100%);
  background: rgba(12,12,12,.88);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
}

/* Close */
.close-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.close-btn:hover{ background: rgba(255,255,255,.10); }

/* Grid */
.modal-grid{
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  min-height: 520px;
}

/* Left media side */
.modal-img-container{
  padding: 18px;
  background: rgba(255,255,255,.03);
  border-right: 1px solid rgba(255,255,255,.08);
}

/* Main image box */
.main-img-box{
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}

/* Make sure image never zoom-crops */
#modalImage{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* IMPORTANT */
  object-position: center;
  display: block;
}

/* Thumbnails row */
.thumbnails-row{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.thumbnails-row::-webkit-scrollbar{ height: 6px; }
.thumbnails-row::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 999px;
}

.thumb-img{
  width: 68px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  opacity: .75;
  cursor: pointer;
  flex: 0 0 auto;
  background: rgba(0,0,0,.3);
}
.thumb-img.active,
.thumb-img:hover{
  opacity: 1;
  border-color: rgba(205,170,90,.55); /* gold-ish */
}

/* Right info side */
.modal-info{
  padding: 22px 22px 18px;
}

/* Top texts */
.modal-kicker{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(205,170,90,.9);
  margin-bottom: 10px;
}

#modalTitle{
  margin: 0 0 10px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  color: #fff;
}

/* Price + tag row */
.modal-price-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.modal-price{
  font-size: 16px;
  color: rgba(255,255,255,.9);
}

.modal-tag{
  font-size: 12px;
  color: rgba(205,170,90,.95);
  border: 1px solid rgba(205,170,90,.35);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(205,170,90,.08);
}

/* Desc */
.modal-desc{
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
}

/* Customization Box */
.customization-box{
  margin: 14px 0 14px;
  padding: 14px 14px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.customization-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 10px;
}

.field{
  display: block;
  margin-bottom: 10px;
}

.field > span{
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-bottom: 6px;
}

.field input[type="text"],
.field textarea{
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: rgba(255,255,255,.92);
  outline: none;
}

.field textarea{ resize: vertical; min-height: 92px; }

.field input[type="text"]::placeholder,
.field textarea::placeholder{
  color: rgba(255,255,255,.35);
}

.field input[type="text"]:focus,
.field textarea:focus{
  border-color: rgba(205,170,90,.55);
  box-shadow: 0 0 0 3px rgba(205,170,90,.12);
}

.field input[type="file"]{
  width: 100%;
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}

.field small{
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
}

.custom-error{
  margin-top: 8px;
  color: #ffb4b4;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,120,120,.35);
  background: rgba(255,120,120,.08);
}

/* Modal actions */
.modal-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.modal-actions .btn{
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-actions .btn:hover{
  background: rgba(255,255,255,.10);
}

.modal-actions .btn.primary{
  border-color: rgba(205,170,90,.45);
  background: rgba(205,170,90,.12);
  color: rgba(255,255,255,.92);
}

.modal-actions .btn.primary:hover{
  background: rgba(205,170,90,.18);
}

.modal-actions .btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Note */
.modal-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.42);
  line-height: 1.6;
}

/* =========================
   MOBILE FIX
   ========================= */
@media (max-width: 900px){
  .modal{ padding: 12px; }
  .modal-content{ border-radius: 16px; }
  .modal-grid{
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .modal-img-container{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .main-img-box{
    aspect-ratio: 16 / 11;
  }

  .modal-info{
    padding: 16px 16px 14px;
  }

  .close-btn{
    top: 10px;
    right: 10px;
  }

  .modal-actions .btn{
    width: 100%;
  }

  .thumb-img{
    width: 72px;
    height: 52px;
  }
}
/* Kupon Kutusunu Komple Gizle */
.woocommerce-form-coupon-toggle,
.woocommerce-form-coupon,
.checkout_coupon {
    display: none !important;
}
/* --- STICKY WHATSAPP (GOLD & BLACK) --- */
.sticky-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #d4af37; /* Gold */
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 10px 30px rgba(212,175,55,0.3);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #fff;
}

.sticky-whatsapp:hover {
    transform: scale(1.1) rotate(15deg);
    background: #fff;
    color: #25D366; /* WhatsApp Yeşili (Hoverda sürpriz) */
    border-color: #25D366;
}

.sticky-whatsapp .tooltip {
    position: absolute;
    right: 70px;
    background: #000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    white-space: nowrap;
    border: 1px solid #333;
}

.sticky-whatsapp:hover .tooltip {
    opacity: 1;
    right: 75px;
}

/* Mobilde biraz daha küçük olsun */
@media (max-width: 768px) {
    .sticky-whatsapp { width: 50px; height: 50px; font-size: 26px; bottom: 20px; right: 20px; }
}
/* =========================
   STICKY ACTIONS (SEPET & WHATSAPP)
========================= */
.sticky-actions-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column; /* Alt alta diz */
    gap: 15px; /* Butonlar arası boşluk */
    z-index: 9999;
    align-items: center;
}

/* GENEL BUTON STİLİ */
.sticky-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid rgba(255,255,255,0.1);
    position: relative;
}

.sticky-btn:hover {
    transform: scale(1.1);
    border-color: #fff;
}

/* 1. WHATSAPP (GOLD - En Altta) */
.sticky-whatsapp {
    background: #d4af37; /* Gold */
    color: #000;
}
.sticky-whatsapp:hover {
    background: #25D366; /* Yeşil sürpriz */
    color: #fff;
}

/* 2. SEPET (SİYAH - Üstte) */
.sticky-cart {
    background: #000; /* Siyah */
    color: #d4af37; /* Gold İkon */
    border-color: #d4af37;
}
.sticky-cart:hover {
    background: #fff;
    color: #000;
}

/* SEPET SAYACI (KIRMIZI BALONCUK) */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c; /* Kırmızı */
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    font-family: sans-serif;
}

/* Sepet boşsa sayacı gizle (Opsiyonel - CSS ile zor, JS ile yapılır ama kalsın şimdilik) */
.cart-badge:empty {
    display: none;
}

/* MOBİL AYARI */
@media (max-width: 768px) {
    .sticky-actions-container { bottom: 20px; right: 20px; gap: 12px; }
    .sticky-btn { width: 50px; height: 50px; font-size: 22px; }
    .cart-badge { width: 20px; height: 20px; font-size: 10px; }
}
/* =========================
   STICKY ACTIONS (HİZALAMA DÜZELTME)
========================= */
.sticky-actions-container {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    display: flex !important;
    flex-direction: column !important; /* Alt alta diz */
    gap: 15px !important; /* İki buton arası boşluk */
    align-items: center !important; /* Tam ortala (sağa sola kaymasın) */
    z-index: 999999 !important; /* Her şeyin en üstünde */
}

/* GENEL BUTON AYARI */
.sticky-btn {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    transition: transform 0.2s ease !important;
    margin: 0 !important; /* Kaymaları önle */
}

.sticky-btn:hover {
    transform: scale(1.1) !important;
}

/* 1. WHATSAPP (EN ALTTA - GOLD) */
.sticky-whatsapp {
    background: #d4af37 !important; /* Gold */
    color: #000 !important;
    border: 2px solid #fff !important;
}

/* 2. SEPET (ÜSTTE - SİYAH) */
.sticky-cart {
    background: #000 !important; /* Siyah */
    color: #d4af37 !important;   /* Gold İkon */
    border: 2px solid #d4af37 !important;
}

/* SEPET SAYACI (KIRMIZI BALON) */
.cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #e74c3c !important; /* Kırmızı */
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #000 !important;
    font-family: sans-serif !important;
}
/* ============================================================
   1. İSTENMEYEN BEYAZ BUTONU ZORLA GİZLE (ATOM BOMBASI)
   ============================================================ */
/* Temaların genelde kullandığı yüzen sepet sınıfları */
.storefront-handheld-footer-bar, 
.handheld-footer-bar,
.wc-sticky-cart,
#wc-sticky-cart,
.floating-cart,
.xoo-wsc-modal-trigger,
a.cart-contents.float-cart,
.float_cart_wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================================
   2. BİZİM BUTONLARI HİZALA (OK GİBİ DÜZ)
   ============================================================ */
.sticky-actions-container {
    position: fixed !important;
    bottom: 25px !important;
    right: 25px !important;
    display: flex !important;
    flex-direction: column !important; /* Alt alta diz */
    align-items: center !important;    /* Yatayda tam ortala */
    justify-content: flex-end !important;
    gap: 15px !important;              /* Butonlar arası boşluk */
    z-index: 2147483647 !important;    /* Dünyadaki en üst katman */
    width: 60px !important;            /* Genişliği sabitle ki kaymasın */
    background: transparent !important; /* Arka plan şeffaf */
    padding: 0 !important;
    margin: 0 !important;
}

/* Butonların Kendisi */
.sticky-btn {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin: 0 !important; /* Dış boşlukları sıfırla */
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
    transition: transform 0.2s ease !important;
    position: relative !important;
    flex-shrink: 0 !important; /* Ezilmesinler */
}

/* Hover Efekti */
.sticky-btn:hover {
    transform: scale(1.1) !important;
}

/* 1. WHATSAPP (GOLD - EN ALTTA) */
.sticky-whatsapp {
    background: #d4af37 !important;
    color: #000 !important;
    font-size: 32px !important;
    border: 2px solid #fff !important;
    order: 2 !important; /* En altta durmasını garantiler */
}

/* 2. SEPET (SİYAH - ÜSTTE) */
.sticky-cart {
    background: #000 !important;
    color: #d4af37 !important;
    font-size: 26px !important;
    border: 2px solid #d4af37 !important;
    order: 1 !important; /* WhatsApp'ın üstünde durur */
}

/* Sepet Sayacı (Kırmızı) */
.cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    border-radius: 50% !important;
    text-align: center !important;
    border: 2px solid #000 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ============================================================
   BEYAZ BUTONU VE DİĞER YAPIŞKANLARI ZORLA GİZLE
   ============================================================ */

/* Storefront ve popüler temaların alt barını gizle */
.storefront-handheld-footer-bar,
.handheld-footer-bar,
.wc-sticky-cart,
#wc-sticky-cart,
.floating-cart-wrapper,
.xoo-wsc-modal-trigger {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -999 !important;
}

/* BİZİM BUTONLARI GARANTİYE AL (HİZALA) */
.sticky-actions-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    bottom: 25px !important;
    right: 25px !important;
    z-index: 2147483647 !important; /* En üstte biz varız */
}
/* =========================
   HEADER SEPET İKONU
========================= */
.header-cart-link {
    position: relative;
    font-size: 22px; /* İkon boyutu */
    color: #fff; /* İkon rengi */
    margin-right: 15px; /* Butonla arasındaki boşluk */
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1); /* Hafif çerçeve */
}

.header-cart-link:hover {
    color: #d4af37; /* Gold Rengi */
    border-color: #d4af37;
    background: rgba(212,175,55,0.1);
}

/* Sepet Sayacı (Kırmızı Yuvarlak) */
.header-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c; /* Kırmızı */
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000; /* Etrafına siyah kontür */
}

/* Mobilde Hizalama */
@media (max-width: 900px) {
    .header-cart-link {
        margin-right: 5px;
        font-size: 20px;
        width: 35px;
        height: 35px;
    }
}
/* =========================
   WOOCOMMERCE MESAJLARINI GİZLE
========================= */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    display: none !important;
}
/* =========================
   NASIL ÇALIŞIR? (3 ADIM)
========================= */
.how-it-works-section { 
    padding: 100px 0; 
    background: linear-gradient(180deg, #050505 0%, #09090f 100%); /* Senin temanın arka planı */
    border-top: 1px solid rgba(255,255,255,0.08); 
}

.section-head { 
    text-align: center; 
    margin-bottom: 60px; 
}

.kicker-gold { 
    color: #d4af37; /* Gold */
    font-size: 12px; 
    letter-spacing: 0.25em; 
    display: block; 
    margin-bottom: 12px; 
    font-weight: 600;
}

.section-title { 
    font-size: clamp(2rem, 4vw, 3rem); 
    margin: 0; 
    color: #fff; 
    line-height: 1.1;
}

.steps-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

.step-card { 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.1); 
    padding: 40px 30px; 
    border-radius: 22px; 
    text-align: center; 
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    position: relative;
    overflow: hidden;
}

.step-card:hover { 
    transform: translateY(-8px); 
    border-color: rgba(212,175,55,0.4); /* Hoverda hafif gold */
    background: rgba(255,255,255,0.05);
}

.step-number { 
    font-size: 50px; 
    font-weight: 800; 
    color: rgba(255,255,255,0.06); 
    margin-bottom: 10px; 
    display: block;
    line-height: 1;
}

.step-card h3 { 
    color: #fff; 
    font-size: 1.3rem; 
    margin: 10px 0 15px; 
    position: relative; 
    z-index: 1;
}

.step-card p { 
    color: rgba(255,255,255,0.6); 
    font-size: 0.95rem; 
    line-height: 1.6; 
    margin: 0;
}

/* =========================
   MARKALAR / REFERANSLAR
========================= */
.brands-section { 
    padding: 60px 0; 
    background: #000; 
    border-top: 1px solid rgba(255,255,255,0.08); 
    border-bottom: 1px solid rgba(255,255,255,0.08); 
}

.brands-title { 
    text-align: center; 
    color: rgba(255,255,255,0.4); 
    font-size: 11px; 
    letter-spacing: 0.2em; 
    margin-bottom: 30px; 
    text-transform: uppercase;
}

.brands-grid { 
    display: flex; 
    justify-content: center; 
    gap: 40px 60px; 
    flex-wrap: wrap; 
    opacity: 0.5; 
    transition: 0.3s;
}

.brands-grid:hover { opacity: 1; }

.brand-item { 
    font-size: 20px; 
    font-weight: 800; 
    color: #fff; 
    letter-spacing: -0.5px; 
    text-transform: uppercase;
    cursor: default;
}

/* =========================
   MOBİL UYUM
========================= */
@media (max-width: 900px) {
    .steps-grid { 
        grid-template-columns: 1fr; /* Mobilde alt alta */
        gap: 20px;
    }
    .step-card {
        padding: 30px 20px;
    }
    .brands-grid {
        gap: 30px;
    }
}
/* =========================
   1. MİKTAR KUTUSU (BEYAZI YOK ET)
========================= */
.woocommerce .quantity .qty {
    background-color: rgba(255,255,255,0.05) !important; /* Hafif şeffaf siyah */
    color: #fff !important;             /* Beyaz yazı */
    border: 1px solid rgba(255,255,255,0.15) !important; /* İnce gri çerçeve */
    border-radius: 8px !important;      /* Köşeleri yuvarla */
    padding: 8px 0 !important;          /* İç boşluk */
    font-weight: bold !important;
    width: 60px !important;             /* Genişlik */
    text-align: center;
}

/* Üzerine gelince veya tıklayınca (Focus) */
.woocommerce .quantity .qty:focus {
    border-color: #d4af37 !important;   /* Gold çerçeve */
    background-color: rgba(255,255,255,0.1) !important;
    outline: none !important;
}

/* =========================
   2. KUPON KUTUSU (GENİŞLET VE KARART)
========================= */
.woocommerce-cart .coupon {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap; /* Mobilde sığmazsa alt alta geçsin */
}

.woocommerce-cart .coupon .input-text {
    width: 250px !important;            /* GENİŞLİK BURADAN AYARLANIYOR */
    min-width: 200px !important;        /* En az bu kadar olsun */
    background-color: rgba(255,255,255,0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    padding: 12px 15px !important;      /* İçini ferahlat */
    margin-right: 10px !important;      /* Butonla arayı aç */
    border-radius: 8px !important;
}

/* Kupon kutusuna tıklayınca */
.woocommerce-cart .coupon .input-text:focus {
    border-color: #d4af37 !important;   /* Gold çerçeve */
}

/* Mobilde kupon kutusu tam boy olsun */
@media (max-width: 768px) {
    .woocommerce-cart .coupon .input-text {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}
/* ============================================================
   📱 MOBİL FİNAL DÜZELTMELERİ (WHATSAPP & MODAL SCROLL)
   ============================================================ */

/* 1. KURUMSAL SAYFASI: WHATSAPP BUTONUNU KÜÇÜLT */
@media (max-width: 900px) {
    .b2b-cta .btn {
        width: auto !important;       /* Tam genişlik olmasın */
        display: inline-flex !important; /* İçerik kadar yer kaplasın */
        font-size: 11px !important;   /* Yazıyı küçült */
        padding: 12px 25px !important; /* Butonu daralt */
        border-radius: 50px !important;
        margin: 0 auto !important;    /* Ortala */
    }
    
    .b2b-cta .btn i {
        font-size: 18px !important;   /* İkonu da küçült */
        margin-right: 8px !important;
    }
    
    .b2b-cta h2 {
        font-size: 1.6rem !important; /* Başlığı biraz topla */
    }
    
    .cta-box {
        padding: 30px 20px !important; /* Kutunun iç boşluğunu azalt */
    }
}

/* 2. MODAL DÜZENİ: İÇERİĞİ KUTUYA HAPSET VE KAYDIR */
@media (max-width: 900px) {
    
    /* Modalın Dış Çerçevesi (Ekranı Kaplasın ama Taşmasın) */
    .modal-content {
        display: flex !important;
        flex-direction: column !important;
        width: 95% !important;
        height: 85vh !important;      /* Ekranın %85'i kadar olsun */
        max-height: 85vh !important;  /* Asla ekranı geçmesin */
        margin: 5vh auto !important;  /* Ortala */
        overflow: hidden !important;  /* Dışarı taşmayı engelle */
        border-radius: 12px !important;
    }

    /* İÇERİK ALANI (SCROLL BURADA OLACAK) */
    .modal-info {
        flex: 1 !important;           /* Kalan alanı kapla */
        overflow-y: auto !important;  /* 🔥 AŞAĞI KAYDIRMAYI AÇ */
        padding: 20px !important;
        padding-bottom: 60px !important; /* En altta rahat boşluk */
        -webkit-overflow-scrolling: touch; /* iPhone'da yağ gibi kaysın */
    }

    /* Resim Alanı (Sabit Kalsın, Kaymasın) */
    .modal-img-container {
        flex: 0 0 auto !important;    /* Boyutu içeriğe göre sabitle */
        border-bottom: 1px solid #222 !important;
        padding: 10px !important;
        background: #fff !important;
    }

    .main-img-box {
        height: 180px !important;     /* Resmi biraz küçült yer kalsın */
        border: none !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #modalImage {
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Yazı Alanları (Inputlar) Düzgün görünsün */
    .customization-box input, 
    .customization-box textarea {
        background: #000 !important;
        color: #fff !important;
        border: 1px solid #333 !important;
    }
}
/* ============================================================
   🌑 MOBİL MODAL: RESİM ARKASINI SİYAH YAP (FİNAL RÖTUŞ)
   ============================================================ */
@media (max-width: 900px) {
    /* Resimlerin Arkasındaki Beyazlığı Öldür */
    .modal-img-container {
        background-color: #000 !important; /* Siyah Zemin */
        border-bottom: 1px solid #222 !important; /* Altına koyu çizgi */
    }

    /* Resim Kutusunun Kendisi */
    .main-img-box {
        background-color: #000 !important; /* Siyah */
        border: none !important;
    }
    
    /* Küçük Resimler (Varsa) */
    .thumbnails-row {
        background-color: #000 !important;
    }
}
/* ============================================================
   📸 GALERİ RESİMLERİNİ GERİ GETİR (ZORLA GÖSTER)
   ============================================================ */

/* Hem ID hem Class ile hedef alıp "Görün!" diyoruz */
#modalThumbnails,
.thumbnails-row {
    display: flex !important;       /* Kesinlikle göster */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin-top: 15px !important;
    gap: 10px !important;           /* Aralarındaki boşluk */
    overflow-x: auto !important;    /* Mobilde yana kaysın */
    background: #000 !important;    /* Zemin siyah */
    padding-bottom: 5px !important;
    justify-content: center !important; /* Ortala */
    width: 100% !important;
}

/* Küçük Resimlerin Kendisi */
.thumb-img {
    display: block !important;
    width: 70px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    background: #222 !important;
    flex-shrink: 0 !important; /* Mobilde büzüşmesin */
}

/* Üzerine gelince veya seçiliyken */
.thumb-img:hover, 
.thumb-img.active {
    border-color: #d4af37 !important; /* Gold Çerçeve */
    opacity: 1 !important;
    transform: translateY(-2px); /* Hafif yukarı kalksın */
}
/* =========================================
   YENİ MODERN HERO (SOL YAZI - SAĞ GÖRSEL)
   ========================================= */
.store-hero-modern {
    position: relative;
    padding-top: 100px; /* Header payı */
    padding-bottom: 0;
    background: radial-gradient(circle at 80% 30%, rgba(212,175,55,0.08), transparent 50%),
                linear-gradient(180deg, #050505 0%, #09090f 100%);
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Yarı yarıya böl */
    align-items: center;
    gap: 20px;
    padding-bottom: 10px; /* Filtre barına yer aç */
}

/* --- SOL TARA (Yazılar) --- */
.hero-content {
    z-index: 2;
}

.hero-tag {
    display: inline-block;
    color: #d4af37;
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 15px;
    opacity: 0;
    animation: slideInLeft 0.8s ease forwards 0.2s; /* Animasyon */
}

.hero-big-title {
    font-size: clamp(3rem, 5vw, 4.5rem); /* Dev başlık */
    line-height: 1.1;
    margin: 0 0 20px;
    color: #fff;
    opacity: 0;
    animation: slideInLeft 0.8s ease forwards 0.4s; /* Animasyon Gecikmeli */
}

.gold-text {
    color: #d4af37;
    /* Hafif parıltı efekti */
    text-shadow: 0 0 20px rgba(212,175,55,0.3);
}

.hero-desc {
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
    max-width: 500px;
    line-height: 1.6;
    opacity: 0;
    animation: slideInLeft 0.8s ease forwards 0.6s;
}

/* --- SAĞ TARAF (Görsel & Animasyon) --- */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 320px;
    opacity: 0;
    animation: fadeIn 1s ease forwards 0.8s;
}

/* Yüzen Kart Kutusu */
.floating-card-box {
    position: relative;
    width: 100%;
    max-width: 450px;
    animation: floatUpDown 4s ease-in-out infinite; /* SÜZÜLME EFEKTİ */
}

.floating-card-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
    transform: rotate(-5deg); /* Hafif çapraz dursun */
    transition: transform 0.3s;
}

.floating-card-box:hover img {
    transform: rotate(0deg) scale(1.05); /* Mouse gelince düzelsin */
}

/* Arkadaki Işık Hüzmesi */
.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, transparent 70%);
    z-index: -1;
    filter: blur(40px);
}

/* --- FİLTRE BARI (Alt Şerit) --- */
.modern-filter-bar {
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    margin-top: 0px;
}

.filter-row {
    justify-content: center; /* Ortala */
}

.filter-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    transition: 0.3s;
}

.filter-btn:hover, .filter-btn.active {
    background: #d4af37;
    color: #000;
    border-color: #d4af37;
    box-shadow: 0 0 15px rgba(212,175,55,0.4); /* Aktif olunca parlasın */
    transform: translateY(-2px);
}

/* =========================================
   ANIMASYON KEYFRAMES
   ========================================= */

/* Soldan Kayma */
@keyframes slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Yavaşça Belirme */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Havada Süzülme (Floating) */
@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); } /* 20px yukarı çıkar */
    100% { transform: translateY(0px); }
}

/* =========================================
   MOBİL UYUM (RESPONSIVE)
   ========================================= */
@media (max-width: 900px) {
    .hero-split {
        grid-template-columns: 1fr; /* Mobilde alt alta */
        text-align: center;
        gap: 30px;
    }

    .hero-content {
        margin: 0 auto;
    }
    
    .hero-desc {
        margin: 0 auto;
    }

    .hero-visual {
        height: 300px; /* Mobilde görseli küçült */
    }
    
    .floating-card-box img {
        transform: rotate(0deg); /* Mobilde düz dursun */
        max-width: 300px;
    }
    
    .filter-row {
        justify-content: flex-start; /* Mobilde kaydırılabilir olsun */
    }
}
/* =========================================
   MOBİL MODAL RESİM DÜZELTMESİ (FİNAL)
   ========================================= */
@media (max-width: 900px) {

    /* 1. Resim Kapsayıcısını Genişlet */
    .modal-img-container {
        padding: 0 !important; /* Kenar boşluklarını sıfırla */
        background-color: #000 !important; /* Arka plan tam siyah */
        width: 100% !important;
        display: block !important;
    }

    /* 2. Resim Kutusunu Büyüt ve Ortala */
    .main-img-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important; /* Dikdörtgen geniş alan aç */
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;     /* Dikey ortala */
        justify-content: center !important; /* Yatay ortala */
    }

    /* 3. Resmin Kendisi (Sıkışmayı Önle) */
    #modalImage {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Resmi kesmeden sığdır */
        max-height: 350px !important;   /* Çok da uzamasın */
        padding: 10px !important;       /* Kenarlardan hafif nefes alsın */
        transform: none !important;     /* Varsa kaydırmaları iptal et */
    }

    /* 4. Küçük Resimler (Thumbnails) Ortala */
    .thumbnails-row {
        justify-content: center !important; /* Ortaya dizilsinler */
        margin-top: 10px !important;
        padding-bottom: 20px !important;
        background: #000 !important;
    }
}
/* =========================================
   MOBİL MODAL: CAM GÖRÜNÜMLÜ RESİM (FİNAL V2)
   ========================================= */
@media (max-width: 900px) {

    /* 1. Resim Kapsayıcısını Şeffaf/Cam Yap */
    .modal-img-container {
        padding: 0 !important;
        /* Siyah yerine o "hafif transparan" dokuyu verdik */
        background: rgba(255, 255, 255, 0.02) !important; 
        backdrop-filter: blur(10px) !important;  /* Arkası buzlu cam olsun */
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important; /* Altına ince çizgi */
        width: 100% !important;
        display: block !important;
    }

    /* 2. Resim Kutusunu Temizle */
    .main-img-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        background: transparent !important; /* Kutu da tamamen şeffaf */
        border: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important; /* Varsa gölgeyi kaldır */
    }

    /* 3. Resim Ayarları (Aynı kalıyor, sadece background değişti) */
    #modalImage {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        max-height: 350px !important;
        padding: 15px !important;
        transform: none !important;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); /* Resmin kendisine gölge, çok şık durur */
    }

    /* 4. Küçük Resimlerin Arkasını da Temizle */
    .thumbnails-row {
        background: transparent !important; /* Orayı da şeffaf yaptık */
        justify-content: center !important;
        margin-top: 0 !important;
        padding-bottom: 20px !important;
    }
}
/* =========================================
   MOBİL MODAL: KÜÇÜK RESİMLER (CAM EFEKTİ FİNAL)
   ========================================= */
@media (max-width: 900px) {

    /* 1. O Siyah Şeridi Tamamen Şeffaf Yap */
    #modalThumbnails,
    .thumbnails-row {
        background: transparent !important; /* Siyahlığı siler */
        border: none !important;
        margin-top: 0 !important;
        padding-top: 15px !important; /* Resimle arasına biraz boşluk */
        gap: 12px !important;
        justify-content: center !important;
    }

    /* 2. Küçük Resimlerin Kendisine "Cam Kutu" Havası Ver */
    .thumb-img {
        background: rgba(255, 255, 255, 0.05) !important; /* Çok hafif beyaz dolgu */
        border: 1px solid rgba(255, 255, 255, 0.15) !important; /* İnce cam çerçeve */
        border-radius: 10px !important;
        padding: 4px !important; /* Resim kenarlardan nefes alsın */
        width: 65px !important;
        height: 65px !important;
        object-fit: contain !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; /* Hafif derinlik */
        opacity: 0.7 !important; /* Pasifken biraz sönük dursun */
        transition: all 0.3s ease !important;
    }

    /* 3. Seçili veya Üzerine Gelinen Resim (Parlayan Gold) */
    .thumb-img.active,
    .thumb-img:hover {
        opacity: 1 !important;
        border-color: #d4af37 !important; /* Gold Çerçeve */
        background: rgba(212, 175, 55, 0.15) !important; /* İçine hafif gold ışık */
        transform: translateY(-3px) !important; /* Hafif yukarı kalksın */
        box-shadow: 0 5px 15px rgba(212,175,55,0.25) !important; /* Gold gölge */
    }
}
/* =========================================
   MOBİL İÇİN GERÇEK CAM EFEKTİ (THUMBNAILS)
   ========================================= */
@media (max-width: 900px) {

    /* 1. Kapsayıcı Kutu (O Gri Şeridi Cam Yapıyoruz) */
    #modalThumbnails,
    .thumbnails-row {
        /* Düz renk yerine IŞIKLI GEÇİŞ (Gradient) kullanıyoruz */
        background: linear-gradient(
            135deg, 
            rgba(255, 255, 255, 0.1) 0%, 
            rgba(255, 255, 255, 0.01) 100%
        ) !important;

        /* Bulanıklık (Blur) */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

        /* Kenarlara 'Cam Kesimi' gibi ince parlaklık */
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.3) !important; /* Üst kenar ışık alsın */
        border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;     /* Alt kenar gölge */
        
        border-radius: 16px !important;
        margin-top: -20px !important; /* Biraz yukarı çekip resme yaklaştırdım */
        margin-bottom: 20px !important;
        padding: 10px 15px !important;
        gap: 15px !important;
        
        /* Kutuyu içeriğe göre daraltıp ortalayalım */
        width: fit-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        justify-content: center !important;
        
        /* Derinlik gölgesi */
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7) !important;
        z-index: 10 !important;
        position: relative !important;
    }

    /* 2. Küçük Resimlerin Kendisi */
    .thumb-img {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 10px !important;
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
        opacity: 0.7 !important;
        transition: 0.3s !important;
    }

    /* 3. Seçili Olan (Gold Parlama) */
    .thumb-img.active,
    .thumb-img:hover {
        opacity: 1 !important;
        border-color: #d4af37 !important;
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
        transform: scale(1.1) !important;
    }
}
/* =========================================
   MOBİL SEPET: FİNAL TEMİZLİK (RESİM & HİZA)
   ========================================= */
@media (max-width: 900px) {

    /* 1. Tablo Yapısını Sıfırla (Blok Yap) */
    .shop_table tbody, .shop_table tr, .shop_table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* Her şeyi ortala */
        border: none !important;
    }

    /* Tablo Başlıklarını Gizle (Thead) */
    .shop_table thead { display: none !important; }

    /* 2. Her Ürünü Kart Haline Getir */
    .shop_table tr.cart_item {
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 16px !important;
        margin-bottom: 25px !important;
        padding: 40px 20px 20px !important; /* Üstten boşluk bıraktık (X butonu için) */
        position: relative !important;
    }

    /* 3. SİLME BUTONU (X) - SAĞ ÜST KÖŞEYE SABİTLE */
    .product-remove {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        width: 40px !important; /* Tıklama alanı geniş olsun */
        height: 40px !important;
        padding: 0 !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .product-remove a {
        font-size: 22px !important;
        color: #ff4444 !important; /* Kırmızı X */
        display: block !important;
        line-height: 1 !important;
    }

    /* 4. RESİM (Thumbnail) - ORTALA */
    .product-thumbnail {
        margin-bottom: 15px !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .product-thumbnail img {
        width: 100px !important;
        height: 100px !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        background: #000 !important; /* Resim yoksa siyah zemin */
        border: 1px solid rgba(255,255,255,0.1) !important;
        display: block !important;
    }
    /* "Ürün" yazısını gizle (Temadan geliyorsa) */
    .product-thumbnail::before, .product-name::before { display: none !important; }

    /* 5. ÜRÜN İSMİ */
    .product-name {
        padding: 0 0 15px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        margin-bottom: 15px !important;
    }
    .product-name a {
        font-size: 1.3rem !important;
        color: #d4af37 !important; /* Gold */
        font-weight: bold !important;
        text-decoration: none !important;
        display: block !important;
    }
    
    /* Kategori vb. detayları biraz sönük yap */
    .product-name dl.variation {
        margin-top: 8px !important;
        font-size: 0.85rem !important;
        color: #aaa !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
    }
    /* "Kategori:" etiketini gizle, sadece "Kartvizit" yazsın */
    .product-name dl.variation dt { display: none !important; } 

    /* 6. FİYAT - ADET - TOPLAM (Alt alta sıralı) */
    .product-price, 
    .product-quantity, 
    .product-subtotal {
        display: flex !important;
        justify-content: space-between !important; /* Yazıları iki uca yasla */
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        color: #fff !important;
        font-size: 1rem !important;
    }
    
    /* Etiketleri Biz Ekliyoruz */
    .product-price::before { content: "Birim Fiyat"; color: #888; font-size: 0.9rem; }
    .product-quantity::before { content: "Adet"; color: #888; font-size: 0.9rem; }
    .product-subtotal::before { content: "Toplam"; color: #d4af37; font-weight: bold; font-size: 0.9rem; }
    
    .product-subtotal { border-bottom: none !important; color: #d4af37 !important; font-weight: bold !important; }
    
    /* Miktar Kutusunu Ortala */
    .quantity { margin: 0 !important; }
}
/* =========================================
   ÖDEME EKRANI (CHECKOUT) DÜZELTMESİ
   ========================================= */
@media (max-width: 900px) {

    /* 1. Ödeme Sayfasındaki Tabloyu "Fiş" Moduna Al */
    .woocommerce-checkout .shop_table {
        background: rgba(255,255,255,0.02) !important;
        border-radius: 12px !important;
        padding: 20px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* 2. Ürün Satırlarını Düzenle */
    .woocommerce-checkout .shop_table tbody tr {
        display: flex !important;
        flex-direction: row !important; /* Yan yana olsun */
        align-items: flex-start !important;
        padding: 15px 0 !important;
        border-bottom: 1px dashed rgba(255,255,255,0.1) !important;
        gap: 15px !important;
    }

    /* 3. Ürün İsmi ve Bilgiler (Sola Yasla) */
    .woocommerce-checkout .product-name {
        text-align: left !important; /* Sepetteki ortalamayı iptal et */
        width: 100% !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Ürün İsmi Rengi */
    .woocommerce-checkout .product-name {
        color: #d4af37 !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
    }
    
    /* Adet (x 1) Yazısını Düzenle */
    .woocommerce-checkout strong.product-quantity {
        color: #fff !important;
        font-weight: normal !important;
        font-size: 0.9rem !important;
        opacity: 0.7;
    }

    /* 4. Meta Veriler (Kategori, Not vs.) - Derli Toplu */
    .woocommerce-checkout .product-name .variation {
        display: block !important;
        font-size: 0.85rem !important;
        color: #aaa !important;
        margin-top: 5px !important;
        line-height: 1.4 !important;
        border-left: 2px solid #333 !important;
        padding-left: 10px !important;
    }
    .woocommerce-checkout .variation dt { display: none !important; } /* Başlıkları gizle */
    .woocommerce-checkout .variation dd { margin: 0 !important; display: block !important; }

    /* 5. Toplam Fiyat (Sağda Dursun) */
    .woocommerce-checkout .product-total {
        text-align: right !important;
        white-space: nowrap !important;
        color: #fff !important;
        font-weight: bold !important;
        border: none !important;
        padding: 0 !important;
    }

    /* 6. ALT TOPLAMLAR (Ara Toplam, Kargo vs.) */
    .woocommerce-checkout tfoot tr {
        display: flex !important;
        justify-content: space-between !important; /* İki uca yasla */
        align-items: center !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        width: 100% !important;
    }
    
    .woocommerce-checkout tfoot th {
        text-align: left !important;
        color: #888 !important;
        font-weight: normal !important;
        width: auto !important;
        display: block !important;
    }
    
    .woocommerce-checkout tfoot td {
        text-align: right !important;
        color: #fff !important;
        width: auto !important;
        display: block !important;
        border: none !important;
    }

    /* En Alttaki Genel Toplam */
    .woocommerce-checkout .order-total th,
    .woocommerce-checkout .order-total td {
        color: #d4af37 !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
        padding-top: 15px !important;
    }
}
/* =========================
   LEGAL PAGES (KVKK / Sözleşme / Gizlilik / Çerez)
   ========================= */

.legal-hero{
  padding: 56px 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: radial-gradient(80% 120% at 10% 0%, rgba(255,215,77,.06) 0%, rgba(0,0,0,0) 50%),
              linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,0) 55%);
}

.legal-kicker{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,215,77,.85);
  margin-bottom: 10px;
}

.legal-title{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.08;
  margin: 6px 0 12px;
  color: #fff;
}

.legal-sub{
  color: rgba(255,255,255,.72);
  font-size: 14px;
  margin: 0;
}
.legal-sub a{
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.legal-sub a:hover{ border-bottom-color: rgba(255,215,77,.7); }

.legal-section{
  padding: 34px 0 70px;
}

.legal-content{
  max-width: 980px;
}

.legal-content h2{
  margin: 26px 0 10px;
  font-size: 20px;
  line-height: 1.25;
  color: rgba(255,255,255,.96);
}

.legal-content h3{
  margin: 18px 0 8px;
  font-size: 16px;
  color: rgba(255,255,255,.9);
}

.legal-content p{
  margin: 10px 0;
  color: rgba(255,255,255,.78);
  line-height: 1.8;
  font-size: 15px;
}

.legal-content ul{
  margin: 10px 0 16px 18px;
  padding: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.8;
  font-size: 15px;
}

.legal-content li{ margin: 6px 0; }

.legal-content a{
  color: rgba(255,215,77,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,215,77,.25);
}
.legal-content a:hover{ border-bottom-color: rgba(255,215,77,.85); }

.legal-hr{
  margin: 26px 0 16px;
  border: none;
  height: 1px;
  background: rgba(255,255,255,.08);
}

.legal-foot{
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  font-size: 14px;
}

.legal-foot a{
  color: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.legal-foot a:hover{ border-bottom-color: rgba(255,215,77,.8); }

/* Mobile spacing */
@media (max-width: 640px){
  .legal-hero{ padding: 42px 0 22px; }
  .legal-section{ padding: 26px 0 56px; }
  .legal-content p, .legal-content ul{ font-size: 14px; }
}