/* 
  StreamingCenter - Unified Theme Overrides
  Tek dosyada tüm özel stiller.
*/

:root{
  --accent1:#667eea;
  --accent2:#764ba2;
  --gold:#FFD700;
  --bg0:#05060a;
  --bg1:#0b1020;
  --card:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --shadow: 0 14px 35px rgba(0,0,0,.28);
  --shadow2: 0 22px 55px rgba(0,0,0,.38);
  --radius: 18px;
}

html{scroll-behavior:smooth;}

/* TYPOGRAPHY */
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
p{font-size:16px;}
.small, small{font-size: 13px;}
h1,h2,h3,h4{letter-spacing:.2px}

/* NAVBAR LOGO + GENERAL IMAGES */
.navbar-brand img{
  height: 34px;
  width:auto;
  max-width: 200px;
  display:block;
}
img{max-width:100%; height:auto;}
.img-soft{
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* BUTTONS - more premium */
.btn-success{
  border-radius: 999px !important;
  padding-left: 18px;
  padding-right: 18px;
}
.btn-info{
  border-radius: 999px !important;
}
a, .btn{transition: all .2s ease;}

/* READABILITY FIX (all pages common sections)
   Slider arkaplan üstünde yazılar kaybolmasın diye ortak bölümlerde cam/overlay uygular.
*/

.aweb{
  padding: 70px 0;
  position: relative;
}
.aweb::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.45));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 0;
}
.aweb > .container{position: relative; z-index: 1;}

