/* =======================================================================

   LİNKTEWEB — TASARIM SİSTEMİ

   Marka: Siyah + Altın Sarısı + Beyaz  |  Premium, ferah, modern

   ======================================================================= */



/* ---------- DEĞİŞKENLER ---------- */

:root{

  /* Renkler */

  --bg:        #0A0A0B;      /* ana koyu zemin */

  --bg-2:      #101013;      /* ikinci koyu */

  --surface:   #16161A;      /* kart yüzeyi */

  --surface-2: #1D1D22;      /* açık kart */

  --line:      rgba(255,255,255,.08);

  --line-2:    rgba(255,255,255,.14);



  --gold:      #F6B500;      /* marka altın */

  --gold-2:    #FFD24A;      /* açık altın */

  --gold-deep: #C98A00;      /* koyu altın */

  --gold-glow: rgba(246,181,0,.35);



  --text:      #F5F5F4;      /* ana metin */

  --muted:     #A1A1AA;      /* soluk metin */

  --muted-2:   #71717A;      /* daha soluk */



  /* Tema-bağımlı yardımcılar (açık temada override edilir) */

  --header-bg: rgba(10,10,11,.8);

  --menu-bg:   rgba(10,10,11,.97);

  --nav-hover: rgba(255,255,255,.05);

  --hover-surface: #26262c;

  --dot:       rgba(255,255,255,.025);

  --hero-glow: radial-gradient(700px 500px at 85% -5%, rgba(246,181,0,.10), transparent 60%),

               radial-gradient(600px 500px at 5% 10%, rgba(246,181,0,.05), transparent 55%);



  /* Tipografi */

  --f-head: 'Sora', system-ui, sans-serif;

  --f-body: 'Inter', system-ui, sans-serif;



  /* Ölçüler */

  --container: 1200px;

  --radius:   18px;

  --radius-sm: 12px;

  --radius-lg: 28px;



  --shadow:    0 20px 60px -20px rgba(0,0,0,.6);

  --shadow-gold: 0 20px 60px -18px var(--gold-glow);



  --ease: cubic-bezier(.22,1,.36,1);

}



/* ---------- AÇIK TEMA (ferah, katmanlı) ---------- */

html[data-theme="light"]{

  --bg:        #EDF0F4;   /* zemin: yumuşak nötr gri (kartlar üstünde belirsin) */

  --bg-2:      #E3E7EE;   /* dönüşümlü bölüm zemini (bir tık koyu) */

  --surface:   #FFFFFF;   /* kart: saf beyaz */

  --surface-2: #F4F6F9;



  --line:      rgba(15,23,42,.10);

  --line-2:    rgba(15,23,42,.17);



  --gold-deep: #A97400;

  --gold-glow: rgba(246,181,0,.28);



  --text:      #14161B;   /* koyu antrasit metin */

  --muted:     #545A6A;

  --muted-2:   #868C9C;



  --header-bg: rgba(237,240,244,.82);

  --menu-bg:   rgba(255,255,255,.98);

  --nav-hover: rgba(15,23,42,.06);

  --hover-surface: #E3E7EE;

  --dot:       rgba(15,23,42,.04);

  --hero-glow: radial-gradient(760px 480px at 88% -8%, rgba(246,181,0,.12), transparent 62%),

               radial-gradient(560px 440px at 2% 4%, rgba(246,181,0,.06), transparent 55%);



  --shadow:      0 20px 45px -22px rgba(15,23,42,.20);

  --shadow-gold: 0 22px 50px -20px rgba(246,181,0,.40);

}



/* ---------- RESET ---------- */

*,*::before,*::after{

  box-sizing:border-box;

  margin:0;

  padding:0;

  -webkit-tap-highlight-color: transparent !important;

  -webkit-touch-callout: none;

}

*:focus, *:active, *:focus-visible {

  outline: none !important;

}

a, button, input, select, textarea, label, div, span, img {

  -webkit-tap-highlight-color: transparent !important;

}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{

  font-family:var(--f-body);

  background:var(--bg);

  color:var(--text);

  line-height:1.65;

  font-size:16px;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;

}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color: transparent !important; }

ul{ list-style:none; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; -webkit-tap-highlight-color: transparent !important; }

input,textarea,select{ font-family:inherit; font-size:1rem; }

::selection{ background:var(--gold); color:#000; }



/* Lightbox açıkken body scroll kilidi — kaydırma çubuğu genişliği kaymasını önle */

body.lw-scroll-lock {

  overflow: hidden;

  padding-right: var(--scrollbar-w, 0px);

}



/* Zemin dokusu */

body::before{

  content:''; position:fixed; inset:0; z-index:-2;

  background:var(--hero-glow), var(--bg);

}

body::after{

  content:''; position:fixed; inset:0; z-index:-1; opacity:.4; pointer-events:none;

  background-image:radial-gradient(var(--dot) 1px, transparent 1px);

  background-size:32px 32px;

}



/* ---------- YERLEŞİM ---------- */

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

.section{ padding:40px 0; position:relative; overflow-x:hidden; }

.section-sm{ padding:32px 0; }

@media(max-width:768px){ .section{ padding:32px 0; } }



.center{ text-align:center; }

.grid{ display:grid; gap:24px; }

.g-2{ grid-template-columns:repeat(2,1fr); }

.g-3{ grid-template-columns:repeat(3,1fr); }

.g-4{ grid-template-columns:repeat(4,1fr); }

@media(max-width:980px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }

@media(max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }



/* ---------- TİPOGRAFİ ---------- */

h1,h2,h3,h4{ font-family:var(--f-head); font-weight:700; line-height:1.12; letter-spacing:-.02em; }

h1{ font-size:clamp(2.4rem,6vw,4.2rem); }

h2{ font-size:clamp(1.9rem,4vw,2.9rem); }

h3{ font-size:1.35rem; }

p{ color:var(--muted); }

.lead{ font-size:1.15rem; color:var(--muted); max-width:640px; }

.gold{ color:var(--gold); }

.gradient-text{

  background:linear-gradient(100deg,var(--gold-2),var(--gold) 45%,var(--gold-deep));

  -webkit-background-clip:text; background-clip:text; color:transparent;

}



/* Bölüm başlığı */

.eyebrow{

  display:inline-flex; align-items:center; gap:8px;

  font-family:var(--f-head); font-size:.8rem; font-weight:600; letter-spacing:.14em;

  text-transform:uppercase; color:var(--gold);

  padding:7px 14px; border:1px solid var(--line-2); border-radius:100px;

  background:rgba(246,181,0,.06);

}

.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold); }

.sec-head{ max-width:680px; margin:0 auto 56px; }

.sec-head.center{ margin-inline:auto; }

.sec-head h2{ margin:18px 0 14px; }



/* ---------- BUTONLAR ---------- */

.btn{

  display:inline-flex; align-items:center; justify-content:center; gap:10px;

  font-family:var(--f-head); font-weight:600; font-size:.93rem; line-height:1.2;

  padding:12px 24px; border-radius:100px; cursor:pointer;

  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;

  white-space:normal; max-width:100%; box-sizing:border-box; text-align:center;

}

.btn svg{ width:18px; height:18px; }

.btn-gold{ position:relative; overflow:hidden; background:linear-gradient(100deg,var(--gold-2),var(--gold)); color:#0A0A0B; box-shadow:0 10px 30px -8px var(--gold-glow); }

.btn-gold::after{ content:''; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); transition:left .7s var(--ease); pointer-events:none; }

.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -10px var(--gold-glow); }

.btn-gold:hover::after{ left:140%; }

.btn-dark{ background:var(--surface-2); color:var(--text); border:1px solid var(--line-2); }

.btn-dark:hover{ transform:translateY(-3px); background:var(--hover-surface); border-color:var(--gold); }

.btn-ghost{ border:1px solid var(--line-2); color:var(--text); }

.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

.btn-lg{ padding:15px 30px; font-size:1rem; }

.btn-block{ width:100%; }

.btn-wa{ background:#25D366; color:#fff; }

.btn-wa:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(37,211,102,.5); }



/* ---------- KART ---------- */

.card{

  background:linear-gradient(180deg,var(--surface),var(--bg-2));

  border:1px solid var(--line); border-radius:var(--radius);

  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;

  position:relative; overflow:hidden;

}

.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }



/* ---------- HEADER / NAV (100% GARANTİLİ SABİT FIXED HEADER) ---------- */

body {

  padding-top: 76px;

}

@media (max-width: 768px) {

  body {

    padding-top: 68px;

  }

}



.header{

  position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:99999 !important;

  background:var(--header-bg) !important;

  backdrop-filter:blur(24px) !important;

  -webkit-backdrop-filter:blur(24px) !important;

  border-bottom:1px solid var(--line) !important;

  box-shadow:0 8px 32px -10px rgba(0,0,0,0.35) !important;

  transition:background .3s, border-color .3s, box-shadow .3s !important;

}

.header.scrolled{ background:var(--header-bg); border-bottom-color:var(--line); }

.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-head); font-weight:700; font-size:1.25rem; }

.brand img{ height:34px; width:auto; }

/* Logo teme göre değişir: koyu temada beyaz logo, açık temada siyah logo */

.logo-light{ display:none; }

html[data-theme="light"] .logo-dark{ display:none; }

html[data-theme="light"] .logo-light{ display:block; }

/* Tema geçiş düğmesi */

.theme-toggle{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--text); transition:.25s; flex-shrink:0; }

.theme-toggle:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

.theme-toggle svg{ width:20px; height:20px; }

.theme-toggle .sun{ display:none; }

html[data-theme="light"] .theme-toggle .sun{ display:block; }

html[data-theme="light"] .theme-toggle .moon{ display:none; }

.nav-links{ display:flex; align-items:center; gap:6px; }

.nav-links a{

  font-family:var(--f-head); font-weight:500; font-size:.95rem; color:var(--muted);

  padding:9px 16px; border-radius:100px; transition:color .25s, background .25s;

}

.nav-links a:hover,.nav-links a.active{ color:var(--text); background:var(--nav-hover); }

.nav-cta{ display:flex; align-items:center; gap:12px; }

.nav-toggle {

  display: none;

  width: 44px;

  height: 44px;

  border-radius: 12px;

  border: 1px solid var(--line-2);

  background: transparent !important;

  outline: none !important;

  -webkit-tap-highlight-color: transparent !important;

  user-select: none;

  cursor: pointer;

  position: relative;

  overflow: hidden;

}



.nav-toggle:focus, .nav-toggle:active {

  outline: none !important;

  background: transparent !important;

  -webkit-tap-highlight-color: transparent !important;

}



.nav-toggle span {

  display: block;

  width: 20px;

  height: 2px;

  background: var(--text);

  margin: 4px auto;

  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;

}



.nav-toggle.active {

  background: rgba(246, 181, 0, 0.15) !important;

  border-color: var(--gold);

}



.nav-toggle.active span {

  background: var(--gold);

}



.nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scale(0); }

.nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }



@media(max-width:940px){

  .nav-links,.nav-cta .btn:not(.always){ display:none; }

  .nav-cta .theme-toggle{ display:none; }   /* mobilde header sade: sadece logo + hamburger */

  .nav-toggle{ display:block; }

  .brand{ min-width:0; }

  .brand img{ max-width:62vw; }

  .nav-toggle{ flex-shrink:0; }

}



/* Mobil Menü — Ultra Premium Drawer */

.mobile-menu {

  position: fixed;

  top: 76px;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 99;

  background: var(--menu-bg);

  backdrop-filter: blur(28px);

  -webkit-backdrop-filter: blur(28px);

  opacity: 0;

  visibility: hidden;

  transform: translateY(-16px);

  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  padding: 20px 24px 36px;

  border-top: 1px solid var(--line);

}



.mobile-menu.open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.mobile-menu-inner {

  display: flex;

  flex-direction: column;

  min-height: 100%;

  justify-content: space-between;

}



