@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* ============================================================
SLine — site2 modern tema (v2)
main.minf9a1.css-dən SONRA yüklənir və köhnə dizaynı üstələyir.
Bütün genişliklər köhnə .container ilə eyni hizada saxlanılıb.
============================================================ */
:root {
--s2-primary: #5121B9;
--s2-primary-dark: #3d189c;
--s2-primary-light: #7C3AED;
--s2-accent: #22C55E;
--s2-grad: linear-gradient(135deg, #5121B9 0%, #7C3AED 60%, #9F5BFF 100%);
--s2-ink: #171233;
--s2-muted: #6B6685;
--s2-bg: #F4F2FB;
--s2-card: #FFFFFF;
--s2-border: #E8E5F5;
--s2-radius: 22px;
--s2-radius-sm: 14px;
--s2-shadow: 0 8px 30px rgba(23, 18, 51, .07);
--s2-shadow-lg: 0 22px 55px rgba(81, 33, 185, .18);
--s2-font: 'Lexend', 'Montserrat', 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
--s2-font-head: 'Montserrat', 'Lexend', Helvetica, Arial, sans-serif;
/* köhnə .container ölçüləri ilə eyni — hizalama üçün kritik */
--s2-container: 1200px;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--s2-font) !important;
background: var(--s2-bg) !important;
color: var(--s2-ink);
font-size: 16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--s2-primary); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfc8ea; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--s2-primary); }
/* Ortaq daxili konteyner ölçüsü — bütün bölümlər eyni hizada */
.s2-shell {
width: 100%;
max-width: var(--s2-container);
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 1560px) { :root { --s2-container: 1400px; } }
/* ============================================================
HEADER
============================================================ */
.s2-header {
position: sticky;
top: 0;
z-index: 1050;
background: rgba(255, 255, 255, .88);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--s2-border);
}
.s2-header__inner {
max-width: var(--s2-container);
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
gap: 26px;
}
.s2-header__logo img { height: 46px; display: block; }
.s2-nav {
display: flex;
align-items: center;
gap: 2px;
margin: 0 auto;
list-style: none;
padding: 0;
flex-wrap: nowrap; /* tək sətir — sığması üçün */
}
.s2-nav a {
display: inline-block;
padding: 9px 12px;
border-radius: 999px;
font-size: 14.5px;
font-weight: 600;
color: var(--s2-ink);
text-decoration: none !important;
transition: background .2s, color .2s;
white-space: nowrap;
}
.s2-nav a:hover,
.s2-nav a.is-active {
background: #EFEAFB;
color: var(--s2-primary);
}
.s2-header__cta {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--s2-grad);
color: #fff !important;
font-weight: 700;
font-size: 16px;
padding: 12px 26px;
border-radius: 999px;
text-decoration: none !important;
box-shadow: 0 10px 22px rgba(81, 33, 185, .3);
transition: transform .2s, box-shadow .2s;
white-space: nowrap;
}
.s2-header__cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(81, 33, 185, .42);
color: #fff;
}
/* Hamburger */
.s2-burger {
display: none;
width: 48px;
height: 48px;
border: 1px solid var(--s2-border);
border-radius: var(--s2-radius-sm);
background: #fff;
cursor: pointer;
position: relative;
flex: none;
}
.s2-burger span,
.s2-burger span::before,
.s2-burger span::after {
content: '';
position: absolute;
left: 50%;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--s2-ink);
transform: translateX(-50%);
transition: all .25s;
}
.s2-burger span { top: 50%; margin-top: -1px; }
.s2-burger span::before { top: -7px; }
.s2-burger span::after { top: 7px; }
.s2-burger.is-open span { background: transparent; }
.s2-burger.is-open span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.s2-burger.is-open span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }
/* 9 link + logo + CTA çox yer tutur — kifayət qədər genişlik yoxdursa
hamburger menyuya keç ki, linklər ikinci sətrə düşməsin. */
@media (max-width: 1300px) {
.s2-burger { display: block; margin-left: auto; }
.s2-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
background: #fff;
border-bottom: 1px solid var(--s2-border);
box-shadow: var(--s2-shadow-lg);
padding: 12px 16px 18px;
gap: 4px;
flex-wrap: nowrap;
}
.s2-nav.is-open { display: flex; }
.s2-nav a { border-radius: var(--s2-radius-sm); padding: 13px 16px; font-size: 16px; }
}
@media (max-width: 520px) {
.s2-header__inner { padding: 12px 16px; gap: 12px; }
.s2-header__cta { padding: 10px 18px; font-size: 15px; }
.s2-header__logo img { height: 36px; }
}
/* ============================================================
HERO / SLIDER — container ilə eyni hizada
============================================================ */
.main-slider { padding: 28px 0 8px; }
.main-slider .splide {
max-width: var(--s2-container);
margin: 0 auto;
padding: 0 24px;
}
.main-slider .splide__track { border-radius: var(--s2-radius); overflow: hidden; box-shadow: var(--s2-shadow); }
.main-slider .splide__slide,
.main-slider .splide__slide a { display: block; width: 100%; }
.main-slider .splide__slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 0;
}
.main-slider .splide__pagination__page { background: #cfc8ea; }
.main-slider .splide__pagination__page.is-active { background: var(--s2-primary); transform: scale(1.25); }
/* ============================================================
BÖLÜM / BAŞLIQLAR
============================================================ */
.packages,
.advantages,
.how-connect { padding: 70px 0; }
/* Üstünlüklər ilə Necə qoşulmaq arasındakı boş fon/boşluq ləğv edilir —
köhnə CSS böyük padding-top (8rem) və col margin-bottom (5rem) verir. */
.advantages { padding-bottom: 20px !important; }
.how-connect { padding-top: 20px !important; }
.container { padding-left: 24px; padding-right: 24px; }
.section-title,
.advantages__title,
.connect__title {
font-family: var(--s2-font) !important;
font-size: clamp(34px, 4vw, 48px) !important;
line-height: 1.15 !important;
font-weight: 800 !important;
color: var(--s2-ink) !important;
text-align: center;
letter-spacing: -.02em;
margin: 0 0 3rem !important;
position: relative;
padding-bottom: 22px;
text-transform: none;
width: auto !important; /* köhnə 24rem məhdudiyyətini ləğv et */
/* köhnə CSS başlığa gradient FON verir (color:transparent + gradient bg) →
arxadakı mor bant. Fonu tam ləğv et, mürəkkəb rəngi geri qaytar. */
background: none !important;
-webkit-text-fill-color: var(--s2-ink) !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
}
.section-title::after,
.advantages__title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 72px;
height: 5px;
border-radius: 5px;
background: var(--s2-grad);
}
/* ============================================================
PAKETLƏR — bölüm başlığı bloku (eyebrow + başlıq + alt mətn)
============================================================ */
.s2-packages-head {
text-align: center;
max-width: 720px;
margin: 0 auto 3.2rem;
}
.s2-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: #EFEAFB;
color: var(--s2-primary);
font-weight: 700;
font-size: 14px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 999px;
margin-bottom: 18px;
}
.s2-eyebrow i { font-size: 13px; color: var(--s2-primary-light); }
.s2-packages-head .section-title { margin: 0 0 16px !important; padding-bottom: 0; }
.s2-packages-head .section-title::after { display: none; }
.s2-packages-sub {
color: var(--s2-muted);
font-size: 17px;
line-height: 1.7;
margin: 0 auto;
max-width: 620px;
}
/* Tək "Tariflər" tab-ı lazımsızdır — gizlədilir */
.s2-hide-tabs { display: none !important; }
/* ============================================================
TAB-lar
============================================================ */
.packages .nav-tabs {
border: none !important;
justify-content: center;
gap: 10px;
margin-bottom: 3rem;
}
.packages .nav-tabs .nav-link {
border: 1px solid var(--s2-border) !important;
border-radius: 999px !important;
background: #fff;
color: var(--s2-muted) !important;
font-weight: 700;
font-size: 16px;
padding: 12px 30px;
}
.packages .nav-tabs .nav-item.active .nav-link,
.packages .nav-tabs .nav-link.active,
.packages .nav-tabs .nav-link:hover {
background: var(--s2-grad) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Sürət qrupu — üstdən və altdan aydın ayrıcı */
.s2-speed-group { margin-bottom: 4rem; padding-top: 1rem; }
.s2-speed-group + .s2-speed-group { border-top: 1px solid var(--s2-border); padding-top: 3rem; }
/* Sürət başlığı — mərkəzdə rozetka, iki yanında xətt (üstdə/altda bölük) */
.speed-header {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
font-size: 21px !important;
line-height: 1 !important;
font-weight: 500 !important;
color: var(--s2-primary) !important;
border: none !important;
padding: 0 !important;
margin: 0 auto 2.4rem !important;
max-width: 640px;
letter-spacing: -.01em;
cursor: default !important;
background: none !important;
}
/* soldan və sağdan ayrıcı xətlər */
.speed-header::before,
.speed-header::after {
content: '';
flex: 1;
height: 2px;
border-radius: 2px;
background: linear-gradient(to right, transparent, var(--s2-border));
}
.speed-header::after {
background: linear-gradient(to left, transparent, var(--s2-border));
}
/* ============================================================
PAKET (TARİF) KARTLARI — yenidən dizayn
============================================================ */
/* Tarif bölümü menü ilə tam eyni hizada — daxili Bootstrap boşluqlarını sıfırla */
.packages .container > .row,
.packages .tab-content,
.packages .tab-pane { padding-left: 0 !important; padding-right: 0 !important; }
.packages .container > .row > .col-lg-12 { padding-left: 0 !important; padding-right: 0 !important; }
.package__container-third {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem !important;
padding: 0 !important;
align-items: stretch;
width: 100%;
margin: 0 auto;
}
@media (max-width: 992px) {
.package__container-third { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 640px) {
.package__container-third { grid-template-columns: 1fr !important; gap: 1.4rem !important; }
}
.package {
background: var(--s2-card) !important;
border: 5px solid var(--s2-border) !important;
border-radius: var(--s2-radius) !important;
box-shadow: var(--s2-shadow) !important;
padding: 36px 28px 40px !important;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
overflow: hidden; /* Populyar lenti və üst zolağı kəsmək üçün */
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.package::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--s2-grad);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.package:hover {
transform: translateY(-8px);
box-shadow: var(--s2-shadow-lg) !important;
border-color: rgba(81, 33, 185, .4) !important;
}
.package:hover::before { transform: scaleX(1); }
/* Hər sürət sırasında orta kart (İnternet + TV) — tövsiyə olunan */
.package__container-third .package:nth-child(2) {
border-color: rgba(81, 33, 185, .35) !important;
box-shadow: 0 18px 45px rgba(81, 33, 185, .14) !important;
}
.package__container-third .package:nth-child(2)::before { transform: scaleX(1); }
.package__container-third .package:nth-child(2)::after {
content: 'Populyar';
position: absolute;
top: 16px;
right: -34px;
transform: rotate(45deg);
background: var(--s2-grad);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
padding: 5px 40px;
box-shadow: 0 4px 12px rgba(81, 33, 185, .3);
}
.package__title {
font-family: var(--s2-font) !important;
font-size: 18px !important;
line-height: 1.3 !important;
font-weight: 500 !important;
color: var(--s2-ink) !important;
margin: 0 0 10px !important;
letter-spacing: -.01em;
}
.package__speed {
display: inline-flex;
align-items: center;
gap: 7px;
background: #EFEAFB !important;
color: var(--s2-primary) !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 7px 16px !important;
border-radius: 999px;
margin: 2px 0 10px !important;
}
.package__speed::before {
content: '\f019'; /* download */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
/* Qiymət */
.package__container-third .package .package__price,
.package .package__price,
.package__price {
font-size: 20px !important;
font-weight: 600 !important;
color: var(--s2-primary) !important;
line-height: 1.2 !important;
margin: 18px 0 16px !important;
letter-spacing: 0;
}
.package__price b { font-weight: 500 !important; }
.package__price small {
font-size: 16px;
font-weight: 500;
color: var(--s2-muted);
letter-spacing: 0;
}
.package__btn {
display: block;
/* köhnə CSS düyməni position:absolute; bottom:0 edir → üst-üstə düşür.
statik axına qaytar. */
position: static !important;
transform: none !important;
left: auto !important;
bottom: auto !important;
width: 100%;
max-width: 240px; /* TV linkləri ilə eyni en */
box-sizing: border-box;
text-align: center;
background: var(--s2-grad) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 16px;
padding: 15px 24px !important;
border-radius: var(--s2-radius-sm) !important; /* kart kimi radius */
border: 5px solid rgba(81, 33, 185, .18) !important; /* 5px border */
text-decoration: none !important;
box-shadow: none !important; /* kölgə yalnız hover-də */
transition: box-shadow .2s, filter .2s, border-color .2s;
margin-top: 20px !important; /* yuxarıdakı düymələrlə aydın boşluq */
margin-bottom: 4px !important; /* alt kənarla boşluq */
cursor: pointer;
}
.package__btn:hover {
/* transform YOX — hover-də sağa getmir */
box-shadow: 0 12px 28px rgba(81, 33, 185, .38) !important; /* kölgə yalnız hover */
border-color: rgba(81, 33, 185, .35) !important;
filter: brightness(1.05);
color: #fff !important;
}
.package hr {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(81, 33, 185, .15), transparent);
width: 80% !important;
margin: 16px auto !important;
}
/* TV siyahı linkləri — kart kimi radius */
.tv-list-link {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
background: #F5F2FE;
color: var(--s2-primary);
font-weight: 600;
font-size: 14.5px;
padding: 12px 22px;
border: 1px solid var(--s2-border);
border-radius: var(--s2-radius-sm); /* kart kimi radius */
text-decoration: none !important;
transition: background .2s, border-color .2s, color .2s;
width: 100%;
max-width: 240px;
box-sizing: border-box;
}
.tv-list-link:hover {
/* transform YOX — hover-də sürüşmür */
background: var(--s2-primary);
border-color: var(--s2-primary);
color: #fff !important;
}
.tv-links-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 12px; /* linklər arası boşluq */
margin: 14px 0 8px;
}
/* ============================================================
ÜSTÜNLÜKLƏR + NECƏ QOŞULMAQ — tək çizgili ikonlar
============================================================ */
.advantages .item,
.how-connect .item {
background: var(--s2-card);
border: 1.5px solid var(--s2-border);
border-radius: var(--s2-radius);
box-shadow: var(--s2-shadow);
padding: 28px !important;
display: flex;
gap: 22px;
align-items: center;
height: auto; /* məzmun qədər — artıq uzanmır */
transition: transform .25s, box-shadow .25s;
}
.advantages .item:hover,
.how-connect .item:hover {
transform: translateY(-5px);
box-shadow: var(--s2-shadow-lg);
}
/* İkon lövhəsi — dolu SVG-lər gizlədilir, yerinə FA5 Pro `far`
(tək çizgi / içi boş / outline) ikonlar qoyulur. */
.advantages .item__img {
flex: none;
width: 76px;
height: 76px;
border-radius: 20px;
background: #EFEAFB;
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
}
/* dolu şəkilli ikonları və onları saran -nı gizlə
(yalnız 4-cü kartda img içindədir — o da flex yer tuturdu, ikonu sola itirdi) */
.advantages .item__img img,
.advantages .item__img a { display: none !important; }
/* line-style (tək çizgi, içi boş) ikonlar — inline SVG (stroke, fill yox).
Heç bir icon-font/lisenziyadan asılı deyil, həmişə görünür. */
.advantages .item__img::before {
content: '';
width: 38px;
height: 38px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* markup sırası: 1 Haqqımızda(info), 2 Fərqli tariflər(list), 3 Yüksək sürət(gauge), 4 Yüksək xidmət(headset) */
.advantages .row > div:nth-child(2) .item__img::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235121B9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='8' r='0.6' fill='%235121B9'/%3E%3C/svg%3E");
}
.advantages .row > div:nth-child(3) .item__img::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235121B9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='6' x2='20' y2='6'/%3E%3Cline x1='9' y1='12' x2='20' y2='12'/%3E%3Cline x1='9' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='4.5' cy='6' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='18' r='1.2'/%3E%3C/svg%3E");
}
.advantages .row > div:nth-child(4) .item__img::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235121B9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15a9 9 0 0 1 18 0'/%3E%3Cline x1='12' y1='15' x2='16' y2='10'/%3E%3Ccircle cx='12' cy='15' r='1.3'/%3E%3C/svg%3E");
}
.advantages .row > div:nth-child(5) .item__img::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235121B9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12a7 7 0 0 1 14 0'/%3E%3Crect x='3' y='12' width='3.5' height='6' rx='1.75'/%3E%3Crect x='17.5' y='12' width='3.5' height='6' rx='1.75'/%3E%3Cpath d='M19 18v1a3 3 0 0 1-3 3h-2.5'/%3E%3C/svg%3E");
}
.how-connect .item__count {
flex: none !important;
width: auto !important; /* köhnə 30% eni ləğv */
display: flex;
align-items: center;
justify-content: center;
}
.how-connect .item__count span {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 18px;
background: var(--s2-grad) !important;
/* köhnə CSS rəqəmi görünməz edir (text-fill:transparent + clip:text) →
ağ rəqəmi geri qaytar */
color: #fff !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
font-size: 24px;
line-height: 1 !important;
font-weight: 800;
box-shadow: 0 10px 22px rgba(81, 33, 185, .3);
flex: none;
}
/* köhnə vektor arxa-fon ::before-u ləğv et */
.how-connect .item__count span::before { display: none !important; content: none !important; }
/* DİQQƏT: köhnə CSS html{font-size:62.5%} qoyur (1rem=10px),
ona görə bu bölümdə px istifadə olunur ki ölçülər düzgün olsun. */
.advantages .item__title,
.how-connect .item__title {
font-family: var(--s2-font) !important;
font-size: 22px !important;
line-height: 1.3 !important;
font-weight: 500 !important;
color: var(--s2-ink) !important;
margin-bottom: 12px !important;
}
.advantages .item p,
.how-connect .item p {
color: var(--s2-muted) !important;
font-size: 17px !important;
line-height: 1.65 !important;
margin: 0 !important;
}
.how-connect .item p a { color: var(--s2-primary); font-weight: 700; }
/* Üstünlüklər / Necə qoşulmaq — menü ilə tam eyni hizada.
Köhnə CSS .advantages .row-a 12rem yan padding verir → sıfırlanır.
Bootstrap .row/.col daxili boşluqlarını da sıfırla, aralığı grid gap ilə ver. */
.advantages .row,
.how-connect .row {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
margin: 0 !important;
padding: 0 !important;
align-items: start; /* kartlar yalnız məzmun qədər hündür olsun, uzanmasın */
}
.advantages .row > .col-lg-12,
.how-connect .row > .col-lg-12 { grid-column: 1 / -1; }
.advantages .row > [class*="col-"],
.how-connect .row > [class*="col-"] {
max-width: 100%;
flex: none;
padding-left: 0;
padding-right: 0;
}
.advantages .item,
.how-connect .item { margin-bottom: 0; height: 100%; }
@media (max-width: 768px) {
.advantages .row,
.how-connect .row { grid-template-columns: 1fr; gap: 18px; }
}
.line { display: none; }
/* ============================================================
FORMLAR
============================================================ */
.form-control,
.form-controls,
select.form-control,
textarea.form-control {
border: 1.5px solid var(--s2-border) !important;
border-radius: var(--s2-radius-sm) !important;
padding: 13px 17px !important;
height: auto !important;
font-size: 16px;
background: #fff !important;
color: var(--s2-ink) !important;
transition: border-color .2s, box-shadow .2s;
}
.form-control:focus,
.form-controls:focus {
border-color: var(--s2-primary) !important;
box-shadow: 0 0 0 4px rgba(81, 33, 185, .12) !important;
outline: none;
}
.form-group label { font-weight: 700; color: var(--s2-ink); font-size: 15px; }
.input-group-text {
border: 1.5px solid var(--s2-border) !important;
border-radius: var(--s2-radius-sm) 0 0 var(--s2-radius-sm) !important;
background: #F5F2FE !important;
color: var(--s2-primary) !important;
font-weight: 700;
}
.card {
border: 1.5px solid var(--s2-border) !important;
border-radius: var(--s2-radius) !important;
box-shadow: var(--s2-shadow) !important;
overflow: hidden;
}
button.package__btn,
input[type="submit"].package__btn { -webkit-appearance: none; }
.payment-logo-circle {
border: 1.5px solid var(--s2-border) !important;
box-shadow: var(--s2-shadow) !important;
transition: transform .2s, box-shadow .2s;
}
.payment-link:hover .payment-logo-circle { transform: translateY(-5px); box-shadow: var(--s2-shadow-lg) !important; }
/* ============================================================
MODALLAR
============================================================ */
.modal-content {
border-radius: var(--s2-radius) !important;
border: none !important;
box-shadow: 0 24px 60px rgba(23, 18, 51, .3) !important;
overflow: hidden;
}
.modal-header {
background: var(--s2-grad) !important;
color: #fff;
border-bottom: none !important;
padding: 20px 28px !important;
}
.modal-header .modal-title { font-weight: 800; }
.modal-header .close { color: #fff; opacity: .85; text-shadow: none; outline: none; }
.modal-header .close:hover { opacity: 1; }
.modal-body { background: #FDFCFF; }
/* ============================================================
FOOTER
============================================================ */
.s2-footer {
margin-top: 72px;
background: linear-gradient(160deg, #1B1140 0%, #2A1668 55%, #3d189c 100%);
color: #CFC8EA;
padding: 64px 0 0;
}
.s2-footer__inner {
max-width: var(--s2-container);
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 44px;
}
@media (max-width: 900px) { .s2-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .s2-footer__inner { grid-template-columns: 1fr; gap: 30px; } }
.s2-footer__brand img { height: 46px; margin-bottom: 18px; }
.s2-footer__brand p { font-size: 15px; line-height: 1.75; color: #A79ED0; max-width: 320px; }
.s2-footer h5 {
color: #fff;
font-size: 15px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 20px;
}
.s2-footer__col a {
display: block;
color: #CFC8EA;
font-size: 15px;
padding: 6px 0;
text-decoration: none !important;
transition: color .2s, transform .2s;
}
.s2-footer__col a:hover { color: #fff; transform: translateX(5px); }
.s2-footer__contact a {
display: flex;
align-items: center;
gap: 11px;
color: #fff !important;
font-weight: 700;
font-size: 15.5px;
padding: 7px 0;
text-decoration: none !important;
}
.s2-footer__contact i { color: #9F5BFF; width: 18px; text-align: center; }
.s2-footer__social { display: flex; gap: 11px; margin-top: 16px; }
.s2-footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: rgba(255, 255, 255, .08);
color: #fff !important;
font-size: 19px;
text-decoration: none !important;
transition: background .2s, transform .2s;
}
.s2-footer__social a:hover { background: var(--s2-primary-light); transform: translateY(-3px); }
.s2-footer__bottom {
margin-top: 48px;
border-top: 1px solid rgba(255, 255, 255, .1);
padding: 22px 24px;
text-align: center;
font-size: 13.5px;
color: #A79ED0;
}
/* WhatsApp düyməsi */
.fixedBtn {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1100;
width: 62px;
height: 62px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
transition: transform .2s;
}
.fixedBtn:hover { transform: scale(1.08); }
.fixedBtn img { width: 32px; height: 32px; }
/* ============================================================
SƏHİFƏYƏ ÖZƏL TƏNZİMLƏMƏLƏR — campaigns.php / package.php / pay.php
Məzmun yazıları 15px, başlıqlar 26px, düymələr 10px outline border.
Yalnız bu bölmələrə (.campaigns / .connect / .packages) tətbiq olunur.
============================================================ */
/* --- Başlıqlar: 26px --- */
.campaigns .card-title,
.campaigns h2, .campaigns h3, .campaigns h4, .campaigns h5,
.connect .connect__title,
.connect h2, .connect h4,
.packages .connect__title,
.packages .section-title,
.advantages .advantages__title,
.how-connect .advantages__title {
font-family: var(--s2-font-head) !important;
font-size: 26px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
/* --- Məzmun yazıları: 15px --- */
.campaigns .card-text,
.campaigns p,
.campaigns .date-item,
.connect p,
.connect label,
.connect .form-control,
.connect .form-controls,
.connect .input-group-text,
.packages p,
.packages label,
.packages .form-control {
font-size: 15px !important;
line-height: 1.6 !important;
}
/* --- Düymələr: 10px outline border ---
QEYD: "Qoşulmaq" (.package__btn) düymələri sadə saxlanılır — outline YOX.
Outline yalnız form/əməliyyat düymələrinə (.button / .check_pay / .btn). */
.campaigns .button,
.campaigns .btn,
.connect .button,
.connect .check_pay,
.connect .btn,
.packages .button,
.packages .btn {
outline: 10px solid rgba(81, 33, 185, .25) !important;
outline-offset: 0 !important;
border: none !important;
margin: 12px !important; /* 10px outline üçün yer */
transition: outline-color .2s, transform .2s !important;
}
.campaigns .button:hover,
.connect .check_pay:hover,
.connect .button:hover,
.packages .button:hover {
outline-color: rgba(81, 33, 185, .4) !important;
}
/* ============================================================
CONNECT (package.php?q=...) — qoşulma formu təkmilləşdirmə
============================================================ */
.connect { padding: 48px 0 64px; }
.connect .connect__top,
.connect .connect__bottom {
max-width: 100%; /* sol tərəfdən — mərkəzləşdirmə yox */
margin: 0;
}
/* Nömrəli başlıq — modern rozetka */
.connect .connect__title {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--s2-font-head) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--s2-ink) !important;
-webkit-text-fill-color: var(--s2-ink) !important;
background: none !important;
margin-bottom: 24px !important;
}
.connect .connect__title span {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: none;
border: none !important;
border-radius: 12px;
background: var(--s2-grad) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 800 !important;
padding: 0 !important;
box-shadow: 0 8px 18px rgba(81, 33, 185, .28);
}
/* Tarif dropdown + inputlar bir kart içində */
.connect .connect__bottom { margin-top: 8px; }
.connect .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.connect .form-row .form-group { padding: 0; max-width: 100%; flex: none; margin: 0; }
.connect .form-row .form-group.col-md-7 { grid-column: 1 / -1; }
.connect .form-group label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: var(--s2-ink);
}
.connect .form-control {
width: 100%;
border: 1.5px solid var(--s2-border) !important;
border-radius: var(--s2-radius-sm) !important;
padding: 13px 16px !important;
height: auto !important;
background: #fff !important;
color: var(--s2-ink) !important;
}
/* Tarif dropdown — genişlədilmiş, tam en.
Konteynerlər də tam en olmalıdır ki select genişlənə bilsin. */
.connect__top,
.connect__top > div,
.connect .form-group,
.connect .form-group:first-child { max-width: 100% !important; width: 100%; }
/* Orijinal