.aweb h2,
.aweb h3,
.aweb h4{color: #fff; text-shadow: 0 10px 26px rgba(0,0,0,.55);}
.aweb p,
.aweb li,
.aweb .panel-body{color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.75;}
.aweb a{color: #fff;}
.aweb a:hover{color: #60a5fa;}

/* FAQ accordion readability */
.aweb .panel{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.aweb .panel + .panel{margin-top: 12px;}
.aweb .panel-heading{background: transparent; border: 0;}
.aweb .panel-title a{display:block; padding: 14px 16px; color:#fff; font-weight: 700; text-decoration:none;}
.aweb .panel-title a:hover{color:#60a5fa;}

/* Small info lines ("30 gün iade" vb) */
.pricing-section .text-center,
.pricing-section-home .text-center{
  display: inline-block;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.pricing-section .text-center p,
.pricing-section-home .text-center p{
  color: rgba(255,255,255,.88) !important;
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.6;
}
.aweb .panel-body{background: rgba(0,0,0,.25); border-top: 1px solid rgba(255,255,255,.08);}

/* Small info rows like “30 gün iade” blocks */
.aweb .text-center{
  margin-top: 22px !important;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.10);
}
.aweb .text-center p{margin: 0 0 8px 0;}
.aweb .text-center p:last-child{margin-bottom:0;}

/* Support row - make sure text is always readable */
.support h3,
.support p{color:#fff; text-shadow: 0 10px 26px rgba(0,0,0,.55);}

/* SECTION HELPERS */
.section-pad{padding: 70px 0;}
.section-dark{
  background: radial-gradient(1200px 500px at 20% 0%, rgba(102,126,234,.25), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(118,75,162,.22), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}
.section-title{
  text-align:center;
  color:#fff;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 12px;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.section-subtitle{
  text-align:center;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  margin-bottom: 50px;
}

/* TOP BAR (from includes/top.php) */
.top{
  background: #111827;
  color: #fff;
  padding: 8px 0;
  font-size: 13px;
  font-family: inherit;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-info{display:flex; align-items:center; justify-content:space-between; gap: 12px;}
.contact-info span{margin-right: 18px; display:inline-block;}
.contact-info i{color: #60a5fa; margin-right: 6px;}
.top-links a{
  color: rgba(255,255,255,.85);
  text-decoration:none;
  margin-left: 14px;
  font-size: 12px;
}
.top-links a:hover{color:#60a5fa;}
.top-links i{margin-right: 5px;}
@media (max-width: 768px){
  .top-info{flex-direction:column; text-align:center;}
  .contact-info span{display:block; margin: 3px 0;}
  .top-links{margin-top: 8px;}
  .top-links a{margin:0 10px;}
}

/* FOOTER (from includes/footer.php) */
.footer{
  background: #0b1020;
  color: #fff;
  padding: 34px 0 16px;
  border-top: 3px solid #60a5fa;
  margin-top: 45px;
}
.footer h5{
  color: #60a5fa;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footer-links{list-style:none; padding:0; margin:0;}
.footer-links li{margin-bottom: 8px; line-height: 1.4;}
.footer-links a{
  color: rgba(255,255,255,.68);
  text-decoration:none;
  font-size: 13px;
}
.footer-links a:hover{color:#60a5fa;}
.company-info{text-align:center; padding-top: 10px;}
.company-info .flogo{
  max-width: 120px;
  margin-bottom: 10px;
  filter: brightness(0) invert(1);
}
.company-info p{
  color: rgba(255,255,255,.68);
  font-size: 12px;
  margin:0 0 6px 0;
}

/* PRICING SECTIONS (index + pages) */
.pricing-section,
.pricing-section-home{
  padding: 80px 0;
  background: radial-gradient(1100px 450px at 20% 0%, rgba(255,215,0,.10), transparent 55%),
              linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 100%);
}
.section-title-home{
  text-align:center;
  color:#fff;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 12px;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.section-subtitle-home{
  text-align:center;
  color: rgba(255,255,255,.78);
  font-size: 18px;
  margin-bottom: 50px;
}

.package-category-title{
  text-align:center;
  color:#fff;
  margin-bottom: 50px;
  font-size: 40px;
  font-weight: 800;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.package-category-title i{margin-right: 12px; color: var(--gold);}

/* Cards (shared) */
.pricing-card,
.pricing-card-home{
  background: var(--card);
  border-radius: calc(var(--radius) + 2px);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  margin-bottom: 30px;
  position: relative;
}
.pricing-card:hover,
.pricing-card-home:hover{
  transform: translateY(-12px);
  box-shadow: var(--shadow2);
}

.pricing-card.popular,
.pricing-card-home.popular{
  border: 3px solid var(--gold);
  transform: scale(1.03);
  z-index: 2;
}
.pricing-card.popular:hover,
.pricing-card-home.popular:hover{
  transform: scale(1.03) translateY(-12px);
}

.popular-badge,
.popular-badge-home{
  position:absolute;
  top: 15px;
  right: -40px;
  background: var(--gold);
  color: #2b2b2b;
  padding: 8px 44px;
  transform: rotate(45deg);
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 6px 18px rgba(255,215,0,.25);
  z-index: 3;
}

.card-header,
.card-header-home{
  background: linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 100%);
  color:#fff;
  padding: 28px 20px;
  text-align:center;
}
.card-header h3,
.card-header-home h3{
  margin:0;
  font-size: 26px;
  font-weight: 800;
}
.card-header h3 i,
.card-header-home h3 i{
  font-size: 34px;
  margin-bottom: 12px;
  display:block;
}

.price,
.price-home{
  font-size: 48px;
  font-weight: 900;
  margin: 18px 0;
  color:#fff;
  text-shadow: 0 8px 22px rgba(0,0,0,.32);
}
.price span,
.price-home span{
  font-size: 20px;
  vertical-align: super;
}

.card-body,
.card-body-home{
  padding: 26px;
}

.features-list,
.features-list-home{
  list-style:none;
  padding:0;
  margin: 0 0 22px 0;
}
.features-list li,
.features-list-home li{
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
.features-list li i,
.features-list-home li i{
  color: #22c55e;
  min-width: 18px;
  margin-top: 2px;
}

/* if a page uses scroll list */
.features-list-home{
  max-height: 420px;
  overflow-y:auto;
  padding-right: 6px;
}

.card-footer,
.card-footer-home{
  padding: 18px 20px;
  background: #f8fafc;
  text-align:center;
}

.order-btn,
.order-btn-home{
  display:inline-block;
  padding: 12px 30px;
  background: linear-gradient(135deg, var(--accent1) 0%, var(--accent2) 100%);
  color:#fff;
  border:none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  text-decoration:none;
}
.order-btn:hover,
.order-btn-home:hover{
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent1) 100%);
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(102,126,234,.28);
  text-decoration:none;
}

/* Normalize random logos that were “sırıtıyor” */
img[src*="sonicpanel"],
img[src*="shoutcast"],
img[src*="icecast"],
img[src*="youtube-logo"],
img[src*="obs-logo"],
img[src*="streamlabs-logo"],
img[src*="vps.png"]{
  max-height: 56px;
  width:auto;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

/* responsive sizing */
@media (max-width: 992px){
  .section-title, .section-title-home, .package-category-title{font-size: 32px;}
  .section-subtitle, .section-subtitle-home{font-size: 16px;}
  .price, .price-home{font-size: 42px;}
}
@media (max-width: 576px){
  body{font-size: 15px;}
  .price, .price-home{font-size: 38px;}
  .card-header h3, .card-header-home h3{font-size: 22px;}
}


/* INDEX - domain search / diff / quote cleanup */
.domains--hero{
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  padding: 60px 0;
}
.domains__title{
  text-align:center;
  color:#fff;
  font-size: 40px;
  font-weight: 900;
  margin: 0 0 10px 0;
}
.domains__subtitle{
  text-align:center;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  margin: 0 0 30px 0;
}

/* Reused utility class: make it readable on light sections */
.diff--section .domains__subtitle,
.quote--section .domains__subtitle{
  color: #374151;
  text-align: left;
  margin: 0 0 14px 0;
}

/* Ensure quote section titles remain readable if inline styles change */
.quote--section h3{color:#fff;}
.domain-search{
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  border-radius: 999px;
  overflow:hidden;
}
.domain-search__addon{
  background:#fff !important;
  border:none !important;
  font-weight: 700;
}
.domain-search__input{
  border:none !important;
  height: 60px !important;
}
.domain-search__btn{
  background: #FF416C !important;
  border:none !important;
  height: 60px !important;
  padding: 0 30px !important;
}
.domains__hint{
  text-align:center;
  color:#fff;
  margin-top: 18px;
}

.diff--section{padding: 60px 0;}
.diff__title{
  color:#111827;
  font-size: 30px;
  font-weight: 900;
  margin: 0 0 24px 0;
}
.diff__item{
  margin-bottom: 18px;
  font-size: 16px;
}
.diff__item i{color:#22c55e; margin-right: 10px;}

.quote--section{
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 60px 0;
}


/* ============================
   Header + Navbar Harmony (Global)
   ============================ */
:root{
  --accent: #D74444;
  --accentSoft: rgba(215,68,68,.16);
  --bgGlass: rgba(14,14,18,.58);
  --textHi: #f2f4f8;
  --textLo: rgba(242,244,248,.78);
}

.header{
  position: relative;
  padding-bottom: 86px;
}
.header::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 520px at 50% 0%, rgba(215,68,68,.22), transparent 60%),
              linear-gradient(180deg, rgba(10,10,14,.62), rgba(10,10,14,.22));
  pointer-events:none;
}
.header > *{ position: relative; z-index: 1; }

.navbar.navbar-default{
  background: var(--bgGlass) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.navbar-fixed{
  background: rgba(12,12,16,.74) !important;
  border-top: 2px solid var(--accent) !important;
}

.navbar-brand img{
  max-height: 44px;
  width: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

.navbar-default .navbar-nav>li>a{
  color: var(--textLo) !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
  position: relative;
}
.navbar-default .navbar-nav>li>a:hover{
  color: var(--textHi) !important;
  transform: translateY(-1px);
}
.navbar-default .navbar-nav>li>a::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  opacity: .9;
}
.navbar-default .navbar-nav>li>a:hover::after{
  transform: scaleX(1);
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{
  color: var(--textHi) !important;
  background: var(--accentSoft) !important;
  border-radius: 10px;
}
.navbar-default .navbar-nav>.active>a::after{
  transform: scaleX(1);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.navbar-default .navbar-nav>li>a.nvbtn{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  color: var(--textHi) !important;
}
.navbar-default .navbar-nav>li>a.nvbtn:hover{
  background: rgba(255,255,255,.12) !important;
  transform: translateY(-1px);
}
.navbar-default .navbar-nav>li>a.nvbtn::after{ display:none; }

/* Header text/buttons */
.header .container h1,
.header .container h2{
  color: var(--textHi) !important;
}
.header .container h1 span{
  color: var(--accent) !important;
  text-shadow: 0 14px 30px rgba(215,68,68,.18);
}
.header .container .btn.btn-success{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--textHi) !important;
  border-radius: 12px !important;
}
.header .container .btn.btn-success:hover{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* === NAVBAR ALIGNMENT FIX (desktop) === */
@media (min-width: 768px){
  .navbar.navbar-default .container{
    display:flex;
    align-items:center;
  }
  .navbar-header{
    display:flex;
    align-items:center;
  }
  .navbar-brand{
    display:flex !important;
    align-items:center;
    height: 74px;
    padding: 0 14px !important;
  }
  .navbar-brand img{
    max-height: 32px !important;
    height: 32px !important;
  }
  .navbar-collapse{
    display:flex !important;
    align-items:center;
    flex: 1 1 auto;
  }
  .navbar-nav{
    display:flex;
    align-items:center;
  }
  .navbar-nav>li>a{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .navbar-nav.navbar-right{
    margin-left:auto;
  }
}


/* VPS - aweb inside extra box */
.aweb .why-box{margin-top: 28px; padding: 20px 18px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 14px 40px rgba(0,0,0,.35);}
.aweb .why-box h4{margin: 0 0 10px 0; font-size: 18px; font-weight: 800; color: #fff;}
.aweb .why-list{margin: 0; padding-left: 18px;}
.aweb .why-list li{margin: 6px 0;}


/* GLOBAL FAQ FIX (overlay pages) */
body.overlay .panel,
body.overlay .panel-default{
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
body.overlay .panel-heading{background: transparent; border: 0;}
body.overlay .panel-title a{
  display:block;
  padding: 14px 16px;
  color:#fff;
  font-weight: 700;
  text-decoration:none;
}
body.overlay .panel-title a:hover{color:#60a5fa;}
body.overlay .panel-body{
  color: rgba(255,255,255,.86);
  background: transparent;
}


/* FAQ accordion - fix white background in Bootstrap panels */
body.overlay .panel,
body.overlay .panel-group .panel{
  background: rgba(10,14,20,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
}
body.overlay .panel-collapse,
body.overlay .panel-collapse.collapse,
body.overlay .panel-collapse.collapsing,
body.overlay .panel-collapse.in{
  background: rgba(10,14,20,.55) !important;
}
body.overlay .panel-default > .panel-heading{
  background: transparent !important;
}
body.overlay .panel-default > .panel-heading + .panel-collapse > .panel-body{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
body.overlay .panel-body{
  background: rgba(10,14,20,.35) !important;
  color: rgba(255,255,255,.88) !important;
}