/* =========================================================
   SurlyCp Hosting Theme — Core Stylesheet (Light / Professional)
   WiseCp uyumlu tema: assets/css/style.css
========================================================= */

:root{
  --primary: #6e5bff;
  --primary-2: #8a3ffc;
  --text-dim: #5d6178;
  --bg: #f8fafc;
  --bg-soft: #f5f6fb;
  --bg-soft-2: #eef0fa;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --border: #e6e8f2;
  --text: #1b1e30;
  --text-faint: #9498ad;
  --accent: #00c2a8;
  --accent-2: #ff5fa2;
  --success: #1fb978;
  --warn: #f5a524;
  --danger: #ef4444;
  --navy: #14152b;
  --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 55%, var(--accent-2) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  --grad-announce: linear-gradient(90deg, #5b6cff 0%, #7c5cff 50%, #9b5cff 100%);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --shadow-sm: 0 2px 10px rgba(25,26,56,.06);
  --shadow-md: 0 18px 44px rgba(25,26,56,.09);
  --shadow-glow: 0 0 0 1px rgba(110,91,255,.18), 0 20px 50px rgba(110,91,255,.14);
  --container: 1280px;
  --announce-h: 44px;
  --topbar-h: 42px;
  --header-h: 78px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Plus Jakarta Sans","Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
h1,h2,h3,h4{line-height:1.15;margin:0 0 16px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
p{color:var(--text-dim);line-height:1.7;margin:0 0 16px;}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:110px 0;position:relative;}
.section--tight{padding:74px 0;}
.section--alt{background:var(--bg-soft);}
.grid{display:grid;gap:26px;}

/* ---------- Background fx ---------- */
.bg-grid{
  position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(110,91,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(110,91,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.28;z-index:-1;pointer-events:none;}
.blob--1{width:520px;height:520px;background:var(--primary);top:-180px;left:-160px;}
.blob--2{width:480px;height:480px;background:var(--accent-2);top:60px;right:-160px;}
.blob--3{width:420px;height:420px;background:var(--accent);bottom:-200px;left:30%;}

/* ---------- Eyebrow / badges ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:99px;
  background:linear-gradient(180deg,rgba(110,91,255,.1),rgba(110,91,255,.04));
  border:1px solid rgba(110,91,255,.25);
  color:#5b46e0;font-size:13px;font-weight:700;letter-spacing:.02em;
  margin-bottom:18px;
}
.eyebrow i{color:var(--accent);font-size:15px;}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px);}
.section-head p{font-size:17px;}
.text-grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}

.badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1.6;}
.badge-new{background:rgba(31,185,120,.12);color:var(--success);}
.badge-popular{background:rgba(245,165,36,.14);color:#c2790a;}
.badge-premium{background:rgba(110,91,255,.12);color:var(--primary);}
.nav-badge{position:absolute;top:1px;right:2px;transform:translate(20%,-65%);padding:1px 6px;font-size:9px;box-shadow:0 2px 6px rgba(25,26,56,.12);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--radius-sm);font-weight:700;font-size:14.5px;
  border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap;
}
.btn i{font-size:17px;}
.btn-primary{background:var(--grad-brand);background-size:200% auto;transition:background-position 0.4s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease),color .25s,border-color .25s;color:#fff;box-shadow:0 10px 26px rgba(110,91,255,.3);}
.btn-primary:hover{background-position:right center;transform:translateY(-2px) scale(1.02);box-shadow:0 16px 32px rgba(110,91,255,.48);filter:brightness(1.05);}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--border);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;}
.btn-ghost:hover{background:var(--bg-soft);border-color:#c9cce3;transform:translateY(-2px) scale(1.02);box-shadow:0 12px 24px rgba(25,26,56,.08);}
.btn-outline{
  background:transparent;
  border-color:rgba(110,91,255,.45);
  color:#5b46e0;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.btn-outline:hover{
  background:linear-gradient(135deg,#6e5bff,#a855f7);
  border-color:transparent;
  color:#fff;
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 10px 28px rgba(110,91,255,.35);
}
.btn-block{width:100%;}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-sm{padding:9px 16px;font-size:13px;}

/* =========================================================
   ANNOUNCEMENT BAR
========================================================= */
.announce-bar{
  height:var(--announce-h);background:var(--grad-announce);color:#fff;
  display:flex;align-items:center;position:relative;z-index:1100;
}
.announce-bar .container{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;}
.announce-tag{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);
  padding:4px 12px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.03em;flex-shrink:0;
}
.announce-text{font-size:13.5px;font-weight:600;text-align:center;}
.announce-text b{font-weight:800;}
.announce-cta{
  background:#fff;color:#5b46e0;font-size:12.5px;font-weight:800;padding:6px 16px;border-radius:99px;
  display:flex;align-items:center;gap:6px;flex-shrink:0;transition:transform .2s;
}
.announce-cta:hover{transform:translateY(-1px);}
.announce-close{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);background:transparent;border:none;
  color:rgba(255,255,255,.8);font-size:18px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.announce-close:hover{background:rgba(255,255,255,.18);color:#fff;}
.announce-bar.is-closed{display:none;}
@media (max-width:760px){ .announce-text{display:none;} .announce-bar .container{justify-content:space-between;padding:0 50px 0 16px;} }

/* =========================================================
   TOP BAR (contact / locale / auth)
========================================================= */
.top-bar{
  height:var(--topbar-h);background:var(--navy);color:#c7c9de;font-size:12.5px;
  display:flex;align-items:center;position:relative;z-index:1090;
}
.top-bar .container{display:flex;align-items:center;justify-content:space-between;width:100%;}
.top-bar-left{display:flex;align-items:center;gap:22px;}
.top-bar-left span{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.top-bar-left i{color:var(--accent);font-size:14px;}
.top-bar-right{display:flex;align-items:center;gap:14px;}
.tb-dropdown{position:relative;}
.tb-select{
  display:flex;align-items:center;gap:5px;color:#c7c9de;font-weight:600;padding:4px 8px;border-radius:6px;cursor:pointer;
  transition:background .2s,color .2s;background:none;border:none;font-size:12.5px;font-family:inherit;
}
.tb-select:hover{background:rgba(255,255,255,.08);color:#fff;}
.tb-select i.bx-chevron-down{font-size:13px;transition:transform .2s var(--ease);}
.tb-dropdown.is-open .tb-select{background:rgba(255,255,255,.08);color:#fff;}
.tb-dropdown.is-open .tb-select i.bx-chevron-down{transform:rotate(180deg);}
.tb-dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:8px;min-width:180px;background:var(--surface-solid);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s;z-index:1100;
}
.tb-dropdown.is-open .tb-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.tb-dropdown-menu li button,
.tb-dropdown-menu li a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border-radius:8px;
  background:none;border:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;
  transition:background .2s;text-align:left;text-decoration:none;
}
.tb-dropdown-menu li button:hover,
.tb-dropdown-menu li a:hover{background:var(--bg-soft);color:var(--text);}
.tb-dropdown-menu li a:hover img{opacity:0.9;}
.tb-dropdown-menu li button small,
.tb-dropdown-menu li a small{font-size:11px;font-weight:600;color:var(--text-faint);}
.tb-dropdown-menu li button.is-active,
.tb-dropdown-menu li a.is-active{color:var(--primary);}
.tb-dropdown-menu li button.is-active small,
.tb-dropdown-menu li a.is-active small{color:var(--primary);}
.tb-sep{width:1px;height:14px;background:rgba(255,255,255,.15);}
.tb-auth a{color:#c7c9de;font-weight:700;display:flex;align-items:center;gap:6px;transition:color .2s;}
.tb-auth a:hover{color:#fff;}
.tb-auth a.is-accent{color:#b9aeff;}
@media (max-width:1080px){ .top-bar{display:none;} }

/* =========================================================
   HEADER / MEGA NAV
========================================================= */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
.site-header.is-scrolled{box-shadow:0 8px 28px rgba(25,26,56,.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;position:relative;}

.logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  flex-shrink: 0 !important;
  color: var(--text) !important;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
}
.logo-img, .logo img {
  height: 34px !important;
  width: auto !important;
  display: block !important;
}
.auth-visual .logo-img,.site-footer .logo-img{background:#fff;padding:8px 14px;border-radius:10px;}
.logo .mark{
  width:38px;height:38px;border-radius:11px;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;
  box-shadow:0 8px 18px rgba(110,91,255,.32);
}
.logo .tagline{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase;}
.logo-text-wrap{display:flex;flex-direction:column;line-height:1.15;}
.logo span{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}

.main-nav{flex:1;display:flex;justify-content:center;}
.main-nav>ul{display:flex;align-items:center;gap:2px;}
.main-nav>ul>li{position:static;}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:14px 16px;border-radius:8px;position:relative;
  font-size:14.5px;font-weight:700;color:var(--text-dim);transition:color .2s;
}
.nav-link i.bx-chevron-down{font-size:15px;transition:transform .25s var(--ease);}
.main-nav>ul>li:hover .nav-link,.nav-link.is-active,li.has-dropdown.is-open .nav-link{color:var(--primary);}
.main-nav>ul>li:hover .nav-link i.bx-chevron-down,li.has-dropdown.is-open .nav-link i.bx-chevron-down{transform:rotate(180deg);}

.mega{
  position:absolute;top:100%;left:0;right:0;transform:translateY(2px);
  width:auto;background:var(--surface-solid);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  margin-top:14px;padding:28px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:26px;
}
@media (min-width:1081px){
  li.has-dropdown.is-open .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
}
.mega-col+.mega-col{border-left:1px solid var(--border);padding-left:26px;}
.mega-dc-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;font-size:12.5px;color:var(--text-dim);font-weight:700;}
.mega-dc-item .dc-flag{display:flex;align-items:center;gap:9px;}
.mega-dc-item .dc-flag i{font-size:16px;color:var(--primary);}
.mega-dc-item .dc-flag span{display:block;}
.mega-dc-item .dc-flag small{display:block;font-size:10.5px;color:var(--text-faint);font-weight:600;}
.mega-dc-item .ping{font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;background:rgba(31,185,120,.12);color:var(--success);flex-shrink:0;}
.mega-quick-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:700;color:var(--text-dim);transition:background .2s,color .2s,transform .2s;}
.mega-quick-item:hover{background:var(--bg-soft);color:var(--primary);transform:translateX(2px);}
.mega-quick-item i{
  width:28px;height:28px;border-radius:8px;background:var(--bg-soft-2);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.mega-tld{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--text);transition:background .2s,transform .2s;}
.mega-tld:not(:last-child){border-bottom:1px solid var(--border);}
.mega-tld:hover{background:var(--bg-soft);transform:translateX(2px);border-bottom-color:transparent;}
.mega-tld b{color:var(--primary);font-weight:800;}
.mega-col{display:flex;flex-direction:column;gap:3px;}
.mega-col-title{display:flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:800;padding:6px 10px 10px;}
.mega-col-title i{font-size:14px;color:var(--primary);}
.mega-item{
  display:flex;align-items:flex-start;gap:12px;padding:10px 10px;border-radius:10px;transition:background .2s,transform .2s;position:relative;
}
.mega-item:hover{background:var(--bg-soft);transform:translateX(2px);}
.mega-item .ic{
  width:36px;height:36px;border-radius:10px;background:var(--bg-soft-2);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.mega-item .tt{font-size:13.8px;font-weight:700;color:var(--text);display:block;}
.mega-item .tt .badge{position:absolute;top:7px;right:9px;}
.mega-item .ds{font-size:12px;color:var(--text-faint);margin-top:2px;}
.mega-divider{height:1px;background:var(--border);margin:10px 0;}
.mega-quicklinks{display:flex;align-items:center;gap:18px;border-top:1px solid var(--border);margin-top:16px;padding-top:14px;font-size:12.5px;color:var(--text-faint);grid-column:1/-1;flex-wrap:wrap;}
.mega-quicklinks span.lbl{text-transform:uppercase;letter-spacing:.06em;font-weight:800;font-size:10.5px;}
.mega-quicklinks a{display:flex;align-items:center;gap:5px;font-weight:700;color:var(--text-dim);transition:color .2s;}
.mega-quicklinks a:hover{color:var(--primary);}
.mega-promo{
  border-radius:14px;background:linear-gradient(160deg,var(--navy),#23244a 120%);
  padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;min-height:100%;
}
.mega-promo .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:800;margin-bottom:12px;width:fit-content;}
.mega-promo b{font-size:18px;display:block;margin-bottom:8px;line-height:1.25;}
.mega-promo p{font-size:12.5px;margin:0 0 16px;color:#c7c9de;}
.mega-promo .stats-mini{display:flex;gap:18px;margin-bottom:16px;}
.mega-promo .stats-mini div{font-size:18px;font-weight:800;}
.mega-promo .stats-mini span{display:block;font-size:10.5px;color:#9b9fc4;font-weight:600;}
.mega-promo .btn{background:#fff;color:var(--navy);box-shadow:none;}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cart-link{
  position:relative;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text);font-size:18px;
}
.cart-link .dot{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--accent-2);font-size:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;}
.hamburger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);align-items:center;justify-content:center;color:var(--text);font-size:22px;}

/* ---------- Mobile nav ---------- */
@media (max-width: 1080px){
  .main-nav{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
    background:#fff;padding:18px;overflow-y:auto;
    transform:translateX(-100%);transition:transform .3s var(--ease);
    display:block;border-top:1px solid var(--border);
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:2px;width:100%;}
  .nav-link{justify-content:space-between;padding:15px 14px;}
  .mega{
    position:static;width:100%;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:none;background:transparent;padding:4px 4px 12px 14px;
    grid-template-columns:1fr;max-height:0;overflow:hidden;display:block;
  }
  li.has-dropdown.is-open .mega{max-height:2000px;}
  .mega-promo,.mega-quicklinks{display:none;}
  .hamburger{display:flex;}
  .header-actions .btn{display:none;}
}
@media (min-width:1081px){ .hamburger{display:none;} }

/* =========================================================
   HERO
========================================================= */
.hero{position:relative;padding:96px 0 90px;overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;}
.hero h1{font-size:clamp(36px,5.4vw,58px);}
.hero .lead{font-size:18px;max-width:520px;}
.hero-cta{display:flex;gap:14px;margin:30px 0;flex-wrap:wrap;}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;}
.hero-trust div{font-size:13px;color:var(--text-faint);display:flex;align-items:center;gap:8px;font-weight:600;}
.hero-trust i{color:var(--accent);font-size:17px;}

.hero-visual{position:relative;height:480px;}
.float-card{
  position:absolute;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-md);
  animation:float 6s ease-in-out infinite;
}
.float-card.c1{top:6%;left:2%;width:230px;animation-delay:0s;}
.float-card.c2{top:46%;right:0;width:230px;animation-delay:1.2s;}
.float-card.c3{bottom:2%;left:14%;width:250px;animation-delay:.6s;}
.float-card .fc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.float-card .fc-head i{font-size:20px;color:var(--primary);}
.float-card .fc-head b{font-size:13px;}
.float-card .bar{height:6px;border-radius:4px;background:var(--bg-soft-2);overflow:hidden;margin-top:6px;}
.float-card .bar span{display:block;height:100%;background:var(--grad-accent);}
.server-orb{
  position:absolute;inset:60px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(110,91,255,.18), transparent 60%),radial-gradient(circle at 70% 70%, rgba(0,194,168,.16), transparent 60%);
  filter:blur(6px);
}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-14px);}}

.logo-strip{padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.logo-strip .container{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;opacity:.65;}
.logo-strip span{font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--text-faint);}

/* =========================================================
   FEATURE / ICON CARDS
========================================================= */
.cards-3{grid-template-columns:repeat(3,1fr);}
.cards-4{grid-template-columns:repeat(4,1fr);}
.feature-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;box-shadow:var(--shadow-sm);
}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(110,91,255,.3);box-shadow:var(--shadow-glow);}
.feature-card .ic{
  width:52px;height:52px;border-radius:14px;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin-bottom:18px;
}
.feature-card h3{font-size:18px;margin-bottom:8px;}
.feature-card p{font-size:14.5px;margin:0;}

/* =========================================================
   PRICING
========================================================= */
.toggle-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:50px;}
.toggle-wrap span{font-size:14px;font-weight:700;color:var(--text-faint);}
.toggle-wrap span.is-active{color:var(--text);}
.switch{position:relative;width:54px;height:30px;border-radius:99px;background:var(--bg-soft-2);border:1px solid var(--border);}
.switch input{opacity:0;position:absolute;inset:0;cursor:pointer;margin:0;}
.switch .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--grad-brand);transition:transform .25s var(--ease);}
.switch input:checked ~ .knob{transform:translateX(24px);}
.save-badge{background:rgba(31,185,120,.12);color:var(--success);font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px;}

