:root{
--bg: #0b1220;
--card: rgba(255,255,255,.06);
--card2: rgba(255,255,255,.08);
--alpina: #ffffff;
--text: #ffffff;
--text-strong: #ffffff;
--muted: #ffffff;
--border: rgba(255,255,255,.12);
--accent: #6aa7ff;
--accent2: #7c5cff;
--orange: #ff6a00;
--orange-soft: rgba(255, 106, 0, 0.25);
--shadow: 0 16px 40px rgba(0,0,0,.35);
--radius: 18px;
--container: 1120px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
background: linear-gradient(
180deg,
rgba(60, 80, 140, 0.35) 0%,
rgba(40, 50, 90, 0.25) 35%,
rgba(25, 30, 55, 0.15) 65%,
#0f1220 100%
);
color: var(--text);
}
main, .container, .page, .section { color: var(--text); }
main h1, main h2, main h3, main h4, .section-head h2 { color: var(--text-strong); }
main p, .section p, .card p { color: var(--text); }
/* =========================
EYE-FRIENDLY GLASS
(less glare / softer text)
========================= */
:root{
/* arka plan camı biraz daha koyu */
--glass-bg: rgba(14, 18, 34, .92);
--glass-border: rgba(255,255,255,.10);
--glass-shadow: rgba(0,0,0,.42);
/* İç yazılar tam beyaz */
--alpina: #ffffff;
--text: #ffffff;
--text-strong: #ffffff;
--muted: #ffffff;
}
/*sayfanin arka plani*/
body {
/* background: #4f4f7a; koyu, yumuşak lacivert */
color: var(--text);
}
/* =========================
Top price comparison bar
========================= */
.top-price-alert{
width:100%;
background:rgba(255,255,255,.90);
backdrop-filter:saturate(140%) blur(12px);
-webkit-backdrop-filter:saturate(140%) blur(12px);
border-top:1px solid rgba(15,23,42,.10);
border-bottom:1px solid rgba(15,23,42,.12);
}
.top-price-alert__inner{
max-width:var(--container, 1120px);
margin:0 auto;
padding:12px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.top-price-alert__content{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.top-price-alert__kicker{
font-size:.78rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(15,23,42,.60);
}
.top-price-alert__title{
font-size:1.05rem;
font-weight:900;
color:#0f172a;
line-height:1.25;
letter-spacing:-0.01em;
}
.top-price-alert__sub{
font-size:.9rem;
color:rgba(15,23,42,.72);
font-weight:650;
}
.top-price-alert__right{
display:flex;
align-items:center;
gap:12px;
flex:0 0 auto;
}
.top-price-alert__prices{
display:flex;
align-items:stretch;
gap:10px;
}
.price-card{
display:flex;
flex-direction:column;
justify-content:center;
gap:2px;
padding:10px 12px;
border-radius:14px;
background:rgba(15,23,42,.04);
border:1px solid rgba(15,23,42,.10);
text-decoration:none;
min-width:140px;
transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.price-card--amazon,
.price-card--otto{
background:rgba(34,197,94,.12);
border-color:rgba(34,197,94,.28);
}
.price-card--amazon .price-card__merchant,
.price-card--otto .price-card__merchant{
color:rgba(20,83,45,.75);
}
.price-card--amazon .price-card__price,
.price-card--otto .price-card__price{
color:#14532d;
}
.price-card__merchant{
font-size:.82rem;
font-weight:800;
color:rgba(15,23,42,.72);
}
.price-card__price{
font-size:1.05rem;
font-weight:950;
color:#0f172a;
letter-spacing:-0.01em;
}
.price-card:hover{
transform:translateY(-1px);
background:rgba(15,23,42,.06);
border-color:rgba(15,23,42,.16);
}
.top-price-alert__vs{
display:flex;
align-items:center;
justify-content:center;
padding:0 2px;
color:rgba(15,23,42,.38);
font-weight:900;
font-size:.9rem;
letter-spacing:.02em;
user-select:none;
}
.top-price-alert__cta{
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 14px;
border-radius:999px;
background:linear-gradient(180deg,#16a34a 0%, #12823c 100%);
border:1px solid rgba(22,163,74,.75);
color:#fff;
font-weight:900;
text-decoration:none;
white-space:nowrap;
transition:transform .08s ease, filter .12s ease;
}
.top-price-alert__cta:hover{
transform:translateY(-1px);
filter:brightness(1.02);
}
@media (max-width: 768px){
.top-price-alert__inner{
padding:12px 14px;
gap:10px;
flex-direction:column;
align-items:stretch;
}
.top-price-alert__title{
font-size:.95rem;
}
.top-price-alert__right{ width:100%; flex-direction:column; align-items:stretch; }
.top-price-alert__prices{ width:100%; flex-direction:column; }
.top-price-alert__vs{ display:none; }
.price-card{ width:100%; min-width:0; }
.top-price-alert__cta{ width:100%; border-radius:14px; }
}
.hero {
position: relative;
min-height: 100vh;
background:
radial-gradient(
circle at 30% 20%,
rgba(120, 140, 160, 0.12),
transparent 60%
),
linear-gradient(
180deg,
#0f172a 0%,
#0b1220 60%,
#090f1a 100%
);
color: var(--text);
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image: url("/assets/img/noise.png");
opacity: 0.03;
pointer-events: none;
}
/* Ratgeber / Kategorü sayfalarında hero yüksekliği içeriğe göre (tam ekran zorlaması yok) */
.wrap .hero,
main.wrap .hero {
min-height: 0;
}
/* cam yüzeyler – turuncu vurgulu */
.card,
.product-card,
.filter-card,
.detail-hero,
.hero-card{
background: var(--glass-bg) !important;
backdrop-filter: blur(10px) saturate(115%);
-webkit-backdrop-filter: blur(10px) saturate(115%);
border: 1px solid rgba(255, 106, 0, 0.2);
border-radius: 18px;
box-shadow:
0 14px 36px var(--glass-shadow),
0 0 0 1px rgba(255, 106, 0, 0.06),
inset 0 1px 0 rgba(255,255,255,.05);
}
.card:hover,
.product-card:hover,
.hero-card:hover{
border-color: rgba(255, 106, 0, 0.35);
box-shadow:
0 18px 44px var(--glass-shadow),
0 0 0 1px rgba(255, 106, 0, 0.12),
inset 0 1px 0 rgba(255,255,255,.05);
}
/* Homepage product strips: global glass .product-card would stay dark; force light cards (also if home-page-v2 cache misses). */
body.home-page .home-scroll-row__track a.home-match-card.product-card,
body.home-page .home-scroll-row__track a.home-popular-card.product-card,
body.home-page .home-scroll-row__track a.home-new-card.product-card{
background: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(15, 23, 42, 0.13) !important;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
color: #0f172a !important;
overflow: visible !important;
}
body.home-page .home-scroll-row__track a.home-match-card.product-card{
border-left: 4px solid rgba(13, 148, 136, 0.45) !important;
}
body.home-page .home-scroll-row__track a.home-match-card.product-card:hover,
body.home-page .home-scroll-row__track a.home-popular-card.product-card:hover,
body.home-page .home-scroll-row__track a.home-new-card.product-card:hover{
border-color: rgba(15, 23, 42, 0.16) !important;
border-left-color: rgba(13, 148, 136, 0.55) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1) !important;
filter: none !important;
}
body.home-page .home-scroll-row__track a.home-popular-card.product-card:hover,
body.home-page .home-scroll-row__track a.home-new-card.product-card:hover{
border-left-color: rgba(15, 23, 42, 0.13) !important;
}
body.home-page .home-scroll-row__track a.home-match-card.product-card:hover{
border-left-color: rgba(13, 148, 136, 0.55) !important;
}
body.home-page .home-scroll-row__track a.home-new-card.product-card:hover{
background: #ffffff !important;
}
body.home-page .home-scroll-row__track a.home-match-card.product-card::before,
body.home-page .home-scroll-row__track a.home-popular-card.product-card::before,
body.home-page .home-scroll-row__track a.home-new-card.product-card::before{
display: none !important;
content: none !important;
opacity: 0 !important;
}
body.home-page .home-scroll-row__track a.home-match-card.product-card img,
body.home-page .home-scroll-row__track a.home-popular-card.product-card img,
body.home-page .home-scroll-row__track a.home-new-card.product-card img{
background: #ffffff !important;
filter: none !important;
}
body.home-page .home-scroll-row__track a.home-match-card.product-card:hover img,
body.home-page .home-scroll-row__track a.home-popular-card.product-card:hover img,
body.home-page .home-scroll-row__track a.home-new-card.product-card:hover img{
filter: none !important;
}
body.home-page .home-scroll-row__track a.product-card .home-card-title{
color: #0f172a !important;
}
/*.card {
position: relative;
background: rgba(20, 24, 40, 0.55); /* 👈 koyulaştırıldı ama cam
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 20px 45px rgba(0,0,0,0.45),
inset 0 1px 1px rgba(255,255,255,0.18);
}*/
/* metin renkleri (daha yumuşak) */
h1,h2,h3{
color: var(--text-strong);
letter-spacing: .2px;
}
p, li, label, .badge, .rating{
color: var(--text);
}
.muted,
.card .muted,
.product-card .muted{
color: var(--muted) !important;
}
/* link/aksan da göz dostu */
a{
color: rgba(180, 200, 255, .92);
}
/* buton yazıları da yumuşasın */
.btn{
color: #ffffff;
}
/* aşırı parlak highlight’ları kır */
.badge,
.pill,
.chip{
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
.container{
width:min(var(--container), calc(100% - 40px));
margin-inline:auto;
}
.container.page-detail{
max-width: 1400px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
/* Detail: eigenes Layout — .container global unverändert, nur Detail-Root */
body.page-detail #detailRoot,
main#detailRoot.container.page.detail{
max-width: 1400px;
width: min(1400px, calc(100% - 48px));
margin: 24px auto 0;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
/* Detail-Root: horizontales Padding der allgemeinen .page.detail-Regel aufheben */
body.page-detail main#detailRoot.page.detail{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* .container.page padding-top nicht doppelt mit margin-top */
body.page-detail main#detailRoot.container.page.detail{
padding-top: 0;
}
a{ color:inherit; text-decoration:none; }
.muted{ color: var(--muted); }
.link{ color: #ffffff; }
.link:hover{ color: var(--alpina); }
.site-header{
position:sticky;
top:0;
z-index:50;
backdrop-filter: blur(10px);
background: linear-gradient(135deg, #12d6d2 0%, #08b6d8 45%, #0b63f6 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.98);
}
.site-header .brand,
.site-header .brand-text,
.site-header .brand-slogan,
.site-header .nav-link,
.site-header .mobile-sortiment-label{
color: rgba(255, 255, 255, 0.95);
}
.site-header .nav-link:hover{
color: #fff;
}
.site-header .global-header-search-input{
color: #1a1a1a !important;
}
.site-header .global-header-search-input::placeholder{
color: rgba(15, 23, 42, 0.55) !important;
}
.site-header .header-search-row .global-header-search,
.site-header .global-header-search{
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.35);
}
.site-header .global-header-search-btn{
color: rgba(255, 255, 255, 0.9);
}
.site-header .menu-btn{
min-width: 44px;
min-height: 40px;
justify-content: center;
gap: 5px;
}
.site-header .menu-btn span{
display: block !important;
width: 20px !important;
height: 2px !important;
margin: 0 !important;
background: #fff !important;
background-color: #fff !important;
border-radius: 2px;
}
.site-header .menu-btn::before{
color: #fff;
background: transparent !important;
}
.site-header .menu-btn.is-open span{
display: none !important;
}
.site-header .menu-btn.is-open::before{
content: "\00d7" !important;
display: block !important;
font-size: 28px !important;
line-height: 1 !important;
font-weight: 300 !important;
color: #fff !important;
}
.site-header .profile-glass,
.site-header .profile-glass .profile-icon{
color: #fff;
stroke: #fff;
}
.site-header .profile-glass:hover{
background: rgba(255, 255, 255, 0.25);
}
.site-header #authArea .auth-link{
color: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.4);
}
.site-header #authArea .auth-link:hover{
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.site-header .mobile-header-icon,
.site-header .mobile-header-icon span{
color: rgba(255, 255, 255, 0.95);
}
/* Header tam genişlik – Anmelden/Registrieren viewport sağına gidebilsin */
.site-header .header-inner.container{
width:100%;
max-width:100%;
padding-left:60px;
padding-right:36px;
box-sizing:border-box;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:26px 0; /* header daha yüksek */
gap:18px;
}
/* İki satırlı header: üstte brand+nav, altta arama (logo/slogan altında) */
.header-inner:has(.header-top-row){
flex-direction:column;
align-items:stretch;
padding:24px 0 16px; /* üst/alt boşluk daha da arttı */
gap:0;
}
.header-top-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
/* Otto-style mobile: Sortiment | Logo | 4 Icons + full-width search row – NUR mobil */
.mobile-header-left,
.mobile-header-icons{ display:none; }
.mobile-sortiment-label{ display:none; }
/* Desktop: mobil header blokları kesinlikle görünmesin */
@media (min-width: 881px){
.mobile-header-left,
.mobile-header-icons,
.mobile-sortiment-label{
display:none !important;
visibility:hidden !important;
pointer-events:none !important;
}
}
@media (max-width: 880px){
.site-header{
overflow-x:visible;
}
/* Header iki ayrı blok: 1) top row, 2) search row – arama her zaman altta */
.site-header .header-inner.container{
padding-left:16px;
padding-right:16px;
padding-bottom:16px;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
flex-wrap:nowrap !important;
gap:0;
overflow-x:visible;
}
/* SATIR 1: hamburger + theyr.de solda, ikonlar sağda – hamburger ile theyr.de arası boşluk */
.header-top-row.mobile-header-top,
.header-inner > .header-top-row{
display:flex !important;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-start;
width:100%;
min-width:0;
gap:14px;
order:1 !important;
flex-shrink:0;
}
.header-top-row{
display:flex !important;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-start;
width:100%;
min-width:0;
gap:14px;
order:1;
}
.mobile-header-left{
display:flex;
align-items:center;
justify-content:flex-start;
flex-shrink:0;
}
/* "Sortiment" yazısı mobilde görünmesin */
.mobile-sortiment-label{
display:none !important;
}
/* Soldaki profil/avatar mobilde kapalı */
.site-header .header-actions,
.site-header .profile-glass{
display:none !important;
visibility:hidden !important;
}
/* Brand (theyr.de): hamburger’in hemen yanında */
.site-header .header-top-row .brand{
margin-left:0 !important;
}
.header-top-row .brand{
display:flex !important;
align-items:center !important;
justify-content:flex-start;
gap:8px;
min-width:0;
margin:0;
margin-left:0 !important;
padding:0;
flex-shrink:0;
}
/* Sağ ikonları en sağa it */
.header-top-row .mobile-header-icons{
margin-left:auto;
}
/* Logo theyr yazısının sağında: metin order 1, logo order 2 */
.header-top-row .brand .brand-copy{
order:1;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
text-align:left;
margin:0;
padding:0;
gap:0;
}
.header-top-row .brand .logo-icon-wrap{
order:2;
height:42px;
width:auto;
min-width:42px;
flex-shrink:0;
display:inline-flex !important;
align-items:center;
justify-content:center;
margin:0;
padding:0;
overflow:visible;
}
.header-top-row .brand .logo-icon-wrap img{
height:42px !important;
width:auto !important;
max-height:42px !important;
}
.header-top-row .brand .brand-copy .brand-slogan{ display:none !important; }
.header-top-row .brand .brand-text{
font-size:1.125rem;
font-weight:800;
line-height:1.15;
margin:0;
padding:0;
letter-spacing:-0.01em;
color:#fff !important;
-webkit-font-smoothing:antialiased;
}
/* Sağ ikon grubu (flex’te margin-left:auto ile en sağda) */
.mobile-header-icons{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:nowrap;
gap:6px;
flex-shrink:0;
}
.mobile-header-icon{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
padding:2px 4px;
color:#fff;
text-decoration:none;
font-size:9px;
line-height:1.1;
min-width:0;
font-weight:600;
}
.mobile-header-icon svg{
width:18px;
height:18px;
}
.mobile-header-icon:hover,
.mobile-header-icon:focus{ color:#fff; opacity:1; }
.mobile-header-icon span{ color:#fff; font-weight:600; }
.mobile-header-icon svg{ flex-shrink:0; }
.mobile-header-icons .mobile-header-icon:nth-child(4){ display:none !important; }
/* Arama sadece altta: üst satırdaki Suche ikonunu gizle */
.header-top-row .mobile-header-icons #mobileHeaderSearch.mobile-header-icon{ display:none !important; }
/* SATIR 2: .mobile-header-search = navigation’dan tamamen bağımsız, kendi satırında block layout */
.header-inner .header-search-row.mobile-header-search,
.header-inner .mobile-header-search,
.header-inner > .header-search-row.mobile-header-search{
display:block !important;
visibility:visible !important;
position:relative !important;
width:100vw !important;
max-width:100vw !important;
min-width:0;
margin:12px 0 0 0 !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
padding:0 12px 14px 12px;
box-sizing:border-box;
flex-shrink:0;
order:2 !important;
align-self:stretch;
}
.header-inner .header-search-row.mobile-header-search .global-header-search,
.header-inner .mobile-header-search .global-header-search,
.header-inner .mobile-header-search #globalHeaderSearch.global-header-search{
position:relative !important;
display:block !important;
width:100% !important;
max-width:none !important;
min-width:0;
height:48px;
margin:0;
padding:0;
box-sizing:border-box;
background:transparent !important;
border:none;
box-shadow:none;
}
.header-inner .mobile-header-search .global-header-search-input{
display:block !important;
width:100% !important;
max-width:none !important;
height:48px !important;
min-height:48px;
font-size:16px;
color:#1a1a1a !important;
-webkit-text-fill-color:#1a1a1a !important;
background:#f3f3f3 !important;
border:none;
border-radius:24px;
padding:0 48px 0 16px;
box-sizing:border-box;
font-weight:400;
line-height:1.25;
-webkit-appearance:none;
appearance:none;
}
.header-inner .mobile-header-search .global-header-search-input::placeholder{
color:#555 !important;
opacity:1;
}
/* Arama ikonu: absolute sağda, input’u daraltmıyor */
.header-inner .mobile-header-search .global-header-search-btn{
position:absolute !important;
right:14px;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
padding:0;
margin:0;
border:none;
background:transparent;
color:#444;
display:flex;
align-items:center;
justify-content:center;
pointer-events:auto;
}
.header-inner .mobile-header-search .global-header-search-btn:hover{
color:#1a1a1a;
background:transparent;
}
.header-inner .mobile-header-search #globalHeaderSearch.global-header-search{
background:transparent !important;
max-width:none !important;
width:100% !important;
}
/* Brand: logo + theyr.de, gap 6px – mobilde sadece „theyr.de“ (logo z. B. weiter unten ausgeblendet) */
.header-top-row .brand{
gap:6px;
}
/* Hamburger en solda: grid column 1 zaten sol; brand ortada theyr.de */
.header-top-row .mobile-header-left{
justify-content:flex-start;
padding-left:0;
}
}
/* 414px / 360px: logo 50px, brand gap 6px */
@media (max-width: 414px){
.header-top-row .brand .logo-icon-wrap{ height:50px; width:auto; min-width:50px; }
.header-top-row .brand .logo-icon-wrap img{ height:50px !important; max-height:50px !important; }
.header-top-row .brand{ gap:6px; }
.header-top-row .brand .brand-text{ font-size:1.0625rem; }
}
@media (max-width: 360px){
.header-top-row .brand .logo-icon-wrap{ height:50px; width:auto; min-width:50px; }
.header-top-row .brand .logo-icon-wrap img{ height:50px !important; max-height:50px !important; }
.header-top-row .brand{ gap:6px; }
.header-top-row .brand .brand-text{ font-size:1rem; }
}
/* Arama çubuğu .header-top-row içine taşınınca: desktop’ta alt satırda, mobilde theyr yanında */
.header-top-row .header-search-row{
order:10;
flex-basis:100%;
width:100%;
margin-top:6px;
padding-top:0;
justify-content:flex-end;
}
@media (max-width: 880px){
.header-top-row .header-search-row{
order:10;
flex-basis:100%;
width:100%;
max-width:none;
}
.header-top-row .header-search-row .global-header-search{
max-width:none;
width:100%;
margin:0;
}
}
.header-search-row{
display:flex;
align-items:center;
justify-content:flex-end;
margin-top:6px;
padding-top:0;
}
.header-search-row .global-header-search{
max-width:480px;
width:100%;
margin-left:auto;
margin-right:0;
}
/* Global header search: beyaz kutu, yuvarlatılmış köşe, gri (hero arama ile aynı) */
.site-header #globalHeaderSearch.global-header-search,
.global-header-search{
display:flex !important;
align-items:center;
flex:1 1 auto;
max-width:420px;
min-width:140px;
height:44px;
padding:0 8px 0 14px;
margin:0 12px;
background:#fff;
border:1px solid #e0e0e0;
border-radius:12px;
box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.global-header-search-input{
flex:1;
min-width:0;
height:100%;
padding:0 10px 0 0;
border:none;
background:transparent;
color:#1a1a1a;
font-size:15px;
outline:none;
}
.global-header-search-input::placeholder{
color:#999;
}
.global-header-search-input:focus,
.global-header-search-input:focus-visible,
.global-header-search:focus-within{
outline:none !important;
box-shadow:none !important;
}
.global-header-search:focus-within{
box-shadow:none !important;
}
.global-header-search-btn{
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
padding:0;
border:none;
border-radius:8px;
background:transparent;
color:#666;
cursor:pointer;
}
.global-header-search-btn:hover{
background:#f0f0f0;
color:#1a1a1a;
}
@media (max-width: 900px){
.site-header #globalHeaderSearch.global-header-search,
.global-header-search{ max-width:220px; margin:0 8px; min-width:120px; }
}
@media (max-width: 480px){
.site-header #globalHeaderSearch.global-header-search,
.global-header-search{ max-width:160px; min-width:100px; margin:0 6px; padding:0 10px 0 12px; }
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
height:34px;
width:auto;
display:block;
}
.nav{ display:flex; align-items:center; gap:18px; }
.nav-link{
padding:10px 10px;
border-radius:12px;
color:rgba(255,255,255,.78);
}
.nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.nav-link.active{ background: rgba(255,255,255,.08); color:#fff; }
.nav-item-dropdown{ position: relative; display: inline-block; }
.nav-item-dropdown .nav-link{ display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-arrow{ font-size: 0.65em; opacity: 0.85; margin-left: 2px; }
.nav-dropdown{
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 520px;
max-width: 600px;
background: linear-gradient(180deg, rgba(18,22,38,.98), rgba(14,16,30,.99));
border: 1px solid rgba(255,255,255,.1);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.45);
padding: 16px;
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown.is-open .nav-dropdown{
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(8px);
}
.nav-dropdown-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 14px;
}
.nav-dropdown-grid--vergleich{
grid-template-columns: repeat(3, 1fr);
max-height: 280px;
overflow-y: auto;
}
.nav-dropdown-grid--tipps{
grid-template-columns: repeat(3, 1fr);
max-height: 280px;
overflow-y: auto;
}
.nav-dropdown-grid--kategorien{
grid-template-columns: repeat(3, 1fr);
max-height: 280px;
overflow-y: auto;
}
.nav-dropdown--vergleich{ min-width: 560px; max-width: 640px; }
.nav-dropdown--tipps{ min-width: 560px; max-width: 640px; }
.nav-dropdown--kategorien{ min-width: 560px; max-width: 640px; }
.nav-dropdown-card{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: background .15s ease;
}
.nav-dropdown-card:hover{ background: rgba(255,255,255,.06); color: inherit; }
.nav-dropdown-card-img{
width: 72px;
height: 52px;
border-radius: 8px;
object-fit: cover;
background: rgba(0,0,0,.3);
flex-shrink: 0;
}
.nav-dropdown-card-img--placeholder{
background: rgba(255,255,255,.08);
}
.nav-dropdown-card-body{ min-width: 0; }
.nav-dropdown-card-title{ font-weight: 700; font-size: 0.9rem; margin: 0 0 4px; line-height: 1.25; }
.nav-dropdown-card-excerpt{ font-size: 0.78rem; color: rgba(255,255,255,.7); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.nav-dropdown-footer{ display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-dropdown-footer .btn{ padding: 8px 16px; font-size: 0.9rem; }
.nav-dropdown-empty{ margin: 0; padding: 8px 0; font-size: 0.85rem; }
.menu-btn{
display:none;
width:44px; height:40px;
border:1px solid var(--border);
background: rgba(255,255,255,.05);
border-radius:14px;
padding:10px;
cursor:pointer;
}
.menu-btn span{
display:block;
height:2px;
background: rgba(255,255,255,.85);
border-radius:2px;
margin:5px 0;
}
/* Mobile menu (smooth) */
.mobile-menu{
/* display:none KALKTI */
display:block;
border-top:1px solid var(--border);
background: rgba(8, 12, 20, .75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* animasyon */
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-10px);
transition: max-height .32s ease, opacity .22s ease, transform .22s ease;
pointer-events: none;
}
/* Açık hali */
.mobile-menu.is-open{
max-height: 420px;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.mobile-inner{
padding:14px 0 18px;
display:grid;
gap:10px;
}
.mobile-link{
padding:12px 14px;
border:1px solid var(--border);
background: rgba(255,255,255,.05);
border-radius:14px;
color:rgba(255,255,255,.9);
}
.mobile-menu{
display:none;
}
.mobile-menu.is-open{
display:block;
}
.page{ padding:26px 0 44px; }
/* Anasayfa: hero yukarı (az üst padding), hero altında nefes alacak boşluk */
#homeMain.page{ padding-top:4px !important; }
/* Breadcrumb boşsa hiç yer kaplamasın */
#homeBreadcrumbs:empty{ display:none !important; margin:0 !important; padding:0 !important; min-height:0 !important; }
.hero{
display:grid;
grid-template-columns: 1.2fr .9fr;
gap:22px;
align-items:stretch;
margin-top:8px;
}
.hero-text{
padding:26px;
border:1px solid var(--border);
border-radius: var(--radius);
background: rgba(255,255,255,.04);
box-shadow: var(--shadow);
}
.hero-text h1{
margin:0 0 10px;
font-size: clamp(28px, 3.2vw, 44px);
letter-spacing:-.02em;
}
.hero-text p{
margin:0 0 18px;
line-height:1.55;
color:var(--muted);
font-size: 16px;
}
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.card{
border: 1px solid rgba(255, 106, 0, 0.22);
background: linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
border-radius: var(--radius);
box-shadow: var(--shadow), 0 0 0 1px rgba(255, 106, 0, 0.05);
padding: 18px;
}
.card:hover{
border-color: rgba(255, 106, 0, 0.4);
box-shadow: var(--shadow), 0 0 0 1px rgba(255, 106, 0, 0.1);
}
.hero-card{ display:flex; }
.card-head{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:8px;
margin-bottom:10px;
}
.badge{
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
border: 1px solid rgba(255, 106, 0, 0.25);
background: rgba(255, 106, 0, 0.1);
color: #ffffff;
}
.rating{ color: #ffffff; }
.card h3{ margin:0 0 8px; }
.card p{ margin:0 0 14px; }
.card-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:10px;
margin-bottom:14px;
}
.mini{
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
display:flex;
justify-content:space-between;
gap:10px;
font-size:13px;
}
.mini .k{ color: rgba(255,255,255,.65); }
.mini .v{ color: rgba(255,255,255,.95); }
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color:#fff;
cursor:pointer;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(0px); }
.btn.primary{
background: linear-gradient(135deg, rgba(106,167,255,.9), rgba(124,92,255,.85));
border-color: rgba(255,255,255,.18);
}
.btn.ghost{
background: transparent;
}
.btn.block{ width:100%; }
.btn.small{ padding:10px 12px; border-radius:12px; }
.section{ margin-top:26px; }
/* Anasayfa: Schnell finden ile Beliebt / Kategorien arası daha az boşluk */
#homeMain .section{ margin-top:12px; }
#homeMain .section-head{ margin-bottom:8px; }
.section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
.section-head h2{ margin:0; font-size:20px; }
.grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:14px;
}
.site-footer{
border-top:1px solid var(--border);
background: rgba(8, 12, 20, .55);
backdrop-filter: blur(10px);
}
.footer-inner{
display:flex;
flex-wrap: wrap;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 0;
}
.footer-platform-note{
width:100%;
font-size:13px;
line-height:1.45;
margin:0 0 6px 0;
}
.affiliate-note{
width:100%;
font-size:12px;
color:var(--muted);
margin:0 0 8px 0;
line-height:1.4;
}
.footer-links{ display:flex; gap:14px; }
@media (max-width: 880px){
.hero{ grid-template-columns: 1fr; }
.grid{ grid-template-columns: 1fr; }
.desktop-nav{ display:none; }
.menu-btn{ display:inline-flex; flex-direction:column; justify-content:center; }
}
.brand{
display:flex;
align-items:center;
gap:10px;
}
.brand-text{
font-size:26px;
font-weight:600;
letter-spacing:.2px;
color:#fff; /* istersen var(--text) */
}
/* Logo boyutu */
.logo{
height:90px; /* ideal boy */
width:auto;
}
@media (max-width: 480px){
.brand-text{ display:none; }
}
@media (max-width: 480px){
.logo{
height:40px;
}
}
/*buraya kadar index*/
.filter-bar{
display:flex;
gap:12px;
margin-bottom:18px;
flex-wrap:wrap;
}
.filter-bar input,
.filter-bar select{
padding:12px 14px;
border-radius:14px;
border:1px solid var(--border);
background:rgba(255,255,255,.05);
color:#fff;
}
.compare-grid{
grid-template-columns: repeat(3, minmax(0,1fr));
}
.compare-card{
display:flex;
flex-direction:column;
gap:12px;
}
.compare-card-highlight{
animation: compare-card-highlight 2s ease-out;
}
@keyframes compare-card-highlight {
0% { box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.7); }
60% { box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.35); }
100% { box-shadow: none; }
}
.compare-head{
display:flex;
justify-content:space-between;
align-items:center;
}
.compare-meta{
display:flex;
gap:8px;
flex-wrap:wrap;
font-size:13px;
color:var(--muted);
}
.compare-actions{
display:flex;
gap:10px;
margin-top:auto;
}
/* Vergleich: Top Filter Bar (Search + Selects) */
#compareTopFilters{
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 14px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 10px 30px rgba(0,0,0,0.25);
}
/* İçindeki input/select/button hepsi aynı “panel” dilinde olsun */
#compareTopFilters input,
#compareTopFilters select{
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: #e5e7eb;
border-radius: 12px;
padding: 12px 12px;
min-height: 44px;
}
/* Ürün sayısı (Vergleich oben) */
.compare-product-count,
#compareProductCount{
align-self: center;
font-size: 14px;
white-space: nowrap;
margin-right: 4px;
}
/* Search input tam genişlik */
#compareSearchInput{ width: 100%; }
#compareTopFilters input::placeholder{
color: rgba(226,232,240,0.45);
}
/* Focus: bağırmadan netlik */
#compareTopFilters input:focus,
#compareTopFilters select:focus{
outline: none;
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.08);
}
/* Button aynı yükseklik ve uyum */
#compareTopFilters .btn{
min-height: 44px;
border-radius: 12px;
}
@media (max-width: 900px){
#compareTopFilters{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
}
/* Vergleich: ürün listesi her zaman GRID olsun (Finder sonrası da dahil) */
#compareList.grid.compare-grid{
display: grid; /* .grid flex ise bunu ezer */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
/* Kartlar taşmasın */
#compareList.grid.compare-grid > .compare-card{
width: 100%;
min-width: 0;
}
/* Mobil: alt alta (Tablet / kleiner Desktop) */
@media (max-width: 900px){
#compareList.grid.compare-grid{
grid-template-columns: 1fr;
}
}
#compareList.grid.compare-grid{
flex-wrap: initial; /* flex etkisini tamamen iptal */
}
/* ========== Vergleich Mobil: Einzelkarten-Fokus (max-width: 768px) ========== */
/* Dikey scroll-snap: sadece mobil Vergleich aktifken (html.vergleich-mobile-snap JS ile eklenir) */
html.vergleich-mobile-snap{
scroll-snap-type: y mandatory;
overflow-x: hidden;
}
html.vergleich-mobile-snap body{
overflow-x: hidden;
}
@media (max-width: 768px){
body.page-vergleich #compareList.mobile-compare-active{
display: block !important;
grid-template-columns: none;
gap: 0;
padding: 0;
margin: 0 -var(--page-padding, 14px);
max-width: none;
}
body.page-vergleich #compareList.mobile-compare-active .mobile-compare-flow{
display: flex;
flex-direction: column;
gap: 0;
min-height: 100vh;
}
body.page-vergleich .mobile-category-section{
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: 12px 0 24px;
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: 0;
}
body.page-vergleich .mobile-category-title{
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
padding: 8px var(--page-padding, 14px) 10px;
flex-shrink: 0;
}
body.page-vergleich .mobile-products-rail{
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
padding: 0 var(--page-padding, 14px);
flex: 1;
min-height: 0;
scroll-padding-inline: var(--page-padding, 14px);
}
body.page-vergleich .mobile-products-rail .compare-card{
flex: 0 0 88%;
min-width: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
width: 88%;
max-width: 380px;
margin: 0;
}
/* Dikey: Kategorie-Blöcke snap; yatay: Karten snap */
/* Einzelkarte füllt den Kontext – kein zweites volles Karte sichtbar */
body.page-vergleich .mobile-products-rail .compare-card .card-img,
body.page-vergleich .mobile-products-rail .compare-card .compare-card-cover{
border-radius: 16px;
}
/* Leichter Preview der nächsten Karte am rechten Rand */
body.page-vergleich .mobile-products-rail::after{
content: "";
flex: 0 0 12px;
width: 12px;
scroll-snap-align: end;
}
/* Oberer Bereich mobil etwas reduzieren, Fokus auf Karten */
body.page-vergleich .page #compareTopFilters{
padding: 10px 12px;
gap: 8px;
}
body.page-vergleich .page #compareTopFilters .compare-product-count{
font-size: 13px;
}
body.page-vergleich .page #compareSidebar{
display: none;
}
}
/* Mikro-Onboarding: Hinweis nur mobil, erstes Mal */
.vergleich-mobile-onboarding{
position: absolute;
bottom: 24px;
left: var(--page-padding, 14px);
right: var(--page-padding, 14px);
z-index: 8;
padding: 12px 16px;
border-radius: 14px;
font-size: 13px;
line-height: 1.4;
text-align: center;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
color: rgba(226,232,240,0.95);
pointer-events: none;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.vergleich-mobile-onboarding.is-hidden{
opacity: 0;
visibility: hidden;
}
.vergleich-mobile-onboarding span{
display: block;
margin-top: 4px;
}
.vergleich-mobile-onboarding span:first-child{ margin-top: 0; }
/* Kapalı başlasın */
#compareFilters{
display: none;
}
/* Açık olunca göster */
#compareFilters.is-open{
display: block;
}
/* Toggle buton: panel gibi dursun */
.filters-toggle{
width: 100%;
margin: 12px 0;
justify-content: space-between;
}
#compareFilters{ display:block; }
@media (max-width: 900px){
#compareFilters{ display:none; }
#compareFilters.is-open{ display:block; }
}
/* Details butonu – sakin gri */
.compare-card .btn.primary{
background: #ff6a00;
color: #ffffff !important;
border: 1px solid rgba(255,255,255,.2);
font-weight: 600;
box-shadow: 0 4px 16px rgba(255, 106, 0, 0.35);
}
.compare-card .btn.primary:hover{
background: #e55f00;
color: #ffffff !important;
border-color: rgba(255,255,255,.3);
box-shadow: 0 6px 20px rgba(255, 106, 0, 0.45);
}
#finderTopPickLink{
background: #e5e7eb;
color: #0f172a;
border: 1px solid #cbd5e1;
box-shadow: none;
}
#finderTopPickLink:hover{
background: #dbeafe;
border-color: #bfdbfe;
}
/* Filter anzeigen butonu – gri arka plan */
/* Filter anzeigen butonu – gri arka plan */
#filtersToggle.btn.ghost{
background: #e5e7eb; /* açık gri */
color: #0f172a; /* koyu yazı */
border: 1px solid #cbd5e1;
box-shadow: none;
}
/* Hover – çok hafif geri bildirim */
#filtersToggle.btn.ghost:hover{
background: #dbeafe;
border-color: #bfdbfe;
}
#filtersToggle.btn.ghost{
font-weight: 500;
}
/* Desktop: toggle butonu da göster (checklist/filter paneli açılabilsin) */
/* @media (min-width: 901px){ #filtersToggle{ display:none; } } – kaldırıldı */
.filters-toggle{
margin: 14px 0 18px;
background: rgba(15, 23, 42, 0.65);
border: 1px dashed rgba(255,255,255,0.18);
color: rgba(226,232,240,0.9);
font-weight: 500;
}
.fav-btn{
background:none;
border:none;
font-size:22px;
color:#ffd66a;
cursor:pointer;
margin-bottom:6px;
}
/* ===== Detail Page ===== */
.detail-hero{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:14px;
align-items:start;
}
.detail-left h1{
margin:6px 0 6px;
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing:-.02em;
}
.detail-title{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
}
.score{
min-width:140px;
text-align:right;
}
.score-num{
font-size:44px;
font-weight:700;
line-height:1;
}
.score-sub{ font-size:13px; }
.score-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:10px;
margin-top:12px;
}
.detail-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:14px;
}
.detail-right{
display:grid;
gap:14px;
}
.why-list, .pc-list{
margin:10px 0 0;
padding-left:18px;
color: rgba(255,255,255,.78);
}
.why-list li, .pc-list li{ margin:6px 0; }
.proscons{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:14px;
}
.table-card{ overflow:auto; }
.specs{
width:100%;
border-collapse:collapse;
}
.specs th, .specs td{
padding:12px 10px;
border-bottom:1px solid rgba(255,255,255,.10);
vertical-align:top;
}
.specs th{
width:34%;
color: rgba(255,255,255,.70);
font-weight:600;
text-align:left;
}
.detail-trust{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){
.detail-hero{ grid-template-columns:1fr; }
.proscons{ grid-template-columns:1fr; }
.detail-trust{ grid-template-columns:1fr; }
.score{ text-align:left; min-width:auto; }
}
/* ===== Product Media (placeholder) ===== */
.product-media{
margin-top:14px;
display:grid;
gap:10px;
}
.product-img{
width:100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.12);
background:
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
radial-gradient(600px 200px at 30% 40%, rgba(106,167,255,.20), transparent 60%),
radial-gradient(500px 200px at 80% 10%, rgba(124,92,255,.20), transparent 60%);
box-shadow: var(--shadow);
}
.product-thumbs{
display:flex;
gap:10px;
}
.thumb{
width:44px;
height:34px;
border-radius:12px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
cursor:pointer;
}
.thumb.active{
border-color: rgba(255,255,255,.30);
background: rgba(255,255,255,.10);
}
/* ===== Similar products ===== */
.similar-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.similar-card{
display:flex;
flex-direction:column;
gap:10px;
}
.sim-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:2px;
}
.sim-img{
width:64px;
height:44px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
}
.sim-actions{
display:flex;
gap:10px;
margin-top:auto;
}
@media (max-width: 900px){
.similar-grid{ grid-template-columns: 1fr; }
.product-img{ aspect-ratio: 4 / 3; }
}
/*ürün resmi icin detail safada*/
.product-img-real{
display:block;
width:100%;
height:auto;
aspect-ratio:16/9;
object-fit:contain;
border-radius:18px;
border:1px solid rgba(255,255,255,.2);
background:#111;
}
/*tipss sayfasi css*/
/* ===== Tipps Page ===== */
.sr-only{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.tips-hero{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
}
.tips-hero h1{
margin:8px 0 6px;
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing:-.02em;
}
.tips-tools{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
}
.tips-tools input,
.tips-tools select{
padding:12px 14px;
border-radius:14px;
border:1px solid var(--border);
background:rgba(255,255,255,.05);
color:#fff;
min-width: 220px;
}
.tips-tools input::placeholder{ color: rgba(255,255,255,.45); }
.tip-card{
padding:0;
overflow:hidden;
}
.tip-body{
padding:16px 18px 18px;
}
.tip-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}
.tip-cover{
display:block;
width:100%;
aspect-ratio: 16 / 9;
border-bottom:1px solid rgba(255,255,255,.10);
background:
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
radial-gradient(600px 200px at 30% 40%, rgba(106,167,255,.18), transparent 60%),
radial-gradient(500px 200px at 80% 10%, rgba(124,92,255,.18), transparent 60%);
}
.tip-card h3{
margin:0 0 8px;
font-size:18px;
}
.tip-card h3 a:hover{ text-decoration:underline; }
.tips-featured{
grid-template-columns: 1.4fr 1fr 1fr;
}
.tip-featured .tip-cover{ aspect-ratio: 21/9; }
.tips-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pagination{
margin-top:16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
@media (max-width: 900px){
.tips-hero{ flex-direction:column; align-items:flex-start; }
.tips-tools{ width:100%; justify-content:flex-start; }
.tips-tools input, .tips-tools select{ width:100%; min-width:auto; }
.tips-featured, .tips-grid{ grid-template-columns:1fr; }
}
/* Tipps sayfası: içerik alanını daha açık göster */
.tips-page-bg{
padding: 18px;
border-radius: 22px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
}
/* ===== Article / Tipp Detail ===== */
.article{ padding:20px; }
.article-head h1{
margin:10px 0 8px;
font-size: clamp(24px, 2.8vw, 36px);
letter-spacing:-.02em;
}
.article-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.article-cover{
margin:14px 0 10px;
width:100%;
aspect-ratio: 16/9;
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.12);
background:
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
radial-gradient(600px 200px at 30% 40%, rgba(106,167,255,.18), transparent 60%),
radial-gradient(500px 200px at 80% 10%, rgba(124,92,255,.18), transparent 60%);
}
.article-content{
color: rgba(255,255,255,.88);
line-height:1.7;
font-size: 16px;
}
.article-content h2{
margin:18px 0 8px;
font-size:20px;
}
.article-content ul{
margin:10px 0 0;
padding-left:18px;
color: rgba(255,255,255,.82);
}
.article-callout{
margin:14px 0;
padding:14px 16px;
border-radius: 16px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
}
.article-foot{
margin-top:16px;
display:flex;
gap:10px;
flex-wrap:wrap;
}
/* ===== Kategorien Page ===== */
.cat-hero{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
}
.cat-hero h1{
margin:8px 0 6px;
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing:-.02em;
}
.cat-search{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
justify-content:flex-end;
}
.cat-search input{
padding:12px 14px;
border-radius:14px;
border:1px solid var(--border);
background:rgba(255,255,255,.05);
color:#fff;
min-width: 240px;
}
.cat-search input::placeholder{ color: rgba(255,255,255,.45); }
.cat-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Gruplu görünümde: container blok, gruplar alt alta; sadece iç grid kartları 3 sütunda */
.cat-grid.cat-grid--grouped {
display: block;
}
.cat-grid.cat-grid--grouped .cat-grid-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.cat-grid.cat-grid--grouped .cat-grid-inner .cat-card {
min-width: 0;
}
.cat-group {
margin-bottom: 1.75rem;
}
.cat-group:last-child {
margin-bottom: 0;
}
.cat-group-title {
font-size: 1rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 0.75rem 0;
letter-spacing: 0.02em;
padding: 10px 16px 10px 0;
background: rgba(0, 0, 0, 0.35);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: 0 10px 10px 0;
display: inline-block;
border-left: 3px solid rgba(120, 140, 255, 0.5);
}
.cat-group .cat-grid-inner {
margin-top: 0;
}
.cat-card{
display:flex;
flex-direction:column;
gap:10px;
}
.cat-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.cat-icon{
width:44px;
height:40px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.cat-actions{
display:flex;
gap:10px;
margin-top:auto;
flex-wrap:wrap;
}
.cat-node-chips{
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cat-node-chip{
font-size: 0.8rem;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.9);
text-decoration: none;
transition: background .15s, border-color .15s;
}
.cat-node-chip:hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.3);
color: #fff;
}
.cat-mini-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cat-mini{
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.cat-mini:hover{ transform: translateY(-1px); }
@media (max-width: 900px){
.cat-hero{ flex-direction:column; align-items:flex-start; }
.cat-search{ width:100%; justify-content:flex-start; }
.cat-search input{ width:100%; min-width:auto; }
.cat-grid, .cat-mini-grid{ grid-template-columns:1fr; }
.cat-grid.cat-grid--grouped .cat-grid-inner{ grid-template-columns:1fr; }
.cat-card{ min-width:0; }
}
/* ===== Home Page ===== */
.home-hero{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:14px;
align-items:start;
margin-bottom:16px;
}
.home-hero-left h1{
margin:10px 0 10px;
font-size: clamp(28px, 3.2vw, 46px);
letter-spacing:-.02em;
}
.home-hero-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:14px;
}
.home-hero-stats{
margin-top:14px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:10px;
}
.home-hero-right{
display:grid;
gap:14px;
}
.home-cats{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Kategorien entdecken: section-head link (Alle Kategorien →) turuncu */
.section:has(.home-cats) .section-head .link.blur-bg{
background: linear-gradient(135deg, rgba(255,106,0,.28), rgba(255,106,0,.2));
border: 1px solid rgba(255,106,0,.35);
color: #ffffff;
}
.section:has(.home-cats) .section-head .link.blur-bg:hover{
background: linear-gradient(135deg, rgba(255,106,0,.4), rgba(255,106,0,.3));
border-color: rgba(255,106,0,.5);
box-shadow: 0 6px 28px rgba(255,106,0,.25);
color: #ffffff;
}
.home-cat{
display:flex;
align-items:center;
gap:12px;
padding:16px 18px;
background: linear-gradient(135deg, rgba(255,106,0,.45), rgba(255,106,0,.32));
border: 1px solid rgba(255,106,0,.55);
color: #ffffff;
border-radius: var(--radius, 12px);
box-shadow: 0 4px 20px rgba(255,106,0,.25), 0 2px 12px rgba(0,0,0,.15);
}
.home-cat .home-cat-icon,
.home-cat .cat-icon{
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.35);
}
.home-cat .cat-icon img.cat-theyr-icon{
width: 36px;
height: 36px;
object-fit: contain;
}
.home-cat strong{ display:block; color: #ffffff; }
.home-cat .muted{ color: rgba(255,255,255,.9); }
.home-cat .home-cat-count{ margin-top: 4px; font-size: 0.85rem; color: rgba(255,255,255,.85); }
.home-cat:hover{
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(255,106,0,.6), rgba(255,106,0,.45));
box-shadow: 0 8px 28px rgba(255,106,0,.35), 0 0 0 1px rgba(255,255,255,.2);
border-color: rgba(255,106,0,.75);
}
.home-compare{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Beliebt auf theyr – horizontal scroll */
.home-popular-section .section-head h2 { margin-bottom: 4px; }
.home-popular-wrap {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.home-popular-arrow {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease, border-color .15s ease;
}
.home-popular-arrow:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.25);
}
.home-popular-arrow:disabled,
.home-popular-arrow[aria-hidden="true"] {
opacity: 0.4;
cursor: default;
}
.home-popular-strip {
flex: 1;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding-bottom: 8px;
margin: 0 -4px;
}
.home-popular-strip__scroll {
display: flex;
gap: 10px;
min-width: min-content;
padding: 4px 0;
}
.home-popular-strip__scroll .home-popular-card {
flex: 0 0 auto;
width: 160px;
max-width: 160px;
display: block;
padding: 12px;
border-radius: var(--radius, 12px);
background: #fff;
border: 1px solid rgba(0,0,0,.08);
text-decoration: none;
color: #1a1a1a;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-popular-strip__scroll .home-popular-card:hover {
transform: translateY(-2px);
border-color: rgba(0,0,0,.12);
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.home-popular-strip__scroll .home-popular-card img {
width: 100%;
height: auto;
max-height: 136px;
aspect-ratio: 1;
object-fit: contain;
border-radius: 8px;
background: rgba(0,0,0,.04);
}
.home-popular-strip__scroll .home-popular-card span {
display: block;
margin-top: 10px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #1a1a1a;
}
@media (max-width: 640px) {
.home-popular-arrow {
width: 36px;
height: 36px;
font-size: 20px;
}
.home-popular-wrap {
gap: 4px;
}
.home-popular-strip__scroll {
gap: 6px;
}
.home-popular-strip__scroll .home-popular-card {
width: 100px;
max-width: 100px;
padding: 8px;
border-radius: 8px;
}
.home-popular-strip__scroll .home-popular-card img {
max-height: 84px;
border-radius: 6px;
}
.home-popular-strip__scroll .home-popular-card span {
margin-top: 6px;
font-size: 11px;
}
}
/* Neue Produkte: artık aynı strip yapısı (home-popular-*) kullanıyor, ek grid CSS yok */
.grid.home-new-products {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-new-product-card img {
max-width: 160px;
max-height: 160px;
margin: 0 auto;
display: block;
}
/* Vergleich: Zuletzt angesehen – kleine Karten, vor Finder */
.recent-viewed-vergleich {
margin-bottom: 12px;
}
.recent-viewed-vergleich__title {
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 8px 0;
color: var(--text, #e8e8e8);
}
.recent-viewed-row {
display: flex;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
padding: 4px 0;
-webkit-overflow-scrolling: touch;
}
.recent-viewed-row .recent-viewed-card {
flex: 0 0 auto;
width: 72px;
max-width: 72px;
padding: 6px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
transition: border-color .15s, transform .15s;
}
.recent-viewed-row .recent-viewed-card:hover {
border-color: rgba(255,255,255,.25);
transform: translateY(-1px);
}
.recent-viewed-row .recent-viewed-card img {
width: 100%;
height: auto;
max-height: 52px;
object-fit: contain;
border-radius: 4px;
}
.recent-viewed-row .recent-viewed-card .home-card-price {
display: block;
margin-top: 4px;
font-size: 0.78rem;
font-weight: 700;
color: #0f766e;
line-height: 1.2;
}
.recent-viewed-row .recent-viewed-card span {
display: block;
margin-top: 4px;
font-size: 10px;
line-height: 1.2;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
@media (max-width: 980px){
.grid.home-cats,
.grid.home-compare,
.grid.tips-grid,
.grid.home-new-products,
.grid.home-method{
grid-template-columns: 1fr;
}
}
/* Noch unsicher? Finder CTA */
.home-finder-cta__card {
text-align: center;
padding: 28px 24px;
max-width: 480px;
margin: 0 auto;
}
.home-finder-cta__title {
margin: 0 0 8px;
font-size: 1.35rem;
}
.home-finder-cta__text {
margin: 0 0 16px;
color: var(--muted);
}
.home-method{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px){
.home-hero{ grid-template-columns:1fr; }
.home-cats, .home-compare, .home-method{ grid-template-columns:1fr; }
.home-hero-stats{ grid-template-columns:1fr; }
}
/* ===== Home Search – ca. 5 % kompakter ===== */
.home-search{
margin-top: 4px;
margin-bottom: 2px;
display: grid;
gap: 5px;
overflow: visible;
}
.home-search .home-search-top{
margin-bottom: 0;
}
.home-search h2{
margin: 1px 0 0;
font-size: 15px;
}
.home-search .home-search-top .muted{
margin: 0 0 3px;
font-size: 0.8rem;
}
.home-search-form{
display: flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
}
.home-search-form input,
.home-search-form select{
padding: 7px 9px;
border-radius: 9px;
border: 1px solid var(--border);
background: rgba(255,255,255,.05);
color: #fff;
font-size: 13px;
}
.home-search-suggest-wrap{
position: relative;
flex: 1;
min-width: 240px;
overflow: visible;
}
.home-search-form input{
flex: 1;
min-width: 240px;
}
.home-search-form .home-search-suggest-wrap input{
width: 100%;
min-width: 0;
}
.home-search-form input::placeholder{ color: rgba(255,255,255,.45); }
/* Hero altı arama kutusu: beyaz, yuvarlatılmış köşe, gri (input + dropdown aynı stil) */
#homeSearch .home-search-suggest-wrap{
border-radius: 12px;
overflow: visible;
}
#homeSearch #homeSearchInput{
background: #fff !important;
border: 1px solid #e0e0e0 !important;
border-radius: 12px !important;
color: #1a1a1a !important;
padding: 10px 14px !important;
min-height: 44px;
}
#homeSearch #homeSearchInput::placeholder{
color: #999 !important;
}
#homeSearch #homeSearchInput:focus,
#homeSearch #homeSearchInput:focus-visible{
border-color: #999 !important;
outline: none !important;
box-shadow: none !important;
}
/* Açılan arama kutusu: kutu kompakt, liste alanı büyük */
.home-search-results{
position: absolute;
left: 0;
right: 0;
top: 100%;
margin-top: 6px;
max-height: 420px;
min-width: 320px;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
border-radius: 12px;
border: 1px solid #e0e0e0;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
z-index: 9999;
}
.home-search-results::-webkit-scrollbar{
display: none;
}
.home-search-results[hidden]{ display: none !important; }
#headerSearchResults{
z-index: 99999;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Detail variants (color/size/type) */
.detail-variants{
margin-top: 8px;
position: relative;
z-index: 6;
}
/* Safari/overlay edge-cases: varyant alanı her zaman tıklanabilir kalsın. */
.detail-variants,
.detail-variants *{
pointer-events: auto !important;
}
.detail-variants-title{
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin: 4px 0 8px;
}
.detail-variants-grid{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.detail-variant{
width: 104px;
text-decoration: none;
color: rgba(255,255,255,.85);
display: grid;
gap: 8px;
justify-items: center;
position: relative;
z-index: 7;
touch-action: manipulation;
}
.detail-variant img{
width: 88px;
height: 88px;
border-radius: 14px;
object-fit: contain;
object-position: center;
display: block;
border: 1px solid rgba(0,0,0,.1);
background: rgba(255,255,255,.94);
padding: 5px;
box-sizing: border-box;
box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.detail-variant.is-active img{
border-color: rgba(99,102,241,.85);
box-shadow: 0 0 0 2px rgba(99,102,241,.28), 0 4px 14px rgba(0,0,0,.2);
}
.detail-variant-label{
font-size: 11px;
line-height: 1.2;
text-align: center;
max-width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* Farb-Punkte (product.variants[].color + label) – detail */
#colorVariants {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
#colorVariants:empty {
display: none;
margin: 0;
}
.detail-color-variants:empty {
display: none;
}
.color-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
border: none;
background: transparent;
cursor: pointer;
color: rgba(255, 255, 255, 0.88);
font: inherit;
padding: 2px 4px;
border-radius: 8px;
transition: background 0.2s ease;
text-align: left;
touch-action: manipulation;
}
.color-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.color-item.is-active .color-label {
font-weight: 600;
}
.color-item.is-active .color-dot {
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.45);
border-color: rgba(99, 102, 241, 0.85);
}
.color-dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid #ccc;
flex-shrink: 0;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.color-dot:hover {
transform: scale(1.2);
border-color: #000;
}
.color-label {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Inline product variants (product.variants[] – buttons, no navigation) */
.detail-inline-variant{
width: 104px;
padding: 6px 4px 8px;
border: none;
background: transparent;
cursor: pointer;
color: rgba(255,255,255,.88);
font: inherit;
display: grid;
gap: 8px;
justify-items: center;
border-radius: 14px;
transition: box-shadow .2s ease, background .2s ease;
position: relative;
z-index: 7;
touch-action: manipulation;
}
.detail-inline-variant:hover{
background: rgba(255,255,255,.07);
}
/* Bild-„Karte“: heller Hintergrund damit dunkle Geräte (z. B. schwarzes iPhone) erkennbar bleiben */
.detail-inline-variant .detail-inline-variant-img{
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.94);
border: 1px solid rgba(0,0,0,.1);
box-shadow: 0 2px 10px rgba(0,0,0,.18);
box-sizing: border-box;
}
.detail-inline-variant .detail-inline-variant-img img.detail-variant-img{
width: 100%;
height: 100%;
border-radius: 0;
object-fit: contain;
object-position: center;
display: block;
border: none;
background: transparent;
padding: 5px;
box-sizing: border-box;
}
.detail-inline-variant.is-active .detail-inline-variant-img{
border-color: rgba(99,102,241,.85);
box-shadow: 0 0 0 2px rgba(99,102,241,.28), 0 4px 14px rgba(0,0,0,.2);
}
.detail-inline-variant.is-active{
background: rgba(99,102,241,.14);
box-shadow: 0 0 0 1px rgba(99,102,241,.3);
}
.detail-inline-variant-label{
font-size: 11px;
line-height: 1.2;
text-align: center;
max-width: 100%;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* Zwei-Stufen-Varianten — kompakt, ohne horizontales Scrollen (3 Farben + 4 Speicher im Raster) */
/* Produktdetail: Link kopieren */
.detail-share-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.08);
}
.detail-share-row__feedback{
font-size: 12px;
}
.page-detail .detail-share-row .btn.ghost.small{
font-size: 12px;
padding: 6px 12px;
}
/* Erstes Rendering vor JS (Detail) */
.detail-loading-skeleton__text{
margin: 0 0 12px;
}
.detail-loading-skeleton__bars{
display: flex;
flex-direction: column;
gap: 8px;
max-width: 420px;
}
.detail-loading-skeleton__bars span{
display: block;
height: 10px;
border-radius: 6px;
background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 100%);
background-size: 200% 100%;
animation: detail-skel-shimmer 1.2s ease-in-out infinite;
}
.detail-loading-skeleton__bars span:nth-child(2){ max-width: 85%; animation-delay: .15s; }
.detail-loading-skeleton__bars span:nth-child(3){ max-width: 60%; animation-delay: .3s; }
@keyframes detail-skel-shimmer{
0%{ background-position: 100% 0; }
100%{ background-position: -100% 0; }
}
.detail-tier-variants{
margin-top: 8px;
padding: 10px 12px 12px;
border-radius: 12px;
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.08);
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.detail-tier-variants .detail-variants-title{
margin-top: 0;
margin-bottom: 4px;
letter-spacing: .12em;
font-size: 10px;
color: rgba(255,255,255,.6);
}
.detail-tier-current{
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-bottom: 8px;
padding: 4px 0 6px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.detail-tier-current-line{
font-size: 11px;
color: rgba(255,255,255,.7);
}
.detail-tier-current-line strong{
color: rgba(255,255,255,.95);
font-weight: 700;
}
.detail-tier-subtitle{
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.42);
margin: 8px 0 5px;
font-weight: 600;
}
.detail-tier-storage-wrap .detail-tier-subtitle{
margin-top: 2px;
}
.detail-tier-storage-row{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
overflow: hidden;
padding-bottom: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.detail-tier-storage-btn{
box-sizing: border-box;
min-width: 0;
max-width: 100%;
padding: 9px 8px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.9);
font: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
text-align: center;
white-space: normal;
word-break: break-word;
line-height: 1.25;
display: flex;
align-items: center;
justify-content: center;
position: relative;
isolation: isolate;
}
.detail-tier-storage-btn:hover{
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.35);
}
.detail-tier-storage-btn.is-active{
border-color: rgba(99,102,241,.95);
border-width: 2px;
padding: 6px 3px;
background: rgba(99,102,241,.16);
box-shadow: 0 0 0 1px rgba(99,102,241,.28);
}
.detail-tier-storage-btn.is-unavailable,
.detail-tier-color-card.is-unavailable{
opacity: 0.45;
border-style: dashed;
border-color: rgba(255,255,255,.12);
}
.detail-tier-storage-btn:disabled,
.detail-tier-color-card:disabled{
cursor: not-allowed;
}
.detail-tier-color-card.is-unavailable .detail-tier-color-card__from{
opacity: 0.75;
}
.detail-tier-color-row{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 8px;
overflow: hidden;
padding-bottom: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.detail-tier-color-card{
min-width: 0;
width: auto;
max-width: 100%;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 6px 7px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.9);
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.detail-tier-color-card:hover{
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.28);
}
.detail-tier-color-card.is-active{
border-color: rgba(99,102,241,.9);
border-width: 2px;
padding: 5px 6px;
background: rgba(120,130,200,.14);
box-shadow: 0 0 0 1px rgba(99,102,241,.22);
}
.detail-tier-color-card__thumb{
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 8px;
overflow: hidden;
background: rgba(255,255,255,.94);
border: 1px solid rgba(0,0,0,.08);
display: flex;
align-items: center;
justify-content: center;
}
.detail-tier-color-card__thumb img,
.detail-tier-color-card__thumb .detail-tier-thumb-img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.detail-tier-color-card__body{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
}
.detail-tier-color-card__name{
font-size: 11px;
font-weight: 600;
line-height: 1.25;
color: rgba(255,255,255,.95);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
word-break: break-word;
white-space: normal;
}
.detail-tier-color-card__from{
font-size: 9px;
color: rgba(255,255,255,.58);
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail-tier-color-card.is-active .detail-tier-color-card__from{
color: rgba(255,255,255,.78);
}
@media (max-width: 520px) {
.detail-inline-variant,
.detail-variant{
width: 92px;
}
.detail-inline-variant .detail-inline-variant-img,
.detail-variant img{
width: 76px;
height: 76px;
}
/* Schmale Spalte: 4 Speicher als 2×2, trotzdem ohne Scroll */
.detail-tier-storage-row{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-tier-storage-btn{
font-size: 10px;
padding: 8px 3px;
}
.detail-tier-color-card__thumb{
flex-basis: 30px;
width: 30px;
height: 30px;
}
.detail-tier-color-card__name{
font-size: 10px;
}
}
.home-search-results a,
.home-search-results .home-search-results-item{
display: block;
padding: 12px 16px;
color: #1a1a1a;
text-decoration: none;
border-bottom: 1px solid #eee;
font-size: 1rem;
line-height: 1.35;
transition: background .1s;
}
.home-search-results a:last-child,
.home-search-results .home-search-results-item:last-child{ border-bottom: none; }
.home-search-results a:hover,
.home-search-results .home-search-results-item:hover{ background: #f5f5f5; }
.home-search-results .home-search-product-row{ display: flex; align-items: center; gap: 12px; }
.home-search-results .home-search-product-img{ width: 40px; height: 40px; min-width: 40px; border-radius: 8px; object-fit: contain; background: #f0f0f0; }
.home-search-results .home-search-product-img--placeholder{ object-fit: none; background: #e8e8e8; }
.home-search-results .home-search-product-inner{ flex: 1; min-width: 0; }
.home-search-results .home-search-results-cat{ font-size: .875rem; color: #666; margin-top: 2px; }
.home-search-results .home-search-results-sep{ color: #999; white-space: pre; }
.home-search-results .home-search-results-section{ font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #666; padding: 10px 16px 6px; border-bottom: 1px solid #e8e8e8; }
.home-search-results .home-search-results-section--context{ text-transform: none; letter-spacing: normal; font-size: .72rem; color: #555; font-weight: 600; }
.home-search-results .home-search-results-empty{ padding: 16px; color: #666; font-size: 1rem; }
.home-search-chips{
display: flex;
gap: 5px;
flex-wrap: wrap;
margin-top: 0;
}
#homeSearch .home-search-chips .chip{
padding: 5px 7px;
font-size: 0.82rem;
}
.chip{
padding:10px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.9);
cursor:pointer;
}
.chip:hover{
background: rgba(255,255,255,.09);
}
/* Vergleich info bar */
.compare-info{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
padding:10px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
}
.compare-info .left{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.compare-info .clear{
border:none;
background: transparent;
color: #ffd66a;
cursor:pointer;
}
.compare-info .right{
font-weight:600;
}
.compare-sort{
display:flex;
align-items:center;
gap:10px;
margin: 10px 0 14px;
}
.compare-sort select{
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color:#fff;
}
/* Vergleich Filters */
.compare-filters{
margin: 10px 0 14px;
padding: 14px;
}
.filters-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.filters-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:12px;
}
.filter-group{
display:grid;
gap:8px;
padding:10px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
}
.filter-group label{
display:flex;
gap:10px;
align-items:center;
color: rgba(255,255,255,.88);
font-size: 14px;
}
@media (max-width: 900px){
.filters-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
.filters-grid{ grid-template-columns: 1fr; }
}
/*burasi datenschutz imperssum*/
/* ===== Legal pages (Impressum / Datenschutz) ===== */
.legal h1{
margin:10px 0 6px;
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing:-.02em;
}
.legal h2{
margin:18px 0 8px;
font-size:18px;
}
.legal p{ line-height:1.7; }
.legal-grid{
margin-top:14px;
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:12px;
}
.legal-block{
padding:12px;
border-radius:16px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
}
.legal-sep{
margin:18px 0;
border:none;
border-top:1px solid rgba(255,255,255,.10);
}
.legal-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:16px;
}
/* Privacy / Analytics Opt-out (Datenschutz) */
.privacy-card{
border:1px solid #eee;
border-radius:14px;
padding:16px;
background:#fff;
}
.privacy-card h3{
color:#111;
font-weight:700;
margin:0 0 6px 0;
font-size:1.1rem;
}
.privacy-card .switch-row > span:first-child{
color:#111;
font-weight:600;
font-size:15px;
}
.switch-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
user-select:none;
cursor:pointer;
}
.switch-row input{
position:absolute;
opacity:0;
pointer-events:none;
width:0;
height:0;
}
.switch-ui{
width:52px;
height:30px;
min-width:52px;
min-height:30px;
border-radius:999px;
background:#e0e0e0;
position:relative;
flex:0 0 auto;
transition:background .2s ease;
box-shadow:inset 0 1px 3px rgba(0,0,0,.08);
}
.switch-ui::after{
content:"";
display:block;
width:26px;
height:26px;
border-radius:50%;
background:#fff;
position:absolute;
top:2px;
left:2px;
box-shadow:0 2px 6px rgba(0,0,0,.25);
transition:left .2s ease;
}
/* iPhone-style: an = yeşil (Opt-out aktiv) */
#analyticsOptoutToggle:checked + .switch-ui{
background:#34C759;
}
#analyticsOptoutToggle:checked + .switch-ui::after{
left:24px;
}
@media (max-width: 900px){
.legal-grid{ grid-template-columns:1fr; }
}
/*iletisim*/
/* ===== Kontakt ===== */
.contact-hero h1{
margin:10px 0 6px;
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing:-.02em;
}
.contact-grid{
margin-top:14px;
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:14px;
}
.contact-form form{
display:grid;
gap:12px;
}
.contact-form label{
display:grid;
gap:6px;
font-size:14px;
}
.contact-form input,
.contact-form textarea{
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color:#fff;
}
.contact-form textarea{ resize:vertical; }
.contact-info .contact-list{
list-style:none;
padding:0;
margin:10px 0 14px;
display:grid;
gap:10px;
}
.contact-info a{
color:#ffd66a;
}
.contact-note{
padding:12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
}
@media (max-width: 900px){
.contact-grid{ grid-template-columns:1fr; }
}
/*mobil icin*/
/* ===== Mobile polish ===== */
@media (max-width: 900px){
.page{ padding-top: 14px; }
.card{ border-radius: 18px; }
.btn{ width: auto; }
.btn.block{ width: 100%; }
.tip-body{ padding: 14px 14px 16px; }
}
.filter-bar{
margin: 12px 0 14px;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.filter-bar input,
.filter-bar select{
padding:12px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color:#fff;
}
.filter-bar input{ flex:1; min-width: 220px; }
.filter-bar select{ min-width: 220px; }
/* Mobilde logo yanında theyr yazısı görünsün */
.brand-text{
display:inline-block !important;
opacity: 1 !important;
visibility: visible !important;
white-space: nowrap;
}
/* Kesilme oluyorsa (çok yaygın) */
.brand{
min-width: 0;
}
.site-header .header-inner{
overflow: visible;
}
@media (max-width: 900px){
.brand-text{
font-size: 16px;
font-weight: 700;
letter-spacing: .2px;
}
}
/*hakkimizda sayfasi*/
.about-hero h1{
margin:10px 0 6px;
font-size: clamp(24px, 2.6vw, 34px);
letter-spacing:-.02em;
}
.about-grid{
margin-top:14px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:14px;
}
@media (max-width: 900px){
.about-grid{ grid-template-columns:1fr; }
}
/* ===== Detail page layout ===== */
.detail-hero-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.detail-fit{
margin-top:14px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:12px;
}
.fit{
padding:12px 14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.fit .k{
display:block;
font-size:12px;
opacity:.75;
margin-bottom:6px;
}
.fit .v{ display:block; font-weight:600; }
.detail-cta{
margin-top:14px;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
.small{ font-size:12px; opacity:.75; }
.detail-list{
margin:10px 0 0;
padding-left: 18px;
}
.detail-split{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:14px;
}
.score-grid{
margin-top:10px;
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:10px;
}
.score-item{
padding:12px 14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.score-item .k{
display:block;
font-size:12px;
opacity:.75;
margin-bottom:6px;
}
.score-item .v{ font-weight:700; }
.alt-table{
margin-top:10px;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
overflow:hidden;
}
.alt-row{
display:grid;
grid-template-columns: 1fr 2fr;
gap:0;
}
.alt-row > div{
padding:12px 14px;
border-top:1px solid rgba(255,255,255,.10);
}
.alt-head > div{
border-top: none;
font-weight:700;
background: rgba(255,255,255,.06);
}
.alt-table .spec-list{
margin:0;
padding-left:1.2em;
list-style:disc;
}
.alt-table .spec-list li{
margin:4px 0;
}
/* Detail: lange „Technische Daten“ — nach ~4 Zeilen Verlauf + Mehr anzeigen */
.detail-specs-card > h2{
margin-bottom: 0.35rem;
}
.detail-specs-collapsible{
margin-top: 8px;
}
.detail-specs-clip{
position: relative;
overflow: hidden;
transition: max-height 0.35s ease;
}
.detail-specs-collapsible.is-collapsed .detail-specs-clip{
/* Kopfzeile + ca. 4 Datenzeilen (mehrzeilige Zellen können abweichen) */
max-height: 17rem;
}
.detail-specs-collapsible.is-expanded .detail-specs-clip{
max-height: none;
}
.detail-specs-fade{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5rem;
pointer-events: none;
opacity: 1;
transition: opacity 0.25s ease;
background: linear-gradient(
to bottom,
rgba(11, 18, 32, 0) 0%,
rgba(11, 18, 32, 0.55) 40%,
rgba(11, 18, 32, 0.92) 75%,
rgba(11, 18, 32, 0.98) 100%
);
}
.detail-specs-collapsible.is-expanded .detail-specs-fade{
opacity: 0;
visibility: hidden;
}
.detail-specs-toggle{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 6px 0;
border: none;
background: transparent;
cursor: pointer;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--accent, #6aa7ff);
}
.detail-specs-toggle:hover{
text-decoration: underline;
color: #8bb8ff;
}
.detail-specs-toggle:focus-visible{
outline: 2px solid var(--accent, #6aa7ff);
outline-offset: 3px;
border-radius: 4px;
}
.detail-specs-toggle-chevron{
display: inline-block;
width: 0.55em;
height: 0.55em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-0.1em);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.detail-specs-collapsible.is-expanded .detail-specs-toggle-chevron{
transform: rotate(-135deg) translateY(0.15em);
}
/* Nutzerfeedback: etwas niedrigere Vorschau als Technische-Daten-Tabelle */
.detail-nutzerfeedback-collapsible.is-collapsed .detail-specs-clip{
max-height: 15rem;
}
/* Detail: Kompatibel mit – Amazon „Größe“ tablosu benzeri grid */
.compatible-with-section{
margin-top: 1rem;
}
.compatible-with-title{
margin: 0 0 0.35rem 0;
font-size: 1.15rem;
}
.compatible-with-sub{
margin: 0 0 1rem 0;
font-size: 0.9rem;
}
.compatible-with-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.compatible-with-cell{
padding: 12px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
font-size: 0.95rem;
text-align: center;
}
@media (max-width: 700px){
.compatible-with-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px){
.compatible-with-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
.detail-fit{ grid-template-columns:1fr; }
.detail-split{ grid-template-columns:1fr; }
.score-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* Detail page – Liste aralıklarını aç */
.detail-list li{
margin-bottom: 10px; /* maddeler arası boşluk */
line-height: 1.6; /* satır yüksekliği */
}
/* Vorteile / Nachteile kartları biraz nefes alsın */
.detail-split .card{
padding: 20px 22px;
}
/* Warum dieses Produkt? bölümü */
#dWhyList li{
margin-bottom: 12px;
}
/* Mobilde biraz daha rahat okusun */
@media (max-width: 900px){
.detail-list li{
margin-bottom: 12px;
line-height: 1.7;
}
}
/* Detail page – Kartlar arası boşluk */
.detail-split{
gap: 20px; /* grid/flex içindeyse */
}
/* Tek tek kartlar */
.detail-split .card{
margin-bottom: 20px; /* alt boşluk */
padding: 22px 24px; /* iç boşluk (nefes aldırır) */
}
/* Sağ–sol kenarlara yapışmayı önle */
.detail-split{
padding-left: 8px;
padding-right: 8px;
}
/* Kartların birbirine çok yaklaşmasını engelle */
.detail-split .card + .card{
margin-top: 8px;
}
@media (max-width: 900px){
.detail-split{
gap: 24px;
padding-left: 12px;
padding-right: 12px;
}
.detail-split .card{
padding: 20px;
}
}
/* ===== Detail sayfasında tüm kart blokları arası boşluğu aç (garanti) ===== */
.page.detail > .card,
.page.detail > section.card,
.page.detail > article.card{
margin-bottom: 22px !important;
}
/* “Vorteile / Nachteile” iki kolon bölümünün kendi aralığı */
.page.detail .detail-split{
gap: 22px !important;
margin-bottom: 22px !important;
}
/* Kartların içi daha ferah */
.page.detail .card{
padding: 22px 24px !important;
}
/* Sayfanın sağ/sol kenarı çok yapışıyorsa */
.page.detail{
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 900px){
.page.detail{
padding-left: 12px;
padding-right: 12px;
}
.page.detail .card{
padding: 20px !important;
}
.page.detail > .card,
.page.detail > section.card,
.page.detail > article.card{
margin-bottom: 24px !important;
}
}
/* ===== Detail: hero görsel + başlık düzeni ===== */
.page.detail .detail-hero{
display: grid;
grid-template-columns: 1.4fr .6fr; /* sol içerik + sağ başlık */
gap: 18px;
align-items: start;
}
/* Hero görsel kutusu (sınır) */
.page.detail .product-media{
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
padding: 14px;
}
/* Görselin kendisi: büyümesin */
.page.detail .product-hero{
width: 100%;
max-height: 360px; /* <-- burası önemli */
object-fit: contain; /* kırpma yok, sığdır */
display: block;
margin: 0 auto;
}
/* Galeri küçük thumbnails gibi dursun */
.page.detail .product-gallery{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.page.detail .product-gallery img{
width: 100%;
height: 72px;
object-fit: contain;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 8px;
}
/* Sağdaki başlık bloğu toparlansın */
.page.detail .detail-hero h1{
margin: 0;
font-size: 28px;
line-height: 1.15;
}
.page.detail .detail-hero-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
/* ===== Mobilde tek kolon ===== */
@media (max-width: 900px){
.page.detail .detail-hero{
grid-template-columns: 1fr;
}
.page.detail .product-hero{
max-height: 300px;
}
.page.detail .product-gallery{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page.detail .detail-hero h1{
font-size: 24px;
}
}
/* ===== Detail v1: Hero — Grid auf section, zwei getrennte Flächen (hell links / dunkel rechts) ===== */
.page.detail .detail-hero.detail-hero--decision.detail-hero--split{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 32px;
align-items: stretch;
width: 100%;
max-width: 100%;
padding: 0 !important;
margin-bottom: 28px;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
.page.detail .detail-hero.detail-hero--decision.detail-hero--split:hover{
border: none !important;
box-shadow: none !important;
}
@media (min-width: 1200px){
.page.detail .detail-hero.detail-hero--decision.detail-hero--split{
grid-template-columns: minmax(0, 1fr) 420px;
gap: 32px;
}
}
/* Legacy ohne --split */
.page.detail .detail-hero.detail-hero--decision:not(.detail-hero--split){
display: block !important;
width: 100%;
max-width: 100%;
grid-template-columns: unset !important;
gap: 0;
padding-left: 0 !important;
padding-right: 28px !important;
}
@media (min-width: 1024px){
.page.detail .detail-hero.detail-hero--decision:not(.detail-hero--split){
padding-right: 40px !important;
}
}
/* Linke Spalte: helle Produktkarte */
.detail-hero__media{
min-width: 0;
background: linear-gradient(180deg, #ffffff, #f1f5f9);
border-radius: 20px;
padding: 22px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.page.detail .detail-hero__media .product-media{
border-radius: 0;
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible;
}
.page.detail .detail-hero__aside.product-side{
position: sticky;
top: calc(env(safe-area-inset-top, 0px) + 72px);
align-self: start;
z-index: 4;
min-width: 0;
}
/* Rechte Spalte: dunkles Decision-/Angebot-Panel */
.detail-hero__decision-panel{
background: #101a33;
border-radius: 24px;
padding: 28px;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
}
.detail-hero__decision-panel .detail-hero-top h1{
color: #f8fafc;
}
.detail-hero__decision-panel .rating{
color: #fde68a;
}
.detail-hero__decision-panel .muted{
color: rgba(148, 163, 184, 0.95) !important;
}
.detail-hero__decision-panel .detail-offer-box{
margin-top: 10px;
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.detail-hero__decision-panel .detail-offer-box--empty{
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
.detail-hero__decision-panel .detail-hero__config{
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-hero__decision-panel .detail-share-row{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-hero__lead{
display: flex;
flex-direction: column;
gap: 0;
}
.detail-hero__config{
display: flex;
flex-direction: column;
gap: 12px;
}
.detail-stand{
margin: 8px 0 0;
font-size: 13px;
}
.detail-intro--compact{
margin: 8px 0 0;
font-size: 14px;
line-height: 1.45;
}
.detail-decision-signal{
margin: 12px 0 10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.03);
}
.detail-decision-signal__label{
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 6px;
}
.detail-decision-signal__text{
margin: 0;
font-size: 15px;
line-height: 1.45;
color: rgba(255,255,255,0.88);
}
.detail-decision-signal__text--secondary{
margin-top: 8px;
font-size: 14px;
color: rgba(255,255,255,0.62);
}
.detail-offer-box{
margin: 14px 0 0;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(165deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.detail-offer-box__price{
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 4px;
}
.detail-offer-box__merchant{
font-size: 13px;
color: rgba(255,255,255,0.55);
margin-bottom: 12px;
}
.detail-offer-box .detail-offer-box__cta,
.detail-offer-box__cta{
width: 100%;
justify-content: center;
text-align: center;
padding: 14px 18px;
font-size: 16px;
box-sizing: border-box;
}
.detail-offer-box__trust{
margin: 10px 0 0;
font-size: 12px;
line-height: 1.4;
}
.detail-offer-box__secondary{
display: inline-block;
margin-top: 10px;
font-size: 13px;
color: rgba(167, 139, 250, 0.95);
text-decoration: underline;
}
.detail-offer-box--empty{
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 12px;
border: 1px dashed rgba(255,255,255,0.15);
background: rgba(255,255,255,0.02);
}
.detail-micro-bar{
margin-top: 0;
}
.detail-micro-bar__title{
display: block;
font-weight: 700;
font-size: 15px;
margin-bottom: 10px;
}
.detail-micro-bar__chips{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.detail-micro-bar__chip{
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
font-size: 13px;
color: rgba(255,255,255,0.85);
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.detail-micro-bar__chip:hover{
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.2);
}
.detail-page-footer-cta__head{
margin: 0 0 8px;
font-size: 20px;
}
.detail-page-footer-cta__sub{
margin: 0 0 16px;
}
.detail-page-footer-cta__actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
@media (max-width: 900px){
.page.detail .detail-hero.detail-hero--decision:not(.detail-hero--split){
padding-left: 12px !important;
padding-right: 12px !important;
}
.page.detail .detail-hero.detail-hero--decision.detail-hero--split{
display: flex !important;
flex-direction: column;
gap: 18px;
}
.page.detail .detail-hero__aside.product-side{
position: static;
order: 1;
min-width: 0;
top: auto;
}
.detail-hero__media{
order: 2;
width: 100%;
padding: 20px 18px;
}
.detail-hero--split .detail-hero__decision-panel{
padding: 20px 18px 18px;
}
}
/* ===== Detail Page Polish v1 (decision layout: hero, panel, flow, cards) ===== */
body.page-detail{
background:
linear-gradient(180deg, rgba(10, 14, 26, 0.97) 0%, rgba(15, 23, 42, 0.96) 42%, #0b1220 100%);
background-attachment: fixed;
}
body.page-detail .container{
max-width: 1400px;
}
body.page-detail #detailRoot.container{
max-width: 1400px;
}
@media (max-width: 900px){
body.page-detail{
background-attachment: scroll;
}
}
body.page-detail main#detailRoot.container.page.detail{
padding-bottom: 32px;
}
/* Vertikaler Rhythmus: Micro-Bar, Crosslinks, Offers, Footer-Blöcke */
.page.detail > nav.card.detail-micro-bar{
margin-bottom: 22px !important;
}
.page.detail .offer-cards-section{
margin-top: 0;
margin-bottom: 22px;
}
/* — Linke Medien-Spalte: Vitrine, größeres Hero-Bild, weniger „leere“ Fläche — */
.page.detail .detail-hero.detail-hero--split .detail-hero__media{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 20px 20px 16px;
background: linear-gradient(180deg, #ffffff, #f1f5f9);
border-radius: 20px;
border: 1px solid rgba(15, 23, 42, 0.09);
box-shadow:
0 14px 44px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 1);
}
.page.detail .detail-hero.detail-hero--split .detail-hero__media .product-media.product-image-wrap{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 6px 4px 4px !important;
}
.page.detail .detail-hero.detail-hero--split .detail-hero__media .product-hero{
width: 100%;
max-height: min(500px, 54vh);
min-height: 0;
object-fit: contain;
object-position: center;
margin: 0 auto;
}
.page.detail .detail-hero__media img{
max-width: 100%;
height: auto;
}
.page.detail .detail-hero{
padding-left: 0 !important;
padding-right: 0 !important;
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 32px;
align-items: stretch;
}
.page.detail .detail-hero__aside.product-side,
.page.detail .detail-hero__content{
width: 420px;
position: sticky;
top: 90px;
}
.page.detail #detail-similar,
.page.detail #detail-alternatives,
.page.detail .detail-similar,
.page.detail .detail-alternatives{
max-width: 1400px;
width: 100%;
margin: 40px auto;
}
.page.detail .offer-cards-section{
max-width: 1400px;
width: 100%;
margin: 40px auto;
}
.detail-continuation-block{
display: flex;
flex-direction: column;
gap: 12px;
}
.detail-continuation-block__head{
margin: 0;
font-size: 1.05rem;
}
.detail-continuation-block__sub{
margin: 0;
color: rgba(203, 213, 225, 0.9);
}
.detail-continuation-block__actions{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.detail-continuation-block .detail-ratgeber-hint{
margin-top: 2px;
padding: 0;
}
.detail-ratgeber-hint__links{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.detail-ratgeber-hint__a.btn{
text-decoration: none !important;
}
/* SEO angles → Ratgeber (Produktdetail unten) */
.seo-angles {
margin-top: 40px;
max-width: 1400px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.seo-angles h2 {
font-size: 14px;
letter-spacing: 1px;
opacity: 0.6;
margin: 0 0 12px;
font-weight: 700;
text-transform: none;
}
.seo-angle-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.seo-angle {
font-size: 13px;
text-decoration: none;
padding: 6px 10px;
border-radius: 6px;
background: #f3f3f3;
color: #0f172a;
transition: background 0.2s ease, color 0.2s ease;
}
.seo-angle:hover {
background: #eaeaea;
}
.page.detail .seo-angles h2 {
color: rgba(226, 232, 240, 0.65);
opacity: 1;
}
.page.detail .seo-angle {
background: rgba(255, 255, 255, 0.1);
color: rgba(248, 250, 252, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.page.detail .seo-angle:hover {
background: rgba(255, 255, 255, 0.16);
}
@media (min-width: 901px){
.page.detail #detail-similar .related-grid--premium,
.page.detail #detail-alternatives .related-grid--premium{
grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
justify-content: center;
}
}
@media (min-width: 901px){
.page.detail #detail-alternatives[data-alt-count="1"]{
width: fit-content;
max-width: min(100%, 520px);
margin-left: auto;
margin-right: auto;
}
.page.detail #detail-alternatives[data-alt-count="2"]{
width: fit-content;
max-width: min(100%, 900px);
margin-left: auto;
margin-right: auto;
}
.page.detail #detail-alternatives[data-alt-count="1"] .related-grid--premium{
grid-template-columns: minmax(0, 360px);
justify-content: center;
}
.page.detail #detail-alternatives[data-alt-count="2"] .related-grid--premium{
grid-template-columns: repeat(2, minmax(220px, 360px));
justify-content: center;
}
}
.page.detail .detail-hero__media .detail-gallery{
margin-top: 10px;
margin-bottom: 0;
}
.page.detail .detail-hero__media .detail-gallery-visible{
gap: 8px;
}
.page.detail .detail-hero__media .detail-spec-badges{
padding: 10px 12px 12px;
gap: 8px;
background: linear-gradient(180deg, #eef2f7 0%, #e7ecf4 100%);
border-radius: 0 0 20px 20px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.page.detail .detail-hero__media .detail-spec-badge{
padding: 8px 10px;
max-width: 140px;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
/* — Rechtes Decision-Panel: weiches Dunkel, klare Sektionen — */
.page.detail .detail-hero__decision-panel{
background: linear-gradient(165deg, #1a2434 0%, #141c2a 52%, #111a28 100%);
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
padding: 24px 24px 22px;
gap: 0;
}
.page.detail .detail-hero__aside.product-side{
top: calc(env(safe-area-inset-top, 0px) + 76px);
}
.page.detail .detail-hero__lead{
padding-bottom: 16px;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.page.detail .detail-hero__decision-panel .detail-offer-box{
margin-top: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.page.detail .detail-hero__decision-panel .detail-hero__config{
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
gap: 14px;
}
.page.detail .detail-hero__decision-panel .detail-share-row{
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.page.detail .detail-hero__decision-panel .detail-offer-box__cta.btn.primary,
.page.detail .detail-hero__decision-panel #offerBtn.offer-hero-btn{
box-shadow:
0 10px 32px rgba(255, 106, 0, 0.28),
0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
/* — Micro-Bar: Primary / Secondary, ruhiger Editorial-Ton — */
.detail-micro-bar--polish{
padding: 18px 20px 20px !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.detail-micro-bar--polish .detail-micro-bar__title{
margin-bottom: 6px;
font-size: 16px;
letter-spacing: -0.01em;
}
.detail-micro-bar__sub{
margin: 0 0 14px;
font-size: 13px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.52) !important;
max-width: 52ch;
}
.detail-micro-bar__chip--primary{
font-weight: 600;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
}
.detail-micro-bar__chip--primary:hover{
background: rgba(255, 255, 255, 0.14);
border-color: rgba(56, 189, 248, 0.45);
}
.detail-micro-bar__chip--secondary{
font-weight: 500;
font-size: 12px;
padding: 8px 12px;
background: transparent;
border: 1px dashed rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.72);
}
.detail-micro-bar__chip--secondary:hover{
border-style: solid;
border-color: rgba(255, 255, 255, 0.26);
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.05);
}
/* — Ähnliche / Alternative: einheitliche Kartenfläche, stärkeres Bild — */
.page.detail #detail-similar .related-grid--premium,
.page.detail #detail-alternatives .related-grid--premium{
gap: 14px;
}
.page.detail #detail-similar .related-card-img,
.page.detail #detail-alternatives .related-card-img{
min-height: 152px;
}
.page.detail #detail-similar .related-card--premium,
.page.detail #detail-alternatives .related-card--premium{
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.page.detail #detail-similar .related-card--premium:hover,
.page.detail #detail-alternatives .related-card--premium:hover{
transform: translateY(-2px);
}
/* — Merchant Offer-Karten (Detail) — */
.page.detail .offer-cards-wrap.offer-cards-wrap--enhanced{
gap: 18px;
}
.page.detail .offer-cards-grid{
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.page.detail .offer-card{
border-radius: 18px;
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.page.detail .offer-card__merchant-name{
color: #0f172a;
}
.page.detail .offer-button{
border-radius: 14px;
font-weight: 800;
}
@media (max-width: 520px){
.page.detail .offer-cards-grid{
grid-template-columns: 1fr;
}
.offer-cards-section__title{
font-size: 1.05rem;
}
}
@media (max-width: 900px){
.page.detail .detail-hero{
display: flex !important;
flex-direction: column;
gap: 18px;
}
.page.detail .detail-hero__media{
order: 1 !important;
}
.page.detail .detail-hero__aside.product-side{
order: 2 !important;
}
.page.detail .detail-hero.detail-hero--split .detail-hero__media{
padding: 18px 16px 14px;
}
.page.detail .detail-hero.detail-hero--split .detail-hero__media .product-hero{
min-height: 200px;
max-height: min(360px, 50vh);
}
.detail-micro-bar--polish{
padding: 16px 16px 18px !important;
}
.detail-micro-bar__sub{
max-width: none;
}
.page.detail .detail-hero__aside.product-side{
width: 100%;
position: static;
top: auto;
}
.page.detail .detail-hero__decision-panel{
display: flex;
flex-direction: column;
}
.page.detail .detail-hero__decision-panel .detail-hero__lead{
order: 1;
}
.page.detail .detail-hero__decision-panel .detail-offer-box,
.page.detail .detail-hero__decision-panel .detail-offer-box--empty{
order: 2;
margin-top: 12px;
}
.page.detail .detail-hero__decision-panel .detail-hero__config{
order: 3;
}
.page.detail .detail-hero__decision-panel .detail-share-row{
order: 4;
}
}
/* ===== Detail Hero + Thumbnails ===== */
.page.detail .detail-hero{
display: grid;
grid-template-columns: 1.4fr .6fr;
gap: 18px;
align-items: start;
}
.page.detail .product-media{
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
padding: 14px;
}
.page.detail .product-hero{
width: 100%;
max-height: 360px;
object-fit: contain;
display: block;
margin: 0 auto;
}
.page.detail .product-side{
display: flex;
flex-direction: column;
gap: 12px;
}
.page.detail .detail-hero-top{
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
}
.detail-source-hint{
margin: -8px 0 16px 0;
font-size: 0.8rem;
opacity: 0.75;
}
.page.detail .detail-hero-top h1{
margin: 0;
font-size: 28px;
line-height: 1.15;
}
.page.detail .thumbs{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.page.detail .thumb{
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
border-radius: 12px;
padding: 8px;
cursor: pointer;
transition: transform .12s ease, border-color .12s ease;
}
.page.detail .thumb:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,0.22);
}
.page.detail .thumb.active{
border-color: rgba(120,160,255,0.75);
box-shadow: 0 0 0 3px rgba(120,160,255,0.15);
}
.page.detail .thumb img{
width: 100%;
height: 64px;
object-fit: contain;
display: block;
}
/* Mobil */
@media (max-width: 900px){
.page.detail .detail-hero{
grid-template-columns: 1fr;
}
.page.detail .product-hero{
max-height: 300px;
}
.page.detail .thumbs{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page.detail .thumb img{
height: 56px;
}
.page.detail .detail-hero-top h1{
font-size: 24px;
}
}
/* ===== FIX: Side thumbnails dağılma ===== */
.page.detail .product-side{
min-width: 260px; /* çok daralmasın */
}
.page.detail .thumbs{
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 3 yerine 2 */
gap: 10px;
}
.page.detail .thumb{
padding: 10px;
}
.page.detail .thumb img{
width: 100%;
height: 80px; /* biraz büyük, net */
object-fit: contain;
display: block;
}
/* Çok dar ekranda tek kolona düşür */
@media (max-width: 520px){
.page.detail .thumbs{
grid-template-columns: repeat(4, minmax(0, 1fr)); /* mobilde yan yana küçük */
}
.page.detail .thumb img{
height: 56px;
}
}
/* Detail: hero + thumbs (class bağımsız) */
.detail-hero{
display:grid;
grid-template-columns: 1.4fr .6fr;
gap:18px;
align-items:start;
}
.product-media{
border-radius:16px;
overflow:hidden;
background: rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
padding:14px;
}
.product-hero{
width:100%;
max-height:360px;
object-fit:contain;
display:block;
}
.product-side{ min-width:260px; display:flex; flex-direction:column; gap:12px; }
.product-side{ position: relative; z-index: 5; }
.thumbs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.thumb{
border:1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
border-radius:12px;
padding:10px;
cursor:pointer;
}
.thumb img{ width:100%; height:80px; object-fit:contain; display:block; }
@media(max-width:900px){
.detail-hero{ grid-template-columns:1fr; }
.thumbs{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.thumb img{ height:56px; }
}
/* Thumbs: kutunun içine tam otursun + ortalansın */
.thumbs{
display: grid;
grid-template-columns: repeat(3, 68px); /* sabit kutular */
gap: 10px;
}
.thumb{
width: 68px;
height: 68px;
padding: 0; /* padding yüzünden kayıyordu */
display: grid; /* ortalama */
place-items: center; /* ortalama */
overflow: hidden;
border-radius: 12px;
}
.thumb img{
width: 100%;
height: 100%;
object-fit: cover; /* kutuyu doldursun */
display: block;
}
/* Mobil: 4’lü sıra */
@media (max-width: 900px){
.thumbs{
grid-template-columns: repeat(4, 64px);
}
.thumb{
width: 64px;
height: 64px;
}
}
.thumbs{ grid-template-columns: repeat(2, 72px); }
.btn.primary {
margin-bottom: 24px;
}
.product-why {
margin-top: 40px;
}
.btn.primary { margin-bottom: 24px; }
@media (max-width: 600px){
.btn.primary { margin-bottom: 16px; }
}
/*arka plan*/
.card {
backdrop-filter: blur(10px);
}
.product-hero-grid{
display:grid;
grid-template-columns: 1.4fr .9fr;
gap: 18px;
align-items: stretch;
}
.product-hero-media{
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.10);
}
.product-hero-img{
width:100%;
height:100%;
max-height: 420px;
object-fit: contain;
display:block;
}
.product-hero-side{
display:flex;
flex-direction: column;
gap: 12px;
}
.product-hero-top{
display:flex;
align-items:center;
justify-content: space-between;
gap: 10px;
}
.product-gallery{
display:grid;
grid-template-columns: repeat(2, 56px);
gap: 10px;
margin: 4px 0 10px;
}
.thumb{
width: 56px;
height: 56px;
border-radius: 12px;
overflow:hidden;
border: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.15);
cursor:pointer;
padding:0;
}
.thumb img{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
.thumb.active{
border-color: rgba(110, 167, 255, .55);
box-shadow: 0 0 0 2px rgba(127, 151, 188, 0.2);
}
.grid.two-col{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 900px){
.product-hero-grid{ grid-template-columns: 1fr; }
.product-gallery{ grid-template-columns: repeat(4, 56px); }
.grid.two-col{ grid-template-columns: 1fr; }
}
/* Vergleich kart görseli */
.compare-card .card-img {
height: 250px; /* önce 140–160 civarıydı */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
background: #fff;
}
.compare-card .card-img img {
max-height: 180px; /* asıl büyüten kısım */
max-width: 100%;
object-fit: contain;
}
@media (max-width: 640px) {
.compare-card .card-img {
height: 160px;
}
.compare-card .card-img img {
max-height: 140px;
}
}
/* Vergleich kart görseli */
.compare-card .card-media{
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(255,255,255,.06);
margin-bottom: 12px;
/* yeni */
padding: 10px;
}
.compare-card .card-media img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
/* 👇 kritik nokta */
transform: scale(1.25);
}
/* Kart içinde üst boşluk düzeni */
.compare-card .card-media {
margin-bottom: 12px;
}
.compare-card .card-img {
object-fit: contain; /* cover yerine */
padding: 12px;
background: #fff;
}
.compare-card .badge {
background: rgba(255, 106, 0, 0.2);
color: #ffcca3;
font-size: 12px;
}
/* Finder: beste Übereinstimmung (höchster Score) → „Passt am besten zu dir“ oben auf der Karte, floating */
.best-match-badge {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 193, 7, 0.95);
color: #1a1a1a;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 18px rgba(255, 193, 7, 0.4);
white-space: nowrap;
pointer-events: none;
}
/* Genau 1 Treffer: stärkerer Glow */
.best-match-badge.best-match-single {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 24px rgba(255, 193, 7, 0.5);
animation: best-match-glow 2s ease-in-out infinite;
}
@keyframes best-match-glow {
0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 24px rgba(255, 193, 7, 0.5); }
50% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), 0 0 32px rgba(255, 193, 7, 0.6); }
}
.compare-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius, 18px);
transition: outline 0.15s ease, outline-offset 0.15s ease;
overflow: visible;
}
.compare-card:hover {
outline: 2px solid rgba(255, 106, 0, 0.4);
outline-offset: -2px;
}
/* Kısa tıklama → Detail sayfası; uzun basış (Apple) → sayfada önizleme. Altında butonlar (Detail/Ratgeber) tıklanabilir kalsın (Safari + Chrome). */
.compare-card-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px;
z-index: 1;
cursor: pointer;
pointer-events: auto;
}
.compare-card-price {
margin: 0 0 10px;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.3;
color: #0f766e;
}
/* Detail-Vorschau-Modal (Lang drücken auf Karte) */
.detail-preview-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.detail-preview-modal.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.detail-preview-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.detail-preview-panel {
position: relative;
width: 100%;
max-width: 520px;
min-height: 80vh;
max-height: 95vh;
height: 90vh;
background: var(--card-bg, #1a1a1a);
border-radius: 16px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto;
}
.detail-preview-panel--minimal {
min-height: 0;
height: auto;
max-height: 90vh;
}
.detail-preview-hero {
width: 100%;
aspect-ratio: 16 / 10;
max-height: 220px;
min-height: 140px;
overflow: hidden;
background: #fff !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.detail-preview-hero-img {
width: 100%;
height: 100%;
object-fit: contain !important;
object-position: center;
display: block;
background: #fff;
}
.detail-preview-modal .detail-preview-hero img {
width: 100%;
height: 100%;
object-fit: contain !important;
background: #fff;
}
.detail-preview-minimal {
padding: 24px 20px 20px;
text-align: left;
}
.detail-preview-rating {
font-size: 15px;
color: rgba(255,255,255,0.9);
margin-bottom: 6px;
}
.detail-preview-name {
font-size: 1.35rem;
font-weight: 600;
margin: 0 0 14px;
color: #fff;
line-height: 1.3;
}
.detail-preview-kurzlabel,
.detail-preview-ideallabel {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.5);
margin: 0 0 4px;
}
.detail-preview-tagline,
.detail-preview-ideal {
font-size: 14px;
color: rgba(255,255,255,0.88);
line-height: 1.5;
margin: 0 0 12px;
}
.detail-preview-mehr {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 14px;
font-weight: 600;
color: #6aa8ff;
text-decoration: none;
}
.detail-preview-mehr::after {
content: "→";
font-weight: 400;
opacity: 0.9;
}
.detail-preview-mehr:hover {
text-decoration: underline;
}
/* Sadece ok: .detail-preview-mehr--icon-only { font-size: 0; } .detail-preview-mehr--icon-only::after { content: "→"; font-size: 18px; } */
.detail-preview-iframe {
flex: 1;
width: 100%;
min-height: 70vh;
height: 100%;
border: none;
display: block;
}
.detail-preview-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.detail-preview-close:hover {
background: rgba(255, 255, 255, 0.25);
}
.detail-preview-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.15);
}
.detail-preview-goto {
flex: 1;
min-width: 140px;
padding: 12px 16px;
text-align: center;
background: rgba(106, 168, 255, 0.25);
color: #6aa8ff;
text-decoration: none;
font-weight: 600;
font-size: 14px;
border-radius: 10px;
}
.detail-preview-goto:hover {
background: rgba(106, 168, 255, 0.35);
}
.detail-preview-offer {
flex: 1;
min-width: 140px;
padding: 12px 16px;
text-align: center;
background: rgba(255, 255, 255, 0.08);
color: rgba(255,255,255,0.9);
text-decoration: none;
font-weight: 600;
font-size: 14px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.15);
}
.detail-preview-offer:hover {
background: rgba(255, 255, 255, 0.12);
}
.compare-card .btn {
margin-top: auto;
}
.compare-card-actions {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,0.08);
position: relative;
z-index: 10;
pointer-events: auto;
isolation: isolate;
}
.compare-card .compare-card-actions .btn {
margin-top: 0;
}
.compare-card-ratgeber-btn {
margin-top: 4px;
}
/* Hilfreich (like) – Kart sağ üst, kalp + Zähler */
.compare-card-hilfreich {
position: absolute;
top: 10px;
right: 10px;
z-index: 50;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(0,0,0,0.5);
color: rgba(255,255,255,0.95);
font-size: 0.85rem;
cursor: pointer;
pointer-events: auto;
user-select: none;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.compare-card-hilfreich:hover {
background: rgba(0,0,0,0.5);
}
.compare-card-hilfreich .hilfreich-icon {
font-size: 1rem;
line-height: 1;
color: rgba(255,255,255,0.85);
}
.compare-card-hilfreich.is-liked .hilfreich-icon {
color: #f43f5e;
}
.compare-card-hilfreich .hilfreich-count {
font-size: 0.75rem;
opacity: 0.95;
}
/* Like: Instagram tarzı – pop → fade → yok (700ms) */
.compare-card.hilfreich-heart-pop::after {
content: "❤️";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.4);
font-size: 4.5rem;
z-index: 20;
pointer-events: none;
filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.5));
animation: hilfreichPopFade 0.7s ease-out forwards;
}
@keyframes hilfreichPopFade {
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
22% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
.compare-card .btn.is-disabled,
.compare-card-actions .btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.compare-bar{
margin: 12px 0 18px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
background: rgba(255,255,255,.04);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.compare-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.compare-pill{
padding:6px 10px;
border-radius: 999px;
background: rgba(124,92,255,.18);
color: rgba(255,255,255,.92);
border: 1px solid rgba(124,92,255,.25);
font-size: 12px;
}
.compare-right{ display:flex; gap:8px; align-items:center; }
#compareGo[aria-disabled="true"]{ opacity:.5; pointer-events:none; }
/* ===== Compare 2 (side-by-side) ===== */
.compare2-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 900px){
.compare2-grid{ grid-template-columns: 1fr; }
}
.compare2-card .top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.compare2-card .title{
margin: 6px 0 4px;
font-size: 20px;
line-height: 1.2;
}
.compare2-card .compare2-sep{ opacity: .85; margin: 0 .2em; }
.compare2-card .compare2-cat{ font-weight: 500; opacity: .88; font-size: .95em; }
.compare2-hero{
width:100%;
height: 240px;
border-radius: 14px;
object-fit: contain;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
}
.compare2-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.compare2-row:last-child{ border-bottom:none; }
.compare2-k{ color: rgba(255,255,255,.72); font-size: 13px; }
.compare2-v{ color: rgba(255,255,255,.92); font-weight: 600; font-size: 13px; }
.compare2-actions{
display:flex;
gap:10px;
margin-top: 12px;
flex-wrap:wrap;
}
.compare2-card .btn.is-disabled{
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.compare-summary .summary-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:12px;
}
.compare-summary .summary-item{
border:1px solid var(--border);
border-radius: var(--radius);
padding:12px;
background: rgba(255,255,255,.03);
}
.compare-summary .summary-item .k{
font-size:12px;
opacity:.8;
margin-bottom:6px;
}
.compare-summary .summary-item .v{
font-weight:700;
font-size:16px;
}
@media (max-width: 980px){
.compare-summary .summary-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
.compare-summary .summary-grid{ grid-template-columns: 1fr; }
}
.compare2-media{
height: 220px;
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,.04);
display:flex;
align-items:center;
justify-content:center;
}
.compare2-img{
width: 100%;
height: 100%;
object-fit: contain; /* contain = taşma yok */
display:block;
}
/* Vergleich kart görsel hover zoom */
.compare-card .card-img {
overflow: hidden;
border-radius: 12px;
}
.compare-card .card-img img {
transition: transform 0.35s ease;
transform: scale(1);
}
.compare-card:hover .card-img img {
transform: scale(1.06);
}
/* Compare seçili kart highlight – turuncu */
.compare-card.is-picked {
outline: 2px solid rgba(255, 106, 0, 0.6);
box-shadow:
0 0 0 1px rgba(255, 106, 0, 0.3),
0 10px 30px rgba(255, 106, 0, 0.2);
}
/* Seçili kart görseli ekstra vurgulu */
.compare-card.is-picked .card-img img {
transform: scale(1.08);
}
/*benzer urun yeri js de*/
/* ===== Similar products (Detail page) FIX ===== */
#similarRoot { margin-top: 18px; }
#similarGrid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 900px){
#similarGrid{ grid-template-columns: 1fr; }
}
.similar-card{
overflow: hidden;
}
.similar-card .sim-media{
width: 100%;
height: 170px;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.08);
display: flex;
align-items: center;
justify-content: center;
margin: 8px 0 12px;
}
.similar-card .sim-media img{
width: auto !important;
height: auto !important;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
transform: none !important; /* varsa zoom'u iptal */
filter: none !important; /* varsa blur'u iptal */
}
/* ===== Similar products – height fix ===== */
.similar-card{
display: flex;
flex-direction: column;
height: 100%;
}
/* Görsel alanı sabit */
.similar-card .sim-media{
height: 150px;
margin-bottom: 10px;
}
/* Başlık max 2 satır */
.similar-card h3{
font-size: 15px;
line-height: 1.35;
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Açıklama max 2 satır */
.similar-card p{
font-size: 13px;
line-height: 1.4;
margin: 0 0 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Butonlar her zaman alta */
.similar-card .sim-actions{
margin-top: auto;
}
/* =========================
FIX: Benzer Ürünler çok uzuyor
(CSS dosyanın EN ALTINA)
========================= */
/* Benzer ürünler grid */
#similarGrid,
.similar-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 900px){
#similarGrid,
.similar-grid{
grid-template-columns: 1fr;
}
}
/* Benzer ürün kartı: maksimum düzen */
#similarGrid .card,
.similar-grid .card{
padding: 14px; /* kart içi daha kompakt */
}
/* Eğer benzer ürünlerde card-media kullanıyorsan: kesin sabitle */
#similarGrid .card-media,
.similar-grid .card-media{
height: 160px !important; /* asıl kritik */
aspect-ratio: auto !important;
padding: 10px !important;
overflow: hidden;
display:flex;
align-items:center;
justify-content:center;
}
/* En kritik: senin global scale(1.25) benzer ürünlerde iptal */
#similarGrid .card-media img,
.similar-grid .card-media img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transform: none !important; /* 🔥 uzunluk yapan şey buydu */
}
/* Eğer benzer ürünlerde card-img kullanıyorsan: onu da sabitle */
#similarGrid .card-img,
.similar-grid .card-img{
height: 160px !important;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
border-radius:14px;
}
#similarGrid .card-img img,
.similar-grid .card-img img{
max-height: 140px !important;
width: 100%;
object-fit: contain;
transform: none !important;
}
/* Yazılar uzayıp kartı uzatmasın (satır sınırı) */
#similarGrid h3,
.similar-grid h3{
display: -webkit-box;
-webkit-line-clamp: 2; /* başlık max 2 satır */
-webkit-box-orient: vertical;
overflow: hidden;
}
#similarGrid p.muted,
.similar-grid p.muted{
display: -webkit-box;
-webkit-line-clamp: 3; /* açıklama max 3 satır */
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 10px;
}
/* ===== Detail: Intro + Vor- und Nachteile (SEO) ===== */
.page.detail .detail-intro {
margin: 0 0 14px 0;
font-size: 15px;
line-height: 1.5;
color: var(--muted, rgba(255,255,255,.7));
}
.pros-cons { margin-top: 24px; }
.pros-cons h2 { margin: 0 0 12px 0; }
.pros-cons-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.pros-cons-box { padding: 14px; border-radius: 12px; }
.pros-cons-box h3 { margin: 0 0 8px 0; font-size: 1rem; }
.pros-cons-box ul { margin: 0; padding-left: 20px; }
.pros-cons-box li { margin: 6px 0; line-height: 1.5; }
.pros-cons-box--pro { background: rgba(46, 204, 113, 0.08); border: 1px solid rgba(46, 204, 113, 0.25); }
.pros-cons-box--con { background: rgba(241, 196, 15, 0.08); border: 1px solid rgba(241, 196, 15, 0.25); }
@media (max-width: 640px) {
.pros-cons-grid { grid-template-columns: 1fr; }
}
/* ===== Für wen? (Kimin için) ===== */
.forwho .forwho-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:12px;
}
.forwho .forwho-sub{
margin:0;
font-size:13px;
}
.forwho-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:12px;
}
.forwho-box{
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.03);
border-radius: 16px;
padding: 14px;
}
.forwho-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}
.forwho-icon{
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius: 12px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
}
.forwho-list{
margin:0;
padding-left:18px;
color: rgba(255,255,255,.88);
}
.forwho-list li{
margin: 6px 0;
line-height: 1.55;
}
@media (max-width: 900px){
.forwho-grid{ grid-template-columns: 1fr; }
}
.forwho-box{
position: relative;
border-radius: 16px;
padding: 16px;
}
/* Ideal */
.forwho-box:first-child{
background: linear-gradient(
180deg,
rgba(46, 204, 113, 0.08),
rgba(255,255,255,0.02)
);
border: 1px solid rgba(46,204,113,.25);
}
/* Not ideal */
.forwho-box:last-child{
background: linear-gradient(
180deg,
rgba(241, 196, 15, 0.08),
rgba(255,255,255,0.02)
);
border: 1px solid rgba(241,196,15,.25);
}
.forwho-list li{
margin: 8px 0;
line-height: 1.6;
font-size: 14px;
}
.forwho-icon{
font-size: 16px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.forwho-fazit-title { margin: 14px 0 6px 0; font-size: 1rem; font-weight: 600; }
.forwho-verdict{
margin-top:0;
font-size:14px;
color: rgba(255,255,255,.9);
font-style: italic;
}
/* Nutzerfeedback / Community-Zusammenfassung (Detail, editorial) */
.product-community-feedback{
margin: 22px 0 18px;
padding: 18px 0 0;
border-top: 1px solid rgba(255,255,255,.10);
}
.forwho .product-community-feedback:first-child{
margin-top: 0;
padding-top: 0;
border-top: none;
}
.product-community-feedback__title{
margin: 0 0 10px 0;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.product-community-feedback__intro{
margin: 0 0 16px 0;
font-size: 14px;
line-height: 1.55;
}
.product-community-feedback__sections{
display: flex;
flex-direction: column;
gap: 14px;
}
.product-community-feedback__section{
border-radius: 14px;
padding: 14px 16px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
}
.product-community-feedback__section-head{
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.product-community-feedback__section-head h3{
margin: 0;
font-size: 1rem;
font-weight: 650;
line-height: 1.35;
}
.product-community-feedback__icon{
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(106,167,255,.12);
border: 1px solid rgba(106,167,255,.28);
font-size: 1rem;
line-height: 1;
}
.product-community-feedback__list{
margin: 0;
padding-left: 1.2rem;
font-size: 14px;
line-height: 1.55;
}
.product-community-feedback__list li{ margin: 6px 0; }
.product-community-feedback__para{
margin: 8px 0 0 0;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,.88);
}
.product-community-feedback__highlight{
margin: 12px 0 0 0;
padding: 10px 12px;
font-size: 14px;
line-height: 1.55;
border-radius: 10px;
border-left: 3px solid var(--accent, #6aa7ff);
background: rgba(106,167,255,.08);
color: rgba(255,255,255,.92);
}
.product-community-feedback__note{
margin: 16px 0 8px 0;
font-size: 13px;
line-height: 1.5;
}
.product-community-feedback__disclaimer{
margin: 0;
font-size: 11px;
line-height: 1.45;
opacity: .72;
}
@media (max-width: 600px){
.product-community-feedback__section{ padding: 12px 14px; }
.product-community-feedback__title{ font-size: 1.05rem; }
}
/* Editorial „weiches“ Nutzerfeedback (heller Hintergrund / statisches HTML) */
.theyr-feedback-soft {
font-size: 13.5px;
line-height: 1.6;
color: #6b7280;
margin-top: 10px;
}
.theyr-feedback-soft p {
margin: 0 0 8px 0;
}
.theyr-feedback-soft strong {
color: #374151;
font-weight: 500;
}
.theyr-feedback-soft ul {
margin: 6px 0 10px 16px;
padding: 0;
}
.theyr-feedback-soft li {
margin-bottom: 4px;
}
.theyr-feedback-soft .highlight {
display: block;
margin-top: 6px;
padding-left: 10px;
border-left: 2px solid #d1d5db;
font-style: italic;
color: #4b5563;
}
.theyr-feedback-soft .note {
margin-top: 12px;
font-size: 12px;
color: #9ca3af;
}
/* Detail / dunkle Karten: gleiche Hierarchie, angepasste Kontraste */
.page.detail .theyr-feedback-soft,
.forwho .theyr-feedback-soft {
color: rgba(255, 255, 255, 0.62);
}
.page.detail .theyr-feedback-soft strong,
.forwho .theyr-feedback-soft strong {
color: rgba(255, 255, 255, 0.88);
font-weight: 600;
}
.page.detail .theyr-feedback-soft .highlight,
.forwho .theyr-feedback-soft .highlight {
border-left-color: rgba(255, 255, 255, 0.28);
color: rgba(255, 255, 255, 0.74);
}
.page.detail .theyr-feedback-soft .note,
.forwho .theyr-feedback-soft .note {
color: rgba(255, 255, 255, 0.48);
}
/* Nutzerfeedback-Sections innerhalb .theyr-feedback-soft: Highlight wie Vorlage (dezente Linie) */
.theyr-feedback-soft .product-community-feedback__intro {
margin: 0 0 12px 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.theyr-feedback-soft .product-community-feedback__list {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.theyr-feedback-soft .product-community-feedback__para {
font-size: inherit;
line-height: inherit;
color: inherit;
}
.theyr-feedback-soft .product-community-feedback__highlight {
margin-top: 6px;
margin-bottom: 0;
padding: 0 0 0 10px;
background: transparent;
border-radius: 0;
border-left: 2px solid #d1d5db;
font-style: italic;
color: #4b5563;
}
.page.detail .theyr-feedback-soft .product-community-feedback__highlight,
.forwho .theyr-feedback-soft .product-community-feedback__highlight {
border-left-color: rgba(255, 255, 255, 0.28);
color: rgba(255, 255, 255, 0.74);
}
.theyr-feedback-soft .product-community-feedback__note.note {
margin-top: 12px;
margin-bottom: 0;
}
.theyr-feedback-soft .product-community-feedback__disclaimer.note {
margin-top: 10px;
font-size: 11px;
opacity: 0.85;
}
/*for who icin*/
.forwho {
margin-top: 32px; /* yukarıdan biraz boşluk */
}
.forwho {
margin-top: 52px;
}
.forwho {
background: linear-gradient(
180deg,
rgba(255,255,255,0.04),
rgba(255,255,255,0.02)
);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 22px 24px;
}
.forwho-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.forwho-top strong {
font-size: 15px;
letter-spacing: 0.2px;
}
.forwho-verdict {
margin-top: 14px;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.75);
border-top: 1px dashed rgba(255,255,255,0.08);
padding-top: 12px;
}
@media (max-width: 768px) {
.forwho {
margin-top: 24px;
padding: 18px;
}
.forwho-grid {
gap: 14px;
}
}
.forwho {
margin-bottom: 48px; /* Teknik Daten'den ayırır */
}
.forwho-verdict {
background: linear-gradient(
90deg,
rgba(255,255,255,0.06),
rgba(255,255,255,0.02)
);
border-radius: 10px;
padding: 12px 14px;
}
.forwho-sub {
font-size: 13px;
color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.06);
padding: 6px 10px;
border-radius: 999px;
display: inline-block;
}
/* ===== Für wen ist das? (premium) ===== */
.forwho{
margin-top: 14px; /* biraz aşağı indirir */
padding: 18px;
}
.forwho-head{
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.forwho-sub{
margin: 0;
white-space: nowrap;
}
.forwho-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 10px;
}
@media (max-width: 820px){
.forwho-head{ flex-direction: column; align-items: flex-start; }
.forwho-sub{ white-space: normal; }
.forwho-grid{ grid-template-columns: 1fr; }
}
.forwho-box{
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 14px;
background: rgba(255,255,255,.04);
}
.forwho-box--ideal{
border-color: rgba(46, 213, 115, .35);
box-shadow: 0 0 0 1px rgba(46, 213, 115, .10) inset;
}
.forwho-box--not{
border-color: rgba(255, 215, 0, .28);
box-shadow: 0 0 0 1px rgba(255, 215, 0, .08) inset;
}
.forwho-top{
display:flex;
align-items:center;
gap: 10px;
margin-bottom: 10px;
}
.forwho-icon{
width: 28px;
height: 28px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 9px;
background: rgba(255,255,255,.08);
}
.forwho-list{
margin: 0;
padding-left: 18px;
display: grid;
gap: 6px;
}
.forwho-empty{
margin:0;
opacity:.75;
}
.forwho-verdict{
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.10);
opacity: .95;
line-height: 1.45;
}
/*für wen daha premuium*/
/* ===== Premium "Für wen?" block ===== */
.forwho{
margin-top: 18px; /* biraz aşağı insin */
padding: 20px 22px;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.12);
}
.forwho-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom: 12px;
}
.forwho h2{
margin:0;
font-size: 18px;
letter-spacing: -.01em;
}
.forwho-sub{
margin:0;
font-size: 13px;
opacity:.85;
}
.forwho-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
margin-top: 10px;
}
.forwho-box{
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.12);
border-radius: 16px;
padding: 14px 14px;
}
.forwho-top{
display:flex;
align-items:center;
gap:10px;
margin-bottom: 10px;
}
.forwho-icon{
width: 28px;
height: 28px;
border-radius: 10px;
display:grid;
place-items:center;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
}
.forwho-list{
margin:0;
padding-left: 18px;
}
.forwho-list li{
margin: 8px 0;
line-height: 1.5;
color: rgba(255,255,255,.88);
}
.forwho-verdict{
margin: 14px 0 0;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.92);
}
@media (max-width: 900px){
.forwho-grid{ grid-template-columns: 1fr; }
.forwho-head{ align-items:flex-start; flex-direction:column; }
}
/* =========================
404 Page
========================= */
.e404{
padding: 26px;
overflow: hidden;
position: relative;
}
.e404::before{
content:"";
position:absolute;
inset:-60px -60px auto -60px;
height:240px;
background: radial-gradient(600px 240px at 20% 30%, rgba(120,160,255,.20), transparent 60%),
radial-gradient(520px 220px at 80% 0%, rgba(90,255,200,.14), transparent 60%);
pointer-events:none;
}
.e404-top{
position: relative;
z-index: 1;
}
.e404-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:68px;
height:34px;
border-radius: 999px;
font-weight: 800;
letter-spacing: .08em;
border: 1px solid rgba(255,255,255,.18);
background: rgba(0,0,0,.18);
margin-bottom: 10px;
}
.e404 h1{
margin: 0 0 8px;
}
.e404-actions{
position: relative;
z-index: 1;
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top: 14px;
}
.e404-search{
position: relative;
z-index: 1;
margin-top: 18px;
}
.e404-search-row{
display:flex;
gap:10px;
margin-top: 8px;
align-items:center;
}
.e404-search-row input{
flex:1;
min-width: 220px;
height: 42px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.18);
color: inherit;
outline: none;
}
.e404-search-row input:focus{
border-color: rgba(120,160,255,.45);
box-shadow: 0 0 0 3px rgba(120,160,255,.15);
}
.e404-hint{
margin: 10px 0 0;
opacity: .9;
}
.e404-sep{
border: 0;
height: 1px;
background: rgba(255,255,255,.12);
margin: 18px 0;
}
.e404-links{
position: relative;
z-index: 1;
display:flex;
flex-wrap:wrap;
gap:10px;
}
/* mobil */
@media (max-width: 560px){
.e404{ padding: 18px; }
.e404-search-row{ flex-direction: column; align-items: stretch; }
.e404-search-row input{ width: 100%; }
}
/* 🐦 BIRD ANIMATION */
/* =========================
404 BIRD (bird + bird-anim)
Works with:
![]()
========================= */
.bird{
display:block;
width:100%;
max-width: 160px; /* 👈 küçültme (170–200 arası ideal) */
margin: 14px auto 10px; /* 👈 biraz aşağı + güzel boşluk */
filter: drop-shadow(0 18px 34px rgba(0,0,0,.25));
transform-origin: 50% 65%;
}
.bird-anim{
animation:
birdIntro 900ms ease-out 1,
birdFloat 4.6s ease-in-out infinite 900ms,
birdTilt 7.2s ease-in-out infinite 900ms;
will-change: transform;
}
@keyframes birdIntro{
0% { transform: translateY(6px) scale(.92); opacity:0; }
65% { transform: translateY(-2px) scale(1.03); opacity:1; }
100% { transform: translateY(0) scale(1); }
}
@keyframes birdFloat{
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes birdTilt{
0% { rotate: 0deg; }
20% { rotate: -2deg; }
40% { rotate: 2deg; }
60% { rotate: -1deg; }
100% { rotate: 0deg; }
}
.e404-top{
display: grid;
gap: 10px;
}
.bird{
max-width: 160px; /* önce 190’dı */
margin: 14px auto 10px; /* biraz yukarı çekiyoruz */
}
/*detail sayfasinda ustteki buyuk resimle fur wen arasi*/
.detail-hero{
position: relative;
z-index: 2;
margin-bottom: 40px;
}
.detail-why{
position: relative;
z-index: 1;
margin-top: 0;
}
.detail-hero{
padding: 32px 36px;
}
@media (min-width: 1024px){
.detail-hero{
padding: 40px 48px;
}
}
.detail-hero-inner{
gap: 32px;
}
.detail-info{
padding: 24px;
}
.detail-info .btn{
margin-top: 20px;
}
.detail-hero,
.detail-why{
border-radius: 20px;
}
/* ✅ Thumbnail grid (zaten var sende) */
.page.detail .thumbs{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* ✅ Buton kutusu: ortala + sabit ölçü */
.page.detail .thumbs .thumb{
width: 74px;
height: 74px;
display: grid;
place-items: center;
padding: 10px;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.06); /* cam hissi */
border: 1px solid rgba(255,255,255,.10);
}
/* ✅ resim: kutuya düzgün otursun */
.page.detail .thumbs .thumb img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
/* aktif seçili olan */
.page.detail .thumbs .thumb.active{
border-color: rgba(110,168,255,.55);
box-shadow: 0 0 0 2px rgba(110,168,255,.18) inset;
}
/* =========================
HOVER / MICRO INTERACTIONS
========================= */
/* genel yumuşak geçişler */
.card,
.product-card,
.tip-card,
.category-card,
.filter-card,
.glass,
button,
.btn,
a.btn {
transition:
transform .22s ease,
box-shadow .22s ease,
background-color .22s ease,
border-color .22s ease,
filter .22s ease;
}
/* kartların üzerine gelince hafif yükselme */
.card:hover,
.product-card:hover,
.tip-card:hover,
.category-card:hover,
.filter-card:hover,
.glass:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,0,0,.28);
border-color: rgba(255,255,255,.16);
}
/* cam parlaması (üstten ışık geçiyor gibi) */
.card,
.product-card,
.tip-card,
.category-card,
.filter-card,
.glass {
position: relative;
overflow: hidden; /* parlamayı içeride tut */
}
.card::before,
.product-card::before,
.tip-card::before,
.category-card::before,
.filter-card::before,
.glass::before {
content: "";
position: absolute;
inset: -2px;
background:
radial-gradient(800px 200px at 20% 0%,
rgba(255,255,255,.12),
rgba(255,255,255,0) 60%);
opacity: .0;
transform: translateY(-8px);
transition: opacity .22s ease, transform .22s ease;
pointer-events: none;
}
.card:hover::before,
.product-card:hover::before,
.tip-card:hover::before,
.category-card:hover::before,
.filter-card:hover::before,
.glass:hover::before {
opacity: 1;
transform: translateY(0);
}
/* kart içindeki ana görsel: hafif zoom */
.card img,
.product-card img,
.tip-card img,
.category-card img {
transition: transform .28s ease, filter .28s ease;
}
.card:hover img,
.product-card:hover img,
.tip-card:hover img,
.category-card:hover img {
transform: scale(1.03);
filter: saturate(1.05);
}
/* Buton hover: Apple tarzı yumuşak glow */
.btn,
button {
position: relative;
}
.btn:hover,
button:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
/* Primary buton (senin gradientli butonlar) */
.btn.primary:hover,
button.primary:hover,
a.btn.primary:hover {
filter: brightness(1.05);
box-shadow:
0 18px 45px rgba(74, 128, 255, .22),
0 14px 30px rgba(0,0,0,.22);
}
/* Ghost buton (çerçeveli) hover */
.btn.ghost:hover,
button.ghost:hover,
a.btn.ghost:hover {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.22);
}
/* Focus görünürlüğü (klavye ile gezenler için çok iyi) */
:where(a, button, .btn, input, select, textarea):focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(120, 170, 255, .35);
border-color: rgba(255,255,255,.25);
border-radius: 12px;
}
.site-header .brand-slogan{
font-size: 11px !important;
color: rgba(255,255,255,.60) !important;
margin-left: 10px !important;
line-height: 1 !important;
transform: translateY(-2px) !important;
white-space: nowrap !important;
}
.brand{
display: flex;
align-items: baseline; /* 👈 kritik nokta */
gap: 12px;
}
.brand-logo{
height: 20px; /* theyr yüksekliği */
}
.brand-slogan{
font-size: 12px; /* küçük */
font-weight: 500;
color: rgba(255,255,255,.65);
line-height: 1;
transform: translateY(3px); /* 👈 biraz aşağı */
letter-spacing: .2px;
white-space: nowrap;
}
/* Header brand hizalama (theyr + slogan) */
.brand{
display:flex;
align-items:center; /* baseline yerine */
gap: 12px;
}
/* theyr yazısı */
.brand-text{
font-size: 26px; /* istersen 24-28 arası */
font-weight: 800;
letter-spacing: .2px;
}
/* slogan: theyr ile aynı hizada başlasın ama küçük + biraz aşağı */
.brand-slogan{
font-size: 12px !important;
opacity: .85 !important;
line-height: 1.2;
position: relative;
top: 6px; /* 👈 aşağı indir (4-8 arası dene) */
white-space: nowrap;
}
/* Logo (kuş) boyutu */
.brand img,
.brand .logo {
width: 80px; /* şu an 44px gibi, 52–60 arası ideal */
height: auto;
}
/* Logo ile yazı hizası biraz daha net olsun */
.brand{
align-items: center;
}
@media (max-width: 768px){
.brand img{
width: 44px;
}
}
/* ==============================
HOME – layout polish (no HTML change)
============================== */
/* main container spacing */
.container.page{
padding-top: 18px;
padding-bottom: 64px;
}
/* Anasayfa: hero yukarı (container kuralını geçersiz kıl) */
main#homeMain.container.page{
padding-top: 4px !important;
}
/* HERO grid – ca. 5 % kompakter */
.home-hero{
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 8px;
align-items: start;
margin-top: 8px; /* header ile hero arasına nefes */
}
@media (max-width: 980px){
.home-hero{
grid-template-columns: 1fr;
}
}
/* Hero left typography – ca. 5 % kleiner */
.home-hero-left h1{
font-size: clamp(24px, 3vw, 40px);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 2px 0 3px;
}
.home-hero-left .badge{
padding: 3px 7px;
font-size: 10px;
}
.home-hero-left .muted{
max-width: 58ch;
margin: 0 0 1px;
font-size: 0.88rem;
}
/* Hero-left card: üst/yandan kompakt, alttan nefes alacak boşluk */
.home-hero .card.home-hero-left{
padding: 9px 12px 18px 12px;
}
.home-hero-left .manifest{
font-size: 0.82rem;
line-height: 1.38;
margin-top: 2px;
}
/* Actions */
.home-hero-actions{
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
/* Stats */
.home-hero-stats{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 3px;
margin-top: 4px;
}
.home-hero-stats .mini{
padding: 3px 5px;
font-size: 0.72rem;
}
.home-hero-stats .mini .k{ opacity: .85; }
.home-hero-stats .mini .v{ font-weight: 600; }
@media (max-width: 680px){
.home-hero-stats{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Right side */
.home-hero-right{
display: grid;
gap: 8px;
}
/* Sections */
.section{
margin-top: 34px;
}
.section-head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.section-head .link{
white-space: nowrap;
}
/* Grids */
.grid{
display: grid;
gap: 14px;
}
.grid.home-cats{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.home-compare{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.tips-grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.home-new-products{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid.home-method{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){
.grid.home-cats,
.grid.home-compare,
.grid.tips-grid,
.grid.home-new-products,
.grid.home-method{
grid-template-columns: 1fr;
}
}
/* Search card alignment */
.home-search{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.home-search-form{
display: grid;
grid-template-columns: 1fr 180px auto;
gap: 10px;
align-items: center;
}
@media (max-width: 720px){
.home-search-form{
grid-template-columns: 1fr;
}
.home-search-form button{
width: 100%;
}
}
/* Chips */
.home-search-chips{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Header brand slogan: inline style yerine buradan kontrol */
.brand-slogan{
font-size: 12px;
opacity: .9;
margin-left: 10px;
line-height: 1.2;
}
/* Focus states (yayında kalite hissi) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
outline: 2px solid rgba(123, 97, 255, .55);
outline-offset: 3px;
border-radius: 12px;
}
/* Smooth hover (apple-ish) */
.card,
.btn,
.home-cat,
.tip-card{
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{
transform: translateY(-2px);
}
/* ===== Kategorien Hero (clean) ===== */
.cat-hero{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
}
.cat-hero-left{ min-width: 240px; }
.cat-title{
margin:10px 0 6px;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -.02em;
}
.cat-sub{ margin:0; line-height:1.6; }
.cat-search{
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-end;
min-width: 320px;
}
.cat-search-wrap{
width:100%;
display:flex;
gap:10px;
align-items:center;
}
.cat-search-wrap input{
flex:1;
min-width: 200px;
}
.cat-hints{
width:100%;
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.chip-small{
padding:8px 10px;
border-radius:999px;
font-size:12px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.chip-small:hover{
background: rgba(255,255,255,.08);
}
@media (max-width: 900px){
.cat-hero{
flex-direction:column;
align-items:flex-start;
}
.cat-search{
width:100%;
align-items:stretch;
min-width: 0;
}
.cat-hints{
justify-content:flex-start;
}
}
/* chips active state */
.cat-hints .chip.active{
border-color: rgba(120,140,255,.55);
background: rgba(120,140,255,.18);
box-shadow: 0 0 0 1px rgba(120,140,255,.25) inset;
}
.cat-hints .chip.active{
border-color: rgba(120,140,255,.55);
background: rgba(120,140,255,.18);
box-shadow:
0 0 0 1px rgba(120,140,255,.25) inset,
0 8px 24px rgba(0,0,0,.25);
}
.cat-banner{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
margin: 4px 0 14px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px);
}
.cat-banner .muted{ margin-left:auto; }
/* --- Filter Accordion --- */
.filter-group {
border-radius: 14px;
padding: 10px 12px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
}
.filter-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: 0;
color: inherit;
font: inherit;
cursor: pointer;
padding: 6px 0;
}
.filter-head:hover { opacity: .95; }
.filter-head .chev {
transition: transform .25s ease;
opacity: .75;
}
.filter-body { margin-top: 8px; }
.filter-group.is-collapsed .filter-body { display: none; }
.filter-group.is-collapsed .chev { transform: rotate(-90deg); }
/* =========================================================
SAUGROBOTER FINDER – KOMPAKT KART (v1)
========================================================= */
#saugroboterFinder{
margin: 0 0 16px;
}
#saugroboterFinder .card{
padding: 14px;
border-radius: 18px;
background: rgba(10,14,30,.62);
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
backdrop-filter: blur(10px);
}
/* Başlıkları küçült */
#saugroboterFinder .badge{
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
}
#saugroboterFinder h2{
font-size: 20px;
line-height: 1.2;
margin: 8px 0 8px;
}
#saugroboterFinder p,
#saugroboterFinder .muted{
font-size: 13px;
opacity: .84;
}
/* Sorular arası boşluğu azalt */
#saugroboterFinder .finder-q{
margin: 10px 0;
}
/* Chip’ler grid */
#saugroboterFinder .finder-chips{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
#saugroboterFinder .chip{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 10px;
border-radius: 14px;
font-size: 13px;
line-height: 1.1;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
box-shadow: none;
}
#saugroboterFinder .chip:hover{
background: rgba(255,255,255,.09);
}
#saugroboterFinder .chip.active{
background: rgba(110,90,255,.22);
border-color: rgba(140,120,255,.55);
box-shadow: 0 0 0 3px rgba(120,100,255,.12);
}
/* Buton satırı */
#saugroboterFinder .finder-actions{
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
}
#saugroboterFinder #finderApply{
flex: 1;
padding: 12px 14px;
border-radius: 14px;
}
#saugroboterFinder #finderReset{
padding: 12px 14px;
border-radius: 14px;
white-space: nowrap;
}
#saugroboterFinder #finderHint{
font-size: 12px;
opacity: .78;
}
/* Mobil */
@media (max-width: 700px){
#saugroboterFinder .finder-chips{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Finder – main yüksekliğine uyum */
#saugroboterFinder{
align-self: stretch;
}
.compare-layout{
display: grid;
grid-template-columns: minmax(320px, 420px) 1fr;
gap: 20px;
align-items: stretch;
}
#saugroboterFinder .card{
height: 100%;
}
.finder-summary{
margin-top:10px;
width:100%;
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:flex-start;
}
.finder-summary .sum-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
font-size:13px;
line-height:1;
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter: blur(8px);
}
.finder-summary .sum-chip b{
font-weight:700;
color:#fff;
}
.finder-pill.is-active::after {
content: "✓";
font-size: 11px;
margin-left: 4px;
opacity: 0.8;
}
#finderTopPick{
border: 1px solid rgba(120,140,255,.35);
box-shadow: 0 0 0 1px rgba(120,140,255,.1) inset;
}
/* Finder: Apply button sabit kalsın (layout shift yok) */
#finderApply{
min-width: 260px; /* burada zıplamayı bitiriyoruz */
height: 44px; /* tek satır sabit yükseklik */
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap; /* satır kırma = zıplama biter */
line-height: 1;
}
/* (2) gibi sayaç daha küçük dursun */
#finderApply .finder-apply-count{
font-weight: 700;
opacity: .9;
font-size: 13px;
}
/* çok dar ekranlarda (mobil) tam genişlik daha iyi */
@media (max-width: 520px){
#finderApply{ min-width: 100%; }
}
/* Finder soru blokları */
.finder-q {
margin-bottom: 22px; /* şuan ~12-14px gibi duruyor */
}
/* Chip grupları */
.finder-chips {
gap: 10px; /* varsa 6–8 ise artır */
}
/* Chip’ler */
.finder-chips .chip {
padding: 10px 14px;
}
.finder-chips .chip.active {
background: linear-gradient(135deg, #5b7cff, #7a8cff);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 18px rgba(91,124,255,.35);
transform: translateY(-1px);
}
.finder-chips .chip:hover {
transform: translateY(-1px);
}
.finder-summary {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.finder-summary .sum-chip {
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
border-radius: 999px;
padding: 6px 12px;
font-size: 13px;
white-space: nowrap;
}
.finder-badges {
display: flex;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
}
.finder-badge {
font-size: 11px;
padding: 3px 7px;
border-radius: 999px;
background: #3b82f6;
color: #fff;
}
#finderDebug {
position: fixed;
bottom: 16px;
right: 16px;
background: rgba(0,0,0,0.75);
color: #fff;
font-size: 12px;
padding: 10px 12px;
border-radius: 10px;
z-index: 9999;
max-width: 260px;
}
.finder-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-right:auto; /* solda kalsın, rating sağa kayabilir */
}
.finder-badge{
font-size:12px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.06);
color:rgba(255,255,255,.92);
line-height:1;
white-space:nowrap;
}
.finder-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-left:auto;
}
.badge.finder{
opacity:.9;
font-size:12px;
padding:6px 10px;
border-radius:999px;
}
/* Finder rozetleri */
.finder-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
margin-right:auto; /* badge/rating/pick yanında sola yaslansın */
}
.badge.finder{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
font-size:12px;
line-height:1;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
}
.badge.finder .fi{
font-size:13px;
line-height:1;
}
.badge.finder .ft{
font-weight:600;
letter-spacing:.1px;
}
/* Finder eşleşen karta hafif vurgu (opsiyonel) */
.compare-card.is-finder-match{
outline:2px solid rgba(255,255,255,.10);
box-shadow:0 10px 30px rgba(0,0,0,.20);
}
/* Finder badges */
.finder-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
align-items:center;
margin-right:auto;
}
/* Finder explainability: tam genişlik, metin taşmasın */
.compare-card .finder-why{
flex:1 1 100%;
width:100%;
min-width:0;
margin:0;
padding:4px 0 0;
font-size:12px;
line-height:1.35;
overflow-wrap:break-word;
word-wrap:break-word;
word-break:break-word;
}
/* Kart başlığında rating ve Vergleichen sıkışmasın; Vergleichen cover üstünde tıklanabilir kalsın */
.compare-card .card-head .rating,
.compare-card .card-head .compare-pick{
flex-shrink:0;
}
.compare-card .card-head .compare-pick{
position:relative;
z-index:2;
}
.compare-card .card-head--minimal .compare-pick--hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
border:0;
}
.compare-card .card-head--minimal .compare-pick--hidden input{ margin:0; }
.badge.finder{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
font-size:12px;
line-height:1;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
backdrop-filter: blur(6px);
}
.badge.finder .fi{ font-size:13px; line-height:1; }
.badge.finder .ft{ font-weight:600; letter-spacing:.1px; }
.compare-card.is-finder-match{
outline:2px solid rgba(255,255,255,.10);
box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.category-icon{
width: 28px;
height: 28px;
flex: 0 0 28px;
color: rgba(255,255,255,.85);
opacity: .92;
}
.home-cat:hover .category-icon{
color: #ff6a00;
opacity: 1;
}
.cat-icon img{
width:28px;
height:28px;
display:block;
}
/* sadece yazı alanı arkasında blur + yazı boyutu */
.cat-card-text{
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(0,0,0,.4);
padding: 10px 12px;
border-radius: 12px;
margin-bottom: 4px;
}
.cat-card .cat-card-text .badge{
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
}
.cat-card .cat-card-muted{
font-size: 0.8rem;
margin-top: 4px;
line-height: 1.35;
color: rgba(255,255,255,.75);
}
.cat-card .cat-top-name{
color: rgba(255,255,255,.92);
word-break: break-word;
}
/* --- Kategori kartları: yalnızca SVG ikon, theyr premium tarzı --- */
.cat-card{
position: relative;
overflow: hidden;
border-radius: 16px;
background: linear-gradient(160deg, rgba(255,106,0,.5), rgba(255,106,0,.32));
border: 1px solid rgba(255,106,0,.5);
box-shadow: 0 4px 24px rgba(255,106,0,.22), 0 2px 12px rgba(0,0,0,.15);
display: flex;
flex-direction: column;
padding: 20px 18px 18px;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cat-card:hover{
background: linear-gradient(160deg, rgba(255,106,0,.6), rgba(255,106,0,.42));
border-color: rgba(255,106,0,.7);
box-shadow: 0 8px 32px rgba(255,106,0,.35), 0 0 0 1px rgba(255,255,255,.15);
}
.cat-card-link{
display: block;
text-decoration: none;
color: inherit;
cursor: pointer;
min-width: 0;
}
.cat-card-link:hover{
color: inherit;
text-decoration: none;
}
.cat-card-header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.cat-card-icon{
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 0 0 1px rgba(255,106,0,.15), inset 0 1px 0 rgba(255, 255, 255, 0.12);
flex-shrink: 0;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
color: #ffffff;
}
.cat-card-link:hover .cat-card-icon{
border-color: rgba(255, 106, 0, 0.35);
box-shadow: 0 0 16px rgba(255, 106, 0, 0.2);
color: #fff;
}
.cat-card-icon img.cat-theyr-icon{
width: 40px;
height: 40px;
object-fit: contain;
display: block;
}
.cat-card-title{
font-size: 1.12rem;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.25;
color: #fff;
text-align: right;
flex: 1;
min-width: 0;
}
.cat-card-top-product{
font-size: 0.78rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 14px;
}
.cat-card-top-product .cat-card-rating{
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
color: rgba(255, 255, 255, 0.9);
}
.cat-card-top-product .cat-star-icon{ flex-shrink: 0; }
.cat-card-footer{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cat-card-actions{
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cat-card-actions .cat-btn-equal{
min-width: 88px;
justify-content: center;
}
.cat-card-count{
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.55);
flex-shrink: 0;
}
.cat-card .cat-card-actions .btn.primary{
background: #ff6a00;
border: none;
color: #ffffff !important;
}
.cat-card .cat-card-actions .btn.primary:hover{
background: #e55f00;
color: #ffffff !important;
}
.cat-card .cat-card-actions .btn.ghost{
border: 1px solid rgba(255, 255, 255, 0.35);
background: transparent;
color: #fff;
}
.cat-card .cat-card-actions .btn.ghost:hover{
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 640px){
.cat-card{ padding: 16px 14px 14px; }
.cat-card-icon{ width: 48px; height: 48px; }
.cat-card-icon img.cat-theyr-icon{ width: 32px; height: 32px; }
.cat-card-title{ font-size: 1rem; }
.cat-card-actions .cat-btn-equal{ min-width: 76px; }
}
.cat-card > *{
position: relative;
z-index: 2;
}
/*bugün top ürün*/
/* =========================
Today Note (Heute bleibt)
========================= */
.today-note{
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.today-note-inner{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.today-dot{
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(255,255,255,.85);
box-shadow: 0 0 0 4px rgba(255,255,255,.10);
flex: 0 0 auto;
}
.today-text{
margin: 0;
font-size: 14px;
line-height: 1.35;
color: rgba(255,255,255,.92);
flex: 1;
}
.today-text strong{
font-weight: 700;
}
.today-link{
margin-left: 8px;
color: rgba(255,255,255,.95);
text-decoration: underline;
text-underline-offset: 3px;
}
.today-close{
appearance: none;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.10);
color: rgba(255,255,255,.92);
border-radius: 10px;
padding: 6px 10px;
cursor: pointer;
line-height: 1;
flex: 0 0 auto;
}
.today-close:active{
transform: translateY(1px);
}
/* Mobile: daha kompakt */
@media (max-width: 600px){
.today-note-inner{
padding: 10px 0;
}
.today-text{
font-size: 13px;
}
.today-close{
padding: 6px 9px;
}
}
/* FIX: Home Top Produkt card */
.home-pick{
display: flex;
flex-direction: column;
align-items: stretch;
}
.home-pick-media{
position: relative;
width: 100%;
height: 180px; /* 🔑 SABİT YÜKSEKLİK */
margin: 12px 0;
border-radius: 14px;
overflow: hidden; /* 🔑 TAŞMAYI KES */
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
}
.home-pick-media img{
width: 100%;
height: 100%;
object-fit: contain; /* telefonu kesmez */
display: block;
}
.home-pick-media{ height: 200px; }
@media (max-width: 900px){
.home-pick{ margin-top: 6px; }
}
/* Home pick card: no image burasi cok önemli heute top modelde resim acip kapatmak icin*/
#homePick .home-pick-media{
display: none !important;
}
/* === HOME PICK IMAGE (OPTIONAL) - COMMENTED OUT ilerde resim acmak istersek anasayfada===
#homePick === END HOME PICK IMAGE === */.home-pick-media{
position: relative;
width: 100%;
height: 180px;
margin: 12px 0;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
}
#homePick .home-pick-media img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* MOBILE FIX: slogan mobilde kapansin */
@media (max-width: 768px){
.brand-slogan{
display: none;
}
}
html, body{
max-width: 100%;
overflow-x: hidden;
}
.header-inner{
max-width: 100%;
}
/* =========================
MOBILE NAV FIX (FINAL, minimal)
- prevents mobile menu from being clipped
- ensures hamburger lines are visible
========================= */
html, body{
max-width: 100%;
overflow-x: hidden;
}
/* IMPORTANT: mobile menu must not be clipped */
.site-header{
overflow: visible !important;
}
/* hamburger lines */
.menu-btn span{
display: block !important;
width: 20px !important;
height: 2px !important;
background: rgba(255,255,255,.92) !important;
border-radius: 99px !important;
}
/* mobile dropdown positioning */
.mobile-menu{
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
z-index: 2000 !important;
}
/* mobile: slogan off (avoid overflow) */
@media (max-width: 768px){
.brand-slogan{ display:none !important; }
}
/* ===== HAMBURGER (SPAN BAĞIMSIZ) – GARANTİ ===== */
.menu-btn{
position: relative !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
/* Kapalıyken ::before yok (üç çizgi span ile) */
.menu-btn::before{
content: none !important;
display: none !important;
}
/* Span’lar kalsa da fark etmez (istersen gizle) */
.menu-btn span{
display: block !important;
width: 20px !important;
height: 2px !important;
background: rgba(255,255,255,.95) !important;
border-radius: 99px !important;
}
.menu-btn.is-open span{ display: none !important; }
/* Menü açıkken X göster */
.menu-btn.is-open::before{
content: "\00d7" !important;
display: block !important;
width: auto !important;
height: auto !important;
font-size: 26px !important;
line-height: 1 !important;
color: rgba(255,255,255,.95) !important;
font-weight: 300 !important;
}
/* Desktop'ta zaten nav var */
@media (min-width: 881px){
.menu-btn{ display:none !important; }
}
/* =========================
MOBILE MENU — smooth slide
(CSS'i en alta ekle)
========================= */
/* Mobilde çalışsın */
@media (max-width: 880px){
/* Menü artık animasyonla kontrol edilecek -> display:none kullanmıyoruz */
.mobile-menu{
display: block !important;
/* animasyon için */
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-8px);
transition:
max-height .32s ease,
opacity .22s ease,
transform .22s ease;
pointer-events: none; /* kapalıyken tıklanmasın */
}
.mobile-menu.is-open{
max-height: 520px; /* menü uzunluğuna göre 380–700 arası olabilir */
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Menü linkleri de yumuşak gelsin */
.mobile-menu .mobile-link{
transform: translateY(-6px);
opacity: 0;
transition: transform .22s ease, opacity .22s ease;
}
.mobile-menu.is-open .mobile-link{
transform: translateY(0);
opacity: 1;
}
}
/* MOBILE MENU SLIDE */
.mobile-menu{
position: absolute;
left: 0;
right: 0;
top: 100%;
transform: translateY(-12px);
opacity: 0;
pointer-events: none;
transition:
transform .28s ease,
opacity .28s ease;
background: rgba(10,16,36,.9);
backdrop-filter: blur(12px);
}
/* AÇIK HAL */
.mobile-menu.is-open{
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* =========================
MOBILE MENU — FORCE SLIDE (OVERRIDE)
CSS'in EN ALTINDA kalsın
========================= */
@media (max-width: 880px){
/* Header içinde absolute menu çalışsın */
.site-header{ overflow: visible !important; }
.site-header .container{ position: relative !important; }
/* Menü görünür kalsın ama animasyonla gizlensin */
#mobileMenu.mobile-menu{
display: block !important; /* display:none’i öldür */
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
z-index: 2000 !important;
border-top: 1px solid var(--border) !important;
background: rgba(8, 12, 20, .85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
transform: translateY(-10px) !important;
transition: max-height .32s ease, opacity .22s ease, transform .22s ease !important;
pointer-events: none !important;
}
/* Açık hali */
#mobileMenu.mobile-menu.is-open{
max-height: 520px !important;
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* Linkler de yumuşak gelsin */
#mobileMenu .mobile-link{
opacity: 0;
transform: translateY(-6px);
transition: opacity .22s ease, transform .22s ease;
}
#mobileMenu.is-open .mobile-link{
opacity: 1;
transform: translateY(0);
}
}
/*anasayfa da verglecih*/
.compare-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* Tipps card cover image */
.tip-cover{
display:block;
border-radius: 18px;
overflow:hidden;
aspect-ratio: 16 / 9;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
}
.tip-cover img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform: scale(1.02);
transition: transform .25s ease;
}
.tip-card:hover .tip-cover img{
transform: scale(1.06);
}
/* Cover üstüne profil satırı */
.tip-card{ position: relative; }
.tip-card .tip-cover{ position: relative; }
/* badge + profil kapsayıcı (sol alt) */
.tip-card .tip-cover-overlay{
position:absolute;
left:12px;
bottom:12px;
display:flex;
flex-direction:column;
gap:8px;
z-index:2;
}
/* Nutzererfahrung badge: zaten sende var gibi, burada sadece sabitliyoruz */
.tip-card .tip-cover-overlay .badge{
display:inline-flex;
align-self:flex-start;
}
/* Am meisten angesehen / gemocht / gespeichert */
.tip-card .tip-cover-overlay .tip-stat-label{
display:inline-flex;
align-self:flex-start;
font-size:.75rem;
font-weight:600;
color:rgba(255,255,255,.95);
text-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* Profil satırı */
.tip-card .tip-cover-profile{
display:flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
background: rgba(10, 14, 30, .55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
max-width: 260px;
}
/* Avatar */
.tip-card .tip-cover-profile .avatar{
width:28px;
height:28px;
border-radius:999px;
background: rgba(255,255,255,.12);
background-size: cover;
background-position:center;
flex:0 0 auto;
}
/* İsim + tik */
.tip-card .tip-cover-profile .name{
display:flex;
align-items:center;
gap:6px;
min-width:0;
color:#fff;
font-weight:600;
font-size:.92rem;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.tip-card .tip-cover-profile .tick{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
background: rgba(255,255,255,.14);
font-size:.82rem;
flex:0 0 auto;
}
.tip-card .tip-cover{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tip-card .tip-cover::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(
to bottom,
rgba(0,0,0,.10) 0%,
rgba(0,0,0,.45) 100%
);
border-radius: inherit;
}
.tip-card:hover .tip-cover-profile{
background: rgba(10,14,30,.65);
}
/* Verified (blue tick – Twitter/Instagram style) */
.tip-card .tip-cover-profile .tick{
background: linear-gradient(135deg, #1d9bf0, #4aa8ff);
color:#fff;
box-shadow:
0 0 0 2px rgba(29,155,240,.25),
inset 0 0 0 1px rgba(255,255,255,.35);
}
/* Home – Tipps cover biraz daha kompakt */
.tips-grid .tip-card .tip-cover{
height: 160px; /* önce: ~160px */
}
/* Ürün görselleri: biraz geri çek (zoom out) */
.tips-grid .tip-card .tip-cover{
background-size: 85%; /* önce: cover / %100 */
background-position: center;
background-repeat: no-repeat;
}
.tips-grid .tip-card .tip-cover{
background-size: 40%;
}
@media (max-width: 560px){
.tips-grid .tip-card .tip-cover{
height: 120px;
}
}
/* Mobil */
@media (max-width: 560px){
.tip-card .tip-cover-overlay{ left:10px; bottom:10px; gap:7px; }
.tip-card .tip-cover-profile{ max-width: 220px; padding:7px 9px; }
.tip-card .tip-cover-profile .avatar{ width:26px; height:26px; }
}
/* Anasayfa: Tipp-Karte Modal (halb Blur, unten Anmelden/Registrieren) */
.home-tip-modal{
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.home-tip-modal.is-open{
display: flex;
}
.home-tip-modal-backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,.6);
backdrop-filter: blur(4px);
}
.home-tip-modal-card{
position: relative;
width: 100%;
max-width: 480px;
max-height: 85vh;
border-radius: 20px;
overflow: hidden;
background: rgba(18,22,32,.97);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 24px 56px rgba(0,0,0,.5);
display: flex;
flex-direction: column;
}
.home-tip-modal-content{
flex: 1;
overflow-y: auto;
padding: 20px 20px 24px;
position: relative;
}
.home-tip-modal-visible{
margin-bottom: 16px;
}
.home-tip-modal-badge{
display: inline-block;
margin-bottom: 10px;
font-size: .8rem;
}
.home-tip-modal-title{
margin: 0 0 10px;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.3;
}
.home-tip-modal-signals{
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
margin: 8px 0 12px;
font-size: .8rem;
color: rgba(255,255,255,.85);
}
/* Misafir: Aufrufe tam görünür; Speicherungen & hilfreich yarım gri */
.home-tip-modal.is-guest #homeTipModalSigViews{
color: rgba(255,255,255,.85);
}
.home-tip-modal.is-guest #homeTipModalSigViews .home-tip-sig-ico{
opacity: 1;
}
.home-tip-modal.is-guest #homeTipModalSigSaves,
.home-tip-modal.is-guest #homeTipModalSigLikes{
color: rgba(255,255,255,.45);
opacity: .9;
}
.home-tip-modal.is-guest #homeTipModalSigSaves .home-tip-sig-ico,
.home-tip-modal.is-guest #homeTipModalSigLikes .home-tip-sig-ico{
opacity: .55;
}
.home-tip-sig{
display: inline-flex;
align-items: center;
gap: 5px;
}
.home-tip-sig-ico{
width: 15px;
height: 15px;
flex-shrink: 0;
}
.home-tip-sig-views{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366a8ff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.home-tip-sig-saves{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5b84d' stroke-width='1.8'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.home-tip-sig-likes{
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235dd88a' stroke-width='1.8'%3E%3Cpath d='M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-2V9a2 2 0 00-2-2h-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.home-tip-modal-profile-link-wrap{
margin: 12px 0 14px;
}
.home-tip-modal-profile-link-wrap .btn{ display: inline-flex; }
.home-tip-modal-media{
margin: 0 0 10px;
border-radius: 12px;
overflow: visible;
background: rgba(255,255,255,.06);
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.home-tip-modal-media img{
width: 100%;
height: auto;
max-height: 280px;
display: block;
object-fit: contain;
object-position: center;
}
.home-tip-modal-product-name{
margin: 0 0 6px;
font-size: .85rem;
font-weight: 600;
}
.home-tip-modal-excerpt{
margin: 0 0 14px;
font-size: .95rem;
line-height: 1.5;
}
.home-tip-modal-procon{
margin: 0 0 12px;
font-size: .9rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.home-tip-procon-box{
border-radius: 12px;
padding: 12px 14px;
background: rgba(255,255,255,.06);
border-left: 4px solid;
}
.home-tip-procon-plus{
border-left-color: rgba(0,255,140,.85);
}
.home-tip-procon-minus{
border-left-color: rgba(255,80,80,.85);
}
.home-tip-procon-title{
font-weight: 700;
font-size: .95rem;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.home-tip-procon-plus .home-tip-procon-title{ color: rgba(0,255,140,.95); }
.home-tip-procon-minus .home-tip-procon-title{ color: rgba(255,80,80,.95); }
.home-tip-procon-list{
margin: 0;
padding: 0;
list-style: none;
}
.home-tip-procon-item{
padding: 4px 0;
font-size: .88rem;
line-height: 1.35;
color: rgba(255,255,255,.88);
transition: filter .2s ease;
}
.home-tip-procon-item--blurred{
filter: blur(4px);
user-select: none;
pointer-events: none;
opacity: .85;
}
.home-tip-procon-item--open{
color: rgba(255,255,255,.95);
}
@media (max-width: 520px) {
.home-tip-modal-procon{ grid-template-columns: 1fr; }
}
.home-tip-modal-author{
display: flex;
align-items: center;
gap: 8px;
font-size: .9rem;
opacity: .9;
}
.home-tip-modal-author .avatar{
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(255,255,255,.1);
background-size: cover;
background-position: center;
}
.home-tip-modal-blur-block{
min-height: 120px;
padding: 24px 16px;
text-align: center;
position: relative;
background: linear-gradient(to bottom, transparent 0%, rgba(18,22,32,.5) 20%, rgba(18,22,32,.98) 50%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
filter: blur(8px);
pointer-events: none;
margin: 8px 0 0;
}
.home-tip-modal-blur-block p{
margin: 0;
font-size: .9rem;
opacity: .85;
}
.home-tip-modal-cta{
flex-shrink: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
padding: 18px 20px 20px;
background: rgba(0,0,0,.25);
border-top: 1px solid rgba(255,255,255,.08);
}
.home-tip-modal-cta-text{
margin: 0 0 4px;
text-align: center;
font-size: 0.9rem;
max-width: 320px;
}
.home-tip-modal-cta-btns{
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.home-tip-modal-cta .btn{
min-width: 140px;
}
.home-tip-modal-view-only{
margin: 0;
font-size: 0.9rem;
text-align: center;
}
.home-tip-modal-close{
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 2;
transition: background .2s;
}
.home-tip-modal-close:hover{
background: rgba(255,255,255,.2);
}
/* Vergleich – Details butonu (normal) */
#compareList .btn.primary{
background: #ff6a00;
color: #ffffff !important;
border: none;
font-weight: 600;
box-shadow: 0 6px 16px rgba(99,102,241,0.35);
transition:
transform .15s ease,
box-shadow .15s ease,
filter .15s ease;
}
/* Hover – sevdiğin o “canlanma” */
#compareList .btn.primary:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(255,106,0,0.5);
filter: brightness(1.05);
background: #e55f00;
color: #ffffff !important;
}
#compareList .btn.primary:active{
color: #ffffff !important;
transform: translateY(0);
box-shadow: 0 6px 14px rgba(255,106,0,0.35);
filter: brightness(0.98);
}
#compareList .btn.primary:focus-visible{
outline: none;
box-shadow:
0 0 0 3px rgba(255,106,0,0.4),
0 10px 24px rgba(255,106,0,0.4);
}
#mobileMenu{
width: 100%;
display: none;
}
#mobileMenu.is-open{
display: block;
}
.mobile-inner{
max-width: 1200px;
margin: 0 auto;
padding: 14px 16px 18px;
display: grid;
gap: 10px;
}
#mobileMenu{
position: relative;
display: none;
width: 100%;
}
#mobileMenu.is-open{
display: block;
}
/* Vergleich – seçili kart */
.compare-card.selected,
.compare-card.is-selected{
background: linear-gradient(
180deg,
rgba(30, 41, 59, 0.95),
rgba(15, 23, 42, 0.95)
);
box-shadow:
0 0 0 1px rgba(139,92,246,0.35),
0 10px 30px rgba(0,0,0,0.35);
}
.compare-card.selected{
transform: translateY(-2.5px);
}
/* ✅ Vergleich: Compare Bar (seçim sonrası çıkan çizili alan) */
#compareBar{
background: rgba(15, 23, 42, 0.55) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 16px !important;
padding: 12px 14px !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06),
0 10px 30px rgba(0,0,0,0.25) !important;
}
/* İçindeki yazılar/piller de kaybolmasın */
#compareBar,
#compareBar *{
color: rgba(255,255,255,0.92);
}
/* Ürün pill */
#compareBar .compare-pill{
background: rgba(255,255,255,0.08.0.06) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
border-radius: 999px !important;
padding: 8px 10px !important;
}
/* Sağ butonlar çok sönükse */
#compareBar .btn.ghost{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
}
/* ✅ MOBILE: CompareBar seçilen ürünleri alt alta */
@media (max-width: 640px){
#compareBar .compare-left{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
/* pill'ler alt alta gelsin */
#compareBar .compare-pill{
display: block !important;
width: max-content !important;
max-width: 100% !important;
}
}
@media (max-width: 640px){
#compareBar .compare-left strong{
margin-bottom: 2px !important;
}
}
/* Feste rechte Sidebar: 2 ausgewählte Produkte + Vergleichen / Zurücksetzen (scrollt mit) */
.compare-sidebar {
display: none;
position: fixed;
top: 80px;
right: 0;
width: 220px;
max-height: calc(100vh - 100px);
overflow-y: auto;
z-index: 1000;
padding: 14px 12px;
margin: 10px 10px 10px 0;
border-radius: 16px;
background: rgba(15, 23, 42, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.compare-sidebar.is-visible {
display: flex;
flex-direction: column;
gap: 10px;
}
.compare-sidebar-title {
font-weight: 700;
font-size: 13px;
color: rgba(255,255,255,0.95);
margin-bottom: 4px;
}
.compare-sidebar-name {
font-size: 13px;
color: rgba(226,232,240,0.9);
line-height: 1.35;
word-break: break-word;
}
.compare-sidebar .btn.block {
width: 100%;
margin-top: 4px;
}
.compare-sidebar #compareSidebarReset {
margin-top: 2px;
}
/* Nur Desktop: Sidebar anzeigen + Hauptinhalt Platz lassen */
@media (min-width: 901px) {
body.page-vergleich.has-compare-sidebar .container.page {
padding-right: 240px;
}
}
@media (max-width: 900px) {
.compare-sidebar { display: none !important; }
body.page-vergleich.has-compare-sidebar .container.page { padding-right: 0; }
}
/* Floating Compare CTA (mobile) */
#floatingCompareBtn{
position: fixed;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 9999;
display: none; /* JS açacak */
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(135deg, rgba(106,167,255,.92), rgba(124,92,255,.88));
color: #fff;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
font-weight: 800;
cursor: pointer;
}
#floatingCompareBtn small{
font-weight: 900;
opacity: .95;
background: rgba(0,0,0,.22);
padding: 4px 8px;
border-radius: 999px;
}
@media (min-width: 641px){
#floatingCompareBtn{ display:none !important; }
}
/* Layout bozulmasın: buton sadece overlay, body padding yok */
@media (max-width: 640px){
body.has-floating-compare,
html.has-floating-compare body{ padding-bottom: 0 !important; }
}
#floatingCompareBtn{
position: fixed;
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom));
z-index: 99999;
display: none; /* JS açacak */
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(135deg, rgba(106,167,255,.92), rgba(124,92,255,.88));
color: #fff;
box-shadow: 0 16px 40px rgba(0,0,0,.35);
font-weight: 800;
cursor: pointer;
}
#floatingCompareBtn small{
font-weight: 900;
opacity: .95;
background: rgba(0,0,0,.22);
padding: 4px 8px;
border-radius: 999px;
}
@media (min-width: 641px){
#floatingCompareBtn{ display:none !important; }
}
@media (max-width: 640px){
body.has-floating-compare{ padding-bottom: 0 !important; }
}
/* Floating Compare Button (nur Vergleich) */
#floatingCompareBtn{
position: fixed;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 9999;
height: 52px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.14);
background: linear-gradient(90deg, rgba(99,102,241,.95), rgba(139,92,246,.92));
color: #fff;
display: none; /* JS açacak */
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 700;
box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
#floatingCompareBtn small{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.18);
font-size: 12px;
}
/* Yapıyı bozmayalım: buton overlay, sayfa padding’i yok */
.has-floating-compare body{ padding-bottom: 0 !important; }
/* ✅ Compare Bar: sağ butonları aynı hizaya kilitle */
#compareBar .compare-right{
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* a ve button farkını sıfırla */
#compareBar .compare-right a.btn,
#compareBar .compare-right button.btn{
height: 40px !important;
line-height: 1 !important;
padding: 0 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
margin: 0 !important;
}
/* bazen ghost'ta border/padding farkı olur */
#compareBar .compare-right .btn.ghost{
box-sizing: border-box !important;
}
/* SAFETY: Floating compare sadece vergleich.html */
body:not(.page-vergleich) #floatingCompareBtn{
display: none !important;
}
/* 📱 Floating Compare Button (MOBILE ONLY) */
#floatingCompareBtn{
position: fixed;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 999;
display: none;
flex-direction: column;
gap: 4px;
padding: 10px 14px;
border-radius: 16px;
background: linear-gradient(135deg, #6d5cff, #7c6bff);
color: #fff;
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Ana CTA */
#floatingCompareBtn .fc-main{
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 600;
font-size: 14px;
}
/* Seçilen ürün isimleri */
#floatingCompareBtn .fc-names{
font-size: 11px;
opacity: .85;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 240px;
}
/* Sadece mobil */
@media (min-width: 641px){
#floatingCompareBtn{ display:none !important; }
}
/* Floating Compare Button - force viewport overlay */
#floatingCompareBtn{
all: unset; /* global button stillerini sıfırlar */
box-sizing: border-box;
position: fixed !important; /* kesin fixed */
left: 50%;
bottom: calc(14px + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 99999;
display: none; /* JS açacak */
align-items: center;
justify-content: center;
gap: 8px;
width: min(92vw, 420px);
padding: 10px 14px;
border-radius: 16px;
background: rgba(120, 90, 255, 0.92);
color: #fff;
font: 700 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
letter-spacing: .2px;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
cursor: pointer;
}
#floatingCompareBtn .fc-main{
display: flex;
align-items: center;
gap: 8px;
}
#floatingCompareBtn #fcCount{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: rgba(255,255,255,.18);
font-weight: 800;
}
#floatingCompareBtn .fc-names{
display: block;
margin-top: 2px;
font-size: 12px;
opacity: .9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#floatingCompareBtn{
gap: 10px;
padding: 10px 12px;
}
#floatingCompareBtn .fc-main{
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
#floatingCompareBtn #fcCount{
min-width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 12px;
}
#floatingCompareBtn .fc-names{
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
opacity: .9;
}
/* Mobil: ince, küçük, aşağıda – kartları sıkıştırmasın (sürtünme yok) */
@media (max-width: 640px) {
#floatingCompareBtn {
left: auto !important;
right: 10px !important;
bottom: calc(8px + env(safe-area-inset-bottom)) !important;
transform: none !important;
width: auto !important;
min-width: 0;
max-width: 140px;
flex-direction: column;
align-items: flex-end;
gap: 2px !important;
padding: 6px 10px !important;
border-radius: 12px;
font-size: 12px !important;
font-weight: 600 !important;
}
#floatingCompareBtn .fc-main {
gap: 4px;
font-size: 12px !important;
}
#floatingCompareBtn .fc-names {
max-width: 120px;
text-align: right;
font-size: 10px !important;
line-height: 1.2;
}
#floatingCompareBtn #fcCount {
min-width: 18px !important;
height: 18px !important;
font-size: 11px !important;
}
}
h2{
display: inline-block;
padding: 10px 16px;
margin-bottom: 14px;
color: #F4F6FF;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.3;
/* glass background */
background: rgba(14, 19, 36, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.08),
0 6px 20px rgba(0,0,0,0.35);
}
h2{
display: inline-block;
padding: 10px 16px;
margin-bottom: 14px;
color: #F4F6FF;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.3;
/* glass background */
background: rgba(14, 19, 36, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 14px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.08),
0 6px 20px rgba(0,0,0,0.35);
}
@media (max-width: 640px){
h2{
background: rgba(14, 19, 36, 0.7);
backdrop-filter: blur(12px);
}
}
.section h2{
margin-bottom: 12px;
}
h2.no-glass{
background: none;
backdrop-filter: none;
box-shadow: none;
}
/*ILERDE KI KACIS KAPISI
h2.no-glass{
background: none;
backdrop-filter: none;
box-shadow: none;
}
Datenschutz
yani h2 class ver cikart icinden
suan kullanma nsadece dursun
*/
.home-hero-left .manifest{
margin-top: 2px;
font-size: 0.82rem;
line-height: 1.38;
color: rgba(255,255,255,0.85);
max-width: 420px;
}
/* =========================
HEADER FIX (FINAL OVERRIDE)
Paste at VERY END of style.css
========================= */
:root{ --header-h: 64px; } /* istersen 60-72 arası */
.site-header{
position: sticky;
top: 0;
z-index: 5000;
background: linear-gradient(135deg, #12d6d2 0%, #08b6d8 45%, #0b63f6 100%) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.site-header .header-inner{
padding: 8px 0 !important;
min-height: var(--header-h) !important;
align-items: center !important;
}
/* İki satırlı header (logo+nav üstte, arama altta): daha kompakt, min-height yok */
.site-header .header-inner:has(.header-top-row){
padding: 10px 0 6px !important;
min-height: 0 !important;
}
/* Anasayfa: üst satır kompakt (mobilde max-height yok; 2. satır arama görünsün) */
body.home-page .header-top-row{
min-height: 0;
align-items: center;
}
@media (min-width: 881px){
body.home-page .header-top-row{ max-height: 58px; }
}
body.home-page #authArea{
gap: 8px;
}
body.home-page #authArea .auth-link{
height: 34px !important;
min-height: 34px;
padding: 0 12px !important;
font-size: 0.875rem;
border-radius: 10px;
line-height: 1.2;
}
/* Brand alanı taşmasın */
.site-header .brand{
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0;
}
/* ✅ Logo: tek kaynak */
.site-header .logo,
.site-header .brand img{
height: 42px !important;
width: auto !important; /* width:80px gibi şeyleri iptal */
max-height: 42px !important;
}
/* theyr yazısı */
.site-header .brand-text{
font-size: 22px !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap;
}
/* slogan: desktopta var, mobilde yok */
.site-header .brand-slogan{
font-size: 12px !important;
opacity: .75 !important;
white-space: nowrap !important;
}
/* Mobilde slogan kapalı + header daha kompakt */
@media (max-width: 768px){
:root{ --header-h: 56px; }
.site-header .brand-slogan{ display: none !important; }
.site-header .brand-text{ font-size: 18px !important; }
.site-header .logo,
.site-header .brand img{ height: 28px !important; max-height: 28px !important; }
}
/* =========================================================
HOME SEARCH — SINGLE SOURCE OF TRUTH (FINAL)
- only one block for #homeSearch + .is-stuck
========================================================= */
:root{ --header-h: 56px; }
#homeSearch.home-search{
display: grid;
gap: 6px;
}
/* normal görünüm (kart) – ca. 5 % kompakter */
#homeSearch{
padding: 9px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
overflow: visible;
}
/* form */
#homeSearch .home-search-form{
display: grid;
grid-template-columns: 1fr 180px auto;
gap: 6px;
align-items: center;
overflow: visible;
}
#homeSearch input,
#homeSearch select{
width: 100%;
padding: 7px 9px;
border-radius: 9px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(0,0,0,.22);
color:#fff;
font-size: 13px;
min-height: 34px;
}
#homeSearch input::placeholder{ color: rgba(255,255,255,.55); }
/* =========================
MOBILE
========================= */
@media (max-width: 768px){
/* sadece STUCK modunda sticky olsun */
#homeSearch{ position: relative; }
#homeSearch.is-stuck{
position: sticky !important;
top: calc(env(safe-area-inset-top) + var(--header-h) + 8px) !important;
z-index: 1200 !important;
padding: 10px 12px !important;
border-radius: 18px !important;
background: rgba(10,16,28,.78) !important; /* daha koyu */
border: 1px solid rgba(255,255,255,.14) !important;
box-shadow: 0 12px 30px rgba(0,0,0,.28) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* stuck olunca: başlık/açıklama/chips gizle */
#homeSearch.is-stuck .badge,
#homeSearch.is-stuck h2,
#homeSearch.is-stuck .muted,
#homeSearch.is-stuck .home-search-chips{
display: none !important;
}
/* stuck olunca: sadece input + ikon (admin-style kutu aynı kalsın) */
#homeSearch.is-stuck .home-search-form{
grid-template-columns: 1fr 48px !important;
gap: 10px !important;
margin: 0 !important;
}
#homeSearch.is-stuck #homeSearchInput{
height: 48px !important;
border-radius: 16px !important;
padding: 12px 14px !important;
}
#homeSearch.is-stuck #homeSearchBtn{
width: 48px !important;
height: 48px !important;
padding: 0 !important;
border-radius: 16px !important;
display: grid !important;
place-items: center !important;
font-size: 18px !important;
}
}
@media (max-width: 768px){
/* Sticky pozisyonu sabit kalsın (top zıplamasın) */
:root{ --header-h: 56px; }
#homeSearch{
position: sticky !important;
top: calc(env(safe-area-inset-top) + var(--header-h) + 8px) !important;
z-index: 1200 !important;
}
/* Stuck mod: sadece input + buton, daha koyu */
#homeSearch.is-stuck{
background: rgba(10, 16, 28, 0.78) !important; /* koyu */
border: 1px solid rgba(255,255,255,0.14) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
padding: 10px 12px !important;
border-radius: 18px !important;
}
/* üst içerikler kapanır */
#homeSearch.is-stuck .badge,
#homeSearch.is-stuck h2,
#homeSearch.is-stuck .muted,
#homeSearch.is-stuck .home-search-chips{
display: none !important;
}
/* form tek satır: input + ikon */
#homeSearch.is-stuck .home-search-form{
display: grid !important;
grid-template-columns: 1fr 48px !important;
gap: 10px !important;
margin: 0 !important;
align-items: center !important;
}
#homeSearch.is-stuck #homeSearchTarget{ display: none !important; }
#homeSearch.is-stuck #homeSearchInput{
height: 48px !important;
border-radius: 16px !important;
padding: 12px 14px !important;
}
#homeSearch.is-stuck #homeSearchBtn{
width: 48px !important;
height: 48px !important;
padding: 0 !important;
border-radius: 16px !important;
display: grid !important;
place-items: center !important;
}
}
#homeSearch .home-search-top {
transition: opacity .2s ease, max-height .2s ease;
}
#homeSearch.is-stuck .home-search-top {
opacity: 0;
max-height: 0;
overflow: hidden;
}
#homeSearch.is-stuck {
background: rgba(8, 12, 20, 0.82);
backdrop-filter: blur(14px);
}
/* =========================================================
MOBILE SEARCH COMPACT (ADDON)
- Only mobile
- headerSearch: shrinks on scroll via .is-compact (JS)
- homeSearch: existing .is-stuck, but button selector fixed
========================================================= */
@media (max-width: 768px){
/* HEADER SEARCH (top search under header) */
#headerSearch{
transition: padding .18s ease, transform .18s ease;
}
#headerSearch .header-search-form input,
#headerSearch .header-search-form button{
transition: height .18s ease, width .18s ease, padding .18s ease, border-radius .18s ease, font-size .18s ease;
}
#headerSearch.is-compact .header-search-form input{
height: 42px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
font-size: 14px !important;
}
#headerSearch.is-compact .header-search-form button{
width: 42px !important;
height: 42px !important;
padding: 0 !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
font-size: 16px !important;
}
/* HOME SEARCH (card on page) — do NOT rely on #homeSearchBtn */
#homeSearch.is-stuck .home-search-form button,
#homeSearch.is-stuck .home-search-form .search-icon-btn{
width: 48px !important;
height: 48px !important;
padding: 0 !important;
border-radius: 16px !important;
display: grid !important;
place-items: center !important;
font-size: 18px !important;
}
}
/* =========================================================
MOBILE HEADER MINIMAL (when scrolling UP)
- Show only search input + button
========================================================= */
@media (max-width: 768px){
body.header-minimal .site-header .header-inner{
display: none !important;
}
body.header-minimal .site-header .mobile-menu{
display: none !important;
}
/* keep headerSearch visible */
body.header-minimal #headerSearch{
padding-top: 0 !important;
}
}
/* =========================================================
HOME SEARCH — COMPACT MODE (MOBILE)
- When #homeSearch has .is-compact:
keep only the form (input + target + button)
hide top texts + chips
========================================================= */
@media (max-width: 768px){
#homeSearch{
transition: padding .2s ease, border-radius .2s ease;
}
#homeSearch.is-compact{
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* hide everything except the form */
#homeSearch.is-compact .home-search-top,
#homeSearch.is-compact .home-search-chips{
display: none !important;
}
/* make form row a bit tighter */
#homeSearch.is-compact .home-search-form{
margin-top: 0 !important;
}
#homeSearch.is-compact #homeSearchInput{
height: 44px !important;
font-size: 15px !important;
}
#homeSearch.is-compact #homeSearchTarget{
height: 44px !important;
}
#homeSearch.is-compact .search-icon-btn{
width: 44px !important;
height: 44px !important;
}
}
@media (max-width: 768px){
#homeSearch.is-compact h1,
#homeSearch.is-compact h2,
#homeSearch.is-compact p,
#homeSearch.is-compact .search-subtitle,
#homeSearch.is-compact .search-chips,
#homeSearch.is-compact .quick-tags{
display: none !important;
}
#homeSearch.is-compact{
padding-top: 10px;
padding-bottom: 10px;
}
#homeSearch.is-compact input,
#homeSearch.is-compact button{
height: 44px;
}
}
/* =========================================================
HOME SEARCH – COMPACT MODE (FIX for your HTML)
========================================================= */
@media (max-width: 768px){
/* animasyon */
#homeSearch{
transition: padding .18s ease, transform .18s ease;
}
/* Compact: sadece form kalsın */
#homeSearch.is-compact{
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Üst metinleri + badge gizle */
#homeSearch.is-compact .home-search-top{
display: none !important;
}
/* Chip’leri gizle */
#homeSearch.is-compact .home-search-chips{
display: none !important;
}
/* Form elemanlarını biraz küçült */
#homeSearch.is-compact .home-search-form{
margin-top: 0 !important;
}
#homeSearch.is-compact #homeSearchInput{
height: 44px !important;
font-size: 15px !important;
}
#homeSearch.is-compact #homeSearchTarget{
height: 44px !important;
font-size: 14px !important;
}
#homeSearch.is-compact .home-search-form button,
#homeSearch.is-compact .home-search-form .search-icon-btn{
height: 44px !important;
width: 44px !important;
padding: 0 !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
}
}
/* =========================================================
HOME SEARCH – COMPACT MODE (REAL STRUCTURE FIX)
========================================================= */
@media (max-width: 768px){
/* Compact padding */
#homeSearch.is-compact{
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* ÜSTTEKİ METİNLERİ TAMAMEN GİZLE */
#homeSearch.is-compact .home-search-top{
display: none !important;
}
/* CHIP’LERİ GİZLE */
#homeSearch.is-compact .home-search-chips{
display: none !important;
}
/* FORM’u üste çek */
#homeSearch.is-compact .home-search-form{
margin-top: 0 !important;
}
/* INPUT / SELECT / BUTTON KÜÇÜLSÜN */
#homeSearch.is-compact #homeSearchInput,
#homeSearch.is-compact #homeSearchTarget{
height: 44px !important;
font-size: 15px !important;
}
#homeSearch.is-compact .search-icon-btn{
height: 44px !important;
width: 44px !important;
padding: 0 !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
}
}
@media (max-width: 768px){
#homeSearch.is-compact #homeSearchInput,
#homeSearch.is-compact #homeSearchTarget{
height: 44px !important;
font-size: 15px !important;
}
#homeSearch.is-compact .search-icon-btn{
height: 44px !important;
width: 44px !important;
padding: 0 !important;
border-radius: 14px !important;
display: grid !important;
place-items: center !important;
}
}
@media (max-width: 768px){
.home-search-form{
transition: all .2s ease;
}
.home-search-form.is-compact{
padding: 6px;
gap: 6px;
}
.home-search-form.is-compact input,
.home-search-form.is-compact select{
height: 40px;
font-size: 14px;
}
.home-search-form.is-compact button{
height: 40px;
min-width: 40px;
padding: 0;
border-radius: 12px;
}
}
/* =========================================================
HOME SEARCH – MOBILE COMPACT
========================================================= */
@media (max-width: 768px){
/* animasyon */
#homeSearch{
transition: padding .2s ease, gap .2s ease;
}
/* compact alan */
#homeSearch.is-compact{
padding: 10px !important;
}
/* üst metinleri gizle */
#homeSearch.is-compact .home-search-top{
display: none !important;
}
/* chip’leri gizle */
#homeSearch.is-compact .home-search-chips{
display: none !important;
}
/* form sıkı dursun */
#homeSearch.is-compact .home-search-form{
margin: 0 !important;
}
/* input / select / buton küçülsün */
#homeSearch.is-compact input,
#homeSearch.is-compact select,
#homeSearch.is-compact button{
height: 42px !important;
font-size: 14px !important;
}
#homeSearch.is-compact button{
min-width: 42px !important;
padding: 0 !important;
}
}
@media (max-width: 768px){
.home-search-form{
transition: all .2s ease;
}
.home-search-form.is-compact{
padding: 6px;
gap: 6px;
}
.home-search-form.is-compact input,
.home-search-form.is-compact select{
height: 40px;
font-size: 14px;
}
.home-search-form.is-compact button{
height: 40px;
min-width: 40px;
padding: 0;
border-radius: 12px;
}
}
@media (max-width: 768px){
.home-search-form.is-compact{
padding: 4px !important;
gap: 4px !important;
}
.home-search-form.is-compact input,
.home-search-form.is-compact select{
height: 34px !important;
font-size: 13px !important;
}
.home-search-form.is-compact button{
height: 34px !important;
min-width: 34px !important;
padding: 0 !important;
border-radius: 10px !important;
}
}
/* Tipps source banner */
.tipps-source .tipps-source-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.tipps-source .tipps-source-left{
display:flex;
align-items:flex-start;
gap:12px;
}
.tipps-source .tipps-source-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
/* hedef ürünü highlight */
.compare-card.from-tipps-target{
outline: 2px solid rgba(255,255,255,.22);
box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
/* Tipps'ten gelen ürünü kısa süre vurgula */
.focus-from-tipps{
outline: 2px solid rgba(0,0,0,.18);
box-shadow: 0 10px 30px rgba(0,0,0,.12);
transition: box-shadow .2s ease, outline .2s ease;
}
.tipps-side-link{
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.22);
}
.tipps-side-link:hover{
border-bottom-color: rgba(255,255,255,.45);
}
.tipps-side-link{
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.22);
}
.tipps-side-link:hover{
border-bottom-color: rgba(255,255,255,.45);
}
/* =========================================================
HOME SEARCH — ULTRA MINIMAL STUCK (MOBILE)
- only input + icon button
========================================================= */
@media (max-width: 768px){
/* stuck modda kart daha slim */
#homeSearch.is-stuck{
padding: 8px 10px !important;
border-radius: 14px !important;
box-shadow: none !important;
}
/* stuck modda: sadece input + ikon */
#homeSearch.is-stuck .home-search-form{
grid-template-columns: 1fr 38px !important;
gap: 8px !important;
}
/* select tamamen gizli (zaten vardı ama garanti) */
#homeSearch.is-stuck #homeSearchTarget{
display:none !important;
}
/* input ince */
#homeSearch.is-stuck #homeSearchInput{
height: 38px !important;
border-radius: 999px !important;
padding: 0 12px !important;
font-size: 13.5px !important;
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.08) !important;
}
/* buton ince + minimalist */
#homeSearch.is-stuck .search-icon-btn{
width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 999px !important;
font-size: 16px !important;
box-shadow: none !important;
}
}
/* =========================================================
HOME SEARCH – GLASS / ULTRA MINIMAL FINE TUNE
(sadece mini sticky mod)
========================================================= */
@media (max-width: 768px){
/* Kart artık input’a çok yakın yükseklikte */
#homeSearch.is-stuck{
padding: 6px 8px !important; /* kart neredeyse input kadar */
border-radius: 16px !important;
background: rgba(255,255,255,0.08) !important; /* cam hissi */
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
border: 1px solid rgba(255,255,255,0.10);
}
/* Input: karttan sadece tık daha küçük */
#homeSearch.is-stuck #homeSearchInput{
height: 36px !important;
font-size: 13.5px !important;
background: rgba(0,0,0,0.25) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
}
/* Buton input ile neredeyse birebir */
#homeSearch.is-stuck .search-icon-btn{
width: 36px !important;
height: 36px !important;
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
}
/* Hover / active çok hafif – bağırmasın */
#homeSearch.is-stuck .search-icon-btn:active{
background: rgba(255,255,255,0.18) !important;
}
}
/* Premium search icon */
.search-svg{
width: 18px;
height: 18px;
stroke: rgba(255,255,255,0.85);
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .15s ease, transform .15s ease;
}
#homeSearch.is-stuck .search-icon-btn:hover .search-svg{
stroke: rgba(255,255,255,1);
}
#homeSearch.is-stuck .search-icon-btn:active .search-svg{
transform: scale(0.95);
}
.search-svg{
stroke-width: 1.5;
opacity: .9;
}
#homeSearch.is-stuck #homeSearchInput:focus + .search-icon-btn .search-svg{
stroke: white;
}
/* === Search icon butonunu gerçekten ortala === */
#homeSearch .search-icon-btn{
padding: 0 !important;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* SVG gerçek merkez */
#homeSearch .search-icon-btn svg{
display: block;
width: 18px;
height: 18px;
margin: 0;
transform: translateX(0); /* artık hack yok */
}
/* MINI modda: sadece input + ikon kalsın (target/vergleich gizli) */
@media (max-width: 768px){
#homeSearch.is-stuck .home-search-form{
grid-template-columns: 1fr 36px !important;
gap: 8px !important;
}
/* ID farklı olsa bile: form içindeki select / target her neyse gizle */
#homeSearch.is-stuck .home-search-form select,
#homeSearch.is-stuck .home-search-form .search-target,
#homeSearch.is-stuck .home-search-form .home-search-target,
#homeSearch.is-stuck #homeSearchTarget{
display: none !important;
}
}
/* =========================================================
FORCE: Mini sticky modda SADECE input + ikon kalsın
(Vergleich select kesin gizlensin)
========================================================= */
@media (max-width: 768px){
/* is-stuck mini: form kolonları */
section#homeSearch.home-search.card.is-stuck form#homeSearchForm{
grid-template-columns: 1fr 36px !important;
gap: 8px !important;
align-items: center !important;
}
/* Vergleich dropdown'u %100 kapat */
section#homeSearch.home-search.card.is-stuck form#homeSearchForm select#homeSearchTarget{
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
/* Mini modda chip'ler de kesin gizlensin (senin class adın: home-search-chips) */
section#homeSearch.home-search.card.is-stuck .home-search-chips{
display: none !important;
}
/* Buton ve input ince kalsın */
section#homeSearch.home-search.card.is-stuck #homeSearchInput{
height: 36px !important;
}
section#homeSearch.home-search.card.is-stuck .search-icon-btn{
width: 36px !important;
height: 36px !important;
padding: 0 !important;
}
}
/* =========================================
HOME SEARCH – overflow fix (auto fit)
========================================= */
/* Bu kartın içinde hiçbir şey dışarı taşmasın */
#homeSearch{
overflow: hidden; /* cam layer / pseudo da taşmasın */
}
/* Kart içindeki tüm elemanlar taşmaya karşı güvenli */
#homeSearch *,
#homeSearch *::before,
#homeSearch *::after{
box-sizing: border-box;
}
/* Form düzeni: çocuklar daralabilsin (çok kritik) */
#homeSearch .home-search-form{
display: grid;
grid-template-columns: 1fr auto auto; /* input / select / button */
gap: 10px;
align-items: center;
min-width: 0;
}
/* Input ve select taşmasın */
#homeSearch #homeSearchInput,
#homeSearch #homeSearchTarget{
min-width: 0; /* 🔥 grid/flex taşma fix */
max-width: 100%;
width: 100%;
}
/* Select bazı browserlarda taşır: bunu stabilize eder */
#homeSearch #homeSearchTarget{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Mobilde: taşma ihtimali en yüksek yer -> net 2 kolon yap */
@media (max-width: 768px){
#homeSearch .home-search-form{
grid-template-columns: 1fr 46px; /* input + icon */
}
#homeSearch #homeSearchTarget{
display: none; /* zaten mini modda gizliyorduk; burada da garanti */
}
}
/* Chipler de taşmasın: satır kır + scroll istemiyorsan wrap */
#homeSearch .home-search-chips{
display: flex;
flex-wrap: wrap;
gap: 10px;
min-width: 0;
}
#homeSearch .home-search-chips .chip{
max-width: 100%;
}/* Kategori kartı – Top bilgi satırı (cam/blur) */
.cat-topline{
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
background: rgba(20, 24, 40, 0.55);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,.85);
font-size: 0.9rem;
line-height: 1.2;
}
/* Top ürün adı biraz daha net olsun */
.cat-top-name{
color: rgba(255,255,255,.95);
font-weight: 500;
}
@media (max-width: 480px){
.cat-topline{
font-size: 0.85rem;
padding: 7px 12px;
}
}
.form-msg{
margin: 14px 0 18px;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.35;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
}
.form-msg.success{
border-color: rgba(80, 200, 120, .35);
background: rgba(80, 200, 120, .12);
}
.form-msg.error{
border-color: rgba(255, 90, 90, .35);
background: rgba(255, 90, 90, .10);
}
@media (max-width: 520px){
.form-msg{ font-size: 13px; padding: 11px 12px; border-radius: 12px; }
}
.tipps-context{
width: min(1060px, calc(100% - 32px));
margin: 14px auto 10px;
padding: 14px;
border-radius: 16px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.tipps-context .tc-title{ font-weight: 800; margin-bottom: 4px; }
.tipps-context .tc-sub{ opacity: .92; }
.tipps-context .tc-trust{ margin-top: 6px; font-size: 13px; opacity: .85; }
@media (max-width: 640px){
.tipps-context{ flex-direction: column; align-items: stretch; }
.tipps-context .tc-right .btn{ width: 100%; justify-content: center; }
}
.suggested-badge{
display: inline-flex;
align-items: center;
font-size: 12px;
padding: 6px 10px;
border-radius: 999px;
margin: 10px 10px 0;
border: 1px solid rgba(120,140,255,.35);
background: rgba(120,140,255,.14);
color: rgba(210,220,255,.95);
}
.is-suggested{ outline: 1px solid rgba(120,140,255,.22); }
.compare-card.from-tipps-flash{
outline: 2px solid rgba(255,255,255,.75);
box-shadow: 0 0 0 6px rgba(255,255,255,.12);
scroll-margin-top: 90px; /* header varsa iyi */
}
.auth-area{
display:flex;
gap:10px;
align-items:center;
}
.auth-area .btn{
padding:8px 14px;
border-radius:10px;
font-size:14px;
}
.auth-buttons{
display: flex;
gap: 12px;
}
.auth-buttons .btn{
flex: 1; /* eşit genişlik */
text-align: center;
padding: 10px 0;
border-radius: 10px;
font-weight: 500;
transition: all 0.2s ease;
}
#authArea{
display: flex;
gap: 12px;
}
#authArea .btn{
flex: 1;
text-align: center;
}
.btn.ghost{
border: 1px solid rgba(255,255,255,0.2);
background: transparent;
}
.btn.ghost:hover{
background: rgba(255,255,255,0.08);
}
/* Header sağdaki auth alanı: eşit butonlar için alan tanımla */
.auth-area{
display: flex;
align-items: center;
gap: 12px;
/* kritik: container shrink olmasın */
min-width: 280px; /* 260-320 arası deneyebilirsin */
}
/* inner authArea da flex kalsın */
#authArea{
display: flex;
gap: 12px;
/* kritik: burada da sabitleyebilirsin */
width: 280px; /* min-width yerine width daha net */
}
/* iki buton eşit */
#authArea > .btn{
flex: 1 1 0; /* eşitleyen asıl satır */
text-align: center;
white-space: nowrap;
}
/* a ve button aynı hizaya gelsin */
#authArea > a.btn,
#authArea > button.btn{
display: inline-flex;
justify-content: center;
align-items: center;
}
#authArea{
display:flex;
gap:12px;
width:280px; /* alan veriyoruz */
align-items:center;
}
#authArea > .btn{
flex:1 1 0;
text-align:center;
white-space:nowrap;
display:inline-flex;
justify-content:center;
align-items:center;
}
/* AUTH BUTTON WRAPPER */
.auth-buttons{
display: flex;
gap: 12px;
}
/* EŞİT BOYUT */
.auth-buttons .btn{
min-width: 110px; /* eşit genişlik hissi */
height: 42px; /* sabit yükseklik */
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-weight: 500;
transition: all .2s ease;
}
/* Ghost stilini biraz iyileştirelim */
.auth-buttons .btn.ghost{
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.04);
}
.auth-buttons .btn.ghost:hover{
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.4);
}
.auth-buttons{
display: flex;
gap: 12px;
}
/* A ve Button farkını sıfırlıyoruz */
.auth-buttons a,
.auth-buttons button{
appearance: none;
-webkit-appearance: none;
border: none;
background: none;
font: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
}
/* Gerçek eşit stil */
.auth-buttons .btn{
min-width: 110px;
height: 42px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.04);
transition: all .2s ease;
box-sizing: border-box;
}
/* Hover */
.auth-buttons .btn:hover{
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.4);
}
.mobile-auth{
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.10);
display: grid;
gap: 10px;
}
.mobile-auth .btn{
width: 100%;
height: 44px;
justify-content: center;
border-radius: 14px;
}
/* Mobile menu open/close */
.mobile-menu{ display:none; }
.mobile-menu.is-open{ display:block; }
@media (max-width: 880px){
/* header menüyü kesmesin */
.site-header{ overflow: visible !important; }
.site-header .container{ position: relative !important; }
/* menü: display ile değil class ile kontrol */
#mobileMenu{
display: block !important; /* display:none'i öldür */
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
z-index: 3000 !important;
background: rgba(8, 12, 20, .90) !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
transform: translateY(-10px) !important;
pointer-events: none !important;
transition: max-height .32s ease, opacity .22s ease, transform .22s ease !important;
}
#mobileMenu.is-open{
max-height: 520px !important;
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* içerik */
#mobileMenu .mobile-inner{
padding: 14px 16px 18px !important;
display: grid !important;
gap: 10px !important;
}
/* 🔥 KRİTİK: linkleri zorla görünür yap */
#mobileMenu .mobile-link{
display: block !important;
opacity: 1 !important; /* senin eski opacity:0 kuralını ezer */
transform: none !important;
padding: 12px 14px !important;
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.06) !important;
border-radius: 14px !important;
color: rgba(255,255,255,.92) !important;
}
}
/* ===== Header: Mobile icon layout ===== */
.header-actions{
display:flex;
align-items:center;
gap:10px;
}
/* icon button */
.icon-btn{
width:40px;
height:40px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
color:#fff;
}
.icon-btn .icon{ font-size:18px; line-height:1; }
/* hamburger görünür/kayıp kontrol */
.menu-btn{ display:flex; }
/* DESKTOP */
@media (min-width: 881px){
.desktop-nav{ display:flex; }
/* desktop'ta icon+hamburger istemiyoruz */
.header-actions{ display:none; }
/* desktop'ta auth butonları görünür */
#authArea{ display:block; }
/* hamburger tamamen kapalı */
.menu-btn{ display:none; }
}
/* MOBILE */
@media (max-width: 880px){
/* mobilde nav gizli */
.desktop-nav{ display:none; }
/* mobilde auth butonları gizli (sebep bu!) */
#authArea{ display:none !important; }
/* hamburger her zaman görünür: üç çizgi + açıkken X */
.site-header .menu-btn{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
}
.site-header .menu-btn span{
display: block !important;
width: 20px !important;
height: 2px !important;
background: #fff !important;
border-radius: 2px !important;
}
.site-header .menu-btn.is-open span{
display: none !important;
}
.site-header .menu-btn.is-open::before{
content: "\00d7" !important;
display: block !important;
font-size: 28px !important;
line-height: 1 !important;
color: #fff !important;
}
/* mobilde kompakt */
.icon-btn{ width:38px; height:38px; }
.brand-slogan{ display:none; } /* opsiyonel ama tavsiye */
}
.profile-glass{
position:relative;
width:44px;
height:44px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
transition: all .25s ease;
}
.profile-icon{
width:20px;
height:20px;
stroke:#ffffff;
stroke-width:1.6;
fill:none;
transition: all .25s ease;
}
/* Hover state */
.profile-glass:hover{
background: rgba(255,255,255,0.14);
transform: translateY(-1px);
}
/* Aktif / Login olmuş state */
.profile-glass.active{
background: linear-gradient(
135deg,
rgba(0,255,140,0.25),
rgba(0,180,90,0.35)
);
border: 1px solid rgba(0,255,140,0.5);
box-shadow: 0 0 18px rgba(0,255,140,0.35);
}
.profile-glass.active .profile-icon{
stroke:#00ff99;
}
.profile-glass.active{
background: linear-gradient(
135deg,
rgba(0,255,140,0.25),
rgba(0,180,90,0.35)
);
border: 1px solid rgba(0,255,140,0.5);
box-shadow: 0 0 18px rgba(0,255,140,0.35);
}
.profile-glass.active .profile-icon{
stroke:#00ff99;
}
.profile-glass.active{
background: rgba(0, 200, 120, 0.15);
border: 1px solid rgba(0, 220, 130, 0.35);
box-shadow: 0 0 10px rgba(0, 220, 130, 0.18);
}
.profile-glass.active .profile-icon{
stroke: #00d084;
}
/* =========================
MOBILE MENU BACKDROP (blur + overlay)
- Menü açılınca arkayı karartır + blur verir
========================= */
body.has-mobile-menu{
overflow: hidden; /* menü açıkken arkayı scroll ettirme */
}
/* backdrop layer */
body.has-mobile-menu::before{
content:"";
position: fixed;
inset: 0;
background: rgba(8,10,18,.55); /* koyu overlay */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 999; /* menüden düşük olmalı */
}
/* mobileMenu önde kalsın */
#mobileMenu{
position: fixed; /* zaten fixed değilse */
top: var(--header-h, 64px);/* header altından başlasın */
left: 0;
right: 0;
z-index: 1000; /* backdrop'un üstünde */
border-top: 1px solid rgba(255,255,255,.08);
box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
/* küçük animasyon */
#mobileMenu{
transform: translateY(-6px);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
#mobileMenu.is-open{
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* =========================
DESKTOP AUTH (Anmelden / Registrieren) — glass blur
========================= */
#authArea{
display: flex;
align-items: center;
gap: 12px;
}
/* Linkleri buton gibi yap */
#authArea a{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
/* cam efekti */
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0,0,0,.18);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
#authArea a:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.16);
}
/* Profil (giriş sonrası) daha “primary” görünsün */
#authArea a.is-profile{
background: rgba(120,140,255,.20);
border-color: rgba(120,140,255,.35);
}
/* Abmelden daha “danger” hafif */
#authArea a.is-logout{
background: rgba(255,120,120,.14);
border-color: rgba(255,120,120,.28);
}
/* Desktop header sağda daha düzenli dursun */
@media (min-width: 881px){
.site-header .header-inner{
gap: 18px;
}
}
.header-inner{
display:flex;
align-items:center;
}
#authArea{
margin-left:auto;
display:flex;
gap:14px;
align-items:center;
}
#authArea a{
padding: 8px 16px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all .2s ease;
}
#authArea a:hover{
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.25);
}
/* Desktop auth sağ alan */
#authArea{
margin-left:auto;
display:flex;
align-items:center;
gap:12px;
}
#authArea .auth-link{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 8px 14px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#authArea .auth-link:hover{
background: rgba(255,255,255,.11);
border-color: rgba(255,255,255,.22);
transform: translateY(-1px);
}
#authArea .auth-link--primary{
background: rgba(99,102,241,.22);
border-color: rgba(99,102,241,.35);
}
#authArea .auth-link--primary:hover{
background: rgba(99,102,241,.30);
border-color: rgba(99,102,241,.45);
}
#authArea{
margin-left:auto;
display:flex;
align-items:center;
gap:14px;
}
/* tüm auth butonları */
#authArea .auth-link{
min-width: 130px; /* ✅ eşit genişlik */
justify-content: center; /* ortalı text */
text-align: center;
padding: 10px 18px; /* biraz daha geniş */
border-radius: 9999px; /* ✅ daha yuvarlak pill */
font-weight: 600;
text-decoration: none;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
#authArea .auth-link:hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.24);
transform: translateY(-1px);
}
/* Registrieren daha primary */
#authArea .auth-link--primary{
background: rgba(99,102,241,.22);
border-color: rgba(99,102,241,.35);
}
#authArea .auth-link--primary:hover{
background: rgba(99,102,241,.32);
border-color: rgba(99,102,241,.45);
}
/* =========================
MOBILE MENU — AUTH (FINAL)
- eşit genişlik
- geniş radius
- blur + ayrışma
========================= */
#mobileMenu{
/* menü arka planı zaten varsa dokunmaz, yoksa güçlendirir */
background: rgba(18, 22, 34, .72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
}
/* auth linkleri (hamburger içinde) */
#mobileMenu a#mobileLogin,
#mobileMenu a#mobileRegister,
#mobileMenu a#mobileProfile,
#mobileMenu a#mobileLogout{
display: flex;
align-items: center;
justify-content: center;
width: 100%; /* ✅ hepsi aynı genişlik */
min-height: 44px; /* iOS tap size */
padding: 12px 16px;
border-radius: 9999px; /* ✅ geniş radius */
font-weight: 700;
text-decoration: none;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
/* aralarındaki boşluk (menüde stack görünüm) */
#mobileMenu a#mobileLogin,
#mobileMenu a#mobileRegister,
#mobileMenu a#mobileProfile{
margin-bottom: 10px;
}
#mobileMenu a#mobileLogin:hover,
#mobileMenu a#mobileRegister:hover,
#mobileMenu a#mobileProfile:hover,
#mobileMenu a#mobileLogout:hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.24);
transform: translateY(-1px);
}
/* primary: Registrieren */
#mobileMenu a#mobileRegister{
background: rgba(99,102,241,.22);
border-color: rgba(99,102,241,.35);
}
#mobileMenu a#mobileRegister:hover{
background: rgba(99,102,241,.32);
border-color: rgba(99,102,241,.45);
}
/* logout biraz “danger” hissi (çok kırmızı değil) */
#mobileMenu a#mobileLogout{
background: rgba(239,68,68,.10);
border-color: rgba(239,68,68,.20);
}
#mobileMenu a#mobileLogout:hover{
background: rgba(239,68,68,.16);
border-color: rgba(239,68,68,.28);
}
/* mobil menüde auth bloklarını üstten ayırmak istersen */
#mobileMenu .menu-auth-sep{
height: 1px;
background: rgba(255,255,255,.10);
margin: 14px 0;
border-radius: 9999px;
}
/* AUTH VISIBILITY LOCK (desktop + mobile) */
html.is-logged-in #mobileLogin,
html.is-logged-in #mobileRegister,
html.is-logged-in #desktopLogin,
html.is-logged-in #desktopRegister{
display: none !important;
}
html.is-guest #mobileProfile,
html.is-guest #mobileLogout,
html.is-guest #desktopProfile,
html.is-guest #desktopLogout{
display: none !important;
}
/* PROFILE ICON – premium green when logged in */
html.is-logged-in #profileBtn {
color: #2ecc71; /* premium green */
background: rgba(46,204,113,0.12);
border-radius: 999px;
padding: 6px 10px;
backdrop-filter: blur(6px);
transition: all .2s ease;
}
html.is-logged-in #profileBtn:hover {
background: rgba(46,204,113,0.22);
}
#mobileMenu a#mobileLogin,
#mobileMenu a#mobileRegister,
#mobileMenu a#mobileProfile,
#mobileMenu a#mobileLogout{
border-radius: 14px;
}
#mobileMenu a#mobileLogin,
#mobileMenu a#mobileRegister,
#mobileMenu a#mobileProfile,
#mobileMenu a#mobileLogout{
border-radius: 14px; /* mobil biraz daha yumuşak */
padding: 12px 18px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
font-weight: 600;
letter-spacing: .3px;
}
html.is-logged-in #profileBtn{
color: #34C759;
text-shadow: 0 0 12px rgba(52,199,89,0.35);
}
#profileBtn{
width: 38px;
height: 38px;
border-radius: 12px; /* 🍏 Daire değil */
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: all .2s ease;
}
#profileBtn::after{
content:"";
position:absolute;
inset:0;
border-radius:12px;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
opacity:.15;
pointer-events:none;
}
/* Apple gibi: daha karemsi ama yumuşak */
#profileBtn{
border-radius: 14px; /* önce 999px gibi yuvarlaktı, şimdi Apple hissi */
}
/* login olunca premium yeşil */
#profileBtn.active{
background: rgba(34, 197, 94, 0.22);
border: 1px solid rgba(34, 197, 94, 0.45);
box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
/* hafif blur ayırıcı hissi */
#profileBtn.active::after{
content:"";
position:absolute;
inset:-1px;
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events:none;
}
#profileBtn{ position: relative; }
/* Desktop auth linkleri */
#desktopProfile,
#desktopLogout{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 14px; /* Apple’a yakın */
text-decoration: none;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#desktopProfile:hover,
#desktopLogout:hover{
transform: translateY(-1px);
}
/* PROFIL = mavi glow */
#desktopProfile{
border-color: rgba(99,102,241,.30);
background: rgba(99,102,241,.10);
box-shadow:
0 10px 26px rgba(0,0,0,.22),
0 0 0 1px rgba(99,102,241,.18) inset,
0 0 22px rgba(99,102,241,.28);
}
/* ABMELDEN = kırmızı */
#desktopLogout{
border-color: rgba(239,68,68,.35);
background: rgba(239,68,68,.10);
box-shadow:
0 10px 26px rgba(0,0,0,.22),
0 0 0 1px rgba(239,68,68,.18) inset,
0 0 18px rgba(239,68,68,.22);
}
/* Focus (klavye ile) */
#desktopProfile:focus-visible,
#desktopLogout:focus-visible{
outline: none;
box-shadow:
0 0 0 3px rgba(255,255,255,.12),
0 0 0 6px rgba(99,102,241,.22);
}
#desktopLogout:focus-visible{
box-shadow:
0 0 0 3px rgba(255,255,255,.12),
0 0 0 6px rgba(239,68,68,.22);
}
/* authArea sadece desktop’ta görünsün */
#authArea{ display:none; gap:12px; align-items:center; }
@media (min-width: 881px){
#authArea{ display:flex; }
}
/* ===== Header layout: nav ortada, auth sağda ===== */
.site-header .header-inner{
display:flex;
align-items:center;
gap:16px;
}
/* İki satırlı header: üstte brand+nav, altta arama (column) */
.site-header .header-inner:has(.header-top-row){
flex-direction:column !important;
align-items:stretch !important;
gap:0 !important;
}
/* Brand sol üst, hafif sağa kaydırılmış */
.site-header .brand{ flex:0 0 auto; margin-right:0; margin-left:40px; }
/* Nav + Auth sağda (logo solda kalsın) */
.site-header .nav{
flex:0 0 auto;
display:flex;
margin-left:auto;
margin-right:16px;
}
/* Auth hep sağda – en sağa yapışsın, sağdan içeri boşluk */
#authArea,
.header-top-row #authArea{
margin-left:0 !important;
margin-right:24px !important;
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}
/* ===== Auth pills (Apple-like) ===== */
#authArea .auth-link{
display:inline-flex;
align-items:center;
justify-content:center;
height:40px;
padding:0 16px;
border-radius:14px; /* Apple’a yakın, çok yuvarlak değil */
font-weight:600;
letter-spacing:.1px;
text-decoration:none;
background: rgba(20,24,32,.35);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(0,0,0,.22);
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#authArea .auth-link:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,.18);
box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
/* ===== Glow renkleri (kriter bozmadan class ile) ===== */
#authArea .auth-link--accent{
border-color: rgba(120,120,255,.30);
box-shadow: 0 0 0 1px rgba(120,120,255,.10), 0 14px 34px rgba(0,0,0,.28), 0 0 22px rgba(120,120,255,.22);
}
#authArea .auth-link--danger{
border-color: rgba(255,80,90,.35);
box-shadow: 0 0 0 1px rgba(255,80,90,.12), 0 14px 34px rgba(0,0,0,.28), 0 0 22px rgba(255,80,90,.22);
}
/* ===== MOBILE HEADER: force hide desktop nav + auth ===== */
@media (max-width: 880px){
/* desktop menü + auth alanı KAPANSIN */
header.site-header nav.desktop-nav,
header.site-header .desktop-nav,
header.site-header #authArea,
header.site-header .auth-area{
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* mobil aksiyonlar (profil + hamburger) AÇIK KALSIN */
header.site-header .header-actions{
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
}
/* =========================
APPLE SUBTLE AUTH STYLES
========================= */
#authArea .auth-link{
border-radius: 12px;
padding: 8px 14px;
font-weight: 600;
letter-spacing: 0.2px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 6px 18px rgba(0,0,0,0.18);
transition: border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
transform .12s ease;
}
#authArea .auth-link:hover{
transform: translateY(-1px);
}
/* === PROFIL (subtle blue) === */
#authArea .auth-link--accent{
border-color: rgba(99,102,241,0.35);
background: rgba(99,102,241,0.08);
box-shadow:
0 6px 18px rgba(0,0,0,0.18),
0 0 0 1px rgba(99,102,241,0.10) inset;
}
/* === ABMELDEN (subtle red) === */
#authArea .auth-link--danger{
border-color: rgba(239,68,68,0.35);
background: rgba(239,68,68,0.08);
box-shadow:
0 6px 18px rgba(0,0,0,0.18),
0 0 0 1px rgba(239,68,68,0.10) inset;
}
/* ===== DESKTOP FORCE SHOW AUTH ===== */
@media (min-width: 881px){
header.site-header #authArea{
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
header.site-header nav.desktop-nav{
display: flex !important;
}
}
.product-card .image-wrap {
display:flex;
align-items:center;
justify-content:center;
min-height:260px;
background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);
}
.product-card img {
max-height:240px;
object-fit:contain;
}
.product-card:hover img {
transform: scale(1.04);
transition: 0.3s ease;
}
.finder-entry .btn.primary{
box-shadow:0 0 0 0 rgba(124,92,255,.6);
animation:pulse 2s infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(124,92,255,.6);}
70%{box-shadow:0 0 0 14px rgba(124,92,255,0);}
100%{box-shadow:0 0 0 0 rgba(124,92,255,0);}
}
/* ===== Finder ana sayfa kartı spacing ===== */
.finder-entry{
padding: 10px 12px 18px 12px;
}
.finder-entry .card-head{ margin-bottom: 2px; }
.finder-entry h3{
margin-top: 2px;
margin-bottom: 4px;
line-height: 1.22;
font-size: 1rem;
}
.finder-entry p{
margin-bottom: 8px;
font-size: 0.86rem;
}
.finder-entry .finder-tease{
display: flex;
gap: 6px;
margin: 8px 0 10px 0;
}
.finder-entry .mini{
flex: 1;
padding: 5px 7px;
border-radius: 9px;
background: rgba(255,255,255,.04);
font-size: 0.76rem;
}
.finder-entry .mini .k{
display: block;
font-size: 0.66rem;
opacity: .6;
margin-bottom: 1px;
}
.finder-entry .mini .v{
font-weight: 600;
}
.finder-entry .btn{
padding: 6px 12px;
font-size: 0.86rem;
margin-top: 2px;
}
.finder-entry .muted{
margin-top: 2px;
font-size: 0.76rem;
line-height: 1.35;
}
#compareFilters{
transition: opacity .25s ease, transform .25s ease;
}
#compareFilters.is-hidden{
opacity:0;
transform:translateY(-10px);
pointer-events:none;
}
/* Toggle butonu asla kaybolmasın */
#filtersToggle{ display:inline-flex !important; }
/* Panel default kapalı */
/* Açılınca görünür */
#compareFilters.is-open{ display:block; }
/* Panel her zaman DOM'da var, ama kapalıyken görünmez */
#compareFilters{
display:block !important; /* display none'u öldür */
overflow:hidden !important;
max-height:0 !important;
opacity:0 !important;
transform:translateY(-4px) !important;
pointer-events:none !important;
transition:max-height .28s ease, opacity .18s ease, transform .18s ease !important;
}
#compareFilters.is-open{
max-height:1200px !important;
opacity:1 !important;
transform:translateY(0) !important;
pointer-events:auto !important;
}
/* =========================
PREMIUM FILTER TOGGLE (Kapalı görünüm)
========================= */
#filtersToggle.filters-toggle{
width: 100%;
justify-content: space-between;
gap: 10px;
padding: 14px 16px;
border-radius: 16px;
/* premium glass */
background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.14);
box-shadow:
0 10px 28px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.10);
color: rgba(255,255,255,.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* yazı hissi */
font-weight: 650;
letter-spacing: .2px;
transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* solda küçük "ayar" hissi + sağda ok */
#filtersToggle.filters-toggle::before{
content: "⚙︎";
opacity: .75;
margin-right: 10px;
}
#filtersToggle.filters-toggle::after{
content: "▾";
opacity: .85;
transform: translateY(-1px);
}
/* hover/active */
#filtersToggle.filters-toggle:hover{
transform: translateY(-1px);
border-color: rgba(122,92,255,.35);
box-shadow:
0 14px 34px rgba(0,0,0,.36),
0 0 0 3px rgba(122,92,255,.14),
inset 0 1px 0 rgba(255,255,255,.12);
}
/* Açıkken: buton biraz daha “aktif” görünsün */
#filtersToggle.filters-toggle[aria-expanded="true"]{
background: linear-gradient(135deg, rgba(122,92,255,.22), rgba(106,167,255,.10));
border-color: rgba(122,92,255,.42);
}
#filtersToggle.filters-toggle[aria-expanded="true"]::after{
content: "▴";
}
/* Mobilde de aynı premium */
@media (max-width: 899px){
#filtersToggle.filters-toggle{
padding: 13px 14px;
border-radius: 16px;
}
}
/* Vergleich: üstteki sis/gradient efekti KALDIRILDI */
.page-vergleich:not(.filters-open) .page{
position: relative;
}
.page-vergleich:not(.filters-open) .page::before{
content: none;
display: none;
}
/* içerik üstte kalsın */
.page-vergleich .page > *{
position:relative;
z-index:1;
}
/* Toggle bar: default daha sakin */
#filtersToggle.filters-toggle{
box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
border-color: rgba(255,255,255,.14);
}
/* Hover veya open olunca glow gelsin */
#filtersToggle.filters-toggle:hover,
#filtersToggle.filters-toggle[aria-expanded="true"]{
border-color: rgba(122,92,255,.42);
box-shadow:
0 14px 34px rgba(0,0,0,.34),
0 0 0 3px rgba(122,92,255,.14),
inset 0 1px 0 rgba(255,255,255,.12);
}
#filtersToggle.filters-toggle{
justify-content: center; /* yazı ortada kalsın */
position: relative;
}
/* sol ikon sabit */
#filtersToggle.filters-toggle::before{
position: absolute;
left: 16px;
content: "⚙︎";
opacity: .75;
}
/* sağ ok sabit */
#filtersToggle.filters-toggle::after{
position: absolute;
right: 16px;
content: "▾";
opacity: .85;
}
#filtersToggle.filters-toggle[aria-expanded="true"]::after{
content:"▴";
}
/* =========================
CAT BANNER okunurluk fix (Vergleich)
========================= */
#catBanner{
/* cam ama daha koyu */
background: linear-gradient(135deg, rgba(10,14,26,.55), rgba(10,14,26,.32));
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
border-radius: 16px;
padding: 12px 14px;
}
/* cat banner içindeki yazıları zorla görünür yap */
#catBanner,
#catBanner *{
opacity: 1 !important; /* varsa eski opacity öldür */
}
/* Label (badge) daha net */
#catBannerLabel{
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
}
/* "5 Produkte" vs */
#catBannerCount{
color: rgba(255,255,255,.78) !important;
}
/* Buton okunur + premium */
#catBannerClear{
color: rgba(255,255,255,.88) !important;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
}
#catBannerClear:hover{
background: rgba(255,255,255,.12);
border-color: rgba(122,92,255,.35);
}
/* =========================
CAT BANNER — okunurluk + premium (Safari-safe)
========================= */
#catBanner.cat-banner{
background: linear-gradient(135deg, rgba(10,14,26,.62), rgba(10,14,26,.34));
border: 1px solid rgba(255,255,255,.16);
border-radius: 16px;
padding: 12px 14px;
box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Banner içinde OPACITY kaynaklı silikliği öldür */
#catBanner.cat-banner,
#catBanner.cat-banner *{
opacity: 1 !important;
}
/* Banner içindeki muted'ler: artık net ama yine de "soft" */
#catBanner.cat-banner .muted,
#catBannerCount{
color: rgba(255,255,255,.78) !important;
}
/* Sol badge */
#catBannerLabel{
color: rgba(255,255,255,.92) !important;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
}
/* Sağdaki "Kategorie entfernen" butonu */
#catBannerClear{
color: rgba(255,255,255,.88) !important;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
}
#catBannerClear:hover{
background: rgba(255,255,255,.12);
border-color: rgba(122,92,255,.35);
}
/* =========================
FINDER TOGGLE (Filter ile aynı stil)
========================= */
#finderToggle.finder-toggle{
width:100%;
justify-content:center;
position:relative;
padding:14px 16px;
border-radius:16px;
background:linear-gradient(135deg, #1e293b, #0f172a);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
color:rgba(255,255,255,.95);
font-weight:650;
letter-spacing:.2px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:all .15s ease;
}
/* sol ikon */
#finderToggle::before{
content:"✨";
position:absolute;
left:16px;
opacity:.8;
}
/* sağ ok */
#finderToggle::after{
content:"▾";
position:absolute;
right:16px;
opacity:.85;
}
#finderToggle[aria-expanded="true"]::after{
content:"▴";
}
/* hover */
#finderToggle:hover,
#finderToggle[aria-expanded="true"]{
background:linear-gradient(135deg, #334155, #1e293b);
border-color:rgba(255,255,255,.18);
box-shadow:
0 14px 34px rgba(0,0,0,.4),
0 0 0 3px rgba(255,255,255,.08),
inset 0 1px 0 rgba(255,255,255,.1);
}
.finder-catpick{
margin-top:10px;
padding:10px 12px;
border-radius:14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
}
.finder-catrow{
display:flex;
gap:10px;
flex-wrap:wrap;
}
/* Kategorie-Buttons unter „Finder starten“ (immer sichtbar) */
.finder-cat-buttons{
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.finder-cat-buttons:empty{ display: none; }
/* catpick collapse widget */
.catpick{
margin-top: 12px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
overflow: hidden;
}
.catpick__toggle{
width: 100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding: 12px 14px;
background: transparent;
border: 0;
color: rgba(255,255,255,.88);
font-weight: 650;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
.catpick__toggle:hover{
background: rgba(255,255,255,.04);
}
.catpick__chev{
opacity: .75;
transition: transform .15s ease;
}
.catpick.is-open .catpick__chev{
transform: rotate(180deg);
}
.catpick__panel{
padding: 10px 12px 14px;
border-top: 1px solid rgba(255,255,255,.08);
}
.catpick__panel[aria-hidden="true"]{
display: none !important;
}
.catpick__panel[aria-hidden="false"]{
display: block;
}
/* Kategori seçili değilse "Zuerst eine Kategorie wählen" göster (JS ile display ayarlanıyor) */
#finderCatPick{ display:none; }
/* Kategorie-Wrapper für Highlight + Hint */
.compare-category-wrap{
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
overflow: visible;
}
.compare-category-wrap.finder-category-highlight{
animation: finder-category-pulse 2.5s ease-in-out infinite;
}
.compare-category-wrap.finder-category-highlight select{
box-shadow: 0 0 0 2px rgba(106,167,255,.35);
border-color: rgba(106,167,255,.5);
}
@keyframes finder-category-pulse {
0%, 100% { filter: drop-shadow(0 0 6px rgba(106,167,255,.25)); }
50% { filter: drop-shadow(0 0 12px rgba(106,167,255,.4)); }
}
.finder-category-hint{
font-size: 0.75rem;
font-weight: 600;
color: rgba(106,167,255,.95);
white-space: nowrap;
}
.finder-category-pointer{
display: none;
line-height: 0;
flex-shrink: 0;
min-height: 32px;
margin-top: 2px;
animation: finder-finger-point 1.8s ease-in-out infinite;
}
body.finder-open.finder-empty-category .finder-category-pointer{
display: inline-flex;
align-items: center;
justify-content: center;
}
.finder-category-pointer .finder-pointer-svg{
width: 28px;
height: 36px;
vertical-align: middle;
flex-shrink: 0;
}
@keyframes finder-finger-point {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.95; }
50% { transform: translateY(-4px) scale(1.1); opacity: 1; }
}
/* Finder empty state (no category selected) */
.finder-empty-state{ padding: 4px 0 8px; }
.finder-empty-title{ font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; color: rgba(255,255,255,.95); }
.finder-empty-subtitle{ font-size: 0.9rem; color: rgba(255,255,255,.78); margin-bottom: 14px; }
.finder-empty-steps{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.finder-empty-step{ font-size: 0.88rem; color: rgba(255,255,255,.88); display: flex; align-items: center; gap: 8px; }
.finder-step-number{
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(106,167,255,.35); color: #fff;
font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.finder-empty-hint{ font-size: 0.82rem; color: rgba(255,255,255,.6); line-height: 1.4; }
/* Finder kartında okunurluk */
#categoryFinder{
color: rgba(255,255,255,.92);
}
#categoryFinder .muted{
color: rgba(255,255,255,.72) !important;
opacity: 1 !important;
}
#categoryFinder h2,
#categoryFinder #finderTitle{
color: rgba(255,255,255,.95);
}
#categoryFinder .badge{
opacity: 1 !important;
}
/* =========================
OKUNURLUK FIX — overlay yazıları öldürmesin
========================= */
/* page her zaman relative */
body.page-vergleich .page{
position: relative !important;
}
/* Finder overlay: sadece arka plan katmanı */
body.finder-open.page-vergleich .page::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
pointer-events:none !important;
z-index: 0 !important;
/* koyu ama yumuşak */
background:
radial-gradient(70% 70% at 50% 18%, rgba(8,10,18,.60), rgba(8,10,18,.88)),
linear-gradient(to bottom, rgba(8,10,18,.55), rgba(8,10,18,.88)) !important;
}
/* TÜM içerik overlay’in üstüne çıksın */
body.page-vergleich .page > *{
position: relative !important;
z-index: 2 !important;
}
/* Finder kartını özellikle netleştir */
body.finder-open #categoryFinder{
background: linear-gradient(135deg, rgba(8,10,18,.92), rgba(8,10,18,.78)) !important;
border: 1px solid rgba(255,255,255,.14) !important;
box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
}
/* Finder içindeki tüm yazılar: opacity kaynaklı silikliği öldür */
body.finder-open #categoryFinder,
body.finder-open #categoryFinder *{
opacity: 1 !important;
filter: none !important;
}
/* muted'leri okunur yap */
body.finder-open #categoryFinder .muted{
color: rgba(255,255,255,.78) !important;
}
/* Finder başlık ve normal metin */
body.finder-open #categoryFinder h2,
body.finder-open #categoryFinder #finderTitle{
color: rgba(255,255,255,.96) !important;
}
/* TÜM içerik overlay’in üstüne çıksın */
body.page-vergleich .page > *{
position: relative !important;
z-index: 2 !important;
}
/* Finder kartını özellikle netleştir */
body.finder-open #categoryFinder{
background: linear-gradient(135deg, rgba(8,10,18,.92), rgba(8,10,18,.78)) !important;
border: 1px solid rgba(255,255,255,.14) !important;
box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
}
/* Finder içindeki tüm yazılar: opacity kaynaklı silikliği öldür */
body.finder-open #categoryFinder,
body.finder-open #categoryFinder *{
opacity: 1 !important;
filter: none !important;
}
/* muted'leri okunur yap */
body.finder-open #categoryFinder .muted{
color: rgba(255,255,255,.78) !important;
}
/* Finder başlık ve normal metin */
body.finder-open #categoryFinder h2,
body.finder-open #categoryFinder #finderTitle{
color: rgba(255,255,255,.96) !important;
}
body.page-vergleich.finder-open #categoryFinder,
body.page-vergleich.finder-open #categoryFinder *{
opacity: 1 !important;
filter: none !important;
}
body.page-vergleich.finder-open #categoryFinder .muted{
color: rgba(255,255,255,.78) !important;
}
body.page-vergleich.finder-open #categoryFinder .muted{
color: rgba(255,255,255,.78) !important;
opacity: 1 !important;
}
body.page-vergleich.finder-open #categoryFinder,
body.page-vergleich.finder-open #categoryFinder *{
opacity: 1 !important;
filter: none !important;
}
body.page-vergleich.finder-open #categoryFinder .muted{
color: rgba(255,255,255,.78) !important;
}
/* Finder içi 2 kolon layout */
/* Seçili cevap çok net görünsün (Vergleich sayfası Finder) */
#categoryFinder .finder-chips .chip.active {
background: #2563eb !important;
color: #fff !important;
border: 2px solid #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.35) !important;
}
#categoryFinder .finder-chips .chip.active::after {
content: " ✓";
font-weight: 700;
}
#categoryFinder .finder-layout{
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
align-items: start;
}
#categoryFinder .finder-left{ min-width: 0; }
#categoryFinder .finder-right{ min-width: 0; }
@media (max-width: 900px){
#categoryFinder .finder-layout{
grid-template-columns: 1fr;
}
}
/* Finder launcher (compact start) */
.finder-launcher{
padding: 16px 20px;
text-align: center;
}
.finder-launcher__title{
margin: 0 0 8px;
font-size: 1.2rem;
font-weight: 700;
}
.finder-launcher__subtitle{
margin: 0 0 14px;
font-size: 0.95rem;
max-width: 36em;
margin-left: auto;
margin-right: auto;
}
#finderLauncher .btn{ min-width: 160px; }
#finderLauncherBtn.btn.primary{
background: linear-gradient(135deg, #1e293b, #0f172a);
border: 1px solid rgba(255,255,255,.15);
color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
#finderLauncherBtn.btn.primary:hover{
background: linear-gradient(135deg, #334155, #1e293b);
border-color: rgba(255,255,255,.2);
box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
/* Finder open layout */
.finder-open .finder-head{ margin-bottom: 12px; }
.finder-open .finder-title{ margin: 6px 0 4px; font-size: 1.1rem; }
.finder-open .finder-subtitle{ margin: 0; font-size: 0.9rem; }
.finder-progress-block{ margin: 8px 0 12px; }
.finder-progress{ font-size: 0.85rem; }
.finder-progress-top{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.finder-progress-label{ font-weight: 500; color: rgba(255,255,255,.9); }
.finder-progress-count{ font-size: 0.8rem; color: rgba(255,255,255,.7); }
.finder-progress-bar{ height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.finder-progress-fill{ display: block; height: 100%; border-radius: 999px; background: rgba(106,167,255,.6); transition: width .25s ease; }
.finder-progress-hint{ margin-top: 6px; font-size: 0.8rem; color: rgba(255,255,255,.6); }
.finder-questions{ margin-bottom: 14px; }
.finder-questions .finder-q{ margin-bottom: 14px; }
.finder-questions .finder-q-text{ margin-bottom: 6px; font-weight: 500; }
.finder-actions{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
/* Finder results panel */
.finder-results__title{ margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
/* 1) Genel finder kart listesi */
.finder-results__list {
display: flex;
flex-direction: column;
gap: 10px;
}
/* 2) Kartlar – hep tam genişlik + sadece aşağı margin */
.finder-result-card {
position: relative;
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
padding-top: 28px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
width: 100%;
margin: 0 0 16px 0;
box-sizing: border-box;
}
.finder-result-card--top{
background: rgba(106,167,255,.12);
border-color: rgba(106,167,255,.25);
transform: scale(1.02);
transform-origin: center top;
box-shadow: 0 0 20px rgba(106,167,255,.2);
}
.finder-rank-badge{
position: absolute;
top: 6px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 2px 5px;
border-radius: 4px;
white-space: nowrap;
line-height: 1.1;
max-width: 52%;
}
.finder-rank-rozet-wrap{
display: inline-flex;
flex-shrink: 0;
width: 12px;
height: 12px;
}
.finder-rank-rozet{
width: 100%;
height: 100%;
display: block;
}
.finder-rank-rozet-star{
width: 10px;
height: 10px;
margin: 1px;
}
.finder-rank-label{
color: inherit;
overflow: hidden;
text-overflow: ellipsis;
}
.finder-result-card--top .finder-rank-badge{ top: 6px; right: 8px; }
.finder-result-card--top .finder-rank-rozet-wrap{ width: 14px; height: 14px; }
.finder-result-card--top .finder-rank-rozet-star{ width: 11px; height: 11px; }
.finder-rank-gold{
background: linear-gradient(135deg, #d4af37, #b8860b);
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,.4);
box-shadow: 0 0 10px rgba(212,175,55,.4), 0 1px 2px rgba(0,0,0,.2);
}
.finder-rank-silver{
background: linear-gradient(135deg, #e8e8e8, #a0a0a0);
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.finder-rank-bronze{
background: linear-gradient(135deg, #cd7f32, #8b5a2b);
color: #fff;
text-shadow: 0 0 1px rgba(0,0,0,.3);
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.finder-rank-normal{
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.15);
}
.finder-result-card--top .finder-rank-rozet-wrap{ width: 20px; height: 20px; }
.finder-result-card--top .finder-rank-rozet-star{ width: 16px; height: 16px; }
.finder-result-media{
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 8px;
background: rgba(255,255,255,.06);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.finder-result-media-link{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
cursor: pointer;
border-radius: 8px;
transition: background .15s, opacity .15s;
}
.finder-result-media-link:hover{ background: rgba(255,255,255,.08); opacity: .95; }
.finder-result-media-link:focus{ outline: 2px solid rgba(106,167,255,.5); outline-offset: 2px; }
.finder-result-media img{
width: 100%;
height: 100%;
object-fit: contain;
}
.finder-result-body{ flex: 1; min-width: 0; padding-right: 70px; }
/* 2-spaltig: Badge sitzt am Kartenrand; kein künstlicher rechter Einzug */
.finder-result-card__layout {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 16px;
align-items: start;
width: 100%;
flex: 1 1 100%;
min-width: 0;
box-sizing: border-box;
}
.finder-result-card__layout .finder-result-body {
padding-right: 0;
min-width: 0;
}
@media (max-width: 520px) {
.finder-result-card__layout {
grid-template-columns: 96px minmax(0, 1fr);
gap: 12px;
}
}
.finder-result-badge{
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(106,167,255,1);
margin-bottom: 6px;
}
.finder-result-name{ font-weight: 600; margin-bottom: 4px; }
.finder-result-name-link{
color: inherit;
text-decoration: none;
cursor: pointer;
transition: color .15s, text-decoration .15s;
}
.finder-result-name-link:hover{ color: rgba(106,167,255,.95); text-decoration: underline; }
.finder-result-name-link:focus{ outline: 2px solid rgba(106,167,255,.5); outline-offset: 2px; color: rgba(106,167,255,.95); }
.finder-result-match{ font-size: 0.9rem; color: rgba(255,255,255,.8); margin-bottom: 6px; }
.finder-result-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.finder-result-tag{
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255,255,255,.1);
color: rgba(255,255,255,.85);
}
.finder-warum{ margin: 10px 0 8px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.08); }
.finder-warum-title{ font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,.95); margin-bottom: 4px; }
.finder-warum-sub{ font-size: 0.75rem; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.finder-warum-list{ margin: 0; padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.finder-warum-list li{ font-size: 0.8rem; color: rgba(255,255,255,.9); margin-bottom: 0; position: relative; display: inline-flex; align-items: center; }
.finder-warum-list li::before{ content: "✓"; display: inline-block; margin-right: 4px; font-weight: 700; color: inherit; }
.finder-result-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.finder-insight-toggle{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 0.8rem;
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.finder-insight-toggle:hover,
.finder-insight-toggle:focus{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); outline: none; }
.finder-insight-icon{ font-size: 0.9em; }
.finder-insight-text{ font-weight: 500; }
.finder-insight-panel{
margin-top: 10px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(0,0,0,.15);
border: 1px solid rgba(255,255,255,.08);
}
.finder-insight-panel[hidden],
.finder-insight-panel.hidden,
.finder-insight-panel.finder-insight-panel--closed { display: none !important; }
.finder-insight-title{ font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.finder-insight-desc{ font-size: 0.85rem; line-height: 1.45; color: rgba(255,255,255,.9); white-space: pre-wrap; word-break: break-word; }
body.page-finder .finder-insight-title { color: #374151; }
body.page-finder .finder-insight-desc { color: #000; }
body.page-finder .finder-insight-panel {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.page-finder .finder-insight-title {
word-break: normal;
overflow-wrap: break-word;
white-space: normal;
letter-spacing: 0.02em;
}
body.page-finder .finder-insight-desc {
word-break: normal;
overflow-wrap: break-word;
white-space: pre-wrap;
}
/* Warum? button: belirgin (açık tema) */
body.page-finder .finder-insight-toggle{
color: #1e40af;
background: #eff6ff;
border: 1px solid #2563eb;
font-weight: 600;
}
body.page-finder .finder-insight-toggle:hover,
body.page-finder .finder-insight-toggle:focus{
background: #dbeafe;
border-color: #1d4ed8;
outline: none;
}
body.page-finder .finder-insight-toggle--link {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
body.page-finder .finder-insight-toggle--link:hover {
color: #1e40af;
}
#categoryFinder .finder-insight-toggle{
color: #1e40af;
background: #eff6ff;
border: 1px solid #2563eb;
font-weight: 600;
}
#categoryFinder .finder-insight-toggle:hover,
#categoryFinder .finder-insight-toggle:focus{
background: #dbeafe;
border-color: #1d4ed8;
outline: none;
}
.finder-result-link{ font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
/* Finder results footer: more button + meta */
.finder-results-footer{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.1);
display: flex;
flex-direction: column;
gap: 8px;
}
.finder-results-more{
align-self: flex-start;
padding: 8px 14px;
font-size: 0.9rem;
font-weight: 500;
color: rgba(255,255,255,.95);
background: rgba(106,167,255,.25);
border: 1px solid rgba(106,167,255,.4);
border-radius: 8px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.finder-results-more:hover,
.finder-results-more:focus{ background: rgba(106,167,255,.35); border-color: rgba(106,167,255,.5); outline: none; }
.finder-results-meta{
font-size: 0.8rem;
color: rgba(255,255,255,.65);
}
.finder-results-total{
font-size: 0.75rem;
color: rgba(255,255,255,.5);
}
/* Finder: Wizard (eine Frage) + Zurück */
.finder-wizard-nav {
margin: 0 0 8px;
}
.finder-wizard-back {
font-size: 0.85rem !important;
padding: 6px 12px !important;
}
.finder-wizard-hint {
font-size: 0.82rem;
line-height: 1.45;
margin: 0 0 12px;
}
.finder-q--wizard .finder-q-text {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.3;
}
.finder-chips--wizard {
display: flex;
flex-direction: column;
gap: 10px;
}
.finder-chips--wizard .chip {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 48px;
padding: 12px 14px !important;
text-align: left;
border-radius: 12px !important;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.finder-chips--wizard .chip:hover {
transform: translateY(-1px);
}
.finder-chips--wizard .chip.active {
box-shadow: 0 0 0 3px rgba(106, 167, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
.finder-chip-label {
display: block;
line-height: 1.35;
}
/* Finder: Premium-Ergebnis-Stack */
.finder-results-premium {
display: flex;
flex-direction: column;
gap: 14px;
}
.finder-results-hero__title {
margin: 0 0 6px;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.25;
}
.finder-results-hero__match {
margin: 0 0 8px;
font-size: 0.88rem;
font-weight: 600;
opacity: 0.92;
}
.finder-results-hero__lead {
margin: 0;
font-size: 0.84rem;
line-height: 1.45;
opacity: 0.85;
}
/* Hell-Theme: keine Parent-Opacity – Microcopy bleibt lesbar */
body.page-finder .finder-results-premium--light .finder-results-hero__match,
body.page-finder .finder-results-premium--light .finder-results-hero__lead {
opacity: 1;
}
body.page-finder .finder-results-premium--light .finder-block__text {
opacity: 1;
}
.finder-block {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.14);
}
.finder-block__title {
margin: 0 0 8px;
font-size: 0.88rem;
font-weight: 600;
}
.finder-block__list {
margin: 0;
padding-left: 1.1em;
font-size: 0.82rem;
line-height: 1.45;
}
.finder-block__list--plain {
list-style: disc;
}
.finder-block__text {
margin: 0;
font-size: 0.82rem;
line-height: 1.45;
opacity: 0.9;
}
.finder-warum-weil {
opacity: 0.75;
font-size: 0.92em;
}
.finder-alternatives__title {
margin: 4px 0 10px;
font-size: 0.95rem;
font-weight: 600;
}
.finder-results-more-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.finder-results-more-list__title {
margin: 4px 0 6px;
font-size: 0.95rem;
font-weight: 600;
}
body.page-finder .finder-results-premium--light .finder-results-more-list__title {
color: #0f172a;
}
body.page-finder .finder-results-premium--light .finder-results-more-list {
gap: 16px;
}
.finder-alt-block__label {
margin: 0 0 4px;
font-weight: 600;
font-size: 0.85rem;
}
.finder-alt-block__sub {
margin: 0 0 8px;
font-size: 0.78rem;
}
.finder-primary-ctas {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.finder-primary-ctas .btn {
justify-content: center;
text-align: center;
min-height: 44px;
}
.finder-tip-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.finder-tip-link {
font-size: 0.86rem;
font-weight: 500;
color: rgba(147, 197, 253, 0.95);
text-decoration: none;
}
.finder-tip-link:hover {
text-decoration: underline;
}
.finder-result-tagline {
font-size: 0.82rem;
margin: 0 0 6px;
line-height: 1.35;
}
.finder-result-price {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 6px;
}
/* Premium stack: dunkel (Vergleich-Panel) */
.finder-results-premium--dark .finder-results-hero__title {
color: rgba(255, 255, 255, 0.96);
}
.finder-results-premium--dark .finder-results-hero__match,
.finder-results-premium--dark .finder-results-hero__lead {
color: rgba(255, 255, 255, 0.78);
}
.finder-results-premium--dark .finder-block__title,
.finder-results-premium--dark .finder-block__list,
.finder-results-premium--dark .finder-block__text {
color: rgba(255, 255, 255, 0.88);
}
.finder-results-premium--dark .finder-alt-block__label {
color: rgba(255, 255, 255, 0.92);
}
.finder-results-premium--dark .finder-result-tagline {
color: rgba(255, 255, 255, 0.65) !important;
}
/* Premium stack: hell (finder.html) */
body.page-finder .finder-results-premium--light .finder-results-hero__title {
color: #0f172a;
}
body.page-finder .finder-results-premium--light .finder-results-hero__match {
color: #1e40af;
}
body.page-finder .finder-results-premium--light .finder-results-hero__lead {
color: #334155;
}
body.page-finder .finder-results-premium--light .finder-block {
background: #f8fafc;
border-color: #e2e8f0;
}
body.page-finder .finder-results-premium--light .finder-block__title {
color: #0f172a;
}
body.page-finder .finder-results-premium--light .finder-block__list,
body.page-finder .finder-results-premium--light .finder-block__text {
color: #334155;
}
body.page-finder .finder-results-premium--light .finder-tip-link {
color: #2563eb;
}
body.page-finder .finder-results-premium--light .finder-results-footer {
border-top-color: #e2e8f0;
}
body.page-finder .finder-results-premium--light .finder-results-meta {
color: #475569;
}
body.page-finder .finder-results-premium--light .finder-results-more {
color: #1e293b !important;
background: #e2e8f0 !important;
border-color: #cbd5e1 !important;
}
body.page-finder .finder-results-premium--light .finder-results-more:hover,
body.page-finder .finder-results-premium--light .finder-results-more:focus {
background: #cbd5e1 !important;
border-color: #94a3b8 !important;
}
/* finder.html: sekundäre CTAs (heller Hintergrund, keine „disabled“-Optik) */
body.page-finder .finder-results-premium--light .finder-primary-ctas .btn.ghost {
color: #1e293b !important;
border: 1px solid #cbd5e1 !important;
background: #ffffff !important;
font-weight: 600;
}
body.page-finder .finder-results-premium--light .finder-primary-ctas .btn.ghost:hover,
body.page-finder .finder-results-premium--light .finder-primary-ctas .btn.ghost:focus-visible {
color: #0f172a !important;
background: #f1f5f9 !important;
border-color: #94a3b8 !important;
}
body.page-finder .finder-results-premium--light .finder-result-tagline.muted,
body.page-finder .finder-results-premium--light .finder-result-tagline {
color: #475569 !important;
}
body.page-finder .finder-results-premium--light .finder-warum-weil {
color: #64748b;
opacity: 1;
}
/* Detail: grüner Zwischen-CTA unter „Deal öffnen“ */
body.page-finder .finder-results-premium--light .finder-cta-detail {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #059669, #047857) !important;
color: #fff !important;
border: 1px solid #065f46 !important;
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
body.page-finder .finder-results-premium--light .finder-cta-detail:hover,
body.page-finder .finder-results-premium--light .finder-cta-detail:focus-visible {
background: linear-gradient(135deg, #047857, #065f46) !important;
color: #fff !important;
border-color: #064e3b !important;
}
.finder-open .finder-results-premium--dark .finder-cta-detail,
#categoryFinder .finder-results-premium--dark .finder-cta-detail {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #10b981, #059669) !important;
color: #fff !important;
border: 1px solid #34d399 !important;
font-weight: 600;
}
.finder-open .finder-results-premium--dark .finder-cta-detail:hover,
.finder-open .finder-results-premium--dark .finder-cta-detail:focus-visible,
#categoryFinder .finder-results-premium--dark .finder-cta-detail:hover,
#categoryFinder .finder-results-premium--dark .finder-cta-detail:focus-visible {
background: linear-gradient(135deg, #059669, #047857) !important;
border-color: #6ee7b7 !important;
}
body.page-finder .finder-results-placeholder .muted,
body.page-finder .finder-results__list .muted {
color: #475569 !important;
}
.finder-open .finder-primary-ctas .btn.ghost {
color: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
.finder-open .finder-primary-ctas .btn.primary {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
border: none;
}
@media (max-width: 900px) {
body.page-finder .finder-results-premium--light .finder-results-hero {
order: 1;
}
body.page-finder .finder-results-premium--light .finder-main-article {
order: 2;
}
body.page-finder .finder-results-premium--light .finder-primary-ctas {
order: 3;
}
body.page-finder .finder-results-premium--light .finder-block--why {
order: 4;
}
body.page-finder .finder-results-premium--light .finder-block--profile {
order: 5;
}
body.page-finder .finder-results-premium--light .finder-alternatives {
order: 6;
}
body.page-finder .finder-results-premium--light .finder-results-more-list {
order: 7;
}
body.page-finder .finder-results-premium--light .finder-block--trust {
order: 8;
}
body.page-finder .finder-results-premium--light .finder-block--tips {
order: 9;
}
body.page-finder .finder-results-premium--light .finder-results-footer {
order: 10;
}
.finder-open .finder-results-premium--dark .finder-results-hero {
order: 1;
}
.finder-open .finder-results-premium--dark .finder-main-article {
order: 2;
}
.finder-open .finder-results-premium--dark .finder-primary-ctas {
order: 3;
}
.finder-open .finder-results-premium--dark .finder-block--why {
order: 4;
}
.finder-open .finder-results-premium--dark .finder-block--profile {
order: 5;
}
.finder-open .finder-results-premium--dark .finder-alternatives {
order: 6;
}
.finder-open .finder-results-premium--dark .finder-results-more-list {
order: 7;
}
.finder-open .finder-results-premium--dark .finder-block--trust {
order: 8;
}
.finder-open .finder-results-premium--dark .finder-block--tips {
order: 9;
}
.finder-open .finder-results-premium--dark .finder-results-footer {
order: 10;
}
}
/* =========================================
Finder standalone page (/finder.html)
Light theme, wide layout, prominent selection
========================================= */
body.page-finder.page-finder--light,
body.page-finder .page-finder-main {
background: #f5f5f7;
color: #1a1a1a;
/* Global :root --text/--muted beyaz; light Finder gövdesinde okunur metin için üzerine yaz */
--text: #334155;
--text-strong: #0f172a;
--muted: #475569;
}
body.page-finder #breadcrumbs,
body.page-finder nav.crumbs {
color: #374151;
}
body.page-finder #breadcrumbs a {
color: #1e40af;
}
body.page-finder #breadcrumbs .bc-current {
color: #1a1a1a;
opacity: 1;
}
body.page-finder #breadcrumbs,
body.page-finder nav.crumbs[id="breadcrumbs"] {
margin-bottom: 6px;
}
body.page-finder .container--finder {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 0;
}
body.page-finder main.page.page-finder-main {
padding-top: 0;
}
body.page-finder .finder-page-wrap {
padding: 0 0 32px;
}
body.page-finder .finder-page-split {
display: flex;
flex-direction: column;
gap: 0;
min-height: calc(100vh - 160px);
max-height: calc(100vh - 120px);
height: calc(100vh - 140px);
}
body.page-finder .finder-page-mode-bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 40;
padding: 10px 0 12px;
margin: 0 0 4px;
background: #f5f5f7;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
}
body.page-finder.finder-main-mode-chat #theyr-chat-root {
display: none !important;
}
body.page-finder .finder-page-panes {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
body.page-finder .finder-page-pane {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
body.page-finder .finder-page-pane[hidden] {
display: none !important;
}
body.page-finder .finder-page-pane--finder {
overflow: hidden;
min-height: 0;
}
body.page-finder .finder-page-pane--finder .finder-page-layout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
grid-template-rows: 1fr;
gap: 32px;
align-items: stretch;
flex: 1;
min-height: 0;
}
body.page-finder .finder-page-pane--finder .finder-page-left {
overflow-y: auto;
min-height: 0;
max-height: 100%;
}
body.page-finder .finder-page-pane--finder .finder-page-right {
padding: 0 0 0 12px;
padding-top: 0;
margin-top: 0;
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
body.page-finder .finder-page-pane--finder .finder-page-results-stack {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
width: 100%;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary {
flex-shrink: 0;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 8px 0 0;
box-sizing: border-box;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results__title {
flex-shrink: 0;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results__list {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 8px 12px 0;
box-sizing: border-box;
}
body.page-finder .finder-page-pane--chat {
overflow: hidden;
padding: 0 0 12px;
}
body.page-finder .finder-page-pane--chat .finder-embed-chat-root {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
width: 100%;
}
body.page-finder .finder-page-pane--chat .finder-embed-chat {
flex: 1;
min-height: 280px;
border-radius: 14px;
}
body.page-finder .finder-page-mode-tab {
font: inherit;
font-size: 0.95rem;
font-weight: 650;
letter-spacing: 0.02em;
padding: 8px 4px;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
text-align: left;
}
body.page-finder .finder-page-mode-tab--finder {
width: auto;
}
body.page-finder .finder-page-mode-tab--chat {
text-align: right;
width: auto;
min-width: 72px;
}
body.page-finder .finder-page-mode-tab:hover {
color: #0f172a;
}
body.page-finder .finder-page-mode-tab:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
border-radius: 6px;
}
body.page-finder .finder-page-mode-tab.is-active {
color: #0f172a;
border-bottom-color: #2563eb;
}
body.page-finder .finder-embed-chat-root {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.finder-embed-chat {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #f8fafc;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.finder-embed-chat__head {
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
font-weight: 650;
color: #0f172a;
font-size: 0.9rem;
background: #fff;
border-radius: 12px 12px 0 0;
}
.finder-embed-chat__head-sub {
font-weight: 500;
font-size: 0.78rem;
color: #64748b;
margin-top: 4px;
line-height: 1.35;
}
.finder-embed-chat__messages {
flex: 1;
overflow-y: auto;
padding: 12px 14px;
min-height: 120px;
}
.finder-embed-chat__msg {
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 12px;
font-size: 0.875rem;
line-height: 1.45;
max-width: 92%;
}
.finder-embed-chat__msg--user {
background: linear-gradient(135deg, #e0e7ff, #dbeafe);
color: #0f172a;
margin-left: auto;
}
.finder-embed-chat__msg--bot {
background: #fff;
border: 1px solid #e2e8f0;
color: #334155;
white-space: pre-wrap;
}
.finder-embed-chat__msg--bot a {
color: #2563eb;
}
.finder-embed-chat__loading {
color: #64748b;
font-size: 0.8rem;
padding: 6px 0;
}
.finder-embed-chat__input-row {
display: flex;
flex-shrink: 0;
align-items: center;
padding: 10px 12px;
border-top: 1px solid #e2e8f0;
background: #fff;
border-radius: 0 0 12px 12px;
gap: 8px;
}
.finder-embed-chat__input {
flex: 1;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #cbd5e1;
font-size: 0.875rem;
box-sizing: border-box;
}
.finder-embed-chat__input::placeholder {
color: #94a3b8;
}
.finder-embed-chat__send {
width: 40px;
height: 40px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #6d5cff, #7c6bff);
color: #fff;
font-size: 15px;
cursor: pointer;
flex-shrink: 0;
}
.finder-embed-chat__send:hover {
filter: brightness(1.05);
}
body.page-finder .finder-page-header {
margin-bottom: 12px;
}
body.page-finder .finder-page-hero-title {
font-size: 1.6rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 8px;
}
body.page-finder .finder-page-hero-sub {
color: #334155 !important;
margin: 0;
font-size: 1rem;
line-height: 1.5;
}
body.page-finder .finder-page-hero-sub.muted {
color: #334155 !important;
}
body.page-finder .finder-page-hero-ki {
margin: 12px 0 0;
font-size: 0.9rem;
line-height: 1.55;
max-width: 42em;
}
body.page-finder .finder-page-pick .finder-page-hero-ki {
margin-bottom: 16px;
}
/* Global .muted (#fff !important) finder light sayfada okunmaz; sadece bu akışta düzelt */
body.page-finder main.page-finder-main .muted {
color: #475569 !important;
}
body.page-finder .finder-wizard-hint.muted,
body.page-finder .finder-wizard-hint {
color: #475569 !important;
opacity: 1;
}
body.page-finder .finder-wizard-nav .btn.ghost,
body.page-finder .finder-wizard-back.btn {
color: #1e293b !important;
border-color: #cbd5e1 !important;
background: #ffffff !important;
}
body.page-finder .finder-wizard-nav .btn.ghost:hover,
body.page-finder .finder-wizard-nav .btn.ghost:focus-visible {
color: #0f172a !important;
background: #f1f5f9 !important;
border-color: #94a3b8 !important;
}
body.page-finder .finder-progress-block--light .finder-progress-label {
color: #0f172a !important;
font-weight: 600;
}
body.page-finder .finder-progress-block--light .finder-progress-count {
color: #475569 !important;
}
body.page-finder .finder-progress--wizard .finder-progress-count {
color: #475569 !important;
}
body.page-finder .finder-results-summary {
margin-bottom: 8px;
padding: 10px 14px;
}
body.page-finder .finder-results__title {
margin-bottom: 6px;
}
@media (max-width: 900px) {
/* Mobil: her şey küçük */
body.page-finder nav.crumbs,
body.page-finder #breadcrumbs {
font-size: 0.64rem;
margin-bottom: 4px;
}
body.page-finder .finder-page-hero-title {
font-size: 0.92rem !important;
line-height: 1.25;
}
body.page-finder .finder-page-hero-sub {
font-size: 0.7rem !important;
color: #334155 !important;
}
body.page-finder .finder-page-header {
margin-bottom: 6px;
}
body.page-finder .finder-progress-block--light .finder-progress-label,
body.page-finder .finder-progress-block--light .finder-progress-count {
font-size: 0.62rem !important;
}
body.page-finder .finder-progress-block--light .finder-progress-label {
color: #0f172a !important;
}
body.page-finder .finder-progress-block--light .finder-progress-count {
color: #475569 !important;
}
body.page-finder .finder-questions--light .finder-q-text {
font-size: 0.74rem !important;
margin-bottom: 3px;
}
body.page-finder .finder-chips .chip {
font-size: 0.68rem !important;
padding: 4px 8px !important;
}
body.page-finder .finder-chips--wizard .chip {
font-size: 0.84rem !important;
padding: 12px 14px !important;
min-height: 48px !important;
color: #1e293b !important;
}
body.page-finder .finder-chips--wizard .chip.active {
color: #ffffff !important;
}
body.page-finder .finder-questions--light .finder-q--wizard .finder-q-text {
font-size: 0.95rem !important;
}
body.page-finder .finder-q {
margin-bottom: 12px;
padding-bottom: 10px;
}
body.page-finder .finder-actions .btn.ghost,
body.page-finder .finder-actions a.btn.ghost {
font-size: 0.68rem !important;
}
body.page-finder .finder-page-split {
min-height: calc(100vh - 130px);
max-height: calc(100vh - 100px);
height: calc(100vh - 120px);
}
body.page-finder .finder-page-mode-bar {
padding: 8px 0 10px;
}
body.page-finder .finder-page-mode-tab {
font-size: 0.78rem;
padding: 6px 2px;
}
body.page-finder .finder-page-pane--finder .finder-page-layout {
grid-template-columns: 0.65fr 1.35fr;
gap: 8px;
align-items: stretch;
}
body.page-finder .finder-page-pane--finder .finder-page-left {
min-width: 0;
overflow-y: auto;
max-height: 100%;
}
body.page-finder .finder-page-pane--finder .finder-page-right {
min-width: 0;
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
overflow: hidden;
padding-left: 0;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary {
padding: 4px 8px;
margin-bottom: 4px;
font-size: 0.62rem;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary .finder-summary-line {
font-size: 0.6rem;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary .finder-summary-top {
font-size: 0.64rem;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results__title {
font-size: 0.72rem;
margin-bottom: 4px;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results,
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results__list {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.page-finder .finder-results__list {
gap: 8px;
padding-right: 0;
padding-left: 0;
}
body.page-finder .finder-result-card {
max-width: none;
min-width: 212px;
padding: 10px 10px;
padding-top: 20px;
gap: 8px;
border-radius: 8px;
align-items: flex-start;
overflow: visible;
position: relative;
display: flex;
flex-wrap: wrap;
}
body.page-finder .finder-result-card:has(.finder-insight-panel:not([hidden])) {
z-index: 2;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
padding-bottom: 14px;
}
body.page-finder .finder-result-card .finder-insight-panel {
width: 100%;
order: 10;
flex-basis: 100%;
margin-top: 8px;
padding: 10px 12px;
border-radius: 8px;
background: #f8fafc;
border: 1px solid #e2e8f0;
box-sizing: border-box;
}
body.page-finder .finder-result-card .finder-insight-panel .finder-insight-title {
font-size: 0.7rem;
white-space: normal;
word-break: normal;
line-height: 1.35;
margin-bottom: 4px;
color: #374151;
}
body.page-finder .finder-result-card .finder-insight-panel .finder-insight-desc {
font-size: 0.7rem;
line-height: 1.45;
word-break: normal;
overflow-wrap: break-word;
color: #1a1a1a;
}
body.page-finder .finder-result-body {
overflow: visible;
flex: 1 1 auto;
min-width: 0;
}
body.page-finder .finder-result-media {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
max-width: 42px;
max-height: 42px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
}
body.page-finder .finder-result-media img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
body.page-finder .finder-result-body {
min-width: 0;
flex: 1;
width: 100%;
}
body.page-finder .finder-result-name {
margin-bottom: 2px;
flex: 1;
min-width: 0;
}
body.page-finder .finder-result-name-link {
font-size: 0.74rem;
line-height: 1.35;
color: #1a1a1a !important;
font-weight: 600;
width: 100%;
min-width: 0;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.page-finder .finder-result-match {
font-size: 11px;
font-weight: 700;
margin-bottom: 4px;
color: #374151;
}
body.page-finder .finder-result-tags {
margin-bottom: 4px;
gap: 2px;
}
body.page-finder .finder-result-tag {
font-size: 0.58rem;
padding: 2px 4px;
}
body.page-finder .finder-warum {
margin-bottom: 4px;
}
body.page-finder .finder-warum-title,
body.page-finder .finder-warum-list {
font-size: 0.6rem;
}
body.page-finder .finder-warum-list {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
}
body.page-finder .finder-warum-list li {
font-size: 0.58rem;
margin-bottom: 0;
white-space: nowrap;
}
body.page-finder .finder-result-tags {
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
}
body.page-finder .finder-result-tag {
white-space: nowrap;
}
body.page-finder .finder-result-actions {
margin-top: 4px;
gap: 4px;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: flex-start;
}
body.page-finder .finder-insight-toggle {
font-size: 0.64rem;
padding: 3px 6px;
min-height: 22px;
color: #1e40af !important;
background: #eff6ff !important;
border: 1px solid #2563eb !important;
font-weight: 600;
order: 1;
}
body.page-finder .finder-result-link {
font-size: 0.62rem;
padding: 3px 6px;
order: 2;
}
body.page-finder .finder-rank-badge {
font-size: 0.38rem;
top: 3px;
right: 4px;
padding: 1px 3px;
max-width: 58%;
}
body.page-finder .finder-rank-rozet-wrap {
width: 7px;
height: 7px;
}
body.page-finder .finder-results-footer {
margin-top: 8px;
padding-top: 8px;
}
body.page-finder .finder-results-more {
padding: 5px 8px;
font-size: 0.66rem;
}
body.page-finder .finder-results-meta {
font-size: 0.6rem;
}
}
@media (max-width: 480px) {
body.page-finder .finder-page-hero-title {
font-size: 0.85rem !important;
}
body.page-finder .finder-page-hero-sub {
font-size: 0.65rem !important;
}
body.page-finder .finder-questions--light .finder-q-text {
font-size: 0.7rem !important;
}
body.page-finder .finder-chips .chip {
font-size: 0.64rem !important;
padding: 3px 6px !important;
}
body.page-finder .finder-page-split {
min-height: calc(100vh - 115px);
max-height: calc(100vh - 90px);
height: calc(100vh - 105px);
}
body.page-finder .finder-page-mode-bar {
padding: 6px 0 8px;
}
body.page-finder .finder-page-pane--finder .finder-page-layout {
grid-template-columns: 0.75fr 1.25fr;
gap: 6px;
}
body.page-finder .finder-page-pane--finder .finder-page-right {
padding: 0;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary {
padding: 3px 6px;
font-size: 0.58rem;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary .finder-summary-line,
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results-summary .finder-summary-top {
font-size: 0.56rem;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results__title {
font-size: 0.68rem;
}
body.page-finder .finder-results__list {
gap: 6px;
}
body.page-finder .finder-result-card {
min-width: 212px;
padding: 8px 8px;
padding-top: 18px;
gap: 6px;
border-radius: 6px;
overflow: visible;
position: relative;
flex-wrap: wrap;
}
body.page-finder .finder-result-card .finder-insight-panel {
padding: 8px 10px;
margin-top: 6px;
font-size: 0.68rem;
}
body.page-finder .finder-result-card .finder-insight-panel .finder-insight-title {
font-size: 0.66rem;
}
body.page-finder .finder-result-card .finder-insight-panel .finder-insight-desc {
font-size: 0.65rem;
}
body.page-finder .finder-result-card:has(.finder-insight-panel:not([hidden])) {
z-index: 2;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
body.page-finder .finder-result-media {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
max-width: 38px;
max-height: 38px;
border-radius: 5px;
}
body.page-finder .finder-result-name-link {
font-size: 0.72rem;
color: #1a1a1a !important;
font-weight: 600;
width: 100%;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.page-finder .finder-result-match {
font-size: 11px;
margin-bottom: 3px;
}
body.page-finder .finder-result-tag {
font-size: 0.54rem;
}
body.page-finder .finder-insight-toggle {
font-size: 0.6rem;
padding: 2px 5px;
min-height: 20px;
}
body.page-finder .finder-result-link {
font-size: 0.58rem;
padding: 2px 5px;
}
body.page-finder .finder-rank-badge {
font-size: 0.34rem;
top: 2px;
right: 3px;
}
body.page-finder .finder-rank-rozet-wrap {
width: 6px;
height: 6px;
}
}
/* Result summary (48 passende, 3 beste Matches, Top-Empfehlung) */
.finder-results-summary {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.finder-results-summary .finder-summary-line {
font-size: 0.95rem;
color: #374151;
margin-bottom: 4px;
}
.finder-results-summary .finder-summary-line:last-child { margin-bottom: 0; }
.finder-results-summary .finder-summary-top {
font-weight: 600;
color: #1a1a1a;
margin-top: 6px;
}
/* Light theme: progress + questions */
body.page-finder .finder-progress-block--light .finder-progress-label {
color: #0f172a;
font-weight: 600;
}
body.page-finder .finder-progress-block--light .finder-progress-count {
color: #475569;
}
body.page-finder .finder-progress-block--light .finder-progress-bar {
background: #e5e7eb;
}
body.page-finder .finder-progress-block--light .finder-progress-fill {
background: #2563eb;
}
body.page-finder .finder-questions--light .finder-q-text {
color: #1a1a1a;
font-weight: 600;
margin-bottom: 10px;
}
/* Cevap seçimleri: seçili çok belirgin (açık tema) */
body.page-finder .finder-chips .chip {
background: #fff;
border: 2px solid #d1d5db;
color: #374151;
padding: 12px 18px;
font-weight: 500;
transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
body.page-finder .finder-chips .chip:hover {
border-color: #9ca3af;
background: #f9fafb;
}
body.page-finder .finder-chips .chip.active {
background: #2563eb !important;
border: 2px solid #2563eb !important;
color: #fff !important;
box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}
body.page-finder .finder-chips .chip.active::after {
content: " ✓";
font-weight: 700;
}
/* Wizard: Antwortkarten – immer dunkle Schrift bis zur Auswahl */
body.page-finder .finder-chips--wizard .chip {
color: #1e293b !important;
border-color: #cbd5e1 !important;
}
body.page-finder .finder-chips--wizard .chip:hover {
color: #0f172a !important;
background: #f8fafc !important;
border-color: #94a3b8 !important;
}
body.page-finder .finder-chips--wizard .chip.active {
color: #ffffff !important;
}
body.page-finder .finder-chips--wizard .finder-chip-label {
color: inherit;
}
body.page-finder .finder-q {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e7eb;
}
body.page-finder .finder-q:last-of-type { border-bottom: none; }
/* Light theme: result cards – bigger, premium */
body.page-finder .finder-results--light .finder-results__title {
color: #0f172a;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 14px;
}
body.page-finder .finder-results__list {
gap: 16px;
}
body.page-finder .finder-result-card {
max-width: 520px;
padding: 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0 10px 35px rgba(0,0,0,.08);
transition: transform .2s ease, box-shadow .2s ease;
position: relative;
display: flex;
flex-wrap: wrap;
}
/* Desktop/Tablet: innen mehr Luft links (Hauptkarte + übrige Karten), Badge bleibt absolute oben rechts */
@media (min-width: 901px) {
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results {
padding-left: 10px;
padding-right: 10px;
}
body.page-finder .finder-page-pane--finder .finder-page-right .finder-results__list {
padding: 12px 12px 12px 8px;
box-sizing: border-box;
}
body.page-finder .finder-result-card {
padding: 26px 28px;
padding-top: 32px;
box-sizing: border-box;
}
body.page-finder .finder-result-card__layout {
grid-template-columns: 128px minmax(0, 1fr);
gap: 22px;
align-items: start;
width: 100%;
}
body.page-finder .finder-result-card__layout .finder-result-media {
width: 112px;
height: 112px;
max-width: 112px;
justify-self: start;
box-sizing: border-box;
}
body.page-finder .finder-result-card__layout .finder-result-body {
min-width: 0;
width: 100%;
}
}
body.page-finder .finder-result-card:has(.finder-insight-panel:not([hidden])) {
z-index: 2;
box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
body.page-finder .finder-result-card .finder-insight-panel {
width: 100%;
order: 10;
flex-basis: 100%;
margin-top: 10px;
padding: 12px 14px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
box-sizing: border-box;
}
body.page-finder .finder-result-card .finder-insight-panel .finder-insight-title {
white-space: normal;
word-break: normal;
}
body.page-finder .finder-result-card .finder-insight-panel .finder-insight-desc {
word-break: normal;
overflow-wrap: break-word;
}
body.page-finder .finder-result-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
/* 1. kart: mavi, belirgin – pozisyon class ile (nth-child yerine) */
body.page-finder .finder-result-card--top.finder-result-card--pos-0,
body.page-finder .finder-result-card--pos-0 {
background: #dbeafe !important;
border: 2px solid #2563eb !important;
box-shadow: 0 10px 35px rgba(37,99,235,.25) !important;
}
body.page-finder .finder-result-card--pos-0:hover {
background: #bfdbfe !important;
border-color: #1d4ed8 !important;
box-shadow: 0 14px 40px rgba(37,99,235,.4) !important;
}
/* 2. kart: gri, belirgin */
body.page-finder .finder-result-card--pos-1 {
background: #f3f4f6 !important;
border: 2px solid #6b7280 !important;
box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
}
body.page-finder .finder-result-card--pos-1:hover {
background: #e5e7eb !important;
border-color: #4b5563 !important;
box-shadow: 0 12px 36px rgba(0,0,0,.15) !important;
}
/* 3. kart: sarı/amber, belirgin hover */
body.page-finder .finder-result-card--pos-2 {
background: #fef3c7 !important;
border: 2px solid #f59e0b !important;
box-shadow: 0 8px 28px rgba(245,158,11,.15) !important;
}
body.page-finder .finder-result-card--pos-2:hover {
background: #fde68a !important;
border-color: #d97706 !important;
box-shadow: 0 12px 36px rgba(245,158,11,.3) !important;
}
/* Vergleich (categoryFinder): pozisyon class ile */
#categoryFinder .finder-result-card--pos-1 {
background: rgba(255,255,255,.18) !important;
border-color: rgba(255,255,255,.35) !important;
box-shadow: 0 6px 20px rgba(0,0,0,.2) !important;
}
#categoryFinder .finder-result-card--pos-1:hover {
background: rgba(255,255,255,.25) !important;
border-color: rgba(255,255,255,.45) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}
#categoryFinder .finder-result-card--pos-2 {
background: rgba(254,243,199,.4) !important;
border-color: rgba(245,158,11,.6) !important;
box-shadow: 0 6px 20px rgba(245,158,11,.2) !important;
}
#categoryFinder .finder-result-card--pos-2:hover {
background: rgba(254,243,199,.55) !important;
border-color: rgba(245,158,11,.8) !important;
box-shadow: 0 10px 28px rgba(245,158,11,.35) !important;
}
body.page-finder .finder-result-media {
width: 112px;
height: 112px;
border-radius: 10px;
background: #f9fafb;
}
body.page-finder .finder-result-match {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 8px;
}
body.page-finder .finder-result-name-link {
color: #1a1a1a;
}
body.page-finder .finder-result-name-link:hover {
color: #2563eb;
}
body.page-finder .finder-result-tag {
background: #e5e7eb;
color: #374151;
}
body.page-finder .finder-warum {
background: transparent;
border: none;
box-shadow: none;
color: #16a34a;
text-align: left;
margin-left: -40px;
}
body.page-finder .finder-warum-title {
color: #16a34a;
text-align: left;
white-space: nowrap;
padding-left: 0;
}
body.page-finder .finder-warum-list {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
padding-left: 0;
justify-content: flex-start;
align-content: flex-start;
}
body.page-finder .finder-warum-list li {
color: #16a34a;
margin-bottom: 0;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
body.page-finder .finder-warum-list li::before {
color: #2563eb;
}
body.page-finder .finder-result-tags {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
body.page-finder .finder-result-tag {
white-space: nowrap;
}
body.page-finder .finder-result-link {
color: #2563eb;
font-weight: 600;
white-space: nowrap;
}
body.page-finder .finder-results-footer,
body.page-finder .finder-results-meta,
body.page-finder .finder-results-total {
color: #475569;
}
body.page-finder .finder-results-more {
background: #eff6ff;
border-color: #2563eb;
color: #1e40af;
}
body.page-finder .finder-results-more:hover {
background: #dbeafe;
}
/* Rank badges on light */
body.page-finder .finder-rank-gold { color: #fff; }
body.page-finder .finder-rank-silver { color: #333; }
body.page-finder .finder-rank-bronze { color: #fff; }
body.page-finder .finder-rank-normal {
background: #e5e7eb;
color: #374151;
border: none;
}
/* Category pick (no cat in URL) – light box, readable text (no .card = no dark theme) */
.finder-page-pick--light,
#finderPageNoCat.finder-page-pick--light,
body.page-finder .finder-page-pick--light,
body.page-finder #finderPageNoCat {
background: #fff !important;
border: 1px solid #e5e7eb !important;
box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
color: #1a1a1a !important;
padding: 28px 24px !important;
}
.finder-page-pick--light .finder-page-hero-title,
body.page-finder .finder-page-pick .finder-page-hero-title {
color: #1a1a1a !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
margin: 0 0 8px !important;
}
.finder-page-pick--light .finder-page-hero-sub,
.finder-page-pick--light .muted,
body.page-finder .finder-page-pick .finder-page-hero-sub,
body.page-finder .finder-page-pick .muted {
color: #4b5563 !important;
margin: 0 0 16px !important;
opacity: 1 !important;
}
.finder-page-pick--light .muted:last-of-type,
body.page-finder .finder-page-pick .muted:last-of-type {
margin-bottom: 0 !important;
}
.finder-page-pick .finder-page-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-top: 16px;
}
.finder-page-cat-card {
display: block;
padding: 16px;
text-align: center;
font-weight: 600;
color: #1a1a1a;
text-decoration: none;
border-radius: 12px;
border: 2px solid #d1d5db;
background: #fff;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.finder-page-cat-card:hover {
background: #f9fafb;
border-color: #2563eb;
box-shadow: 0 4px 12px rgba(37,99,235,.12);
color: #1a1a1a;
}
.finder-page-pick--light .finder-page-cat-card,
body.page-finder .finder-page-cat-card {
color: #1a1a1a !important;
background: #fff !important;
border-color: #d1d5db !important;
}
.finder-page-pick--light .finder-page-cat-card:hover,
body.page-finder .finder-page-cat-card:hover {
color: #1e40af !important;
background: #f9fafb !important;
}
body.page-finder .finder-actions .btn.ghost,
body.page-finder .finder-actions a.btn.ghost {
color: #1e293b !important;
border-color: #cbd5e1 !important;
background: #ffffff !important;
font-weight: 600;
}
body.page-finder .finder-actions a.btn.ghost:hover,
body.page-finder .finder-actions .btn.ghost:hover {
color: #0f172a !important;
background: #f1f5f9 !important;
border-color: #94a3b8 !important;
}
/* Unsicher blok: Finder sağında kart gibi */
#decisionHelp.decision-help{ display:none; }
body.finder-open #decisionHelp.decision-help{
display:block;
min-height:240px;
}
/* =========================================
Decision helper (Vergleich)
========================================= */
.decision-help{
margin: 10px 0 18px;
}
.decision-help-inner{
padding:14px 14px;
border-radius:16px;
background:linear-gradient(135deg, rgba(106,167,255,.14), rgba(124,92,255,.08));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.decision-help-text{
margin-bottom:10px;
font-size:.95rem;
opacity:.9;
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:baseline;
}
.decision-help-links{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.decision-help-links a{
text-decoration:none;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.92);
font-weight:600;
font-size:.9rem;
transition:.15s ease;
}
.decision-help-links a:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.14);
}
/* dh-card / dh-chip (Unsicher Finder right column) */
.dh-card{
padding:16px;
border-radius:16px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
}
.dh-title{ font-weight:700; margin-bottom:6px; }
.dh-text{ opacity:.85; margin-bottom:10px; font-size:.93rem; }
.dh-chips{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
@media (max-width: 500px){
.dh-chips{ grid-template-columns: 1fr; }
}
/* =========================================================
UNSICHER CHIP — UNIFIED STYLE (a + button identical)
========================================================= */
/* Remove native button styling first */
button.dh-chip{
appearance:none;
-webkit-appearance:none;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);
}
/* Single source of truth for all chips */
.dh-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
font-size:14px;
font-weight:500;
font-family:inherit;
line-height:1;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);
color:rgba(255,255,255,.85);
cursor:pointer;
text-decoration:none;
outline:none;
transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
will-change: transform;
}
@media (hover:hover){
.dh-chip:hover{
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.25);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.26);
}
}
.dh-chip:active{
transform: translateY(0px) scale(.98);
}
.dh-chip:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(122,92,255,.25), 0 12px 28px rgba(0,0,0,.28);
}
.dh-chip.is-active{
background: rgba(120,92,255,.22);
border-color: rgba(120,92,255,.55);
box-shadow: 0 0 0 1px rgba(120,92,255,.18), 0 12px 28px rgba(0,0,0,.30);
color: rgba(255,255,255,.95);
}
@keyframes dhPulse{
0% { transform: translateY(0) scale(1); }
45% { transform: translateY(-1px) scale(1.03); }
100% { transform: translateY(0) scale(1); }
}
.dh-chip.pulse{
animation: dhPulse .28s ease-out 1;
}
/* =========================
UNSICHER CARD – PREMIUM
========================= */
#decisionHelp .dh-card{
position: relative;
padding: 22px 24px;
border-radius: 18px;
background: linear-gradient(
135deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.04)
);
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 20px 45px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all .25s ease;
}
/* hafif hover lift */
#decisionHelp .dh-card:hover{
transform: translateY(-3px);
box-shadow:
0 28px 60px rgba(0,0,0,0.45),
0 0 0 1px rgba(124,92,255,0.35);
}
/* başlık */
#decisionHelp .dh-title{
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: rgba(255,255,255,0.95);
letter-spacing: .3px;
}
/* açıklama */
#decisionHelp .dh-text{
font-size: 14px;
color: rgba(255,255,255,0.65);
margin-bottom: 16px;
}
/* tag alanı */
#decisionHelp .dh-tags{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* tag butonlar */
#decisionHelp .dh-tag{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.85);
transition: all .18s ease;
cursor: pointer;
}
/* hover efekti */
#decisionHelp .dh-tag:hover{
background: linear-gradient(
135deg,
rgba(106,167,255,0.35),
rgba(124,92,255,0.35)
);
border-color: rgba(124,92,255,0.6);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(124,92,255,0.35);
}
/* ── Site-header: sadece pseudo-element overlay tıklamayı engellemesin ── */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
}
.site-header::before,
.site-header::after {
pointer-events: none !important;
}
/* Blur overlay için doğru pseudo-element yapısı */
.site-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.header-inner {
position: relative;
z-index: 2;
}
/* ── Nav link güvencesi: hiçbir overlay veya kural nav tıklamalarını engellemesin ── */
.desktop-nav a,
#mobileMenu a,
#authArea a {
pointer-events: auto !important;
}
/* ── Mobile menu: class-based display kontrolü (son söz burası) ── */
#mobileMenu,
.mobile-menu {
display: none !important;
pointer-events: none !important;
}
#mobileMenu.is-open,
.mobile-menu.is-open {
display: block !important;
pointer-events: auto !important;
}
/* =========================
UNSICHER CLICK FIX (HARD)
========================= */
#decisionHelp,
#decisionHelp * {
pointer-events: auto !important;
}
#decisionHelp {
position: relative;
z-index: 50;
}
#decisionHelp .dh-chip {
position: relative;
z-index: 51;
cursor: pointer;
}
#decisionHelp::before,
#decisionHelp::after,
.dh-card::before,
.dh-card::after {
pointer-events: none !important;
}
/* =========================================================
Global Breadcrumbs (#breadcrumbs / .crumbs)
========================================================= */
#breadcrumbs,
nav.crumbs[id="breadcrumbs"] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
max-width: 1120px;
margin: 10px auto 12px;
padding: 0 14px;
font-size: .88rem;
opacity: .88;
line-height: 1.4;
}
#breadcrumbs a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.18);
transition: opacity .12s;
}
#breadcrumbs a:hover {
opacity: 1;
border-bottom-color: rgba(255,255,255,.45);
}
#breadcrumbs .bc-sep {
opacity: .55;
font-size: .82rem;
user-select: none;
}
#breadcrumbs .bc-current {
opacity: .70;
}
@media (max-width: 480px) {
#breadcrumbs {
font-size: .82rem;
gap: 4px;
margin-bottom: 8px;
}
}
/* =========================================================
FINAL OVERRIDE — Header Nav + Auth (tüm sayfalar)
========================================================= */
/* Auth area: sağa yasla, kompakt */
.site-header #authArea {
margin-left: auto;
display: flex !important;
align-items: center;
gap: 8px;
justify-content: flex-end;
max-width: 280px;
flex-shrink: 0;
}
/* Tüm auth linkleri: daha küçük, minimal */
.site-header #authArea .auth-link {
min-width: 0 !important;
padding: 7px 12px !important;
border-radius: 10px !important;
font-size: .85rem !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .1px !important;
white-space: nowrap;
text-align: center;
text-decoration: none;
color: rgba(255,255,255,.88) !important;
background: rgba(255,255,255,.06) !important;
border: 1px solid rgba(255,255,255,.12) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background .15s, border-color .15s, transform .12s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-header #authArea .auth-link:hover {
background: rgba(255,255,255,.11) !important;
border-color: rgba(255,255,255,.22) !important;
transform: translateY(-1px);
}
/* Registrieren / Profil — accent */
.site-header #authArea .auth-link--primary,
.site-header #authArea .auth-link--profile,
.site-header #authArea .auth-link--accent {
background: rgba(99,102,241,.20) !important;
border-color: rgba(99,102,241,.32) !important;
color: rgba(255,255,255,.96) !important;
box-shadow: 0 2px 10px rgba(99,102,241,.18) !important;
}
.site-header #authArea .auth-link--primary:hover,
.site-header #authArea .auth-link--profile:hover,
.site-header #authArea .auth-link--accent:hover {
background: rgba(99,102,241,.30) !important;
border-color: rgba(99,102,241,.45) !important;
}
/* Abmelden — danger, ama kompakt */
.site-header #authArea .auth-link--danger,
.site-header #authArea .auth-link--logout {
background: rgba(239,68,68,.12) !important;
border-color: rgba(239,68,68,.25) !important;
color: rgba(255,160,160,.92) !important;
box-shadow: none !important;
}
.site-header #authArea .auth-link--danger:hover,
.site-header #authArea .auth-link--logout:hover {
background: rgba(239,68,68,.22) !important;
border-color: rgba(239,68,68,.40) !important;
}
/* Mobile menu: nav + auth linkleri kompakt */
#mobileMenu .mobile-link {
font-size: .95rem !important;
padding: 11px 14px !important;
}
#mobileMenu #mobileLogin,
#mobileMenu #mobileRegister,
#mobileMenu #mobileProfile,
#mobileMenu #mobileLogout {
font-size: .88rem !important;
padding: 9px 14px !important;
}
#mobileMenu #mobileLogout {
color: rgba(255,140,140,.90) !important;
}
#mobileMenu #mobileProfile,
#mobileMenu #mobileRegister {
color: rgba(160,170,255,.95) !important;
}
/* =========================================================
Home — Ratgeber Teaser (Premium)
========================================================= */
.home-ratgeber {
max-width: var(--container, 1120px);
margin: 18px auto 6px;
padding: 0 14px;
}
.home-ratgeber__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.home-ratgeber__title {
margin: 0 0 6px;
font-size: clamp(1.1rem, 2.2vw, 1.45rem);
letter-spacing: .2px;
}
.home-ratgeber__sub {
margin: 0;
color: #fff;
line-height: 1.5;
max-width: 780px;
font-size: 1rem;
font-weight: 450;
text-shadow: 0 0 20px rgba(0,0,0,.15);
}
/* Mavi-lila blur (Alle Ratgeber tarzı) – Kurze Entscheidungshilfen */
.home-ratgeber__sub--blur {
display: inline-block;
padding: 10px 16px 12px;
margin: 4px 0 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(106,167,255,.22), rgba(124,92,255,.18));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 4px 24px rgba(124,92,255,.2);
border: 1px solid rgba(124,92,255,.2);
}
/* Mavi-lila blur – section-head alt başlık ve "Alle X →" linkleri */
/* Bölüm başlıkları (Kategorien entdecken, Neue Produkte …) – turuncu badge */
.section-head h2 {
display: inline-block;
padding: 8px 14px 10px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,106,0,.28), rgba(255,106,0,.2));
border: 1px solid rgba(255,106,0,.35);
box-shadow: 0 4px 24px rgba(255,106,0,.18);
color: #ffffff;
}
.section-head .blur-bg {
display: inline-block;
padding: 8px 14px 10px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,106,0,.26), rgba(255,106,0,.18));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 4px 24px rgba(255,106,0,.2);
border: 1px solid rgba(255,106,0,.3);
}
.section-head .muted.blur-bg {
margin: 4px 0 0;
color: #ffffff;
}
.section-head .blur-bg--sub {
background: linear-gradient(135deg, rgba(255,106,0,.22), rgba(255,106,0,.16));
box-shadow: 0 4px 20px rgba(255,106,0,.2);
border-color: rgba(255,106,0,.28);
}
.section-head .link.blur-bg {
text-decoration: none;
color: #ffffff;
transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.section-head .link.blur-bg:hover {
background: linear-gradient(135deg, rgba(255,106,0,.4), rgba(255,106,0,.3));
color: #ffffff;
box-shadow: 0 6px 28px rgba(255,106,0,.3);
border-color: rgba(255,106,0,.5);
}
.home-ratgeber__all {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
border-radius: 999px;
text-decoration: none;
font-weight: 650;
font-size: .88rem;
color: var(--alpina);
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
white-space: nowrap;
transition: transform .12s ease, background .12s ease, color .12s ease;
}
.home-ratgeber__all:hover {
background: rgba(255,255,255,.16);
color: var(--text-strong);
transform: translateY(-1px);
}
/* Grid */
.home-ratgeber__grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 860px) {
.home-ratgeber__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Cards */
.rg-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 14px 12px;
border-radius: 18px;
text-decoration: none;
color: rgba(255,255,255,.94);
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 10px 28px rgba(0,0,0,.26);
min-height: 168px;
transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rg-card:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.22);
box-shadow: 0 16px 36px rgba(0,0,0,.32);
background: rgba(255,255,255,.08);
}
.rg-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.rg-badge {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
font-weight: 600;
font-size: .82rem;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.94);
}
.rg-icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
font-size: 16px;
flex-shrink: 0;
}
.rg-icon--minimal svg {
width: 20px;
height: 20px;
color: rgba(255,255,255,.88);
}
.rg-card__title {
margin: 0;
font-size: 1.05rem;
line-height: 1.2;
}
.rg-card__text {
margin: 0;
color: rgba(255,255,255,.92);
line-height: 1.45;
font-size: .9rem;
flex: 1;
}
.rg-card__cta {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: .88rem;
color: rgba(255,255,255,.98);
transition: color .15s ease;
}
.rg-card:hover .rg-card__cta {
color: #1a1a1a;
}
/* Ratgeber nach Kategorie: horizontale Karte, kompakt, yan yana */
.home-ratgeber-per-cat__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (min-width: 640px) {
.home-ratgeber-per-cat__grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
}
@media (min-width: 960px) {
.home-ratgeber-per-cat__grid {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
}
.rg-card-horizontal {
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
border-radius: 12px;
text-decoration: none;
color: inherit;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 2px 10px rgba(0,0,0,.18);
min-height: 72px;
overflow: hidden;
transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease;
}
.rg-card-horizontal:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,.18);
box-shadow: 0 4px 14px rgba(0,0,0,.24);
}
.rg-card-horizontal__img {
width: 72px;
min-width: 72px;
height: 100%;
min-height: 72px;
background: #fff;
object-fit: contain;
object-position: center;
display: block;
flex-shrink: 0;
}
@media (min-width: 640px) {
.rg-card-horizontal__img {
width: 80px;
min-width: 80px;
min-height: 80px;
}
}
@media (min-width: 960px) {
.rg-card-horizontal__img {
width: 88px;
min-width: 88px;
}
}
.rg-card-horizontal__body {
flex: 1;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.rg-card-horizontal__title {
margin: 0;
font-size: .82rem;
font-weight: 700;
line-height: 1.25;
color: rgba(255,255,255,.96);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rg-card-horizontal__cta {
margin-top: 4px;
font-size: .75rem;
font-weight: 600;
color: rgba(255,255,255,.75);
}
.rg-card-horizontal:hover .rg-card-horizontal__cta {
color: var(--accent, #0af);
}
.home-ratgeber-per-cat__footer {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.1);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
}
.home-ratgeber-per-cat__rec {
font-weight: 700;
font-size: .95rem;
color: rgba(255,255,255,.94);
}
.home-ratgeber-per-cat__tag {
font-size: .9rem;
color: rgba(255,255,255,.78);
}
/* Action row */
.home-ratgeber__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.rg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 16px;
border-radius: 14px;
text-decoration: none;
font-weight: 650;
font-size: .92rem;
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.94);
transition: transform .12s ease, opacity .12s ease;
}
.rg-btn:hover { transform: translateY(-1px); opacity: .92; }
.rg-btn--accent {
background: linear-gradient(135deg, rgba(106,167,255,.38), rgba(124,92,255,.26));
box-shadow: 0 10px 22px rgba(0,0,0,.26);
border-color: rgba(106,167,255,.28);
}
.rg-btn--ghost {
background: rgba(255,255,255,.06);
}
/* Mobile */
@media (max-width: 520px) {
.home-ratgeber__head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.home-ratgeber__all {
align-self: flex-start;
}
}
/* =========================================================
Product Card — White Image Area
========================================================= */
.product-image-wrap,
.compare-card .card-img.product-image-wrap,
a.product-image-link {
background: #ffffff !important;
border-radius: 16px;
padding: 18px;
display: flex;
align-items: center;
justify-content: center;
min-height: 220px;
margin-bottom: 12px;
/* remove old gradient/dark bg */
box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
a.product-image-link {
text-decoration: none;
color: inherit;
}
.compare-card h3 .product-card-title-link {
color: inherit;
text-decoration: none;
}
.compare-card h3 .product-card-title-link:hover {
text-decoration: underline;
}
.compare-card h3 .card-title-cat {
font-weight: 500;
opacity: .88;
font-size: .95em;
}
.product-image-wrap img,
.compare-card .card-img.product-image-wrap img {
max-width: 100%;
max-height: 180px;
height: auto;
object-fit: contain;
display: block;
/* preserve hover transform from parent */
pointer-events: none;
}
/* Hover: card moves, image stays crisp */
.compare-card:hover .card-img.product-image-wrap img {
transform: none;
}
@media (max-width: 640px) {
.product-image-wrap,
.compare-card .card-img.product-image-wrap {
min-height: 180px;
padding: 14px;
}
.compare-card .card-img.product-image-wrap img {
max-height: 150px;
}
}
/* Fix: override the fixed height so content-based height works */
.compare-card .card-img.product-image-wrap {
height: auto !important;
min-height: 220px !important;
}
@media (max-width: 640px) {
.compare-card .card-img.product-image-wrap {
min-height: 180px !important;
}
}
/* =========================================================
Detail Page — White Image Area (product-media override)
========================================================= */
/* product-media zaten bir wrapper; product-image-wrap class eklendi */
.product-media.product-image-wrap {
background: #ffffff !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 320px !important;
height: auto !important;
padding: 24px !important;
/* keep existing structure props */
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0,0,0,.07) !important;
}
.product-media.product-image-wrap .product-hero {
max-height: 300px;
max-width: 100%;
object-fit: contain;
display: block;
width: auto;
}
/* Thumb küçük görsel alanları da beyaz */
.thumb {
background: #ffffff !important;
border-color: rgba(0,0,0,.08) !important;
}
.thumb img {
object-fit: contain !important;
}
/* Detail gallery: 4 sichtbare Slots, nur anzeigen wenn Bild geladen; „Mehr Bilder“ öffnet Rest */
.detail-gallery {
margin-top: 14px;
width: 100%;
max-width: 100%;
}
.detail-gallery-visible {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
max-width: 100%;
}
.detail-gallery-slot {
border: 1px solid rgba(0,0,0,.08);
background: #ffffff;
border-radius: 10px;
padding: 6px;
cursor: pointer;
min-width: 0;
min-height: 0;
width: 0;
height: 0;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.detail-gallery-slot.loaded {
width: 68px;
height: 68px;
min-width: 68px;
min-height: 68px;
}
.detail-gallery-slot.loaded img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.detail-gallery-slot.error {
display: none !important;
}
.detail-gallery-slot:hover.loaded {
border-color: rgba(0,0,0,.18);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.detail-gallery-slot.active {
border-color: rgba(110,168,255,.55);
box-shadow: 0 0 0 2px rgba(110,168,255,.18) inset;
}
.detail-gallery-more-trigger {
margin-top: 10px;
padding: 8px 14px;
font-size: .9rem;
color: var(--link-color, #2563eb);
background: transparent;
border: 1px dashed rgba(0,0,0,.15);
border-radius: 10px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.detail-gallery-more-trigger:hover {
background: rgba(0,0,0,.04);
border-color: rgba(0,0,0,.25);
}
.detail-gallery-more-trigger .detail-gallery-more-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.detail-gallery-more {
display: none;
margin-top: 12px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.detail-gallery-more.is-open {
display: grid;
}
.detail-gallery-more .detail-gallery-slot.loaded {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
}
@media (max-width: 520px) {
.detail-gallery-visible { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-gallery-slot.loaded { width: 56px; height: 56px; min-width: 56px; min-height: 56px; }
.detail-gallery-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-gallery-more .detail-gallery-slot.loaded { width: 56px; height: 56px; min-width: 56px; min-height: 56px; }
}
@media (max-width: 900px) {
.product-media.product-image-wrap {
min-height: 240px !important;
padding: 18px !important;
}
.product-media.product-image-wrap .product-hero {
max-height: 220px;
}
}
@media (max-width: 520px) {
.product-media.product-image-wrap {
min-height: 200px !important;
padding: 14px !important;
}
.product-media.product-image-wrap .product-hero {
max-height: 180px;
}
}
/* High-specificity override for detail page */
.page.detail .product-media.product-image-wrap {
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(0,0,0,.07) !important;
cursor: pointer;
}
/* Keep hero image from stretching full-width inside flex container */
.page.detail .product-media.product-image-wrap .product-hero {
width: auto !important;
max-width: 100% !important;
max-height: 300px !important;
}
@media (max-width: 900px) {
.page.detail .product-media.product-image-wrap .product-hero {
max-height: 220px !important;
}
}
/* =========================================================
Offer button — micro disclaimer
========================================================= */
.offer-note {
display: block;
margin-top: 7px;
font-size: .72rem;
font-weight: 400;
color: rgba(255,255,255,.38);
letter-spacing: .1px;
line-height: 1;
text-align: center;
user-select: none;
}
/* =========================================================
Vergleich — related block (Ratgeber single-product)
========================================================= */
.related-block{
margin-top: 18px;
padding: 14px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
background: rgba(255,255,255,.04);
}
.related-head h2,
.related-head h3{ margin:0 0 6px 0; font-size: 1.05rem; }
.related-head h2{ font-size: 1.15rem; }
.related-head .muted{ margin:0 0 12px 0; opacity:.75; font-size:.95rem; }
.detail-crosslink-nav a{
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.detail-crosslink-nav a:hover{ opacity: .92; }
/* Internal links under Ähnliche / Alternative: eigene Zeile, nicht „unter den Karten kleben“ */
.detail-related-internal-links-footer{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(15, 23, 42, 0.1);
}
.detail-related-internal--premium .detail-crosslink-nav--footer{
color: #475569;
}
.detail-related-internal--premium .detail-crosslink-nav--footer a{
color: #0369a1;
}
.detail-related-internal--premium .detail-crosslink-nav--footer a:hover{
color: #0c4a6e;
}
.detail-crosslink-nav--footer{
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
font-size: 0.92rem;
line-height: 1.45;
}
.detail-crosslink-nav--footer .detail-crosslink-nav__sep{
opacity: 0.55;
user-select: none;
}
.detail-ratgeber-hint{
margin-top: 12px;
padding: 14px 16px;
}
.detail-ratgeber-hint__title{ font-size: 0.95rem; }
.detail-ratgeber-hint__links{
font-size: 0.95rem;
line-height: 1.45;
}
.detail-ratgeber-hint__a{
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.detail-ratgeber-hint__a:hover{ opacity: .92; }
.related-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 860px){
.related-grid{ grid-template-columns: 1fr; }
}
.related-card{
display:block;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
text-decoration:none;
color: inherit;
}
.related-card:hover{
transform: translateY(-1px);
}
.rc-title{ font-weight: 650; }
.rc-sub{ opacity:.82; margin-top: 4px; font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rc-meta{ opacity:.75; margin-top: 6px; font-size: .92rem; }
/* Detail page: related products with image (legacy / non-premium fallbacks) */
.detail-related .related-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.detail-related .related-card{ overflow: hidden; }
.detail-related .related-card-img{
aspect-ratio: 1;
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,.94);
margin-bottom: 8px;
padding: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.detail-related .related-card-img img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
@media (max-width: 560px){ .detail-related .related-grid{ grid-template-columns: repeat(2, 1fr); } }
/* —— Detail: premium internal link cards (Ähnliche / Alternative) —— */
.detail-related-internal--premium{
position: relative;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #ffffff;
box-shadow:
0 14px 40px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1);
overflow: hidden;
}
.detail-related-internal--premium::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(120% 80% at 0% 0%, rgba(56,189,248,.08), transparent 55%),
radial-gradient(100% 60% at 100% 100%, rgba(167,139,250,.06), transparent 50%);
opacity: 0;
}
.detail-related-internal--similar{ border-color: rgba(56,189,248,.22); }
.detail-related-internal--alternatives{ border-color: rgba(167,139,250,.22); }
/* Ähnliche Produkte — helle Fläche (Kontrast zu dunkler Seite) */
.page.detail section#detail-similar.card.detail-related-internal--similar,
.page.detail #detail-similar.detail-related-internal--premium.detail-related-internal--similar{
background: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow:
0 14px 40px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.page.detail #detail-similar.card.detail-related-internal--similar:hover{
border-color: rgba(15, 23, 42, 0.14) !important;
box-shadow:
0 18px 44px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.page.detail #detail-similar.detail-related-internal--premium::before{
opacity: 0;
pointer-events: none;
}
.page.detail #detail-similar .related-head--premium h2{
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
color: #0f172a !important;
}
.page.detail #detail-similar .related-head__sub{
color: #475569 !important;
}
.page.detail #detail-similar .related-head__all{
color: #0369a1 !important;
border-bottom-color: rgba(3, 105, 161, 0.35) !important;
}
.page.detail #detail-similar .related-head__all:hover{
color: #0c4a6e !important;
border-bottom-color: rgba(12, 74, 110, 0.45) !important;
}
.page.detail #detail-similar .related-card--premium{
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07) !important;
color: #0f172a;
}
.page.detail #detail-similar .related-card--premium:hover{
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(56, 189, 248, 0.12) !important;
}
.page.detail #detail-similar .related-card-img,
.page.detail #detail-similar.detail-related-internal--premium .related-card-img{
background: #ffffff !important;
}
.page.detail #detail-similar .related-card__rating-badge{
background: rgba(255, 255, 255, 0.95) !important;
color: #0f172a !important;
border: 1px solid rgba(251, 191, 36, 0.45) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
}
.page.detail #detail-similar .related-card__eyebrow{
color: #64748b !important;
}
.page.detail #detail-similar .related-card__title{
color: #0f172a !important;
}
.page.detail #detail-similar .related-card__sub{
color: #475569 !important;
}
.page.detail #detail-similar .related-card__price-row{
border-top-color: rgba(15, 23, 42, 0.1) !important;
}
.page.detail #detail-similar .related-card__price{
color: #0369a1 !important;
}
@media (max-width: 768px){
.page.detail #detail-similar.detail-related-internal--premium .related-grid--premium{
scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}
}
/* Alternative Modelle — gleiche helle Fläche wie Ähnliche (violette Akzente) */
.page.detail section#detail-alternatives.card.detail-related-internal--alternatives,
.page.detail #detail-alternatives.detail-related-internal--premium.detail-related-internal--alternatives{
background: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow:
0 14px 40px rgba(15, 23, 42, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.page.detail #detail-alternatives.card.detail-related-internal--alternatives:hover{
border-color: rgba(15, 23, 42, 0.14) !important;
box-shadow:
0 18px 44px rgba(15, 23, 42, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.page.detail #detail-alternatives.detail-related-internal--premium::before{
opacity: 0;
pointer-events: none;
}
.page.detail #detail-alternatives .related-head--premium h2{
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
color: #0f172a !important;
}
.page.detail #detail-alternatives .related-head__sub{
color: #475569 !important;
}
.page.detail #detail-alternatives .related-head__all{
color: #6d28d9 !important;
border-bottom-color: rgba(109, 40, 217, 0.35) !important;
}
.page.detail #detail-alternatives .related-head__all:hover{
color: #5b21b6 !important;
border-bottom-color: rgba(91, 33, 182, 0.5) !important;
}
.page.detail #detail-alternatives .related-card--premium{
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07) !important;
color: #0f172a;
}
.page.detail #detail-alternatives .related-card--premium:hover,
.page.detail #detail-alternatives .related-card--premium.related-card--kind-alt:hover{
border-color: rgba(167, 139, 250, 0.55) !important;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(167, 139, 250, 0.2) !important;
}
.page.detail #detail-alternatives .related-card-img,
.page.detail #detail-alternatives.detail-related-internal--premium .related-card-img{
background: #ffffff !important;
}
.page.detail #detail-alternatives .related-card__rating-badge{
background: rgba(255, 255, 255, 0.95) !important;
color: #0f172a !important;
border: 1px solid rgba(251, 191, 36, 0.45) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1) !important;
}
.page.detail #detail-alternatives .related-card__eyebrow{
color: #64748b !important;
}
.page.detail #detail-alternatives .related-card__title{
color: #0f172a !important;
}
.page.detail #detail-alternatives .related-card__sub{
color: #475569 !important;
}
.page.detail #detail-alternatives .related-card__price-row{
border-top-color: rgba(15, 23, 42, 0.1) !important;
}
.page.detail #detail-alternatives .related-card__price{
color: #6d28d9 !important;
}
.page.detail #detail-alternatives .related-card--kind-alt .related-card__price{
color: #6d28d9 !important;
}
.page.detail #detail-alternatives .detail-alt-pill{
color: #5b21b6 !important;
background: rgba(237, 233, 254, 0.95) !important;
border: 1px solid rgba(167, 139, 250, 0.45) !important;
}
@media (max-width: 768px){
.page.detail #detail-alternatives.detail-related-internal--premium .related-grid--premium{
scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}
}
.related-head--premium{
position: relative;
z-index: 1;
margin-bottom: 4px;
}
.related-head__row{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 10px 16px;
}
.related-head--premium h2{
margin: 0;
font-size: clamp(1.2rem, 2.5vw, 1.45rem);
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.2;
background: none;
-webkit-background-clip: unset;
background-clip: unset;
color: #0f172a;
}
.detail-related-internal--alternatives .related-head--premium h2{
background: none;
-webkit-background-clip: unset;
background-clip: unset;
color: #0f172a;
}
.detail-related-internal--premium .related-head__sub{
color: #475569;
}
.related-head__sub{
margin: 8px 0 0 0;
font-size: .94rem;
line-height: 1.45;
max-width: 52ch;
}
.related-head__all{
font-size: .88rem;
font-weight: 600;
text-decoration: none;
color: #0369a1;
white-space: nowrap;
border-bottom: 1px solid rgba(3, 105, 161, 0.35);
padding-bottom: 1px;
transition: color .2s, border-color .2s, transform .2s;
}
.related-head__all:hover{
color: #0c4a6e;
border-bottom-color: rgba(12, 74, 110, 0.45);
}
.detail-related-internal--alternatives .related-head__all{
color: #6d28d9;
border-bottom-color: rgba(109, 40, 217, 0.35);
}
.detail-related-internal--alternatives .related-head__all:hover{
color: #5b21b6;
border-bottom-color: rgba(91, 33, 182, 0.45);
}
.related-grid--premium{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
gap: 16px;
margin-top: 16px;
}
/* Mobil: Ähnliche / Alternative — yatay kaydırma */
@media (max-width: 768px){
.detail-related-internal--premium .related-grid--premium{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 12px;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
}
.detail-related-internal--premium .related-grid--premium > .related-card--premium{
flex: 0 0 min(76vw, 268px);
width: min(76vw, 268px);
max-width: 268px;
scroll-snap-align: start;
}
.detail-related-internal--premium .related-grid--premium.related-grid--alt > .detail-alt-wrap--premium{
flex: 0 0 min(76vw, 268px);
width: min(76vw, 268px);
max-width: 268px;
scroll-snap-align: start;
}
}
.detail-related-internal--premium .related-card--premium{
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
border-radius: 18px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: #ffffff;
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
overflow: hidden;
text-decoration: none;
color: #0f172a;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s, border-color .25s;
}
.detail-related-internal--premium .related-card__shine{
position: absolute;
inset: 0;
background: linear-gradient(125deg, transparent 40%, rgba(15,23,42,.04) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform .6s ease;
pointer-events: none;
}
.detail-related-internal--premium .related-card--premium:hover{
transform: translateY(-4px) scale(1.01);
border-color: rgba(56,189,248,.45);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(56, 189, 248, 0.12);
}
.detail-related-internal--premium .related-card--premium:hover .related-card__shine{
transform: translateX(100%);
}
.detail-related-internal--premium .related-card--kind-alt:hover{
border-color: rgba(167,139,250,.5);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(167, 139, 250, 0.15);
}
.detail-related-internal--premium .related-card__media{
position: relative;
margin: 0;
}
.detail-related-internal--premium .related-card-img{
aspect-ratio: 1;
border-radius: 0;
margin: 0;
padding: 14px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.detail-related-internal--premium .related-card-img img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
display: block;
transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.detail-related-internal--premium .related-card--premium:hover .related-card-img img{
transform: scale(1.06);
}
.detail-related-internal--premium .related-card__rating-badge{
position: absolute;
top: 10px;
right: 10px;
padding: 4px 9px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .02em;
border-radius: 999px;
background: rgba(255, 255, 255, 0.95);
color: #0f172a;
border: 1px solid rgba(251,191,36,.45);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(8px);
}
.detail-related-internal--premium .related-card__body{
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.detail-related-internal--premium .related-card__eyebrow{
font-size: .68rem;
font-weight: 650;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
}
.detail-related-internal--premium .related-card__title{
font-size: .92rem;
font-weight: 680;
line-height: 1.35;
letter-spacing: -0.01em;
color: #0f172a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.detail-related-internal--premium .related-card__sub{
font-size: .8rem;
line-height: 1.4;
color: #475569;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.detail-related-internal--premium .related-card__price-row{
margin-top: auto;
padding-top: 8px;
border-top: 1px solid rgba(15, 23, 42, 0.1);
}
.detail-related-internal--premium .related-card__price{
font-size: 1.05rem;
font-weight: 750;
letter-spacing: -0.02em;
color: #0369a1;
font-variant-numeric: tabular-nums;
}
.detail-related-internal--premium .related-card--kind-alt .related-card__price{
color: #6d28d9;
}
.detail-related-internal .related-grid--alt{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
gap: 16px;
}
.detail-alt-wrap{ min-width: 0; }
.detail-alt-wrap--premium{
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-alt-pill{
display: inline-block;
align-self: flex-start;
margin: 0;
padding: 4px 10px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 999px;
color: rgba(233,213,255,.95);
background: rgba(88,28,135,.45);
border: 1px solid rgba(167,139,250,.35);
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
@media (max-width: 768px){
.detail-related-internal--premium .related-grid--premium.related-grid--alt{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
}
@media (max-width: 560px){
.detail-related-internal .related-grid--alt:not(.related-grid--premium){
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce){
.detail-related-internal--premium .related-card--premium,
.detail-related-internal--premium .related-card--premium:hover,
.detail-related-internal--premium .related-card-img img,
.detail-related-internal--premium .related-card__shine{
transition: none !important;
transform: none !important;
}
}
/* =========================================================
Detail — Community section (full width): Erfahrungen & Diskussion
========================================================= */
.community-section-full {
width: 100%;
margin-top: 80px;
padding: 80px 0;
background: #f8f9fb;
}
body.page-detail .community-section-full { margin-top: 60px; padding: 60px 0; }
.community-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.community-section-full .community-head {
text-align: center;
margin-bottom: 32px;
}
.community-section-full .community-head h2 {
margin: 0 0 8px;
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
}
.community-section-full .community-head .community-sub {
margin: 0;
font-size: 1rem;
color: #555;
}
/* Nutzer-Tipps */
.community-tipps h3 {
margin: 0 0 8px;
font-size: 1.1rem;
font-weight: 600;
color: #333;
}
.community-tipps .community-tipps-cta {
margin: 0 0 12px;
font-size: 0.95rem;
color: #555;
}
.community-tipps .community-share-experience-btn {
display: inline-block;
margin-left: 8px;
padding: 6px 14px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
background: #1e293b;
color: #fff;
text-decoration: none;
transition: background .2s;
}
.community-tipps .community-share-experience-btn:hover {
background: #334155;
color: #fff;
}
.community-tipps .community-tipps-count {
margin: 0 0 16px;
font-size: 0.95rem;
color: #666;
}
.community-tipps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 600px) {
.community-tipps-grid { grid-template-columns: 1fr; }
}
.community-tipp-card {
background: #fff;
border-radius: 14px;
padding: 22px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
display: flex;
flex-direction: column;
gap: 12px;
}
.community-tipp-card .tipp-card-header {
display: flex;
align-items: center;
gap: 10px;
}
.community-tipp-card .tipp-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
object-fit: cover;
}
.community-tipp-card .tipp-user { font-weight: 600; font-size: 0.95rem; color: #1a1a1a; }
.community-tipp-card .tipp-title { font-weight: 600; font-size: 1rem; color: #333; margin: 0; line-height: 1.3; }
.community-tipp-card .tipp-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
color: #555;
margin: 0;
}
.community-tipp-card .tipp-excerpt {
font-size: 0.9rem;
color: #555;
margin: 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.community-tipp-card .tipp-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.community-tipp-card .tipp-helpful { font-size: 0.85rem; color: #666; }
.community-tipp-card .tipp-read-btn {
display: inline-block;
padding: 8px 14px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 500;
background: #1e293b;
color: #fff;
border: none;
text-decoration: none;
cursor: pointer;
transition: background .2s;
}
.community-tipp-card .tipp-read-btn:hover { background: #334155; color: #fff; }
.community-all-tipps-btn {
display: inline-block;
padding: 10px 18px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
background: transparent;
color: #1e293b;
border: 1px solid #1e293b;
text-decoration: none;
cursor: pointer;
transition: background .2s, color .2s;
}
.community-all-tipps-btn:hover { background: #1e293b; color: #fff; }
/* Diskussion */
.community-comments {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid #e5e7eb;
}
.community-comments h3 {
margin: 0 0 16px;
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.community-comment-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 20px;
}
.community-comment-item {
background: #fff;
border-radius: 12px;
padding: 14px;
border: 1px solid #e5e7eb;
display: flex;
gap: 12px;
align-items: flex-start;
}
.community-comment-item .comment-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #e5e7eb;
object-fit: cover;
flex-shrink: 0;
}
.community-comment-item .comment-body { flex: 1; min-width: 0; }
.community-comment-item .comment-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 0.9rem;
}
.community-comment-item .comment-user { font-weight: 600; color: #1a1a1a; }
.community-comment-item .comment-time { color: #888; font-size: 0.85rem; }
.community-comment-item .comment-text {
margin: 0;
font-size: 0.95rem;
color: #333;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.community-comment-form {
margin-top: 16px;
}
.community-comment-form textarea {
width: 100%;
min-height: 100px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e5e7eb;
font-size: 0.95rem;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.community-comment-form textarea:focus {
outline: none;
border-color: #1e293b;
box-shadow: 0 0 0 3px rgba(30,41,59,.15);
}
.community-comment-form .comment-submit-btn {
margin-top: 10px;
padding: 10px 18px;
border-radius: 10px;
font-size: 0.95rem;
font-weight: 500;
background: #1e293b;
color: #fff;
border: none;
cursor: pointer;
transition: background .2s;
}
.community-comment-form .comment-submit-btn:hover { background: #334155; }
.community-comment-form .comment-login-hint {
margin-top: 10px;
font-size: 0.9rem;
color: #666;
}
.community-comment-form .comment-login-hint a { color: #1e293b; }
/* Andere Nutzer haben auch angesehen */
.community-related {
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid #e5e7eb;
}
.community-related h3 {
margin: 0 0 16px;
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.community-related .community-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 640px) {
.community-related .community-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
.community-related .community-related-grid { grid-template-columns: 1fr; }
}
.community-related .community-related-card {
display: block;
background: #fff;
border-radius: 14px;
padding: 12px;
border: 1px solid #e5e7eb;
text-decoration: none;
color: inherit;
transition: transform .15s, box-shadow .15s;
}
.community-related .community-related-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
color: inherit;
}
.community-related .community-related-card .related-card-img {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 10px;
overflow: hidden;
background: #e5e7eb;
margin-bottom: 8px;
}
/* HTML width/height + diğer object-fit kurallarını ez – görsel çerçeveyi tam doldursun */
.community-related .community-related-card .related-card-img img,
.community-related .community-related-card .related-card-img img.card-img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center;
display: block;
}
.community-related .community-related-card .rc-title {
font-weight: 600;
font-size: 0.95rem;
color: #1a1a1a;
}
.community-related .community-related-card .rc-meta {
font-size: 0.85rem;
color: #666;
margin-top: 4px;
}
/* =========================================================
Detail Zoom Overlay (theyr style lightbox – sadece detail sayfası)
========================================================= */
.zoom-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
}
.zoom-overlay:not(.is-open) {
pointer-events: none;
visibility: hidden;
opacity: 0;
display: none;
}
.zoom-overlay.is-open {
pointer-events: auto;
visibility: visible;
opacity: 1;
display: flex;
}
.zoom-overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
}
.zoom-modal {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 96vw;
max-height: 92vh;
pointer-events: auto;
}
.zoom-modal-img {
max-width: 92vw;
max-height: 86vh;
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.zoom-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 48px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255,255,255,.2);
color: rgba(255,255,255,.98);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, transform .15s ease;
}
.zoom-arrow:hover {
background: rgba(255,255,255,.35);
transform: translateY(-50%) scale(1.05);
}
.zoom-arrow:focus {
outline: 2px solid rgba(255,255,255,.6);
outline-offset: 2px;
}
.zoom-prev { left: -56px; }
.zoom-next { right: -56px; }
@media (max-width: 700px) {
.zoom-prev { left: 8px; }
.zoom-next { right: 8px; }
.zoom-arrow { width: 44px; height: 44px; font-size: 1.5rem; background: rgba(0,0,0,.4); }
}
.zoom-close {
position: absolute;
top: -44px;
right: 0;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 8px;
background: rgba(255,255,255,.15);
color: rgba(255,255,255,.95);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s ease;
}
/* =========================================================
Detail Resource Viewer Overlay (Energie/PDF/Galerie)
========================================================= */
.resource-viewer-overlay{
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: stretch;
justify-content: flex-start;
padding: 0;
box-sizing: border-box;
}
.resource-viewer-overlay:not(.is-open){
pointer-events: none;
visibility: hidden;
opacity: 0;
display: none;
}
.resource-viewer-overlay.is-open{
pointer-events: auto;
visibility: visible;
opacity: 1;
display: flex;
}
.resource-viewer-backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
}
.resource-viewer-panel{
position: relative;
z-index: 1;
width: min(560px, 94vw);
height: 100vh;
max-height: 100vh;
background: rgba(15,18,32,0.72);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 0 16px 16px 0;
overflow: hidden;
box-shadow: 0 24px 48px rgba(0,0,0,.5);
display: flex;
flex-direction: column;
transform: translateX(-24px);
transition: transform .18s ease;
}
.resource-viewer-overlay.is-open .resource-viewer-panel{
transform: translateX(0);
}
.resource-viewer-close{
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.10);
color: rgba(255,255,255,.95);
cursor: pointer;
font-size: 1.6rem;
line-height: 1;
}
.resource-viewer-title{
padding: 16px 54px 10px 18px;
font-weight: 800;
letter-spacing: .1px;
color: #fff;
}
.resource-viewer-tabs{
display:flex;
align-items:center;
gap:8px;
padding: 12px 14px 8px 14px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.resource-viewer-tab{
appearance:none;
-webkit-appearance:none;
border:1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.08);
color:#fff;
border-radius: 10px;
padding: 8px 12px;
cursor:pointer;
font-weight:700;
}
.resource-viewer-tab.is-active{
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.28);
}
.resource-viewer-body{
padding: 0 12px 12px 12px;
overflow: auto;
flex: 1;
}
.resource-viewer-body img{
width: 100%;
max-height: 84vh;
object-fit: contain;
display: block;
border-radius: 12px;
background: rgba(255,255,255,0.03);
}
.resource-viewer-body .resource-viewer-pa{
padding: 10px 8px 16px;
color: rgba(255, 255, 255, 0.93);
}
.resource-viewer-body .resource-viewer-pa-text{
margin: 0;
font-size: 0.95rem;
line-height: 1.58;
}
.resource-viewer-body .resource-viewer-pa-text--muted{
color: rgba(255, 255, 255, 0.78);
margin-bottom: 10px;
}
.resource-viewer-body .resource-viewer-pa--stack{
display: flex;
flex-direction: column;
gap: 18px;
}
.resource-viewer-body .resource-viewer-pa-labelbox{
align-self: flex-start;
padding: 10px 12px;
border-radius: 6px;
background: #fff;
border: 1.5px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.resource-viewer-body .resource-viewer-pa-labelbox .detail-charger-otto__glyph-line{
color: #111;
}
.resource-viewer-body .resource-viewer-pa-specs .detail-charger-otto__spec-row dt{
color: rgba(255, 255, 255, 0.95);
}
.resource-viewer-body .resource-viewer-pa-specs .detail-charger-otto__spec-row dd{
color: rgba(255, 255, 255, 0.82);
}
.resource-viewer-body .resource-viewer-pa-legacy{
font-size: 0.92rem;
font-weight: 600;
line-height: 1.45;
color: rgba(255, 255, 255, 0.9);
}
.resource-viewer-body .resource-viewer-empty{
padding: 16px;
margin: 0;
}
.resource-viewer-body iframe{
width: 100%;
height: 84vh;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
background: #fff;
}
.resource-viewer-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.14);
color: rgba(255,255,255,.98);
cursor: pointer;
z-index: 2;
font-size: 2rem;
display:flex;
align-items:center;
justify-content:center;
}
.resource-viewer-prev{ left: 16px; }
.resource-viewer-next{ right: 16px; }
@media (max-width: 700px){
.resource-viewer-panel{
border-radius: 14px;
}
.resource-viewer-arrow{
width: 44px;
height: 44px;
font-size: 1.7rem;
}
.resource-viewer-prev{ left: 8px; }
.resource-viewer-next{ right: 8px; }
.resource-viewer-close{
top: 8px;
right: 8px;
}
}
.zoom-close:hover {
background: rgba(255,255,255,.25);
}
.zoom-close:focus {
outline: 2px solid rgba(255,255,255,.5);
outline-offset: 2px;
}
/* Detail hero image: tıklanabilir (zoom) */
.page.detail #heroImg,
.page.detail .product-media.product-image-wrap .product-hero {
cursor: pointer;
}
/* Zoom ipucu – hero alanında */
.page.detail .product-media.product-image-wrap {
position: relative;
flex-direction: column;
align-items: stretch;
}
.zoom-hint {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.5);
white-space: nowrap;
pointer-events: none;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
/* Kurz-Specs als Badge-Reihe unter dem Produktbild (Wert fett, Label darunter) */
.detail-spec-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 14px 16px 16px;
background: #f5f5f5;
border-radius: 0 0 16px 16px;
margin-top: 0;
}
.detail-spec-badge {
flex: 1 1 0;
min-width: 0;
max-width: 160px;
padding: 10px 12px;
background: #fff;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
overflow: hidden;
}
.detail-spec-badge-value {
font-weight: 700;
font-size: 0.9rem;
line-height: 1.25;
color: #111;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
.detail-spec-badge-label {
font-size: 0.75rem;
color: #666;
line-height: 1.25;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
}
/* Mobil: Spec-Badges alt alta tek sütun (detail sayfası) */
@media (max-width: 768px) {
.detail-spec-badges {
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-right: 8px;
}
.detail-spec-badge {
flex: 0 0 calc((100% - 16px) / 3);
max-width: calc((100% - 16px) / 3);
min-width: calc((100% - 16px) / 3);
width: calc((100% - 16px) / 3);
}
}
/* Ladegerät-Hinweis: nicht im Lieferumfang (durchgestrichen) + empfohlenes Netzteil – auf dunklem Hero lesbar */
.detail-power-adapter {
display: flex;
align-items: center;
gap: 20px;
margin-top: 14px;
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.detail-power-adapter-item {
display: flex;
align-items: center;
gap: 10px;
}
.detail-power-adapter-icon {
display: inline-flex;
color: rgba(255, 255, 255, 0.75);
}
.detail-power-adapter--not-included {
position: relative;
}
.detail-power-adapter--not-included .detail-power-adapter-icon {
color: rgba(255, 255, 255, 0.5);
}
.detail-power-adapter-no-line {
position: absolute;
left: 0;
top: 50%;
width: 63px;
height: 3px;
background: #f87171;
transform: translateY(-50%) rotate(-45deg);
transform-origin: center;
pointer-events: none;
}
.detail-power-adapter--recommended .detail-power-adapter-icon {
color: rgba(255, 255, 255, 0.9);
}
.detail-power-adapter-text {
font-size: 0.85rem;
font-weight: 600;
line-height: 1.35;
color: rgba(255, 255, 255, 0.95);
}
.detail-power-adapter-text br + * { margin-top: 2px; }
/* Ladegerät / Umwelt Hinweis (Amazon-ähnlicher Informationsblock, z. B. kein Netzteil + USB-PD) */
.detail-charger-notice {
margin-top: 16px;
padding: 16px 16px 18px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.detail-charger-notice__tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 999px;
color: rgba(147, 197, 253, 0.95);
border: 1px solid rgba(96, 165, 250, 0.45);
background: rgba(30, 58, 138, 0.25);
margin-bottom: 10px;
}
.detail-charger-notice__headline {
margin: 0 0 14px;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.35;
color: rgba(248, 250, 252, 0.96);
}
.detail-charger-notice__body {
display: flex;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.detail-charger-notice__visual {
position: relative;
flex: 0 0 auto;
width: 52px;
min-height: 56px;
color: rgba(248, 250, 252, 0.82);
display: flex;
align-items: center;
justify-content: center;
}
.detail-charger-notice__img {
width: 52px;
height: auto;
max-height: 72px;
object-fit: contain;
display: block;
}
.detail-charger-notice__svg-plug {
display: block;
}
.detail-charger-notice__glyph-overlay {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
width: 26px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
text-align: center;
pointer-events: none;
line-height: 1.05;
}
.detail-charger-notice__glyph-line {
font-size: 0.54rem;
font-weight: 700;
color: rgba(248, 250, 252, 0.94);
letter-spacing: -0.02em;
}
.detail-charger-notice__copy {
flex: 1;
min-width: 0;
}
.detail-charger-notice__intro {
margin: 0 0 10px;
font-size: 0.84rem;
line-height: 1.45;
color: rgba(248, 250, 252, 0.82);
}
.detail-charger-notice__specs {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-charger-notice__spec-row {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: baseline;
font-size: 0.84rem;
line-height: 1.35;
}
.detail-charger-notice__spec-row dt {
margin: 0;
font-weight: 700;
color: rgba(248, 250, 252, 0.92);
}
.detail-charger-notice__spec-row dd {
margin: 0;
color: rgba(248, 250, 252, 0.78);
}
.detail-charger-notice__legacy {
margin-top: 8px;
font-size: 0.84rem;
font-weight: 600;
line-height: 1.4;
color: rgba(248, 250, 252, 0.9);
}
/* Otto-ähnlicher Netzteil-Block (helle Karte auf dunklem Grund) */
.detail-charger-otto {
margin-top: 8px;
padding: 9px 10px 10px;
border-radius: 8px;
background: #fff;
color: #1a1a1a;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.06);
max-width: 100%;
}
.detail-charger-otto__title {
margin: 0 0 3px;
font-size: 0.82rem;
font-weight: 700;
color: #111;
letter-spacing: -0.01em;
}
.detail-charger-otto__hint {
margin: 0 0 6px;
font-size: 0.62rem;
line-height: 1.28;
color: #666;
}
.detail-charger-otto__icons-row {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 4px;
flex-wrap: wrap;
}
.detail-charger-otto__icon-btn {
display: block;
margin: 0;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: 6px;
line-height: 0;
font: inherit;
color: inherit;
}
.detail-charger-otto__icon-btn:hover {
background: rgba(0, 0, 0, 0.06);
}
.detail-charger-otto__icon-btn:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 1px;
}
.detail-charger-otto__crossed-wrap--sm {
width: 24px;
height: 29px;
}
.detail-charger-otto__label-box--sm {
width: 40px;
min-height: 48px;
padding: 2px 2px 3px;
border-width: 1px;
border-radius: 3px;
}
.detail-charger-otto__label-box--sm .detail-charger-otto__plug-sm {
width: 15px;
}
.detail-charger-otto__label-box--sm .detail-charger-otto__glyph-line {
font-size: 0.36rem;
letter-spacing: -0.04em;
}
.detail-charger-otto__label-box--sm .detail-charger-otto__box-img {
max-height: 36px;
}
.detail-charger-otto__row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 16px;
}
.detail-charger-otto__row + .detail-charger-otto__row {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e8e8e8;
}
.detail-charger-otto__cell--icon {
flex: 0 0 auto;
}
.detail-charger-otto__cell--text {
flex: 1;
min-width: 0;
}
.detail-charger-otto__p {
margin: 0;
font-size: 0.9rem;
line-height: 1.52;
color: #222;
}
.detail-charger-otto__p--secondary {
color: #444;
margin-bottom: 10px;
}
.detail-charger-otto__crossed-wrap {
position: relative;
width: 44px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.detail-charger-otto__plug-lg {
display: block;
}
.detail-charger-otto__cross-x {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.detail-charger-otto__label-box {
width: 76px;
min-height: 92px;
padding: 8px 6px 10px;
border: 1.5px solid #222;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-sizing: border-box;
}
.detail-charger-otto__box-img {
max-width: 100%;
max-height: 76px;
object-fit: contain;
display: block;
}
.detail-charger-otto__box-stack {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 2px;
text-align: center;
}
.detail-charger-otto__plug-sm {
display: block;
width: 28px;
height: auto;
flex-shrink: 0;
}
.detail-charger-otto__glyph-stack {
line-height: 1.08;
margin-top: 1px;
}
.detail-charger-otto__glyph-line {
display: block;
font-size: 0.58rem;
font-weight: 700;
color: #111;
letter-spacing: -0.02em;
}
.detail-charger-otto__specs {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-charger-otto__spec-row {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: baseline;
font-size: 0.88rem;
line-height: 1.4;
}
.detail-charger-otto__spec-row dt {
margin: 0;
font-weight: 700;
color: #111;
}
.detail-charger-otto__spec-row dd {
margin: 0;
color: #333;
}
.detail-charger-otto__legacy {
margin-top: 6px;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.45;
color: #222;
}
@media (max-width: 520px) {
.detail-charger-otto {
padding: 8px 9px 9px;
}
.detail-charger-otto__row {
gap: 12px;
}
.detail-charger-otto__label-box {
width: 68px;
min-height: 84px;
}
}
/* Offer / Merchant cards – Detail (Karar-Panel, Premium-Karten) */
.offer-cards-section{ margin-top:18px; }
.offer-cards-wrap.offer-cards-wrap--enhanced{
display:flex;
flex-direction:column;
gap:18px;
align-items:stretch;
}
.offer-cards-section__intro{
padding: 0 2px;
}
.offer-cards-section__title{
margin:0 0 6px 0;
font-size:1.15rem;
font-weight:800;
letter-spacing:-0.02em;
color: rgba(248, 250, 252, 0.96);
}
.offer-cards-section__sub{
margin:0;
font-size:0.92rem;
line-height:1.45;
color: rgba(148, 163, 184, 0.95);
max-width:52ch;
}
.offer-cards-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap:16px;
align-items:stretch;
}
.offer-cards-wrap:not(.offer-cards-wrap--enhanced){
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
align-items:stretch;
}
.offer-card{
position:relative;
display:flex;
flex-direction:column;
align-items:stretch;
padding:18px 18px 16px;
border-radius:18px;
background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
border:1px solid rgba(15, 23, 42, 0.1);
box-shadow:
0 1px 0 rgba(255,255,255,0.75) inset,
0 10px 36px rgba(15, 23, 42, 0.08);
min-height:0;
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
overflow:hidden;
}
.offer-card__accent{
position:absolute;
top:0;
left:0;
right:0;
height:3px;
background: linear-gradient(90deg, rgba(255, 106, 0, 0.15), rgba(124, 92, 255, 0.12));
opacity:0;
transition: opacity 0.2s ease;
}
.offer-card--best .offer-card__accent{
opacity:1;
background: linear-gradient(90deg, var(--orange), rgba(255, 160, 90, 0.95));
}
.offer-card:hover{
transform: translateY(-3px);
border-color: rgba(255, 106, 0, 0.28);
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 16px 44px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(255, 106, 0, 0.08);
}
.offer-card--best{
border-color: rgba(255, 106, 0, 0.42);
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 14px 48px rgba(255, 106, 0, 0.14),
0 0 0 1px rgba(255, 106, 0, 0.12);
}
.offer-card--best:hover{
border-color: rgba(255, 106, 0, 0.55);
}
.offer-card--trust-2{
opacity:0.96;
background: linear-gradient(165deg, #fafafa 0%, #f1f5f9 100%);
}
.offer-card__header{
display:flex;
align-items:flex-start;
gap:12px;
margin-bottom:10px;
}
.offer-card__logo{
width:48px;
height:48px;
min-width:48px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.07);
}
.offer-card__logo img{
width:40px !important;
height:40px !important;
max-width:40px !important;
max-height:40px !important;
object-fit:contain;
display:block;
}
.offer-card__merchant-block{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
}
.offer-card__merchant-name{
font-size:0.98rem;
font-weight:800;
color:#0f172a;
line-height:1.25;
word-break:break-word;
}
.offer-card__variant{
margin:0 0 8px 0;
font-size:0.82rem;
font-weight:650;
color:#334155;
line-height:1.35;
}
.offer-card__notes{
margin:0 0 10px 1rem;
padding:0;
font-size:0.78rem;
color:#b45309;
line-height:1.35;
}
.offer-card__price-row{
margin:4px 0 6px;
}
.offer-card__price{
font-size:1.65rem;
font-weight:900;
line-height:1.1;
color:#0a0f1a;
letter-spacing:-0.03em;
}
.offer-card__shipping{
margin:0;
font-size:0.82rem;
color:#64748b;
line-height:1.4;
}
.offer-card__total{
margin:8px 0 0 0;
font-size:0.95rem;
font-weight:800;
color:#0f172a;
line-height:1.35;
}
.offer-card__total-label{
font-weight:650;
color:#64748b;
margin-right:4px;
font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.04em;
}
.offer-card__savings{
margin:10px 0 0 0;
font-size:0.82rem;
font-weight:750;
color:#0d9488;
line-height:1.35;
}
.offer-card__insight{
margin:8px 0 0 0;
font-size:0.8rem;
font-weight:650;
color:#0f766e;
line-height:1.35;
}
.offer-card__insight--muted{
color:#64748b;
font-weight:600;
}
.offer-card__diff{
margin:6px 0 0 0;
font-size:0.78rem;
font-weight:650;
color:#94a3b8;
}
.offer-card__trust-hint{
margin:8px 0 0 0;
font-size:0.76rem;
line-height:1.4;
color:#94a3b8;
}
.offer-card__cta{
margin-top:auto;
padding-top:14px;
}
.offer-button{
display:flex;
width:100%;
align-items:center;
justify-content:center;
padding:12px 14px;
border-radius:14px;
background: linear-gradient(135deg, var(--orange), rgba(255, 140, 85, 1));
color:#fff !important;
text-decoration:none;
font-weight:900;
font-size:13px;
box-shadow: 0 10px 22px rgba(255, 106, 0, 0.22);
border: 1px solid rgba(255, 106, 0, 0.35);
transition: opacity 0.15s ease, transform 0.12s ease;
}
.offer-button:hover{
color:#fff !important;
opacity:0.98;
transform: translateY(-1px);
}
/* Angebots-Karte: Schlange am Kartenrand (SVG) */
.offer-button__label{
display: inline-block;
max-width: 100%;
text-align: center;
}
.offer-card--snake{
position: relative;
overflow: visible;
}
.offer-card--snake > *:not(.offer-card__snake){
position: relative;
z-index: 2;
}
.offer-card__snake{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: visible;
}
.offer-card__snake-ring{
stroke-dasharray: 14 86;
stroke-dashoffset: 0;
opacity: 0;
transition: opacity 0.2s ease;
animation: offer-card-snake-trail 2.65s linear infinite;
animation-play-state: paused;
}
.offer-card__snake-ring--lag{
stroke-dasharray: 14 86;
stroke-dashoffset: -50;
animation: offer-card-snake-trail-lag 2.65s linear infinite;
animation-play-state: paused;
}
.offer-card--snake:hover .offer-card__snake-ring,
.offer-card--snake:focus-within .offer-card__snake-ring,
.offer-card--snake:active .offer-card__snake-ring{
opacity: 1;
animation-play-state: running;
}
.offer-card--snake:hover .offer-card__snake-ring--lag,
.offer-card--snake:focus-within .offer-card__snake-ring--lag,
.offer-card--snake:active .offer-card__snake-ring--lag{
opacity: 1;
animation-play-state: running;
}
@keyframes offer-card-snake-trail{
to{
stroke-dashoffset: -100;
}
}
@keyframes offer-card-snake-trail-lag{
to{
stroke-dashoffset: -150;
}
}
@media (prefers-reduced-motion: reduce){
.offer-card__snake-ring,
.offer-card__snake-ring--lag{
animation: none !important;
}
.offer-card--snake:hover .offer-card__snake-ring,
.offer-card--snake:focus-within .offer-card__snake-ring,
.offer-card--snake:hover .offer-card__snake-ring--lag,
.offer-card--snake:focus-within .offer-card__snake-ring--lag{
opacity: 0.45;
}
}
.offer-best-badge{
display:inline-flex;
align-items:center;
align-self:flex-start;
font-size:10px;
font-weight:900;
letter-spacing:0.06em;
text-transform:uppercase;
padding:5px 9px;
border-radius:999px;
background: linear-gradient(135deg, rgba(255, 237, 213, 1), rgba(255, 220, 180, 0.95));
border: 1px solid rgba(255, 106, 0, 0.4);
color: rgba(124, 45, 8, 0.98);
box-shadow: 0 2px 8px rgba(255, 106, 0, 0.12);
}
/* Hero offer button (id: offerBtn) aynı turuncu aksanda */
#offerBtn.offer-hero-btn{
background: linear-gradient(135deg, var(--orange), rgba(255, 140, 85, 1)) !important;
border-color: rgba(255, 106, 0, 0.45) !important;
box-shadow: 0 12px 26px rgba(255, 106, 0, 0.22) !important;
}
#offerBtn.offer-hero-btn:hover{
transform: translateY(-1px);
}
@media (max-width: 980px){
.offer-cards-wrap{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px){
.offer-cards-wrap{
grid-template-columns:1fr;
gap:12px;
}
.offer-card{
min-height:220px;
padding:14px;
}
}
/* ========================================
Header brand: logo + theyr — modern Flexbox,
dikey hizalı, logo ile metin arası gap
======================================== */
.site-header .brand{
display: flex !important;
align-items: center !important;
gap: 8px;
margin-left: 8px;
margin-right: 0;
padding: 0;
transform: none;
min-width: 0;
}
/* Yazı grubu: "theyr" + slogan, gereksiz boşluk yok */
.site-header .brand-copy{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
gap: 0;
margin: 0;
padding: 0;
}
.site-header .brand-text{
display: block;
margin: 0 !important;
padding: 0 !important;
line-height: 1.15;
}
.site-header .brand-slogan{
display: block;
margin: 0;
padding: 0;
font-size: 11px;
line-height: 1.2;
opacity: .85;
text-align: left;
}
/* Logo konteyneri: kuş ikonu, metnin dikey ortasına hizalı */
.site-header .brand .logo-icon-wrap{
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
width: auto;
min-width: 50px;
overflow: visible;
flex-shrink: 0;
margin: 0;
padding: 0; /* responsive’te taşmayı önler */
}
.site-header .brand .logo-icon-wrap img{
height: 50px !important;
width: auto !important;
max-height: 50px !important;
max-width: none !important;
object-fit: contain;
object-position: center center;
}
/* Mobil: nur Logo ausblenden, „theyr“-Text bleibt sichtbar */
@media (max-width: 880px){
.site-header .brand .logo-icon-wrap{
display: none !important;
}
.site-header .brand{
gap: 8px;
margin-left: 0;
}
}
@media (max-width: 480px){
.site-header .brand .logo-icon-wrap{
height: 50px;
width: auto;
min-width: 50px;
}
.site-header .brand .logo-icon-wrap img{
height: 50px !important;
max-height: 50px !important;
}
.site-header .brand{ gap: 8px; }
}
/* Home hero’ya hafif ekstra yükseklik */
.home-hero{
padding-top:6px;
padding-bottom:10px;
}
/* =========================================================
MOBIL HEADER — scroll ile gider, sticky/fixed YOK
Sadece max-width: 880px altında. Desktop etkilenmez.
========================================================= */
@media (max-width: 880px){
.site-header{
position: relative !important;
top: auto !important;
z-index: 50;
}
/* Panel header altından açılsın; top:0 kaldırıldı (header kapanmasın) */
}
/* =========================================================
MOBILE MENU — PANEL (v2) — Beyaz, kartlı, OTTO-mantığı
- Koyu overlay YOK. Panel beyaz, radius’lu, scroll edilebilir.
- Sadece .mobile-menu--panel ile uygulanır. Desktop etkilenmez.
========================================================= */
@media (max-width: 880px){
/* Backdrop kaldırıldı: koyu overlay kullanılmıyor */
body.has-mobile-menu::before{
display: none !important;
}
/* Panel header altından açılsın (tam ekran değil), header görünür kalsın */
#mobileMenu.mobile-menu--panel{
display: block !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100dvh - 88px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 99999 !important;
background: #fff !important;
border: none !important;
border-radius: 0 0 18px 18px !important;
box-shadow: 0 12px 40px rgba(0,0,0,.15) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .22s ease, visibility .22s ease, transform .22s ease !important;
transform: translateY(-8px) !important;
}
#mobileMenu.mobile-menu--panel.is-open{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
z-index: 99999 !important;
transform: translateY(0) !important;
}
#mobileMenu.mobile-menu--panel .mobile-inner{
display: flex !important;
flex-direction: column !important;
height: auto !important;
max-height: calc(100dvh - 88px) !important;
padding: 24px 16px 0 16px !important;
padding-top: calc(24px + env(safe-area-inset-top, 0)) !important;
padding-left: max(16px, env(safe-area-inset-left, 16px)) !important;
padding-right: max(16px, env(safe-area-inset-right, 16px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
gap: 0 !important;
}
.mobile-menu-section{
margin-top: 20px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
.mobile-menu-section:first-child{
margin-top: 24px !important;
}
.mobile-menu-section:last-child{
border-bottom: none !important;
}
.mobile-menu-section__title{
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}
.mobile-menu-section .mobile-menu-link-text{
display: block !important;
margin-top: 8px !important;
font-size: 14px !important;
color: #444 !important;
text-decoration: none !important;
}
.mobile-menu-section .mobile-menu-link-text:hover{
color: #1a1a1a !important;
}
.mobile-menu-grid{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.mobile-menu-card{
display: flex !important;
flex-direction: column !important;
padding: 10px 10px !important;
min-height: 40px !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
background: #fff !important;
border: 1px solid rgba(0,0,0,.08) !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #1a1a1a !important;
text-decoration: none !important;
transition: background .15s ease, border-color .15s ease !important;
}
.mobile-menu-card:has(.mobile-menu-card__media){
padding: 0 !important;
}
.mobile-menu-card:hover,
.mobile-menu-card:active{
background: #f5f5f5 !important;
border-color: rgba(0,0,0,.12) !important;
}
.mobile-menu-card__media{
width: 100% !important;
aspect-ratio: 1 !important;
min-height: 0 !important;
background: #e8e8e8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.mobile-menu-card__media img{
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
}
.mobile-menu-card__title{
padding: 8px 10px 10px !important;
flex: 0 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #1a1a1a !important;
line-height: 1.25 !important;
}
.mobile-menu-card:not(:has(.mobile-menu-card__media)) .mobile-menu-card__title{
padding: 0 !important;
}
.mobile-menu-links{
margin-top: 24px !important;
padding-top: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.mobile-menu-links a{
font-size: 14px !important;
color: #444 !important;
text-decoration: none !important;
padding: 8px 0 !important;
transition: color .15s ease !important;
}
.mobile-menu-links a:hover{
color: #1a1a1a !important;
}
.mobile-menu-auth{
margin-top: 20px !important;
padding-top: 16px !important;
padding-bottom: 24px !important;
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0)) !important;
border-top: 1px solid rgba(0,0,0,.08) !important;
}
.mobile-menu-auth__btn{
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 48px !important;
padding: 14px 16px !important;
box-sizing: border-box !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
text-decoration: none !important;
background: #f0f0f0 !important;
border: 1px solid rgba(0,0,0,.1) !important;
border-radius: 12px !important;
transition: background .15s ease, border-color .15s ease !important;
}
.mobile-menu-auth__btn:hover{
background: #e5e5e5 !important;
border-color: rgba(0,0,0,.15) !important;
}
.mobile-menu-auth__btn--logout{
color: #b91c1c !important;
background: #fef2f2 !important;
border-color: rgba(185,28,28,.2) !important;
}
.mobile-menu-auth__btn--logout:hover{
background: #fee2e2 !important;
border-color: rgba(185,28,28,.3) !important;
}
}
/* ==================================================
MOBILE MENU FIX — header görünür kalsın
Tek doğru kaynak: bu blok
================================================== */
@media (max-width: 880px){
/* Varsayılan: header normal akışta, scroll ile gider */
.site-header{
position: relative !important;
top: auto !important;
z-index: 10 !important;
overflow: visible !important;
}
/* Menü AÇIKKEN header sabit kalsın */
body.mobile-menu-open .site-header{
position: sticky !important;
top: 0 !important;
z-index: 100000 !important;
}
.site-header .header-inner,
.site-header .header-inner.container,
.site-header .container{
position: relative !important;
}
/* FULLSCREEN top:0 panel yaklaşımını iptal et, header altından açılsın */
#mobileMenu.mobile-menu,
#mobileMenu.mobile-menu--panel{
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 100% !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100dvh - 88px) !important;
z-index: 99999 !important;
border-radius: 0 0 18px 18px !important;
overflow: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
#mobileMenu.mobile-menu:not(.is-open),
#mobileMenu.mobile-menu--panel:not(.is-open){
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(-8px) !important;
}
#mobileMenu.mobile-menu.is-open,
#mobileMenu.mobile-menu--panel.is-open{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
#mobileMenu .mobile-inner{
height: auto !important;
max-height: calc(100dvh - 88px) !important;
overflow-y: auto !important;
}
/* Hamburger yanında/altında label: Sortiment / Schließen */
.mobile-header-left{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
}
.mobile-sortiment-label{
display: block !important;
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(255,255,255,.85) !important;
line-height: 1.2 !important;
}
}
/* ===== Vergleich-Detail: Sicherheits- und Produktressourcen ===== */
.detail-resources .resources-items-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
/* ===== Product/Home cards: Sicherheits mini actions ===== */
.compare-security-mini-wrap{
margin-top: 8px;
}
.security-mini-row{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.security-mini-chip{
appearance:none;
-webkit-appearance:none;
border:1px solid rgba(15,23,42,.16);
background:#f8fafc;
color:#0f172a;
border-radius:999px;
padding:6px 10px;
font-size:.74rem;
font-weight:700;
line-height:1.1;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
}
.security-mini-chip:hover{
border-color:#f97316;
background:#fff7ed;
}
.security-mini-chip__tag{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:18px;
height:18px;
border-radius:999px;
background:#0f172a;
color:#fff;
font-size:.68rem;
padding:0 5px;
}
.security-mini-icon-btn{
appearance:none;
-webkit-appearance:none;
border:none;
background:transparent;
border-radius:4px;
padding:0;
width:auto;
height:auto;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.security-mini-icon-btn:hover{
background:rgba(249,115,22,.08);
transform: translateY(-1px);
}
.security-mini-icon-btn img{
width:22px;
height:13px;
object-fit:contain;
display:block;
border-radius:2px;
}
.home-popular-strip__scroll .home-popular-card .security-mini-icon-btn img,
.home-popular-card .security-mini-icon-btn img,
.home-new-card .security-mini-icon-btn img,
.home-match-card .security-mini-icon-btn img,
.home-admin-big-card .security-mini-icon-btn img{
width:42px !important;
height:26px !important;
max-height:28px !important;
aspect-ratio:auto !important;
background:transparent !important;
border-radius:4px !important;
}
.home-match-card .security-mini-row,
.home-popular-card .security-mini-row,
.home-new-card .security-mini-row,
.home-admin-big-card .security-mini-row{
margin-top:8px;
}
/* Vergleich grid: kart çerçevesi, görsel alanı, daha sakin fiyat, daha büyük enerji etiketi */
#compareList.grid.compare-grid > .compare-card.card {
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 10px 32px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#compareList .compare-card .card-img {
background: #ffffff !important;
border-radius: 14px;
margin-bottom: 12px;
box-sizing: border-box;
}
#compareList .compare-card .card-img img {
background: #ffffff !important;
}
#compareList .compare-card .compare-card-price {
font-size: 0.84rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.35;
}
#compareList .compare-card .security-mini-icon-btn img {
width: 34px !important;
height: 21px !important;
max-height: 24px !important;
border-radius: 3px !important;
}
#compareList .compare-card p.muted {
color: rgba(226, 232, 240, 0.78) !important;
opacity: 1 !important;
}
#compareList .compare-card .badge.finder {
font-size: 13px;
padding: 7px 11px;
}
#compareList .compare-card .badge.finder .fi {
font-size: 15px;
}
/* ===== Vergleich-Detail: Energieeffizienzklasse (inline) ===== */
.detail-energy-inline-card,
.detail-energy-inline-link{
display:flex;
align-items:center;
gap:12px;
padding:12px 12px;
border-radius:14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
width: 100%;
box-sizing:border-box;
text-decoration:none;
color: inherit;
}
.detail-energy-inline-wrap{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.detail-datasheet-inline-btn{
appearance:none;
-webkit-appearance:none;
border:1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
color:#fff;
border-radius: 12px;
padding: 10px 12px;
font-weight:700;
cursor:pointer;
}
.detail-datasheet-inline-btn:hover{
background: rgba(255,255,255,0.14);
}
.detail-energy-inline-link:hover{
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.18);
}
.detail-energy-icon{
width:56px;
height:56px;
border-radius:14px;
overflow:hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
flex: 0 0 auto;
display:flex;
align-items:center;
justify-content:center;
}
button.detail-energy-inline-card{
appearance:none;
-webkit-appearance:none;
border:none;
cursor:pointer;
}
button.detail-energy-inline-card:focus{
outline: 2px solid rgba(255,255,255,0.35);
outline-offset: 2px;
}
.detail-energy-icon img{
width:100%;
height:100%;
object-fit: contain;
display:block;
}
.detail-energy-text{
display:flex;
flex-direction:column;
gap:4px;
min-width:0;
}
.detail-energy-title{
font-weight: 700;
letter-spacing: .1px;
line-height: 1.1;
}
.detail-energy-sub{
font-size: .95em;
}
.detail-resources .resources-item-link{
display:flex;
align-items:center;
gap: 10px;
padding: 12px 12px;
border-radius: 14px;
text-decoration:none;
color: inherit;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.detail-resources .resources-item-link:hover{
transform: translateY(-1px);
border-color: rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
}
.detail-resources .resources-item-icon{
width: 40px;
height: 40px;
border-radius: 12px;
overflow:hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
display:flex;
align-items:center;
justify-content:center;
flex: 0 0 auto;
}
.detail-resources .resources-item-icon img{
width: 100%;
height: 100%;
object-fit: contain;
}
.detail-resources .resources-item-label{
font-weight: 600;
letter-spacing: .1px;
}
.detail-resources .resources-energy-card{
display:flex;
align-items:center;
gap:14px;
padding:14px 12px;
border-radius:14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
}
.detail-resources .resources-energy-icon{
width:84px;
height:84px;
border-radius:14px;
overflow:hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
display:flex;
align-items:center;
justify-content:center;
flex: 0 0 auto;
}
.detail-resources .resources-energy-icon img{
width:100%;
height:100%;
object-fit: contain;
}
.detail-resources .resources-energy-text{
display:flex;
flex-direction:column;
gap:6px;
min-width: 0;
}
.detail-resources .resources-energy-title{
font-weight:700;
letter-spacing:.1px;
line-height:1.1;
}
.detail-resources .resources-energy-sub{
font-size:0.95em;
}
@media (max-width: 700px){
.detail-resources .resources-items-grid{
grid-template-columns: 1fr;
}
.detail-energy-inline-card,
.detail-energy-inline-link{
gap:10px;
padding:10px 10px;
}
.detail-energy-icon{
width:48px;
height:48px;
}
}
@media (max-width: 900px){
.page.detail .detail-hero.detail-hero--decision.detail-hero--split{
display: flex !important;
flex-direction: column !important;
}
.page.detail .detail-hero.detail-hero--decision.detail-hero--split .detail-hero__media{
order: 1 !important;
}
.page.detail .detail-hero.detail-hero--decision.detail-hero--split .detail-hero__aside{
order: 2 !important;
}
.page.detail #detail-similar .related-grid--premium,
.page.detail #detail-alternatives .related-grid--premium{
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.page.detail #detail-similar[data-card-count="1"] .related-grid--premium,
.page.detail #detail-similar[data-card-count="2"] .related-grid--premium,
.page.detail #detail-similar[data-card-count="3"] .related-grid--premium,
.page.detail #detail-alternatives[data-card-count="1"] .related-grid--premium,
.page.detail #detail-alternatives[data-card-count="2"] .related-grid--premium,
.page.detail #detail-alternatives[data-card-count="3"] .related-grid--premium{
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(170px, 268px)) !important;
justify-content: center !important;
justify-items: stretch !important;
overflow-x: visible !important;
overflow-y: visible !important;
gap: 12px !important;
}
.page.detail #detail-similar[data-card-count="1"] .related-grid--premium > .related-card--premium,
.page.detail #detail-similar[data-card-count="2"] .related-grid--premium > .related-card--premium,
.page.detail #detail-similar[data-card-count="3"] .related-grid--premium > .related-card--premium,
.page.detail #detail-alternatives[data-card-count="1"] .related-grid--premium > .detail-alt-wrap--premium,
.page.detail #detail-alternatives[data-card-count="2"] .related-grid--premium > .detail-alt-wrap--premium,
.page.detail #detail-alternatives[data-card-count="3"] .related-grid--premium > .detail-alt-wrap--premium{
width: min(76vw, 268px) !important;
max-width: 268px !important;
margin-inline: auto !important;
}
}
@media (max-width: 900px){
.page.detail #detail-alternatives .related-grid--premium{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding-left: 12px !important;
padding-right: 12px !important;
}
.page.detail #detail-alternatives .related-grid--premium > .detail-alt-wrap--premium{
flex: 0 0 min(76vw, 268px) !important;
width: min(76vw, 268px) !important;
max-width: 268px !important;
scroll-snap-align: start;
}
}
/* Detail related cards: always horizontal, never wrap to next line */
.page.detail #detail-similar .related-grid--premium,
.page.detail #detail-alternatives .related-grid--premium{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
padding-bottom: 8px;
}
.page.detail #detail-similar .related-grid--premium > .related-card--premium{
flex: 0 0 min(280px, 82vw) !important;
width: min(280px, 82vw) !important;
max-width: min(280px, 82vw) !important;
scroll-snap-align: start;
}
.page.detail #detail-alternatives .related-grid--premium > .detail-alt-wrap--premium{
flex: 0 0 min(280px, 82vw) !important;
width: min(280px, 82vw) !important;
max-width: min(280px, 82vw) !important;
scroll-snap-align: start;
}
/* Detail hero desktop bugfix: avoid equal-height column stretching */
@media (min-width: 901px){
.page.detail .detail-hero.detail-hero--decision.detail-hero--split,
.page.detail .detail-hero{
align-items: start !important;
}
.page.detail .detail-hero__media,
.page.detail .detail-hero.detail-hero--split .detail-hero__media{
align-self: start !important;
min-height: 0 !important;
height: auto !important;
flex: 0 0 auto !important;
}
.page.detail .detail-hero__media .product-media.product-image-wrap{
min-height: 0 !important;
height: auto !important;
}
}
/* Desktop hero stabilization: prevent blank left column */
@media (min-width: 901px){
.page.detail .detail-hero.detail-hero--decision.detail-hero--split{
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 420px) !important;
gap: 28px !important;
align-items: start !important;
}
.page.detail .detail-hero__media{
display: block !important;
align-self: start !important;
width: 100% !important;
min-height: 0 !important;
height: auto !important;
}
.page.detail .detail-hero__media .product-media.product-image-wrap{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 0 !important;
height: auto !important;
}
.page.detail .detail-hero__aside.product-side{
align-self: start !important;
max-height: calc(100vh - 92px);
overflow: auto;
}
}
/* Ratgeber detail: editorial product blocks — premium white cards */
body.page-ratgeber-detail .ratgeber-deep {
margin-top: clamp(40px, 6vw, 72px);
margin-bottom: clamp(32px, 5vw, 56px);
padding: 0;
width: 100%;
box-sizing: border-box;
}
body.page-ratgeber-detail .ratgeber-deep__wrap {
width: 100%;
max-width: none;
margin: 0;
box-sizing: border-box;
}
body.page-ratgeber-detail .pblock--premium {
margin-bottom: clamp(28px, 4vw, 40px);
}
body.page-ratgeber-detail .pblock-card {
background: #ffffff;
color: #1e293b;
border-radius: clamp(20px, 2.4vw, 28px);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 4px 6px -1px rgba(15, 23, 42, 0.06),
0 24px 48px -12px rgba(15, 23, 42, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.8) inset;
padding: clamp(22px, 3.2vw, 36px) clamp(20px, 3vw, 40px);
box-sizing: border-box;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* main h1–h4 nutzen global var(--text)=weiß — hier explizit dunkel */
body.page-ratgeber-detail .pblock-card h2,
body.page-ratgeber-detail .pblock-card h3,
body.page-ratgeber-detail .pblock-card h4 {
color: #0f172a;
}
body.page-ratgeber-detail .pblock-card:hover {
box-shadow:
0 8px 16px -4px rgba(15, 23, 42, 0.08),
0 32px 56px -16px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}
body.page-ratgeber-detail .pblock-card--on-backdrop {
padding: clamp(22px, 3.2vw, 36px) clamp(20px, 3vw, 40px);
}
/* Editorial: zwei Spalten, oben bündig — Text startet neben dem Bild (nicht vertikal zentriert) */
body.page-ratgeber-detail .pblock__row {
display: grid;
grid-template-columns: minmax(200px, 38%) minmax(0, 1fr);
gap: clamp(20px, 3.5vw, 36px);
align-items: start;
}
body.page-ratgeber-detail .pblock--reverse .pblock__row {
direction: rtl;
}
body.page-ratgeber-detail .pblock--reverse .pblock__content,
body.page-ratgeber-detail .pblock--reverse .pblock__media {
direction: ltr;
}
/* Görsel sütunu: cover yok — tam görüntü kart içinde (letterbox mümkün) */
body.page-ratgeber-detail .pblock__media {
display: flex;
align-items: flex-start;
justify-content: center;
min-width: 0;
align-self: start;
}
body.page-ratgeber-detail .pblock__content {
min-width: 0;
align-self: start;
}
body.page-ratgeber-detail .pblock__figure {
margin: 0;
width: 100%;
max-width: 100%;
border-radius: clamp(16px, 2vw, 22px);
overflow: hidden;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 2vw, 18px);
box-sizing: border-box;
min-height: 0;
max-height: min(360px, 52vh);
}
body.page-ratgeber-detail .pblock__img {
max-width: 100%;
max-height: min(320px, 48vh);
width: auto;
height: auto;
object-fit: contain;
object-position: center top;
display: block;
vertical-align: middle;
}
body.page-ratgeber-detail .pblock__img.is-broken {
object-fit: contain;
padding: 12%;
opacity: 0.35;
filter: grayscale(0.4);
}
body.page-ratgeber-detail .pblock__media--empty {
min-height: 200px;
border-radius: clamp(16px, 2vw, 22px);
background: #fff;
border: 1px dashed rgba(100, 116, 139, 0.35);
}
body.page-ratgeber-detail .pblock-headline {
margin: 0 0 clamp(12px, 2vw, 18px);
font-size: clamp(1.65rem, 2.8vw + 1rem, 2.65rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.03em;
color: #0f172a;
font-family: inherit;
}
body.page-ratgeber-detail .pblock-lead {
margin: 0 0 clamp(14px, 2vw, 20px);
font-size: clamp(1.12rem, 1vw + 1rem, 1.35rem);
font-weight: 600;
line-height: 1.45;
color: #334155;
}
body.page-ratgeber-detail .pblock-body {
margin: 0 0 clamp(18px, 2.5vw, 24px);
}
body.page-ratgeber-detail .pblock-body p {
margin: 0;
font-size: clamp(1.05rem, 0.5vw + 0.98rem, 1.2rem);
line-height: 1.68;
color: #1e293b;
font-weight: 450;
}
body.page-ratgeber-detail .pblock-section {
margin: 0 0 clamp(20px, 3vw, 28px);
}
body.page-ratgeber-detail .pblock-section__title {
margin: 0 0 clamp(12px, 1.8vw, 16px);
font-size: clamp(1.08rem, 0.6vw + 1rem, 1.28rem);
font-weight: 800;
letter-spacing: -0.02em;
color: #0f172a;
}
body.page-ratgeber-detail .pblock-highlights .pblock-highlight {
margin-bottom: clamp(14px, 2vw, 18px);
padding-bottom: clamp(12px, 1.8vw, 16px);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
body.page-ratgeber-detail .pblock-highlights .pblock-highlight:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
body.page-ratgeber-detail .pblock-highlight__title {
margin: 0 0 8px;
font-size: clamp(1rem, 0.35vw + 0.94rem, 1.12rem);
font-weight: 700;
color: #0f766e;
}
body.page-ratgeber-detail .pblock-highlight__text p {
margin: 0;
font-size: clamp(0.98rem, 0.4vw + 0.92rem, 1.08rem);
line-height: 1.62;
color: #334155;
}
body.page-ratgeber-detail .pblock-specs__dl {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body.page-ratgeber-detail .pblock-specs__row {
display: grid;
grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
gap: 10px 16px;
padding: 10px 12px;
background: rgba(248, 250, 252, 0.9);
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.06);
}
@media (max-width: 520px) {
body.page-ratgeber-detail .pblock-specs__row {
grid-template-columns: 1fr;
}
}
body.page-ratgeber-detail .pblock-specs__row dt {
margin: 0;
font-weight: 700;
font-size: 0.9rem;
color: #475569;
}
body.page-ratgeber-detail .pblock-specs__row dd {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: #1e293b;
}
body.page-ratgeber-detail .pblock-procon-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 0 0 clamp(20px, 3vw, 28px);
}
@media (min-width: 600px) {
body.page-ratgeber-detail .pblock-procon-grid {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
body.page-ratgeber-detail .pblock-procon {
padding: clamp(14px, 2vw, 18px);
border-radius: 14px;
border: 1px solid rgba(15, 23, 42, 0.08);
}
body.page-ratgeber-detail .pblock-procon--pro {
background: linear-gradient(165deg, rgba(209, 250, 229, 0.98) 0%, rgba(167, 243, 208, 0.72) 100%);
border-color: rgba(5, 150, 105, 0.38);
}
body.page-ratgeber-detail .pblock-procon--con {
background: linear-gradient(165deg, rgba(254, 226, 226, 0.98) 0%, rgba(252, 165, 165, 0.62) 100%);
border-color: rgba(220, 38, 38, 0.38);
}
body.page-ratgeber-detail .pblock-procon .pblock-section__title {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
body.page-ratgeber-detail .pblock-procon--pro .pblock-section__title {
color: #047857;
}
body.page-ratgeber-detail .pblock-procon--con .pblock-section__title {
color: #b91c1c;
}
body.page-ratgeber-detail .pblock-procon__list {
margin: 0;
padding-left: 1.15rem;
font-size: clamp(0.95rem, 0.35vw + 0.9rem, 1.05rem);
line-height: 1.55;
color: #0f172a !important;
}
body.page-ratgeber-detail .pblock-procon__list li {
margin-bottom: 6px;
color: #0f172a !important;
}
body.page-ratgeber-detail .pblock-fazit {
margin: 0 0 clamp(18px, 2.5vw, 24px);
padding: clamp(16px, 2.2vw, 22px);
border-radius: 14px;
background: linear-gradient(135deg, rgba(240, 253, 250, 0.9) 0%, rgba(204, 251, 241, 0.35) 100%);
border: 1px solid rgba(13, 148, 136, 0.2);
}
body.page-ratgeber-detail .pblock-fazit__body p {
margin: 0;
font-size: clamp(1.02rem, 0.45vw + 0.96rem, 1.14rem);
line-height: 1.65;
color: #1e293b;
}
body.page-ratgeber-detail .pblock-fitgrid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 0 clamp(20px, 3vw, 28px);
}
@media (min-width: 560px) {
body.page-ratgeber-detail .pblock-fitgrid {
grid-template-columns: 1fr 1fr;
}
}
body.page-ratgeber-detail .pblock-fit {
padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
border-radius: 14px;
border: 1px solid transparent;
}
body.page-ratgeber-detail .pblock-fit--yes {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(52, 211, 153, 0.14) 100%);
border-color: rgba(5, 150, 105, 0.35);
}
body.page-ratgeber-detail .pblock-fit--no {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.18) 0%, rgba(252, 165, 165, 0.12) 100%);
border-color: rgba(220, 38, 38, 0.32);
}
body.page-ratgeber-detail .pblock-fit__label {
display: block;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
color: #0f172a;
opacity: 0.85;
}
body.page-ratgeber-detail .pblock-fit p {
margin: 0;
font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.08rem);
line-height: 1.55;
color: #1e293b;
font-weight: 500;
}
body.page-ratgeber-detail .pblock-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 4px;
}
body.page-ratgeber-detail .pblock-price-links {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
align-items: center;
width: 100%;
}
body.page-ratgeber-detail .pblock-price-link {
font-size: 0.88rem;
font-weight: 600;
color: #0f766e;
text-decoration: underline;
text-underline-offset: 3px;
}
body.page-ratgeber-detail .pblock-price-link:hover {
color: #115e59;
}
body.page-ratgeber-detail .pblock-cta-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
body.page-ratgeber-detail .pblock-source-notice {
margin-top: clamp(14px, 2vw, 20px);
padding: 0;
border-radius: 12px;
border: 1px solid rgba(15, 118, 110, 0.22);
background: rgba(240, 253, 250, 0.65);
overflow: hidden;
}
body.page-ratgeber-detail .pblock-source-notice__summary {
list-style: none;
cursor: pointer;
padding: 12px 16px;
font-size: 0.9rem;
font-weight: 700;
color: #0f766e;
display: flex;
align-items: center;
gap: 8px;
user-select: none;
}
body.page-ratgeber-detail .pblock-source-notice__summary::-webkit-details-marker {
display: none;
}
body.page-ratgeber-detail .pblock-source-notice__summary::before {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid #0f766e;
border-bottom: 2px solid #0f766e;
transform: rotate(-45deg);
flex-shrink: 0;
margin-top: -2px;
transition: transform 0.2s ease;
}
body.page-ratgeber-detail .pblock-source-notice[open] .pblock-source-notice__summary::before {
transform: rotate(45deg);
margin-top: 2px;
}
body.page-ratgeber-detail .pblock-source-notice__summary:hover {
background: rgba(13, 148, 136, 0.08);
color: #115e59;
}
body.page-ratgeber-detail .pblock-source-notice__body {
padding: 0 16px 14px;
border-top: 1px solid rgba(15, 118, 110, 0.12);
}
body.page-ratgeber-detail .pblock-source-notice__text {
font-size: 0.88rem;
line-height: 1.55;
color: #334155;
}
body.page-ratgeber-detail .pblock-source-notice__text p {
margin: 0 0 10px;
}
body.page-ratgeber-detail .pblock-source-notice__text p:last-child {
margin-bottom: 0;
}
body.page-ratgeber-detail .pblock-source-notice__list {
margin: 0 0 10px;
padding-left: 1.15rem;
}
body.page-ratgeber-detail .pblock-source-notice__list li {
margin-bottom: 8px;
}
body.page-ratgeber-detail .pblock-source-notice__footer {
font-size: 0.82rem;
color: #64748b;
font-style: italic;
}
body.page-ratgeber-detail .pblock-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 12px;
font-weight: 700;
font-size: 0.98rem;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
body.page-ratgeber-detail .pblock-btn--primary {
background: linear-gradient(135deg, #0d9488 0%, #0f766e 48%, #115e59 100%);
color: #fff;
border: none;
box-shadow: 0 10px 28px rgba(15, 118, 110, 0.35);
}
body.page-ratgeber-detail .pblock-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(15, 118, 110, 0.42);
color: #fff;
}
body.page-ratgeber-detail .pblock-btn--secondary {
background: #fff;
color: #0f766e;
border: 2px solid rgba(15, 118, 110, 0.35);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
body.page-ratgeber-detail .pblock-btn--secondary:hover {
border-color: #0f766e;
background: #f0fdfa;
color: #0f766e;
}
/* Backdrop variant */
body.page-ratgeber-detail .pblock--backdrop {
position: relative;
border-radius: clamp(22px, 3vw, 32px);
overflow: hidden;
padding: clamp(28px, 5vw, 56px) clamp(16px, 3vw, 28px);
}
body.page-ratgeber-detail .pblock__backdrop {
position: absolute;
inset: 0;
background-image: var(--pblock-backdrop);
background-size: cover;
background-position: center;
}
body.page-ratgeber-detail .pblock__backdrop::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.55) 100%);
}
body.page-ratgeber-detail .pblock--backdrop .ratgeber-deep__wrap {
position: relative;
z-index: 1;
}
/* Legacy class names (older cached HTML) */
body.page-ratgeber-detail .ratgeber-deep .ctaRow {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
body.page-ratgeber-detail .ratgeber-deep .btn.btn--accent {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
color: #fff;
border: none;
}
body.page-ratgeber-detail .ratgeber-deep .btn.btn--ghost {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
background: #fff;
color: #0f766e;
border: 2px solid rgba(15, 118, 110, 0.35);
}
@media (max-width: 768px) {
body.page-ratgeber-detail .pblock__row {
grid-template-columns: 1fr;
}
body.page-ratgeber-detail .pblock--reverse .pblock__row {
direction: ltr;
}
body.page-ratgeber-detail .pblock__media {
justify-content: center;
max-width: min(100%, 340px);
margin: 0 auto;
}
body.page-ratgeber-detail .pblock__figure {
max-height: min(280px, 48vw);
}
body.page-ratgeber-detail .pblock__img {
max-height: min(260px, 46vw);
object-position: center;
}
}
/* Ratgeber: Schnellauswahl → Editorial-Karten (smooth scroll + Highlight) */
body.page-ratgeber-detail .decisionShortcuts {
position: relative;
z-index: 2;
margin: 18px 0 28px;
padding: 18px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(10, 16, 35, 0.96), rgba(18, 31, 63, 0.96));
box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
color: #fff;
}
body.page-ratgeber-detail .decisionShortcuts-head {
margin-bottom: 14px;
}
body.page-ratgeber-detail .decisionShortcuts-kicker {
display: inline-block;
margin-bottom: 6px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #b8dfff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
body.page-ratgeber-detail .decisionShortcuts-head h2 {
margin: 0 0 6px;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.1;
color: #fff;
}
body.page-ratgeber-detail .decisionShortcuts-head p {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 15px;
}
body.page-ratgeber-detail .decisionShortcuts-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
body.page-ratgeber-detail .decisionShortcut {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
border-radius: 18px;
padding: 16px;
text-align: left;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
color: #fff;
min-height: 132px;
font: inherit;
}
body.page-ratgeber-detail .decisionShortcut:hover {
transform: translateY(-2px);
border-color: rgba(65, 217, 255, 0.45);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
background: rgba(255, 255, 255, 0.09);
}
body.page-ratgeber-detail .decisionShortcut:focus-visible {
outline: 2px solid rgba(71, 224, 193, 0.85);
outline-offset: 2px;
}
body.page-ratgeber-detail .decisionShortcut.is-active {
border-color: rgba(71, 224, 193, 0.65);
background: linear-gradient(135deg, rgba(71, 224, 193, 0.18), rgba(87, 157, 255, 0.16));
box-shadow: 0 0 0 1px rgba(71, 224, 193, 0.16), 0 14px 30px rgba(0, 0, 0, 0.18);
}
body.page-ratgeber-detail .decisionShortcut-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
font-size: 21px;
margin-bottom: 10px;
}
body.page-ratgeber-detail .decisionShortcut-title {
display: block;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 6px;
}
body.page-ratgeber-detail .decisionShortcut-text {
display: block;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
line-height: 1.45;
}
body.page-ratgeber-detail .decisionMiniMap {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 14px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 13px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.72);
}
body.page-ratgeber-detail .ratgeberProductBlock {
scroll-margin-top: clamp(88px, 14vh, 140px);
transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}
body.page-ratgeber-detail .ratgeberProductBlock.is-highlighted {
box-shadow: 0 0 0 2px rgba(71, 224, 193, 0.28), 0 24px 50px rgba(22, 29, 37, 0.14);
transform: translateY(-2px);
}
body.page-ratgeber-detail .ratgeberProductBlock.is-highlighted .pblock-headline {
text-shadow: 0 0 16px rgba(71, 224, 193, 0.18);
}
@media (max-width: 900px) {
body.page-ratgeber-detail .decisionShortcuts-grid {
grid-template-columns: 1fr;
}
body.page-ratgeber-detail .decisionShortcut {
min-height: auto;
}
}