.mobile-menu-links {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.mobile-menu-links a {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 18px;

  font-family: var(--f-head);

  font-size: 1.05rem;

  font-weight: 600;

  color: var(--text);

  border-radius: 14px;

  border: 1px solid transparent;

  transition: all 0.25s ease;

  -webkit-tap-highlight-color: transparent !important;

}



.mobile-menu-links a svg {

  width: 22px;

  height: 22px;

  color: var(--muted);

  transition: color 0.25s;

  flex-shrink: 0;

}



.mobile-menu-links a:hover,

.mobile-menu-links a.active {

  background: var(--surface);

  border-color: var(--line-2);

  color: var(--gold);

}



.mobile-menu-links a.active svg,

.mobile-menu-links a:hover svg {

  color: var(--gold);

}



.mobile-menu-footer {

  margin-top: 24px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  padding-top: 16px;

  border-top: 1px solid var(--line);

}



.mobile-theme-card,

.mobile-theme-row {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  width: 100% !important;

  padding: 14px 18px !important;

  border-radius: 18px !important;

  background: var(--surface) !important;

  border: 1px solid var(--line-2) !important;

  font-family: var(--f-head) !important;

  font-weight: 600 !important;

  font-size: 0.95rem !important;

  color: var(--text) !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;

}



.mobile-theme-card .mt-ic,

.mobile-theme-row .mt-ic {

  width: 40px !important;

  height: 40px !important;

  border-radius: 12px !important;

  background: rgba(246, 181, 0, 0.16) !important;

  border: 1px solid rgba(246, 181, 0, 0.4) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #F6B500 !important;

  flex-shrink: 0 !important;

}



.mobile-theme-card .mt-ic svg,

.mobile-theme-row .mt-ic svg {

  width: 22px !important;

  height: 22px !important;

  stroke: #F6B500 !important;

}



/* Koyu Modda Moon İkonu, Açık Modda Sun İkonu Görünürlüğü */

html:not([data-theme="light"]) .mt-ic .ic-moon { display: block !important; stroke: #F6B500 !important; }

html:not([data-theme="light"]) .mt-ic .ic-sun { display: none !important; }



html[data-theme="light"] .mt-ic .ic-sun { display: block !important; stroke: #D97706 !important; }

html[data-theme="light"] .mt-ic .ic-moon { display: none !important; }



/* ---------- HERO ---------- */

.hero{ padding:70px 0 40px; position:relative; }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

@media(max-width:940px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }

/* KRİTİK: Grid item'ları min-width:auto'dan kurtar — içerik grid'i genişletmesin */

.hero-grid > * { min-width: 0; }

.hero h1{ margin:22px 0 20px; }

.hero .lead{ margin-bottom:32px; }

.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-stats{ display:inline-flex; align-items:stretch; margin-top:40px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }

.hero-stats > div{ padding:16px 28px; text-align:center; transition:background .3s; }

.hero-stats > div:not(:last-child){ border-right:1px solid var(--line); }

.hero-stats > div:hover{ background:rgba(246,181,0,.06); }

.hero-stats .num{ font-family:var(--f-head); font-size:1.9rem; font-weight:800; color:var(--gold); line-height:1; }

.hero-stats .lbl{ font-size:.8rem; color:var(--muted); margin-top:5px; }

@media(max-width:480px){ .hero-stats{ display:flex; width:100%; } .hero-stats > div{ flex:1; padding:14px 6px; } .hero-stats .num{ font-size:1.5rem; } }



/* Hero mockup (tarayıcı penceresi) */

.mockup{

  position:relative;

  background:var(--surface); border:1px solid var(--line-2); border-radius:18px;

  box-shadow:0 44px 90px -34px rgba(15,23,42,.55), 0 14px 34px -20px rgba(0,0,0,.30);

  overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease);

}

.mockup::after{ content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.03); }

.mockup:hover{ transform:translateY(-6px); box-shadow:0 56px 112px -34px rgba(15,23,42,.62), 0 18px 44px -22px rgba(0,0,0,.34); }

.mockup-bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; background:var(--bg-2); border-bottom:1px solid var(--line); }

.mockup-bar i{ width:11px; height:11px; border-radius:50%; display:block; }

.mockup-bar i:nth-child(1){ background:#ff5f57; } .mockup-bar i:nth-child(2){ background:#febc2e; } .mockup-bar i:nth-child(3){ background:#28c840; }

.mockup-bar .url{ margin-left:12px; font-size:.75rem; color:var(--text); background:var(--surface); padding:4px 12px; border-radius:100px; min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; font-weight:600; }

.hero-visual .mockup img{ width:100% !important; height:auto !important; aspect-ratio: unset !important; object-fit: contain !important; display:block !important; }



/* Hero görsel alanı — ışıma + yüzen kartlar */

.hero-visual{ position:relative; }

.hero-visual .glow-orb{

  position:absolute; left:4%; top:2%; width:92%; height:92%; z-index:-1; border-radius:50%;

  background:radial-gradient(circle, var(--gold-glow), transparent 66%);

  filter:blur(54px); opacity:.9; pointer-events:none;

}

.float-card{

  position:absolute; z-index:4; display:flex; align-items:center; gap:12px;

  background:var(--surface); border:1px solid var(--line-2); border-radius:15px;

  padding:12px 16px; box-shadow:var(--shadow); font-family:var(--f-head);

  animation:floaty 4.5s ease-in-out infinite;

}

.float-rating{ left:-26px; bottom:-18px; }

.float-rating .fc-ic{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; color:#0A0A0B; background:linear-gradient(135deg,var(--gold-2),var(--gold)); }

.float-rating .fc-ic svg{ width:21px; height:21px; }

.float-rating strong{ display:block; font-size:1.2rem; line-height:1.05; }

.float-rating span{ font-size:.76rem; color:var(--muted); font-weight:400; }

.float-live{ right:-12px; top:-16px; font-size:.85rem; font-weight:600; gap:9px; animation-delay:.7s; }

.pulse-dot{ width:9px; height:9px; border-radius:50%; background:#28c840; animation:livePulse 1.9s infinite; }

@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }

@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(40,200,64,.5);} 70%{ box-shadow:0 0 0 9px rgba(40,200,64,0);} 100%{ box-shadow:0 0 0 0 rgba(40,200,64,0);} }

@media(max-width:620px){ .float-card{ display:none; } }



/* ---------- TEMA KARTI ---------- */

.theme-card{ display:flex; flex-direction:column; isolation:isolate; cursor:pointer; }

/* Üstte hover'da açılan altın şerit */

.theme-card::before{

  content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:5;

  background:linear-gradient(90deg,var(--gold-2),var(--gold) 50%,var(--gold-deep));

  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);

}

.theme-card:hover{ transform:translateY(-9px); border-color:var(--gold); box-shadow:0 30px 60px -26px var(--gold-glow), var(--shadow); }

.theme-card:hover::before{ transform:scaleX(1); }



.theme-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); }

.theme-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }

.theme-card:hover .theme-thumb img{ transform:scale(1.09); }

/* Görsel üstünde kalıcı yumuşak alt karartma (rozet/okunurluk) */

.theme-thumb::after{

  content:''; position:absolute; inset:0; pointer-events:none;

  background:linear-gradient(180deg,transparent 50%,rgba(10,10,11,.42));

  opacity:.85; transition:opacity .4s;

}

.theme-card:hover .theme-thumb::after{ opacity:0; }



.theme-thumb .overlay{

  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:12px;

  background:linear-gradient(180deg,rgba(10,10,11,.30),rgba(10,10,11,.78));

  opacity:0; transition:opacity .4s var(--ease);

}

.theme-card:hover .theme-thumb .overlay{ opacity:1; }

.theme-thumb .overlay .btn{ transform:translateY(12px); transition:transform .5s var(--ease); box-shadow:0 10px 30px -8px rgba(0,0,0,.5); }

.theme-card:hover .theme-thumb .overlay .btn{ transform:none; }



.badge{

  position:absolute; top:14px; left:14px; z-index:4;

  font-family:var(--f-head); font-size:.72rem; font-weight:700; letter-spacing:.04em;

  padding:7px 13px; border-radius:100px; background:var(--gold); color:#0A0A0B;

  box-shadow:0 8px 20px -8px rgba(0,0,0,.55);

}

.badge.yeni{ background:#28c840; color:#04210a; }

.badge.indirim{ background:#ff5f57; color:#fff; }

/* "Popüler" hafif nabız/parlama */

.badge:not(.yeni):not(.indirim){ animation:badgePulse 2.8s ease-in-out infinite; }

@keyframes badgePulse{

  0%,100%{ box-shadow:0 8px 20px -8px rgba(0,0,0,.55), 0 0 0 0 var(--gold-glow); }

  50%{ box-shadow:0 8px 20px -8px rgba(0,0,0,.55), 0 0 0 7px rgba(246,181,0,0); }

}



.theme-body{ padding:22px; display:flex; flex-direction:column; gap:9px; flex:1; }

.theme-cat{ display:inline-flex; align-items:center; gap:7px; font-size:.75rem; color:var(--gold); font-family:var(--f-head); font-weight:700; letter-spacing:.09em; text-transform:uppercase; }

.theme-cat::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); flex-shrink:0; }

.theme-body h3{ font-size:1.28rem; transition:color .3s; }

.theme-card:hover .theme-body h3{ color:var(--gold); }

.theme-body p{ font-size:.92rem; flex:1; }

.theme-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; margin-top:6px; border-top:1px solid var(--line); }

.theme-price{ font-family:var(--f-head); font-weight:800; font-size:1.55rem; color:var(--gold); line-height:1.05; }

.theme-price small{ font-size:.72rem; color:var(--muted-2); font-weight:500; display:block; letter-spacing:.02em; margin-top:2px; }

/* Dairesel ok CTA (zarif) */

.theme-go{ width:48px; height:48px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); color:var(--text); transition:background .3s var(--ease), border-color .3s, color .3s, transform .3s var(--ease); }

.theme-go svg{ width:20px; height:20px; transition:transform .35s var(--ease); }

.theme-card:hover .theme-go{ background:var(--gold); border-color:var(--gold); color:#0A0A0B; }

.theme-card:hover .theme-go{ transform:scale(1.08); }



/* Dokunmatik cihazlar: önizleme butonu her zaman görünür ve tam ortalı (hover yok) */

@media (hover: none){

  .theme-thumb .overlay{ opacity:1; background:linear-gradient(180deg,rgba(10,10,11,.12),rgba(10,10,11,.58)); }

  .theme-thumb .overlay .btn{ transform:none; }

}



/* ---------- SEKTÖR VİTRİNİ ---------- */

.sector-grid{ gap:18px; }

.sector-card{

  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0;

  padding:30px 26px; text-align:left; min-height:172px; position:relative; overflow:hidden;

  /* Yumuşak cam (frosted) yüzey — düz zemin yerine şeffaf, tatlı doku */

  background:linear-gradient(158deg, rgba(34,34,42,.55), rgba(20,20,24,.28));

  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);

  border:1px solid rgba(255,255,255,.09);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);

  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;

}

html[data-theme="light"] .sector-card{

  background:linear-gradient(158deg, rgba(255,255,255,.74), rgba(244,246,249,.36));

  border-color:rgba(255,255,255,.9);

  box-shadow:0 14px 36px -22px rgba(15,23,42,.30), inset 0 1px 0 rgba(255,255,255,.85);

}

.sector-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(246,181,0,.10), transparent 55%); opacity:0; transition:opacity .3s; pointer-events:none; }

.sector-card:hover{ transform:translateY(-5px); border-color:var(--gold); box-shadow:0 22px 44px -24px var(--gold-glow), var(--shadow); }

.sector-card:hover::before{ opacity:1; }

.sector-card .sector-ic{

  width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;

  background:rgba(246,181,0,.10); border:1px solid var(--line-2); color:var(--gold);

  transition:background .35s var(--ease), color .35s, transform .35s var(--ease);

}

.sector-card .sector-ic svg{ width:25px; height:25px; }

/* Açık temada ikonlar soluk kalmasın: dolgun altın tile + koyu kahve ikon (yüksek kontrast) */

html[data-theme="light"] .sector-card .sector-ic{

  background:linear-gradient(135deg,#FFD64A,#F5B200);

  border-color:rgba(184,126,0,.5);

  color:#5A3B00;

  box-shadow:0 8px 18px -8px rgba(214,150,0,.55), inset 0 1px 0 rgba(255,255,255,.45);

}

html[data-theme="light"] .sector-card .sector-ic svg{ stroke-width:2.1; }

.sector-card:hover .sector-ic{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#0A0A0B; border-color:transparent; transform:translateY(-2px); }

html[data-theme="light"] .sector-card:hover .sector-ic{ color:#0A0A0B; box-shadow:0 10px 22px -10px rgba(201,138,0,.6); }

.sector-name{ font-family:var(--f-head); font-weight:600; font-size:1.08rem; color:var(--text); transition:color .3s; margin-bottom:7px; }

.sector-card:hover .sector-name{ color:var(--gold); }

html[data-theme="light"] .sector-card:hover .sector-name{ color:#A97400; }

.sector-count{ font-size:.82rem; color:var(--muted-2); font-family:var(--f-head); font-weight:500; }

@media(max-width:980px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } }

@media(max-width:420px){ .sector-grid{ grid-template-columns:repeat(2,1fr); } .sector-card{ padding:22px 18px; min-height:150px; } .sector-card .sector-ic{ width:46px; height:46px; margin-bottom:14px; } }



/* ---------- ÖZELLİK / ADIM KARTLARI ---------- */

.feature{ padding:30px; }

/* Hizmetler üst 3 kart — ferah, eşit yükseklik, buton altta */

.hiz-paketler{ gap:26px; align-items:stretch; }

.hiz-paketler .feature{ display:flex; flex-direction:column; padding:38px 34px; }

.hiz-paketler .feature .ic{ margin-bottom:24px; }

.hiz-paketler .feature h3{ font-size:1.45rem; margin-bottom:12px; }

.hiz-paketler .feature > p{ line-height:1.75; color:var(--muted); margin-bottom:auto; }

.hiz-paketler .feature .theme-price{ margin:26px 0 22px; font-size:1.9rem; }

.hiz-paketler .feature .btn{ margin-top:0; }

@media(max-width:900px){ .hiz-paketler .feature{ min-height:auto; } }

.feature .ic{

  width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px;

  background:linear-gradient(135deg,var(--gold-2),var(--gold)); border:none; color:#0A0A0B;

  box-shadow:0 12px 26px -12px var(--gold-glow);

}

.feature .ic svg{ width:26px; height:26px; }

.feature h3{ margin-bottom:8px; }

.feature p{ font-size:.95rem; }



.step{ padding:34px 30px 32px; position:relative; overflow:hidden; min-height:230px; display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }

.step::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--gold-2),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }

.step:hover::before{ transform:scaleX(1); }

.step::after{ content:attr(data-n); position:absolute; top:6px; right:20px; font-family:var(--f-head); font-size:5.4rem; font-weight:800; line-height:1; color:var(--gold); opacity:.15; pointer-events:none; letter-spacing:-.03em; }

.step:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 26px 55px -26px var(--gold-glow), var(--shadow); }