/* Generic badge */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;vertical-align:middle;margin-left:6px;
}
.badge-danger{background:rgba(239,68,68,.1);color:#ef4444;}
.badge-success{background:rgba(16,185,129,.1);color:#10b981;}
.badge-info{background:rgba(59,130,246,.1);color:#3b82f6;}

/* ribbon directly inside .price-card (no price-card-pop wrapper) */
.price-card > .ribbon{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  left:auto !important;
  transform:none !important;
  background:linear-gradient(135deg,#6e5bff,#a855f7) !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:800 !important;
  padding:4px 12px !important;
  border-radius:99px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  box-shadow:0 4px 14px rgba(110,91,255,.4) !important;
  z-index:10 !important;
  /* Reset any global overrides */
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  line-height:1.4 !important;
  display:inline-block !important;
  white-space:nowrap !important;
}

.pricing-grid{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  align-items:stretch;
}

.price-card-pop{position:relative;}
.price-card-pop .price-card{height:100%;}
.price-card{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px 26px;display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-brand);opacity:0;transition:opacity .3s;}
.price-card:hover::before,.price-card.is-popular::before{opacity:1;}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.price-card.is-popular{border-color:rgba(110,91,255,.45);box-shadow:var(--shadow-glow);}
.price-card-pop .ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-brand);
  color:#fff;font-size:11px;font-weight:800;padding:5px 14px;border-radius:99px;box-shadow:0 6px 16px rgba(110,91,255,.35);z-index:2;
  width:auto;height:auto;overflow:visible;text-align:center;
}
.price-card .plan-name{font-size:15px;font-weight:800;color:var(--text-dim);margin-bottom:10px;}
.price-card .plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;}
.price-card .plan-price .amt{font-size:40px;font-weight:800;letter-spacing:-.02em;}
.price-card .plan-price .cur{font-size:18px;color:var(--text-faint);}
.price-card .plan-price .per{font-size:13px;color:var(--text-faint);}
.price-card .plan-sub{font-size:13px;color:var(--text-faint);margin-bottom:6px;}
.plan-billed-note{font-size:11.5px;color:var(--success);font-weight:700;margin-bottom:18px;display:none;align-items:center;gap:5px;}
.plan-billed-note.is-shown{display:flex;}
.plan-billed-note i{font-size:13px;}
.plan-icon{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:21px;color:#fff;background:var(--grad-brand);margin-bottom:16px;
}
.plan-mini-specs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.plan-mini-specs span{
  display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--text-dim);
  background:var(--bg-soft);border:1px solid var(--border);border-radius:99px;padding:5px 10px;
}
.plan-mini-specs i{color:var(--primary);font-size:14px;}
.plan-feats{margin:0 0 26px;display:flex;flex-direction:column;gap:11px;flex:1;}
.plan-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.8px;color:var(--text-dim);}
.plan-feats li i{color:var(--accent);font-size:16px;margin-top:1px;}
.plan-feats li.off{opacity:.45;}
.plan-feats li.off i{color:var(--text-faint);}

[data-period]{display:none;}
[data-period].is-shown{display:inline;}

/* ═══════════════════════════════════════════════════════════
   VPS / VDS PREMIUM CARDS
═══════════════════════════════════════════════════════════ */
.vps-grid{
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
  gap:24px;
}
@media(max-width:1200px){.vps-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px) {.vps-grid{grid-template-columns:1fr;}}

.vps-card{
  position:relative;
  background:#fff;
  border:1.5px solid var(--border,#e2e8f0);
  border-radius:20px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  transition:transform .3s cubic-bezier(.4,0,.2,1),
             box-shadow .3s cubic-bezier(.4,0,.2,1),
             border-color .3s;
}
.vps-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 40px rgba(0,0,0,.11);
  border-color:rgba(110,91,255,.25);
}
.vps-card.is-popular{
  border-color:rgba(110,91,255,.55);
  box-shadow:0 0 0 3px rgba(110,91,255,.18), 0 16px 40px rgba(110,91,255,.14);
  transform:scale(1.04) translateY(-4px);
  z-index:1;
}
.vps-card.is-popular:hover{
  transform:scale(1.04) translateY(-10px);
  box-shadow:0 0 0 3px rgba(110,91,255,.25), 0 24px 48px rgba(110,91,255,.18);
}

