/*
Theme Name: GeneratePress Child
Template: generatepress
*/
/* ================== ÜST NAV (SADECE .liberta-nav) ================== */
.liberta-nav {
background: linear-gradient(90deg,#5e35b1,#ff6f00);
padding: 0 20px;
position: sticky; top: 0; z-index: 1000;
display: flex; justify-content: space-between; align-items: center;
}
.liberta-nav .left { display:flex; align-items:center; gap:16px; }
.liberta-nav img.logo { height:140px; width:auto; display:block; }
.liberta-nav .social { display:flex; align-items:center; gap:14px; margin-left:8px; flex-wrap:wrap; }
.liberta-nav .social a { color:#fff; font-size:1.25rem; transition:.2s; text-decoration:none; }
.liberta-nav .social a:hover { color:#ffe082; }
.liberta-nav .social .tel,
.liberta-nav .social a[href^="tel"] { text-decoration:none !important; color:#fff !important; font-weight:600; }
.center-text {
font-size:1.1rem; font-weight:700; text-align:center; color:#fff;
padding:8px 16px; border:2px solid #ff9800; border-radius:999px;
box-shadow:0 0 15px #ff9800,0 0 30px #ff9800;
animation:glow 2s infinite alternate; display:inline-block; margin-top:10px;
}
@keyframes glow { from { box-shadow:0 0 10px #ff9800,0 0 20px #ff9800; }
to { box-shadow:0 0 30px #ff6f00,0 0 50px #ff6f00; } }
.liberta-nav .desktop-menu nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:10px; }
.liberta-nav .desktop-menu nav ul li { position:relative; }
.liberta-nav .desktop-menu nav ul li a { display:block; padding:20px; color:#fff; text-decoration:none; font-weight:500; transition:0.3s; }
.liberta-nav .desktop-menu nav ul li a:hover { background:rgba(255,255,255,0.2); }
.liberta-nav .desktop-menu nav ul ul {
display:none; position:absolute; top:60px; min-width:220px;
background:linear-gradient(90deg,#5e35b1,#ff6f00);
border-radius:6px; box-shadow:0 4px 8px rgba(0,0,0,0.25); z-index:999;
}
.liberta-nav .desktop-menu nav ul li:hover>ul{display:block;}
.liberta-nav .desktop-menu nav ul ul li a { color:#fff; padding:12px 16px; }
.liberta-nav .desktop-menu nav ul ul li a:hover { background:rgba(255,255,255,0.15); }
/* Hamburger */
.hamburger{ display:none; font-size:28px; cursor:pointer; color:#fff; background:transparent; border:0; }
/* ------- Mobil görünüm: desktop menü gizli, hamburger görünür ------- */
@media (max-width: 992px){
.liberta-nav .desktop-menu{ display:none; }
.hamburger{ display:block; }
}
/* ================== OFF-CANVAS (SAĞDAN KAYAR) ================== */
.offcanvas-menu{
position:fixed; top:0; right:-70%;
width:70%; height:100dvh; background:#fff; padding:20px;
z-index:10001; transition:right .3s ease; overflow-y:auto;
box-shadow:-8px 0 24px rgba(0,0,0,.25);
}
.menu-overlay{
position:fixed; inset:0; background:rgba(0,0,0,.4);
z-index:10000; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.offcanvas-nav .mobile-menu,
.offcanvas-nav .page_item_has_children>ul { list-style:none; margin:0; padding:0; }
.offcanvas-nav a{
color:#111 !important; text-decoration:none !important;
display:block; padding:14px 12px; font-size:1.05rem;
}
.offcanvas-nav li{ border-bottom:1px solid #eee; }
body.menu-open .offcanvas-menu{ right:0 !important; }
body.menu-open .menu-overlay{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
/* ================== MOBİL HEADER DÜZENİ (<= 768px) ================== */
@media (max-width: 768px){
.liberta-nav{ padding: 8px 12px; flex-wrap: wrap; position: relative; gap: 6px; }
.liberta-nav .left{ width: 100%; justify-content: center; align-items: center; gap: 10px; }
.liberta-nav img.logo{ height: 92px; width: auto; max-width: 100%; display: block; }
.liberta-nav .social{ width: 100%; justify-content: center; gap: 14px; margin: 4px 0 0 0; flex-wrap: wrap; }
.liberta-nav .social a{ font-size: 1.3rem; }
.liberta-nav .social .tel{ display:block; width:100%; margin-top:4px; text-align:center; font-size:1.05rem; line-height:1.3; color:#fff !important; font-weight:600; }
.center-text{ order:3; width:100%; font-size:.95rem; padding:6px 10px; margin:6px 0 2px 0; text-align:center; white-space:normal; }
.hamburger{ display:block; position:absolute; right:12px; top:12px; font-size:28px; z-index:1002; }
}
/* ================== FRONT PAGE (Yeni) ================== */
section{ padding:80px 20px; max-width:1200px; margin:auto; }
/* HERO */
.home-hero{
position: relative; min-height: 62vh; text-align:center; color:#fff; overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.home-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.home-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55)); }
.home-hero__inner{ position:relative; z-index:1; padding:48px 16px; max-width: 1100px; }
.hero-title{ font-size: clamp(28px, 4.6vw, 46px); font-weight: 800; margin:0 0 8px 0; }
.hero-title i{ color:#ffeb3b; margin-right:8px; }
#hero-rotator{ border-bottom: 2px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.hero-subalt{ font-size: clamp(16px, 2.2vw, 22px); margin: 8px 0 6px 0; }
.hero-problems{ font-size: 16px; opacity: .95; margin-bottom: 16px; }
.hero-cta .btn{ margin: 6px 8px; }
.btn{
display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none !important;
font-weight:700; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--whatsapp{ background:#25D366; color:#fff; box-shadow: 0 6px 16px rgba(37,211,102,.35); }
.btn--instagram{ background:#E4405F; color:#fff; box-shadow: 0 6px 16px rgba(228,64,95,.35); }
.btn--outline{ background:transparent; color:#fff; border:2px solid #fff; }
/* HİZMETLER */
.services-wrap .section-title{ text-align:center; margin-bottom: 16px; }
.services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.card{
background:#fff; color:#333; padding:24px; border-radius:16px; text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.08); transition:.25s; text-decoration:none;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 12px 24px rgba(0,0,0,0.12); }
.card h3{ font-size:1.15rem; margin-bottom:8px; color:#333; }
.card p{ font-size:.95rem; color:#555; }
.card i{ margin-right:6px; color:#5e35b1; }
/* HAKKIMIZDA KUTUSU */
.about-brief{ padding-top: 40px; }
.about-brief__inner{
background: linear-gradient(135deg,#5e35b1,#ff6f00);
color:#fff; border-radius:18px; padding:28px; text-align:center;
box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.about-brief__inner p{ margin:10px auto 16px; max-width:800px; }
.about-brief .btn--outline{ border-color:#fff; }
/* BLOG 3 */
.home-blog .section-title{ text-align:center; margin-bottom: 16px; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.blog-card{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,0.08); transition:.3s; display:flex; flex-direction:column; text-decoration:none; }
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 10px 20px rgba(0,0,0,0.15); }
.blog-card img{ width:100%; height:200px; object-fit:cover; }
.blog-card-content{ padding:18px; flex-grow:1; display:flex; flex-direction:column; }
.blog-card .post-title{ font-size:1.1rem; margin:0 0 8px 0; }
.blog-card .post-title a{ color:#222; text-decoration:none; }
.blog-card p.excerpt{ flex-grow:1; font-size:.95rem; color:#555; }
.blog-card a.read-more{ margin-top:12px; display:inline-block; background:#ff9800; color:#fff; padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:700; text-align:center; }
.blog-card a.read-more:hover{ background:#e68900; }
/* TRUSTINDEX */
.reviews{ background:linear-gradient(135deg,#ff9800,#5e35b1); color:#fff; text-align:center; padding:80px 20px; }
.section-title{ text-align:center; margin-bottom:16px; }
.section-title--light{ color:#fff; }
/* Mobil rötuşlar (front) */
@media (max-width: 768px){
.home-hero{ min-height: 64vh; }
.home-hero__inner{ padding: 36px 14px; }
.btn{ padding: 12px 18px; }
}
/* === HERO düzeltmeleri === */
.home-hero__overlay{ display:none !important; } /* gri katman kapalı */
.hero-loc{ margin: 4px 0 6px; }
.badge-loc{
display:inline-block; background:#5e35b1; color:#fff;
padding:6px 12px; border-radius:999px; font-weight:700; letter-spacing:.2px;
}
/* === Hizmetler: 8 karta rahat grid === */
.services{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.card h3 i{ width:18px; }
/* === Trustindex bölümü: daha geniş alan === */
.reviews.reviews--wide .container{ max-width: 1400px; }
.reviews.reviews--wide{ padding-bottom: 96px; }
/* (Eğer Trustindex widget’ı dar görünürse, bu ufak dokunuş yardımcı olur) */
.reviews .container iframe,
.reviews .container .ti-widget,
.reviews .container .ti-widget-container{ width:100% !important; }
/* === Liberta: erişilebilirlik + rahat okuma dokunuşları (ek) === */
.liberta-nav .desktop-menu nav a:focus-visible,
.offcanvas-nav a:focus-visible,
.btn:focus-visible {
outline: 3px solid #ffeb3b;
outline-offset: 2px;
border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
.center-text { animation: none !important; box-shadow: none !important; }
.card:hover, .btn:hover { transform: none !important; }
}
body.menu-open {
overflow: hidden;
touch-action: none;
overscroll-behavior: contain;
}
/* Overlay kontrolü: varsayılan açık; .overlay-off ile kapat */
.overlay-off .home-hero__overlay { display: none !important; }
/* ================================================================== */
/* === HERO: FULL-BLEED + SAĞA YASLI, KOYU METİN (MASAÜSTÜ) ========= */
/* ================================================================== */
:root{
--hero-h: 780px; /* masaüstü hedef yükseklik: 740–820px arası oynatılabilir */
--hero-right-pad: 8vw; /* metin sağ iç boşluk */
--hero-text-max: 48rem; /* metin sütununun maksimum genişliği */
}
@media (min-width:1024px){
/* Bölümü sayfanın kenarlarına kadar aç (full-bleed) */
.home-hero{
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: var(--hero-h);
display: flex;
align-items: center;
overflow: hidden;
}
/* Katman sırası: arka plan -> overlay -> içerik */
.home-hero__bg{ z-index:0; }
.home-hero__overlay{ z-index:1; }
.home-hero__inner{ z-index:2; position:relative; }
/* Arka plan: görsel tam genişlik + köpek solda-altta */
.home-hero__bg{
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: left bottom;
background-size: cover; /* Kesim hissi olursa alttakini açın */
/* background-size: 110% auto; */
}
/* Okunurluk: sağ tarafa beyaz geçiş – masaüstünde overlay’i yeniden AÇ */
body:not(.overlay-off) .home-hero__overlay{
position: absolute;
inset: 0;
display: block !important; /* önceki display:none !important’ı geçersiz kılar */
background: linear-gradient(
to right,
rgba(255,255,255,.60) 0%,
rgba(255,255,255,.92) 42%,
rgba(255,255,255,.08) 78%,
rgba(255,255,255,0) 100%
);
pointer-events: none;
}
/* Metin kutusu: sağa yaslı ve koyu */
.home-hero__inner{
margin-left: auto; /* sağa it */
padding: 3rem var(--hero-right-pad);
width: min(var(--hero-text-max), 48%);
text-align: right;
color:#111827;
}
.home-hero .hero-title{ margin:0 0 .6rem; line-height:1.12; color:#0b0b0b; }
.home-hero .hero-subalt,
.home-hero .hero-loc,
.home-hero .hero-problems{ margin:.35rem 0; color:#374151; }
/* CTA butonları sağda hizalı kalsın */
.hero-cta-out{
display:flex; justify-content:flex-end; gap:.75rem;
padding-right: var(--hero-right-pad);
}
}
/* Mobil/tablet: mevcut merkezi düzen kalsın */
@media (max-width:1023px){
.home-hero__inner{ text-align:center; padding:2rem 6vw; color:#111827; }
}
/* === HERO (sadece bu bölüm): full-bleed + köpek solda + metin sağda koyu === */
:root{
--hero-h: 780px; /* masaüstü yükseklik: 740–820px arası oynatılabilir */
--hero-right-pad: 8vw; /* sağ kenar boşluğu */
--hero-text-max: 48rem; /* metin kutusu maksimum genişlik */
}
@media (min-width: 1024px){
/* Bölümü sayfa kenarlarına kadar aç (full-bleed) */
.home-hero{
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: var(--hero-h);
display: flex;
align-items: center;
overflow: hidden;
/* başka hiçbir section’ı etkilemez */
}
/* Arka plan görseli: köpek solda-altta sabit, görsel tüm genişliği kaplasın */
.home-hero__bg{
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: left bottom;
background-size: cover;
}
/* Okunurluk için sağ tarafa beyaz geçiş — (önceki "display:none"u geçersiz kıl) */
.home-hero__overlay{
display: block !important;
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255,255,255,.92) 34%,
rgba(255,255,255,.70) 52%,
rgba(255,255,255,.28) 74%,
rgba(255,255,255,0) 100%
);
pointer-events: none;
}
/* Metin kutusu: sağa yaslı, koyu metin */
.home-hero__inner{
position: relative; /* overlay üstünde kalsın */
margin-left: auto; /* SAĞA it */
padding: 3rem var(--hero-right-pad);
width: min(var(--hero-text-max), 48%);
text-align: right;
color: #111827;
}
/* Başlık ve alt metin renk/boşlukları (sadece hero içinde) */
.home-hero .hero-title{
margin: 0 0 .6rem;
line-height: 1.12;
color: #111827;
}
.home-hero .hero-subalt,
.home-hero .hero-loc,
.home-hero .hero-problems{
margin: .35rem 0;
color: #374151;
}
/* CTA’lar sağda hizalı kalsın */
.hero-cta-out{
display: flex;
justify-content: flex-end;
gap: .75rem;
padding-right: var(--hero-right-pad);
}
}
/* Mobil/tablet düzenine dokunma (merkezde kalsın) */
@media (max-width: 1023px){
.home-hero__inner{ text-align: center; padding: 2rem 6vw; color: #1f2937; }
}
/* ====== HERO: full-bleed + köpek solda + metin SAĞDA (sadece bu bölüm) ====== */
:root{
--hero-h: 780px; /* 740–820 arası oynatabilirsin */
--hero-right-pad: 8vw; /* sağ boşluk */
--hero-text-max: 48rem; /* metin kutusu max genişlik */
}
@media (min-width:1024px){
/* 1) Full-bleed: kutu sınırlayıcılarını ez ve bölümü sayfa kenarına kadar aç */
.home-hero,
.home-hero > .container,
.home-hero > .grid-container,
.home-hero > .gb-container,
.home-hero > .gb-inside-container,
.home-hero > .inside-article{
position: relative;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: var(--hero-h) !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
}
/* 2) Arka plan: köpek solda-altta; görsel tam genişlik */
.home-hero__bg{
position: absolute !important;
inset: 0 !important;
background-repeat: no-repeat !important;
background-position: left bottom !important;
background-size: cover !important;
z-index: 0;
}
/* 3) Okunurluk: sağda beyaz geçiş — varsa önceki "display:none"u geçersiz kıl */
.home-hero__overlay{
display: block !important;
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255,255,255,.92) 34%,
rgba(255,255,255,.70) 52%,
rgba(255,255,255,.28) 74%,
rgba(255,255,255,0) 100%
);
pointer-events: none;
z-index: 1;
}
/* Overlay’ı kapatmak için SAYFAYA .overlay-off sınıfı eklersen yine kapanır */
.overlay-off .home-hero__overlay{ display:none !important; }
/* 4) Metin kutusu sağa yaslı ve koyu */
.home-hero__inner{
position: relative;
margin-left: auto; /* SAĞA it */
padding: 3rem var(--hero-right-pad);
width: min(var(--hero-text-max), 48%);
text-align: right;
color: #111827;
z-index: 2; /* overlay üstünde */
}
.home-hero .hero-title{
margin: 0 0 .6rem; line-height: 1.12; color:#111827;
}
.home-hero .hero-subalt,
.home-hero .hero-loc,
.home-hero .hero-problems{
margin:.35rem 0; color:#374151;
}
/* 5) CTA butonları sağda hizalı kalsın */
.hero-cta-out{
display:flex; justify-content:flex-end; gap:.75rem;
padding-right: var(--hero-right-pad);
z-index: 2;
}
}
/* Mobil/tablet düzenine dokunma */
@media (max-width:1023px){
.home-hero__inner{ text-align:center; padding: 2rem 6vw; color:#1f2937; }
}
/* HERO overlay kapalı */
.home-hero__overlay {
display: none !important;
}
/* === HERO: Silikliği tamamen KAPAT (yalnızca .home-hero alanında) === */
/* 1) Her tür overlay/pseudo katmanı kapat */
.home-hero__overlay,
.home-hero .overlay,
.home-hero [class*="overlay"],
.home-hero::before,
.home-hero::after {
background: none !important;
display: none !important;
opacity: 0 !important;
content: none !important;
pointer-events: none !important;
}
/* 2) Arka plan görseline gelen opaklık/filtre/karışım modlarını sıfırla */
.home-hero__bg,
.home-hero [class*="bg"],
.home-hero img,
.home-hero svg {
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
/* 3) Bölümün kendi arka planından gelen beyaz/gradyan varsa temizle */
.home-hero {
background: none !important; /* varsa gradyan veya yarı saydam arka planı sıfırla */
}
/* 4) Masaüstünde soldaki görsel net kalsın, metin sağda okunaklı olsun (isteğe bağlı) */
@media (min-width:1024px){
.home-hero__overlay { display:none !important; } /* garanti olsun */
}
/* ========== LIBERTA HERO DÜZEN ========== */
/* Dönen başlık: tek satır, biraz daha yukarı */
.liberta-kayan{
white-space: nowrap; /* tek satır */
overflow: hidden; /* taşmaları gizle */
text-overflow: ellipsis; /* aşırı uzunlukta zarif kesme */
display: inline-block;
transform: translateY(-8px); /* biraz yukarı al */
line-height: 1.05;
font-weight: 800;
letter-spacing: 0.1px;
/* Ekrana göre akıllı boyut: mobilde küçül, desktopta büyü */
font-size: clamp(24px, 3.6vw, 44px);
}
/* Manşet metin: ortala, güçlü tipografi */
.liberta-manset{
text-align: center;
font-weight: 800;
margin: 10px 0 14px;
line-height: 1.25;
font-size: clamp(18px, 2.2vw, 28px);
color: #5a2a91; /* senin mor gamına uygun; istersen çıkar */
}
/* CTA butonlarını manşetin altına hizala ve yan yana ortala */
.liberta-cta{
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin: 6px 0 8px;
flex-wrap: wrap;
}
/* Var olan buton stillerini bozma; sadece biraz ağırlık verelim */
.liberta-cta a, .liberta-cta .elementor-button{
font-weight: 700;
padding: 12px 18px;
border-radius: 999px; /* hap buton */
}
/* İtalik sosyal sorumluluk notu */
.liberta-note{
text-align: center;
font-style: italic;
opacity: .9;
margin-top: 6px;
font-size: clamp(13px, 1.4vw, 16px);
}
/* Hero sağ sütunu genel merkezleme – ekran genişliğinde nefes aldırır */
@media (min-width: 768px){
.liberta-kayan, .liberta-manset, .liberta-cta, .liberta-note{
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
}
/* Çok küçük ekranda başlık sığmazsa harf aralığını sıkılaştır */
@media (max-width: 360px){
.liberta-kayan{
letter-spacing: 0;
font-size: 22px;
}
}
.liberta-kayan { outline: 2px dashed #f0b !important; }
/* ===== LIBERTA HERO (scope: #liberta-hero) ===== */
#liberta-hero .home-hero__inner{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Dönen başlık: tek satır + biraz yukarı */
#liberta-hero .hero-title{
order: 1;
margin: 0 0 6px;
line-height: 1.05;
transform: translateY(-6px); /* hafif yukarı */
font-size: clamp(26px, 3.6vw, 44px);
font-weight: 800;
}
#liberta-hero #hero-rotator{
display: inline-block;
white-space: nowrap; /* tek satır */
max-width: 90vw; /* taşmaları kırp */
overflow: hidden;
text-overflow: ellipsis;
}
/* Manşet: ortaya, kuvvetli tipografi */
#liberta-hero .hero-problems{
order: 2;
margin: 8px 0 12px;
font-weight: 800;
line-height: 1.25;
font-size: clamp(18px, 2.4vw, 32px);
color: #5e35b1; /* markanın mor gamı */
}
#liberta-hero .hero-problems strong{ font-weight: 900; }
/* CTA’lar: manşetin hemen altında, ortalı */
#liberta-hero .hero-cta{
order: 3;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin: 6px 0 6px;
}
#liberta-hero .hero-cta a,
#liberta-hero .hero-cta .elementor-button{
font-weight: 700;
padding: 12px 18px;
border-radius: 999px; /* hap buton */
}
/* İtalik sosyal sorumluluk notu */
#liberta-hero .hero-note{
order: 4;
margin: 6px 0 2px;
font-style: italic;
opacity: .95;
font-size: clamp(13px, 1.4vw, 16px);
}
#liberta-hero .hero-note .hash{ opacity:.9; }
/* Alt metinler: daha aşağıda ve sade */
#liberta-hero .hero-subalt{ order: 5; opacity: .9; margin-top: 10px; }
#liberta-hero .hero-loc{ order: 6; opacity: .9; }
/* Küçük ekranlarda başlık sığmazsa harf aralığını sık */
@media (max-width: 380px){
#liberta-hero #hero-rotator{ letter-spacing: 0; }
#liberta-hero .hero-title{ font-size: 24px; }
}
/* ====== HERO: dönen başlık + manşet ince ayarı ====== */
/* 1) Dönen başlık: tek satır, biraz yukarı ve çok az sola */
#liberta-hero .hero-title{
position: relative;
/* hafif yukarı + çok az sola */
transform: translate(-10px, -14px);
margin: 0 0 6px;
line-height: 1.02;
font-weight: 800;
/* tek satıra zorlamak için üst sınırı bir tık düşürüyoruz */
font-size: clamp(26px, 3.2vw, 40px);
}
#liberta-hero #hero-rotator{
display: inline-block;
white-space: nowrap; /* tek satır */
overflow: hidden; /* taşanı gizle */
text-overflow: ellipsis; /* çok uzarsa zarif kes */
max-width: 90vw; /* güvenlik jileti */
}
/* 2) MANŞET: tam ortada, en fazla 3 satır */
#liberta-hero .hero-problems{
text-align: center;
font-weight: 800;
line-height: 1.28;
color: #5e35b1;
margin: 8px auto 12px;
/* yaklaşık 3 satırda kırılacak bir ölçü: */
max-width: 42ch; /* desktop için ~3 satır */
font-size: clamp(18px, 2.2vw, 28px);
/* 3 satırı AŞMA: fazlasını kes */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* "SON!" vurgusu daha tok */
#liberta-hero .hero-problems strong{
font-weight: 900;
}
/* Küçük ekranda sola kaydırmayı azalt, sığmayı koru */
@media (max-width: 768px){
#liberta-hero .hero-title{
transform: translate(-4px, -10px);
font-size: clamp(22px, 5vw, 34px);
}
#liberta-hero .hero-problems{
max-width: 36ch; /* mobilde 3 satır */
}
}
/* ===== HERO: Dönen başlık mikro-konumlandırma (yalnızca başlık) ===== */
#liberta-hero{
/* kolay ayar için değişkenler */
--heroTitleShiftX: -118px; /* biraz sola */
--heroTitleShiftY: -90px; /* daha yukarı (yaklaşık 2.5 satır) */
--heroTitleMax: 36px; /* tek satıra sığmazsa düşür */
}
#liberta-hero .hero-title{
position: relative;
transform: translate(var(--heroTitleShiftX), var(--heroTitleShiftY));
margin: 0 0 6px;
line-height: 1.02;
font-weight: 800;
/* ekrana sığsın diye üst sınırı biraz küçültüyoruz */
font-size: clamp(22px, 2.8vw, var(--heroTitleMax));
}
#liberta-hero #hero-rotator{
display: inline-block;
white-space: nowrap; /* tek satır */
overflow: hidden;
text-overflow: ellipsis; /* aşarsa zarif kes */
max-width: 84vw; /* emniyet kemeri */
letter-spacing: .1px; /* karakter aralığını dengeler */
}
/* Mobilde kaydırmayı biraz azalt */
@media (max-width: 768px){
#liberta-hero{
--heroTitleShiftX: -566px;
--heroTitleShiftY: -154px;
--heroTitleMax: 32px;
}
}
/* Manşet 3 satırda kalsın ama SON mutlaka görünsün */
#liberta-hero .hero-problems{
max-width: 48ch; /* 42ch → 48ch: ilk kısım 2 satıra sığsın */
font-size: clamp(18px, 2.1vw, 27px); /* 28px → 27px: 1 tık küçült */
line-height: 1.28;
display: -webkit-box;
-webkit-line-clamp: 3; /* toplam 3 satır */
-webkit-box-orient: vertical;
overflow: hidden;
color: #5e35b1;
font-weight: 800;
}
#liberta-hero .hero-problems strong{
display: block; /* 3. satırda tek başına dursun */
font-weight: 900;
}
@media (max-width: 768px){
#liberta-hero .hero-problems{ max-width: 40ch; } /* mobil daralt */
}
/* önce önceki clamp'ı etkisizleştir */
#liberta-hero .hero-problems{
display: block !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
/* manşet tipografisi (aynı kalabilir) */
#liberta-hero .hero-problems{
text-align: center;
font-weight: 800;
line-height: 1.28;
color: #5e35b1;
margin: 8px auto 12px;
font-size: clamp(18px, 2.2vw, 28px);
max-width: 42ch;
}
/* ilk kısım en fazla 3 satır */
#liberta-hero .hero-problems .hp-1{
display: -webkit-box;
-webkit-line-clamp: 3; /* 3 satırda kes */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* SON! daima görünür, 3. satır rolünde */
#liberta-hero .hero-problems .hp-2{
display: block;
margin-top: 2px;
font-weight: 900;
}
@media (max-width: 768px){
#liberta-hero .hero-problems{ max-width: 38ch; }
}
/* ==== Liberta: Logo'yu header içinde büyüt (yükseklik sabit) ==== */
/* 1) Header yüksekliğini kilitle (mevcut yüksekliğine göre ayarla) */
:root { --libertaHeaderH: 64px; } /* 56–68px arası deneyebilirsin */
.liberta-nav {
height: var(--libertaHeaderH);
padding-top: 0;
padding-bottom: 0; /* dikey padding bırakma */
display: flex;
align-items: center;
}
/* 2) Logonun kapsayıcısı: sağa doğru daha geniş yer ver */
.liberta-nav .logo,
.liberta-nav .site-branding,
.liberta-nav .brand {
flex: 0 0 260px; /* SAĞA DOĞRU GENİŞLESİN → 220–320px arası oynat */
display: flex;
align-items: center;
}
/* 3) Logo görseli: dikeyde header kadar, yatayda otomatik (bozulma yok) */
.liberta-nav .logo img,
.liberta-nav .site-branding img,
.site-logo img {
height: calc(var(--libertaHeaderH) - 6px); /* üst-alt 3px nefes */
width: auto;
display: block;
}
/* 4) Menü sıkışmasın diye (opsiyonel) minimum taşma kontrolü */
@media (max-width: 1024px){
.liberta-nav .logo,
.liberta-nav .site-branding,
.liberta-nav .brand { flex-basis: 220px; } /* tablet için biraz küçült */
}
#liberta-hero .hero-subalt{
font-style: italic;
font-size: clamp(12px, 1.4vw, 14px);
line-height: 1.45;
opacity: 0.9;
margin-top: 8px;
}
/* === DESKTOP HEADER ROLLBACK === */
@media (min-width: 1024px) {
/* Header konteyner sınıfın buysa koru; farklıysa kendi sınıfını yaz */
.liberta-nav,
.site-header,
header.site-header {
/* Eski “yükseklik/padding”e dönüyoruz — önce şu güvenli değerle açalım */
min-height: 110px; /* gerekirse 96–120px arası oynarız */
padding-block: 16px; /* eskiy(e) yakınsa kalsın, değilse rakamı söyle ayarlayayım */
background-size: cover;
background-position: center;
align-items: center;
}
/* Menü linkleri header yüksekliğine uyumlu hizalansın (varsa kendi sınıfını hedefle) */
.main-navigation .menu > li > a {
line-height: 1.2; /* satır yüksekliğini abartmıyoruz */
padding-block: 14px; /* tıklanabilir alan */
}
}
/* Neon yazıyı anında gizle (kalıcı silmeyi Adım 2’de yapacağız) */
.neon-click,
.neon-text,
.header-neon,
#neon-click {
display: none !important;
}
/* === MENÜ: Alt menü ibaresi (desktop + mobil) === */
/* Desktop: aşağı ok (▾) */
@media (min-width: 1024px) {
.main-navigation .menu > li.menu-item-has-children > a::after {
content: "▾";
display: inline-block;
margin-left: 8px;
font-size: 0.85em;
line-height: 1;
opacity: 0.85;
transition: transform .2s ease, opacity .2s ease;
}
/* Hover/focus’ta hafif hareket */
.main-navigation .menu > li.menu-item-has-children:hover > a::after,
.main-navigation .menu > li.menu-item-has-children:focus-within > a::after {
transform: rotate(180deg);
opacity: 1;
}
}
/* Mobil (off-canvas): sağ ok (›) — sadece görsel uyarı */
.offcanvas-nav .mobile-menu li.menu-item-has-children > a::after {
content: "›";
float: right;
font-size: 1em;
line-height: 1;
opacity: 0.85;
transform: translateY(1px);
}
/* === MENÜ: Alt menü ibaresi (DESKTOP) — .desktop-menu > nav > .menu yapısına göre === */
@media (min-width: 1024px) {
.desktop-menu nav .menu > li.menu-item-has-children > a {
position: relative;
padding-right: 16px; /* oka yer aç */
}
.desktop-menu nav .menu > li.menu-item-has-children > a::after {
content: "\25BE"; /* ▾ (güvenli unicode kaçışı) */
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-48%);
font-size: 0.85em;
line-height: 1;
opacity: 0.9;
pointer-events: none;
}
/* Hover/focus’ta mikro animasyon istersen: */
.desktop-menu nav .menu > li.menu-item-has-children:hover > a::after,
.desktop-menu nav .menu > li.menu-item-has-children:focus-within > a::after {
transform: translateY(-48%) rotate(180deg);
}
}
/* === Mobil off-canvas için uyarı oku kalsın (istersen) === */
.offcanvas-nav .mobile-menu li.menu-item-has-children > a::after {
content: "\203A"; /* › */
float: right;
font-size: 1em;
line-height: 1;
opacity: 0.85;
transform: translateY(1px);
}
/* === SADECE DESKTOP === */
@media (min-width: 1024px) {
/* 2. seviye: "alt menüsü var" oku (sadece alt menüsü olan ikinci seviye maddeler) */
.desktop-menu nav .menu > li.menu-item-has-children .sub-menu > li.menu-item-has-children > a {
position: relative;
padding-right: 16px; /* oka yer aç */
}
.desktop-menu nav .menu > li.menu-item-has-children .sub-menu > li.menu-item-has-children > a::after {
content: "\203A"; /* › */
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-48%);
font-size: 0.85em;
line-height: 1;
opacity: 0.9;
pointer-events: none;
}
/* Ebeveynlerde taşmayı engelleme (flyout görünür kalsın) */
.desktop-menu nav .menu li { overflow: visible; }
/* --- SAĞA AÇILAN ÖZEL MADDENİN FLYOUT'U --- */
.desktop-menu nav .menu .sub-menu > li.flyout-right { position: relative; }
.desktop-menu nav .menu .sub-menu > li.flyout-right > .sub-menu {
display: none;
position: absolute;
left: 100%; /* sağa aç */
top: 0;
min-width: 220px;
z-index: 9999;
}
.desktop-menu nav .menu .sub-menu > li.flyout-right:hover > .sub-menu,
.desktop-menu nav .menu .sub-menu > li.flyout-right:focus-within > .sub-menu {
display: block;
}
/* --- SOLA AÇILAN VERSİYON (istersen sınıfı flyout-left ver) --- */
.desktop-menu nav .menu .sub-menu > li.flyout-left { position: relative; }
.desktop-menu nav .menu .sub-menu > li.flyout-left > .sub-menu {
display: none;
position: absolute;
right: 100%; /* sola aç */
left: auto;
top: 0;
min-width: 220px;
z-index: 9999;
}
.desktop-menu nav .menu .sub-menu > li.flyout-left:hover > .sub-menu,
.desktop-menu nav .menu .sub-menu > li.flyout-left:focus-within > .sub-menu {
display: block;
}
}
/* ================== LIBERTA FOOTER ================== */
.liberta-footer {
background: #0f0f12; /* koyu arka plan */
color: #eaeaea;
padding: 48px 20px;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.05);
}
.liberta-footer__inner {
max-width: 980px;
margin: 0 auto;
}
/* Logo veya wordmark */
.liberta-footer__logo img {
height: 56px;
width: auto;
display: inline-block;
margin-bottom: 16px;
}
.liberta-wordmark {
display: inline-block;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.5px;
color: #fff;
margin-bottom: 16px;
}
/* Tagline */
.liberta-footer__tagline {
font-size: 16px;
line-height: 1.5;
opacity: 0.9;
margin: 4px 0 20px;
}
/* Menü */
.liberta-footer__menu {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: inline-flex;
gap: 18px;
flex-wrap: wrap;
}
.liberta-footer__menu a {
color: #eaeaea;
text-decoration: none;
font-size: 14px;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.liberta-footer__menu a:hover {
opacity: 1;
text-decoration: underline;
}
/* İletişim butonları */
.liberta-footer__contact {
display: flex;
justify-content: center;
gap: 10px;
margin: 12px 0 10px;
flex-wrap: wrap;
}
/* Genel buton stili */
.btn {
display: inline-block;
border: 1px solid rgba(255,255,255,0.18);
padding: 10px 14px;
border-radius: 999px;
font-size: 14px;
text-decoration: none;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
color: #fff;
backdrop-filter: blur(6px);
background: rgba(255,255,255,0.06);
}
.btn:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.35);
}
/* WhatsApp */
.btn--whatsapp {
background: rgba(37,211,102,0.12);
border-color: rgba(37,211,102,0.4);
}
.btn--whatsapp:hover {
background: rgba(37,211,102,0.25);
border-color: rgba(37,211,102,0.6);
}
/* Facebook */
.btn--facebook {
background: rgba(59,89,152,0.12);
border-color: rgba(59,89,152,0.4);
}
.btn--facebook:hover {
background: rgba(59,89,152,0.25);
border-color: rgba(59,89,152,0.6);
}
/* Instagram */
.btn--insta {
background: rgba(225,48,108,0.12);
border-color: rgba(225,48,108,0.4);
}
.btn--insta:hover {
background: rgba(225,48,108,0.25);
border-color: rgba(225,48,108,0.6);
}
/* Adres */
.liberta-footer__address {
margin: 14px 0 10px;
font-style: normal;
font-size: 13px;
opacity: 0.9;
}
.liberta-footer__address a {
color: #eaeaea;
text-decoration: underline;
}
/* Telif satırı */
.liberta-footer__legal {
font-size: 12px;
opacity: 0.75;
margin-top: 8px;
}
/* Hover mikro-cila */
.liberta-footer .btn {
will-change: transform;
}
.liberta-footer .btn:active {
transform: translateY(0);
}
/* Mobil uyum */
@media (max-width: 480px) {
.liberta-footer {
padding: 40px 16px;
}
.liberta-footer__logo img {
height: 52px;
}
.liberta-footer__menu {
gap: 14px;
}
.btn {
padding: 10px 12px;
font-size: 13px;
}
}
/* === FIX: Mutlu Müşterilerimiz (reviews--full) tam genişlik override === */
section.reviews.reviews--full {
/* global 'section{ max-width:1200px; margin:auto; }' kuralını ez */
max-width: none !important;
width: 100vw !important;
/* container sınırını delip ekranı tamamen kapla */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
/* arka plan ve iç boşluk */
background: linear-gradient(135deg, #ff6f00, #5e35b1) !important;
color: #fff;
padding: 80px 0 !important;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
/* İçerik ortada kalsın, nefes alsın */
section.reviews.reviews--full .container,
section.reviews.reviews--full .container--wide {
max-width: 1200px !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Başlık görünürlüğü */
section.reviews.reviews--full h2,
section.reviews.reviews--full h2.section-title {
color: #fff !important;
text-align: center;
margin-bottom: 40px;
}
/* Mobil */
@media (max-width: 768px){
section.reviews.reviews--full { padding: 56px 0 !important; }
}
/* ===== REFERANSLARIMIZ — her şeyi ORTALA (full-bleed + merkez) ===== */
/* Başlık şeridi ve widget alanını ekranın tamamına aç */
.refs-hero,
.refs-widget{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
display: flex;
justify-content: center; /* içi merkez */
}
/* Başlık şeridi (üstteki gradient bar) */
.refs-hero{
background: linear-gradient(135deg, #ff6f00, #5e35b1);
color:#fff;
padding: 72px 0 24px;
text-align:center;
}
.refs-hero .refs-inner{
max-width: 1200px;
width: 100%;
padding: 0 20px;
}
.refs-hero h1{ margin:0 0 10px; font-weight:800; line-height:1.1; font-size:clamp(26px,3.4vw,40px); }
.refs-hero .lead{ margin:6px 0 0; opacity:.95; font-size:clamp(14px,2vw,18px); }
/* Trustindex alanı (alt gradient bar) */
.refs-widget{
background: linear-gradient(135deg, #ff6f00, #5e35b1);
color:#fff;
padding: 24px 0 80px;
text-align:center;
}
.refs-widget .refs-inner{
max-width: 1200px;
width: 100%;
padding: 0 20px;
}
/* Trustindex’in tüm kapsayıcılarını zorla merkeze al ve genişlet */
.refs-widget .ti-widget,
.refs-widget .ti-widget-container,
.refs-widget .ti-inner,
.refs-widget .ti-reviews-container{
max-width: 1100px !important;
margin: 0 auto !important;
text-align: center !important;
}
/* Kart ızgarasını gerçekten ortala + boşluklar */
.refs-widget .ti-reviews-container{
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 16px !important;
}
/* Tek tek kartlar arası nefes */
.refs-widget .ti-review{ margin: 8px !important; }
/* Alt açıklama */
.refs-footer{
text-align:center !important;
margin-top: 24px;
color: rgba(255,255,255,0.9);
font-size: 15px;
}
/* Mobil padding ayarı */
@media (max-width:768px){
.refs-hero{ padding:56px 0 20px; }
.refs-widget{ padding:20px 0 64px; }
}
/* ===== REFERANSLARIMIZ — full-bleed ve tam merkez ===== */
.refs-hero,
.refs-widget{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
display: flex;
justify-content: center;
text-align: center;
}
.refs-hero{
background: linear-gradient(135deg,#ff6f00,#5e35b1);
color:#fff;
padding: 72px 0 24px;
}
.refs-hero .refs-inner{
max-width: 1200px; width:100%; padding: 0 20px;
}
.refs-hero h1{ margin:0 0 10px; font-weight:800; line-height:1.1; font-size:clamp(26px,3.4vw,40px); }
.refs-hero .lead{ margin:6px 0 0; opacity:.95; font-size:clamp(14px,2vw,18px); }
.refs-widget{
background: linear-gradient(135deg,#ff6f00,#5e35b1);
color:#fff;
padding: 24px 0 80px;
}
.refs-widget .refs-inner{
max-width: 1200px; width:100%; padding: 0 20px;
}
/* Trustindex kapsayıcılarını zorla merkeze al */
.refs-widget :where(.ti-widget, .ti-widget-container, .ti-inner, .ti-reviews-container){
max-width: 1100px !important;
margin: 0 auto !important;
text-align: center !important;
}
/* Izgarayı gerçekten ortala */
.refs-widget .ti-reviews-container{
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 16px !important;
}
/* Kart aralıkları */
.refs-widget .ti-review{ margin: 8px !important; }
.refs-footer{ margin-top:24px; color:rgba(255,255,255,.9); font-size:15px; }
@media (max-width:768px){
.refs-hero{ padding:56px 0 20px; }
.refs-widget{ padding:20px 0 64px; }
}
/* ==== Köpek Eğitimi sayfası (page template) ==== */
.page-template-kopek-egitimi .site-content .widget-area { display:none; } /* varsa yan sütunu gizle */
.kopek-egitimi-page section,
.kopek-egitimi-page header { padding: 64px 20px; }
.kopek-egitimi-page .container { max-width: 1100px; margin: 0 auto; }
.ke-hero{
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
background: linear-gradient(135deg,#ff6f00,#5e35b1);
color:#fff; text-align:center; padding:84px 20px;
}
.ke-hero__inner{ max-width:1100px; margin:0 auto; }
.ke-hero h1{ margin:0 0 8px; font-weight:800; font-size:clamp(28px,3.8vw,44px); }
.ke-hero .lead{ opacity:.95; font-size:clamp(15px,2.2vw,20px); }
.ke-cta{ margin-top:16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.ke-cta .btn{ font-weight:700; padding:12px 18px; border-radius:999px; }
.ke-intro p{ font-size:1.05rem; color:#444; }
.ke-programs .grid{
display:grid; gap:18px;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.ke-programs .card{
background:#fff; border-radius:14px; padding:22px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.ke-programs .under-grid{ margin-top:14px; }
.ke-why .bullets{ columns:2; column-gap:28px; padding-left:18px; }
@media (max-width:768px){ .ke-why .bullets{ columns:1; } }
.ke-why li{ break-inside:avoid; margin:6px 0; }
.ke-steps .steps{ counter-reset:step; list-style:none; padding:0; }
.ke-steps .steps li{ margin:10px 0; padding-left:42px; position:relative; }
.ke-steps .steps li::before{
counter-increment:step; content:counter(step);
position:absolute; left:0; top:0; width:28px; height:28px; line-height:28px;
border-radius:50%; background:#ff9800; color:#fff; font-weight:800; text-align:center;
}
.ke-faq details{ border:1px solid #eee; border-radius:12px; padding:12px 14px; margin:10px 0; background:#fff; }
.ke-faq summary{ cursor:pointer; font-weight:700; }
.ke-faq .faq-a{ margin-top:8px; color:#444; }
.ke-refs-cta{ text-align:center; }
.ke-refs-cta .btn{ border:1px solid rgba(0,0,0,.12); padding:12px 18px; border-radius:999px; font-weight:700; }
/* Başlık bağlantı stili */
.ke-programs .card h3 {
font-size: 1.25rem;
margin: 16px 0 8px;
font-weight: 600;
}
.ke-programs .card h3 a {
text-decoration: none;
color: #2c3e50;
transition: color 0.2s ease;
}
.ke-programs .card h3 a:hover {
color: #27ae60; /* yeşilimsi vurgu */
}
/* CTA butonu (WhatsApp tarzı) */
.ke-cta .btn--whatsapp {
display: inline-block;
background-color: #128C7E; /* WhatsApp yeşili */
color: #fff;
padding: 14px 26px;
border-radius: 40px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-top: 25px;
}
.ke-cta .btn--whatsapp:hover {
background-color: #25D366; /* açık yeşil */
color: #000;
}
/* === YERİNDE KÖPEK EĞİTİMİ SAYFASI === */
.yerinde-hero {
position: relative;
text-align: center;
color: #fff;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.yerinde-hero .hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 1;
}
.yerinde-hero .hero-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 2;
}
.yerinde-hero .hero-inner {
position: relative;
z-index: 3;
}
.yerinde-hero h1 {
font-size: 2.2rem;
margin-bottom: 0.5rem;
}
.yerinde-hero p {
font-size: 1.1rem;
opacity: 0.95;
}
.yerinde-content {
max-width: 900px;
margin: 60px auto;
padding: 0 20px;
line-height: 1.7;
font-family: 'Poppins', sans-serif;
color: #333;
}
.yerinde-content h2,
.yerinde-content h3 {
color: #222;
margin-top: 30px;
font-weight: 600;
}
.yerinde-content ul {
padding-left: 20px;
list-style-type: disc;
}
.yerinde-content .cta-box {
background: #f5f5f5;
border-radius: 12px;
padding: 24px;
text-align: center;
margin-top: 40px;
}
.yerinde-content .cta-box .btn--whatsapp {
background: #128C7E;
color: #fff;
padding: 12px 22px;
border-radius: 30px;
text-decoration: none;
display: inline-block;
font-weight: 600;
margin-top: 12px;
transition: all .3s ease;
}
.yerinde-content .cta-box .btn--whatsapp:hover {
background: #25D366;
color: #000;
}
/* === Yerinde Eğitim sayfası – min stil === */
.yerinde-hero{position:relative;text-align:center;color:#fff;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.yerinde-hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1}
.yerinde-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));z-index:2}
.yerinde-hero .hero-inner{position:relative;z-index:3;padding:36px 16px}
.yerinde-hero h1{font-size:clamp(28px,4.2vw,44px);margin:0 0 8px}
.yerinde-hero .lead{font-size:clamp(16px,2vw,20px);opacity:.98}
.ke-cta .btn-strong{background:#128C7E !important;color:#fff !important;border:none}
.ke-cta .btn-strong:hover{background:#25D366 !important;color:#000 !important}
.ke-toc{max-width:980px;margin:22px auto;padding:12px 16px;border:1px solid #eee;border-radius:10px;background:#fafafa}
.ke-toc ul{margin:8px 0 0 0;padding-left:18px}
.ke-toc a{text-decoration:none}
.ke-toc a:hover{text-decoration:underline}
.ke-section .container{max-width:980px;margin:0 auto;padding:0 20px}
.ke-section h2{margin:26px 0 12px}
.bullets{padding-left:18px;list-style:disc}
.steps{padding-left:18px}
.cta-box{background:#f5f5f5;border-radius:12px;padding:20px;text-align:center;margin-top:24px}
.ke-links .program-links{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:8px 0}
.ke-links .program-links li{list-style:none}
.ke-links .program-links a{display:inline-block;padding:10px 14px;border-radius:999px;border:1px solid #ddd;text-decoration:none}
.ke-links .program-links a:hover{background:#fffbf4;border-color:#ff9800}
.ke-faq details{border:1px solid #eee;border-radius:10px;padding:12px 14px;margin:10px 0;background:#fff}
.ke-faq summary{cursor:pointer;font-weight:600}
/* Yerinde sayfa temel tipografi */
.yerinde-hero .hero-inner h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;margin:0 0 6px;}
.section.container h2{font-size:clamp(22px,3vw,32px);font-weight:800;margin:0 0 10px;}
/* CTA buton – koyu yeşil zemin, beyaz yazı; hover’da yazı siyah */
.btn.btn--whatsapp.solid{
background:#128C7E; color:#fff !important; border:2px solid #128C7E;
}
.btn.btn--whatsapp.solid:hover{ color:#000 !important; filter:brightness(1.05); }
/* İçerik kutuları */
.section.container{max-width:1100px;margin:0 auto;padding:40px 20px;}
.bullets{list-style:disc;padding-left:20px;}
/* Hero yerleşimi basit ve hızlı */
.yerinde-hero{position:relative;text-align:center}
.yerinde-hero .hero-media img{width:100%;height:auto;display:block}
.yerinde-hero .hero-inner{position:relative;margin-top:-22vw; /* görsel üstüne yazı bindirme */
padding:20px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35);}
@media(min-width:900px){.yerinde-hero .hero-inner{margin-top:-420px}}
/* ------- Yerinde sayfası genel ------- */
.yerinde-page { color:#111; line-height:1.6; }
/* Sabit header varsa (ör. 72px), hero'ya yer aç */
:root { --header-h: 72px; }
/* HERO */
.yerinde-hero{ position:relative; overflow:hidden; }
.yerinde-hero .hero-media{ position:relative; }
.yerinde-hero .hero-media::after{
content:""; position:absolute; inset:0;
/* Alttan yukarı gradyan: görsel üstünde metni okunur yapar */
background:linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.75) 100%);
pointer-events:none;
}
.yerinde-hero img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
/* Metin bloğu: header'a takılmasın, z-index üstte kalsın */
.yerinde-hero .hero-inner{
position:absolute; inset:auto 0 0 0; /* alt yapışık */
padding: clamp(16px, 3.5vw, 36px);
padding-top: calc(clamp(16px, 3.5vw, 36px) + var(--header-h));
z-index:2; color:#fff; text-align:left; max-width:1100px; margin:0 auto;
}
@media (min-width: 1200px){
.yerinde-hero .hero-inner{ left:50%; transform:translateX(-50%); }
}
.yerinde-hero h1{ font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; margin: 0 0 6px; }
.yerinde-hero .lead{ font-size: clamp(16px, 2.2vw, 19px); margin: 8px 0 16px; }
/* CTA – senin istediğin görünüm */
.btn.btn--whatsapp.solid{
background:#128C7E; color:#fff !important; border:2px solid #128C7E; font-weight:700;
}
.btn.btn--whatsapp.solid:hover{ color:#000 !important; filter:brightness(1.06); }
.btn.btn--outline{ border:2px solid #222; color:#222; }
.btn{ display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; margin-right:10px; }
/* Bölüm iskeleti */
.section.container{ max-width:1100px; margin:0 auto; padding:40px 20px; }
.section.container h2{ font-size:clamp(22px,3.2vw,34px); font-weight:800; margin:0 0 14px; }
.section.container h3{ font-size:clamp(18px,2.4vw,22px); font-weight:700; margin:22px 0 8px; }
/* Liste ve madde imleri */
.bullets{ list-style:disc; padding-left:22px; }
.steps{ counter-reset:s; list-style:none; padding-left:0; }
.steps li{ counter-increment:s; margin:8px 0; }
.steps li::before{ content: counter(s) "."; font-weight:700; margin-right:8px; }
/* Prose alanı: paragraf rengi ve görseller */
.prose{ color:#111; }
.prose p{ margin: 10px 0; }
.prose img{ display:block; max-width:100%; height:auto; border-radius:12px; margin:16px 0; }
/* SSS */
details.faq{ border:1px solid #e6e6e6; border-radius:10px; padding:12px 14px; margin:10px 0; background:#fff; }
details.faq summary{ cursor:pointer; font-weight:700; }
/* Cam efektli/gradient rozet — sadece bu sayfadaki hero alt cümle */
.yerinde-hero .hero-inner p{
display:inline-block;
margin-top:.35rem;
padding:10px 14px;
color:#fff;
font-weight:600;
line-height:1.35;
border-radius:12px;
background: linear-gradient(90deg, rgba(17,24,39,.78), rgba(88,28,135,.70));
backdrop-filter: blur(6px) saturate(120%); /* cam efekti */
-webkit-backdrop-filter: blur(6px) saturate(120%);
box-shadow:
0 8px 24px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.10) inset,
0 0 18px rgba(94,53,177,.28); /* morumsu parlama */
text-shadow: 0 2px 6px rgba(0,0,0,.45);
max-width: min(64ch, 92vw); /* uzun cümlede kırpma önlemi */
}
/* Hover’da küçük bir “ışıma” istersek */
.yerinde-hero .hero-inner p:hover{
box-shadow:
0 10px 30px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.14) inset,
0 0 26px rgba(255,255,255,.18),
0 0 28px rgba(88,28,135,.36);
}
/* Animasyon istemeyenler için erişilebilirlik */
@media (prefers-reduced-motion: reduce){
.yerinde-hero .hero-inner p{ transition:none !important; }
}
/* Hero alt cümleyi TEK SATIR yap + ekrana göre kendini küçült */
.yerinde-hero .hero-inner p{
white-space: nowrap; /* asıl sihir: satır kırma yok */
display: inline-block;
max-width: 100%; /* kapsayıcı taşmasını önle */
overflow: hidden; /* güvenlik */
text-overflow: clip; /* (ellipsis istemiyorsak) */
font-size: clamp(14px, 1.05vw + 0.7rem, 18px); /* ekrana göre akışkan */
padding: 10px 14px; /* rozetin kenarları */
}
/* Orta ekranlarda biraz küçült */
@media (max-width: 1024px){
.yerinde-hero .hero-inner p{
font-size: clamp(13px, 1.4vw + 0.55rem, 17px);
padding: 9px 12px;
}
}
/* Tablet */
@media (max-width: 768px){
.yerinde-hero .hero-inner p{
font-size: clamp(12px, 1.8vw + 0.45rem, 16px);
padding: 8px 12px;
}
}
/* Telefon */
@media (max-width: 480px){
.yerinde-hero .hero-inner p{
font-size: clamp(12px, 2.2vw + 0.35rem, 15px);
padding: 7px 10px;
}
}
/* Hero */
.yatili-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end}
.yatili-hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.yatili-hero .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55) 70%)}
.yatili-hero .hero-inner{position:relative;color:#fff;padding:48px 0 40px}
.yatili-hero h1{font-weight:800;font-size:clamp(28px,2.2vw+1rem,44px);line-height:1.1;margin:0 0 10px}
.yatili-hero .hero-tag{
display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;
background:rgba(20,20,20,.45);backdrop-filter:saturate(130%) blur(6px);
border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:10px 14px
}
/* Portrait görsel */
.media-portrait{
max-width:420px;margin:14px 0 18px;float:right; /* masaüstünde metni güzel sarar */
border-radius:16px;overflow:hidden;background:#f8fafc;border:1px solid #e5e7eb
}
.media-portrait img{display:block;width:100%;height:auto}
.media-portrait figcaption{font-size:.9rem;line-height:1.35;padding:10px 12px;color:#374151}
@media (max-width: 900px){ .media-portrait{float:none;max-width:92%;margin:10px auto} }
/* TOC chips */
.toc{margin:18px auto 26px}
.toc>span{font-weight:700;margin-right:8px}
.toc ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.toc a{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111;text-decoration:none}
.toc a:hover{background:#111;color:#fff}
/* CTA butonları: WhatsApp koyu yeşil, yazı beyaz; hover’da yazı siyah */
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.btn--whatsapp{background:#128C7E;color:#fff;border:1px solid #0d6f64}
.btn--whatsapp:hover{background:#1ad1b9;color:#111}
.btn--outline{border:1px solid #333;color:#111;background:#fff}
.btn--outline:hover{background:#111;color:#fff}
/* İçerik alanı */
.yatili-content h2{margin-top:36px}
.yatili-content ul{padding-left:1.2rem}
.yatili-content .cta-box{margin:28px 0;padding:18px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc}
.internal-links a{text-decoration:none;border-bottom:1px dotted #555}
/* YATILI HERO — full-bleed arka plan, içerik ortada */
#yatili-hero {
position: relative;
overflow: hidden; /* Taşmaları gizle */
/* Yüksekliği içeriğe göre oluşsun; minimum bir nefes verelim */
min-height: 520px; /* İstersen 460–640px arası oynatırız */
}
/* Arka planı viewport genişliğine oturt, merkezi referans al */
#yatili-hero .hero-bg {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw; /* Ekranın tamamı kadar genişlik */
transform: translateX(-50%); /* Tam ortala, sola kayma biter */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
}
/* Metin ve butonlar üstte kalsın */
#yatili-hero .hero-inner {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
padding: clamp(64px, 18vh, 160px) 16px clamp(32px, 10vh, 96px);
}
/* Overlay varsa yine de kapatalım (garanti) */
#yatili-hero .hero-overlay { display: none !important; }
#yatili-hero {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
min-height: 520px; /* gerekirse 480-620 arası ayarlarız */
display: flex;
align-items: center; /* içerik dikey ortalanır */
justify-content: center;
padding: 120px 0; /* üst-alt nefes */
text-align: center;
position: relative;
}
#yatili-hero .hero-inner {
position: relative;
z-index: 2;
color: #fff;
}
#yatili-hero .hero-tag {
margin: 12px 0 24px;
}
/* YATILI HERO - tam genişlik + görsel kırpılmasın */
#yatili-hero {
width: 100%;
max-width: 100%;
background-size: contain !important;
background-position: center bottom !important;
background-repeat: no-repeat !important;
background-color: #fdf6f0; /* anasayfadaki arka plan tonu */
padding: 120px 0 60px; /* üst-alt nefes, ayarlanır */
text-align: center;
position: relative;
overflow: hidden;
}
/* İçerik ortada kalmaya devam etsin */
#yatili-hero .hero-inner {
color: #000; /* tıpkı ana sayfada olduğu gibi siyah metin */
z-index: 2;
position: relative;
}
/* Başlık ve açıklama */
#yatili-hero h1 {
font-weight: 800;
font-size: 42px;
margin-bottom: 14px;
}
#yatili-hero .hero-tag {
font-size: 18px;
font-weight: 500;
max-width: 640px;
margin: 0 auto 28px;
}
/* CTA butonu */
#yatili-hero .ke-cta {
margin-top: 8px;
}
/* İÇİNDEKİLER KUTU */
.toc {
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 16px;
padding: 24px 28px;
margin: 48px auto;
}
.toc > span {
display: block;
font-size: 18px;
font-weight: 600;
margin-bottom: 18px;
color: #222;
}
/* Listeyi yatay hizala ve alta kaymasına izin ver */
.toc ul {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 0;
margin: 0;
list-style: none;
}
/* Etiket/pill tarzı link tasarımı */
.toc li a {
display: inline-block;
padding: 10px 18px;
background: #f5f5f5;
border-radius: 24px;
font-size: 14px;
color: #111;
text-decoration: none;
transition: 0.25s ease;
border: 1px solid transparent;
}
/* Hover efekti */
.toc li a:hover {
background: #ffffff;
border-color: #d6d6d6;
}
/* Aktif (scroll ile) istersek sonra yaparız */
/* KUTUYU MERKEZE OTURT */
.toc.container {
max-width: 900px; /* Yerinde Eğitim sayfasıyla birebir */
margin-left: auto;
margin-right: auto;
text-align: left; /* Başlık sola kalacak */
}
/* BAŞLIK (İÇİNDEKİLER) */
.toc > span {
font-size: 19px;
font-weight: 600;
color: #111;
margin-bottom: 18px;
display: block;
}
/* PİLL (ETİKET) BUTONLAR */
.toc li a {
font-weight: 500; /* ← tam o gördüğün yarı kalınlık */
background: #f6f6f6;
border-radius: 22px;
padding: 10px 18px;
color: #111;
border: 1px solid #e7e7e7;
transition: 0.25s;
}
/* Hover efekti – çok hafif */
.toc li a:hover {
background: #ffffff;
border-color: #d3d3d3;
}
/* İSTANBUL HERO — anasayfadaki mantık: kırpmasız, tam genişlik */
#istanbul-hero {
width: 100%;
max-width: 100%;
background-size: contain !important;
background-position: center bottom !important;
background-repeat: no-repeat !important;
background-color: #fdf6f0;
padding: 120px 0 60px;
text-align: center;
position: relative;
overflow: hidden;
}
#istanbul-hero .hero-inner { position: relative; z-index: 2; color:#000; }
#istanbul-hero h1 { font-weight: 800; font-size: 42px; margin-bottom: 14px; }
#istanbul-hero .hero-tag { font-size: 18px; font-weight: 500; max-width: 680px; margin: 0 auto 28px; }
/* TOC kutu ve pill’ler */
.toc { background:#fff; border:1px solid #e7e7e7; border-radius:16px; padding:24px 28px; margin:48px auto; }
.toc.container { max-width:900px; margin-left:auto; margin-right:auto; text-align:left; }
.toc > span { display:block; font-size:19px; font-weight:600; margin-bottom:18px; color:#111; }
.toc ul { display:flex; flex-wrap:wrap; gap:12px; padding:0; margin:0; list-style:none; }
.toc li a { display:inline-block; padding:10px 18px; background:#f6f6f6; border-radius:22px; font-size:14px; font-weight:500; color:#111; border:1px solid #e7e7e7; transition:.25s; text-decoration:none; }
.toc li a:hover { background:#fff; border-color:#d3d3d3; }
/* ISTANBUL HERO — tam genişlik, kırpmasız görünüm (anasayfa mantığı) */
#istanbul-hero{
width:100%;
max-width:100%;
background-size:contain!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#fdf6f0;
padding:120px 0 60px;
text-align:center;
position:relative;
overflow:hidden;
}
#istanbul-hero .hero-inner{position:relative;z-index:2;color:#000;}
#istanbul-hero h1{font-weight:800;font-size:42px;margin-bottom:14px;}
#istanbul-hero .hero-tag{font-size:18px;font-weight:500;max-width:720px;margin:0 auto 28px;}
/* WhatsApp butonu genel */
.btn.btn--whatsapp{
display:inline-block;
padding:12px 18px;
border-radius:10px;
background:#25D366;
color:#fff; text-decoration:none; font-weight:700;
border:1px solid rgba(0,0,0,.06);
transition:.25s;
}
.btn.btn--whatsapp:hover{filter:brightness(0.95);}
/* TOC (İçindekiler) kutusu ve pill'ler */
.toc{background:#fff;border:1px solid #e7e7e7;border-radius:16px;padding:24px 28px;margin:48px auto;}
.toc.container{max-width:900px;margin-left:auto;margin-right:auto;text-align:left;}
.toc>span{display:block;font-size:19px;font-weight:600;margin-bottom:18px;color:#111;}
.toc ul{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none;}
.toc li a{display:inline-block;padding:10px 18px;background:#f6f6f6;border-radius:22px;font-size:14px;font-weight:500;color:#111;border:1px solid #e7e7e7;transition:.25s;text-decoration:none;}
.toc li a:hover{background:#fff;border-color:#d3d3d3;}
/* İçerik bölümleri */
.section.container{max-width:900px;margin:48px auto;line-height:1.7;color:#222;}
.section h2{font-size:28px;margin:0 0 12px;font-weight:800;}
.section h3{font-size:20px;margin:24px 0 8px;font-weight:700;}
.section p{margin:0 0 14px;}
.routes{margin:12px 0 0 18px;}
.routes li{margin:4px 0;}
/* Mobil uyum */
@media (max-width: 768px){
#istanbul-hero{padding:96px 0 48px;}
#istanbul-hero h1{font-size:34px;}
#istanbul-hero .hero-tag{font-size:16px;max-width:90%;}
.section.container{margin:32px auto;padding:0 16px;}
}
/* GP container uyumu */
.section.container, .toc.container, #istanbul-hero .hero-inner {
max-width: 900px;
margin-left: auto; margin-right: auto;
}
.section.container, .toc.container { padding-left: 0; padding-right: 0; }
.grid-container .section.container,
.grid-container .toc.container,
.grid-container #istanbul-hero .hero-inner { max-width: 900px; }
/* Header/Nav kapalıysa anlaşılmasın diye: hiçbir şeyi kapatmıyoruz */
#istanbul-hero {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-color: #000; /* Görsel yüklenmeden önce siyah fonda dursun */
padding: 180px 0 120px; /* Başlık + butonu aşağıya çeker */
}
#istanbul-hero .hero-inner {
background: rgba(0,0,0,0.35);
backdrop-filter: blur(4px);
padding: 24px 32px;
border-radius: 10px;
display: inline-block;
}
#istanbul-hero h1,
#istanbul-hero .hero-tag {
color: #fff !important;
}
/* ===== HERO (header'ı bozmayan full-bleed) – DÜZELTİLMİŞ ===== */
.egitimler-hero{
position: relative;
padding: 160px 0 120px; /* yüksekliği aynen koru */
text-align: center;
overflow: visible; /* KESME! Full-bleed için serbest bırak */
}
.egitimler-hero::before{
content:"";
position:absolute;
top:0;
left:50%;
transform: translateX(-50%); /* tam ortala */
width:100vw; /* ekran genişliği kadar yay */
height:100%;
background: var(--hero) center bottom / cover no-repeat;
z-index:0;
pointer-events:none; /* altındaki buton tıklanabilir kalsın */
}
.egitimler-hero .hero-inner{ position:relative; z-index:1; }
.egitimler-hero .hero-band{
display:inline-block;
background:rgba(0,0,0,.35);
backdrop-filter:blur(4px);
padding:24px 32px;
border-radius:12px;
max-width:900px;
}
.egitimler-hero h1{ color:#fff; font-weight:800; font-size:42px; margin:0 0 10px; }
.egitimler-hero .hero-tag{ color:#fff; font-size:18px; font-weight:500; margin:0 0 18px; }
/* ===== EĞİTİMLER HERO — header'ı bozmadan ENİNE TAM SAYFA ===== */
.egitimler-hero{
position: relative;
/* section için daha önce globalde verilen max-width/margin:auto dursun;
arka planı pseudo ile 100vw açacağız. */
padding: 180px 0 140px; /* ikonlar altta görünsün diye biraz yüksek */
text-align: center;
overflow: visible; /* pseudo 100vw taşsın */
}
/* Arka planı viewport genişliğine yay: */
.egitimler-hero::before{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%); /* tam ortala */
width: 100vw; /* ENİNE TAM SAYFA */
height: 100%;
background: var(--hero) center bottom / cover no-repeat;
z-index: 0;
pointer-events: none; /* altındaki butonlar tıklanabilir kalsın */
}
/* İçerik her zaman görselin üstünde dursun */
.egitimler-hero .hero-inner{ position: relative; z-index: 1; }
/* Şerit (cam efekti) */
.egitimler-hero .hero-band{
display: inline-block;
background: rgba(0,0,0,.35);
backdrop-filter: blur(4px);
padding: 24px 32px;
border-radius: 12px;
max-width: 900px;
}
/* Yazılar beyaz ve net */
.egitimler-hero h1{
color:#fff; font-weight:800; font-size:42px; margin:0 0 10px;
}
.egitimler-hero .hero-tag{
color:#fff; font-size:18px; font-weight:500; margin:0 0 18px;
}
/* Tablet/telefon için nefes */
@media (max-width: 1024px){
.egitimler-hero{ padding: 140px 0 120px; }
}
@media (max-width: 640px){
.egitimler-hero{ padding: 120px 0 100px; }
}
/* === Temel İtaat hero: metni tamamen SAĞA taşı (glass yok) === */
.temel-itaat-hero .hero-inner{
display:flex;
justify-content:flex-end; /* sağa it */
align-items:center;
width:100%;
padding-right: clamp(48px, 99vw, 160px); /* sağdan güvenli nefes */
padding-left: 24px; /* sola min. nefes */
box-sizing: border-box;
}
.temel-itaat-hero .hero-band{
background: transparent !important; /* cam/gri yok */
backdrop-filter: none !important;
box-shadow: none !important;
border: 0 !important;
padding: 0; /* çıplak metin */
max-width: min(620px, 42vw); /* sağ bloğun genişliği */
text-align: right; /* sağa hizalı tipografi */
}
.temel-itaat-hero h1{
color: #111 !important; /* açık zeminde koyu metin */
margin: 0 0 10px;
}
.temel-itaat-hero .hero-tag{
color: #333 !important;
margin: 0 0 18px;
}
.temel-itaat-hero .ke-cta{
display:flex; justify-content:flex-end;
}
/* Küçük ekranlarda tekrar ortaya al */
@media (max-width: 1023px){
.temel-itaat-hero .hero-inner{
justify-content:center;
padding-right: 20px;
padding-left: 20px;
}
.temel-itaat-hero .hero-band{
max-width: 780px;
text-align: center;
}
.temel-itaat-hero .ke-cta{ justify-content:center; }
}
/* 1) İçerik taşıyıcıyı ekrana aç ama sağ boşluğu KÜÇÜLT */
.temel-itaat-hero .hero-inner{
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
display: flex;
justify-content: flex-end; /* sağa hizala */
align-items: center;
padding-right: 6vw; /* 22vw değil → 6vw (daha SAĞA gelir) */
padding-left: 24px;
box-sizing: border-box;
}
/* 2) Kartı ince ayarla: sağa +2–6vw kadar itmek için translate kullan */
.temel-itaat-hero .hero-band{
margin-left: auto; /* sağ kenara yasla */
max-width: 880px;
transform: translateX(4vw); /* + değer sağa taşır; 2–6vw arası dene */
}
/* 3) Mobilde ortala (dokunma — zaten doğruydu) */
@media (max-width: 1023px){
.temel-itaat-hero .hero-inner{
justify-content: center;
padding-right: 20px;
padding-left: 20px;
}
.temel-itaat-hero .hero-band{
transform: none;
max-width: 780px;
text-align: center;
}
}
.temel-itaat-hero .ke-cta{
display: flex;
justify-content: center; /* butonu ortalar */
width: 100%;
}
/* === TUVALET HERO: full-bleed + alta sabitle === */
.tuvalet-hero{
position: relative;
width: 100vw; /* tam ekran genişlik */
margin-left: calc(50% - 50vw); /* container dışına taş */
margin-right: calc(50% - 50vw);
min-height: clamp(420px, 52vw, 720px); /* yüksekliği ekrana göre ölçekle */
padding: clamp(140px, 18vw, 240px) 0 /* üst boşluk */
clamp(110px, 12vw, 200px); /* alt boşluk: alttaki köpekler kesilmesin */
overflow: visible;
z-index: 0;
}
.tuvalet-hero::before{
content:"";
position:absolute; inset:0;
background-image:url('https://libertakopekokulu.com/wp-content/uploads/2025/10/tuvalet-egitimi-istanbul.png');
background-size: cover; /* enine tam ekran kapla */
background-position: center bottom; /* ALTA yasla, üstten kırpma daha çok olsun */
background-repeat: no-repeat;
z-index:-1;
}
/* İçerik bandı (başlık+tagline+buton) için güvenli iç boşluk */
.tuvalet-hero .hero-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
/* Tema içerik sarmalayıcısı taşmasın diye görünür kıl */
.site-content, .site-main { overflow: visible; }
/* Tablet ve altı: görüntüyü korurken yükseklik ayarı */
@media (max-width: 1023px){
.tuvalet-hero{
min-height: 56vh;
padding: 120px 0 140px;
}
}
/* === TUVALET EĞİTİMİ — HERO (kırpmadan, enine tam, alta sabit) === */
.page-template-tuvalet-egitimi .tuvalet-hero{
position: relative;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: clamp(440px, 52vw, 780px) !important; /* yüksekliği ekranla ölçekle */
padding-top: clamp(120px, 14vw, 220px) !important; /* menüden aşağı nefes */
padding-bottom: clamp(110px, 12vw, 200px) !important;/* alttaki köpekler görünür kalsın */
overflow: visible !important;
background: none !important;
}
.page-template-tuvalet-egitimi .tuvalet-hero::before{
content:"";
position:absolute; inset:0;
left:50%; transform:translateX(-50%); /* görseli tam ortala */
width:100vw; height:100%;
background-image:url('https://libertakopekokulu.com/wp-content/uploads/2025/10/tuvalet-egitimi-istanbul.png') !important;
background-repeat:no-repeat !important;
background-position:center bottom !important; /* ALT sabit */
background-size:contain !important; /* KIRPMADAN tamamı */
background-color:#fdf6f0; /* boşluk kalırsa aynı zemin tonu */
z-index:-1;
}
/* İç metin güvenli alanı */
.page-template-tuvalet-egitimi .tuvalet-hero .hero-inner{
position:relative; z-index:1;
max-width:1100px; margin:0 auto; padding:0 20px;
}
/* Tablet ve altı: alanı biraz artır */
@media (max-width:1023px){
.page-template-tuvalet-egitimi .tuvalet-hero{
min-height: 60vh !important;
padding-top: 110px !important;
padding-bottom: 150px !important;
}
}
/* === TUVALET HERO TAM GENİŞLİK DÜZELTME === */
.page-template-tuvalet-egitimi .tuvalet-hero::before {
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:100vw;
height:100%;
background-image:url('https://libertakopekokulu.com/wp-content/uploads/2025/10/tuvalet-egitimi-istanbul.png');
background-repeat:no-repeat;
background-size:cover; /* ekranın tamamını kapla */
background-position:center center; /* tam ortala */
z-index:-1;
}
.page-template-tuvalet-egitimi .tuvalet-hero {
width:100vw;
margin-left:calc(50% - 50vw); /* container'dan taşı */
margin-right:calc(50% - 50vw);
overflow:visible;
min-height:680px; /* alan yeterli kalsın */
background:none !important;
}
/* === TUVALET HERO — KENARDAN KENARA TAM EKRAN (KİLİT AYAR) === */
.page-template-tuvalet-egitimi .tuvalet-hero{
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: 680px !important; /* gerekirse 540–780 arası değiştir */
padding-top: 140px !important; /* menüden nefes */
padding-bottom: 160px !important;
background: none !important;
overflow: visible !important;
z-index: 0 !important;
}
/* Arka plan görseli: tüm ekranı kapla, ortala */
.page-template-tuvalet-egitimi .tuvalet-hero::before{
content: "" !important;
position: absolute !important;
top: 0; left: 50% !important;
transform: translateX(-50%) !important;
width: 100vw !important;
height: 100% !important;
background-image: url('https://libertakopekokulu.com/wp-content/uploads/2025/10/tuvalet-egitimi-istanbul.png') !important;
background-repeat: no-repeat !important;
background-size: cover !important; /* enine tam ekran */
background-position: center bottom !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* GP/tema kapsayıcıları kesmesin diye görünür yap */
.page-template-tuvalet-egitimi .site-content,
.page-template-tuvalet-egitimi .site-main,
.page-template-tuvalet-egitimi .inside-article,
.page-template-tuvalet-egitimi .grid-container{
overflow: visible !important;
}
/* İçteki yazı alanı nefes alsın; görseli bozmaz */
.page-template-tuvalet-egitimi .tuvalet-hero .hero-inner{
max-width: 1100px; margin: 0 auto; padding: 0 20px;
}
/* === TUVALET EĞİTİMİ HERO — TAM GENİŞLİK VE TAM GÖRSEL === */
.page-template-tuvalet-egitimi .tuvalet-hero {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: 720px !important; /* yükseklik artırıldı */
padding: 160px 0 140px !important;
background: none !important;
overflow: visible !important;
text-align: right;
}
/* Arka plan görseli kenardan kenara */
.page-template-tuvalet-egitimi .tuvalet-hero::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 100vw !important;
height: 100% !important;
background-image: url('https://libertakopekokulu.com/wp-content/uploads/2025/10/tuvalet-egitimi-istanbul.png');
background-size: cover !important; /* tam ekran kaplama */
background-position: center bottom !important; /* alta hizalı */
background-repeat: no-repeat !important;
z-index: -1 !important;
}
/* Metin kısmı sağda kalsın ama görselin içine gömülmesin */
.page-template-tuvalet-egitimi .tuvalet-hero .hero-inner {
position: relative; z-index: 1;
max-width: 680px;
margin-right: 8%;
text-align: left;
}
/* Mobilde ortaya al */
@media (max-width: 768px) {
.page-template-tuvalet-egitimi .tuvalet-hero {
text-align: center !important;
padding: 140px 20px 100px !important;
}
.page-template-tuvalet-egitimi .tuvalet-hero .hero-inner {
margin: 0 auto;
text-align: center;
float: none;
}
}
/* === TUVALET HERO — KAFESİ KIR + 100vw ARKA PLAN === */
.tuvalet-hero{
/* section global sınırını ez */
max-width: none !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
/* üst/alt nefes */
padding: clamp(140px, 18vh, 200px) 0 clamp(120px, 14vh, 200px) !important;
position: relative !important;
overflow: visible !important;
background: none !important;
}
/* Arka planı gerçekten ekran genişliğine yay ve alta sabitle */
.tuvalet-hero::before{
content:"";
position:absolute;
top:0; bottom:0;
left:50% !important;
transform: translateX(-50%) !important;
width:100vw !important;
background-image:url('https://libertakopekokulu.com/wp-content/uploads/2025/10/tuvalet-egitimi-istanbul.png');
background-repeat:no-repeat !important;
background-size: cover !important; /* enine tam kapla */
background-position: center bottom !important; /* alttaki köpekler tam görünsün */
z-index:-1 !important;
}
/* Metni güvenli şekilde sağda tut; float’ı kaldır */
.tuvalet-hero .hero-inner{
position:relative; z-index:1;
float:none !important;
max-width: 700px;
margin: 0 8% 0 auto; /* sağa yasla */
text-align: left;
}
/* Kapsayıcıların kesmesini engelle (GeneratePress bazı layoutlarda gizleyebiliyor) */
.site-content, .site-main, .inside-article, .grid-container{
overflow: visible !important;
}
/* Mobilde ortaya */
@media (max-width:768px){
.tuvalet-hero{ padding: 120px 20px 110px !important; text-align:center !important; }
.tuvalet-hero .hero-inner{ margin:0 auto; text-align:center; }
}
/* === TUVALET HERO — Metni Ortala + Siyah Metin + Butonu Ortala === */
.page-template-tuvalet-egitimi .tuvalet-hero {
text-align: center !important; /* bölüm genel hizası */
}
.page-template-tuvalet-egitimi .tuvalet-hero .hero-inner {
max-width: 760px !important;
float: none !important;
margin: 0 auto !important; /* yatay merkez */
text-align: center !important; /* iç metin merkez */
}
.page-template-tuvalet-egitimi .tuvalet-hero h1,
.page-template-tuvalet-egitimi .tuvalet-hero p {
color: #111 !important; /* siyah metin */
text-shadow: none !important; /* varsa gölgeyi temizle */
}
.page-template-tuvalet-egitimi .tuvalet-egi̇ti̇mi̇ .tuvalet-hero a.btn,
.page-template-tuvalet-egitimi .tuvalet-hero .btn {
display: inline-flex !important; /* buton kutu gibi davransın */
justify-content: center; /* metni ortala */
align-items: center;
margin: 0 auto !important; /* BUTON ORTA */
}
@media (max-width: 768px){
.page-template-tuvalet-egitimi .tuvalet-hero { padding-left: 20px; padding-right: 20px; }
}
/* === TUVALET HERO · Zorunlu Override: Metni ortaya + siyah yazı + buton ortaya === */
.tuvalet-hero,
.tuvalet-hero * { box-sizing: border-box; }
.tuvalet-hero {
text-align: center !important; /* bölüm hizası */
color: #111 !important; /* default yazı rengi siyah */
}
.tuvalet-hero .hero-inner {
float: none !important; /* sağ float'ı iptal et */
margin: 0 auto !important; /* yatay merkez */
max-width: 760px !important;
text-align: center !important; /* iç metni merkezle */
}
.tuvalet-hero h1,
.tuvalet-hero p {
color: #111 !important; /* beyazı ez, siyah yap */
text-shadow: none !important; /* varsa gölgeyi iptal et */
}
.tuvalet-hero a.btn,
.tuvalet-hero .btn {
display: inline-block !important;
margin: 0 auto !important; /* butonu tam ortaya kilitle */
float: none !important; /* olası float'ları öldür */
}
/* === SOSYALİZASYON HERO — KENARDAN KENARA TAM GENİŞLİK + COVER === */
#sosyal-hero{
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
color: #fff !important;
/* full-bleed: tema container sınırını kır */
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
/* yükseklik (ekrana göre ölçek) */
min-height: clamp(520px, 56vw, 820px) !important;
overflow: hidden !important;
z-index: 0 !important;
}
/* Arka plan: tek satırda kesin çözüm (cover + merkez) */
#sosyal-hero::before{
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100vw !important;
height: 100% !important;
background-image: url('https://libertakopekokulu.com/wp-content/uploads/2025/10/kopek-sosyalizasyon-egitimi-geotagged.png') !important;
background-repeat: no-repeat !important;
background-size: cover !important; /* enine tam kapla */
background-position: center center !important;
z-index: -1 !important;
pointer-events: none !important;
}
/* İçerik: tam ortada dursun */
#sosyal-hero .hero-inner{
position: relative !important;
z-index: 1 !important;
max-width: 980px !important;
padding: 0 20px !important;
}
#sosyal-hero h1{
font-size: clamp(34px, 4.8vw, 60px) !important;
font-weight: 800 !important;
line-height: 1.08 !important;
margin: 0 0 10px !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}
#sosyal-hero .tagline{
font-size: clamp(16px, 2.2vw, 22px) !important;
margin: 6px auto 16px !important;
max-width: 62ch !important;
text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}
#sosyal-hero .btn{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 12px 20px !important;
border-radius: 999px !important;
font-weight: 800 !important;
text-decoration: none !important;
background: #25D366 !important;
color: #fff !important;
border: 1px solid rgba(0,0,0,.06) !important;
transition: .2s !important;
}
#sosyal-hero .btn:hover{ filter: brightness(.95) !important; transform: translateY(-1px) !important; }
/* Mobil nefes */
@media (max-width: 768px){
#sosyal-hero{ min-height: 64vh !important; }
}
/* === SOSYALİZASYON HERO — GERÇEKTEN TAM GENİŞLİK + COVER + MERKEZ === */
/* 1️⃣ Tema konteyner kısıtlamalarını kaldır */
.site-content,
.site-main,
.inside-article,
.grid-container,
.generatepress-container,
.container {
max-width: none !important;
width: 100% !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2️⃣ Hero alanı ayarları */
#sosyal-hero {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
color: #fff !important;
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: clamp(520px, 56vw, 820px) !important;
overflow: hidden !important;
}
/* 3️⃣ Arka plan görseli */
#sosyal-hero::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: url("https://libertakopekokulu.com/wp-content/uploads/2025/10/kopek-sosyalizasyon-egitimi-geotagged.png")
center center / cover no-repeat !important;
z-index: -1 !important;
}
/* 4️⃣ İçerik */
#sosyal-hero .hero-inner {
position: relative !important;
z-index: 1 !important;
max-width: 960px !important;
padding: 0 20px !important;
}
/* 5️⃣ Yazı ve buton stili */
#sosyal-hero h1 {
font-size: clamp(34px, 4.8vw, 60px) !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
margin: 0 0 10px !important;
}
#sosyal-hero .tagline {
font-size: clamp(16px, 2.2vw, 22px) !important;
margin: 6px auto 16px !important;
max-width: 62ch !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
#sosyal-hero .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 12px 24px !important;
border-radius: 999px !important;
font-weight: 800 !important;
background: #25D366 !important;
color: #fff !important;
text-decoration: none !important;
border: none !important;
transition: 0.2s ease !important;
}
#sosyal-hero .btn:hover {
filter: brightness(0.9) !important;
transform: translateY(-1px) !important;
}
/* 6️⃣ Mobil uyum */
@media (max-width: 768px) {
#sosyal-hero {
min-height: 70vh !important;
}
#sosyal-hero h1 {
font-size: 32px !important;
}
}
/* === SOSYAL HERO · MUTLAK OVERRIDE === */
.sosyal-hero,
.sosyal-hero * { box-sizing: border-box !important; }
.sosyal-hero {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
color: #fff !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
min-height: clamp(520px, 56vw, 820px) !important;
overflow: hidden !important;
z-index: 0 !important;
isolation: isolate !important;
}
.sosyal-hero::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: url("https://libertakopekokulu.com/wp-content/uploads/2025/10/kopek-sosyalizasyon-egitimi-geotagged.png")
center center / cover no-repeat !important;
z-index: -1 !important;
pointer-events: none !important;
}
.sosyal-hero .hero-inner {
position: relative !important;
z-index: 1 !important;
max-width: 960px !important;
padding: 0 20px !important;
}
.sosyal-hero h1 {
font-size: clamp(34px, 4.8vw, 60px) !important;
font-weight: 800 !important;
line-height: 1.1 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
margin: 0 0 10px !important;
}
.sosyal-hero .tagline {
font-size: clamp(16px, 2.2vw, 22px) !important;
margin: 6px auto 16px !important;
max-width: 62ch !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}
.sosyal-hero .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
padding: 12px 24px !important;
border-radius: 999px !important;
font-weight: 800 !important;
background: #25D366 !important;
color: #fff !important;
text-decoration: none !important;
border: none !important;
transition: 0.2s ease !important;
}
.sosyal-hero .btn:hover {
filter: brightness(0.9) !important;
transform: translateY(-1px) !important;
}
/* Mobil nefes */
@media (max-width: 768px) {
.sosyal-hero {
min-height: 70vh !important;
}
.sosyal-hero h1 {
font-size: 32px !important;
}
}
/* ——— Masaüstünde ikinci seviye menüyü yan tarafa aç ——— */
@media (min-width: 1024px) {
/* Varsayılan: 1. seviye (Eğitimler) aşağı açılır, dokunmuyoruz */
.main-navigation ul ul {
top: 100%;
left: 0;
}
/* 2. seviye: Davranış & Problem Çözme altındaki alt menüler sağa açılır */
.main-navigation ul ul ul {
top: 0;
left: 100%; /* ← SAĞA açılır */
right: auto;
margin-left: 2px;
margin-right: 0;
}
/* Kenarda kesilmeyi engelle: üst kapsayıcılar taşmayı gizlemesin */
.site-header,
.main-navigation,
.main-navigation ul li {
overflow: visible !important;
}
/* Her zaman üste gelsin */
.main-navigation,
.main-navigation ul,
.main-navigation ul ul {
z-index: 9999;
position: relative;
}
}
/* ——— İSTEĞE BAĞLI: Sağ kenara çok yakın menüler için sola açtır ——— */
/* Eğer “Eğitimler” menüsü sağdaysa ve taşma yapıyorsa açılma yönünü tersine çevir: */
@media (min-width: 1024px) {
/* Tüm ikinci seviye menüler SOLA açılsın istersen: */
/* .main-navigation ul ul ul { left: auto; right: 100%; margin-left: 0; margin-right: 2px; } */
/* Yalnızca en sağdaki üst öğeler için sola aç: */
.main-navigation .main-nav > ul > li.menu-item-has-children:last-child ul ul {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 2px;
}
}
@media (min-width: 1024px) {
/* Sadece Davranış & Problem Çözme zincirinde ikinci seviye yan açılım */
#menu-item-1234 .sub-menu .menu-item-has-children > .sub-menu {
top: 0;
left: 100%; /* sağa */
}
}
/* ——— GP Masaüstü: 2. seviye (sub-sub) menüler yan tarafa açılsın ——— */
@media (min-width: 1024px) {
/* Güvenlik: menü kırpılmasın ve üstte kalsın */
.site-header,
.main-navigation,
.inside-navigation,
.main-navigation ul li {
overflow: visible !important;
}
.main-navigation,
.main-navigation ul,
.main-navigation ul ul {
position: relative;
z-index: 9999;
}
/* GP varsayımı: 1. seviye alt menü aşağı açılır (dokunmuyoruz) */
.main-navigation ul ul {
top: 100%;
left: 0;
}
/* YAN AÇILIM: 2. seviye (ul ul ul) sağa açılır */
.main-navigation ul li.menu-item-has-children { position: relative; }
.main-navigation ul ul ul {
top: 0;
left: 100%; /* → SAĞA açılır */
right: auto;
margin-left: 2px;
margin-right: 0;
}
/* Kenara çok yakınsa sola açtır (sağdaki son üst menüler için) */
.main-navigation .main-nav > ul > li.menu-item-has-children:last-child ul ul,
.main-navigation .main-nav > ul > li.menu-item-has-children:nth-last-child(2) ul ul {
left: auto;
right: 100%; /* ← SOLA açılır */
margin-left: 0;
margin-right: 2px;
}
}
/* === DAVRANIŞ HERO — Alt KESİLMESİN (bottom-anchor, full cover) === */
.davranis-hero{ position:relative !important; overflow:hidden !important; }
/* Arka plan hangi katmandaysa hepsini yakala */
.davranis-hero::before,
.davranis-hero,
.davranis-hero .hero-bg,
.davranis-hero .home-hero__bg{
background-size: cover !important; /* tam kapla (cover) */
background-repeat: no-repeat !important;
background-position: center bottom !important; /* 🔥 ALTA SABİTLE */
}
/* Eğer arka plan ![]()
ile veriliyorsa */
.davranis-hero img,
.davranis-hero .hero-bg img,
.davranis-hero .home-hero__bg img{
width:100% !important;
height:100% !important;
object-fit: cover !important;
object-position: 50% 100% !important; /* 🔥 ALTA SABİTLE */
display:block !important;
}
/* === LIBERTA NAV: 2. seviye menüleri YAN AÇ (masaüstü) === */
@media (min-width: 1024px){
/* Ebeveynler kırpmasın, konum referansı olsun */
.liberta-nav,
.liberta-nav .desktop-menu,
.liberta-nav .desktop-menu nav ul li{
position: relative !important;
overflow: visible !important;
z-index: 9999 !important;
}
/* 1. seviye alt menü: AŞAĞI açılır (fixed 60px'i iptal et) */
.liberta-nav .desktop-menu nav ul ul{
display: none; /* hover ile açılacak */
position: absolute;
top: 100% !important; /* 60px yerine öğe yüksekliği kadar */
left: 0 !important;
right: auto !important;
min-width: 220px;
background: linear-gradient(90deg,#5e35b1,#ff6f00);
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0,0,0,.25);
z-index: 9999;
}
.liberta-nav .desktop-menu nav ul li:hover > ul{ display:block !important; }
/* 2. seviye alt menü (ul ul ul): YANA açılır — SAĞA */
.liberta-nav .desktop-menu nav ul ul ul{
top: 0 !important;
left: 100% !important; /* → SAĞA aç */
right: auto !important;
margin-left: 2px !important;
margin-right: 0 !important;
border-radius: 6px;
}
/* Menü sağ kenara çok yakınsa sola açtırmak için (opsiyonel): */
/* En sağdaki üst maddelerin 2. seviyelerini SOLA çevir */
.liberta-nav .desktop-menu nav > ul > li.menu-item-has-children:nth-last-child(-n+2) ul ul{
left: auto !important;
right: 100% !important; /* ← SOLA aç */
margin-left: 0 !important;
margin-right: 2px !important;
}
}
/* === DAVRANIŞ & PROBLEM ÇÖZME — HERO FİX (alt kısmı kesme) === */
.davranis-hero{
position: relative !important;
overflow: hidden !important; /* taşma görüntüsü olmasın */
padding-bottom: 90px !important; /* güvenli alt ped (alttaki bölüm çakışmasın) */
}
/* Arka plan hangi katmanda olursa olsun: section, ::before, .hero-bg */
.davranis-hero,
.davranis-hero::before,
.davranis-hero .hero-bg{
background-repeat: no-repeat !important;
background-size: cover !important; /* tam genişlikten ödün verme */
background-position: center bottom !important; /* ALT SABİT → alt asla kesilmez */
}
/* Pseudo ile veriliyorsa görseli garantiye al */
.davranis-hero::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: -1 !important;
pointer-events: none !important;
background-image: url("https://libertakopekokulu.com/wp-content/uploads/2025/10/kopek-davranis-bozuklugu-agresyon-kaygi-bozuklugu-egitimi-pozitif-egitim.png") !important;
}
/* Görsel ![]()
etiketi olarak yerleştirilmişse (bazı şablonlar böyle yapıyor): */
.davranis-hero img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* tam genişlik */
object-position: 50% 100% !important; /* alt sabit */
display: block !important;
}
/* === Köpek Oteli HERO: alt kısım kesilmesin — tam görsel + overlay === */
.otel-hero{
position:relative !important;
max-width:none !important; width:100vw !important;
margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
display:block !important; /* img doğal yüksekliği belirlesin */
text-align:center; color:#fff;
overflow:clip;
}
.otel-hero .hero-img{
display:block;
width:100%; /* enine tam kapla */
height:auto; /* boy oranını koru → kesme yok */
vertical-align:middle;
}
.otel-hero .hero-scrim{
position:absolute; inset:0;
/* üstte biraz daha koyu, altta daha az — metin okunabilirliği */
background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.20) 55%, rgba(0,0,0,.35));
pointer-events:none;
}
.otel-hero .hero-inner{
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:32px 18px; max-width:1100px; margin:0 auto;
}
.otel-hero h1{ font-size: clamp(32px, 4.8vw, 56px); margin:0 0 10px; font-weight:900; }
.otel-hero .lead{ font-size: clamp(16px, 2.2vw, 22px); margin:0 0 18px; opacity:.98; }
.otel-hero .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.otel-hero .btn{ display:inline-block; padding:12px 20px; border-radius:999px; font-weight:800; text-decoration:none; transition:.2s; backdrop-filter:saturate(120%) blur(2px); }
.otel-hero .btn-whatsapp{ background:#25D366; color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.35); }
.otel-hero .btn-outline{ border:2px solid rgba(255,255,255,.9); color:#fff; background:rgba(255,255,255,.08); }
.otel-hero .btn:hover{ transform:translateY(-1px); filter:brightness(.96); }
/* Mobil küçük ekranlarda metin nefes payı */
@media (max-width:768px){
.otel-hero .hero-inner{ padding:24px 16px; }
}
/* ==== Köpek Oteli — HERO metni/CTA'yı yukarı al (yüksek öncelik) ==== */
.otel-page .otel-hero{ align-items:flex-start !important; }
.otel-page .otel-hero .hero-inner{
/* Varsayılan güvenli boşluk + yukarı kaydırma */
padding-top: clamp(44px, 8vh, 100px) !important;
padding-bottom: 0 !important;
/* Metin bloğunu yukarı çek — gerekirse değerleri arttırabilirsin */
--hero-lift: 12vh; /* desktop yukarı kaydırma miktarı */
--hero-lift-mobile: 7vh; /* mobile yukarı kaydırma miktarı */
transform: translateY(calc(-1 * var(--hero-lift))) !important;
}
/* Mobile için biraz daha az kaydır */
@media (max-width: 768px){
.otel-page .otel-hero .hero-inner{
transform: translateY(calc(-1 * var(--hero-lift-mobile))) !important;
padding-top: clamp(36px, 7vh, 80px) !important;
}
}
/* Üstten okunabilirlik için scrim’i biraz güçlendir (opsiyonel ama faydalı) */
.otel-page .otel-hero::after{
background: linear-gradient(
to bottom,
rgba(0,0,0,.52),
rgba(0,0,0,.25) 55%,
rgba(0,0,0,.30)
) !important;
}