.step-ic{ width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,var(--gold-2),var(--gold)); display:grid; place-items:center; color:#0A0A0B; margin-bottom:20px; box-shadow:0 14px 28px -12px var(--gold-glow); transition:transform .35s var(--ease); }

.step-ic svg{ width:26px; height:26px; }

.step:hover .step-ic{ transform:scale(1.08) rotate(-4deg); }

.step-k{ font-family:var(--f-head); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep,#9a6b00); margin-bottom:6px; }

html[data-theme="dark"] .step-k{ color:var(--gold); }

.step h3{ margin-bottom:8px; font-size:1.3rem; }

.step p{ margin-top:auto; }



/* ---------- FİYAT / PAKET ---------- */

.price-grid {

  gap: 28px;

  align-items: stretch;

}

.price-card {

  padding: 42px 34px;

  display: flex;

  flex-direction: column;

  overflow: visible;

  border-radius: 24px;

  background: var(--surface);

  border: 1px solid var(--line-2);

  box-shadow: 0 16px 40px -16px rgba(15,23,42,0.08);

  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;

}

.price-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 24px 50px -20px rgba(15,23,42,0.15);

}

.price-card.pop {

  border-color: var(--gold);

  box-shadow: 0 20px 48px -16px rgba(246,181,0,0.35);

}

.price-card .tag {

  font-family: var(--f-head);

  font-weight: 700;

  letter-spacing: .06em;

  color: var(--gold);

  text-transform: uppercase;

  font-size: .82rem;

}

.price-card .amount {

  font-family: var(--f-head);

  font-size: 2.7rem;

  font-weight: 800;

  margin: 18px 0 8px;

  line-height: 1.1;

  color: var(--text);

}

.price-card .amount small {

  font-size: .95rem;

  color: var(--muted);

  font-weight: 400;

}

.price-card .desc {

  font-size: .96rem;

  margin-bottom: 24px;

  line-height: 1.6;

  color: var(--muted);

}

.price-card ul {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-bottom: 32px;

  flex: 1;

}

.price-card li {

  display: flex;

  gap: 12px;

  font-size: .95rem;

  color: var(--text);

  align-items: center;

  line-height: 1.45;

  font-weight: 500;

}

.price-card li svg {

  width: 20px;

  height: 20px;

  color: var(--gold);

  flex-shrink: 0;

}

.price-card .btn {

  width: 100% !important;

  justify-content: center !important;

  padding: 16px 24px !important;

  font-size: 1rem !important;

  margin-top: auto !important;

  border-radius: 14px !important;

}

.pop-flag {

  position: absolute;

  top: 0;

  right: 24px;

  transform: translateY(-50%);

  background: var(--gold);

  color: #000;

  font-family: var(--f-head);

  font-weight: 800;

  font-size: .8rem;

  padding: 8px 20px;

  border-radius: 100px;

  box-shadow: 0 8px 20px rgba(246,181,0,.45);

}



/* ---------- SSS ---------- */

.faq{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .3s; }

.faq-item.open{ border-color:var(--line-2); }

.faq-q{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 24px; width:100%; text-align:left; font-family:var(--f-head); font-weight:600; font-size:1.05rem; }

.faq-q .plus{ flex-shrink:0; width:26px; height:26px; position:relative; transition:transform .3s; }

.faq-q .plus::before,.faq-q .plus::after{ content:''; position:absolute; background:var(--gold); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%); }

.faq-q .plus::before{ width:14px; height:2px; } .faq-q .plus::after{ width:2px; height:14px; transition:transform .3s; }

.faq-item.open .plus::after{ transform:translate(-50%,-50%) scaleY(0); }

.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }

.faq-a p{ padding:0 24px 24px; font-size:.96rem; }



/* ---------- CTA BANT (sıcak altın, aydınlık) ---------- */

.cta-band{

  background:radial-gradient(rgba(60,40,0,.06) 1px, transparent 1px), linear-gradient(135deg,#F3C866 0%,#E7A82A 46%,#CE8A17 100%);

  background-size:22px 22px, auto;

  border:1px solid rgba(150,100,0,.45); border-radius:var(--radius-lg);

  padding:66px 48px; text-align:center; position:relative; overflow:hidden;

  box-shadow:0 30px 64px -30px rgba(180,120,0,.7);

}

.cta-band::before{ content:''; position:absolute; width:520px; height:520px; background:radial-gradient(circle,rgba(255,255,255,.38),transparent 66%); top:-300px; left:-140px; pointer-events:none; }

.cta-band::after{ content:''; position:absolute; width:360px; height:360px; background:radial-gradient(circle,rgba(180,120,0,.28),transparent 70%); bottom:-210px; right:-110px; pointer-events:none; }

.cta-band > *{ position:relative; z-index:1; }

.cta-band .eyebrow{ background:#171204; color:#FFD24A; border:none; box-shadow:0 6px 16px -8px rgba(0,0,0,.4); }

.cta-band .eyebrow::before{ background:#FFD24A; }

.cta-band h2{ margin-bottom:14px; color:#1b1500; }

.cta-band h2 .gradient-text,.cta-band .cta-em{ -webkit-text-fill-color:#3d2f00; background:none; color:#3d2f00; }

.cta-band .lead{ color:#4a3a08; opacity:.95; }

.cta-mini{ display:flex; gap:12px 28px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-family:var(--f-head); font-size:.9rem; color:#4a3a08; font-weight:600; }

.cta-mini span{ display:inline-flex; align-items:center; gap:7px; }

.cta-mini svg{ width:17px; height:17px; color:#241b00; }

.cta-band .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

.cta-band .btn-dark{ background:#141007; color:#fff; border-color:#141007; }

.cta-band .btn-dark:hover{ background:#000; transform:translateY(-2px); }

.btn-cta-white{ background:#fff; color:#1b1500; border:1px solid #fff; }

.btn-cta-white:hover{ background:#1b1500; color:#FFD24A; border-color:#1b1500; transform:translateY(-2px); }



/* ---------- FOOTER ---------- */

.footer{ border-top:1px solid var(--line); padding:56px 0 28px; margin-top:0; position:relative; background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 4%, transparent), transparent 260px); }

.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.6; }

.footer-contact li{ margin-bottom:12px; }

.footer-contact a{ display:inline-flex; align-items:center; gap:10px; }

.footer-contact svg{ width:16px; height:16px; flex-shrink:0; color:var(--muted-2); transition:color .25s; }

.footer-contact a:hover{ color:var(--gold); }

.footer-contact a:hover svg{ color:var(--gold); }

.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }

@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }

@media(max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

.footer .brand{ margin-bottom:16px; }

.footer p{ font-size:.92rem; max-width:300px; }

.footer h3, .footer h4{ font-family:var(--f-head); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px; }

.footer li{ margin-bottom:11px; }

.footer li a{ font-size:.93rem; color:var(--muted); transition:color .25s; }

.footer li a:hover{ color:var(--gold); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:18px; margin-top:18px; font-size:.85rem; color:var(--muted-2); }

.socials{ display:flex; gap:10px; }

.socials a{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--muted); transition:.3s; }

.socials a:hover{ color:var(--gold); border-color:var(--gold); }

.socials svg{ width:18px; height:18px; }



/* ---------- SAYFA BAŞLIĞI (iç sayfalar) ---------- */

.page-head{ padding:48px 0 28px; text-align:center; }

.page-head h1{ font-size:clamp(2rem,4.5vw,3.2rem); margin-bottom:12px; }

.breadcrumb{ font-size:.88rem; color:var(--muted-2); margin-bottom:16px; }

.breadcrumb a:hover{ color:var(--gold); }



/* Mobil Sayfa Başı & Mağaza Filtresi Kompakt Dökümü */

@media (max-width: 768px) {

  .page-head {

    padding: 24px 0 10px !important;

  }

  .page-head h1 {

    font-size: 1.85rem !important;

    margin: 4px 0 8px !important;

    line-height: 1.25 !important;

  }

  .page-head .eyebrow {

    margin-bottom: 6px !important;

    padding: 5px 12px !important;

    font-size: 0.75rem !important;

  }

  .page-head .lead {

    font-size: 0.94rem !important;

    line-height: 1.45 !important;

    margin-bottom: 0 !important;

  }

  .tema-section-compact {

    padding-top: 8px !important;

  }

  .tema-bar {

    margin-bottom: 20px !important;

    padding: 14px 12px !important;

    border-radius: 16px !important;

  }

  .tbar-search {

    margin-bottom: 12px !important;

  }

  .kat-wrap {

    margin-top: 12px !important;

    padding-top: 12px !important;

  }

}



/* ---------- FİLTRE (mağaza) ---------- */

.filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }

.filter-btn{

  display:inline-flex; align-items:center; gap:8px;

  font-family:var(--f-head); font-weight:500; font-size:.9rem; color:var(--muted);

  padding:9px 12px 9px 18px; border-radius:100px; border:1px solid var(--line);

  background:var(--surface); cursor:pointer;

  transition:transform .25s var(--ease), border-color .25s, color .25s, background .25s, box-shadow .25s;

}

.filter-btn .fc{

  font-size:.72rem; font-weight:700; min-width:20px; text-align:center;

  padding:2px 7px; border-radius:100px; background:var(--bg-2); color:var(--muted-2);

  transition:background .25s, color .25s;

}

.filter-btn:hover{ color:var(--text); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 18px -10px var(--gold-glow); }

.filter-btn.active{ background:linear-gradient(100deg,var(--gold-2),var(--gold)); color:#0A0A0B; border-color:transparent; box-shadow:0 10px 22px -10px var(--gold-glow); }

.filter-btn.active .fc{ background:rgba(0,0,0,.14); color:#0A0A0B; }



/* ---------- FORM ---------- */

.form-group{ margin-bottom:20px; }

.form-group label{ display:block; font-family:var(--f-head); font-weight:500; font-size:.9rem; margin-bottom:8px; }

.form-control{

  width:100%; padding:14px 16px; background:var(--bg-2); border:1px solid var(--line-2);

  border-radius:var(--radius-sm); color:var(--text); transition:border-color .25s, box-shadow .25s;

}

.form-control:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(246,181,0,.12); }

textarea.form-control{ resize:vertical; min-height:120px; }

select.form-control{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23A1A1AA' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }



/* Şık açılır liste (özel ok, hover/focus vurgusu) */

.select-wrap{ position:relative; }

.select-wrap select.form-control{ background-image:none; padding-right:46px; cursor:pointer; font-weight:500; }

.select-wrap select.form-control:hover{ border-color:var(--gold); }

.select-wrap .select-chev{ display:none; }



/* Modern özel açılır menü (ms.js) — tema uyumlu */

.ms-wrap{ position:relative; width:100%; }

.ms-wrap > select{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }

.ms-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius-sm); color:var(--text); font-family:inherit; font-size:1rem; font-weight:500; cursor:pointer; text-align:left; transition:.18s; line-height:1.3; }

.ms-trigger:hover{ border-color:var(--gold); }

.ms-wrap.open .ms-trigger{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(246,181,0,.12); }

.ms-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ms-chev{ width:19px; height:19px; color:var(--gold); flex-shrink:0; transition:transform .2s; }

.ms-wrap.open .ms-chev{ transform:rotate(180deg); }

.ms-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm); box-shadow:0 22px 48px -18px rgba(0,0,0,.5); padding:6px; z-index:60; max-height:260px; overflow-y:auto; display:none; }

.ms-wrap.open .ms-menu{ display:block; }

.ms-wrap.up .ms-menu{ top:auto; bottom:calc(100% + 6px); }

.ms-item{ padding:11px 13px; border-radius:9px; cursor:pointer; font-size:.96rem; transition:.12s; color:var(--text); }

.ms-item:hover{ background:var(--surface-2); }

.ms-item.on{ background:linear-gradient(100deg,var(--gold-2),var(--gold)); color:#0A0A0B; font-weight:600; }



/* Ortalı bilgilendirme kartı (form gönderim sonucu) */

.flash{ max-width:620px; margin:0 auto 34px; padding:30px 28px; text-align:center; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--surface); box-shadow:0 18px 40px -24px rgba(15,23,42,.35); }

.flash-ic{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px; }

.flash-ic svg{ width:32px; height:32px; }

.flash h3{ font-family:var(--f-head); font-size:1.35rem; margin-bottom:8px; }

.flash p{ color:var(--muted); font-size:.98rem; line-height:1.6; margin:0 auto; max-width:440px; }

.flash-ok{ border-color:rgba(34,176,74,.35); }

.flash-ok .flash-ic{ background:rgba(34,176,74,.12); }

.flash-err{ border-color:rgba(255,95,87,.35); }

.flash-err .flash-ic{ background:rgba(255,95,87,.12); }



/* ---------- SİPARİŞ / ÖZET KUTUSU ---------- */

.ozet-box{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); padding:28px; }

.ozet-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }

.ozet-row:last-child{ border-bottom:none; }

.ozet-row .k{ font-size:.85rem; color:var(--muted); }

.ozet-row .v{ font-family:var(--f-head); font-weight:600; text-align:right; }

.odeme-copy{ display:flex; align-items:center; gap:12px; background:var(--bg-2); border:1px dashed var(--gold); border-radius:var(--radius-sm); padding:16px; margin:8px 0; }

.odeme-copy code{ font-family:'Sora',monospace; font-size:1.05rem; color:var(--gold); letter-spacing:.5px; word-break:break-all; flex:1; }

.copy-btn{ padding:8px 14px; border-radius:8px; background:var(--gold); color:#000; font-family:var(--f-head); font-weight:600; font-size:.82rem; flex-shrink:0; }

.order-code{ text-align:center; padding:24px; background:linear-gradient(120deg,rgba(246,181,0,.12),rgba(246,181,0,.03)); border:1px solid var(--gold); border-radius:var(--radius); margin-bottom:24px; }

.order-code .code{ font-family:var(--f-head); font-size:2rem; font-weight:800; color:var(--gold); letter-spacing:2px; }



/* ---------- YÜZEN WHATSAPP ---------- */

.wa-float{

  position:fixed; bottom:24px; right:24px; z-index:90;

  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;

  display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);

  transition:transform .3s var(--ease); animation:waPulse 2.4s infinite;

}

.wa-float:hover{ transform:scale(1.1); }

.wa-float svg{ width:30px; height:30px; }

@keyframes waPulse{ 0%,100%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.4); } 50%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 14px rgba(37,211,102,0); } }