/* ── Gradient accent bar at top ── */
.vps-accent-bar{
  height:4px;
  background:linear-gradient(90deg,#6e5bff,#a855f7);
  opacity:.55;
  transition:opacity .25s;
}
.vps-card:hover .vps-accent-bar,
.vps-card.is-popular .vps-accent-bar{opacity:1;}

/* ── Card header ── */
.vps-card-head{
  background:var(--navy,#0f172a);
  padding:22px 22px 18px;
  position:relative;
}
.vps-card.is-popular .vps-card-head{
  background:linear-gradient(145deg,#1e1354 0%,#120e38 100%);
}

/* Popular badge */
.vps-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:linear-gradient(135deg,#6e5bff,#a855f7);
  color:#fff;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:99px;
  margin-bottom:10px;
}

/* Plan name */
.vps-plan-name{
  font-size:11.5px;
  font-weight:700;
  color:rgba(199,201,222,.7);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.vps-card.is-popular .vps-plan-name{color:#c7c9de;}

/* Price row */
.vps-price-row{
  display:flex;
  align-items:baseline;
  gap:3px;
  flex-wrap:wrap;
}
.vps-amt{
  font-size:36px;
  font-weight:900;
  color:#fff;
  line-height:1;
  letter-spacing:-.02em;
}
.vps-cur{
  font-size:18px;
  font-weight:700;
  color:rgba(155,159,196,.9);
}
.vps-per{
  font-size:12px;
  color:rgba(155,159,196,.7);
  margin-left:2px;
  font-weight:500;
}

/* ── Spec tiles (2×2 or 2×1 grid) ── */
.vps-specs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border,#e2e8f0);
}
.vps-spec-tile{
  background:#f8fafc;
  padding:14px 12px 12px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition:background .2s;
}
.vps-card:hover .vps-spec-tile{background:#fff;}
.vps-spec-tile i{
  font-size:20px;
  color:var(--primary,#4f46e5);
  line-height:1;
}
.vps-card.is-popular .vps-spec-tile i{color:#6e5bff;}
.vps-spec-val{
  font-size:12.5px;
  font-weight:800;
  color:var(--text,#1e293b);
  line-height:1.2;
}
.vps-spec-lbl{
  font-size:10px;
  font-weight:600;
  color:var(--text-faint,#94a3b8);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ── Card body ── */
.vps-card-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:0;
}

/* Feature list */
.vps-feats{
  list-style:none;
  padding:0;margin:0 0 18px;
  display:flex;flex-direction:column;gap:9px;
  flex:1;
}
.vps-feats li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;color:var(--text-dim,#475569);
  line-height:1.5;
}
.vps-feats li i{
  font-size:15px;color:#10b981;
  margin-top:.15em;flex-shrink:0;
}

/* CTA button — outline variant gets gradient fill on hover */
.vps-cta{
  margin-top:auto;
  font-size:13.5px !important;
  font-weight:800 !important;
  letter-spacing:.04em !important;
  padding:13px 20px !important;
  border-radius:12px !important;
  position:relative;
  overflow:hidden;
}
.vps-cta::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,#6e5bff,#a855f7);
  opacity:0;
  transition:opacity .25s;
}
.vps-cta:hover::before{opacity:1;}
.vps-cta:hover{
  color:#fff !important;
  border-color:transparent !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 28px rgba(110,91,255,.4) !important;
}
.vps-cta span,
.vps-cta i{position:relative;z-index:1;}
.vps-cta:not(:has(span)):hover{color:#fff !important;}

/* Divider between spec grid and body */
.vps-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border,#e2e8f0),transparent);
  margin:0;
}

/* Popular shine shimmer */
.vps-card.is-popular::after{
  content:'';
  position:absolute;
  top:-50%;left:-60%;
  width:60%;height:200%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);
  animation:vps-shine 4s ease infinite;
  pointer-events:none;
}
@keyframes vps-shine{
  0%{left:-60%;}
  60%,100%{left:120%;}
}

/* ---------- Horizontal package rows (Dedicated, etc.) ---------- */
.pkg-row-list{display:flex;flex-direction:column;gap:18px;}
.pkg-row{
  display:grid;grid-template-columns:auto 1.2fr 1.7fr auto auto;align-items:center;gap:26px;
  background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:24px 30px;
  box-shadow:0 4px 18px rgba(0,0,0,0.03);transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border-color .25s;
}
.pkg-row:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(110,91,255,.09);border-color:rgba(110,91,255,.25);}
.pkg-row.is-popular{
  border-color:rgba(110,91,255,0.4);
  background:linear-gradient(180deg,#faf9ff 0%,#fff 100%);
  box-shadow:0 6px 20px rgba(110,91,255,0.04);
}
.pkg-row.is-popular:hover{
  box-shadow:0 14px 36px rgba(110,91,255,0.14);
}
.pkg-row .pkg-ic{
  width:60px;height:60px;border-radius:16px;background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(110,91,255,0.2);
}
.pkg-row .pkg-info b{font-size:16.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;}
.pkg-row .pkg-info span{display:block;font-size:13.5px;color:var(--text-dim);margin-top:5px;font-weight:500;}
.pkg-row .pkg-specs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.pkg-row .pkg-specs div{
  font-size:12.5px;color:#475569;display:flex;align-items:center;gap:6px;font-weight:600;
  background:#f8fafc;border:1px solid #f1f5f9;padding:6px 14px;border-radius:8px;
  transition:all 0.2s;
}
.pkg-row .pkg-specs div:hover{
  background:#f1f5f9;
  color:var(--text);
  border-color:#e2e8f0;
}
.pkg-row .pkg-specs i{color:var(--primary);font-size:15px;}
.pkg-row .pkg-price{text-align:right;white-space:nowrap;margin-right:10px;}
.pkg-row .pkg-price .amt{font-size:26px;font-weight:800;color:var(--text);}
.pkg-row .pkg-price .per{font-size:12px;color:var(--text-dim);display:block;margin-top:2px;}

.pkg-row .btn {
  min-width: 120px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pkg-row .btn-outline {
  border: 1.5px solid rgba(110,91,255,0.4);
  color: var(--primary);
  background: transparent;
}
.pkg-row .btn-outline:hover {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(110,91,255,0.25);
}
.pkg-row .btn-primary {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(110,91,255,0.25);
}
.pkg-row .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(110,91,255,0.4);
}

@media (max-width:1080px){
  .pkg-row{grid-template-columns:1fr;text-align:left;gap:16px;padding:20px 24px;}
  .pkg-row .pkg-price{text-align:left;margin-right:0;}
  .pkg-row .btn{width:100%;}
}

/* =========================================================
   COMPARISON TABLE
========================================================= */
.compare-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);}
table.compare{width:100%;border-collapse:collapse;min-width:760px;background:#fff;}
table.compare th,table.compare td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--border);font-size:14px;}
table.compare th{background:var(--bg-soft);font-weight:800;}
table.compare td:first-child,table.compare th:first-child{text-align:left;color:var(--text-dim);}
table.compare i.bx-check{color:var(--success);font-size:19px;}
table.compare i.bx-x{color:var(--text-faint);font-size:19px;}
table.compare tr:last-child td{border-bottom:none;}

/* =========================================================
   STATS
========================================================= */
.stats-grid{grid-template-columns:repeat(4,1fr);text-align:center;}
.stat-item .num{font-size:42px;font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-item .lbl{font-size:14px;color:var(--text-faint);margin-top:6px;font-weight:600;}

/* =========================================================
   STEPS
========================================================= */
.steps{grid-template-columns:repeat(4,1fr);}
.step{position:relative;padding:30px 24px;border-radius:var(--radius-lg);border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);}
.step .step-num{
  width:38px;height:38px;border-radius:50%;background:var(--grad-accent);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:15px;
}
.step h3{font-size:16.5px;}
.step p{font-size:13.5px;margin:0;}

/* =========================================================
   TESTIMONIALS
========================================================= */
.testi-grid{grid-template-columns:repeat(3,1fr);}
.testi-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);}
.testi-stars{color:var(--warn);font-size:15px;margin-bottom:14px;letter-spacing:2px;}
.testi-card p{font-size:14.5px;color:var(--text-dim);}
.testi-person{display:flex;align-items:center;gap:12px;margin-top:18px;}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;}
.testi-person b{font-size:13.5px;display:block;}
.testi-person span{font-size:12px;color:var(--text-faint);}

/* =========================================================
   FAQ
========================================================= */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;overflow:hidden;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;background:transparent;border:none;color:var(--text);font-size:15px;font-weight:700;text-align:left;
}
.faq-q i{transition:transform .25s var(--ease);color:var(--text-faint);font-size:20px;flex-shrink:0;}
.faq-item.is-open .faq-q i{transform:rotate(45deg);color:var(--primary);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-a p{padding:0 22px 20px;margin:0;font-size:14px;}

/* =========================================================
   CTA BANNER
========================================================= */
.cta-banner{
  border-radius:var(--radius-xl);padding:60px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#15172e,#241a4d 60%,#0e2a4a);border:1px solid var(--border);
}
.cta-banner h2,.cta-banner p{color:#fff;}
.cta-banner p{color:#c7c9de;}
.cta-banner h2{font-size:clamp(26px,4vw,38px);}
.cta-banner .actions{display:flex;justify-content:center;gap:14px;margin-top:24px;flex-wrap:wrap;}

/* =========================================================
   HERO VARIANTS — Per-category custom hero designs
========================================================= */

/* ── 1. Premium Brand Hero (Hosting) ── */
.hero-hosting{
  position:relative;
  padding:76px 0 66px !important;
  background:linear-gradient(135deg,#1e1b4b,#2e2a72 50%,#3b3798) !important;
  border-bottom:none !important;
  text-align:center;
}
.hero-hosting-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);
}
.hero-hosting .container{position:relative;z-index:1;}
.hero-hosting h1{color:#fff !important;font-size:clamp(28px,4vw,44px) !important;font-weight:900 !important;margin:12px 0 0 !important;}
.hero-hosting p{color:rgba(255,255,255,.75) !important;max-width:600px;margin:14px auto 0;font-size:15.5px;line-height:1.65;}
.hero-hosting .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#e2e8f0;}
.hero-hosting .breadcrumb{justify-content:center !important;}
.hero-hosting .breadcrumb a, .hero-hosting .breadcrumb span{color:rgba(255,255,255,.6) !important;}
.hero-hosting .breadcrumb span{color:#fff !important;}
.hero-hosting .breadcrumb i{color:rgba(255,255,255,.4) !important;}

/* ── 2. Dark Tech Hero (VPS/VDS) ── */
.hero-dark{
  padding:70px 0 60px !important;
  background:linear-gradient(135deg,#0f0c29,#1e1354 50%,#0e2040) !important;
  border-bottom:none !important;
}
.hero-dark-bg{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(110,91,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,91,255,.12) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);
}
.hero-dark .container{position:relative;z-index:1;}

/* Spec strip tiles */
.hero-spec-strip{
  display:flex;justify-content:center;gap:0;
  margin:40px auto 0;max-width:720px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  overflow:hidden;
}
.hero-spec-tile{
  flex:1;padding:22px 16px;text-align:center;
  border-right:1px solid rgba(255,255,255,.1);
  transition:background .2s;
}
.hero-spec-tile:last-child{border-right:none;}
.hero-spec-tile:hover{background:rgba(255,255,255,.08);}
.hst-ic{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,rgba(110,91,255,.35),rgba(168,85,247,.25));
  border:1px solid rgba(110,91,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#c4b5fd;
  margin:0 auto 10px;
}
.hst-label{font-size:15px;font-weight:900;color:#fff;margin-bottom:4px;}
.hst-val{font-size:11.5px;color:rgba(255,255,255,.55);font-weight:600;}
@media(max-width:640px){
  .hero-spec-strip{flex-direction:column;border-radius:14px;}
  .hero-spec-tile{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);}
  .hero-spec-tile:last-child{border-bottom:none;}
}

/* ── 3. Icon Strip Hero (Special Products / SEO) ── */
.hero-icon-strip{padding:52px 0 44px !important;}
.hero-icon-tiles{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin:32px auto 0;max-width:640px;
  background:#fff;border:1.5px solid var(--border);border-radius:16px;
  overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.hit-item{
  flex:1;padding:18px 12px;text-align:center;
  transition:background .2s;
}
.hit-item:hover{background:rgba(110,91,255,.04);}
.hit-sep{width:1px;background:var(--border);align-self:stretch;flex-shrink:0;}
.hit-ic{
  width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,#6e5bff,#a855f7);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:19px;margin:0 auto 8px;
}
.hit-label{font-size:12px;font-weight:800;color:var(--text);line-height:1.3;}
@media(max-width:600px){
  .hero-icon-tiles{flex-wrap:wrap;}
  .hit-sep{display:none;}
  .hit-item{min-width:50%;}
}

/* ── 4. Search-First Hero (Softwares) ── */
.hero-search{padding:56px 0 48px !important;}
.hero-search-form{margin:28px auto 0;max-width:600px;}
.hero-search-box{
  display:flex;align-items:center;
  background:#fff;border:2px solid var(--border);border-radius:16px;
  overflow:hidden;box-shadow:0 6px 28px rgba(0,0,0,.09);
  transition:border-color .2s,box-shadow .2s;
}
.hero-search-box:focus-within{
  border-color:var(--primary,#4f46e5);
  box-shadow:0 6px 28px rgba(79,70,229,.18);
}
.hero-search-icon{
  font-size:20px;color:var(--text-faint);
  padding:0 14px;flex-shrink:0;
}
.hero-search-box input{
  flex:1;border:none;outline:none;padding:16px 12px 16px 0;
  font-size:15px;color:var(--text);background:transparent;
  font-family:inherit;
}
.hero-search-btn{
  background:linear-gradient(135deg,#6e5bff,#a855f7);
  color:#fff;border:none;padding:14px 24px;
  font-size:14px;font-weight:800;cursor:pointer;
  transition:opacity .2s;flex-shrink:0;
  font-family:inherit;
}
.hero-search-btn:hover{opacity:.88;}
.hero-cat-pills{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;margin-top:18px;
}
.hcp-label{font-size:12.5px;font-weight:700;color:var(--text-faint);}
.hcp-pill{
  display:inline-flex;padding:6px 14px;border-radius:99px;
  background:rgba(110,91,255,.07);color:var(--primary,#4f46e5);
  border:1.5px solid rgba(110,91,255,.2);font-size:12.5px;font-weight:700;
  text-decoration:none;transition:all .2s;
}
.hcp-pill:hover,.hcp-pill.active{
  background:var(--primary,#4f46e5);color:#fff;
  border-color:var(--primary,#4f46e5);text-decoration:none;
}

.page-hero{
  padding:58px 0 52px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,
    rgba(110,91,255,.035) 0%,
    rgba(168,85,247,.02) 50%,
    transparent 100%),
    var(--bg,#f8faff);
  border-bottom:1px solid var(--border,#e2e8f0);
}
.page-hero::before{
  content:'';
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(110,91,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(110,91,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 90% at 50% 0%,#000 30%,transparent 100%);
  pointer-events:none;
  z-index:0;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{
  font-size:clamp(26px,4vw,44px);
  font-weight:900;
  color:var(--text,#1e293b);
  margin:8px 0 0;
  letter-spacing:-.02em;
  line-height:1.2;
}
.page-hero p{
  font-size:15.5px;
  color:var(--text-dim,#475569);
  margin:14px auto 0;
  line-height:1.65;
  max-width:560px;
}

/* Override global theme.css float:right/left on breadcrumb */
.breadcrumb{
  display:flex !important;
  float:none !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13px !important;
  color:var(--text-faint,#94a3b8) !important;
  margin-bottom:16px !important;
  font-weight:600 !important;
  flex-wrap:wrap;
  background:none !important;
  border:none !important;
  padding:0 !important;
  list-style:none !important;
}
.breadcrumb i{font-size:14px !important;}
.breadcrumb a{
  color:var(--text-faint,#94a3b8) !important;
  text-decoration:none !important;
  font-weight:600 !important;
  transition:color .2s;
}
.breadcrumb a:hover{color:var(--primary,#4f46e5) !important;}

/* =========================================================
   LOCATION / DATACENTER MAP STRIP
========================================================= */
.dc-strip{grid-template-columns:repeat(6,1fr);text-align:center;}
.dc-item{padding:20px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm);}
.dc-item i{font-size:26px;color:var(--primary);margin-bottom:8px;display:block;}
.dc-item b{font-size:13px;}
.dc-item span{display:block;font-size:11px;color:var(--text-faint);margin-top:2px;}

/* =========================================================
   FORMS (login/register/contact)
========================================================= */
/* ---------- Split-screen auth layout (login / register) ---------- */
.auth-split{display:grid;grid-template-columns:1.05fr 1fr;min-height:calc(100vh - var(--announce-h) - var(--topbar-h) - var(--header-h));}
.auth-visual{
  position:relative;overflow:hidden;color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg,#1b1340 0%,#2a1d63 48%,#0e2a4a 100%);
}
.auth-visual .blob{opacity:.5;}
.auth-visual-inner{position:relative;z-index:1;max-width:440px;}
.auth-visual .logo{color:#fff;margin-bottom:36px;}
.auth-visual h2{color:#fff;font-size:30px;line-height:1.25;margin-bottom:14px;}
.auth-visual>.auth-visual-inner>p{color:#bfc3e6;font-size:15px;margin-bottom:8px;}
.auth-feature-list{display:flex;flex-direction:column;gap:15px;margin:26px 0 30px;}
.auth-feature-list div{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:600;color:#e8e9f5;}
.auth-feature-list i{
  width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;
  align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;font-size:17px;
}
.auth-testimonial{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px 22px;}
.auth-testimonial .testi-stars{color:var(--warn);margin-bottom:10px;font-size:13px;letter-spacing:2px;}
.auth-testimonial p{color:#e8e9f5;font-size:13.5px;margin-bottom:14px;}
.auth-testimonial .testi-person span{color:#9b9fc4;}
.auth-stats-row{display:flex;gap:28px;margin-top:30px;}
.auth-stats-row div b{display:block;font-size:22px;font-weight:800;color:#fff;}
.auth-stats-row div span{font-size:11.5px;color:#9b9fc4;font-weight:600;}

.auth-form-side{display:flex;align-items:center;justify-content:center;padding:60px 36px;background:#fff;}
.auth-form-side .auth-wrap{max-width:420px;width:100%;margin:0;}
.auth-form-side .auth-card{border:none;box-shadow:none;padding:0;}
.auth-form-side .auth-card .mark{display:none;}
.auth-mobile-logo{display:none;}

.field .input-wrap .toggle-pass{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:17px;background:none;border:none;cursor:pointer;padding:0;display:flex;}
.field .input-wrap .toggle-pass:hover{color:var(--text-dim);}

.auth-minifoot{padding:24px 0;text-align:center;}
.auth-minifoot small{color:var(--text-faint);font-size:12.5px;}
.auth-minifoot .pay-icons{justify-content:center;margin-top:10px;}
.auth-minifoot .pay-icons span{border-color:var(--border);color:var(--text-faint);}

@media (max-width:980px){
  .auth-split{grid-template-columns:1fr;min-height:auto;}
  .auth-visual{display:none;}
  .auth-form-side{padding:50px 24px;}
  .auth-mobile-logo{display:flex;margin-bottom:8px;}
}

.auth-wrap{max-width:440px;margin:0 auto;}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px;box-shadow:var(--shadow-md);}
.auth-card h1{font-size:24px;text-align:center;}
.auth-card .sub{text-align:center;font-size:14px;margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:var(--text-dim);}
.field .input-wrap{position:relative;}
.field .input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:17px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px 13px 42px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--border);
  color:var(--text);font-size:14.5px;transition:border-color .2s,box-shadow .2s;
}
.field textarea{padding-left:14px;resize:vertical;min-height:120px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(110,91,255,.14);}
.field-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-bottom:20px;}
.field-row a{color:var(--primary);font-weight:700;}
.field-check{display:flex;align-items:center;gap:8px;color:var(--text-dim);}
.divider-text{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--text-faint);font-size:12.5px;}
.divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--border);}
.social-row{display:flex;gap:12px;}
.social-row .btn{flex:1;}
.auth-foot{text-align:center;margin-top:22px;font-size:13.5px;color:var(--text-faint);}

.domain-search{
  display:flex;gap:10px;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:8px;max-width:640px;margin:0 auto;box-shadow:var(--shadow-md);
}
.domain-search input{flex:1;background:transparent;border:none;color:var(--text);padding:12px 14px;font-size:15px;min-width:140px;}
.domain-search input:focus{outline:none;}
.domain-search-sep{width:1px;background:var(--border);align-self:stretch;margin:6px 0;}
@media (max-width:680px){
  .domain-search--transfer{flex-direction:column;}
  .domain-search--transfer .domain-search-sep{display:none;}
  .domain-search--transfer input,.domain-search--transfer button{width:100%;}
}
.tld-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.tld-chip{padding:7px 16px;border-radius:99px;border:1px solid var(--border);font-size:13px;font-weight:700;background:#fff;}
.tld-chip b{color:var(--primary);}

.domain-results{display:flex;flex-direction:column;gap:10px;}
.domain-results-loading{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:22px;
  background:#fff;border:1px solid var(--border);border-radius:14px;color:var(--text-dim);font-weight:700;font-size:13.5px;
}
.domain-results-loading i{font-size:18px;color:var(--primary);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.domain-result-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;
  border:1px solid var(--border);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-sm);
  transition:border-color .2s,transform .2s;
}
.domain-result-item.is-available{border-color:rgba(31,185,120,.35);}
.domain-result-item.is-available:hover{transform:translateY(-2px);}
.domain-result-item.is-taken{background:var(--bg-soft);}
.domain-result-item .drs-name{display:flex;align-items:center;gap:10px;min-width:0;}
.domain-result-item .drs-name b{font-size:15.5px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.domain-result-item .drs-icon{font-size:21px;flex-shrink:0;}
.domain-result-item.is-available .drs-icon{color:var(--success);}
.domain-result-item.is-taken .drs-icon{color:var(--text-faint);}
.domain-result-item.is-taken .drs-name b{color:var(--text-faint);}
.domain-result-item .drs-actions{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.domain-result-item .drs-price{font-weight:800;color:var(--primary);font-size:14.5px;white-space:nowrap;}
.domain-result-item .drs-taken-label{font-size:12.5px;font-weight:700;color:var(--text-faint);background:var(--bg-soft-2);padding:5px 12px;border-radius:99px;}
.domain-results-empty{
  text-align:center;padding:22px;background:#fff;border:1px solid var(--border);border-radius:14px;color:var(--text-faint);font-size:13.5px;font-weight:600;
}
@media (max-width:560px){
  .domain-result-item{flex-direction:column;align-items:flex-start;gap:10px;}
  .domain-result-item .drs-actions{width:100%;justify-content:space-between;}
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{background:var(--navy);border-top:1px solid var(--border);padding:0;color:#c7c9de;clear:both !important;display:block !important;float:none !important;width:100% !important;position:relative !important;z-index:10 !important;}
.site-footer h4{color:#fff;}
.site-footer .logo{color:#fff;}

.footer-quickrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 0;}
.footer-qbox{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px;transition:background .2s,border-color .2s;}
.footer-qbox:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);}
.footer-qbox .ic{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--accent);flex-shrink:0;}
.footer-qbox span{display:block;font-size:11.5px;color:#9b9fc4;}
.footer-qbox b{display:block;font-size:13.5px;color:#fff;margin-top:2px;}

.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:36px;padding:38px 0 54px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand p{font-size:14px;max-width:280px;color:#9b9fc4;}
.footer-socials{display:flex;gap:10px;margin-top:18px;}
.footer-socials a{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:17px;color:#c7c9de;transition:background .2s,color .2s;}
.footer-socials a:hover{background:var(--grad-brand);color:#fff;border-color:transparent;}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--primary);display:inline-block;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:14px;color:#9b9fc4;transition:color .2s;}
.footer-col a:hover{color:var(--accent);}
.footer-col .extra-links{display:none;flex-direction:column;gap:11px;margin:11px 0 0;padding:0;}
.footer-col.is-expanded .extra-links{display:flex;}
.footer-col .more-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:800;color:var(--accent);cursor:pointer;background:none;border:none;padding:0;font-family:inherit;}
.footer-col .more-link i{transition:transform .25s var(--ease);font-size:15px;}
.footer-col.is-expanded .more-link i{transform:rotate(180deg);}
.newsletter-box input{width:100%;padding:13px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;margin-bottom:10px;}
.newsletter-box input::placeholder{color:rgba(255,255,255,.7);}
.newsletter-box input::-webkit-input-placeholder{color:rgba(255,255,255,.7);}
.newsletter-box input::-moz-placeholder{color:rgba(255,255,255,.7);}
.newsletter-box input:-ms-input-placeholder{color:rgba(255,255,255,.7);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:26px 0;flex-wrap:wrap;gap:14px;}
.footer-bottom small{color:#8a8eb5;font-size:13px;}
.pay-icons{display:flex;gap:8px;}
.pay-icons span{padding:5px 10px;border:1px solid rgba(255,255,255,.14);border-radius:6px;font-size:11px;font-weight:700;color:#9b9fc4;}
.status-pill{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--success);}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(31,185,120,.2);}

.footer-legal-bar{display:flex;flex-wrap:wrap;gap:10px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08);}
.footer-legal-bar a{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#9b9fc4;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:8px 14px;border-radius:99px;transition:color .2s,background .2s;}
.footer-legal-bar a:hover{color:#fff;background:rgba(255,255,255,.09);}

.back-top{
  position:fixed;bottom:26px;left:26px;width:46px;height:46px;border-radius:50%;
  background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 10px 26px rgba(110,91,255,.4);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,visibility .25s,transform .25s;z-index:900;border:none;
}
.back-top.is-shown{opacity:1;visibility:visible;transform:translateY(0);}

.whatsapp-float{
  position:fixed;bottom:26px;right:26px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:27px;box-shadow:0 10px 26px rgba(37,211,102,.45);
  z-index:900;transition:transform .25s var(--ease);
}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.05);}
.whatsapp-bubble{
  position:fixed;bottom:90px;right:92px;background:#fff;color:var(--text);padding:10px 14px;border-radius:12px 12px 12px 2px;
  font-size:12.5px;font-weight:700;box-shadow:var(--shadow-md);z-index:900;max-width:180px;
}
@media (max-width:680px){ .whatsapp-bubble{display:none;} }

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-in{opacity:1;transform:translateY(0);}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{height:320px;order:-1;}
  .cards-4,.pricing-grid,.dc-strip,.vps-grid{grid-template-columns:repeat(2,1fr);}
  .cards-3,.testi-grid,.steps,.stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-quickrow{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .section{padding:80px 0;}
  .cards-4,.cards-3,.pricing-grid,.testi-grid,.steps,.stats-grid,.dc-strip,.vps-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .footer-quickrow{grid-template-columns:1fr;}
  .footer-legal-bar{flex-direction:column;align-items:stretch;}
  .cta-banner{padding:40px 22px;}
  table.compare{min-width:620px;}
}

/* =========================================================
   CLIENT PANEL (Müşteri Paneli) — site tasarımıyla aynı üst menü,
   panel sayfaları arasında geçiş için ikincil bir sekme çubuğu kullanır
========================================================= */
.client-subnav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:var(--header-h);z-index:990;}
.client-subnav .container{display:flex;align-items:center;gap:2px;overflow-x:auto;}
.client-subnav a{
  display:flex;align-items:center;gap:8px;padding:16px 18px;font-size:13.5px;font-weight:700;
  color:var(--text-dim);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s;flex-shrink:0;
  position:relative;
}
.client-subnav a i{font-size:17px;}
.client-subnav a:hover{color:var(--primary);}
.client-subnav a.is-active{color:var(--primary);position:relative;border-bottom:2px solid transparent;}
.client-subnav a.is-active::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:3px;background:var(--grad-brand);border-radius:99px;}
.client-subnav a .count{margin-left:2px;background:var(--primary);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:99px;}

.client-icon-btn{
  position:relative;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;
}
.client-icon-btn .dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid #fff;}
.client-user-btn{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--border);background:#fff;}
.client-user-btn .avatar{width:30px;height:30px;border-radius:50%;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;}
.client-user-btn i{font-size:14px;color:var(--text-faint);}

.client-dropdown{position:relative;}
.client-dropdown-menu{
  position:absolute;top:100%;right:0;margin-top:10px;min-width:230px;background:var(--surface-solid);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s;z-index:1100;
}
.client-dropdown.is-open .client-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.client-dropdown-menu .cdm-head{padding:8px 10px;font-size:12px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.client-dropdown-menu li a,.client-dropdown-menu li button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;
  background:none;border:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;text-align:left;
  transition:background .2s;
}
.client-dropdown-menu li a:hover,.client-dropdown-menu li button:hover{background:var(--bg-soft);}
.client-dropdown-menu li i{font-size:16px;color:var(--primary);flex-shrink:0;}
.client-dropdown-menu .notif-item small{display:block;font-weight:600;color:var(--text-faint);font-size:11px;margin-top:1px;}
.client-dropdown-menu .notif-item.is-unread{background:rgba(110,91,255,.05);}

.client-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.client-pagehead h2{font-size:22px;margin:0 0 4px;}
.client-pagehead p{margin:0;color:var(--text-faint);font-size:13.5px;}

.welcome-banner{
  border-radius:var(--radius-lg);padding:30px 32px;margin-bottom:24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#15172e,#241a4d 60%,#0e2a4a);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.welcome-banner h2{font-size:21px;margin:0 0 6px;color:#fff;}
.welcome-banner p{margin:0;color:#c7c9de;font-size:13.5px;max-width:440px;}

.client-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;}
.stat-card .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0;background:var(--grad-brand);}
.stat-card .ic.is-success{background:linear-gradient(135deg,#1fb978,#0d9488);}
.stat-card .ic.is-warn{background:linear-gradient(135deg,#f5a524,#ef8a1f);}
.stat-card .ic.is-danger{background:linear-gradient(135deg,#ef4444,#d6336c);}
.stat-card .val{font-size:22px;font-weight:800;color:var(--text);line-height:1.1;}
.stat-card .lbl{font-size:12px;color:var(--text-faint);font-weight:700;margin-top:3px;}

.panel-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
.panel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:20px;}
.panel-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.panel-card-head h3{font-size:15px;margin:0;}
.panel-card-head .view-all{font-size:12.5px;font-weight:700;color:var(--primary);}
.panel-card-body{padding:22px;}
.panel-card-body.is-flush{padding:0;}

.mini-list{display:flex;flex-direction:column;}
.mini-list-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border);}
.mini-list-item:last-child{border-bottom:none;}
.mini-list-item .mli-ic{width:38px;height:38px;border-radius:10px;background:var(--bg-soft-2);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.mini-list-item .mli-name{font-size:13.8px;font-weight:700;color:var(--text);}
.mini-list-item .mli-sub{font-size:12px;color:var(--text-faint);margin-top:2px;}
.mini-list-item .mli-right{text-align:right;flex-shrink:0;}

.data-table-wrap{overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;min-width:560px;}
.data-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);font-weight:800;padding:13px 22px;border-bottom:1px solid var(--border);background:var(--bg-soft);white-space:nowrap;}
.data-table td{padding:16px 22px;border-bottom:1px solid var(--border);font-size:13.6px;color:var(--text-dim);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tbody tr:hover td{background:var(--bg-soft);}
.data-table .dt-name{font-weight:800;color:var(--text);display:block;}
.data-table .dt-sub{font-size:11.8px;color:var(--text-faint);margin-top:2px;display:block;}
.dt-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}

.status-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:11.5px;font-weight:800;white-space:nowrap;}
.status-tag .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status-tag.is-active,.status-tag.is-paid,.status-tag.is-answered{background:rgba(31,185,120,.12);color:var(--success);}
.status-tag.is-active .dot,.status-tag.is-paid .dot,.status-tag.is-answered .dot{background:var(--success);}
.status-tag.is-pending,.status-tag.is-unpaid{background:rgba(245,165,36,.14);color:#c2790a;}
.status-tag.is-pending .dot,.status-tag.is-unpaid .dot{background:#f5a524;}
.status-tag.is-suspended,.status-tag.is-overdue,.status-tag.is-cancelled{background:rgba(239,68,68,.12);color:var(--danger);}
.status-tag.is-suspended .dot,.status-tag.is-overdue .dot,.status-tag.is-cancelled .dot{background:var(--danger);}
.status-tag.is-open{background:rgba(110,91,255,.1);color:var(--primary);}
.status-tag.is-open .dot{background:var(--primary);}
.status-tag.is-closed{background:var(--bg-soft-2);color:var(--text-faint);}
.status-tag.is-closed .dot{background:var(--text-faint);}

.filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.filter-pill{padding:7px 15px;border-radius:99px;border:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--text-dim);background:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.filter-pill:hover{border-color:rgba(110,91,255,.4);}
.filter-pill.is-active{background:var(--grad-brand);color:#fff;border-color:transparent;}

.usage-meter{margin-bottom:16px;}
.usage-meter:last-child{margin-bottom:0;}
.usage-meter-head{display:flex;align-items:center;justify-content:space-between;font-size:12.8px;font-weight:700;color:var(--text-dim);margin-bottom:7px;}
.usage-meter-head span{color:var(--text-faint);font-weight:600;}
.usage-bar{height:7px;border-radius:4px;background:var(--bg-soft-2);overflow:hidden;}
.usage-bar span{display:block;height:100%;background:var(--grad-accent);border-radius:4px;}
.usage-bar.is-high span{background:linear-gradient(135deg,#f5a524,#ef4444);}

.quick-access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.quick-access-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 10px;
  border:1px solid var(--border);border-radius:14px;font-size:12.5px;font-weight:700;color:var(--text-dim);
  transition:border-color .2s,transform .2s,color .2s;
}
.quick-access-item i{font-size:24px;color:var(--primary);}
.quick-access-item:hover{border-color:rgba(110,91,255,.4);transform:translateY(-3px);color:var(--text);}

.ticket-thread{display:flex;flex-direction:column;gap:18px;padding:24px;}
.ticket-msg{display:flex;gap:14px;max-width:740px;}
.ticket-msg.is-staff{margin-left:auto;flex-direction:row-reverse;}
.ticket-msg .tm-avatar{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-weight:800;font-size:13px;background:var(--bg-soft-2);
}
.ticket-msg.is-staff .tm-avatar{background:var(--grad-brand);color:#fff;}
.ticket-msg-body{background:var(--bg-soft);border-radius:14px;padding:14px 16px;flex:1;min-width:0;}
.ticket-msg.is-staff .ticket-msg-body{background:rgba(110,91,255,.06);border:1px solid rgba(110,91,255,.15);}
.ticket-msg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12.8px;font-weight:800;color:var(--text);flex-wrap:wrap;}
.ticket-msg-head span{font-weight:600;color:var(--text-faint);font-size:11.5px;}
.ticket-msg-body p{margin:0;font-size:13.6px;color:var(--text-dim);line-height:1.65;}
.ticket-reply-box{border-top:1px solid var(--border);padding:20px 24px;}
.ticket-reply-box textarea{
  width:100%;min-height:100px;padding:13px 14px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--border);
  color:var(--text);font-size:14px;resize:vertical;font-family:inherit;
}
.ticket-reply-box textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(110,91,255,.14);}
.ticket-reply-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap;}

.account-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:24px;flex-wrap:wrap;}
.account-tab{
  background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;
  padding:12px 18px;font-size:13.5px;font-weight:700;color:var(--text-faint);cursor:pointer;transition:color .2s,border-color .2s;
}
.account-tab:hover{color:var(--text);}
.account-tab.is-active{color:var(--primary);border-color:var(--primary);}
.account-pane{display:none;}
.account-pane.is-active{display:block;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.form-grid .field-full{grid-column:1/-1;}

.payment-method-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
  border:1px solid var(--border);border-radius:14px;margin-bottom:12px;
}
.payment-method-card .pmc-left{display:flex;align-items:center;gap:14px;}
.payment-method-card .pmc-ic{width:44px;height:32px;border-radius:6px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.03em;}
.payment-method-card b{font-size:13.8px;display:block;}
.payment-method-card span{font-size:12px;color:var(--text-faint);}

@media (max-width:1080px){
  .panel-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .client-stats{grid-template-columns:repeat(2,1fr);}
  .quick-access-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .welcome-banner{padding:24px;}
}
@media (max-width:560px){
  .client-stats{grid-template-columns:1fr;}
}

/* =========================================================
   CART & CHECKOUT (Sepet & Satın Alma Süreci)
========================================================= */
.cart-item{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);}
.cart-item:last-child{border-bottom:none;}
.cart-item .ci-ic{
  width:48px;height:48px;border-radius:12px;background:var(--bg-soft-2);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;
}
.cart-item .ci-info{flex:1;min-width:0;}
.cart-item .ci-name{font-weight:800;font-size:14.5px;color:var(--text);}
.cart-item .ci-meta{font-size:12.5px;color:var(--text-faint);margin-top:2px;}
.cart-item .ci-qty{flex-shrink:0;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;}
.qty-stepper button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;font-family:inherit;}
.qty-stepper button:hover{background:var(--bg-soft);}
.qty-stepper span{width:30px;text-align:center;font-weight:700;font-size:13px;display:inline-block;}
.cart-item .ci-price{font-weight:800;color:var(--text);font-size:14.5px;flex-shrink:0;min-width:90px;text-align:right;}
.cart-item .ci-remove{
  color:var(--text-faint);font-size:18px;flex-shrink:0;transition:color .2s;cursor:pointer;
  background:none;border:none;font-family:inherit;display:flex;align-items:center;
}
.cart-item .ci-remove:hover{color:var(--danger);}

.cart-empty{text-align:center;padding:70px 24px;}
.cart-empty i{font-size:52px;color:var(--text-faint);margin-bottom:18px;display:block;}
.cart-empty p{color:var(--text-faint);margin-bottom:22px;}

.checkout-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start;}
.checkout-grid.is-empty{grid-template-columns:1fr;max-width:640px;margin:0 auto;}
.order-summary-card{position:sticky;top:100px;}
.order-summary-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;color:var(--text-dim);}
.order-summary-line.is-total{border-top:1px solid var(--border);margin-top:8px;padding-top:14px;font-size:16px;font-weight:800;color:var(--text);}
.order-summary-line.is-total span:last-child{color:var(--primary);}

.payment-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.payment-tab{
  flex:1;min-width:120px;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;
  border:1px solid var(--border);border-radius:10px;font-weight:700;font-size:13px;color:var(--text-dim);
  cursor:pointer;background:#fff;font-family:inherit;transition:border-color .2s,color .2s,background .2s;
}
.payment-tab.is-active{border-color:var(--primary);color:var(--primary);background:rgba(110,91,255,.05);}
.payment-tab i{font-size:18px;}
.payment-pane{display:none;}
.payment-pane.is-active{display:block;}

.order-success-card{max-width:560px;margin:0 auto;text-align:center;padding:50px 36px;}
.order-success-icon{
  width:80px;height:80px;border-radius:50%;background:rgba(31,185,120,.12);color:var(--success);
  display:flex;align-items:center;justify-content:center;font-size:42px;margin:0 auto 24px;
}
.order-number-box{background:var(--bg-soft);border-radius:12px;padding:16px 20px;margin:24px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.order-number-box span{font-size:12px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.order-number-box b{font-size:18px;color:var(--primary);letter-spacing:.02em;}
.order-success-steps{display:flex;flex-direction:column;gap:14px;text-align:left;margin:28px 0;}
.order-success-steps div{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;color:var(--text-dim);}
.order-success-steps i{color:var(--success);font-size:17px;margin-top:1px;flex-shrink:0;}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;padding:13px 22px;border-radius:99px;font-size:13.5px;font-weight:700;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-md);z-index:2000;opacity:0;
  transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;
}
.toast.is-shown{opacity:1;transform:translateX(-50%) translateY(0);}
.toast i{color:var(--success);font-size:17px;flex-shrink:0;}

@media (max-width:760px){
  .checkout-grid{grid-template-columns:1fr;}
  .order-summary-card{position:static;}
  .cart-item{flex-wrap:wrap;}
  .cart-item .ci-price{order:5;margin-left:64px;}
}

/* =========================================================
   SERVICE CONFIGURATOR (Sipariş / Özelleştirme Sihirbazı)
========================================================= */
.steps-progress{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:36px;flex-wrap:wrap;}
.step-progress-item{display:flex;align-items:center;gap:10px;}
.step-progress-item .spi-num{
  width:36px;height:36px;border-radius:50%;background:var(--bg-soft);border:2px solid var(--border);
  color:var(--text-faint);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .25s,border-color .25s,color .25s;
}
.step-progress-item .spi-label{font-size:13px;font-weight:700;color:var(--text-faint);white-space:nowrap;}
.step-progress-item.is-active .spi-num{background:var(--grad-brand);border-color:transparent;color:#fff;}
.step-progress-item.is-active .spi-label{color:var(--text);}
.step-progress-item.is-done .spi-num{background:var(--success);border-color:transparent;color:#fff;}
.step-progress-sep{width:48px;height:2px;background:var(--border);margin:0 10px;flex-shrink:0;transition:background .25s;}
.step-progress-sep.is-done{background:var(--success);}

.config-panel{display:none;}
.config-panel.is-active{display:block;}
.config-sub{display:none;}
.config-sub.is-active{display:block;}

.service-pick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.service-pick-card{
  border:2px solid var(--border);border-radius:var(--radius-lg);padding:24px 14px;text-align:center;cursor:pointer;
  transition:border-color .2s,transform .2s,box-shadow .2s;background:#fff;
}
.service-pick-card i{font-size:28px;color:var(--primary);margin-bottom:10px;display:block;}
.service-pick-card b{display:block;font-size:13.5px;}
.service-pick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.service-pick-card.is-selected{border-color:var(--primary);background:rgba(110,91,255,.05);box-shadow:var(--shadow-glow);}

.plan-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:6px;}
.plan-pick-card{border:2px solid var(--border);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
.plan-pick-card .ppc-name{font-size:14px;font-weight:800;display:block;margin-bottom:6px;}
.plan-pick-card .ppc-price{font-size:21px;font-weight:800;color:var(--primary);}
.plan-pick-card .ppc-price span{font-size:11.5px;color:var(--text-faint);font-weight:600;}
.plan-pick-card ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.2px;color:var(--text-dim);}
.plan-pick-card ul i{color:var(--success);margin-right:5px;}
.plan-pick-card.is-selected{border-color:var(--primary);box-shadow:var(--shadow-glow);}

.tld-pick-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.tld-pick-chip{
  border:2px solid var(--border);border-radius:99px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;background:#fff;
}
.tld-pick-chip b{color:var(--primary);margin-left:5px;}
.tld-pick-chip.is-selected{border-color:var(--primary);background:rgba(110,91,255,.06);color:var(--primary);}

.addon-item{
  display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--border);border-radius:12px;
  margin-bottom:10px;cursor:pointer;transition:border-color .2s;
}
.addon-item:hover{border-color:rgba(110,91,255,.35);}
.addon-item input{width:18px;height:18px;accent-color:var(--primary);flex-shrink:0;}
.addon-item .ai-ic{width:38px;height:38px;border-radius:10px;background:var(--bg-soft-2);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.addon-item .ai-info{flex:1;min-width:0;}
.addon-item .ai-info b{display:block;font-size:13.6px;}
.addon-item .ai-info span{font-size:12px;color:var(--text-faint);}
.addon-item .ai-price{font-weight:800;color:var(--primary);font-size:13.2px;flex-shrink:0;white-space:nowrap;}

.config-actions{display:flex;justify-content:space-between;gap:12px;margin-top:30px;}
.config-summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text-dim);}
.config-summary-row:last-of-type{border-bottom:none;}
.config-summary-row b{color:var(--text);}

@media (max-width:980px){
  .service-pick-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:680px){
  .service-pick-grid{grid-template-columns:repeat(2,1fr);}
  .steps-progress .spi-label{display:none;}
  .step-progress-sep{width:24px;}
}

/* =========================================================
   CAREERS (Kariyer)
========================================================= */
.job-card{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;
  border:1px solid var(--border);border-radius:14px;margin-bottom:12px;background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s;flex-wrap:wrap;
}
.job-card:hover{border-color:rgba(110,91,255,.35);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.job-card .jc-info b{font-size:15.5px;display:block;margin-bottom:6px;}
.job-card .jc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.job-card .jc-tag{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--text-dim);background:var(--bg-soft);padding:5px 11px;border-radius:99px;}
.job-card .jc-tag i{font-size:13px;color:var(--primary);}
.job-card .jc-action{flex-shrink:0;}

/* =========================================================
   BANK ACCOUNTS (Banka Hesaplarımız)
========================================================= */
.bank-account-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;
  box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s;
}
.bank-account-card:hover{border-color:rgba(110,91,255,.3);box-shadow:var(--shadow-md);}
.bank-account-card .bac-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.bank-account-card .bac-logo{
  width:48px;height:48px;border-radius:12px;background:var(--grad-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;
}
.bank-account-card .bac-head b{font-size:15px;display:block;}
.bank-account-card .bac-head span{font-size:12px;color:var(--text-faint);}
.bank-account-card .bac-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px;}
.bank-account-card .bac-row:last-child{border-bottom:none;}
.bank-account-card .bac-row span{color:var(--text-faint);}
.bank-account-card .bac-row b{color:var(--text);font-weight:700;}
.bank-account-card .bac-iban{display:flex;align-items:center;gap:10px;}
.bank-account-card .bac-copy{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;color:var(--text-dim);cursor:pointer;flex-shrink:0;
  font-family:inherit;transition:background .2s,color .2s;
}
.bank-account-card .bac-copy:hover{background:var(--primary);color:#fff;border-color:transparent;}
.bank-account-card .bac-copy.is-copied{background:var(--success);color:#fff;border-color:transparent;}

/* =========================================================
   LEGAL DOCS (Yasal Bilgiler)
========================================================= */
.legal-doc h3{margin-top:28px;margin-bottom:10px;font-size:16.5px;}
.legal-doc h3:first-child{margin-top:0;}
.legal-doc p{font-size:14px;color:var(--text-dim);line-height:1.75;margin:0 0 14px;}
.legal-doc ul{margin:0 0 14px;padding-left:20px;color:var(--text-dim);font-size:14px;line-height:1.75;}
.legal-doc li{margin-bottom:6px;}
.legal-doc .legal-updated{font-size:12.5px;color:var(--text-faint);margin-bottom:24px;display:flex;align-items:center;gap:6px;}


/* =========================================================
   CLIENT PANEL (Müşteri Paneli) — site tasarımıyla aynı üst menü,
   panel sayfaları arasında geçiş için ikincil bir sekme çubuğu kullanır
========================================================= */
.client-subnav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:var(--header-h);z-index:990;}
.client-subnav .container{display:flex;align-items:center;gap:2px;overflow-x:auto;}
.client-subnav a{
  display:flex;align-items:center;gap:8px;padding:16px 18px;font-size:13.5px;font-weight:700;
  color:var(--text-dim);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s;flex-shrink:0;
  position:relative;
}
.client-subnav a i{font-size:17px;}
.client-subnav a:hover{color:var(--primary);}
.client-subnav a.is-active{color:var(--primary);position:relative;border-bottom:2px solid transparent;}
.client-subnav a.is-active::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:3px;background:var(--grad-brand);border-radius:99px;}
.client-subnav a .count{margin-left:2px;background:var(--primary);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:99px;}

.client-icon-btn{
  position:relative;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;
}
.client-icon-btn .dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid #fff;}
.client-user-btn{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 12px 5px 5px;border-radius:99px;border:1px solid var(--border);background:#fff;}
.client-user-btn .avatar{width:30px;height:30px;border-radius:50%;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;}
.client-user-btn i{font-size:14px;color:var(--text-faint);}

.client-dropdown{position:relative;}
.client-dropdown-menu{
  position:absolute;top:100%;right:0;margin-top:10px;min-width:230px;background:var(--surface-solid);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:8px;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s;z-index:1100;
}
.client-dropdown.is-open .client-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.client-dropdown-menu .cdm-head{padding:8px 10px;font-size:12px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.client-dropdown-menu li a,.client-dropdown-menu li button{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;
  background:none;border:none;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;text-align:left;
  transition:background .2s;
}
.client-dropdown-menu li a:hover,.client-dropdown-menu li button:hover{background:var(--bg-soft);}
.client-dropdown-menu li i{font-size:16px;color:var(--primary);flex-shrink:0;}
.client-dropdown-menu .notif-item small{display:block;font-weight:600;color:var(--text-faint);font-size:11px;margin-top:1px;}
.client-dropdown-menu .notif-item.is-unread{background:rgba(110,91,255,.05);}

.client-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.client-pagehead h2{font-size:22px;margin:0 0 4px;}
.client-pagehead p{margin:0;color:var(--text-faint);font-size:13.5px;}

.welcome-banner{
  border-radius:var(--radius-lg);padding:30px 32px;margin-bottom:24px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#15172e,#241a4d 60%,#0e2a4a);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.welcome-banner h2{font-size:21px;margin:0 0 6px;color:#fff;}
.welcome-banner p{margin:0;color:#c7c9de;font-size:13.5px;max-width:440px;}

.client-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;}
.stat-card .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0;background:var(--grad-brand);}
.stat-card .ic.is-success{background:linear-gradient(135deg,#1fb978,#0d9488);}
.stat-card .ic.is-warn{background:linear-gradient(135deg,#f5a524,#ef8a1f);}
.stat-card .ic.is-danger{background:linear-gradient(135deg,#ef4444,#d6336c);}
.stat-card .val{font-size:22px;font-weight:800;color:var(--text);line-height:1.1;}
.stat-card .lbl{font-size:12px;color:var(--text-faint);font-weight:700;margin-top:3px;}

.panel-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
.panel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:20px;}
.panel-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.panel-card-head h3{font-size:15px;margin:0;}
.panel-card-head .view-all{font-size:12.5px;font-weight:700;color:var(--primary);}
.panel-card-body{padding:22px;}


/* =========================================================
   COOKIE POPUP (Çerez Uyarısı UI - Dark Glassmorphism)
========================================================= */
body #mio-cookie-popup {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  z-index: 1000000 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: min(400px, calc(100vw - 48px)) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}

body #mio-cookie-popup .mio-cookie-popup__card {
  background: rgba(13, 16, 35, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 26px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body #mio-cookie-popup .mio-cookie-popup__content {
  padding: 0 !important;
  text-align: left !important;
}

body #mio-cookie-popup h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body #mio-cookie-popup h3::before {
  content: "🍪" !important;
  font-size: 20px !important;
}

body #mio-cookie-popup p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(230, 232, 245, 0.8) !important;
  margin: 0 0 22px 0 !important;
}

body #mio-cookie-popup a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #9282ff !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
  transition: color 0.2s !important;
}

body #mio-cookie-popup a:hover {
  color: #b5a9ff !important;
  text-decoration: underline !important;
}

body #mio-cookie-popup button.mio-cookie-popup__c-p-button {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: linear-gradient(135deg, #745cff, #f35fa7) !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 14px 28px !important;
  border-radius: 14px !important;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
  outline: none !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  box-shadow: 0 6px 20px rgba(116, 92, 255, 0.35) !important;
}

body #mio-cookie-popup button.mio-cookie-popup__c-p-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(116, 92, 255, 0.45) !important;
  filter: brightness(1.05) !important;
}

body #mio-cookie-popup button.mio-cookie-popup__c-p-button:active {
  transform: translateY(0) !important;
}

/* Custom global client area body background overrides */
body#muspanel {
  background-image: none !important;
  background-color: var(--bg-soft) !important;
  background: var(--bg-soft) !important;
}

/* Horizontal Tabs Custom Styling (Global Override) */
#muspanel ul.tab,
ul.tab {
    list-style-type: none !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    background: transparent !important;
    filter: none !important;
    width: 100% !important;
    border-bottom: 1px solid var(--border) !important;
}
#muspanel ul.tab li,
ul.tab li {
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
#muspanel ul.tab li a,
ul.tab li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-right: none !important;
    padding: 12px 20px !important;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    cursor: pointer !important;
    transition: color 0.2s, border-color 0.2s !important;
    text-align: left !important;
    text-decoration: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    position: relative !important;
}
#muspanel ul.tab li a:hover,
ul.tab li a:hover {
    color: var(--primary) !important;
}
#muspanel ul.tab li a.active,
#muspanel ul.tab li a.tablinks.active,
ul.tab li a.active,
ul.tab li a.tablinks.active {
    background: transparent !important;
    color: var(--primary) !important;
    position: relative !important;
    border-bottom: 2px solid transparent !important;
    border-right: none !important;
}
#muspanel ul.tab li a.active::after,
#muspanel ul.tab li a.tablinks.active::after,
ul.tab li a.active::after,
ul.tab li a.tablinks.active::after {
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--grad-brand) !important;
    border-radius: 99px !important;
}

/* jQuery UI Accordion custom styling */
.ui-accordion .ui-accordion-header {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid transparent !important;
    color: var(--text-dim) !important;
    font-weight: 700 !important;
    padding: 18px 24px !important;
    border-radius: 12px !important;
    margin-top: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(25,26,56,.02) !important;
}
.ui-accordion .ui-accordion-header:hover {
    color: var(--primary) !important;
    border-color: rgba(110,91,255,.3) !important;
    background: var(--bg-soft) !important;
}
.ui-accordion .ui-accordion-header.ui-accordion-header-active {
    background: rgba(110, 91, 255, 0.04) !important;
    border-color: rgba(110, 91, 255, 0.2) !important;
    border-left: 4px solid var(--primary) !important;
    color: var(--primary) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(110,91,255,.05) !important;
}
.ui-accordion .ui-accordion-header-icon {
    display: none !important; /* Hide JQuery UI triangle */
}
.ui-accordion .ui-accordion-header::after {
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--text-dim) !important;
    border-bottom: 2px solid var(--text-dim) !important;
    transform: rotate(-45deg) !important;
    transition: transform 0.2s ease !important;
}
.ui-accordion .ui-accordion-header.ui-accordion-header-active::after {
    transform: rotate(45deg) !important;
    border-color: var(--primary) !important;
}
.ui-accordion .ui-accordion-content {
    border: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 24px !important;
    background: #fff !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 6px 16px rgba(25,26,56,.02) !important;
}

/* intlTelInput styling overrides */
.iti { display: block !important; width: 100%; }
.iti input { padding-left: 52px !important; }
.iti__country-list { z-index: 1050; }

/* =========================================================
   ORDER WIZARD & CART STYLING OVERRIDES (PREMIUM SURROUNDINGS)
   ========================================================= */
.ilanasamalar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 20px !important;
}

.ilanasamax {
  flex: 1 !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text-faint) !important;
}

.ilanasamax h3 {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.ilanasamax#asamaaktif {
  color: var(--primary) !important;
}

.ilanasamax#asamaaktif h3 {
  background: var(--grad-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(110,91,255,.25) !important;
}

/* Period blocks */
.orderperiodblock-con {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 30px !important;
}

.orderperiodblock {
  flex: 1 !important;
  max-width: 280px !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 2px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 35px 24px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(25,26,56,.03) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.orderperiodblock:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(110,91,255,.4) !important;
  box-shadow: 0 8px 24px rgba(110,91,255,.08) !important;
}

.orderperiodblock.active {
  border: 2px solid var(--primary) !important;
  box-shadow: 0 12px 30px rgba(110,91,255,.15) !important;
  background: #ffffff !important;
}

.orderperiodblock h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

.orderperiodblock h2 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  margin-bottom: 0 !important;
}

.orderperiodblock.active h3 {
  color: var(--primary) !important;
}

.orderperiodblock.active h2 {
  color: var(--navy) !important;
}

.periodselectbox {
  display: none !important;
}

/* Override WiseCP gonderbtn, yesilbtn to look like SurlyCp premium buttons */
.gonderbtn,
.yesilbtn,
.mio-ajax-submit,
.siparisbilgileri .btn {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  border: 1px solid transparent !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s !important;
  white-space: nowrap !important;
  background: var(--grad-brand) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(110,91,255,.3) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  float: none !important;
}

.gonderbtn[style*="display: none"],
.gonderbtn[style*="display:none"],
.yesilbtn[style*="display: none"],
.yesilbtn[style*="display:none"],
.mio-ajax-submit[style*="display: none"],
.mio-ajax-submit[style*="display:none"] {
  display: none !important;
}

.gonderbtn:hover,
.yesilbtn:hover,
.mio-ajax-submit:hover,
.siparisbilgileri .btn:hover {
  background-position: right center !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 16px 32px rgba(110,91,255,.48) !important;
  filter: brightness(1.05) !important;
  color: #fff !important;
}

.graybtn {
  background: #ccc !important;
  color: #fff !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =========================================================
   SURLYCP PREMIUM WIZARD & CART UI/UX STYLING OVERRIDES
   ========================================================= */

/* 0. Centering page content wrapper */
#wrapper {
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px !important;
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#wrapper::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* 1. Progress Wizard Steps */
.ilanasamalar {
  display: flex !important;
  width: 100% !important;
  float: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  margin: 40px auto 60px !important;
  max-width: 960px !important;
  padding: 0 !important;
  border-bottom: none !important;
}

/* Background connecting progress line */
.ilanasamalar::before {
  content: "" !important;
  position: absolute !important;
  top: 20px !important; /* Center vertically relative to the step circle */
  left: 60px !important;
  right: 60px !important;
  height: 4px !important;
  background: var(--border) !important;
  border-radius: 99px !important;
  z-index: 1 !important;
}

.asamaline,
.ilanasamalar + .asamaline {
  display: none !important; /* Hide old absolute line */
}

/* Individual Step Item */
.ilanasamax {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  width: auto !important;
  float: none !important;
  color: var(--text-faint) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.ilanasamax > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

/* Step Circle */
.ilanasamax h3 {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid var(--border) !important;
  color: var(--text-faint) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 0 12px 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

/* Active Step */
.ilanasamax#asamaaktif {
  color: var(--primary) !important;
  font-weight: 800 !important;
}

.ilanasamax#asamaaktif h3 {
  background: var(--primary) !important;
  border: 4px solid rgba(110, 91, 255, 0.24) !important;
  color: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 6px 20px rgba(110, 91, 255, 0.3) !important;
}

/* Done Steps (via main.js class) */
.ilanasamax.step-done {
  color: var(--success) !important;
  font-weight: 700 !important;
}

.ilanasamax.step-done h3 {
  background: var(--success) !important;
  border: 4px solid rgba(31, 185, 120, 0.24) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(31, 185, 120, 0.2) !important;
}

.ilanasamax .clear {
  display: none !important;
}

/* 2. Selection checkmark badge on active period blocks */
.orderperiodblock.active::after {
  content: "\ea41" !important; /* Boxicons bx-check */
  font-family: "boxicons" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 26px !important;
  height: 26px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 8px rgba(110,91,255,0.3) !important;
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  z-index: 10 !important;
}

@keyframes scaleIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.domainsec #accordion {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.domainsec #accordion:has(h3:nth-of-type(3)) {
  grid-template-columns: repeat(3, 1fr) !important;
}

.domainsec #accordion .ui-accordion-header {
  grid-row: 1 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px 20px !important;
  border-radius: 14px !important;
  border: 2px solid var(--border) !important;
  background: #ffffff !important;
  color: var(--navy) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease) !important;
  box-shadow: 0 4px 12px rgba(25,26,56,.02) !important;
  height: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.domainsec #accordion .ui-accordion-header::after {
  display: none !important; /* Hide default arrow and avoid ::after clash */
}

.domainsec #accordion .ui-accordion-header:hover {
  border-color: rgba(110,91,255,.4) !important;
  background: var(--bg-soft) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(110,91,255,.06) !important;
}

.domainsec #accordion .ui-accordion-header.ui-accordion-header-active {
  border-color: var(--primary) !important;
  background: rgba(110,91,255,.02) !important;
  color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(110,91,255,.1) !important;
}

/* Active Checkmark Badge on Tab (uses ::after) */
.domainsec #accordion .ui-accordion-header.ui-accordion-header-active::after {
  display: flex !important;
  content: "\ea41" !important; /* bx-check */
  font-family: "boxicons" !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  box-shadow: 0 2px 6px rgba(110,91,255,0.2) !important;
  z-index: 5 !important;
  /* Reset chevron styles */
  border: none !important;
  transform: none !important;
  transition: none !important;
}

/* Accordion Tab Icons (uses ::before) */
.domainsec #accordion .ui-accordion-header::before {
  margin-bottom: 12px !important;
  font-size: 32px !important;
  color: var(--primary) !important;
  display: block !important;
}

.domain-step-container #accordion h3:nth-of-type(1)::before {
  content: "\ebc1" !important; /* bx-plus-circle */
  font-family: "boxicons" !important;
}

.domain-step-container #accordion h3:nth-of-type(2)::before {
  content: "\eaf8" !important; /* bx-globe */
  font-family: "boxicons" !important;
}

.domain-step-container #accordion h3:nth-of-type(3)::before {
  content: "\eb3c" !important; /* bx-link */
  font-family: "boxicons" !important;
}

.hosting-step-container #accordion h3:nth-of-type(1)::before {
  content: "\ebfd" !important; /* bx-server */
  font-family: "boxicons" !important;
}

.hosting-step-container #accordion h3:nth-of-type(2)::before {
  content: "\ec8e" !important; /* bx-x-circle */
  font-family: "boxicons" !important;
}

.domainsec #accordion .ui-accordion-content {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 30px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(25,26,56,.04) !important;
  box-sizing: border-box !important;
}

/* 4. Cart List Layout overrides (.sepet) */
.sepet {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 30px !important;
  align-items: start !important;
  margin-top: 25px !important;
}

@media (max-width: 991px) {
  .sepet {
    grid-template-columns: 1fr !important;
  }
}

.sepetleft, .sepetright {
  float: none !important;
  width: 100% !important;
}

.sepetbaslik {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

.sepetbaslik .uhinfo,
.sepetbaslik .uhperiyod,
.sepetbaslik .uhtutar {
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

.sepetleft .sepetbaslik > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.sepetleft .sepetbaslik .uhinfo { width: 50% !important; }
.sepetleft .sepetbaslik .uhperiyod { width: 25% !important; text-align: center !important; }
.sepetleft .sepetbaslik .uhtutar { width: 25% !important; text-align: right !important; }

/* Cart Item Row Card styling */
.sepetlist {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
  padding: 24px !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(25,26,56,.02) !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease) !important;
}

.sepetlist:hover {
  border-color: rgba(110,91,255,.2) !important;
  box-shadow: 0 8px 20px rgba(110,91,255,.04) !important;
}

.row-label.green-label {
  position: absolute !important;
  top: -10px !important;
  left: 20px !important;
  background: var(--success) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  box-shadow: 0 2px 6px rgba(31,185,120,.2) !important;
  z-index: 10 !important;
}

.sepetlistcon {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.sepetlistcon .uhinfo {
  flex: 2 !important;
  min-width: 250px !important;
}

.sepetlistcon .uhinfo h5 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  margin-bottom: 4px !important;
}

.sepetlistcon .uhinfo h4 a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--primary) !important;
  transition: opacity 0.2s !important;
}

