/* =========================================================
PRODUCTS DROPDOWN — MEGA GRID + COLOR + INTERACTION (FINAL)
Dosya: /products.dropdown.css
Hedef HTML:
.dropdown.dropdown--products > .products-menu > a.product-card
========================================================= */
/* Parent konumlandırma */
.nav-item.has-dropdown{ position: relative; }
/* Dropdown kutusu */
.nav-item.has-dropdown > .dropdown.dropdown--products{
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
z-index: 99999;
display: none;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
/* =========================================
DROPDOWN OPEN STATE (JS controlled)
========================================= */
.nav-item.has-dropdown > .dropdown{
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity .25s ease, transform .25s ease;
}
.nav-item.has-dropdown.is-open > .dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* ================= PANEL (MEGA MENU) ================= */
.dropdown.dropdown--products .products-menu{
width: min(980px, calc(100vw - 32px));
padding: 18px;
border-radius: 24px;
background:
radial-gradient(1200px 420px at 20% 0%, rgba(111,99,255,.18), transparent 55%),
radial-gradient(900px 420px at 80% 10%, rgba(31,182,255,.14), transparent 55%),
rgba(10, 14, 30, .62);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 30px 80px rgba(0,0,0,.55);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
position: relative;
overflow: hidden;
}
/* Panel overlay (en altta kalacak) */
.dropdown.dropdown--products .products-menu::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(transparent, rgba(255,255,255,.03)),
radial-gradient(800px 300px at 50% -20%, rgba(255,255,255,.06), transparent 60%);
opacity:.7;
z-index: 0;
}
/* ================= KART (TILE) ================= */
.dropdown.dropdown--products .products-menu > a.product-card{
position: relative !important;
z-index: 1; /* panel overlay üstü */
overflow: hidden !important;
display: grid !important;
align-content: end !important;
gap: 10px !important;
min-height: 172px;
padding: 18px !important;
border-radius: 20px !important;
text-decoration: none !important;
color: rgba(255,255,255,.92) !important;
white-space: normal !important;
background:
radial-gradient(520px 220px at 15% 15%, rgba(255,255,255,.10), transparent 55%),
radial-gradient(520px 260px at 80% 30%, rgba(111,99,255,.14), transparent 60%),
rgba(12, 14, 26, .72) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 14px 34px rgba(0,0,0,.40) !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
filter .18s ease;
will-change: transform;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
outline: none;
}
/* Kart içi çok hafif grid/pattern */
.dropdown.dropdown--products .products-menu > a.product-card::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 56px 56px;
opacity: .10;
transform: skewX(-10deg);
z-index: 1;
}
/* ================= ALT RENK BAR (ASIL İSTEDİĞİN) ================= */
.dropdown.dropdown--products .products-menu > a.product-card::after{
content:"";
position:absolute;
left: 18px;
right: 18px;
bottom: 14px;
height: 4px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(111,99,255,0),
rgba(111,99,255,.85),
rgba(31,182,255,.85),
rgba(31,182,255,0)
);
box-shadow: 0 10px 22px rgba(111,99,255,.22);
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
pointer-events:none;
z-index: 3; /* en üst */
}
/* Hover / Focus / Active -> bar görünsün */
.dropdown.dropdown--products .products-menu > a.product-card:hover::after,
.dropdown.dropdown--products .products-menu > a.product-card:focus::after,
.dropdown.dropdown--products .products-menu > a.product-card:focus-visible::after,
.dropdown.dropdown--products .products-menu > a.product-card:active::after{
opacity: 1;
transform: translateY(0);
}
/* Hover: kart kalksın + glow */
.dropdown.dropdown--products .products-menu > a.product-card:hover{
transform: translateY(-3px);
border-color: rgba(111,99,255,.45) !important;
box-shadow:
0 26px 70px rgba(0,0,0,.52),
0 0 0 6px rgba(111,99,255,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
filter: saturate(1.05);
}
/* Mobil press */
.dropdown.dropdown--products .products-menu > a.product-card:active{
transform: translateY(1px) scale(.985);
}
/* İlk kart “featured” */
.dropdown.dropdown--products .products-menu > a.product-card:first-child{
background:
radial-gradient(520px 260px at 20% 10%, rgba(111,99,255,.26), transparent 60%),
radial-gradient(520px 280px at 90% 40%, rgba(31,182,255,.18), transparent 62%),
rgba(12, 14, 26, .74) !important;
border-color: rgba(111,99,255,.24) !important;
}
/* ================= İKON ================= */
.product-card .pc-ico{
width: 44px;
height: 44px;
border-radius: 16px;
display:grid;
place-items:center;
margin-bottom: auto;
border: 1px solid rgba(255,255,255,.16);
background:
radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06));
color: rgba(245,245,255,.96);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
/* İkon hover’da parlasın */
.dropdown.dropdown--products .products-menu > a.product-card:hover .pc-ico,
.dropdown.dropdown--products .products-menu > a.product-card:active .pc-ico,
.dropdown.dropdown--products .products-menu > a.product-card:focus .pc-ico{
border-color: rgba(111,99,255,.35);
box-shadow: 0 0 0 6px rgba(111,99,255,.10), inset 0 1px 0 rgba(255,255,255,.10);
}
/* ================= METİN (YAZILAR TOK OLSUN) ================= */
.product-card .pc-txt{ display:flex; flex-direction:column; gap: 6px; }
.product-card .pc-title{
font-weight: 900;
font-size: 20px;
letter-spacing: -0.02em;
color: rgba(255,255,255,.96);
}
.product-card .pc-sub{
font-size: 14px;
font-weight: 650;
line-height: 1.35;
color: rgba(255,255,255,.74);
}
/* ================= MOBİL ================= */
@media (max-width: 900px){
.nav-item.has-dropdown > .dropdown.dropdown--products{
left: 12px;
right: 12px;
transform: none;
}
.dropdown.dropdown--products .products-menu{
width: auto;
grid-template-columns: 1fr;
}
.dropdown.dropdown--products .products-menu > a.product-card{
min-height: 92px;
align-content: center !important;
}
}
/* =========================================================
DEBUG (SADECE TEST)
Eğer hâlâ barı göremiyorsan 1 dakika için aç:
.dropdown.dropdown--products .products-menu > a.product-card::after{ opacity:1 !important; transform:none !important; }
Sonra geri sil.
========================================================= */
/* =========================================================
FINAL INTERACTION (iPad/Safari uyumlu)
- Tap/press ile kart hareket
- Tap/press ile alt bar görünür
========================================================= */
/* kart dokunma hissi */
.dropdown.dropdown--products .products-menu > a.product-card{
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* alt bar default kapalı */
.dropdown.dropdown--products .products-menu > a.product-card::after{
content:"";
position:absolute;
left: 18px;
right: 18px;
bottom: 14px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(111,99,255,0), rgba(111,99,255,.85), rgba(31,182,255,.85), rgba(31,182,255,0));
box-shadow: 0 10px 22px rgba(111,99,255,.22);
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
pointer-events:none;
z-index: 5;
}
/* DESKTOP (hover varsa): göster */
@media (hover:hover){
.dropdown.dropdown--products .products-menu > a.product-card:hover{
transform: translateY(-3px);
}
.dropdown.dropdown--products .products-menu > a.product-card:hover::after{
opacity: 1;
transform: translateY(0);
}
}
/* MOBİL / iPad: TAP sırasında göster */
.dropdown.dropdown--products .products-menu > a.product-card:active{
transform: translateY(1px) scale(.985);
}
.dropdown.dropdown--products .products-menu > a.product-card:active::after{
opacity: 1;
transform: translateY(0);
}
/* iOS bazen :active çok kısa sürer, bu yüzden focus ile de göster */
.dropdown.dropdown--products .products-menu > a.product-card:focus::after,
.dropdown.dropdown--products .products-menu > a.product-card:focus-visible::after{
opacity: 1;
transform: translateY(0);
}
/* focus outline istemiyorsan */
.dropdown.dropdown--products .products-menu > a.product-card:focus{
outline: none;
}
/* =========================================================
TAP SELECT (kalıcı aktif kart)
========================================================= */
.dropdown.dropdown--products .products-menu > a.product-card.is-active{
transform: translateY(-2px);
border-color: rgba(111,99,255,.45) !important;
box-shadow:
0 22px 60px rgba(0,0,0,.48),
0 0 0 6px rgba(111,99,255,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Alt bar sadece seçilince (kalıcı) */
.dropdown.dropdown--products .products-menu > a.product-card::after{
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
}
.dropdown.dropdown--products .products-menu > a.product-card.is-active::after{
opacity: 1;
transform: translateY(0);
}
/* Eğer bar tanımı yoksa */
.dropdown.dropdown--products .products-menu > a.product-card::after{
content:"";
position:absolute;
left:18px; right:18px; bottom:14px;
height:4px; border-radius:999px;
background: linear-gradient(90deg, rgba(111,99,255,0), rgba(111,99,255,.85), rgba(31,182,255,.85), rgba(31,182,255,0));
box-shadow: 0 10px 22px rgba(111,99,255,.22);
pointer-events:none;
z-index: 5;
}
/* =========================================================
ACTIVE CARD FEEL (seçili kart vurgusu + hareket)
========================================================= */
.dropdown.dropdown--products .products-menu > a.product-card{
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
}
/* Seçili kart: hafif yukarı + glow */
.dropdown.dropdown--products .products-menu > a.product-card.is-active{
transform: translateY(-2px) !important;
border-color: rgba(111,99,255,.45) !important;
box-shadow:
0 22px 60px rgba(0,0,0,.48),
0 0 0 6px rgba(111,99,255,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
filter: saturate(1.06);
}
/* Basılı tutunca (press) */
.dropdown.dropdown--products .products-menu > a.product-card:active{
transform: translateY(1px) scale(.985) !important;
}
/* =========================================================
DROPDOWN STICKY HOVER FIX (gap kapanmasın)
- display yerine opacity/visibility
- 120ms gecikme + hover bridge
========================================================= */
/* dropdown artık her zaman var, sadece görünmez */
.nav-item.has-dropdown > .dropdown.dropdown--products{
display: block !important;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(8px);
pointer-events: none;
transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
/* SADECE .is-open olduğunda görünür */
.nav-item.has-dropdown.is-open > .dropdown.dropdown--products{
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
transition: opacity .14s ease, transform .14s ease, visibility 0s;
}
/* Menü butonu ile dropdown arasında görünmez köprü (gap’i kapatır) */
.nav-item.has-dropdown > .dropdown.dropdown--products::before{
content:"";
position:absolute;
left: 0;
right: 0;
top: -18px; /* aradaki boşluğu kapat */
height: 18px;
}
/* ================= MOBILE FIX =================
- Hover YOK
- Sadece .is-open ile açılır
- X transform kaldırıldı
============================================== */
@media (max-width: 900px){
.nav-item.has-dropdown > .dropdown.dropdown--products{
transform: translateY(8px);
}
.nav-item.has-dropdown.is-open > .dropdown.dropdown--products{
transform: translateY(0);
}
}
/* =========================================================
PRODUCT CARDS — FILL / DEPTH (Eita-like)
Dosya: products.dropdown.css (en alt)
========================================================= */
.dropdown.dropdown--products .products-menu > a.product-card{
position: relative !important;
overflow: hidden !important;
/* kartın kendi iç zemini (boş hissini bitirir) */
background:
radial-gradient(120% 120% at 18% 22%, rgba(111,99,255,.22), rgba(0,0,0,0) 58%),
radial-gradient(120% 120% at 86% 40%, rgba(31,182,255,.16), rgba(0,0,0,0) 55%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -10px 30px rgba(0,0,0,.35),
0 18px 50px rgba(0,0,0,.35) !important;
}
/* very subtle grid overlay */
.dropdown.dropdown--products .products-menu > a.product-card::before{
content:"" !important;
position:absolute !important;
inset: 0 !important;
pointer-events:none !important;
opacity: .22 !important;
background:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 34px 34px, 34px 34px;
transform: translateZ(0);
}
/* hover / aktifte iç glow artsın */
.dropdown.dropdown--products .products-menu > a.product-card:hover,
.dropdown.dropdown--products .products-menu > a.product-card.is-active{
border-color: rgba(111,99,255,.40) !important;
box-shadow:
0 28px 70px rgba(0,0,0,.50),
0 0 0 6px rgba(111,99,255,.10),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -18px 40px rgba(0,0,0,.30) !important;
}
/* ikon kutusu daha “premium” */
.dropdown.dropdown--products .products-menu > a.product-card .pc-ico{
background:
radial-gradient(120% 120% at 25% 25%, rgba(255,255,255,.16), rgba(255,255,255,.06)) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 14px 34px rgba(0,0,0,.35) !important;
}
/* başlık biraz daha net, alt yazı daha okunur */
.dropdown.dropdown--products .products-menu > a.product-card .pc-title{
color: rgba(255,255,255,.96) !important;
text-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-sub{
color: rgba(255,255,255,.72) !important;
}
/* motion */
.dropdown.dropdown--products .products-menu > a.product-card{
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease !important;
}
.dropdown.dropdown--products .products-menu > a.product-card:hover{
transform: translateY(-3px) !important;
filter: saturate(1.08);
}
.dropdown.dropdown--products .products-menu > a.product-card:active{
transform: translateY(1px) scale(.985) !important;
}
/* =========================================================
STRONGER FILL (Premium spotlight + active glow)
========================================================= */
/* 1) Kart içi spotlight güçlendir */
.dropdown.dropdown--products .products-menu > a.product-card{
background:
radial-gradient(140% 120% at 14% 18%, rgba(111,99,255,.42), rgba(111,99,255,0) 58%),
radial-gradient(130% 120% at 88% 34%, rgba(31,182,255,.28), rgba(31,182,255,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)) !important;
border-color: rgba(255,255,255,.12) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
inset 0 -22px 50px rgba(0,0,0,.42),
0 22px 60px rgba(0,0,0,.40) !important;
}
/* 2) Grid’i incelt (daha az “kutu kutu”) */
.dropdown.dropdown--products .products-menu > a.product-card::before{
opacity: .12 !important; /* eski .22 yerine */
background-size: 44px 44px, 44px 44px !important;
}
/* 3) Seçili karta net glow ring */
.dropdown.dropdown--products .products-menu > a.product-card.is-active{
border-color: rgba(111,99,255,.55) !important;
box-shadow:
0 30px 80px rgba(0,0,0,.52),
0 0 0 2px rgba(111,99,255,.35),
0 0 0 10px rgba(111,99,255,.10),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 -26px 60px rgba(0,0,0,.35) !important;
}
/* 4) İkon biraz daha canlı */
.dropdown.dropdown--products .products-menu > a.product-card .pc-ico{
background:
radial-gradient(120% 120% at 25% 25%, rgba(255,255,255,.20), rgba(255,255,255,.06)) !important;
border-color: rgba(255,255,255,.18) !important;
}
/* =========================================================
PRODUCTS DROPDOWN — EITA MODE (strong override)
En alta yapıştır (products.dropdown.css)
========================================================= */
/* Paneli biraz daha “Eita” gibi dikdörtgen + net cam */
.dropdown.dropdown--products .products-menu{
width: min(1040px, calc(100vw - 48px)) !important;
padding: 22px !important;
border-radius: 26px !important;
background: rgba(7, 10, 18, .72) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 40px 120px rgba(0,0,0,.62) !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
}
/* Kart: Eita gibi daha koyu + daha kontrast + daha “dolu” */
.dropdown.dropdown--products .products-menu > a.product-card{
position: relative !important;
overflow: hidden !important;
min-height: 220px !important;
padding: 26px 22px 22px !important;
border-radius: 22px !important;
/* Eita tarzı: koyu zemin + mor/mavi spotlight */
background:
radial-gradient(140% 120% at 18% 18%, rgba(140,120,255,.34), rgba(0,0,0,0) 58%),
radial-gradient(140% 120% at 85% 35%, rgba(34,211,238,.22), rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 -26px 70px rgba(0,0,0,.55),
0 22px 60px rgba(0,0,0,.44) !important;
/* layout */
display: block !important;
text-decoration: none !important;
}
/* Grid overlay: Eita gibi net ama çok bağırmasın */
.dropdown.dropdown--products .products-menu > a.product-card::before{
content:"" !important;
position:absolute !important;
inset: 0 !important;
pointer-events:none !important;
opacity: .18 !important;
background:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(135deg, rgba(255,255,255,.05), transparent 55%) !important;
background-size: 44px 44px, 44px 44px, auto !important;
}
/* Eita’nın “bottom glow line” hissi */
.dropdown.dropdown--products .products-menu > a.product-card::after{
content:"" !important;
position:absolute !important;
left: 18px !important;
right: 18px !important;
bottom: 16px !important;
height: 6px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, rgba(140,120,255,.9), rgba(34,211,238,.9)) !important;
opacity: 0 !important;
transform: translateY(6px) !important;
transition: opacity .18s ease, transform .18s ease !important;
}
/* Hover/Active: lift + glow + çizgi gelsin */
.dropdown.dropdown--products .products-menu > a.product-card:hover,
.dropdown.dropdown--products .products-menu > a.product-card.is-active{
transform: translateY(-3px) !important;
border-color: rgba(140,120,255,.40) !important;
box-shadow:
0 34px 90px rgba(0,0,0,.58),
0 0 0 10px rgba(140,120,255,.10),
inset 0 1px 0 rgba(255,255,255,.07),
inset 0 -30px 80px rgba(0,0,0,.45) !important;
}
.dropdown.dropdown--products .products-menu > a.product-card:hover::after,
.dropdown.dropdown--products .products-menu > a.product-card.is-active::after{
opacity: 1 !important;
transform: translateY(0) !important;
}
/* iPad press */
.dropdown.dropdown--products .products-menu > a.product-card:active{
transform: translateY(1px) scale(.99) !important;
}
/* İkon: Eita gibi sol-üstte sabitle */
.dropdown.dropdown--products .products-menu > a.product-card .pc-ico{
position: absolute !important;
top: 18px !important;
left: 18px !important;
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
display:grid !important;
place-items:center !important;
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.14) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
font-size: 18px !important;
color: rgba(210,190,255,.95) !important;
}
/* Metin bloğu: ikon için üstten pay bırak */
.dropdown.dropdown--products .products-menu > a.product-card .pc-txt{
display:block !important;
padding-top: 62px !important;
}
/* Başlık/alt yazı: Eita hissi (daha net) */
.dropdown.dropdown--products .products-menu > a.product-card .pc-title{
display:block !important;
font-size: 30px !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
color: rgba(255,255,255,.96) !important;
margin-bottom: 10px !important;
text-shadow: 0 18px 40px rgba(0,0,0,.60) !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-sub{
display:block !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: rgba(255,255,255,.62) !important;
max-width: 18ch !important; /* Eita gibi daha kısa blok */
}
/* Mobil: 1 kolon */
@media (max-width: 900px){
.dropdown.dropdown--products .products-menu{
grid-template-columns: 1fr !important;
}
.dropdown.dropdown--products .products-menu > a.product-card{
min-height: 170px !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-title{
font-size: 26px !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-sub{
font-size: 16px !important;
}
}
/* =========================================================
PRODUCTS DROPDOWN — SIZE + ICON COLOR PATCH
(EITA MODE altına ekle)
========================================================= */
/* Paneli küçült (Kurumsal ile aynı hissiyat) */
.dropdown.dropdown--products .products-menu{
width: min(820px, calc(100vw - 56px)) !important;
padding: 16px !important;
border-radius: 22px !important;
gap: 14px !important;
}
/* Kartları biraz küçült */
.dropdown.dropdown--products .products-menu > a.product-card{
min-height: 170px !important;
padding: 20px 18px 18px !important;
border-radius: 18px !important;
}
/* Metin/ikon spacing küçült */
.dropdown.dropdown--products .products-menu > a.product-card .pc-txt{
padding-top: 54px !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-title{
font-size: 24px !important;
margin-bottom: 8px !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-sub{
font-size: 15px !important;
}
/* İkon kutusu biraz küçülsün */
.dropdown.dropdown--products .products-menu > a.product-card .pc-ico{
width: 42px !important;
height: 42px !important;
border-radius: 13px !important;
font-size: 18px !important;
/* daha “dolu” ikon kutusu */
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.16) !important;
}
/* =========================================================
PRODUCTS DROPDOWN — SAFE MODE (JS is-open controlled)
========================================================= */
/* Varsayılan kapalı */
.nav-item.has-dropdown > .dropdown.dropdown--products{
display: none;
}
/* SADECE JS is-open eklerse aç */
.nav-item.has-dropdown.is-open > .dropdown.dropdown--products{
display: block;
}
/* =========================================================
PRODUCT CARD — BASE (izole)
========================================================= */
.dropdown.dropdown--products .products-menu{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
padding: 22px;
}
.dropdown.dropdown--products .product-card{
position: relative;
display: flex;
gap: 14px;
padding: 18px 20px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(120,120,255,.12), rgba(34,211,238,.10));
border: 1px solid rgba(255,255,255,.10);
text-decoration: none;
color: #fff;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dropdown.dropdown--products .product-card:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.22);
box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
/* =========================================================
ICON BASE (renksiz, güvenli)
========================================================= */
.dropdown.dropdown--products .pc-ico{
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 18px;
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
flex-shrink: 0;
}
/* =========================================================
ICON MODULE COLORS (SADECE PRODUCTS)
========================================================= */
/* MUSIC */
.dropdown.dropdown--products .product-card[data-mod="music"] .pc-ico{
color: #c8b0ff;
border-color: rgba(140,120,255,.45);
box-shadow: 0 0 0 4px rgba(140,120,255,.14);
}
/* VISUAL */
.dropdown.dropdown--products .product-card[data-mod="visual"] .pc-ico{
color: #ff9edc;
border-color: rgba(255,120,200,.40);
box-shadow: 0 0 0 4px rgba(255,120,200,.12);
}
/* VIDEO */
.dropdown.dropdown--products .product-card[data-mod="video"] .pc-ico{
color: #8cf0ff;
border-color: rgba(34,211,238,.45);
box-shadow: 0 0 0 4px rgba(34,211,238,.14);
}
/* =========================================================
TEXT
========================================================= */
.dropdown.dropdown--products .pc-title{
font-weight: 700;
font-size: 18px;
}
.dropdown.dropdown--products .pc-sub{
font-size: 14px;
opacity: .75;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px){
.dropdown.dropdown--products .products-menu{
grid-template-columns: 1fr;
}
}
/* =========================================================
OVERRIDE: is-open sadece kendi dropdown’unu açsın
========================================================= */
/* Varsayılan: tüm dropdown'lar kapalı */
.aivo-topbar .nav-item.has-dropdown > .dropdown{
display: none;
}
/* Ürünler açıldıysa sadece ürün dropdown aç */
.aivo-topbar .nav-item.has-dropdown.is-open > .dropdown.dropdown--products{
display: block;
}
/* Kurumsal açıldıysa sadece kurumsal dropdown aç */
.aivo-topbar .nav-item.has-dropdown.is-open > .dropdown:not(.dropdown--products){
display: block;
}
/* =========================================================
PRODUCTS DROPDOWN — SIZE + ICON COLOR PATCH
(EITA MODE altına ekle)
========================================================= */
/* Paneli küçült (Kurumsal ile aynı hissiyat) */
.dropdown.dropdown--products .products-menu{
width: min(820px, calc(100vw - 56px)) !important;
padding: 16px !important;
border-radius: 22px !important;
gap: 14px !important;
}
/* Kartları biraz küçült */
.dropdown.dropdown--products .products-menu > a.product-card{
min-height: 170px !important;
padding: 20px 18px 18px !important;
border-radius: 18px !important;
}
/* Metin/ikon spacing küçült */
.dropdown.dropdown--products .products-menu > a.product-card .pc-txt{
padding-top: 54px !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-title{
font-size: 24px !important;
margin-bottom: 8px !important;
}
.dropdown.dropdown--products .products-menu > a.product-card .pc-sub{
font-size: 15px !important;
}
/* İkon kutusu biraz küçülsün */
.dropdown.dropdown--products .products-menu > a.product-card .pc-ico{
width: 42px !important;
height: 42px !important;
border-radius: 13px !important;
font-size: 18px !important;
/* daha “dolu” ikon kutusu */
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.16) !important;
}
/* -----------------------------------------
İkonlara modül rengi
HTML'e 1 satır ekleyeceğiz:
...
...
...
------------------------------------------ */
/* MUSIC (mor) */
.dropdown.dropdown--products .products-menu > a.product-card[data-mod="music"] .pc-ico{
color: rgba(200,170,255,.98) !important;
box-shadow:
0 0 0 4px rgba(140,120,255,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
border-color: rgba(140,120,255,.35) !important;
}
/* VISUAL (pembe/mor) */
.dropdown.dropdown--products .products-menu > a.product-card[data-mod="visual"] .pc-ico{
color: rgba(255,160,220,.98) !important;
box-shadow:
0 0 0 4px rgba(255,120,200,.10),
inset 0 1px 0 rgba(255,255,255,.08) !important;
border-color: rgba(255,120,200,.32) !important;
}
/* VIDEO (turkuaz) */
.dropdown.dropdown--products .products-menu > a.product-card[data-mod="video"] .pc-ico{
color: rgba(140,240,255,.98) !important;
box-shadow:
0 0 0 4px rgba(34,211,238,.12),
inset 0 1px 0 rgba(255,255,255,.08) !important;
border-color: rgba(34,211,238,.34) !important;
}
/* Mobilde de dengeli kalsın */
@media (max-width: 900px){
.dropdown.dropdown--products .products-menu{
width: min(560px, calc(100vw - 32px)) !important;
}
}
/* =========================================================
PRODUCTS DROPDOWN — FINAL PATCH (A1 + B2)
- Çizgi metinden ayrılır (alt slot)
- Kartlar kompaktlaşır (padding/gap)
- Sadece products dropdown alanını etkiler
========================================================= */
.dropdown.dropdown--products{
/* (hafif) panel daha derli toplu */
max-width: 980px;
}
.dropdown.dropdown--products .products-menu{
/* kartlar biraz daha sıkı */
gap: 12px !important;
}
/* Kart: kompakt + alt slot ayır */
.dropdown.dropdown--products a.product-card{
position: relative !important;
padding: 16px 16px 22px !important; /* alt: çizgi slotu */
border-radius: 18px !important;
min-height: 170px !important; /* bir tık küçült */
overflow: hidden !important;
}
/* Metin bloğu: çizgiye asla değmesin */
.dropdown.dropdown--products a.product-card .pc-txt{
display: block !important;
}
.dropdown.dropdown--products a.product-card .pc-title{
margin: 0 0 8px !important;
}
.dropdown.dropdown--products a.product-card .pc-sub{
margin: 0 !important;
line-height: 1.35 !important;
padding-bottom: 10px !important; /* metin ile çizgi arasında nefes */
}
/* Aktif çizgi: EN ALTTA, metinden bağımsız (A1) */
.dropdown.dropdown--products a.product-card::after{
content: "" !important;
position: absolute !important;
left: 16px !important;
right: 16px !important;
bottom: 12px !important; /* kartın alt slotu */
height: 6px !important;
border-radius: 999px !important;
/* default kapalı */
opacity: 0 !important;
transform: scaleX(.55) !important;
transform-origin: left center !important;
/* renk: genel gradyan (data-mod renkleri sende varsa onlar yine kazanır) */
background: linear-gradient(90deg, rgba(111,99,255,.95), rgba(31,182,255,.95)) !important;
transition: opacity .18s ease, transform .18s ease !important;
pointer-events: none !important;
}
/* Sadece aktifte çizgi görünsün */
.dropdown.dropdown--products a.product-card.is-active::after{
opacity: .95 !important;
transform: scaleX(1) !important;
}
/* İkon kutusu da biraz kompakt */
.dropdown.dropdown--products a.product-card .pc-ico{
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
}
/* Responsive: dar ekranda kartlar daha rahat sığsın */
@media (max-width: 980px){
.dropdown.dropdown--products{
max-width: 92vw !important;
}
.dropdown.dropdown--products a.product-card{
min-height: 160px !important;
}
}
/* =========================================================
CORP DROPDOWN — COMPACT (5 item)
- Daha ufak kartlar, daha sıkı boşluk
- Ürünler dropdown ile uyumlu premium görünüm
========================================================= */
.dropdown.dropdown--corp{
min-width: 300px;
max-width: 360px; /* 5 madde için ideal */
padding: 10px;
}
/* Liste */
.dropdown.dropdown--corp .nav-dropdown{
display: grid;
gap: 10px;
}
/* Item: daha küçük “pill-card” */
.dropdown.dropdown--corp .nav-dropdown a{
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 14px 14px 16px; /* kompakt */
border-radius: 16px;
font-weight: 800;
font-size: 16px; /* ürünlerden biraz küçük */
line-height: 1.1;
color: rgba(245,245,255,.92);
text-decoration: none;
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
border: 1px solid rgba(255,255,255,.07);
transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
/* Sol nokta */
.dropdown.dropdown--corp .nav-dropdown a::before{
content:"";
width: 7px;
height: 7px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(111,99,255,.95), rgba(31,182,255,.85));
opacity: .75;
flex: 0 0 auto;
}
/* Hover */
.dropdown.dropdown--corp .nav-dropdown a:hover{
background: linear-gradient(180deg, rgba(111,99,255,.10), rgba(31,182,255,.05));
border-color: rgba(111,99,255,.28);
transform: translateX(2px);
}
/* Mobilde daha da dar olsun */
@media (max-width: 520px){
.dropdown.dropdown--corp{
min-width: min(92vw, 360px);
max-width: 92vw;
}
.dropdown.dropdown--corp .nav-dropdown a{
font-size: 15px;
padding: 13px 13px 13px 15px;
border-radius: 15px;
}
}
/* =========================================================
CORP DROPDOWN — COMPACT FINAL (MUST BE LAST)
Not: products.dropdown.css en son yüklendiği için burada olmalı
========================================================= */
.dropdown.dropdown--corp{
min-width: 300px !important;
max-width: 360px !important;
padding: 10px !important;
}
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp{
display: grid !important;
gap: 10px !important;
}
/* Linkler */
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp > a{
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 14px !important; /* küçült */
border-radius: 16px !important;
font-size: 15px !important; /* küçült */
line-height: 1.1 !important;
font-weight: 800 !important;
background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
border: 1px solid rgba(255,255,255,.07) !important;
color: rgba(245,245,255,.92) !important;
text-decoration: none !important;
transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
}
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp > a::before{
content:"" !important;
width: 7px !important;
height: 7px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, rgba(111,99,255,.95), rgba(31,182,255,.85)) !important;
opacity: .75 !important;
flex: 0 0 auto !important;
}
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp > a:hover{
background: linear-gradient(180deg, rgba(111,99,255,.10), rgba(31,182,255,.05)) !important;
border-color: rgba(111,99,255,.28) !important;
transform: translateX(2px) !important;
}
/* ===== CORP — HARD COMPACT (ABSOLUTE LAST) ===== */
.dropdown.dropdown--corp{
width: min(360px, calc(100vw - 32px)) !important; /* KRİTİK: width ekledik */
min-width: 0 !important;
max-width: none !important;
padding: 8px !important;
}
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp{
gap: 8px !important;
}
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp > a{
padding: 10px 12px !important;
border-radius: 14px !important;
font-size: 14px !important;
}
.dropdown.dropdown--corp .nav-dropdown.nav-dropdown--corp > a::before{
width: 6px !important;
height: 6px !important;
}
/* =========================================================
CORP DROPDOWN (CARD STYLE) — Ürünler ile aynı dil
Bunu products.dropdown.css DOSYASININ EN ALTINA EKLE
========================================================= */
.dropdown.dropdown--corp{
/* panel */
width: min(720px, calc(100vw - 32px));
padding: 12px;
}
/* 2 sütun grid (5 madde: 2+2+1) */
.corp-menu{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* Kart */
.corp-card{
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
border-radius: 18px;
background:
radial-gradient(120% 140% at 0% 0%,
rgba(120, 90, 255, 0.16),
rgba(10, 14, 35, 0.82));
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
0 18px 45px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.corp-card:hover{
transform: translateY(-1px);
border-color: rgba(135, 205, 255, 0.22);
box-shadow:
0 22px 60px rgba(0,0,0,.40),
inset 0 1px 0 rgba(255,255,255,.08);
}
/* İkon kutusu (Ürünler gibi) */
.cc-ico{
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
font-size: 18px;
line-height: 1;
color: rgba(175, 210, 255, .95);
}
/* Metin */
.cc-txt{
display: flex;
flex-direction: column;
min-width: 0;
}
.cc-title{
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
color: rgba(255,255,255,.95);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cc-sub{
margin-top: 4px;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,.58);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mobil: tek sütun */
@media (max-width: 560px){
.dropdown.dropdown--corp{
width: min(420px, calc(100vw - 24px));
padding: 10px;
}
.corp-menu{
grid-template-columns: 1fr;
gap: 10px;
}
.cc-ico{
width: 42px;
height: 42px;
border-radius: 13px;
}
}
/* Desktop/Mouse: üstüne gelince otomatik aç (Products + Corp)
Sadece hover destekleyen cihazlarda çalışır */
@media (hover: hover) and (pointer: fine){
#navProducts:hover > .dropdown.dropdown--products{
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
#navCorp:hover > .dropdown.dropdown--corp{
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
}
/* Hover alanını genişlet: button -> dropdown’a geçerken kapanmasın */
@media (hover: hover) and (pointer: fine){
#navCorp:hover,
#navCorp:hover > .dropdown.dropdown--corp,
#navCorp > .dropdown.dropdown--corp:hover{
/* açık kalsın */
}
#navCorp:hover > .dropdown.dropdown--corp{
display:block;
opacity:1;
visibility:visible;
pointer-events:auto;
transform: translateX(-50%) translateY(0);
}
}
/* =========================================================
CORP DROPDOWN — CLEAN BASE (SADECE DAVRANIŞ + GÜVENLİ EFEKT)
- Ölçü / font / min-height / width yok
- Görsel tasarımı EN ALTTAKİ FINAL BLOK yönetecek
========================================================= */
/* Konum: (mevcut sisteminle uyumlu) */
.nav-item.has-dropdown > .dropdown.dropdown--corp{
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
z-index: 99999;
}
/* Varsayılan kapalı */
.nav-item.has-dropdown > .dropdown{
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
/* SADECE JS .is-open açsın */
.nav-item.has-dropdown.is-open > .dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Varsayılan gizli (eğer başka yerde zaten varsa sorun olmaz) */
.nav-item.has-dropdown > .dropdown.dropdown--corp{
display: none;
}
/* Kart hover alt çizgi efekti (premium hissi) — ÖLÇÜSÜZ, güvenli */
.dropdown.dropdown--corp .corp-menu > a.corp-card::after{
content:"";
position:absolute;
left: 14px;
right: 14px;
bottom: 12px;
height: 6px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(111,99,255,0),
rgba(111,99,255,.75),
rgba(31,182,255,.75),
rgba(31,182,255,0)
);
opacity: 0;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease;
pointer-events:none;
z-index: 2;
}
.dropdown.dropdown--corp .corp-menu > a.corp-card:hover::after{
opacity: 1;
transform: translateY(0);
}
/* Mobilde hover yoksa: (is-open ile açılmaya devam eder) */
@media (hover: none){
.nav-item.has-dropdown:hover > .dropdown.dropdown--corp{
display: none;
}
}
/* =========================================================
CORP DROPDOWN — FINAL (COMPACT + PREMIUM)
- Tek kaynak: Kurumsal ile ilgili başka override bırakma
========================================================= */
.nav-item.has-dropdown > .dropdown.dropdown--corp{
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
z-index: 99999;
}
/* Panel (kompakt) */
.dropdown.dropdown--corp .corp-menu{
width: min(860px, calc(100vw - 32px));
padding: 14px;
border-radius: 22px;
background:
radial-gradient(900px 360px at 20% 0%, rgba(111, 99, 255, .22), transparent 62%),
radial-gradient(900px 360px at 80% 0%, rgba(31, 182, 255, .18), transparent 60%),
rgba(10, 12, 20, .78);
border: 1px solid rgba(255,255,255,.10);
box-shadow:
0 26px 70px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Grid (kompakt) */
.dropdown.dropdown--corp .corp-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Kart (kompakt) */
.dropdown.dropdown--corp .corp-card{
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 12px;
padding: 14px 14px;
min-height: 88px;
border-radius: 18px;
text-decoration: none;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
box-shadow:
0 10px 26px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.06);
position: relative;
overflow: hidden;
transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* Alt glow + premium efekt */
.dropdown.dropdown--corp .corp-card::after{
content:"";
position:absolute;
left: 14px;
right: 14px;
bottom: -18px;
height: 40px;
background: radial-gradient(closest-side, rgba(111,99,255,.20), rgba(31,182,255,.12), transparent 70%);
filter: blur(10px);
opacity: .85;
pointer-events: none;
}
/* Hover */
.dropdown.dropdown--corp .corp-card:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.055);
border-color: rgba(255,255,255,.16);
box-shadow:
0 16px 36px rgba(0,0,0,.40),
inset 0 1px 0 rgba(255,255,255,.08);
}
.dropdown.dropdown--corp .corp-ico{
width: 48px;
height: 48px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dropdown.dropdown--corp .corp-title{
font-size: 17px;
line-height: 1.15;
font-weight: 750;
letter-spacing: .2px;
color: rgba(255,255,255,.96);
}
.dropdown.dropdown--corp .corp-sub{
margin-top: 4px;
font-size: 13px;
line-height: 1.25;
color: rgba(255,255,255,.62);
}
/* Son kart: 2 sütun kaplasın + biraz daha yüksek */
.dropdown.dropdown--corp .corp-card.is-wide{
grid-column: 1 / -1;
min-height: 92px;
}
/* Responsive */
@media (max-width: 780px){
.dropdown.dropdown--corp .corp-menu{
width: min(520px, calc(100vw - 24px));
padding: 12px;
border-radius: 20px;
}
.dropdown.dropdown--corp .corp-grid{
grid-template-columns: 1fr;
gap: 10px;
}
.dropdown.dropdown--corp .corp-card{
min-height: 84px;
padding: 12px;
grid-template-columns: 46px 1fr;
}
.dropdown.dropdown--corp .corp-ico{
width: 46px;
height: 46px;
border-radius: 14px;
}
}
/* =========================================================
CORP DROPDOWN — COMPACT + PRODUCTS-LIKE EFFECT (HARD OVERRIDE)
- Kurumsal küçülür
- Ürünler ile aynı hover/underline hissi
- Yukarıdaki büyük blokları ezmek için kritik yerlerde !important
========================================================= */
.dropdown.dropdown--corp .corp-menu{
width: min(760px, calc(100vw - 32px)) !important;
padding: 12px !important;
border-radius: 20px !important;
}
.dropdown.dropdown--corp .corp-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* Kart ölçüsü (küçük) + premium hover */
.dropdown.dropdown--corp a.corp-card{
display: grid !important;
grid-template-columns: 44px 1fr !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 12px !important;
min-height: 76px !important;
border-radius: 16px !important;
position: relative !important;
overflow: hidden !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow:
0 10px 24px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.06) !important;
transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.dropdown.dropdown--corp a.corp-card:hover{
transform: translateY(-1px) !important;
background: rgba(255,255,255,.055) !important;
border-color: rgba(255,255,255,.16) !important;
box-shadow:
0 16px 36px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* ÜRÜNLERDEKİ GİBİ underline bar (hover ile görünür) */
.dropdown.dropdown--corp a.corp-card::after{
content:"" !important;
position:absolute !important;
left: 14px !important;
right: 14px !important;
bottom: 12px !important;
height: 6px !important;
border-radius: 999px !important;
background: linear-gradient(
90deg,
rgba(111,99,255,0),
rgba(111,99,255,.85),
rgba(31,182,255,.85),
rgba(31,182,255,0)
) !important;
opacity: 0 !important;
transform: translateY(6px) !important;
transition: opacity .18s ease, transform .18s ease !important;
pointer-events:none !important;
}
.dropdown.dropdown--corp a.corp-card:hover::after{
opacity: 1 !important;
transform: translateY(0) !important;
}
/* İkon kutusu küçült + ürünler gibi “soft” */
.dropdown.dropdown--corp .corp-ico{
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* Yazılar küçült */
.dropdown.dropdown--corp .corp-title{
font-size: 16px !important;
line-height: 1.15 !important;
font-weight: 750 !important;
letter-spacing: .2px !important;
}
.dropdown.dropdown--corp .corp-sub{
margin-top: 4px !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
color: rgba(255,255,255,.62) !important;
}
/* İletişim: 2 sütun kaplasın ama yükseklik şişmesin */
.dropdown.dropdown--corp a.corp-card.is-wide{
grid-column: 1 / -1 !important;
min-height: 78px !important;
}
/* Mobil: tek sütun + daha da kompakt */
@media (max-width: 780px){
.dropdown.dropdown--corp .corp-menu{
width: min(520px, calc(100vw - 24px)) !important;
padding: 10px !important;
border-radius: 18px !important;
}
.dropdown.dropdown--corp .corp-grid{
grid-template-columns: 1fr !important;
gap: 9px !important;
}
.dropdown.dropdown--corp a.corp-card{
min-height: 72px !important;
padding: 11px !important;
grid-template-columns: 42px 1fr !important;
}
.dropdown.dropdown--corp .corp-ico{
width: 42px !important;
height: 42px !important;
}
}
/* =========================================================
CORP DROPDOWN — EFFECT MATCH + WIDE CARD FILL BOTTOM
(append at very bottom)
========================================================= */
/* Grid: son satır esnesin, alttaki boşluğu doldursun */
.dropdown.dropdown--corp .corp-grid{
grid-template-rows: auto auto 1fr !important; /* 1. satır, 2. satır, 3. satır = kalan alan */
align-items: stretch !important;
}
/* İletişim kartı: 2 sütun + son satırı doldur */
.dropdown.dropdown--corp a.corp-card.is-wide{
grid-column: 1 / -1 !important;
grid-row: 3 !important; /* 3. satıra sabitle */
align-self: stretch !important; /* kalan yüksekliği doldur */
min-height: 0 !important; /* 1fr çalışsın diye */
}
/* =========================================================
EFFECT: Ürünler ile aynı hissiyat (glow + bar birlikte)
========================================================= */
/* Kartın içine yumuşak bir “shine” katmanı */
.dropdown.dropdown--corp a.corp-card::before{
content:"" !important;
position:absolute !important;
inset: 0 !important;
background:
radial-gradient(420px 160px at 18% 0%, rgba(111,99,255,.22), transparent 65%),
radial-gradient(420px 160px at 82% 0%, rgba(31,182,255,.16), transparent 62%) !important;
opacity: .55 !important;
pointer-events:none !important;
z-index: 0 !important;
}
/* İçerik üstte kalsın */
.dropdown.dropdown--corp a.corp-card > *{
position: relative !important;
z-index: 1 !important;
}
/* Underline bar: ürünlerdeki gibi net + hover’da belirgin */
.dropdown.dropdown--corp a.corp-card::after{
content:"" !important;
position:absolute !important;
left: 14px !important;
right: 14px !important;
bottom: 12px !important;
height: 6px !important;
border-radius: 999px !important;
background: linear-gradient(
90deg,
rgba(111,99,255,0),
rgba(111,99,255,.90),
rgba(31,182,255,.90),
rgba(31,182,255,0)
) !important;
opacity: .30 !important; /* normalde hafif görünür */
transform: translateY(6px) !important;
filter: blur(.0px) !important;
transition: opacity .18s ease, transform .18s ease !important;
pointer-events:none !important;
z-index: 2 !important;
}
.dropdown.dropdown--corp a.corp-card:hover::after{
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Touch/click hissi: ürünlerdeki gibi “press” */
.dropdown.dropdown--corp a.corp-card:active{
transform: translateY(0) scale(.995) !important;
}
/* =========================================================
EFFECT: Ürünler ile aynı hissiyat (glow + bar birlikte)
========================================================= */
/* Kartın içine yumuşak bir “shine” katmanı */
.dropdown.dropdown--corp a.corp-card::before{
content:"" !important;
position:absolute !important;
inset: 0 !important;
background:
radial-gradient(420px 160px at 18% 0%, rgba(111,99,255,.22), transparent 65%),
radial-gradient(420px 160px at 82% 0%, rgba(31,182,255,.16), transparent 62%) !important;
opacity: .55 !important;
pointer-events:none !important;
z-index: 0 !important;
}
/* İçerik üstte kalsın */
.dropdown.dropdown--corp a.corp-card > *{
position: relative !important;
z-index: 1 !important;
}
/* Underline bar: ürünlerdeki gibi net + hover’da belirgin */
.dropdown.dropdown--corp a.corp-card::after{
content:"" !important;
position:absolute !important;
left: 14px !important;
right: 14px !important;
bottom: 12px !important;
height: 6px !important;
border-radius: 999px !important;
background: linear-gradient(
90deg,
rgba(111,99,255,0),
rgba(111,99,255,.90),
rgba(31,182,255,.90),
rgba(31,182,255,0)
) !important;
opacity: .30 !important; /* normalde hafif görünür */
transform: translateY(6px) !important;
filter: blur(.0px) !important;
transition: opacity .18s ease, transform .18s ease !important;
pointer-events:none !important;
z-index: 2 !important;
}
.dropdown.dropdown--corp a.corp-card:hover::after{
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Touch/click hissi: ürünlerdeki gibi “press” */
.dropdown.dropdown--corp a.corp-card:active{
transform: translateY(0) scale(.995) !important;
}
/* =========================================================
CORP DROPDOWN — GRID FIX (cc-* HTML UYUMLU)
- 2 kolon garanti
- Kart boyutu/typography stabil
========================================================= */
.dropdown.dropdown--corp .corp-menu{
width: min(760px, calc(100vw - 32px)) !important;
padding: 12px !important;
border-radius: 20px !important;
}
/* ✅ 2 kolon garanti */
.dropdown.dropdown--corp .corp-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
/* Kart */
.dropdown.dropdown--corp a.corp-card{
display: grid !important;
grid-template-columns: 48px 1fr !important;
align-items: center !important;
gap: 12px !important;
padding: 14px !important;
min-height: 84px !important;
border-radius: 18px !important;
text-decoration: none !important;
overflow: hidden !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
/* İkon kutusu */
.dropdown.dropdown--corp .cc-ico{
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
/* Metin */
.dropdown.dropdown--corp .cc-title{
font-size: 16px !important;
font-weight: 750 !important;
line-height: 1.15 !important;
color: rgba(255,255,255,.96) !important;
/* ❌ kırpılmasın */
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.dropdown.dropdown--corp .cc-sub{
margin-top: 4px !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
color: rgba(255,255,255,.62) !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Mobil */
@media (max-width: 780px){
.dropdown.dropdown--corp .corp-grid{
grid-template-columns: 1fr !important;
}
}
/* =========================================================
CORP — SAĞDAKİ BOŞ PANELİ BİTİR (GRID FULL WIDTH FORCE)
- Sorun HTML değil: .corp-grid paneli doldurmuyor
========================================================= */
.dropdown.dropdown--corp .corp-menu{
display: block !important; /* eski flex denemelerini iptal */
align-items: unset !important;
justify-content: unset !important;
}
.dropdown.dropdown--corp .corp-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important; /* ✅ kritik */
max-width: 100% !important;
justify-items: stretch !important; /* ✅ kritik */
align-items: stretch !important;
}
.dropdown.dropdown--corp a.corp-card{
width: 100% !important; /* ✅ kritik */
max-width: none !important; /* sabit max-width varsa iptal */
justify-self: stretch !important;
}
/* =========================================================
CORP ICON COLORS — SOFT + PREMIUM
========================================================= */
/* Ortak ikon kutusu (zaten var ama güçlendiriyoruz) */
.dropdown.dropdown--corp .cc-ico{
font-size: 20px; /* emoji boyutu */
color: #fff;
transition:
background .25s ease,
box-shadow .25s ease,
transform .2s ease;
}
/* ====== RENK TEMALARI ====== */
/* Hakkımızda — mor */
.dropdown.dropdown--corp a[href="#hakkimizda"] .cc-ico{
background: rgba(139,92,246,.18);
box-shadow: 0 0 0 1px rgba(139,92,246,.35) inset;
}
/* Özellikler — mavi */
.dropdown.dropdown--corp a[href="#ozellikler"] .cc-ico{
background: rgba(34,211,238,.18);
box-shadow: 0 0 0 1px rgba(34,211,238,.35) inset;
}
/* Gizlilik — yeşil */
.dropdown.dropdown--corp a[href="#gizlilik"] .cc-ico{
background: rgba(34,197,94,.18);
box-shadow: 0 0 0 1px rgba(34,197,94,.35) inset;
}
/* Mesafeli Satış — amber */
.dropdown.dropdown--corp a[href="#mesafeli-satis"] .cc-ico{
background: rgba(245,158,11,.18);
box-shadow: 0 0 0 1px rgba(245,158,11,.35) inset;
}
/* İletişim — cyan */
.dropdown.dropdown--corp a[href="#iletisim"] .cc-ico{
background: rgba(14,165,233,.18);
box-shadow: 0 0 0 1px rgba(14,165,233,.35) inset;
}
/* Destek Merkezi — kırmızı/pink */
.dropdown.dropdown--corp a[href="#destek"] .cc-ico{
background: rgba(244,63,94,.18);
box-shadow: 0 0 0 1px rgba(244,63,94,.35) inset;
}
/* ====== HOVER CANLANMA ====== */
.dropdown.dropdown--corp a.corp-card:hover .cc-ico{
transform: scale(1.05);
box-shadow:
0 0 18px currentColor,
0 0 0 1px rgba(255,255,255,.35) inset;
}
/* =========================================================
CORP ICON — RENK GÖRÜNSÜN (emoji beyaz kalabilir)
========================================================= */
.dropdown.dropdown--corp .cc-ico{
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
/* emoji beyaz kalsın */
color: rgba(255,255,255,.95) !important;
/* renklerin görünmesi için daha güçlü arka plan + glow */
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.14) !important;
transition: transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease !important;
}
/* Renk temaları: background + glow güçlendirildi */
.dropdown.dropdown--corp a[href="#hakkimizda"] .cc-ico{
background: radial-gradient(120% 120% at 30% 20%, rgba(139,92,246,.55), rgba(139,92,246,.14)) !important;
border-color: rgba(139,92,246,.40) !important;
box-shadow: 0 10px 24px rgba(139,92,246,.22) !important;
}
.dropdown.dropdown--corp a[href="#ozellikler"] .cc-ico{
background: radial-gradient(120% 120% at 30% 20%, rgba(34,211,238,.55), rgba(34,211,238,.14)) !important;
border-color: rgba(34,211,238,.40) !important;
box-shadow: 0 10px 24px rgba(34,211,238,.18) !important;
}
.dropdown.dropdown--corp a[href="#gizlilik"] .cc-ico{
background: radial-gradient(120% 120% at 30% 20%, rgba(34,197,94,.52), rgba(34,197,94,.14)) !important;
border-color: rgba(34,197,94,.38) !important;
box-shadow: 0 10px 24px rgba(34,197,94,.16) !important;
}
.dropdown.dropdown--corp a[href="#mesafeli-satis"] .cc-ico{
background: radial-gradient(120% 120% at 30% 20%, rgba(245,158,11,.52), rgba(245,158,11,.14)) !important;
border-color: rgba(245,158,11,.38) !important;
box-shadow: 0 10px 24px rgba(245,158,11,.16) !important;
}
.dropdown.dropdown--corp a[href="#iletisim"] .cc-ico{
background: radial-gradient(120% 120% at 30% 20%, rgba(14,165,233,.52), rgba(14,165,233,.14)) !important;
border-color: rgba(14,165,233,.38) !important;
box-shadow: 0 10px 24px rgba(14,165,233,.16) !important;
}
.dropdown.dropdown--corp a[href="#destek"] .cc-ico{
background: radial-gradient(120% 120% at 30% 20%, rgba(244,63,94,.52), rgba(244,63,94,.14)) !important;
border-color: rgba(244,63,94,.38) !important;
box-shadow: 0 10px 24px rgba(244,63,94,.16) !important;
}
/* Hover */
.dropdown.dropdown--corp a.corp-card:hover .cc-ico{
transform: scale(1.06) !important;
box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
}
/* =========================================================
DROPDOWN HOVER BRIDGE (Kurumsal kapanma sorunu)
========================================================= */
/* dropdown ile buton arasındaki boşluğu köprüle */
.nav-item.has-dropdown{
position: relative;
}
/* dropdown'u biraz yukarı alıp boşluğu sıfırla (14px gibi offset varsa azalt) */
.nav-item.has-dropdown > .dropdown{
top: calc(100% + 8px) !important; /* 14px -> 8px */
}
/* görünmez köprü alanı: mouse butondan menüye inerken hover düşmesin */
.nav-item.has-dropdown::after{
content:"";
position:absolute;
left: -20px;
right: -20px;
top: 100%;
height: 18px; /* köprü yüksekliği */
background: transparent;
}
/* =========================================================
FIX: Dropdown içi kartlar tıklanabilir olsun
(Kurumsal + Ürünler dropdown)
========================================================= */
/* Dropdown kapalıyken tıklamayı kapat */
.nav-item.has-dropdown > .dropdown {
pointer-events: none;
}
/* Hover veya açıkken dropdown aktif olsun */
.nav-item.has-dropdown:hover > .dropdown,
.nav-item.has-dropdown.is-open > .dropdown {
pointer-events: auto;
}
/* Kurumsal dropdown + içindeki TÜM elemanlar tıklanabilir */
.dropdown.dropdown--corp,
.dropdown.dropdown--corp * {
pointer-events: auto !important;
}
/* Ürünler dropdown için de garanti altına al */
.dropdown.dropdown--products,
.dropdown.dropdown--products * {
pointer-events: auto !important;
}
/* Cam / blur overlay (pseudo-element) varsa tıklamayı YEMESİN */
.dropdown::before,
.dropdown::after {
pointer-events: none !important;
}
/* Z-index garanti (üstte dursun) */
.dropdown {
position: absolute;
z-index: 99999;
}
/* =========================================================
CORP DROPDOWN — SINGLE SOURCE (Studio + Vitrin)
- Kurumsal menü her yerde aynı görünsün
- HTML: .dropdown.dropdown--corp > .corp-menu > a.corp-item
========================================================= */
/* Container konumu (topbar altında) */
.nav-item.has-dropdown > .dropdown.dropdown--corp{
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%);
z-index: 99999;
}
/* Açılma (hover veya JS .is-open) */
.nav-item.has-dropdown:hover > .dropdown.dropdown--corp,
.nav-item.has-dropdown.is-open > .dropdown.dropdown--corp{
display: block;
}
/* Panel */
.dropdown.dropdown--corp .corp-menu{
width: min(980px, calc(100vw - 32px));
padding: 18px;
border-radius: 24px;
background:
radial-gradient(1200px 420px at 20% 0%, rgba(111,99,255,.22), transparent 60%),
radial-gradient(1000px 420px at 80% 0%, rgba(31,182,255,.18), transparent 60%),
rgba(20,22,40,.88);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 30px 90px rgba(0,0,0,.55);
backdrop-filter: blur(16px);
}
/* Grid kart düzeni (2 kolon, altta 3. satır vs.) */
.dropdown.dropdown--corp .corp-menu{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
/* Kart */
.dropdown.dropdown--corp .corp-item{
display: flex;
align-items: center;
gap: 14px;
padding: 18px;
border-radius: 18px;
text-decoration: none;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.dropdown.dropdown--corp .corp-item:hover{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.14);
transform: translateY(-1px);
}
/* Başlık */
.dropdown.dropdown--corp .corp-title{
display: block;
color: rgba(255,255,255,.92);
font-weight: 700;
font-size: 16px;
letter-spacing: .01em;
}
/* Mobilde tek kolon */
@media (max-width: 720px){
.dropdown.dropdown--corp .corp-menu{
grid-template-columns: 1fr;
}
}
/* =========================================================
CORP DROPDOWN — GLOBAL COMPACT (VITRIN + STUDIO)
Tek kaynak: products.dropdown.css en altına
========================================================= */
/* Panel genel ölçü */
.nav-item#navCorp .dropdown.dropdown--corp .corp-menu{
width: min(760px, calc(100vw - 28px)) !important;
padding: 10px !important;
border-radius: 18px !important;
}
/* Grid sıkı */
.nav-item#navCorp .dropdown.dropdown--corp .corp-grid{
gap: 10px !important;
}
/* Kartlar */
.nav-item#navCorp .dropdown.dropdown--corp a.corp-card{
min-height: 64px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
}
/* Icon kutusu */
.nav-item#navCorp .dropdown.dropdown--corp .cc-ico{
width: 34px !important;
height: 34px !important;
font-size: 16px !important;
border-radius: 12px !important;
}
/* Yazılar */
.nav-item#navCorp .dropdown.dropdown--corp .cc-title{ font-size: 14px !important; }
.nav-item#navCorp .dropdown.dropdown--corp .cc-sub { font-size: 11.5px !important; opacity: .85 !important; }
/* =========================================================
CORP DROPDOWN — tighter / smaller (FINAL OVERRIDE)
(append to products.dropdown.css OR the file that styles .dropdown--corp)
========================================================= */
.dropdown.dropdown--corp .corp-menu{
width: min(900px, calc(100vw - 56px)); /* daha dar */
padding: 14px; /* daha sıkı */
border-radius: 20px;
}
/* Grid aralıkları küçülsün */
.dropdown.dropdown--corp .corp-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px; /* 16-18 yerine */
}
/* Kart daha kısa + iç boşluk küçülsün */
.dropdown.dropdown--corp a.corp-card{
min-height: 84px; /* 96-110 yerine */
padding: 12px 14px;
border-radius: 18px;
}
/* İkon kutusu biraz küçülsün */
.dropdown.dropdown--corp .cc-ico{
width: 40px;
height: 40px;
border-radius: 14px;
}
/* Yazılar biraz küçülsün */
.dropdown.dropdown--corp .cc-title{
font-size: 16px;
line-height: 1.15;
}
.dropdown.dropdown--corp .cc-sub{
font-size: 13px;
opacity: .82;
}
/* =========================================================
USER MENU PANEL — GLOBAL OVERRIDE (VITRIN + STUDIO)
Put at the VERY END of /products.dropdown.css
========================================================= */
/* Anchor */
.auth-user{ position: relative !important; }
/* Panel sağa yaslansın, ortalama iptal */
#userMenuPanel{
position: absolute !important;
right: 0 !important;
left: auto !important;
top: calc(100% + 14px) !important;
transform: none !important;
z-index: 99999 !important;
width: min(420px, calc(100vw - 24px)) !important;
max-width: 420px !important;
background:
radial-gradient(800px 420px at 20% 10%, rgba(111,99,255,.22), transparent 60%),
radial-gradient(700px 360px at 90% 0%, rgba(31,182,255,.18), transparent 55%),
rgba(10, 12, 22, .78) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 18px 70px rgba(0,0,0,.60) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border-radius: 22px !important;
padding: 14px !important;
}
/* İç kart tonu */
#userMenuPanel .user-menu-card{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 18px !important;
padding: 14px !important;
}
/* Avatar: harf GÖRÜNÜR */
#btnUserMenuTop .user-ava,
#userMenuPanel .um-ava{
background:
radial-gradient(18px 18px at 35% 30%, rgba(255,255,255,.65), transparent 55%),
radial-gradient(60px 60px at 50% 50%, rgba(111,99,255,.55), rgba(31,182,255,.25)) !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow: 0 10px 30px rgba(111,99,255,.25) !important;
position: relative !important;
overflow: hidden !important;
}
#btnUserMenuTop .user-ava::after,
#userMenuPanel .um-ava::after{
content: "✦" !important;
position: absolute !important;
inset: 0 !important;
display: grid !important;
place-items: center !important;
font-size: 14px !important;
color: rgba(255,255,255,.85) !important;
text-shadow: 0 0 16px rgba(111,99,255,.55) !important;
}
/* Item kartlar */
#userMenuPanel .um-item{
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 14px !important;
padding: 12px !important;
margin: 10px 0 !important;
}
/* =========================================================
USER PANEL — FINAL SIZE + POSITION + THEME
Append VERY END of /products.dropdown.css
========================================================= */
/* 1) Panel: sağa hizala + küçült + daha temiz oran */
#userMenuPanel{
position: absolute !important;
right: 0 !important;
left: auto !important;
top: calc(100% + 10px) !important;
transform: none !important;
z-index: 99999 !important;
width: min(360px, calc(100vw - 18px)) !important; /* ✅ küçüldü */
max-width: 360px !important;
padding: 12px !important;
border-radius: 18px !important;
/* ✅ AIVO tema */
background:
radial-gradient(900px 520px at 15% 0%, rgba(111,99,255,.26), transparent 58%),
radial-gradient(820px 460px at 90% 10%, rgba(31,182,255,.18), transparent 55%),
rgba(9, 10, 18, .78) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 18px 70px rgba(0,0,0,.62) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
/* 2) İç kart: daha sıkı ve premium */
#userMenuPanel .user-menu-card{
padding: 12px !important;
border-radius: 16px !important;
background: rgba(255,255,255,.035) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
/* 3) Üst bilgi: daha kompakt */
#userMenuPanel .um-head{
padding: 4px 4px 10px !important;
gap: 10px !important;
}
/* 4) Avatar: Premium harf (spark değil) */
#btnUserMenuTop .user-ava,
#userMenuPanel .um-ava{
/* Harfi geri getir */
font-size: 14px !important; /* istersen 15-16 */
color: rgba(255,255,255,.96) !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
/* Ortala */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
line-height: 1 !important;
/* Kutuyu koru */
position: relative !important;
overflow: hidden !important;
border-radius: 14px !important;
border: 1px solid rgba(255,255,255,.16) !important;
box-shadow: 0 10px 26px rgba(111,99,255,.20) !important;
/* Mor orb arka plan */
background:
radial-gradient(18px 18px at 35% 30%, rgba(255,255,255,.55), transparent 55%),
radial-gradient(70px 70px at 55% 55%, rgba(111,99,255,.55), rgba(31,182,255,.18)) !important;
/* Harfin “premium glow”u */
text-shadow:
0 0 10px rgba(255,255,255,.35),
0 0 18px rgba(111,99,255,.55),
0 0 26px rgba(31,182,255,.30) !important;
}
#btnUserMenuTop .user-ava::after,
#userMenuPanel .um-ava::after{
content: "✦" !important;
position: absolute !important;
inset: 0 !important;
display: grid !important;
place-items: center !important;
font-size: 13px !important;
color: rgba(255,255,255,.88) !important;
text-shadow: 0 0 18px rgba(111,99,255,.55) !important;
}
/* 5) Plan bar (Basic): daha ince */
#userMenuPanel .um-plan{
padding: 9px 10px !important;
border-radius: 12px !important;
margin: 8px 0 10px !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
/* 6) Menü item’ları: daha küçük, daha “buton” gibi */
#userMenuPanel .um-item{
padding: 10px 11px !important;
margin: 8px 0 !important;
border-radius: 12px !important;
background: rgba(255,255,255,.028) !important;
border: 1px solid rgba(255,255,255,.075) !important;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
#userMenuPanel .um-item:hover{
transform: translateY(-1px) !important;
background: rgba(255,255,255,.05) !important;
border-color: rgba(111,99,255,.26) !important;
}
/* 7) Logout: daha küçük + premium kırmızı */
#userMenuPanel .um-logout{
margin-top: 10px !important;
padding: 10px 11px !important;
border-radius: 12px !important;
background: rgba(255,80,110,.06) !important;
border: 1px solid rgba(255,80,110,.34) !important;
}
#userMenuPanel .um-logout:hover{
background: rgba(255,80,110,.10) !important;
border-color: rgba(255,80,110,.44) !important;
}
/* 8) Mobilde ekran dışına taşma olmasın */
@media (max-width: 520px){
#userMenuPanel{
width: min(340px, calc(100vw - 14px)) !important;
max-width: 340px !important;
}
}
/* =========================================================
USER PANEL — COMPACT (HALF SIZE) + CLEAN PREMIUM
Append VERY END of /products.dropdown.css
========================================================= */
/* PANEL: yarıya yakın küçült */
#userMenuPanel{
width: min(300px, calc(100vw - 14px)) !important;
max-width: 300px !important;
padding: 10px !important;
border-radius: 16px !important;
}
/* Üst başlık: daha az boşluk */
#userMenuPanel .user-menu-card{
padding: 10px !important;
border-radius: 14px !important;
}
#userMenuPanel .um-head{
padding: 2px 2px 8px !important;
gap: 8px !important;
}
/* İsim + email: daha net ve premium */
#userMenuPanel .um-title{
font-size: 16px !important;
line-height: 1.1 !important;
color: rgba(255,255,255,.96) !important;
letter-spacing: .2px !important;
}
#userMenuPanel .um-sub{
font-size: 12px !important;
color: rgba(195,205,255,.80) !important; /* ✅ solgunluk gider */
}
/* Plan bar: ince chip gibi */
#userMenuPanel .um-plan{
padding: 7px 9px !important;
border-radius: 12px !important;
margin: 8px 0 8px !important;
background: rgba(255,255,255,.035) !important;
border: 1px solid rgba(255,255,255,.07) !important;
}
/* Menü item’lar: daha kısa */
#userMenuPanel .um-item{
padding: 9px 10px !important;
margin: 7px 0 !important;
border-radius: 12px !important;
font-size: 14px !important;
}
/* Logout daha küçük */
#userMenuPanel .um-logout{
padding: 9px 10px !important;
border-radius: 12px !important;
}
/* Eski yıldız/ikonları tamamen kapat */
#btnUserMenuTop .user-ava::before,
#btnUserMenuTop .user-ava::after,
#userMenuPanel .um-ava::before,
#userMenuPanel .um-ava::after{
content: "" !important;
}
/* =========================================================
USER MENU — GLOBAL FINAL (Vitrin + Studio)
Append to products.dropdown.css (EN ALT)
========================================================= */
#userMenuWrap{
position: relative;
display: inline-flex;
align-items: center;
}
#userMenuWrap #userMenuPanel{
position: absolute;
top: calc(100% + 12px);
right: 0;
left: auto;
bottom: auto;
transform: none !important;
margin: 0 !important;
z-index: 999999;
}
/* hidden attribute varsa */
#userMenuPanel[hidden]{ display:none !important; }
/* TOPBAR AUTH — SAĞA KİLİT */
.aivo-topbar-inner{
display: flex;
align-items: center;
}
.aivo-nav{
margin-left: auto;
}
/* Auth alanı en sağda dursun */
.aivo-auth{
margin-left: 16px;
}
/* =========================================================
PRODUCTS DROPDOWN — SOLID GLASS (Pricing/Kurumsal FIX) v7
- Arka plan içerik görünmesin (opak cam)
- Z-index en üstte
- Safari sızıntı/overlap kes
- Pseudo overlay (dev after/before) kill
========================================================= */
/* Topbar her zaman üstte */
.aivo-topbar{
position: relative;
z-index: 9000;
isolation: isolate;
}
/* Dropdown anchor */
.nav-item.has-dropdown{
position: relative;
}
/* Panel */
.dropdown.dropdown--products{
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateZ(0);
z-index: 9999;
/* ✅ opak cam */
background: rgba(12, 14, 28, 0.96);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 22px;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
/* panel büyüyüp sayfayı "boyamasın" */
overflow: hidden;
isolation: isolate;
box-shadow: 0 28px 70px rgba(0,0,0,0.55);
/* genişlik kontrol (çok açılmasın) */
width: min(980px, calc(100vw - 56px));
}
/* Bazı düzenlerde panelin kendi before/after’ı sayfayı kaplayabiliyor */
.dropdown.dropdown--products::before,
.dropdown.dropdown--products::after{
content: none !important;
display: none !important;
}
/* İç container: tek owner + opak garanti */
.dropdown.dropdown--products .products-menu{
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(0, 1fr) !important;
gap: 12px !important;
padding: 16px !important;
background: rgba(12, 14, 28, 0.96) !important;
/* içerik taşması / mavi overlay ihtimali */
overflow: hidden !important;
isolation: isolate !important;
}
/* İç container pseudo’larını tamamen kapat */
.dropdown.dropdown--products .products-menu::before,
.dropdown.dropdown--products .products-menu::after{
content: none !important;
display: none !important;
}
/* Kartlar */
.dropdown.dropdown--products .product-card{
min-height: 170px !important;
border-radius: 18px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
overflow: hidden !important;
position: relative !important;
transform: translateZ(0);
}
.dropdown.dropdown--products .product-card:hover{
background: rgba(255,255,255,0.07) !important;
border-color: rgba(255,255,255,0.16) !important;
}
/* Mobil/ dar ekran: 2 satıra düşsün, taşmasın */
@media (max-width: 900px){
.dropdown.dropdown--products{
width: calc(100vw - 24px);
}
.dropdown.dropdown--products .products-menu{
grid-auto-flow: row !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Topbar: sadece avatar, yazı gizli */
#btnUserMenuTop .user-name {
display: none !important;
}
/* Avatar harfi görünür + ortalı */
.user-ava,
.um-ava {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px; /* topbar için ideal */
font-weight: 800;
line-height: 1;
color: #fff; /* harf rengi */
text-transform: uppercase;
}
/* === FORCE: Topbar avatar harfi mutlaka görünsün === */
#topUserInitial{
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:14px !important;
font-weight:800 !important;
line-height:1 !important;
color:#fff !important;
text-transform:uppercase !important;
/* herhangi bir gizleme varsa ez */
opacity:1 !important;
visibility:visible !important;
}
/* === FORCE: Panel avatar harfi de görünür kalsın === */
#umAvatar{
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:18px !important;
font-weight:800 !important;
line-height:1 !important;
color:#fff !important;
text-transform:uppercase !important;
opacity:1 !important;
visibility:visible !important;
}
/* === FIX: Avatar harfi görünür (font-size:0 killer'ını ezer) === */
#btnUserMenuTop #topUserInitial.user-ava{
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:14px !important;
font-weight:800 !important;
line-height:1 !important;
color:#fff !important;
opacity:1 !important;
visibility:visible !important;
text-transform:uppercase !important;
}
#userMenuPanel #umAvatar.um-ava{
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:18px !important;
font-weight:800 !important;
line-height:1 !important;
color:#fff !important;
opacity:1 !important;
visibility:visible !important;
text-transform:uppercase !important;
}
/* === PREMIUM INITIAL (Glow Letter) === */
#btnUserMenuTop #topUserInitial.user-ava,
#userMenuPanel #umAvatar.um-ava{
font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "Inter", "Segoe UI", Arial, sans-serif !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
/* Harfi daha net “premium” göster */
color: rgba(255,255,255,.96) !important;
/* Glow: harfin kendisi ışık saçsın */
text-shadow:
0 0 10px rgba(255,255,255,.35),
0 0 18px rgba(150,120,255,.55),
0 0 28px rgba(80,180,255,.35) !important;
/* Harf biraz “pop” */
filter: saturate(1.1) brightness(1.05) !important;
}
/* Boyutlar (topbar küçük, panel büyük) */
#btnUserMenuTop #topUserInitial.user-ava{
font-size: 14px !important;
}
#userMenuPanel #umAvatar.um-ava{
font-size: 20px !important;
}
/* === PREMIUM INITIAL (STRONG GLOW) === */
#btnUserMenuTop #topUserInitial.user-ava,
#userMenuPanel #umAvatar.um-ava{
font-family: ui-rounded, system-ui, -apple-system, "SF Pro Display", "Inter", "Segoe UI", Arial, sans-serif !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
color: rgba(255,255,255,.98) !important;
text-shadow:
0 0 6px rgba(255,255,255,.45),
0 0 14px rgba(160,120,255,.70),
0 0 26px rgba(90,190,255,.50),
0 0 38px rgba(140,110,255,.35) !important;
/* glow’u netleştir */
filter: saturate(1.25) brightness(1.10) !important;
}
/* === PLAN LABEL FIX: Basic/Premium görünür === */
#userMenuPanel .um-plan,
#userMenuPanel #umPlan{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
visibility: visible !important;
color: rgba(255,255,255,.96) !important;
font-weight: 800 !important;
letter-spacing: .01em !important;
position: relative !important;
z-index: 2 !important;
}
/* Eğer plan satırı “soluk” kalıyorsa ikon/text’i de güçlendir */
#userMenuPanel .um-plan-ico{
opacity: 1 !important;
filter: saturate(1.2) brightness(1.05) !important;
}
/* === FORCE PLAN ROW HEIGHT / VISIBILITY === */
#userMenuPanel .um-plan{
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 14px !important;
margin: 10px 0 14px !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: 5 !important;
}
#userMenuPanel #umPlan{
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: 6 !important;
}
/* =========================================================
USER MENU — PLAN ROW HARD FIX (width/height=0 çözümü)
========================================================= */
#userMenuPanel .um-plan{
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
height: auto !important;
padding: 10px 14px !important;
margin: 10px 0 14px !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: 5 !important;
}
#userMenuPanel #umPlan{
display: inline-flex !important;
width: auto !important;
height: auto !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
color: rgba(255,255,255,.96) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: 6 !important;
}
/* =========================================================
TOPBAR AVATAR / INITIAL — SINGLE SOURCE OF TRUTH
(Index + Pricing + Kurumsal + Studio aynı görünüm)
-> products.dropdown.css dosyasının EN ALTINA ekle
========================================================= */
#btnUserMenuTop #topUserInitial.user-ava,
#userMenuPanel #umAvatar.um-ava{
/* Vitrin/pricing/kurumsal hangi görünümü veriyorsa
onun kazanan değerleri burada tek yerde dursun */
background: var(--aivo-ava-bg, radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.20), rgba(120,90,255,.55) 55%, rgba(40,18,95,.55) 100%));
border: 1px solid rgba(255,255,255,.18);
box-shadow:
0 12px 30px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.10);
filter: saturate(1.15) brightness(1.05);
color: rgba(255,255,255,.98);
text-shadow:
0 0 6px rgba(255,255,255,.45),
0 0 14px rgba(160,120,255,.70),
0 0 26px rgba(90,190,255,.50),
0 0 38px rgba(140,110,255,.35);
font-family: ui-rounded, system-ui, -apple-system, "SF Pro Display", "Inter", "Segoe UI", Arial, sans-serif;
font-weight: 900;
letter-spacing: .02em;
}
/* =========================================================
DROPDOWN CARD UNIFY (micro polish) — v1
Amaç:
- Ürünler menüsünde kartlar (özellikle Studio) 1 tık büyüsün
- Kurumsal kart grid/padding/min-height diğer sayfalarla aynı dursun
Not: EN ALTA ekle (products.dropdown.css en son satır)
========================================================= */
/* -------------------------
PRODUCTS dropdown (Ürünler)
-------------------------- */
/* Grid aralığı (çok az) */
.dropdown.dropdown--products .prod-grid,
.dropdown--products .prod-grid{
gap: 14px !important;
}
/* Kart ölçüsü (1 tık büyüt) */
.dropdown.dropdown--products a.prod-card,
.dropdown--products a.prod-card{
min-height: 92px !important;
padding: 14px 16px !important;
border-radius: 18px !important;
}
/* İç tipografi hafif büyüsün (Studio kartı da toparlar) */
.dropdown.dropdown--products a.prod-card .pc-title,
.dropdown--products a.prod-card .pc-title{
font-size: 15px !important;
line-height: 1.2 !important;
}
.dropdown.dropdown--products a.prod-card .pc-sub,
.dropdown--products a.prod-card .pc-sub{
font-size: 12.5px !important;
line-height: 1.25 !important;
opacity: .78 !important;
}
/* -------------------------
CORP dropdown (Kurumsal)
-------------------------- */
.dropdown.dropdown--corp .corp-grid,
.dropdown--corp .corp-grid{
gap: 14px !important;
}
/* Kurumsal kartları diğerleriyle aynı “yükseklik/padding” çizgisine al */
.dropdown.dropdown--corp a.corp-card,
.dropdown--corp a.corp-card{
min-height: 92px !important;
padding: 14px 16px !important;
border-radius: 18px !important;
}
/* Kurumsal ikon/başlık taşmalarını dengeler */
.dropdown.dropdown--corp a.corp-card .cc-ico,
.dropdown--corp a.corp-card .cc-ico{
width: 34px !important;
height: 34px !important;
display: inline-grid !important;
place-items: center !important;
}
/* =========================================================
UM PLAN ROW — FULL WIDTH (Kurumsal + Fiyatlandırma fix)
Amaç: "Basic" satırı Studio’daki gibi tam genişliğe uzasın
Not: Sadece corp + pricing scope (Studio etkilenmez)
========================================================= */
body[data-skin="corp"] #userMenuPanel .um-plan,
body[data-skin="pricing"] #userMenuPanel .um-plan{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/* ikon sabit kalsın */
body[data-skin="corp"] #userMenuPanel .um-plan .um-plan-ico,
body[data-skin="pricing"] #userMenuPanel .um-plan .um-plan-ico{
flex: 0 0 auto;
}
/* "Basic" yazısı esnesin (satır dolsun) */
body[data-skin="corp"] #userMenuPanel .um-plan .um-plan-txt,
body[data-skin="pricing"] #userMenuPanel .um-plan .um-plan-txt{
flex: 1 1 auto;
min-width: 0;
font-weight: 800;
letter-spacing: .01em;
}
/* =========================================================
USER MENU — PLAN ROW FULL WIDTH (Basic satırı kısa kalmasın)
========================================================= */
/* Menu panel içindeki plan satırı container tam genişlik */
#userMenuPanel .um-plan,
#userMenuPanel .um-plan-card,
#userMenuPanel .um-plan-btn{
width: 100% !important;
max-width: 100% !important;
}
/* Plan satırı “kart” gibi görünüyorsa flex ile uzat */
#userMenuPanel .um-plan,
#userMenuPanel .um-plan-card,
#userMenuPanel .um-plan-btn{
display: flex !important;
align-items: center !important;
}
/* Eğer plan satırı anchor/button ise içeriği tam genişlikte taşır */
#userMenuPanel .um-plan > *,
#userMenuPanel .um-plan-card > *,
#userMenuPanel .um-plan-btn > *{
flex: 0 0 auto;
}
#userMenuPanel .um-plan,
#userMenuPanel .um-plan-card,
#userMenuPanel .um-plan-btn{
flex: 1 1 auto !important;
}
/* Basic yazısını (um-plan-txt) ortada tutup satırı büyüt */
#userMenuPanel .um-plan-txt{
flex: 1 1 auto !important;
text-align: center !important;
}
/* İkon (diamond) sabit kalsın */
#userMenuPanel .um-plan-ico{
flex: 0 0 auto !important;
}
/* =========================================================
USER MENU — PLAN ROW FULL WIDTH (targets #umPlan / .um-plan)
Append to VERY BOTTOM of products.dropdown.css
========================================================= */
/* Plan satırı: chip değil, menü satırı gibi tam geniş */
#userMenuPanel #umPlan.um-plan,
#userMenuPanel .um-plan{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* Menü satırlarıyla aynı hissi vermesi için */
padding: 14px 16px !important;
border-radius: 18px !important;
/* Eğer background/border başka yerdeyse dokunmaz;
ama chip görünümü varsa bununla normalize olur */
}
/* İkon + yazı hizası (ikon solda, yazı ortada) */
#userMenuPanel #umPlan .um-plan-ico,
#userMenuPanel .um-plan .um-plan-ico{
flex: 0 0 auto !important;
margin-right: 10px !important;
}
#userMenuPanel #umPlan .um-plan-txt,
#userMenuPanel .um-plan .um-plan-txt{
flex: 1 1 auto !important;
text-align: center !important;
}
/* Parent daraltıyorsa: plan satırının bulunduğu blok da full width */
#userMenuPanel .um-head,
#userMenuPanel .um-section,
#userMenuPanel .um-body{
width: 100% !important;
max-width: 100% !important;
}
/* FIX: Sidebar link underline (Kredi Satın Al çizgisi) */
.sidebar .sidebar-link,
.sidebar a.sidebar-link,
.sidebar a.sidebar-link:visited,
.sidebar a.sidebar-link:hover,
.sidebar a.sidebar-link:active {
text-decoration: none !important;
}
/* ================= FOOTER CONTACT FORM — SLIM / ELEGANT ================= */
.aivo-footer .aivo-contact {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* overall size + spacing */
.aivo-footer .aivo-contact-form {
margin-top: 10px !important;
width: min(520px, 92vw) !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding: 0 !important;
}
/* inputs: slimmer, more “site-like” */
.aivo-footer .aivo-contact-form input,
.aivo-footer .aivo-contact-form textarea {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: rgba(255,255,255,0.90) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
font-size: 14px !important;
line-height: 1.2 !important;
box-shadow: none !important;
backdrop-filter: blur(8px) !important;
}
.aivo-footer .aivo-contact-form input::placeholder,
.aivo-footer .aivo-contact-form textarea::placeholder {
color: rgba(255,255,255,0.45) !important;
}
/* focus: subtle */
.aivo-footer .aivo-contact-form input:focus,
.aivo-footer .aivo-contact-form textarea:focus {
border-color: rgba(106,141,255,0.55) !important;
box-shadow: 0 0 0 3px rgba(106,141,255,0.12) !important;
}
/* message area: smaller, not a huge block */
.aivo-footer .aivo-contact-form textarea {
grid-column: 1 / -1 !important;
min-height: 80px !important;
resize: none !important;
}
/* button: smaller, softer, aligned right */
.aivo-footer .aivo-contact-form button {
grid-column: 2 / 3 !important;
justify-self: end !important;
padding: 9px 16px !important;
font-size: 14px !important;
border-radius: 999px !important;
background: rgba(106,141,255,0.22) !important;
border: 1px solid rgba(106,141,255,0.35) !important;
color: rgba(255,255,255,0.92) !important;
box-shadow: none !important;
transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
}
.aivo-footer .aivo-contact-form button:hover {
transform: translateY(-1px) !important;
background: rgba(106,141,255,0.28) !important;
border-color: rgba(106,141,255,0.55) !important;
}
.aivo-footer .aivo-contact-form button:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
}
/* mobile: single column */
@media (max-width: 520px) {
.aivo-footer .aivo-contact-form {
grid-template-columns: 1fr !important;
}
.aivo-footer .aivo-contact-form button {
grid-column: 1 / -1 !important;
justify-self: stretch !important;
}
}
/* Footer Contact CTA – subtle shine */
.aivo-contact {
text-align: center;
margin-top: 18px;
}
.aivo-contact-mail {
position: relative;
display: inline-block;
padding: 10px 26px;
border-radius: 999px;
color: #eaeaff;
font-weight: 500;
letter-spacing: 0.2px;
text-decoration: none;
background: linear-gradient(
180deg,
rgba(120, 120, 255, 0.18),
rgba(90, 90, 180, 0.12)
);
border: 1px solid rgba(120, 120, 255, 0.25);
/* NOTE: Safari/WebKit composite sorunları için Studio’da gerekirse kapatılabilir */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 6px 20px rgba(0, 0, 0, 0.35);
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* Light sweep */
.aivo-contact-mail::before {
content: "";
position: absolute;
top: -40%;
left: -60%;
width: 40%;
height: 180%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
transform: skewX(-20deg);
opacity: 0;
}
/* Hover */
.aivo-contact-mail:hover {
transform: translateY(-1px);
border-color: rgba(150, 150, 255, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 10px 28px rgba(80, 90, 255, 0.35);
}
.aivo-contact-mail:hover::before {
animation: footer-shine 1.1s ease;
opacity: 1;
}
@keyframes footer-shine {
from { left: -60%; }
to { left: 140%; }
}
/* Small helper text */
.aivo-contact-hint {
display: block;
margin-top: 10px;
font-size: 13px;
color: rgba(200, 200, 255, 0.65);
}
/* TEMP FIX — force logout row visible/clickable */
#userMenuPanel .um-logout,
#userMenuPanel [data-action="logout"] {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
height: auto !important;
min-height: 44px !important;
padding: 10px 12px !important;
margin-top: 10px !important;
width: 100% !important;
}
/* AUTH VISIBILITY — MUST WIN (pricing/index) */
[hidden] { display: none !important; }
html.is-auth #authGuest { display: none !important; }
html.is-guest #authUser { display: none !important; }
html.is-guest #topCredits { display: none !important; }
/* USER MENU HEADER — stable layout + ellipsis */
#userMenuPanel .um-head {
display: grid !important;
grid-template-columns: 44px 1fr !important;
gap: 12px !important;
align-items: center !important;
}
#userMenuPanel .um-ava {
width: 44px;
height: 44px;
flex: 0 0 44px;
}
#userMenuPanel .um-meta { min-width: 0 !important; }
#userMenuPanel .um-title,
#userMenuPanel .um-sub {
display: block;
min-width: 0 !important;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#userMenuPanel .um-sub {
opacity: 0.75;
font-size: 13px;
}
/* ===== AIVO PRODUCTS DROPDOWN — FIX (6 card + no clipping) ===== */
/* dropdown genişliği: viewport'a göre büyüsün, 560px gibi agresif kırpmasın */
.dropdown.dropdown--products .products-menu{
width: min(980px, calc(100vw - 120px)) !important;
max-width: 980px !important;
}
/* grid: 6 kart sığmazsa 2 satıra düşsün (kırpılmasın) */
.dropdown.dropdown--products .products-menu{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
grid-auto-flow: row !important;
}
/* kırpılmayı engelle */
.dropdown.dropdown--products{
overflow: visible !important;
}
.dropdown.dropdown--products .products-menu{
overflow: visible !important;
}
/* iPad / dar ekran: kartlar taşmasın, daha kompakt olsun */
@media (max-width: 1200px){
.dropdown.dropdown--products .products-menu{
width: min(920px, calc(100vw - 60px)) !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
}
}
/* =========================
ATMOSPHERE — PRO (SUPER MODE) COMPACT + GLOBAL PLAYER SAFE GAP
PUT THIS AT VERY BOTTOM OF studio.pages.css
========================= */
/* ✅ 1) GLOBAL PLAYER ÇAKIŞMA ÇÖZÜMÜ
Padding'i panel'e değil, sayfanın scroll alanına ver.
(Global player fixed olduğu için içerik alta giriyordu.)
*/
#atmRoot .layout,
#atmRoot .main-panel,
#atmRoot .mode-shell{
padding-bottom: 140px !important; /* önce 140 deneyelim */
}
/* iOS safe-area destek */
@supports (padding: max(0px)) {
#atmRoot .layout,
#atmRoot .main-panel,
#atmRoot .mode-shell{
padding-bottom: max(140px, env(safe-area-inset-bottom)) !important;
}
}
/* Sağ panelin altı da player'a girmesin (çıktılar kartı) */
#atmRoot #studioRightPanel{
padding-bottom: 140px !important;
}
@supports (padding: max(0px)) {
#atmRoot #studioRightPanel{
padding-bottom: max(140px, env(safe-area-inset-bottom)) !important;
}
}
/* ✅ 2) PRO panel iç boşluk: çok uzamasın (ama altta safe-gap zaten var) */
#atmRoot #atmPanelPro {
padding-bottom: 0 !important; /* burada 0 olmalı; safe-gap üstte */
}
/* ✅ 3) PRO içindeki tüm kartlar: kompakt */
#atmRoot #atmPanelPro .card{
padding: 12px 12px !important;
border-radius: 16px !important;
}
/* Inline margin-top:14px; -> ez */
#atmRoot #atmPanelPro .card[style*="margin-top"]{
margin-top: 8px !important;
}
/* Kart header: daha kısa + ortalı */
#atmRoot #atmPanelPro .card-header{
margin-bottom: 8px !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
#atmRoot #atmPanelPro .card-title{
font-size: 16px !important;
line-height: 1.15 !important;
text-align: center !important;
}
#atmRoot #atmPanelPro .card-subtitle{
font-size: 13px !important;
opacity: .82 !important;
text-align: center !important;
}
/* Üst bilgi kartı */
#atmRoot #atmPanelPro > .card:first-child{
padding: 12px 12px !important;
}
#atmRoot #atmPanelPro > .card:first-child > div[style]{
font-size: 14px !important;
line-height: 1.45 !important;
}
#atmRoot #atmPanelPro > .card:first-child > div[style] > div{
margin-top: 6px !important;
font-size: 12.5px !important;
}
/* SAHNE: textarea küçült */
#atmRoot #atmPanelPro #atmSuperSceneCard .atm-super-scene{
display: grid !important;
gap: 8px !important;
}
#atmRoot #atmPanelPro #atmSuperSceneCard textarea,
#atmRoot #atmPanelPro #atmSuperSceneCard .atm-textarea{
height: 56px !important;
min-height: 56px !important;
font-size: 14px !important;
line-height: 1.35 !important;
padding: 10px 12px !important;
border-radius: 14px !important;
}
#atmRoot #atmPanelPro #atmSuperSceneCard .atm-help{
font-size: 12.5px !important;
opacity: .78 !important;
}
/* Scene mode pill: ufalt + ortala */
#atmRoot #atmPanelPro #atmSuperSceneCard .atm-super-mode{
display: flex !important;
justify-content: center !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
#atmRoot #atmPanelPro #atmSuperSceneCard .pill{
padding: 8px 12px !important;
font-size: 13px !important;
border-radius: 999px !important;
}
/* Atmosfer+Yoğunluk pill */
#atmRoot #atmPanelPro #atmProAtmos .smpack-row{
justify-content: center !important;
gap: 8px !important;
}
#atmRoot #atmPanelPro #atmProAtmos .smpack-pill{
padding: 8px 12px !important;
font-size: 13px !important;
border-radius: 999px !important;
max-width: 100% !important;
white-space: nowrap !important;
}
/* Kamera satırı */
#atmRoot #atmPanelPro .form-row{
padding: 10px 12px !important;
}
#atmRoot #atmPanelPro .form-label{
font-size: 13px !important;
opacity: .85 !important;
}
#atmRoot #atmPanelPro select.input,
#atmRoot #atmPanelPro .input{
height: 40px !important;
font-size: 14px !important;
border-radius: 12px !important;
}
/* Işık & Duygu pill */
#atmRoot #atmPanelPro #atmProMood .smpack-row{
justify-content: center !important;
gap: 8px !important;
}
#atmRoot #atmPanelPro #atmProMood .smpack-pill{
padding: 8px 12px !important;
font-size: 13px !important;
border-radius: 999px !important;
}
/* Detay Efektler */
#atmRoot #atmPanelPro #atmProDetails > div[style*="display:grid"]{
gap: 8px !important;
}
#atmRoot #atmPanelPro #atmProDetails label{
font-size: 14px !important;
line-height: 1.2 !important;
}
#atmRoot #atmPanelPro #atmProDetails input[type="checkbox"]{
transform: scale(.95) !important;
}
/* CTA */
#atmRoot #atmPanelPro .smpack-card--cta{
padding: 12px !important;
}
#atmRoot #atmPanelPro .smpack-card--cta .btn{
width: 100% !important;
height: 48px !important;
border-radius: 14px !important;
font-size: 14px !important;
}
#atmRoot #atmPanelPro .smpack-card--cta > div{
margin-top: 8px !important;
text-align: center !important;
font-size: 12.5px !important;
opacity: .82 !important;
}
/* =========================
GLOBAL PLAYER SAFE BOTTOM (ATM PRO)
========================= */
/* Atmosfer sayfası root'u: #atmRoot */
#atmRoot .layout #atmRoot .main-panel #atmRoot .mode-shell{
padding-bottom: 240px !important; /* player + nefes */
}
/* ekstra garanti: main-panel de boşluk alsın */
#atmRoot .main-panel{
padding-bottom: 240px !important;
}
/* CTA kartı player altında kalmasın */
#atmRoot #atmPanelPro .spack-card-cta,
#atmRoot #atmPanelPro .card.spack-card-cta{
margin-bottom: 220px !important;
}