/* ---------- BİLGİ ŞERİDİ (rozet/pill) ---------- */

.trust-strip{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; padding:36px 0; }

.trust-strip .item{

  display:inline-flex; align-items:center; gap:11px; padding:10px 20px 10px 11px;

  background:var(--surface); border:1px solid var(--line); border-radius:100px;

  font-family:var(--f-head); font-size:.9rem; font-weight:500; color:var(--text);

  box-shadow:0 6px 18px -10px rgba(15,23,42,.18);

  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;

}

.trust-strip .item:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 12px 26px -12px rgba(246,181,0,.4); }

.trust-strip .t-ic{ width:30px; height:30px; border-radius:50%; background:rgba(246,181,0,.14); display:grid; place-items:center; flex-shrink:0; }

.trust-strip .t-ic svg{ width:16px; height:16px; color:var(--gold); }

@media(max-width:480px){ .trust-strip{ gap:10px; } .trust-strip .item{ font-size:.82rem; padding:9px 16px 9px 9px; } }



/* ---------- SCROLL ANİMASYON (JS yoksa içerik görünür kalır) ---------- */

.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }

.reveal.in{ opacity:1; transform:none; }



/* ---------- ÇEREZ BANDI (temaya uyumlu, premium) ---------- */

.cookie-banner{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:95; width:min(900px, calc(100vw - 32px)); display:flex; align-items:center; gap:20px; background:var(--surface); border:1px solid var(--line-2); border-radius:20px; box-shadow:0 30px 70px -22px rgba(15,23,42,.4); padding:18px 20px; animation:cookieUp .55s var(--ease); overflow:hidden; }

.cookie-banner::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-deep)); }

.cookie-banner[hidden]{ display:none; }