.sepetlistcon .uhinfo h4 a:hover {
  opacity: 0.8 !important;
}

.cart-additional-details {
  display: flex !important;
  gap: 12px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.cart-additional-details a,
.cart-additional-details label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}

.cart-additional-details a:hover,
.cart-additional-details label:hover {
  background: var(--bg-soft-2) !important;
  color: var(--primary) !important;
  border-color: rgba(110,91,255,.2) !important;
}

.sepetlistcon .uhperiyod {
  flex: 1 !important;
  min-width: 140px !important;
  text-align: center !important;
}

.sepetlistcon .uhperiyod select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235d6178' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding: 10px 38px 10px 14px !important;
  width: 100% !important;
  max-width: 160px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sepetlistcon .uhperiyod select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110,91,255,0.14) !important;
  outline: none !important;
}

.sepetlistcon .uhtutar {
  flex: 1 !important;
  min-width: 120px !important;
  text-align: right !important;
}

.sepetlistcon .uhtutar h4 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
}

.sepetlistcon .uhsil {
  flex-shrink: 0 !important;
}

.sepetlistcon .uhsil a {
  font-size: 18px !important;
  color: var(--text-faint) !important;
  transition: color 0.2s !important;
}

.sepetlistcon .uhsil a:hover {
  color: var(--danger) !important;
}