.cookie-ic{ width:52px; height:52px; border-radius:15px; flex-shrink:0; display:grid; place-items:center; color:#231c00; background:linear-gradient(135deg,var(--gold-2),var(--gold)); box-shadow:0 12px 26px -8px var(--gold-glow,rgba(246,181,0,.5)); }

.cookie-ic svg{ width:26px; height:26px; }

.cookie-text{ flex:1; min-width:0; }

.cookie-text strong{ font-family:var(--f-head); font-size:1.06rem; color:var(--text); display:block; margin-bottom:3px; letter-spacing:-.01em; }

.cookie-text p{ font-size:.86rem; margin:0; color:var(--muted); line-height:1.5; }

.cookie-text p b{ color:var(--text); font-weight:600; }

.cookie-text p a{ color:var(--gold-deep); font-weight:600; text-decoration:none; border-bottom:1.5px solid rgba(201,138,0,.35); padding-bottom:1px; transition:border-color .2s; }

.cookie-text p a:hover{ border-color:var(--gold-deep); }

.cookie-act{ flex-shrink:0; display:flex; align-items:center; gap:10px; }

.cookie-min{ font-family:var(--f-head); font-weight:600; font-size:.9rem; color:var(--muted); background:transparent; border:1.5px solid var(--line-2); border-radius:13px; padding:12.5px 22px; cursor:pointer; transition:.2s; white-space:nowrap; }

.cookie-min:hover{ border-color:var(--gold); color:var(--text); background:var(--bg-2); }

.cookie-ok{ font-family:var(--f-head); font-weight:700; font-size:.95rem; color:#231c00; background:linear-gradient(120deg,var(--gold-2),var(--gold)); border:none; border-radius:13px; padding:14px 34px; cursor:pointer; transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s; box-shadow:0 12px 26px -8px var(--gold-glow,rgba(246,181,0,.5)); white-space:nowrap; }

.cookie-ok:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -8px var(--gold-glow,rgba(246,181,0,.65)); }

.cookie-ok:active{ transform:translateY(0); }

@keyframes cookieUp{ from{ transform:translate(-50%,30px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }

@keyframes cookieUpM{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

@media(max-width:640px){ .cookie-banner{ flex-direction:column; align-items:flex-start; gap:15px; bottom:12px; left:12px; right:12px; transform:none; width:auto; padding:20px; animation:cookieUpM .55s var(--ease); } .cookie-act{ width:100%; } .cookie-min,.cookie-ok{ flex:1; padding-left:0; padding-right:0; } }



/* ---------- YASAL SAYFALAR ---------- */

.legal{ max-width:860px; margin:0 auto; }

.legal-updated{ display:inline-block; color:var(--muted-2); font-size:.85rem; margin-bottom:24px; padding:6px 14px; border:1px solid var(--line); border-radius:100px; }

.legal h2{ font-size:1.35rem; margin:38px 0 14px; scroll-margin-top:100px; }

.legal h2:first-of-type{ margin-top:8px; }

.legal h3{ font-size:1.08rem; margin:22px 0 8px; }

.legal p{ margin-bottom:14px; font-size:.98rem; line-height:1.8; color:var(--muted); }

.legal strong{ color:var(--text); font-weight:600; }

.legal a{ color:var(--gold); font-weight:500; }

html[data-theme="light"] .legal a{ color:#9A6B00; }

.legal ul{ margin:0 0 18px; display:flex; flex-direction:column; gap:9px; }

.legal ul li{ position:relative; padding-left:22px; color:var(--muted); font-size:.96rem; line-height:1.7; }

.legal ul li::before{ content:''; position:absolute; left:2px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--gold); }

.legal-box{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 24px; margin:22px 0; box-shadow:0 8px 24px -16px rgba(15,23,42,.14); }

.legal-box p:last-child{ margin-bottom:0; }

.legal-box .row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem; }

.legal-box .row:last-child{ border-bottom:none; }

.legal-box .row .k{ color:var(--muted); } .legal-box .row .v{ font-weight:600; text-align:right; color:var(--text); }

/* Yasal sayfa kısa yol menüsü */

.legal-nav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }

.legal-nav a{ font-family:var(--f-head); font-size:.85rem; font-weight:500; color:var(--muted); padding:8px 16px; border:1px solid var(--line); border-radius:100px; transition:.25s; }

.legal-nav a:hover,.legal-nav a.active{ background:var(--gold); color:#0A0A0B; border-color:var(--gold); }



/* Footer yasal linkler */

.footer-legal{ display:flex; gap:12px 24px; flex-wrap:wrap; justify-content:center; padding-top:28px; border-top:1px solid var(--line); }

.footer-legal a{ font-family:var(--f-head); font-size:.85rem; font-weight:500; color:var(--muted); transition:color .25s; }

.footer-legal a:hover{ color:var(--gold); }



/* ---------- YARDIMCI ---------- */

.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}

.mb-2{margin-bottom:24px}

.hidden{ display:none !important; }

.notice{ background:rgba(246,181,0,.08); border:1px solid var(--line-2); border-left:3px solid var(--gold); border-radius:var(--radius-sm); padding:16px 20px; font-size:.92rem; color:var(--text); }



/* ============ AÇIK TEMA — BİLEŞEN İNCE AYARLARI ============ */



/* Altın metinlerin beyaz üstünde kontrastı */

html[data-theme="light"] .gold,

html[data-theme="light"] .eyebrow,

html[data-theme="light"] .theme-cat{ color:#9A6B00; }

html[data-theme="light"] .hero-stats .num{ color:#9A6B00; }

html[data-theme="light"] .gradient-text{ background:linear-gradient(100deg,#E0A500,#B5820C); -webkit-background-clip:text; background-clip:text; color:transparent; }

html[data-theme="light"] .eyebrow{ background:#fff; border-color:var(--line-2); box-shadow:0 2px 8px -4px rgba(15,23,42,.15); }

html[data-theme="light"] .order-code .code,

html[data-theme="light"] .odeme-copy code{ color:#8A5E00; }



/* Kartlar: beyaz + belirgin gölge, zeminden ayrışsın */

html[data-theme="light"] .card{

  background:#fff;

  border-color:var(--line);

  box-shadow:0 2px 4px rgba(15,23,42,.04), 0 12px 28px -14px rgba(15,23,42,.14);

}

html[data-theme="light"] .card:hover{

  border-color:var(--line-2);

  box-shadow:0 6px 12px rgba(15,23,42,.06), 0 26px 50px -22px rgba(15,23,42,.26);

}

/* Tema kartı — açık temada altın vurgular ve ışıma */

html[data-theme="light"] .theme-price{ color:#A97400; }

html[data-theme="light"] .theme-card:hover .theme-body h3{ color:#A97400; }

html[data-theme="light"] .theme-card:hover{

  border-color:var(--gold);

  box-shadow:0 30px 55px -24px rgba(246,181,0,.45), 0 22px 44px -26px rgba(15,23,42,.22);

}

html[data-theme="light"] .theme-card:hover .theme-foot .btn-dark{ background:var(--gold); color:#0A0A0B; border-color:var(--gold); }



/* İkincil buton (İncele vb.): siyah — marka uyumlu, net */

html[data-theme="light"] .btn-dark{ background:#16181D; color:#fff; border-color:#16181D; }

html[data-theme="light"] .btn-dark:hover{ background:#000; border-color:#000; }



/* Filtre butonları netleşsin */

html[data-theme="light"] .filter-btn{ background:#fff; border-color:var(--line-2); }

html[data-theme="light"] .filter-btn:hover{ background:#fff; color:var(--text); border-color:#9A6B00; }

html[data-theme="light"] .filter-btn.active{ background:var(--gold); color:#1b1b16; border-color:var(--gold); }



/* Hero mockup gölgesi */

html[data-theme="light"] .mockup{ box-shadow:0 40px 82px -30px rgba(15,23,42,.34), 0 14px 32px -18px rgba(15,23,42,.18); }



/* Sipariş ve özet kutuları belirginleşsin */

html[data-theme="light"] .ozet-box{ box-shadow:0 12px 30px -18px rgba(15,23,42,.18); }



/* SSS öğeleri */

html[data-theme="light"] .faq-item{ box-shadow:0 4px 14px -10px rgba(15,23,42,.14); border-color:rgba(15,23,42,.10); }

html[data-theme="light"] .faq-item:hover{ border-color:rgba(201,138,0,.4); }

html[data-theme="light"] .faq-item.open{ border-color:rgba(201,138,0,.5); background:linear-gradient(180deg,rgba(246,181,0,.06),transparent); box-shadow:0 12px 28px -16px rgba(201,138,0,.45); }



/* FAQ premium dokunuş: artı → altın daire, hover kalkışı */

/* ---------- MODERN SELECT SEARCH STYLES ---------- */

.ms-srch-wrap {

  padding: 8px 10px 8px;

  position: sticky;

  top: 0;

  background: var(--surface);

  z-index: 5;

  border-bottom: 1px solid var(--line-2);

}

.ms-search {

  width: 100%;

  padding: 8px 12px 8px 32px;

  border: 1px solid var(--line-2);

  border-radius: 100px;

  background: var(--bg-2);

  color: var(--text);

  font-size: 0.86rem;

  box-sizing: border-box;

}

.ms-search:focus {

  outline: none;

  border-color: var(--gold);

}

.ms-srch-ic {

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  width: 14px;

  height: 14px;

  color: var(--muted);

  pointer-events: none;

}

.ms-items-box {

  max-height: 220px;

  overflow-y: auto;

}

.ms-empty {

  padding: 16px 14px;

  text-align: center;

  font-size: 0.86rem;

  color: var(--muted-2);

}



.faq-item{transition:border-color .3s,transform .3s,box-shadow .3s}

.faq-item:hover{transform:translateY(-2px)}

.faq-q .plus{width:30px;height:30px;border-radius:50%;background:var(--bg-2);transition:background .3s,transform .3s}

.faq-q:hover .plus{background:var(--gold-glow,rgba(246,181,0,.18))}

.faq-item.open .plus{background:linear-gradient(135deg,var(--gold-2),var(--gold))}

.faq-item.open .plus::before{background:#231c00}

.faq-item.open .faq-q{color:var(--gold-deep)}



/* Header gölgesi (kaydırınca) */

html[data-theme="light"] .header.scrolled{ box-shadow:0 4px 20px -12px rgba(15,23,42,.18); }



/* Sosyal ikonlar */

html[data-theme="light"] .socials a{ background:#fff; }

html[data-theme="light"] .socials a:hover{ background:#fff; }



/* Notice / bilgi kutusu */

html[data-theme="light"] .notice{ background:#fff; box-shadow:0 6px 18px -12px rgba(15,23,42,.16); }



/* Form alanları */

html[data-theme="light"] .form-control{ background:#fff; }



/* Trust strip ayırıcı */

html[data-theme="light"] .trust-strip{ opacity:1; }



/* Hamburger açık temada net görünsün */

html[data-theme="light"] .nav-toggle{ border-color:rgba(15,23,42,.22); background:#fff; box-shadow:0 2px 10px -5px rgba(15,23,42,.2); }

html[data-theme="light"] .nav-toggle span{ background:#14161B; }



/* ============ MOBİL İNCE AYARLAR ============ */

@media(max-width:768px){

  .hero{ padding:32px 0 12px; }

  .mockup{ transform:none !important; }

  .cta-band{ padding:44px 22px; }

  .btn-lg{ padding:15px 26px; font-size:1rem; }

  .hero-stats{ gap:22px; }

  .sec-head{ margin-bottom:40px; }

  .price-card{ padding:30px 24px; }

}

@media(max-width:480px){

  .container{ padding:0 18px; }

  .hero-actions{ flex-direction:column; align-items:stretch; }

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

  .cta-band .btns{ flex-direction:column; }

  .cta-band .btns .btn{ width:100%; }

  .filters{ gap:8px; }

  .filter-btn{ padding:9px 16px; font-size:.85rem; }

  .theme-price{ font-size:1.15rem; }

  .nav{ height:64px; }

  .brand img{ height:28px; }

}



/* ===== "Tüm Temaları Keşfet" afili CTA ===== */

.tumtema-cta{display:inline-flex;align-items:center;gap:15px;padding:12px 14px;border-radius:100px;background:linear-gradient(120deg,var(--gold-2) 0%,var(--gold) 52%,var(--gold-deep) 100%);border:none;text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;box-shadow:0 16px 38px -14px var(--gold-glow,rgba(246,181,0,.65));animation:ttPulse 2.6s ease-in-out infinite}

.tumtema-cta:hover{transform:translateY(-4px) scale(1.025);box-shadow:0 26px 54px -14px var(--gold-glow,rgba(246,181,0,.8));animation:none}

.tt-badge{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#1a1c22;color:var(--gold-2);font-family:var(--f-head);font-weight:800;font-size:1rem;flex-shrink:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}

.tt-txt{display:flex;flex-direction:column;text-align:left;line-height:1.28}

.tt-txt strong{font-family:var(--f-head);font-size:1.1rem;color:#231c00}

.tt-txt small{font-size:.83rem;color:#1c1600;font-weight:700;margin-top:3px}

.tt-arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#1a1c22;color:var(--gold-2);transition:.3s;flex-shrink:0}

.tt-arrow svg{width:19px;height:19px}

.tumtema-cta:hover .tt-arrow{background:#000;transform:translateX(4px)}

@keyframes ttPulse{0%,100%{box-shadow:0 16px 38px -14px var(--gold-glow,rgba(246,181,0,.55))}50%{box-shadow:0 16px 46px -10px var(--gold-glow,rgba(246,181,0,.9))}}

@media(max-width:480px){.tt-txt small{display:none}}



/* ---------- SEVİYE ROZETLERİ (Standart / Gelişmiş / İleri) ---------- */

/* Kart üstü küçük chip (foto üzerinde okunur) */

.theme-sv{position:absolute;bottom:12px;left:12px;z-index:2}

.sv-chip{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;padding:5px 11px;border-radius:100px;line-height:1;letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 5px 16px -5px rgba(0,0,0,.45)}

.sv-chip svg{width:13px;height:13px}

.sv-chip.sv-gelismis{background:rgba(18,18,24,.84);color:#F6D379;border:1px solid rgba(246,211,121,.55)}

.sv-chip.sv-ileri{background:linear-gradient(100deg,#FFD64A,#F6B500);color:#231c00;border:1px solid rgba(255,255,255,.35)}

/* Detay sayfası şeridi */

.sv-band{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:15px;margin:20px 0 4px;border:1px solid var(--line)}

.sv-band-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}

.sv-band-ic svg{width:23px;height:23px}

.sv-band-tx{display:flex;flex-direction:column;gap:3px;min-width:0}

.sv-band-tx strong{font-family:var(--f-head);font-size:1.06rem;color:var(--text)}

.sv-band-tx small{font-size:.86rem;color:var(--muted);line-height:1.42}

.sv-band.sv-standart .sv-band-ic{background:linear-gradient(135deg,#9AA3B2,#7C8698)}

.sv-band.sv-gelismis .sv-band-ic{background:linear-gradient(135deg,#E7B008,#C9A15A)}

.sv-band.sv-ileri .sv-band-ic{background:linear-gradient(135deg,#FFD64A,#F6B500)}

.sv-band.sv-gelismis{border-color:rgba(201,161,90,.42);background:rgba(201,161,90,.07)}

.sv-band.sv-ileri{border-color:rgba(246,181,0,.45);background:rgba(246,181,0,.09)}



/* ===== Sektör kartları — sadece ince ikon dokunuşu (komple sarı YOK) ===== */

.sector-card:hover .sector-ic{ transform:translateY(-2px) scale(1.06) rotate(-3deg); }



/* ===== "Tüm Sektörleri Gör" çekici buton ===== */

.sektor-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:100px;border:1.5px solid var(--gold);color:var(--gold-deep);font-family:var(--f-head);font-weight:700;font-size:1rem;text-decoration:none;background:transparent;transition:transform .28s cubic-bezier(.22,1,.36,1),background .28s,box-shadow .28s,border-color .28s,color .28s}

.sektor-cta:hover{background:linear-gradient(120deg,var(--gold-2),var(--gold));color:#231c00;border-color:transparent;transform:translateY(-3px);box-shadow:0 18px 38px -14px var(--gold-glow,rgba(246,181,0,.6))}

.sektor-cta .sc-arrow{display:inline-flex;transition:transform .28s}

.sektor-cta .sc-arrow svg{width:18px;height:18px}

.sektor-cta:hover .sc-arrow{transform:translateX(5px)}

html[data-theme="light"] .sektor-cta{color:#A97400}

html[data-theme="light"] .sektor-cta:hover{color:#231c00}



/* ===== "Neden LinkteWeb" kartları — canlı hover + altın üst şerit ===== */

.neden-grid .feature{position:relative;overflow:hidden;transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s}

.neden-grid .feature::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-deep));transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.22,1,.36,1)}

.neden-grid .feature:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 26px 52px -26px var(--gold-glow,rgba(246,181,0,.5))}

.neden-grid .feature:hover::after{transform:scaleX(1)}

.neden-grid .feature .ic{transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}

.neden-grid .feature:hover .ic{transform:translateY(-3px) scale(1.08) rotate(-4deg);box-shadow:0 14px 26px -10px var(--gold-glow,rgba(246,181,0,.6))}

.neden-grid .feature h3{transition:color .25s}

.neden-grid .feature:hover h3{color:var(--gold-deep)}





/* ==========================================================================

   MARKALI PROMO KART SLAYTLARI (BEYAZ, FERAH, LÜKS BANT)

   ========================================================================== */



.lw-promo-card {

  width: 100%;

  height: 100%;

  padding: 32px 36px;

  background: radial-gradient(circle at top right, rgba(246,181,0,0.06), transparent 50%), #ffffff;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  text-align: left;

  border-radius: 0 0 16px 16px;

  position: relative;

  box-sizing: border-box;

}



.lw-promo-card-h {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #f1f5f9;

  padding-bottom: 16px;

  margin-bottom: 20px;

}



.lw-promo-brand {

  display: flex;

  align-items: center;

  gap: 8px;

  font-family: var(--f-head);

  font-size: 1.1rem;

  font-weight: 800;

  color: #0f172a;

}



.lw-promo-brand span {

  color: var(--gold-deep, #d97706);

}



.lw-promo-badge {

  background: #fef3c7;

  color: #b45309;

  font-family: var(--f-head);

  font-size: 0.76rem;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 100px;

  border: 1px solid #fde68a;

}



.lw-promo-body {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  margin-bottom: 20px;

}



.lw-promo-box {

  background: #f8fafc;

  border: 1.5px solid #e2e8f0;

  border-radius: 14px;

  padding: 18px;

  transition: border-color 0.2s;

}



.lw-promo-box.pop {

  background: #fffdf5;

  border-color: var(--gold);

  box-shadow: 0 8px 20px -6px rgba(245,158,11,0.2);

}



.lw-promo-box-t {

  font-family: var(--f-head);

  font-size: 0.84rem;

  font-weight: 700;

  color: #64748b;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.lw-promo-box.pop .lw-promo-box-t {

  color: #b45309;

}



.lw-promo-price {

  font-family: var(--f-head);

  font-size: 1.6rem;

  font-weight: 800;

  color: #0f172a;

  line-height: 1.1;

  margin-bottom: 6px;

}



.lw-promo-desc {

  font-size: 0.8rem;

  color: #475569;

  line-height: 1.35;

}



.lw-promo-footer {

  display: flex;

  align-items: center;

  justify-content: space-around;

  background: #f1f5f9;

  padding: 12px 18px;

  border-radius: 12px;

  gap: 12px;

  flex-wrap: wrap;

}



.lw-promo-feat {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 0.78rem;

  font-weight: 600;

  color: #334155;

}



.lw-promo-feat svg {

  width: 15px;

  height: 15px;

  color: #10b981;

  flex-shrink: 0;

}



/* ==========================================================================

   ÖZEL REKLAM POST BANNER TASARIMI (INSTAGRAM POST STİLİ)

   ========================================================================== */



.lw-post-banner {

  width: 100%;

  height: 100%;

  padding: 32px 40px;

  background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  text-align: center;

  position: relative;

  box-sizing: border-box;

  overflow: hidden;

}



.lw-post-logo {

  position: absolute;

  top: 20px;

  left: 24px;

  display: flex;

  align-items: center;

  gap: 6px;

  font-family: var(--f-head);

  font-size: 0.95rem;

  font-weight: 800;

  color: #0f172a;

}



.lw-post-logo span {

  color: var(--gold-deep, #d97706);

}



.lw-post-head {

  margin-top: 18px;

  margin-bottom: 20px;

}



.lw-post-head h2 {

  font-family: var(--f-head);

  font-size: 1.65rem;

  font-weight: 900;

  color: #0f172a;

  letter-spacing: -0.02em;

  margin-bottom: 6px;

  text-transform: uppercase;

}



.lw-post-head p {

  font-size: 0.9rem;

  color: #475569;

  font-weight: 500;

}



.lw-post-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

  max-width: 580px;

  margin: 0 auto 20px;

}



.lw-post-badge {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  color: #1e293b;

  font-family: var(--f-head);

  font-size: 0.82rem;

  font-weight: 700;

  padding: 8px 16px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  transition: transform 0.2s;

}



.lw-post-badge:hover {

  transform: translateY(-2px);

  border-color: var(--gold);

}



.lw-post-badge.pop {

  background: #fffdf5;

  border-color: var(--gold);

  color: #b45309;

  box-shadow: 0 6px 16px rgba(245,158,11,0.2);

}



.lw-post-footer {

  margin-top: auto;

}



.lw-post-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 28px;

  border-radius: 100px;

  background: #ffffff;

  color: #0f172a;

  font-family: var(--f-head);

  font-size: 0.9rem;

  font-weight: 800;

  border: 1px solid #cbd5e1;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);

  text-decoration: none;

  transition: all 0.25s ease;

}



.lw-post-btn:hover {

  background: #0f172a;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow: 0 10px 24px rgba(15,23,42,0.25);

}



/* ==========================================================================

   KUSURSUZ MOBİL EKRAN UYUMLULUK SİSTEMİ (320px - 768px)

   ========================================================================== */



@media (max-width: 768px) {

  .container { padding: 0 16px; }

  .section { padding: 48px 0; }

  .sec-head { margin-bottom: 32px; }

  .hero { padding: 40px 0 24px; }

  

  /* Kart & Grid Uyumları */

  .grid { gap: 16px; }

  .hero-actions { flex-direction: column; width: 100%; }

  .hero-actions .btn { width: 100%; justify-content: center; }

  

  /* Mockup & Galeri Mobil */

  .mockup-gallery { border-radius: 0 !important; }

  .gal-thumbs-wrap { gap: 6px; margin-top: 10px; }

  .gal-thumb { width: 48px; height: 32px; border-radius: 6px; }

  

  /* Post Ad Banner Mobil */

  .lw-post-banner { padding: 20px 16px; }

  .lw-post-head h2 { font-size: 1.25rem; }

  .lw-post-head p { font-size: 0.82rem; }

  .lw-post-badge { font-size: 0.75rem; padding: 6px 12px; }

  

  /* Tablo ve Fiyatlandırma Mobil */

  .pricing-grid, .features-grid { grid-template-columns: 1fr !important; }

}



/* ==========================================================================

   ULTRA LUXURY MOBİL MENÜ & TASARIM DENGE SİSTEMİ

   ========================================================================== */



/* Mobil Menü Açıkken Yüzen WhatsApp Butonunu ve Sayfa Sızmalarını Tam Kapat */

body.mob-menu-open {

  overflow: hidden !important;

  height: 100vh !important;

  height: 100dvh !important;

  touch-action: none !important;

}



body.mob-menu-open .wa-float,

body.mob-menu-open .whatsapp-float,

body.mob-menu-open #waFloat {

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

  transform: scale(0) !important;

  transition: opacity 0.2s, transform 0.2s !important;

}



/* Mobil Menü Çekmecesi — iOS Dokulu Tam Gövde Katmanı */

.mobile-menu {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  width: 100vw !important;

  height: 100vh !important;

  height: 100dvh !important;

  z-index: 999999 !important;

  background: var(--bg) !important; /* Düz ve opak zemin — arkadaki hiçbir öğe veya metin asla sızamaz */

  backdrop-filter: blur(32px);

  -webkit-backdrop-filter: blur(32px);

  opacity: 0;

  visibility: hidden;

  transform: translateY(-16px);

  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  overscroll-behavior: contain !important; /* Mobil elastik kaydırmada arka sayfa sıçramasını önler */

  -webkit-overflow-scrolling: touch;

  padding: 18px 18px max(36px, env(safe-area-inset-bottom, 36px)) !important;

  box-sizing: border-box !important;

}



.mobile-menu-inner {

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-height: 100%;

}



.mobile-menu.open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.mobile-menu-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 6px;

  margin-bottom: 0;

}



.mobile-menu-head .brand img {

  height: 34px;

  width: auto;

}



.mobile-menu-close {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: var(--surface);

  border: 1px solid var(--line-2);

  color: var(--text);

  display: grid;

  place-items: center;

  cursor: pointer;

  box-shadow: 0 4px 14px rgba(0,0,0,0.06);

  transition: transform 0.2s, border-color 0.2s, background 0.2s;

  -webkit-tap-highlight-color: transparent !important;

}



.mobile-menu-close svg {

  width: 20px;

  height: 20px;

}



.mobile-menu-close:active {

  transform: scale(0.92);

  background: var(--surface-2);

}



/* Hızlı Tema Arama Çubuğu */

.mobile-search-form {

  position: relative;

  display: flex;

  align-items: center;

  margin-bottom: 2px;

}



.mobile-search-form .m-search-ic {

  position: absolute;

  left: 14px;

  width: 19px;

  height: 19px;

  color: var(--gold);

  pointer-events: none;

}



.mobile-search-inp {

  width: 100%;

  padding: 13px 68px 13px 44px;

  border-radius: 14px;

  background: var(--surface);

  border: 1px solid var(--line-2);

  color: var(--text);

  font-family: inherit;

  font-size: 0.9rem;

  box-shadow: 0 4px 14px -6px rgba(15,23,42,0.06);

  outline: none;

  transition: border-color 0.2s, box-shadow 0.2s;

}



.mobile-search-inp:focus {

  border-color: var(--gold);

  box-shadow: 0 0 0 3px rgba(246, 181, 0, 0.15);

}



.mobile-search-btn {

  position: absolute;

  right: 6px;

  padding: 7px 14px;

  border-radius: 10px;

  background: var(--gold);

  color: #0A0A0B;

  border: none;

  font-family: var(--f-head);

  font-size: 0.8rem;

  font-weight: 700;

  cursor: pointer;

  transition: transform 0.15s;

}



.mobile-search-btn:active {

  transform: scale(0.94);

}



/* Bağımsız Yüzen Kartlar — Dengeli 10px Boşluklama */

.mobile-menu-links {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.mobile-nav-item {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 15px 18px;

  border-radius: 16px;

  background: var(--surface);

  border: 1px solid var(--line-2);

  text-decoration: none;

  box-shadow: 0 4px 16px -8px rgba(15,23,42,0.08);

  transition: all 0.25s ease;

  -webkit-tap-highlight-color: transparent !important;

}



.mobile-nav-item .mn-ic {

  width: 42px;

  height: 42px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(246, 181, 0, 0.16), rgba(246, 181, 0, 0.05));

  border: 1px solid var(--line-2);

  color: var(--gold);

  display: grid;

  place-items: center;

  flex-shrink: 0;

}



.mobile-nav-item .mn-ic svg {

  width: 20px;

  height: 20px;

}



.mobile-nav-item .mn-info {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

}



.mobile-nav-item .mn-info strong {

  font-family: var(--f-head);

  font-size: 0.98rem;

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

}



.mobile-nav-item .mn-info small {

  font-size: 0.76rem;

  color: var(--muted);

  margin-top: 3px;

}



.mobile-nav-item .mn-arrow {

  color: var(--muted-2);

  transition: transform 0.2s, color 0.2s;

  display: flex;

  align-items: center;

}



.mobile-nav-item .mn-arrow svg {

  width: 18px;

  height: 18px;

}



.mobile-nav-item .mn-badge {

  background: linear-gradient(135deg, var(--gold-2), var(--gold));

  color: #0A0A0B;

  font-family: var(--f-head);

  font-size: 0.75rem;

  font-weight: 800;

  padding: 4px 11px;

  border-radius: 100px;

  box-shadow: 0 4px 12px rgba(246,181,0,0.3);

}



.mobile-nav-item:active,

.mobile-nav-item.active {

  border-color: var(--gold);

  background: linear-gradient(135deg, rgba(246, 181, 0, 0.12), var(--surface));

  transform: scale(0.99);

}



.mobile-nav-item.active .mn-info strong {

  color: var(--gold-deep);

}



.mobile-menu-footer {

  margin-top: 0;

  padding-top: 0;

  border-top: none;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.mobile-theme-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 15px 18px;

  border-radius: 16px;

  background: var(--surface);

  border: 1px solid var(--line-2);

  box-shadow: 0 4px 16px -8px rgba(15,23,42,0.08);

  cursor: pointer;

  -webkit-tap-highlight-color: transparent !important;

}



.mobile-theme-card .mt-ic {

  width: 42px;

  height: 42px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(246, 181, 0, 0.18), rgba(246, 181, 0, 0.05));

  border: 1px solid var(--line-2);

  color: var(--gold);

  display: grid;

  place-items: center;

  flex-shrink: 0;

}



/* Strict Tek İkon Gösterimi: Asla Üst Üste Binmez */

.mt-ic .ic-moon,

.mt-ic .ic-sun,

.mt-ic .moon,

.mt-ic .sun {

  width: 22px !important;

  height: 22px !important;

  display: none !important;

}



html[data-theme="dark"] .mt-ic .ic-moon,

html[data-theme="dark"] .mt-ic .moon {

  display: block !important;

}



html[data-theme="light"] .mt-ic .ic-sun,

html[data-theme="light"] .mt-ic .sun {

  display: block !important;

}

  display: grid;

  place-items: center;

}



.mobile-theme-card .mt-ic svg {

  width: 18px;

  height: 18px;

}



/* Sektör Kartları Yenilemesi */

.sector-grid {

  gap: 14px;

}



.sector-card {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: space-between;

  padding: 22px 20px;

  min-height: 155px;

  border-radius: 18px;

  background: var(--surface);

  border: 1px solid var(--line-2);

  box-shadow: 0 8px 24px -16px rgba(15,23,42,0.12);

  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;

  text-decoration: none;

  position: relative;

  overflow: hidden;

}



.sector-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--gold-2), var(--gold));

  opacity: 0;

  transition: opacity 0.3s ease;

}



.sector-card:hover,

.sector-card:active {

  transform: translateY(-4px);

  border-color: var(--gold);

  box-shadow: 0 16px 36px -18px var(--gold-glow, rgba(246,181,0,0.4));

}



.sector-card:hover::before,

.sector-card:active::before {

  opacity: 1;

}



.sector-card .sector-ic {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(246, 181, 0, 0.18), rgba(246, 181, 0, 0.06));

  border: 1px solid var(--line-2);

  color: var(--gold);

  display: grid;

  place-items: center;

  margin-bottom: 14px;

  transition: transform 0.3s ease;

}



.sector-card:hover .sector-ic {

  transform: scale(1.08) rotate(-4deg);

  background: linear-gradient(135deg, var(--gold-2), var(--gold));

  color: #0A0A0B;

}



.sector-name {

  font-family: var(--f-head);

  font-weight: 700;

  font-size: 1.02rem;

  color: var(--text);

  line-height: 1.3;

  margin-bottom: 6px;

  word-break: break-word;

}



.sector-count {

  display: inline-flex;

  align-items: center;

  font-size: 0.76rem;

  font-weight: 700;

  font-family: var(--f-head);

  color: var(--gold-deep);

  background: rgba(246, 181, 0, 0.1);

  padding: 4px 11px;

  border-radius: 100px;

  border: 1px solid rgba(246, 181, 0, 0.25);

}



@media (max-width: 768px) {

  .sector-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 12px !important;

  }

  .sector-card {

    padding: 18px 14px !important;

    min-height: 140px !important;

    border-radius: 16px !important;

  }

  .sector-card .sector-ic {

    width: 42px !important;

    height: 42px !important;

    margin-bottom: 10px !important;

    border-radius: 12px !important;

  }

  .sector-card .sector-ic svg {

    width: 20px !important;

    height: 20px !important;

  }

  .sector-name {

    font-size: 0.92rem !important;

    line-height: 1.25 !important;

    margin-bottom: 4px !important;

  }

  .sector-count {

    font-size: 0.72rem !important;

    padding: 3px 9px !important;

  }



  /* Paket kartları 100% eşit boyut ve dikey düzen */

  .price-grid {

    align-items: stretch !important;

    gap: 28px !important;

  }

  .price-card {

    padding: 34px 26px !important;

    border-radius: 24px !important;

    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;

  }

  .price-card ul {

    flex: 1 !important;

    margin-bottom: 24px !important;

  }

  .price-card .btn {

    margin-top: auto !important;

  }

  .price-card.pop {

    border-width: 2px !important;

  }

  .pop-flag {

    top: -14px !important;

    transform: none !important;

    right: 20px !important;

  }

}



@media (max-width: 480px) {

  h1 { font-size: 2rem !important; line-height: 1.2; }

  h2 { font-size: 1.6rem !important; line-height: 1.2; }

  .lead { font-size: 1rem; }

  

  /* Küçük ekranlar (iPhone SE / Galaxy Fold) */

  .container { padding: 0 14px; }

  .btn { padding: 12px 20px; font-size: 0.9rem; }

}



/* ==========================================================================

   İLETİŞİM KANALLARI (TEK TİP & EŞİT YÜKSEKLİKTE LÜKS KARTLAR)

   ========================================================================== */



.contact-channels {

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-bottom: 24px;

}



.contact-card {

  display: flex;

  align-items: center;

  gap: 18px;

  padding: 20px 24px;

  height: 84px;

  border-radius: 20px;

  background: var(--surface);

  border: 1px solid var(--line-2);

  box-shadow: 0 8px 24px -16px rgba(15,23,42,0.12);

  text-decoration: none;

  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  -webkit-tap-highlight-color: transparent !important;

}



.contact-card:hover,

.contact-card:active {

  transform: translateY(-4px);

  border-color: var(--gold);

  box-shadow: 0 16px 36px -18px var(--gold-glow, rgba(246,181,0,0.4));

}



.contact-card-wa {

  border-color: rgba(37, 211, 102, 0.35);

  background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), var(--surface));

}



.contact-card-wa:hover {

  border-color: #25D366;

  box-shadow: 0 4px 22px rgba(37, 211, 102, 0.45);

}



.contact-card .cc-ic {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(246, 181, 0, 0.18), rgba(246, 181, 0, 0.06));

  border: 1px solid var(--line-2);

  color: var(--gold);

  display: grid;

  place-items: center;

  flex-shrink: 0;

  transition: transform 0.3s ease;

}



.contact-card .cc-ic.wa {

  background: #25D366;

  color: #ffffff;

  border-color: #25D366;

  box-shadow: 0 8px 20px -6px rgba(37, 211, 102, 0.5);

}



.contact-card .cc-ic svg {

  width: 22px;

  height: 22px;

}



.contact-card .cc-info {

  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

}



.contact-card .cc-label {

  font-size: 0.76rem;

  font-family: var(--f-head);

  font-weight: 600;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.04em;

  margin-bottom: 2px;

}



.contact-card .cc-value {

  font-family: var(--f-head);

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.contact-card .cc-arrow {

  color: var(--muted-2);

  transition: transform 0.25s, color 0.25s;

}



.contact-card:hover .cc-arrow {

  transform: translateX(4px);

  color: var(--gold);

}



/* ==========================================================================

   FİYATLANDIRMA KARŞILAŞTIRMA SEÇİCİSİ (MOBİL + MASAÜSTÜ SİSTEMİ)

   ========================================================================== */



.lw-comp-desktop {

  display: block;

}



.lw-comp-mobile {

  display: none;

}



@media (max-width: 768px) {

  .lw-comp-desktop {

    display: none !important;

  }

  .lw-comp-mobile {

    display: flex !important;

    flex-direction: column;

    gap: 16px;

  }

  

  .lw-comp-tabs {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 6px;

    background: var(--surface);

    padding: 6px;

    border-radius: 16px;

    border: 1px solid var(--line-2);

  }

  

  .lw-ctab {

    border: none;

    background: transparent;

    font-family: var(--f-head);

    font-size: 0.78rem;

    font-weight: 700;

    color: var(--muted);

    padding: 10px 4px;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

    text-align: center;

    -webkit-tap-highlight-color: transparent !important;

  }

  

  .lw-ctab.active {

    background: linear-gradient(135deg, var(--gold-2), var(--gold));

    color: #0A0A0B;

    box-shadow: 0 6px 16px rgba(246,181,0,0.35);

  }

  

  .lw-comp-card {

    padding: 20px 18px !important;

    border-radius: 20px !important;

  }

  

  .lw-citem {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 0;

    border-bottom: 1px solid var(--line);

    gap: 12px;

  }

  

  .lw-citem:last-child {

    border-bottom: none;

  }

  

  .lw-cname {

    font-family: var(--f-head);

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text);

    line-height: 1.35;

  }

  

  .lw-ok-badge {

    font-family: var(--f-head);

    font-size: 0.76rem;

    font-weight: 800;

    color: #12805c;

    background: rgba(18,128,92,0.12);

    padding: 4px 10px;

    border-radius: 100px;

    border: 1px solid rgba(18,128,92,0.25);

    white-space: nowrap;

  }

  

  .lw-no-badge {

    font-family: var(--f-head);

    font-size: 0.76rem;

    font-weight: 600;

    color: var(--muted-2);

    background: var(--bg-2);

    padding: 4px 10px;

    border-radius: 100px;

    white-space: nowrap;

  }

}



/* ==========================================================================

   GÖRÜNÜM MODU TOGGLE SWITCH & WHATSAPP GLOW CTA

   ========================================================================== */



.mt-toggle-pill {

  width: 48px;

  height: 26px;

  border-radius: 100px;

  background: var(--bg-2);

  border: 1px solid var(--line-2);

  position: relative;

  flex-shrink: 0;

  display: block;

  transition: background 0.3s;

}



.mt-toggle-circle {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--gold-2), var(--gold));

  position: absolute;

  top: 2px;

  left: 2px;

  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

}



html[data-theme="light"] .mt-toggle-circle {

  transform: translateX(22px);

  background: linear-gradient(135deg, #0f172a, #334155);

}



.btn-wa-gold {

  background: linear-gradient(135deg, #25D366 0%, #12805c 100%) !important;

  color: #ffffff !important;

  border: none !important;

  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.65) !important;

  font-family: var(--f-head) !important;

  font-weight: 800 !important;

  font-size: 1.02rem !important;

  padding: 16px 24px !important;

  border-radius: 100px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 12px !important;

  text-decoration: none !important;

  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;

  animation: waPulseGlow 3s ease-in-out infinite;

}



.btn-wa-gold:active {

  transform: scale(0.97) !important;

  box-shadow: 0 6px 20px -6px rgba(37, 211, 102, 0.8) !important;

}



@keyframes waPulseGlow {

  0%, 100% { box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.65); }

  50% { box-shadow: 0 16px 42px -4px rgba(37, 211, 102, 0.9); }

}



/* ==========================================================================

   YORUMLAR YÖN OKLARI DOKUNMA TEPKİSİ (TAP FEEDBACK)

   ========================================================================== */



.yorum-arrow.tapped,

.yorum-arrow:active {

  transform: scale(0.86) !important;

  background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important;

  color: #0A0A0B !important;

  box-shadow: 0 0 0 6px rgba(246, 181, 0, 0.35), 0 14px 30px -4px rgba(246, 181, 0, 0.75) !important;

  border-color: transparent !important;

}



/* ==========================================================================

   BREADCRUMB GİZLEME (KULLANICI İSTEĞİ)

   ========================================================================== */

.breadcrumb {

  display: none !important;

}



/* ==========================================================================

   MOCKUP TARAYICI ÇERÇEVESİ — GALERİ (TEK KAYNAK, ÇAKIŞMA YOK)

   ========================================================================== */



/*

  .mockup            → Dış çerçeve (overflow:hidden, border-radius:18px)

  .mockup-bar        → Tarayıcı çubuğu (kırmızı/sarı/yeşil noktalar + URL)

  .mockup-gallery    → Görsel alanı (aspect-ratio 1280/850, overflow:hidden, bg:#fff)

  .mockup-slides-container → Slayt konteyneri (her slayt absolute + cross-fade)

  .mockup-slide               → Galeri slaytı (object-fit:contain, center, beyaz bg)

  .mockup-slide.slide-cover   → Kapak slaytı  (object-fit:cover,  top,    koyu bg)

  .mockup-slide img  → Galeri görseli (contain + center + beyaz — marketing uyumlu)

  .mockup-slide.slide-cover img → Kapak görseli (cover + top + koyu — screenshot uyumlu)

*/



/* Mockup dış çerçeve — sadece tema sayfasındaki mockup için */

.mockup-gallery-frame {

  position: relative;

  background: var(--surface);

  border: 1px solid var(--line-2);

  border-radius: 18px;

  box-shadow: 0 44px 90px -34px rgba(15,23,42,.55), 0 14px 34px -20px rgba(0,0,0,.30);

  overflow: hidden;

  width: 100%;

  box-sizing: border-box;

}



/* Galerili mockup'ta hover efektini kaldır */

.mockup-gallery-frame:hover {

  transform: none !important;

}



/* Mockup bar (tarayıcı çubuğu) — üst köşeler yuvarlatılır, alt yok */

.mockup-gallery-frame .mockup-bar {

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 13px 16px;

  background: var(--bg-2);

  border-bottom: 1px solid var(--line);

  width: 100%;

  box-sizing: border-box;

  border-radius: 0;

  position: relative;

  z-index: 2;

  /* Gallery-mode için smooth collapse geçişi */

  overflow: hidden;

  max-height: 60px;

  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;

}



/* Gallery-mode: marketing/galeri slaytı gösterilirken taıyacı çubuğu tamamen yık */

.mockup-gallery-frame.gallery-mode .mockup-bar {

  max-height: 0;

  opacity: 0;

  padding-top: 0;

  padding-bottom: 0;

  border-bottom: none;

  pointer-events: none;

}



/* GALİRİ ALANI — 1280:850 oran kilidi

   KRİTİK: aspect-ratio yerine padding-bottom trick kullanılıyor.

   aspect-ratio ile belirlenen yükseklik bazı tarayıcılarda child height:100%

   için 'definite' olarak iletilmiyor → görsel taşıyordu.

   padding-bottom:66.40625% ise padding kutuüzerinden garanti kesin yükseklik sağlar. */

.mockup-gallery {

  position: relative;

  width: 100%;

  height: 0;            /* Yükseklik padding'den geliyor, content:0 */

  padding-bottom: 62.5%; /* 800 / 1280 × 100% — gerçek görsel oranı (1280x800) */

  overflow: hidden;

  background: var(--surface); /* Olası boşluklarda beyaz değil, tema rengi görünsün */

}



/*

  Slayt şeridi — tüm slaytlar üst üste (position:absolute), aktif olan görünür.

  Cross-fade geçişi: opacity 0→1, translateX yok, arkadan geçme yok.

*/

.mockup-slides-container {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  /* width/height:100% kaldırıldı — inset:0 tarzı kesin boyut sağlar */

  overflow: hidden;

}



/* Tek slayt — üst üste, sadece aktif olan görünür.

   Flex layout: galeri/marketing görselleri için merkezi hizalama + doğal skalama */

.mockup-slide {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  opacity: 0;

  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: none;

  display: block;

  background: var(--surface);

}



/* Aktif slayt */

.mockup-slide.is-active {

  opacity: 1;

  pointer-events: auto;

}



/* Slayt görseli — galeri/marketing görseli için kesin taşmasız gösterim.

   width:100% = slide genişliğini tam doldurur (padding-bottom ile kesin genişlik gelir).

   height:auto = 1280:850 oranını korur, hiçbir height:100% zincirine bağlı değil.

   flex-shrink:0 = flex'in ekstra küçültme yapmasını önler. */

/* Marketing slayt görseli — container'ı tamamen kapsar, beyaz boşluk kalmaz.

   object-fit:cover ile görsel her zaman tam doldurur (oran farkı olsa bile). */

.mockup-slide img {

  display: block;

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  border-radius: 0;

  cursor: zoom-in;

  user-select: none;

  -webkit-user-drag: none;

  max-width: unset;

}



/* Kapak slaytı (ilk slayt = tema web sitesi screenshot'ı) —

   Özel davranış: tam dolduran cover + üstten başlayan gösterim.

   display:block ile flex iptal edilir, img: absolute ile kesinlikle tam doldurur. */

.mockup-slide.slide-cover {

  display: block;

  background: #0d0d0d;

}

.mockup-slide.slide-cover img {

  position: absolute;

  inset: 0;           /* top:0; right:0; bottom:0; left:0 — hiçbir boşluk yok */

  width: 100%;

  height: 100%;

  max-width: unset;   /* Galeri max kısıtlamalarını kaldır */

  max-height: unset;

  object-fit: cover;

  object-position: top center;

  background: #0d0d0d;

  cursor: zoom-in;

}



/* Thumbnail: kapak küçük resmi de cover + top davranışını korusun */

.gal-thumb.slide-cover img {

  object-fit: cover;

  object-position: top center;

  background: #0d0d0d;

}



/* Slayt sayacı rozeti */

.slide-counter {

  position: absolute;

  top: 12px;

  right: 12px;

  z-index: 10;

  background: rgba(10, 10, 11, 0.72);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  color: #fff;

  padding: 4px 11px;

  border-radius: 100px;

  font-family: var(--f-head);

  font-size: 0.75rem;

  font-weight: 700;

  border: 1px solid rgba(255,255,255,0.15);

  pointer-events: none;

}



/* Galeri yön okları */

.gal-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(10, 10, 11, 0.82);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: #fff;

  border: 1.5px solid rgba(255,255,255,0.22);

  display: grid;

  place-items: center;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(0,0,0,0.4);

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}



.gal-arrow.prev { left: 12px; }

.gal-arrow.next { right: 12px; }

.gal-arrow svg { width: 20px; height: 20px; pointer-events: none; }



@media (hover: hover) {

  .gal-arrow:hover {

    background: rgba(10, 10, 11, 0.96);

    color: var(--gold, #f6b500);

    border-color: var(--gold, #f6b500);

    transform: translateY(-50%) scale(1.08);

  }

}



.gal-arrow:active {

  transform: translateY(-50%) scale(0.93) !important;

  background: linear-gradient(135deg, var(--gold-2, #fbbf24), var(--gold, #f59e0b)) !important;

  color: #0A0A0B !important;

  border-color: transparent !important;

}



.gal-arrow:focus, .gal-arrow:focus-visible { outline: none; }



/* Thumbnail şeridi (küçük resimler) */

.gal-thumbs-wrap {

  display: flex;

  gap: 8px;

  margin-top: 14px;

  margin-bottom: 4px;

  overflow-x: auto;

  padding: 6px !important;

  scrollbar-width: thin;

  scrollbar-color: var(--line) transparent;

}



.gal-thumb {

  flex-shrink: 0;

  width: 88px;

  height: 56px;

  border-radius: 10px;

  overflow: hidden;

  border: 2px solid var(--line);

  cursor: pointer;

  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;

  background: var(--bg-2);

  position: relative;

}



.gal-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  background: #f5f5f5;

  display: block;

}



.gal-thumb:hover {

  border-color: var(--gold, #f6b500);

  transform: translateY(-2px);

}



.gal-thumb.active {

  border-color: var(--gold, #f6b500) !important;

  outline: 2px solid var(--gold, #f6b500) !important;

  outline-offset: 1px !important;

  box-shadow: 0 0 12px rgba(246,181,0,0.45) !important;

}



/* Canlı önizleme butonu */

.btn-onizleme {

  margin-top: 20px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 10px !important;

  padding: 15px 28px !important;

  border-radius: 100px !important;

  font-family: var(--f-head) !important;

  font-weight: 800 !important;

  font-size: 1.02rem !important;

  letter-spacing: 0.02em !important;

  background: linear-gradient(135deg, #FAD02C 0%, #F6B500 50%, #E09E00 100%) !important;

  color: #120E04 !important;

  border: 1px solid rgba(255,255,255,0.4) !important;

  box-shadow: 0 12px 30px -4px rgba(246,181,0,0.45) !important;

  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.btn-onizleme:hover {

  transform: translateY(-3px) scale(1.01) !important;

  box-shadow: 0 16px 40px -4px rgba(246,181,0,0.65) !important;

  background: linear-gradient(135deg, #FFE052 0%, #F8BF15 50%, #EAA905 100%) !important;

}



.btn-onizleme:active {

  transform: translateY(0) scale(0.98) !important;

  box-shadow: 0 8px 20px -4px rgba(246,181,0,0.5) !important;

}



.btn-onizleme svg {

  width: 21px !important;

  height: 21px !important;

  flex-shrink: 0 !important;

}



/* Lightbox açıldığında sağ scrollbar (aşağı indirme çubuğu) tamamen gizlensin */

html.lw-scroll-lock,

body.lw-scroll-lock {

  overflow: hidden !important;

  overflow-y: hidden !important;

  padding-right: 0 !important;

}



.lw-lightbox {

  position: fixed;

  inset: 0;

  z-index: 999999;

  background: rgba(5, 8, 16, 0.96);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 60px 24px 20px !important;

  box-sizing: border-box;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.28s ease;

}



.lw-lightbox.open {

  opacity: 1;

  pointer-events: auto;

}



/* Görsel Sahnesi — Flex 1 ile Esnek Sınırlandırma */

.lw-lightbox-stage {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 0 !important;

  overflow: hidden;

}



.lw-lightbox-img {

  display: block;

  max-width: 100%;

  max-height: 100% !important;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 14px;

  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);

  user-select: none;

  -webkit-user-drag: none;

  transition: opacity 0.22s ease;

  margin: 0 !important;

}



/* Kapatma butonu — sağ üst köşe */

.lw-lightbox-close {

  position: fixed;

  top: 20px;

  right: 20px;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(30,30,40,0.75);

  color: #fff;

  border: 1px solid rgba(255,255,255,0.22);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  display: grid;

  place-items: center;

  cursor: pointer;

  transition: background 0.2s, transform 0.2s, border-color 0.2s;

  z-index: 1000002;

  line-height: 1;

}



.lw-lightbox-close:hover {

  background: #dc2626;

  border-color: #dc2626;

  transform: scale(1.1) rotate(90deg);

}



.lw-lightbox-close svg { width: 18px; height: 18px; pointer-events: none; }



/* Sayaç — sol üst köşe */

.lw-lightbox-counter {

  position: fixed;

  top: 24px;

  left: 24px;

  color: rgba(255,255,255,0.92);

  font-family: var(--f-head);

  font-size: 0.84rem;

  font-weight: 700;

  background: rgba(20,20,28,0.72);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  padding: 5px 13px;

  border-radius: 100px;

  border: 1px solid rgba(255,255,255,0.15);

  z-index: 1000002;

  pointer-events: none;

  letter-spacing: 0.05em;

}



/* Lightbox okları — görsel alanının tam ortasında (yanlarda) */

.lw-lightbox-arrow {

  position: fixed;

  top: 50%;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(20,20,28,0.70);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  color: #fff;

  border: 1px solid rgba(255,255,255,0.18);

  display: grid;

  place-items: center;

  cursor: pointer;

  z-index: 1000002;

  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;

  -webkit-tap-highlight-color: transparent;

}



.lw-lightbox-arrow:hover {

  background: linear-gradient(135deg, var(--gold-2, #fbbf24), var(--gold, #f59e0b));

  color: #0A0A0B;

  border-color: transparent;

  transform: translateY(-50%) scale(1.1);

}



/* Oklar padding içinde — görsel alanının sol/sağına hizalı */

.lw-lightbox-arrow.prev { left: 10px; }

.lw-lightbox-arrow.next { right: 10px; }

.lw-lightbox-arrow svg { width: 22px; height: 22px; pointer-events: none; }



/* Nokta göstergesi — alt orta */

.lw-lightbox-dots {

  position: fixed;

  bottom: 28px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 8px;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  padding: 8px 18px;

  border-radius: 100px;

  border: 1px solid rgba(255,255,255,0.2);

  z-index: 1000002;

}



.lw-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255,255,255,0.35);

  cursor: pointer;

  transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;

  flex-shrink: 0;

}



.lw-dot.active {

  width: 24px;

  border-radius: 100px;

  background: var(--gold, #f59e0b);

  box-shadow: 0 0 12px rgba(245,158,11,0.55);

}



/* ==========================================================================

   MOCKUP MOBİL (max-width: 768px)

   ========================================================================== */



@media (max-width: 768px) {

  .mockup-gallery-frame { border-radius: 14px; }

  .gal-arrow { width: 36px; height: 36px; }

  .gal-arrow.prev { left: 8px; }

  .gal-arrow.next { right: 8px; }

  .gal-arrow svg { width: 17px; height: 17px; }



  /* Lightbox mobil: okları gizle, daha sıkı padding */

  .lw-lightbox { padding: 70px 16px 70px !important; }

  .lw-lightbox-arrow { display: none !important; }

  .lw-lightbox-img {

    border-radius: 10px;

  }

  .lw-lightbox-close {

    top: 14px; right: 14px;

    width: 38px; height: 38px;

  }

  .lw-lightbox-counter {

    top: 17px; left: 14px;

    font-size: 0.78rem; padding: 4px 11px;

  }

  .lw-lightbox-dots { bottom: 18px; padding: 6px 14px; }

}



/* ==========================================================================

   GÜVEN ŞERİDİ 2x2 GRID (MOBİL)

   ========================================================================== */



@media (max-width: 991px) {

  .trust-strip {

    display: grid !important;

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 12px !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  .trust-strip .item {

    width: 100% !important;

    height: 54px !important;

    min-height: 54px !important;

    max-height: 54px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    font-size: 0.82rem !important;

    white-space: nowrap !important;

    padding: 8px 10px !important;

    border-radius: 16px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

  }



  .trust-strip .item .t-ic { flex-shrink: 0 !important; }



  .footer-bottom {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    justify-content: center !important;

    gap: 6px !important;

  }



  .footer-bottom span {

    text-align: center !important;

    display: block !important;

    width: 100% !important;

  }



  .sector-grid {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }



  .sector-card {

    align-items: center !important;

    text-align: center !important;

    padding: 28px 20px !important;

    min-height: auto !important;

    border-radius: 22px !important;

  }



  .sector-card .sector-ic {

    margin: 0 auto 14px !important;

    width: 54px !important;

    height: 54px !important;

    border-radius: 16px !important;

  }



  .sector-card .sector-ic svg {

    width: 25px !important;

    height: 25px !important;

  }



  .sector-name {

    text-align: center !important;

    font-size: 1.15rem !important;

    margin: 0 auto 14px !important;

  }



  .sector-count {

    margin: 0 auto 14px !important;

    font-size: 0.8rem !important;

    padding: 4px 14px !important;

  }



  .sector-card p { margin-bottom: 20px !important; }

}



/* Performance & GPU Hardware Acceleration */

@media (min-width: 992px) {

  .sect-step, .sect-faq, .sect-cta, .footer {

    content-visibility: auto;

    contain-intrinsic-size: 1px 400px;

  }

}



.t-card, .paket-p-head, .sector-card, .btn {

  backface-visibility: hidden;

  -webkit-font-smoothing: antialiased;

}



/* Seg Seviye Buttons Mobile Spacing & Badge Fix */

.seg button {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  white-space: nowrap !important;

  position: relative !important;

}



.seg button .n {

  margin-left: 4px !important;

  display: inline-flex !important;

  align-items: center !important;

  white-space: nowrap !important;

  position: static !important;

}



/* VIP Custom Showcase Luxury Styling */

.vip-feat-card {

  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;

}

.vip-feat-card:hover {

  transform: translateY(-5px) !important;

  border-color: rgba(201,161,90,0.45) !important;

/* Thumbnail Border Clipping Fixes */

.gal-thumbs-wrap {

  padding: 4px !important;

  overflow: visible !important;

}

.gal-thumb {

  border: 2px solid transparent !important;

  box-sizing: border-box !important;

  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;

}

.gal-thumb.active {

  border-color: var(--gold) !important;

  box-shadow: 0 0 10px rgba(246, 181, 0, 0.4) !important;

}



/* VIP Promo Slide Overlay Button Responsive */

.slide-vip-btn {

  position: absolute !important;

  bottom: 10px !important;

  right: 12px !important;

  z-index: 25 !important;

  background: var(--gold) !important;

  color: #0A0A0B !important;

  font-weight: 900 !important;

  font-size: 0.72rem !important;

  padding: 6px 14px !important;

  border-radius: 100px !important;

  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 5px !important;

  letter-spacing: 0.2px !important;

  cursor: pointer !important;

}



@media (max-width: 600px) {

  .slide-vip-btn {

    bottom: 4px !important;

    right: 5px !important;

    font-size: 0.48rem !important;

    padding: 2px 6px !important;

    gap: 3px !important;

  }

}



.sv-band {

  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

}



/* Lightbox Controls Footer Dock (Mobil: Alt Ortada Flex Flow / Masaüstü: Sağ Altta Yüzen VIP Buton) */



/* Mobil Ekranlar (Dikey Flex Flow) */

@media (max-width: 768px) {

  .lw-lightbox-foot {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 14px !important;

    padding-top: 14px !important;

    padding-bottom: 8px !important;

    width: 100%;

    z-index: 1000000;

  }

  .lw-vip-cta-box, #lwVipCta {

    position: relative !important;

    margin: 0 !important;

    z-index: 1000000 !important;

    width: max-content !important;

    max-width: 90vw !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

  }

  #lwVipCta a {

    padding: 8px 18px !important;

    font-size: 0.8rem !important;

  }

  .lw-lightbox-dots {

    position: relative !important;

    z-index: 1000001 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;

    padding: 0 !important;

  }

}



/* Masaüstü Ekranlar: Noktalar Alt Ortada Sabit, VIP Butonu Sağ Altta Yüzen Lüks Rozet */

@media (min-width: 769px) {

  .lw-lightbox {

    padding: 50px 30px 75px !important;

    justify-content: center !important;

  }

  .lw-lightbox-foot {

    position: absolute !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    height: 75px !important;

    display: block !important;

    pointer-events: none !important;

    padding: 0 !important;

    margin: 0 !important;

    z-index: 1000000 !important;

  }

  .lw-vip-cta-box, #lwVipCta {

    position: absolute !important;

    bottom: 20px !important;

    right: 32px !important;

    left: auto !important;

    transform: none !important;

    margin: 0 !important;

    z-index: 1000000 !important;

    pointer-events: auto !important;

    width: max-content !important;

  }

  #lwVipCta a {

    padding: 10px 22px !important;

    font-size: 0.86rem !important;

    box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(246,181,0,0.3) !important;

  }

  .lw-lightbox-dots {

    position: absolute !important;

    bottom: 24px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    z-index: 1000001 !important;

    pointer-events: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    margin: 0 !important;

    padding: 0 !important;

  }

}



/* Premium Her Temada Standart Feature Cards System */

.std-hizmet-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

}



.std-hizmet-card-v2 {

  background: rgba(0,0,0,0.02);

  border: 1px solid var(--line);

  border-radius: 16px;

  padding: 16px 20px;

  display: flex;

  align-items: center;

  gap: 14px;

  box-sizing: border-box;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.std-hizmet-card-v2:hover {

  transform: translateY(-3px);

  border-color: rgba(246,181,0,0.5);

  box-shadow: 0 10px 24px -6px rgba(246,181,0,0.18);

  background: var(--surface);

}



.std-hizmet-icon-box {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  background: linear-gradient(135deg, rgba(246,181,0,0.22), rgba(246,181,0,0.06));

  border: 1px solid rgba(246,181,0,0.35);

  color: var(--gold);

  display: grid;

  place-items: center;

  font-weight: 900;

  font-size: 1.15rem;

  flex-shrink: 0;

  box-shadow: 0 4px 12px rgba(246,181,0,0.12);

}



.std-hizmet-content {

  display: flex;

  flex-direction: column;

  gap: 2px;

  min-width: 0;

}



.std-hizmet-title {

  font-family: var(--f-head);

  font-weight: 700;

  font-size: 0.94rem;

  color: var(--text);

  line-height: 1.3;

}



.std-hizmet-sub {

  font-size: 0.78rem;

  color: var(--muted, #71717a);

  line-height: 1.3;

}



@media (max-width: 991px) {

  .std-hizmet-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

  }

}



@media (max-width: 600px) {

  .std-hizmet-grid {

    grid-template-columns: 1fr;

    gap: 10px;

  }

  .std-hizmet-card-v2 {

    padding: 14px 16px;

  }

}



@media (max-width: 991px) {

  .vip-float-chip-left, .vip-float-chip-right {

    display: none !important;

  }

  .slide-vip-btn {

    bottom: 6px !important;

    right: 6px !important;

    font-size: 0.58rem !important;

    padding: 3px 9px !important;

  }

  .sv-band-head {

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 12px !important;

    width: 100% !important;

  }

  .sv-band-head > div:first-child {

    width: 100% !important;

  }

  .sv-band-btn {

    justify-content: center !important;

    width: 100% !important;

    box-sizing: border-box !important;

    text-align: center !important;

    padding: 9px 14px !important;

    margin-top: 4px !important;

  }

}



/* VIP Custom Showcase Mobile Responsiveness */

@media (max-width: 768px) {

  #vipCustomSection {

    margin-top: 12px !important;

  }



  .vip-showcase-card {

    padding: 20px 14px !important;

    border-radius: 20px !important;

  }



  /* Header Top Row & Badge (Balanced Uniform Gaps) */

  .vip-header-row {

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 14px !important;

    margin-bottom: 16px !important;

    padding-bottom: 16px !important;

  }



  .vip-top-badge {

    white-space: nowrap !important;

    font-size: 0.7rem !important;

    padding: 6px 12px !important;

    max-width: 100% !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }



  #vipCustomSection h2 {

    font-size: 1.4rem !important;

    line-height: 1.25 !important;

    margin-bottom: 6px !important;

  }



  #vipCustomSection h2 + p {

    font-size: 0.9rem !important;

    line-height: 1.45 !important;

  }



  /* Price Tag Container on Mobile */

  .vip-price-box {

    width: 100% !important;

    min-width: auto !important;

    text-align: center !important;

    margin: 0 auto !important;

    padding: 14px 16px !important;

    border-radius: 16px !important;

    box-sizing: border-box !important;

  }



  .vip-price-box > div:nth-child(2) {

    font-size: 2rem !important;

  }



  /* 4 Feature Cards Grid & Uniform Vertical Gap (16px) */

  .vip-grid-features {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

    margin-bottom: 16px !important;

    width: 100% !important;

  }



  .vip-feat-card, .vip-process-box {

    width: 100% !important;

    padding: 18px 16px !important;

    border-radius: 16px !important;

    margin-bottom: 0 !important;

    box-sizing: border-box !important;

  }



  .vip-feat-card h4 {

    font-size: 1.05rem !important;

  }



  .vip-feat-card p {

    font-size: 0.88rem !important;

    line-height: 1.5 !important;

  }



  /* 4-Step Process Section Heading & Grid */

  .vip-process-box {

    margin-bottom: 16px !important;

  }



  .vip-process-box h4 {

    font-size: 1.05rem !important;

    line-height: 1.35 !important;

    margin-top: 4px !important;

  }



  #vipCustomSection .grid.g-4 {

    grid-template-columns: 1fr !important;

    gap: 12px !important;

  }



  /* Bottom CTA Container & Buttons */

  #vipCustomSection > div > div:last-child {

    padding: 24px 16px !important;

    border-radius: 18px !important;

  }



  #vipCustomSection > div > div:last-child h3 {

    font-size: 1.2rem !important;

  }



  #vipCustomSection > div > div:last-child p {

    font-size: 0.9rem !important;

    margin-bottom: 16px !important;

  }



  #vipCustomSection > div > div:last-child > div {

    width: 100% !important;

    flex-direction: column !important;

    gap: 10px !important;

  }



  #vipCustomSection > div > div:last-child a.btn {

    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;

    padding: 14px 20px !important;

  }

}