/* Checkout Sticky Sidebar (.sepetrightshadow) */
.sepetrightshadow {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 12px rgba(25,26,56,.02) !important;
  position: sticky !important;
  top: 100px !important;
  float: none !important; /* Clear legacy float so subsequent buttons don't overlap */
  z-index: 10 !important; /* Ensure it stays layered correctly on top of other content while scrolling */
}

.sepetright .sepetbaslik {
  margin-bottom: 20px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  text-align: left !important;
}

.sepetright .sepetbaslik > div {
  text-align: left !important;
  padding: 0 !important;
}

.sepetsipinfo {
  border-collapse: collapse !important;
  width: 100% !important;
}

.sepetsipinfo tr td {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 14px !important;
  color: var(--text-dim) !important;
}

.sepetsipinfo tr td strong {
  font-weight: 600 !important;
  color: var(--text) !important;
}

.sepetsipinfo tr td h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.kuponkodu {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.kuponkodu input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  width: auto !important;
}

.kuponkodu input:focus {
  outline: none !important;
}

.sepetsipinfo tr td.totalamountinfo {
  border-bottom: none !important;
  padding: 20px !important;
  background: rgba(110, 91, 255, 0.04) !important;
  border: 1px dashed rgba(110, 91, 255, 0.2) !important;
  border-radius: 12px !important;
  display: block !important;
  margin-top: 20px !important;
  text-align: center !important;
}

.sepetsipinfo tr td.totalamountinfo strong {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-weight: 700 !important;
}

.sepetsipinfo tr td.totalamountinfo h5 {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  margin-top: 6px !important;
  letter-spacing: -.02em !important;
}

.sepetright #continue_go,
.sepetright #continue_block,
.sepetright #pay_button,
.sepetright #block_button {
  clear: both !important;
  display: block; /* Removed !important to allow inline display: none to hide the buttons correctly */
  width: 100% !important;
  text-align: center !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 20px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(110,91,255,0.2) !important;
  transition: all 0.2s ease !important;
}

.sepetright #continue_go,
.sepetright #pay_button {
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  border: none !important;
}

.sepetright #continue_go:hover,
.sepetright #pay_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(110,91,255,0.3) !important;
}

.sepetright #continue_block,
.sepetright #block_button {
  background: var(--bg-soft-2) !important;
  color: var(--text-faint) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.sepetright a.lbtn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 15px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-soft) !important;
  color: var(--text-dim) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.sepetright a.lbtn:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* 5. Payment Methods Selection Overrides */
#payment_methods {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

#payment_methods .checkbox-custom {
  display: none !important; /* Hide native checkbox */
}

#payment_methods .checkbox-custom-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 24px 20px !important;
  border-radius: 14px !important;
  border: 2px solid var(--border) !important;
  background: #ffffff !important;
  color: var(--navy) !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease) !important;
  box-shadow: 0 4px 12px rgba(25,26,56,.02) !important;
  min-height: 100px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

#payment_methods .checkbox-custom-label:hover {
  border-color: rgba(110,91,255,.4) !important;
  background: var(--bg-soft) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(110,91,255,.06) !important;
}

#payment_methods .checkbox-custom:checked + .checkbox-custom-label {
  border-color: var(--primary) !important;
  background: rgba(110,91,255,.02) !important;
  color: var(--primary) !important;
  box-shadow: 0 8px 24px rgba(110,91,255,.1) !important;
}

#payment_methods .checkbox-custom:checked + .checkbox-custom-label strong {
  color: var(--primary) !important;
}

/* Active Checkmark Badge on Payment Card */
#payment_methods .checkbox-custom:checked + .checkbox-custom-label::after {
  content: "\ea41" !important; /* bx-check */
  font-family: "boxicons" !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(110,91,255,0.2) !important;
}

#payment_methods .checkbox-custom-label strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  display: block !important;
  color: var(--navy) !important;
}

#payment_methods .checkbox-custom-label span {
  font-size: 12.5px !important;
  color: var(--text-dim) !important;
}

/* 6. Order Steps Addons Step Redesign & Sidebar */
.order-wizard-two-col {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 30px !important;
  margin-top: 30px !important;
  align-items: start !important;
}

@media (max-width: 991px) {
  .order-wizard-two-col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

.order-wizard-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.addon-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px rgba(25,26,56,.02) !important;
  box-sizing: border-box !important;
}

.addon-card-header {
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 16px !important;
}

.addon-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.addon-title-row h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
}

.addon-description {
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
  margin: 8px 0 0 0 !important;
  line-height: 1.5 !important;
}

.badge-compulsory {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.addon-options-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

.addon-option-block {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 18px 16px !important;
  border-radius: 12px !important;
  border: 2px solid var(--border) !important;
  background: #ffffff !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s var(--ease) !important;
  box-sizing: border-box !important;
}

.addon-option-block:hover {
  border-color: rgba(110,91,255,.4) !important;
  background: var(--bg-soft) !important;
}

.addon-option-block.active {
  border-color: var(--primary) !important;
  background: rgba(110,91,255,.02) !important;
  box-shadow: 0 4px 12px rgba(110,91,255,0.06) !important;
}

.addon-option-block .option-check-indicator {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.addon-option-block .option-check-indicator i {
  display: none !important;
  color: #ffffff !important;
  font-size: 12px !important;
}

.addon-option-block.active .option-check-indicator {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
}

.addon-option-block.active .option-check-indicator i {
  display: block !important;
}

.addon-option-block .option-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.addon-option-block .option-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.3 !important;
}

.addon-option-block .option-price {
  font-size: 13px !important;
  color: var(--text-dim) !important;
}

.addon-option-block .option-price strong {
  color: var(--primary) !important;
}

.addon-option-block .option-period {
  font-size: 11.5px !important;
  color: var(--text-faint) !important;
}

/* Select option dropdown layout */
.addon-select-wrapper {
  position: relative !important;
}

.addon-select-element {
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  font-size: 14.5px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
}

.addon-select-element:focus {
  outline: none !important;
  border-color: var(--primary) !important;
}

/* Range slider / Quantity */
.quantity-slider-container {
  background: var(--bg-soft) !important;
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
}

.quantity-label-row {
  margin-bottom: 12px !important;
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
}

.quantity-label-row strong {
  color: var(--primary) !important;
  font-size: 15px !important;
}

/* Order Summary Sidebar Layout */
.order-wizard-sidebar-container {
  position: sticky !important;
  top: 24px !important;
}

.order-summary-sidebar {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 8px 30px rgba(25,26,56,.04) !important;
  box-sizing: border-box !important;
}

.order-summary-sidebar h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 16px 0 !important;
}

.summary-divider {
  height: 1px !important;
  background: var(--border) !important;
  margin: 16px 0 !important;
}

.summary-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.summary-item {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

.summary-item-name {
  color: var(--text-dim) !important;
}

.summary-item-price {
  font-weight: 700 !important;
  color: var(--navy) !important;
  flex-shrink: 0 !important;
}

.summary-main-plan .summary-item-name {
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.summary-addons-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
  border-top: 1px dashed var(--border) !important;
  padding-top: 10px !important;
}

.summary-addon-item .summary-item-name {
  font-size: 13px !important;
  color: var(--text-dim) !important;
}

.summary-addon-item .summary-item-price {
  font-size: 13px !important;
  color: var(--primary) !important;
}

.summary-total-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 20px 0 !important;
}

.summary-total-row .total-label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.summary-total-row .total-amount-val {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
}

.summary-action .btn {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Custom Dropdown Styling */
.custom-select-container {
  position: relative !important;
  width: 100% !important;
  user-select: none !important;
}

.custom-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: #ffffff !important;
  color: var(--navy) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s var(--ease) !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.015) !important;
}

.custom-select-trigger span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-right: 12px !important;
}

.custom-select-trigger span span {
  font-weight: 400 !important;
  color: var(--text-dim) !important;
  font-size: 13px !important;
}

.custom-select-trigger:hover {
  border-color: var(--primary) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(110,91,255,0.08) !important;
}

.custom-select-container.open .custom-select-trigger {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(110,91,255,0.12) !important;
  background: #ffffff !important;
}

.custom-select-trigger i {
  font-size: 20px !important;
  color: var(--text-dim) !important;
  transition: transform 0.25s var(--ease) !important;
  flex-shrink: 0 !important;
}

.custom-select-container.open .custom-select-trigger i {
  transform: rotate(180deg) !important;
  color: var(--primary) !important;
}

.custom-select-options {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(110,91,255,0.08) !important;
  z-index: 999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 250px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

.custom-select-container.open .custom-select-options {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.custom-select-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 13.8px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  transition: all 0.15s var(--ease) !important;
  box-sizing: border-box !important;
  gap: 12px !important;
  margin-bottom: 2px !important;
}

.custom-select-option:last-child {
  margin-bottom: 0 !important;
}

.custom-select-option:hover {
  background: var(--bg-soft) !important;
  color: var(--navy) !important;
}

.custom-select-option.active {
  background: rgba(110,91,255,0.06) !important;
  color: var(--primary) !important;
}

.custom-select-option .opt-name {
  font-weight: 600 !important;
  color: var(--navy) !important;
}

.custom-select-option.active .opt-name {
  color: var(--primary) !important;
}

.custom-select-option .opt-price {
  font-size: 13px !important;
  color: var(--text-dim) !important;
}

.custom-select-option .opt-price strong {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.custom-select-option .opt-period {
  font-size: 11.5px !important;
  color: var(--text-faint) !important;
}

/* ---------- CHECKOUT STEP UI OVERHAUL & SELECT DECORATIONS ---------- */

/* 1. Hosting Addons List redone */
.cart-item-addons {
  margin-top: 14px !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.cart-addon-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 15px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  padding-bottom: 6px !important;
}

.cart-addon-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.cart-addon-row .addon-title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
}

.cart-addon-row .addon-title i {
  color: var(--primary) !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.cart-addon-row .addon-price {
  font-weight: 700 !important;
  color: var(--text) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* 2. Premium Custom Styling for Native Select Dropdowns */
.sepetlistcon select,
.faturabilgisi select,
.hesapbilgisi select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235d6178' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding: 10px 38px 10px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-block; /* Remove !important to let inline style display: none take effect */
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.sepetlistcon select:focus,
.faturabilgisi select:focus,
.hesapbilgisi select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110,91,255,0.14) !important;
  outline: none !important;
}

/* 3. Global Checkbox & Radio Button Brand Theme Customization */
.checkbox-custom + .checkbox-custom-label:before,
.radio-custom + .radio-custom-label:before {
  border: 2px solid var(--border) !important;
  border-radius: 6px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--bg-soft) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "" !important;
  background-color: var(--primary) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-color: var(--primary) !important;
}

.radio-custom + .radio-custom-label:before {
  border-radius: 50% !important;
}

.radio-custom:checked + .radio-custom-label:before {
  content: "" !important;
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* 4. Form Layout Overrides (.hesapbilgisi) */
.hesapbilgisi {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  float: none !important;
}

.hesapbilgisi .yuzde25 {
  width: 100% !important;
  float: none !important;
  line-height: normal !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
}

.hesapbilgisi .yuzde75 {
  width: 100% !important;
  float: none !important;
  line-height: normal !important;
}

.hesapbilgisi input[type="text"],
.hesapbilgisi input[type="email"],
.hesapbilgisi input[type="password"],
.hesapbilgisi textarea,
.faturabilgisi input[type="text"],
.faturabilgisi input[type="email"] {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: border-color .2s, box-shadow .2s !important;
}

.hesapbilgisi input:focus,
.hesapbilgisi textarea:focus,
.faturabilgisi input:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110,91,255,.14) !important;
}

/* 5. Checkout Billing Forms & Custom Address Grids */
.faturabilgisi {
  width: 100% !important;
  display: block !important;
}

.faturabilgisi h5 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin-bottom: 12px !important;
}

.faturabilgisi #haveAddress select#address_list {
  margin-bottom: 20px !important;
}

.faturabilgisi #newAddress {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-top: 15px !important;
  box-sizing: border-box !important;
}

.faturabilgisi #newAddress h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  margin-bottom: 15px !important;
}

.faturabilgisi #newAddress .line {
  display: none !important;
}

.hesapbilgisi .radio-custom-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
}

.hesapbilgititle {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  margin-bottom: 6px !important;
}

.faturabilgisi .yuzde30,
.faturabilgisi .yuzde25,
.faturabilgisi .yuzde15 {
  display: inline-block !important;
  box-sizing: border-box !important;
  margin-bottom: 15px !important;
  padding-right: 10px !important;
  vertical-align: top !important;
}

.faturabilgisi .yuzde30 { width: 33.33% !important; }
.faturabilgisi .yuzde25 { width: 25% !important; }
.faturabilgisi .yuzde15 { width: 16.66% !important; }

@media (max-width: 768px) {
  .faturabilgisi .yuzde30,
  .faturabilgisi .yuzde25,
  .faturabilgisi .yuzde15 {
    width: 100% !important;
    padding-right: 0 !important;
  }
}

.faturabilgisi .yuzde30 strong,
.faturabilgisi .yuzde25 strong,
.faturabilgisi .yuzde15 strong,
.faturabilgisi #address strong {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

.faturabilgisi #addNewAddressForm .gonderbtn {
  display: inline-block !important;
  background: var(--primary) !important;
  color: #fff !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  margin-top: 15px !important;
}

.faturabilgisi #addNewAddressForm .gonderbtn:hover {
  background: var(--primary-2) !important;
  transform: translateY(-1px) !important;
}

#contract1 + .checkbox-custom-label,
#contract2 + .checkbox-custom-label {
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  cursor: pointer !important;
}

#contract1 + .checkbox-custom-label a,
#contract2 + .checkbox-custom-label a {
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* 6. Fix Click-blocking Overlaps on Cart Items */
.sepetlistcon .uhinfo,
.sepetlistcon .uhperiyod,
.sepetlistcon .uhtutar,
.sepetlistcon .uhsil {
  float: none !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 7. Payment & Security Badges container layout */
.paymentlogos {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-top: 30px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.paymentlogos .plogos1 {
  height: 28px !important;
  width: auto !important;
  display: block !important;
  opacity: 0.85 !important;
  filter: grayscale(1) !important;
  transition: opacity 0.2s, filter 0.2s !important;
}

.paymentlogos .plogos2 {
  height: 32px !important;
  width: auto !important;
  display: block !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s !important;
}

.paymentlogos .plogos1:hover {
  opacity: 1 !important;
  filter: none !important;
}

.paymentlogos .plogos2:hover {
  opacity: 1 !important;
}

.paymentlogos span {
  flex: 1 !important;
  min-width: 200px !important;
  font-size: 12.5px !important;
  color: var(--text-faint) !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
  float: none !important;
}

.paymentlogos .clear {
  display: none !important;
}

/* 8. Continue shopping button custom styling */
#continueshopbtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  transition: all 0.2s ease !important;
  margin-top: 30px !important;
  box-shadow: none !important;
}

#continueshopbtn:hover {
  background: var(--bg-soft-2) !important;
  color: var(--primary) !important;
  border-color: rgba(110,91,255,0.2) !important;
  transform: translateY(-1px) !important;
}

/* 9. Full-width details row container for cart item addons & configurations */
.cart-item-details-row {
  width: 100% !important;
  margin-top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 18px !important;
  box-sizing: border-box !important;
}

.cart-item-details-row .cart-additional-details {
  margin-top: 0 !important; /* Reset margin inside details container */
}

/* 10. Global Typography Forcing (Overrides browser default serif/Times New Roman) */
body, input, select, textarea, button, h1, h2, h3, h4, h5, h6, table, tr, td, th, a, span, label, div, p {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

/* 11. Popup Dialog & Modal Overrides (.modalDialog) */
.modalDialog {
  background: rgba(13, 16, 35, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
}

.modalDialog > div {
  width: min(760px, calc(100vw - 32px)) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 0 !important;
  overflow: hidden !important;
  margin: 8% auto !important;
}

.modalDialog h2 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  background: var(--navy) !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative !important;
}

.modalDialog .close {
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  transition: all 0.2s ease !important;
  top: 14px !important;
  right: 20px !important;
  line-height: normal !important;
  text-decoration: none !important;
}

.modalDialog .close:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.05) !important;
}

.modalDialog form,
.modalDialog .padding20 {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.modalDialog .blue-info,
.modalDialog .red-info,
.modalDialog .green-info {
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
}

.modalDialog .blue-info {
  background: rgba(110, 91, 255, 0.06) !important;
  border-color: rgba(110, 91, 255, 0.15) !important;
  color: var(--primary) !important;
}

.modalDialog .red-info {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  color: var(--danger) !important;
}

.modalDialog ul.tablinks {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  overflow-x: auto !important;
}

.modalDialog ul.tablinks li a {
  display: inline-block !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--text-dim) !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease !important;
  margin-bottom: -2px !important;
}

.modalDialog ul.tablinks li a.active,
.modalDialog ul.tablinks li a:hover {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

.modalDialog ul.tablinks li a.green {
  border: 1px solid var(--primary) !important;
  border-radius: 99px !important;
  color: var(--primary) !important;
  background: transparent !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
}

.modalDialog ul.tablinks li a.green:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.modalDialog form input[type="text"],
.modalDialog form input[type="email"],
.modalDialog form input[type="tel"] {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 14.5px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  margin-bottom: 0 !important;
}

.modalDialog form input[type="text"]:focus,
.modalDialog form input[type="email"]:focus,
.modalDialog form input[type="tel"]:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.14) !important;
}

.modalDialog form .yuzde33,
.modalDialog form .yuzde50 {
  display: inline-block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  padding: 0 8px 12px 8px !important;
}

.modalDialog form .yuzde33 {
  width: 33.33% !important;
}

.modalDialog form .yuzde50 {
  width: 50% !important;
}

@media (max-width: 560px) {
  .modalDialog form .yuzde33,
  .modalDialog form .yuzde50 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.modal-foot-btn {
  border-top: 1px solid var(--border) !important;
  padding: 18px 24px !important;
  background: var(--bg-soft) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 0 !important;
}

.modal-foot-btn a,
.modal-foot-btn button {
  display: inline-block !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border: none !important;
}

.modal-foot-btn a.green,
.modal-foot-btn button.green {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.modal-foot-btn a.green:hover,
.modal-foot-btn button.green:hover {
  background: var(--primary-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(110, 91, 255, 0.2) !important;
}

/* 12. Full Cart Redesign & Modern SaaS aesthetics overrides */

/* Hide traditional table headers inside cart */
.sepetleft .sepetbaslik {
  display: none !important;
}

/* Premium Card Overrides */
.sepetlist {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  margin-bottom: 24px !important;
  padding: 28px !important;
  box-shadow: 0 10px 30px rgba(25, 26, 56, 0.03) !important;
  border-left: 4px solid var(--primary) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sepetlist:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px rgba(110, 91, 255, 0.08) !important;
  border-left-color: var(--primary-2) !important;
}

/* Cart Item title icons */
.cart-item-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

.cart-item-title i {
  color: var(--primary) !important;
  font-size: 22px !important;
  background: rgba(110, 91, 255, 0.06) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(110, 91, 255, 0.12) !important;
  transition: all 0.25s ease !important;
}

.sepetlist:hover .cart-item-title i {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  transform: rotate(5deg) scale(1.05) !important;
}

/* Category links styling under card title */
.sepetlistcon .uhinfo h4 a {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: rgba(110, 91, 255, 0.05) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-top: 4px !important;
}

/* Redesign dynamic addons card container */
.cart-item-addons {
  background: rgba(110, 91, 255, 0.03) !important;
  border: 1px solid rgba(110, 91, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  margin-top: 8px !important;
}

.cart-addon-row {
  border-bottom: 1px solid rgba(110, 91, 255, 0.06) !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

.cart-addon-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.cart-addon-row .addon-title {
  font-weight: 600 !important;
  color: var(--text) !important;
}

.cart-addon-row .addon-title i {
  color: var(--primary) !important;
  font-size: 15px !important;
  margin-right: 2px !important;
}

.cart-addon-row .addon-price {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

/* Dark receipt total block style in sidebar */
.sepetsipinfo tr td.totalamountinfo,
.totalamountinfo-box {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #090a1e 0%, #12102b 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-top: 20px !important;
  border: 1px solid rgba(110, 91, 255, 0.25) !important;
  box-shadow: 0 12px 28px rgba(10, 11, 26, 0.4), 0 0 20px rgba(110, 91, 255, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.sepetsipinfo tr td.totalamountinfo br,
.totalamountinfo-box br {
  display: none !important;
}

.sepetsipinfo tr td.totalamountinfo::before,
.totalamountinfo-box::before {
  content: "" !important;
  position: absolute !important;
  width: 150px !important;
  height: 150px !important;
  background: radial-gradient(circle, rgba(110, 91, 255, 0.2) 0%, transparent 70%) !important;
  top: -75px !important;
  right: -75px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.sepetsipinfo tr td.totalamountinfo::after,
.totalamountinfo-box::after {
  content: "" !important;
  position: absolute !important;
  width: 120px !important;
  height: 120px !important;
  background: radial-gradient(circle, rgba(0, 194, 168, 0.1) 0%, transparent 70%) !important;
  bottom: -60px !important;
  left: -60px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.sepetsipinfo tr td .totalamountinfo-box strong,
.sepetsipinfo tr td.totalamountinfo strong,
.totalamountinfo-box strong {
  font-size: 11px !important;
  color: rgba(165, 180, 252, 0.85) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  display: block !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.sepetsipinfo tr td .totalamountinfo-box h5,
.sepetsipinfo tr td.totalamountinfo h5,
.totalamountinfo-box h5 {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
}

/* Coupon block title */
.sepetsipinfo a[href*="kuponkodu"] {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.sepetsipinfo a[href*="kuponkodu"] i {
  font-size: 16px !important;
}

/* Sidebar Order Summary Item Breakdown Styles */
#summary-items-breakdown {
  display: table-row-group !important;
}

.summary-item-main-row td {
  padding: 10px 0 4px 0 !important;
  border-bottom: none !important;
}

.summary-item-main-row td .summary-item-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.summary-item-main-row td .summary-item-period {
  font-size: 11.5px !important;
  color: var(--text-dim) !important;
  font-weight: 500 !important;
}

.summary-item-main-row td .summary-item-price {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.summary-item-addon-row td {
  padding: 2px 0 4px 0 !important;
  border-bottom: none !important;
}

.summary-item-addon-row td .summary-addon-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding-left: 12px !important;
}

.summary-item-addon-row td .summary-addon-name i {
  font-size: 14px !important;
  color: var(--primary) !important;
  opacity: 0.8 !important;
}

.summary-item-addon-row td .summary-addon-price {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
}

/* Make sure the divider row looks clean */
.summary-divider-row td {
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--border) !important;
}

/* Hide old header and payment logos */
.sepetleft > .sepetbaslik {
  display: none !important;
}

.sepetleft .paymentlogos {
  display: none !important;
}

/* Unified Cart Card Container */
.unified-cart-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(25,26,56,.02) !important;
  margin-bottom: 24px !important;
}

/* Header styling */
.unified-cart-header {
  background: var(--navy) !important; /* Dark Slate Navy from theme */
  border-bottom: 4px solid var(--primary) !important; /* Brand Purple from theme */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
}

.unified-cart-header .col-period {
  text-align: center !important;
}

.unified-cart-header .col-price {
  text-align: right !important;
}

/* Rows styling */
.unified-cart-rows {
  display: flex !important;
  flex-direction: column !important;
}

.unified-cart-row {
  position: relative !important;
  border-bottom: 1px solid var(--border) !important;
  background: #ffffff !important;
  transition: background-color 0.2s !important;
}

.unified-cart-row:hover {
  background: #fdfdfd !important;
}

.unified-cart-header,
.unified-cart-row {
  display: grid !important;
  grid-template-columns: 3fr 1.5fr 1.5fr 40px !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
}

/* Col Product info */
.unified-cart-row .col-product {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.unified-cart-row .product-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0b3c8c !important; /* Dark Blue from image */
}

.unified-cart-row .product-category {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0b3c8c !important;
  opacity: 0.8 !important;
}

.unified-cart-row .product-domain {
  font-size: 13.5px !important;
  color: #555c70 !important;
  margin-bottom: 4px !important;
}

/* Addons inside rows */
.unified-cart-row .product-addons-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: 4px !important;
}

.unified-cart-row .product-addon-line {
  font-size: 13.5px !important;
  color: #555c70 !important;
  padding-left: 2px !important;
}

/* Whois Privacy checkbox styles (custom override for domain) */
.unified-cart-row .domain-whois-toggle {
  margin-top: 8px !important;
  display: inline-flex !important;
}

/* Col Period select styling */
.unified-cart-row .col-period {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.unified-cart-row .col-period select {
  width: 100% !important;
  max-width: 180px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236e5bff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding: 8px 36px 8px 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  pointer-events: auto !important;
  background-color: #ffffff !important;
}

.unified-cart-row .col-period select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110,91,255,0.14) !important;
  outline: none !important;
}

.unified-cart-row .period-discount-badge {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #7ec127 !important; /* Green color from image */
}

/* Col Price styling */
.unified-cart-row .col-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.unified-cart-row .old-price-strike {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  margin-bottom: 2px !important;
}

.unified-cart-row .current-price-bold {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0b3c8c !important;
}

/* Actions styling */
.unified-cart-row .col-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.unified-cart-row .delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(239, 68, 68, 0.25) !important;
  background: rgba(239, 68, 68, 0.06) !important;
  color: #ef4444 !important;
  font-size: 19px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
  padding: 0 !important;
}

.unified-cart-row .delete-btn:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: scale(1.08) !important;
}

.unified-cart-row .delete-btn:active {
  transform: scale(0.96) !important;
}

/* Discount Ribbon Tag styling */
.unified-cart-row .discount-ribbon {
  position: absolute !important;
  top: 10px !important;
  left: -8px !important;
  background: #ef4444 !important; /* Red label background */
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 4px 4px 4px 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  z-index: 10 !important;
}

.unified-cart-row .discount-ribbon::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  border-width: 4px 4px 0 0 !important;
  border-style: solid !important;
  border-color: #991b1b transparent transparent transparent !important;
}

/* Footer styling */
.unified-cart-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px !important;
  background: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.unified-cart-footer .ssl-notice {
  font-size: 13.5px !important;
  color: #555c70 !important;
}

.unified-cart-footer .ssl-notice strong {
  font-weight: 700 !important;
  color: #0b3c8c !important;
}

.unified-cart-footer .payment-badges {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.unified-cart-footer .payment-badges img {
  height: 22px !important;
  object-fit: contain !important;
}

.unified-cart-footer .payment-badges .ssl-secure-badge {
  height: 26px !important;
}

/* Disable WiseCP's broken negative margins & absolute positioning for currency symbols in cart */
.sepetleft i.currposleft,
.sepetright i.currposleft,
.unified-cart-card i.currposleft {
  position: static !important;
  margin: 0 4px 0 0 !important;
  display: inline-block !important;
  font-style: normal !important;
  left: auto !important;
  right: auto !important;
}

.sepetleft i.currposright,
.sepetright i.currposright,
.unified-cart-card i.currposright {
  position: static !important;
  margin: 0 0 0 4px !important;
  display: inline-block !important;
  font-style: normal !important;
  left: auto !important;
  right: auto !important;
}

/* Restores FontAwesome font-family for custom checkboxes and icons */
.fa::before,
.fa:before,
.fa {
  font-family: 'FontAwesome' !important;
}

/* Sidebar Total Amount Box Alignment & Flex Formatting */
.totalamountinfo .amount_spot_view,
.totalamountinfo-box .amount_spot_view {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  flex-direction: row !important;
  margin-top: 0 !important;
  width: auto !important;
  justify-content: flex-end !important;
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

.totalamountinfo .amount_spot_view i,
.totalamountinfo-box .amount_spot_view i {
  position: static !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #a5b4fc !important;
  margin: 0 !important;
  line-height: 1 !important;
  align-self: center !important;
}

.sepetsipinfo tr td.totalamountinfo h5,
.totalamountinfo-box h5 {
  margin: 0 !important;
}

/* iziModal Global Overrides specifically for our modals */
.iziModal[id="cart-ns-details"],
.iziModal[id="cart-whois-details"] {
  height: auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 50px -12px rgba(10, 11, 26, 0.25) !important;
  border: 1px solid var(--border) !important;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
  z-index: 99999 !important;
}

.iziModal-overlay {
  z-index: 99998 !important;
}

.iziModal[id="cart-ns-details"] {
  max-height: 85vh !important;
}

.iziModal[id="cart-ns-details"] .iziModal-wrap {
  height: auto !important;
  max-height: calc(85vh - 65px) !important;
  overflow-y: auto !important;
}

.iziModal[id="cart-whois-details"] {
  max-height: 85vh !important;
}

.iziModal[id="cart-whois-details"] .iziModal-wrap {
  height: auto !important;
  max-height: calc(85vh - 65px) !important;
  overflow-y: auto !important;
}

.iziModal[id="cart-ns-details"] .iziModal-content,
.iziModal[id="cart-whois-details"] .iziModal-content {
  height: auto !important;
  overflow: visible !important;
}

.iziModal[id="cart-ns-details"] .iziModal-header,
.iziModal[id="cart-whois-details"] .iziModal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 101 !important;
  background: #14152b !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(110, 91, 255, 0.15) !important;
}

.iziModal[id="cart-ns-details"] .iziModal-header-title,
.iziModal[id="cart-whois-details"] .iziModal-header-title {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Modal Body content */
#cart-ns-details,
#cart-whois-details {
  background: #ffffff !important;
}

#cart-ns-details .padding20,
#cart-whois-details .padding20 {
  padding: 24px 30px !important;
}

/* Alert/Info Boxes inside modals */
#cart-ns-details .red-info,
#cart-whois-details .blue-info {
  border-radius: 12px !important;
  margin-bottom: 24px !important;
  padding: 14px 18px !important;
}

#cart-ns-details .red-info {
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
}

#cart-whois-details .blue-info {
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
}

#cart-ns-details .red-info .padding15,
#cart-whois-details .blue-info .padding15 {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#cart-ns-details .red-info i {
  color: #ef4444 !important;
  font-size: 18px !important;
  margin: 0 !important;
}

#cart-whois-details .blue-info i {
  color: #3b82f6 !important;
  font-size: 18px !important;
  margin: 0 !important;
}

#cart-ns-details .red-info p {
  color: #991b1b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#cart-whois-details .blue-info p {
  color: #1e3a8a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* Modern Input Text Fields */
#cart-ns-details input,
#cart-whois-details input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  transition: all 0.2s ease !important;
  margin-bottom: 14px !important;
  text-align: left !important;
  font-family: inherit !important;
  float: none !important;
  display: block !important;
  height: auto !important;
}

#cart-ns-details input:focus,
#cart-whois-details input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus {
  background: #ffffff !important;
  border-color: #6e5bff !important;
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.12) !important;
  outline: none !important;
}

/* Modern Select drop down inside Whois modal */
#cart-whois-details select {
  width: 100% !important;
  background: #f8fafc url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 12px center/18px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 36px 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  appearance: none !important;
  transition: all 0.2s ease !important;
  margin-bottom: 14px !important;
  font-family: inherit !important;
}

#cart-whois-details select:focus {
  background-color: #ffffff !important;
  border-color: #6e5bff !important;
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.12) !important;
  outline: none !important;
}

/* Whois Modal Grid Layout */
#cart-whois-details .tabcontent {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 12px !important;
  row-gap: 16px !important;
}

#cart-whois-details .tabcontent > .formcon {
  grid-column: span 12 !important;
}

#cart-whois-details .tabcontent > input {
  margin-bottom: 0 !important; /* Reset margin since we use grid gap */
}

/* Row 1: Name and Company (50% / 50%) */
#cart-whois-details .tabcontent > input[class*="-Name"] {
  grid-column: span 6 !important;
}
#cart-whois-details .tabcontent > input[class*="-Company"] {
  grid-column: span 6 !important;
}

/* Row 2: Email (100%) */
#cart-whois-details .tabcontent > input[class*="-EMail"] {
  grid-column: span 12 !important;
}

/* Row 3: Phone Country Code and Phone (3 columns / 9 columns) */
#cart-whois-details .tabcontent > input[class*="-PhoneCountryCode"] {
  grid-column: span 3 !important;
}
#cart-whois-details .tabcontent > input[class*="-Phone"]:not([class*="CountryCode"]) {
  grid-column: span 9 !important;
}

/* Row 4: Fax Country Code and Fax (3 columns / 9 columns) */
#cart-whois-details .tabcontent > input[class*="-FaxCountryCode"] {
  grid-column: span 3 !important;
}
#cart-whois-details .tabcontent > input[class*="-Fax"]:not([class*="CountryCode"]) {
  grid-column: span 9 !important;
}

/* Row 5: Address (100%) */
#cart-whois-details .tabcontent > input[class*="-Address"] {
  grid-column: span 12 !important;
}

/* Row 6: City, State, ZipCode (33% / 33% / 33%) */
#cart-whois-details .tabcontent > input[class*="-City"] {
  grid-column: span 4 !important;
}
#cart-whois-details .tabcontent > input[class*="-State"] {
  grid-column: span 4 !important;
}
#cart-whois-details .tabcontent > input[class*="-ZipCode"] {
  grid-column: span 4 !important;
}

/* Row 7: Country (100%) */
#cart-whois-details .tabcontent > input[class*="-Country"] {
  grid-column: span 12 !important;
}

@media (max-width: 600px) {
  #cart-whois-details .tabcontent {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #cart-whois-details .tabcontent > input {
    grid-column: span 1 !important;
  }
}


/* Modal Footer & Buttons Styling */
#cart-ns-details .modal-foot-btn,
#cart-whois-details .modal-foot-btn {
  background: #f8fafc !important;
  padding: 16px 30px !important;
  border-top: 1px solid #e2e8f0 !important;
  text-align: right !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-radius: 0 0 16px 16px !important;
}

#cart-whois-details .modal-foot-btn {
  position: sticky !important;
  bottom: 0 !important;
  background: #ffffff !important;
  z-index: 100 !important;
  border-radius: 0 !important;
}


#cart-ns-details #DomainDnsChangeForm_submit,
#cart-whois-details #DomainWhoisChangeForm_submit {
  background: linear-gradient(135deg, #6e5bff 0%, #8a3ffc 100%) !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(110, 91, 255, 0.3) !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
}

#cart-ns-details #DomainDnsChangeForm_submit:hover,
#cart-whois-details #DomainWhoisChangeForm_submit:hover {
  background: linear-gradient(135deg, #5b4be6 0%, #762ee3 100%) !important;
  box-shadow: 0 6px 20px rgba(110, 91, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

#cart-ns-details #DomainDnsChangeForm_submit:active,
#cart-whois-details #DomainWhoisChangeForm_submit:active {
  transform: translateY(1px) !important;
}

/* Modern styling for whois profiles link in modal header/tab */
#cart-whois-details a[href*="whois-profiles"] {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
  margin-top: 10px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

#cart-whois-details a[href*="whois-profiles"]:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Tabs inside Whois Modal */
#cart-whois-details ul.tab {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: 24px !important;
}

#cart-whois-details ul.tab li {
  list-style: none !important;
  margin: 0 !important;
}

#cart-whois-details ul.tab li a.tablinks {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  display: block !important;
  text-decoration: none !important;
}

#cart-whois-details ul.tab li a.tablinks.active {
  background: #ffffff !important;
  color: #6e5bff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

#cart-whois-details .formcon {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
  text-align: left !important;
}

#cart-whois-details .formcon .yuzde30 {
  width: 100% !important;
  float: none !important;
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 13.5px !important;
  margin-bottom: 4px !important;
}

#cart-whois-details .formcon .yuzde70 {
  width: 100% !important;
  float: none !important;
}

/* Checkout Payment Step Layout Refinements */
.sepetlistcon.payment-step-con {
  display: block !important;
}

#noAddress h5 {
  background: rgba(245, 165, 36, 0.05) !important;
  border-left: 4px solid var(--warn) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.faturabilgisi #newAddress {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(25, 26, 56, 0.02) !important;
}

/* Spacing and style for checkboxes in payment steps */
.sepetlistcon.payment-step-con .checkbox-custom-label {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Billing Address Form Grid & Compact Overrides */
.billing-address-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 16px 12px !important;
  width: 100% !important;
}

.billing-address-grid .hesapbilgisi {
  grid-column: span 6 !important;
  margin-bottom: 0 !important;
  gap: 6px !important;
  display: flex; /* Remove !important to let inline style display: none take effect */
  flex-direction: column !important;
}

.billing-address-grid .hesapbilgisi .yuzde25,
.billing-address-grid .hesapbilgisi .yuzde75 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.billing-address-grid #billing_kind_selection {
  grid-column: span 12 !important; /* Account type full width */
  margin-bottom: 4px !important;
}

/* Make kind selection radio buttons layout look nice */
.billing-address-grid #billing_kind_selection .yuzde75 {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  margin-top: 4px !important;
}

/* Hide legacy clear divs */
.billing-address-grid .clear {
  display: none !important;
}

/* Country, City, County, Zip Code Grid Spans */
.billing-address-grid #country-wrapper {
  grid-column: 1 / span 3 !important; /* Force country to start on a new row */
}

.billing-address-grid #country-wrapper,
.billing-address-grid #cities,
.billing-address-grid #counti,
.billing-address-grid #zipcode {
  grid-column-end: span 3 !important;
  width: 100% !important;
  float: none !important; /* Reset legacy floats */
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Uniform Label Styling inside Billing Grid */
.billing-address-grid .hesapbilgititle,
.billing-address-grid #country-wrapper strong,
.billing-address-grid #cities strong,
.billing-address-grid #counti strong,
.billing-address-grid #zipcode strong,
.billing-address-grid #address strong {
  margin-bottom: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.billing-address-grid #address {
  grid-column: span 12 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Make input fields more compact and premium */
.billing-address-grid input[type="text"],
.billing-address-grid input[type="email"],
.billing-address-grid select {
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
}

/* Responsive grid overrides */
@media (max-width: 768px) {
  .billing-address-grid .hesapbilgisi,
  .billing-address-grid #billing_kind_selection,
  .billing-address-grid #country-wrapper,
  .billing-address-grid #cities,
  .billing-address-grid #counti,
  .billing-address-grid #zipcode {
    grid-column: span 12 !important;
  }
}

/* Ensure hidden form sections and inputs stay hidden despite global display: flex / inline-block rules */
.hesapbilgisi[style*="display: none"],
.hesapbilgisi[style*="display:none"],
.billing-address-grid .hesapbilgisi[style*="display: none"],
.billing-address-grid .hesapbilgisi[style*="display:none"],
.billing-address-grid select[style*="display: none"],
.billing-address-grid select[style*="display:none"],
.billing-address-grid input[style*="display: none"],
.billing-address-grid input[style*="display:none"],
.billing-address-grid div[style*="display: none"],
.billing-address-grid div[style*="display:none"] {
  display: none !important;
}

/* Fix phone input overlap with flag dropdown (using high-specificity ID wrapper) */
#addNewAddressForm .intl-tel-input input,
#addNewAddressForm .iti input {
  padding-left: 85px !important;
}

/* General safety override to respect inline display: none */
[style*="display: none"],
[style*="display:none"] {
  display: none !important;
}

/* Fix header "Giriş Yap" button hover and styling */
.header-actions .btn-ghost {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.22s var(--ease) !important;
}

.header-actions .btn-ghost:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(110, 91, 255, 0.24) !important;
}

/* Fix panel overview "Yeni Hizmet Sipariş Et" button size */
.welcome-banner .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
  align-self: center !important;
}

/* Fix pagehead actions buttons (e.g. Yeni Talep, Toplu Ödeme Yap) width */
.client-pagehead .btn,
.client-pagehead .ticketstatusbtn .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
  align-self: center !important;
}

/* Premium Ticket View Details UI Styles */
.ticket-msg {
  max-width: 820px !important;
  margin-bottom: 20px !important;
}
.ticket-msg .tm-avatar {
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  box-shadow: var(--shadow-sm) !important;
}
.ticket-msg-body {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: 0 4px 16px rgba(25, 26, 56, 0.02) !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  transition: border-color 0.25s var(--ease) !important;
}
.ticket-msg-body:hover {
  border-color: rgba(110, 91, 255, 0.2) !important;
}
.ticket-msg.is-staff .ticket-msg-body {
  background: linear-gradient(135deg, rgba(110, 91, 255, 0.04) 0%, rgba(138, 63, 252, 0.04) 100%) !important;
  border: 1px solid rgba(110, 91, 255, 0.16) !important;
  box-shadow: 0 6px 24px rgba(110, 91, 255, 0.05) !important;
}
.ticket-msg.is-staff .ticket-msg-body:hover {
  border-color: rgba(110, 91, 255, 0.32) !important;
}
.ticket-reply-box {
  background: var(--surface) !important;
  border-radius: 16px !important;
}
.ticket-reply-box textarea {
  background: var(--bg-soft) !important;
  border-color: var(--border) !important;
  padding: 16px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  border-radius: 12px !important;
  transition: all 0.25s var(--ease) !important;
}
.ticket-reply-box textarea:focus {
  background: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(110, 91, 255, 0.14) !important;
}

/* Premium file upload wrapper interaction */
.file-upload-wrapper:hover {
  border-color: var(--primary) !important;
  background: rgba(110, 91, 255, 0.02) !important;
}
.file-upload-wrapper input[type="file"] {
  cursor: pointer !important;
}

/* Push ticket action buttons (Bileti Kapat, Cevap Alanı) to the far right */
.client-pagehead .ticketstatusbtn {
  margin-left: auto !important;
}

/* Global Custom Checkbox Input Hiding */
.checkbox-custom {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Global Custom Checkbox Label Alignment & Styles */
.checkbox-custom-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  user-select: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Ensure spacing and styling for the checkbox before box */
.checkbox-custom + .checkbox-custom-label:before {
  content: "" !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   PREMIUM CUSTOMER PANEL SERVICES & DOMAINS UI REDESIGN
   ========================================================================== */

/* Right content panel wrapper */
.mpanelrightcon {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  margin-bottom: 30px !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .mpanelrightcon {
    padding: 20px !important;
  }
}

/* Breadcrumb and Pagehead styling */
.mpaneltitle {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 20px !important;
  margin-bottom: 25px !important;
}

.mpaneltitle h4 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 10px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.mpaneltitle h4 i, 
.mpaneltitle h4 svg {
  color: var(--primary) !important;
}

.mpaneltitle .sayfayolu {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-faint) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.mpaneltitle .sayfayolu a {
  color: var(--text-dim) !important;
  text-decoration: none !important;
}

.mpaneltitle .sayfayolu a:hover {
  color: var(--primary) !important;
}

/* Domain List Status Tabs */
.ac-domainlist-status {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 25px 0 !important;
  padding: 6px !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  width: fit-content !important;
}

.ac-domainlist-status a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  background: transparent !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: none !important;
}

.ac-domainlist-status a strong {
  font-weight: 700 !important;
  margin-left: 4px !important;
  color: var(--text) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
}

.ac-domainlist-status a:hover {
  color: var(--text) !important;
  background: rgba(255,255,255,0.7) !important;
}

.ac-domainlist-status a.active {
  background: var(--accent-gradient, linear-gradient(135deg, #6e5bff 0%, #8a3ffc 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(110, 91, 255, 0.15) !important;
}

.ac-domainlist-status a.active strong {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Domain Action Buttons (Whois / NS Manager) */
.mpanelrightcon > a.lbtn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  margin-right: 10px !important;
  margin-bottom: 20px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}

.mpanelrightcon > a.lbtn i {
  font-size: 15px !important;
  margin-right: 8px !important;
}

.mpanelrightcon > a.lbtn.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}

.mpanelrightcon > a.lbtn.green:hover {
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25) !important;
  transform: translateY(-1px) !important;
}

.mpanelrightcon > a.lbtn.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

.mpanelrightcon > a.lbtn.blue:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* DataTable wrappers & layout adjustments */
.dataTables_wrapper {
  position: relative !important;
  margin-top: 15px !important;
}

.dataTables_wrapper .dataTables_length {
  float: left !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin-bottom: 20px !important;
}

.dataTables_wrapper .dataTables_filter {
  float: right !important;
  font-size: 13px !important;
  color: var(--text-dim) !important;
  margin-bottom: 20px !important;
}

/* Length Select Input */
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  outline: none !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  transition: all 0.2s ease !important;
}

/* Search text Input */
.dataTables_wrapper .dataTables_filter input {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  outline: none !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  transition: all 0.2s ease !important;
  width: 220px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
  margin-left: 8px !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--primary) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(110, 91, 255, 0.15) !important;
}

/* DataTables clear layout */
.dataTables_wrapper::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Premium Table design */
table#products,
table#table1,
.mpanelrightcon table.table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 20px 0 !important;
}

table#products thead,
table#table1 thead,
.mpanelrightcon table.table thead {
  background: var(--bg-soft) !important;
}

table#products thead th,
table#table1 thead th,
.mpanelrightcon table.table thead th {
  padding: 14px 18px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  text-align: center !important;
}

table#products thead th:nth-child(2),
table#products thead th:nth-child(3),
table#table1 thead th:nth-child(2),
table#table1 thead th:nth-child(3) {
  text-align: left !important;
}

table#products tbody td,
table#table1 tbody td,
.mpanelrightcon table.table tbody td {
  padding: 16px 18px !important;
  font-size: 13.8px !important;
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--border) !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
  background: #ffffff !important;
  text-align: center !important;
}

table#products tbody td:nth-child(2),
table#products tbody td:nth-child(3),
table#table1 tbody td:nth-child(2),
table#table1 tbody td:nth-child(3) {
  text-align: left !important;
}

table#products tbody tr:last-child td,
table#table1 tbody tr:last-child td,
.mpanelrightcon table.table tbody tr:last-child td {
  border-bottom: none !important;
}

table#products tbody tr,
table#table1 tbody tr,
.mpanelrightcon table.table tbody tr {
  transition: background-color 0.2s ease !important;
}

table#products tbody tr:hover td,
table#table1 tbody tr:hover td,
.mpanelrightcon table.table tbody tr:hover td {
  background-color: rgba(110, 91, 255, 0.01) !important;
}

/* Text styles in cells */
table#products tbody td strong,
table#table1 tbody td strong,
.mpanelrightcon table.table tbody td strong {
  font-weight: 700 !important;
  color: var(--text) !important;
  font-size: 14.5px !important;
}

/* Sub service detail tag (domain name or details) */
.service-detail-sub {
  font-size: 12.5px !important;
  color: var(--text-faint) !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  display: inline-block !important;
}

/* Manage action button */
#products td .incelebtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--border) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1) !important;
}

#products td .incelebtn i {
  font-size: 14px !important;
  margin-right: 6px !important;
  color: var(--text-faint) !important;
  transition: color 0.2s ease !important;
}

#products td .incelebtn:hover {
  background: var(--text) !important;
  color: #ffffff !important;
  border-color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

#products td .incelebtn:hover i {
  color: #ffffff !important;
}

#products td .incelebtn[style*="grayscale"] {
  opacity: 0.4 !important;
  pointer-events: none !important;
  background: #f1f5f9 !important;
  color: var(--text-faint) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Status Badges */
#products td span.active,
#products td .active,
#products td span.paid,
#products td .paid,
#products td span.successful,
#products td .successful {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: rgba(16, 185, 129, 0.08) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: none !important;
}

#products td span.waiting,
#products td .waiting,
#products td span.pending,
#products td .pending,
#products td span.inprocess,
#products td .inprocess,
#products td span.process,
#products td .process {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: rgba(245, 158, 11, 0.08) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: none !important;
}

#products td span.suspended,
#products td .suspended,
#products td span.inactive,
#products td .inactive {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  box-shadow: none !important;
}

#products td span.cancelled,
#products td .cancelled,
#products td span.refunded,
#products td .refunded {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: rgba(107, 114, 128, 0.08) !important;
  color: #6b7280 !important;
  border: 1px solid rgba(107, 114, 128, 0.2) !important;
  box-shadow: none !important;
}

/* DataTable pagination and details */
.dataTables_wrapper .dataTables_info {
  float: left !important;
  margin-top: 15px !important;
  font-size: 13px !important;
  color: var(--text-faint) !important;
  font-weight: 500 !important;
  line-height: 36px !important;
}

.dataTables_wrapper .dataTables_paginate {
  float: right !important;
  margin-top: 15px !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-dim) !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-color: var(--text-faint) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active {
  background: var(--accent-gradient, linear-gradient(135deg, #6e5bff 0%, #8a3ffc 100%)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 10px rgba(110, 91, 255, 0.2) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: #f8fafc !important;
  color: var(--text-faint) !important;
  border-color: var(--border) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Small Action Buttons in table (.sbtn) */
#table1 td a.sbtn,
#products td a.sbtn,
.mpanelrightcon table td a.sbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--text-dim) !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--border) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#table1 td a.sbtn i,
#products td a.sbtn i,
.mpanelrightcon table td a.sbtn i {
  margin: 0 !important;
  font-size: 14px !important;
}

#table1 td a.sbtn:hover,
#products td a.sbtn:hover,
.mpanelrightcon table td a.sbtn:hover {
  background: var(--text) !important;
  color: #ffffff !important;
  border-color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Red / Delete state */
#table1 td a.sbtn.red,
#products td a.sbtn.red,
.mpanelrightcon table td a.sbtn.red {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

#table1 td a.sbtn.red:hover,
#products td a.sbtn.red:hover,
.mpanelrightcon table td a.sbtn.red:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

/* Default lbtn styling for Customer Panel */
.mpanelrightcon a.lbtn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  margin-bottom: 20px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  background: var(--accent-gradient, linear-gradient(135deg, #6e5bff 0%, #8a3ffc 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(110, 91, 255, 0.15) !important;
  float: none !important;
}

.mpanelrightcon a.lbtn:hover {
  box-shadow: 0 6px 16px rgba(110, 91, 255, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Whois profiles edit/create form styling (ModifyWhois) */
.mpaneltitle::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

.ModifyWhois {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ModifyWhois form {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 15px auto 0 auto !important;
}

.ModifyWhois form input[type="hidden"] {
  display: none !important;
}

.ModifyWhois .formcon {
  grid-column: span 12 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  float: none !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
}

.ModifyWhois .formcon .yuzde30,
.ModifyWhois .formcon .yuzde70 {
  width: 100% !important;
  float: none !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ModifyWhois .formcon .yuzde30 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.ModifyWhois input[name="Name" i],
.ModifyWhois input[name="Company" i],
.ModifyWhois input[name="EMail" i] {
  grid-column: span 4 !important;
}

.ModifyWhois input[name="PhoneCountryCode" i],
.ModifyWhois input[name="FaxCountryCode" i] {
  grid-column: span 3 !important;
}

.ModifyWhois input[name="Phone" i],
.ModifyWhois input[name="Fax" i] {
  grid-column: span 9 !important;
}

.ModifyWhois input[name="Address" i] {
  grid-column: span 12 !important;
}

.ModifyWhois input[name="Country" i],
.ModifyWhois input[name="City" i],
.ModifyWhois input[name="State" i] {
  grid-column: span 4 !important;
}

.ModifyWhois input[name="ZipCode" i] {
  grid-column: span 4 !important;
}

.ModifyWhois input[type="text"],
.ModifyWhois input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]) {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--text) !important;
  width: 100% !important;
  height: 48px !important;
  outline: none !important;
  transition: all 0.25s ease !important;
  float: none !important;
  box-sizing: border-box !important;
}

.ModifyWhois input[type="text"]:focus,
.ModifyWhois input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):focus {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(110, 91, 255, 0.14) !important;
}

.ModifyWhois .line {
  grid-column: span 12 !important;
  border-top: 1px solid var(--border) !important;
  margin: 10px 0 !important;
  float: none !important;
  width: 100% !important;
}

.ModifyWhois form > div[style*="inline-block"] {
  grid-column: span 12 !important;
  margin: 0 !important;
  display: block !important;
}

.ModifyWhois .guncellebtn {
  grid-column: span 12 !important;
  width: 100% !important;
  float: none !important;
  margin: 10px 0 0 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.ModifyWhois .guncellebtn a.gonderbtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 0 35px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: var(--accent-gradient, linear-gradient(135deg, #6e5bff 0%, #8a3ffc 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(110, 91, 255, 0.2) !important;
  transition: all 0.25s ease !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.ModifyWhois .guncellebtn a.gonderbtn:hover {
  box-shadow: 0 6px 20px rgba(110, 91, 255, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Default Nameserver Modal Redesign */
.iziModal[id="default-nameserver"] {
  height: auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 50px -12px rgba(10, 11, 26, 0.25) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif !important;
  z-index: 99999 !important;
  max-height: 85vh !important;
  background: #ffffff !important;
}

.iziModal[id="default-nameserver"] .iziModal-wrap {
  height: auto !important;
  max-height: calc(85vh - 65px) !important;
  overflow-y: auto !important;
}

.iziModal[id="default-nameserver"] .iziModal-content {
  height: auto !important;
  overflow: visible !important;
}

.iziModal[id="default-nameserver"] .iziModal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 101 !important;
  background: #14152b !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(110, 91, 255, 0.15) !important;
}

.iziModal[id="default-nameserver"] .iziModal-header-title {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

#default-nameserver {
  background: #ffffff !important;
}

#default-nameserver .padding20 {
  padding: 24px 30px !important;
}

/* Alert Boxes inside default-nameserver modal */
#default-nameserver .blue-info,
#default-nameserver .red-info {
  border-radius: 12px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

#default-nameserver .blue-info {
  background: #eff6ff !important;
  border: 1px solid #dbeafe !important;
}

#default-nameserver .red-info {
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
}

#default-nameserver .blue-info .padding15,
#default-nameserver .red-info .padding15 {
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#default-nameserver .blue-info i {
  color: #3b82f6 !important;
  font-size: 18px !important;
  margin: 0 !important;
}

#default-nameserver .red-info i {
  color: #ef4444 !important;
  font-size: 18px !important;
  margin: 0 !important;
}

#default-nameserver .blue-info p {
  color: #1e3a8a !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

#default-nameserver .red-info p {
  color: #991b1b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* Nameserver Inputs Grid Layout */
#default-nameserver form div[style*="text-align:center"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  text-align: left !important;
  margin-top: 24px !important;
}

#default-nameserver form div[style*="text-align:center"] .clear {
  display: none !important;
}

#default-nameserver form div[style*="text-align:center"] input[name="values[]"] {
  width: 100% !important;
  height: 48px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background: var(--bg-soft, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  border-radius: 10px !important;
  color: var(--text-main, #0f172a) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#default-nameserver form div[style*="text-align:center"] input[name="values[]"]::placeholder {
  color: var(--text-muted, #94a3b8) !important;
}

#default-nameserver form div[style*="text-align:center"] input[name="values[]"]:focus {
  border-color: var(--primary, #6e5bff) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(110, 91, 255, 0.15) !important;
  outline: none !important;
}

/* Modal Footer & Submit button */
#default-nameserver .modal-foot-btn {
  background: #f8fafc !important;
  padding: 16px 30px !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  border-radius: 0 0 16px 16px !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100 !important;
}

#default-nameserver #ModifyDefaultNameserver_submit {
  background: var(--accent-gradient, linear-gradient(135deg, #6e5bff 0%, #8a3ffc 100%)) !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(110, 91, 255, 0.3) !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
}

#default-nameserver #ModifyDefaultNameserver_submit:hover {
  background: linear-gradient(135deg, #5b4be6 0%, #762ee3 100%) !important;
  box-shadow: 0 6px 20px rgba(110, 91, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

#default-nameserver #ModifyDefaultNameserver_submit:active {
  transform: translateY(1px) !important;
}

/* ==========================================
   LIVE SUPPORT WIDGET (CANLI DESTEK)
   ========================================== */
.live-support-container {
  position: relative;
  z-index: 999999;
}

.live-support-side-button {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #3b4b61 !important;
  border: none !important;
  outline: none !important;
  padding: 18px 12px !important;
  border-radius: 12px 0 0 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  box-shadow: -4px 0 16px rgba(15, 23, 42, 0.12) !important;
  transition: all 0.25s ease !important;
  width: auto !important;
  height: auto !important;
}

.live-support-side-button:hover {
  background-color: #2e3b4d !important;
  padding-right: 16px !important;
}

.ls-icon-wrapper {
  position: relative !important;
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  justify-content: center !important;
  align-items: center !important;
}

.ls-icon-wrapper i {
  font-size: 24px !important;
  color: #ffffff !important;
}

.ls-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 0 0 2px #3b4b61 !important;
  line-height: 1 !important;
}

.ls-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  margin-top: 14px !important;
  white-space: nowrap !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.live-support-popup {
  position: fixed !important;
  right: 56px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(15px) !important;
  width: 290px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18) !important;
  z-index: 999998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  border: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
}

.live-support-popup.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}

.ls-popup-header {
  padding: 22px 22px 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

.ls-popup-title-group h3 {
  margin: 0 0 4px 0 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  line-height: 1.2 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ls-popup-title-group p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ls-popup-close {
  background: none !important;
  border: none !important;
  font-size: 22px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: color 0.2s !important;
  outline: none !important;
}

.ls-popup-close:hover {
  color: #475569 !important;
}

.ls-popup-body {
  padding: 0 22px 22px !important;
}

.ls-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
}

.ls-row:last-child {
  margin-bottom: 0 !important;
}

.ls-row:hover {
  background: #f1f5f9 !important;
  transform: translateY(-2px) !important;
  border-color: #cbd5e1 !important;
  text-decoration: none !important;
}

.ls-row-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.ls-row-icon.whatsapp,
.ls-row-icon.telegram {
  background-color: #4a5568 !important;
}

.ls-row-icon i {
  font-size: 22px !important;
  color: #ffffff !important;
}

.ls-row-info {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.ls-row-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.ls-row-subtitle {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 3px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}