/* ════════════════════════════════════════════════════ DOGA PSiKOLOJi — SHELL LAYOUT v1 Ortalanmış, border-radius'lu "kart" gövde + yeni nesil (aurora / mesh gradient) arka plan. Bu dosya en son yüklenir; seo.css'i override eder. ════════════════════════════════════════════════════ */ :root { --shell-max: 1560px; /* gövdenin maksimum genişliği */ --shell-gutter: 28px; /* masaüstü kenar boşluğu */ --shell-radius: 32px; --shell-top: 22px; /* Yeni nesil arka plan renkleri */ --aur-1: rgba(99,102,241,.38); /* indigo */ --aur-2: rgba(236,72,153,.30); /* pink */ --aur-3: rgba(45,212,191,.28); /* teal */ --aur-4: rgba(168,85,247,.26); /* violet */ --shell-shadow: 0 30px 90px rgba(15,23,42,.16), 0 4px 18px rgba(15,23,42,.06); } /* ──────────────────────────────── ARKA PLAN — aurora mesh ──────────────────────────────── */ /* Gradient 'e veriliyor: canvas'ı boyadığı için sayfanın en tepesinden itibaren her yeri kaplar. (body'ye verilince .wrapper'ın üst margin'i body'den dışarı "collapse" edip en üstte düz renkli bir şerit bırakıyordu.) */ html { background-color: #E9ECFB !important; background-image: radial-gradient(1100px 780px at 10% -8%, var(--aur-1), transparent 62%), radial-gradient(900px 700px at 96% 2%, var(--aur-2), transparent 60%), radial-gradient(950px 800px at 4% 62%, var(--aur-4), transparent 60%), radial-gradient(1000px 820px at 92% 96%, var(--aur-3), transparent 62%), linear-gradient(165deg, #F3F5FF 0%, #ECEAFF 42%, #FDF2F8 78%, #EEF7FB 100%) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; } body { background: transparent !important; /* margin collapse olmasın diye boşluk wrapper'ın margin'i değil body'nin padding'i ile veriliyor */ margin: 0 !important; padding: var(--shell-top) 0 calc(var(--shell-gutter) + 6px) !important; } /* ──────────────────────────────── GÖVDE — ortalanmış yuvarlak kart ──────────────────────────────── */ .wrapper { width: calc(100% - (var(--shell-gutter) * 2)); max-width: var(--shell-max); margin: 0 auto; background: var(--bg, #FAFBFF); border-radius: var(--shell-radius); box-shadow: var(--shell-shadow); border: 1px solid rgba(255,255,255,.65); /* clip → hidden'dan farklı olarak scroll container oluşturmaz, böylece içerideki position:sticky öğeler (sidebar, ab-photo-card, test ilerleme çubuğu) çalışmaya devam eder */ overflow: clip; position: relative; isolation: isolate; } /* İçerideki tam genişlik bölümler kartın dışına taşmasın */ .wrapper img, .wrapper video, .wrapper iframe { max-width: 100%; } /* ──────────────────────────────── HEADER — position:fixed yerine sticky scrollToFixed eklentisi header'a inline position:fixed + px genişlik basıyor; kart düzeninde bu kayma yapıyordu. Sticky'ye çeviriyoruz: kartın içinde kalıyor, genişlik/ortalama matematiği gerekmiyor, ayrıca scroll anında içerik zıplaması da bitiyor. ──────────────────────────────── */ header.header-nav, header.header-nav.scroll-to-fixed-fixed, header.header-nav.stricky-fixed { position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: auto !important; max-width: none !important; margin: 0 !important; /* --dp-head-r JS tarafından scroll'a göre kademeli düşürülür (kartın yuvarlak üst köşeleri → yapışınca kare) */ border-radius: var(--dp-head-r, var(--shell-radius)) var(--dp-head-r, var(--shell-radius)) 0 0 !important; transition: border-radius .18s linear, background var(--t-med), box-shadow var(--t-med) !important; z-index: 9999; } /* JS kapalıysa da yapışık haldeyken köşeler kare olsun */ header.header-nav.stricky-fixed, header.header-nav.scroll-to-fixed-fixed { --dp-head-r: 0px; } /* Mobil üst bar da kartın içinde akışta kalsın */ #page .mobile-menu .header[style*="fixed"], #page .mobile-menu .header.stricky-fixed { position: sticky !important; top: 0 !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; max-width: none !important; } /* ──────────────────────────────── Sabit header için bırakılmış telafi boşlukları artık gereksiz (header sticky olduğu için layout'ta yerini koruyor) ──────────────────────────────── */ @media (min-width: 993px) { .dp-reels-band { margin-top: 0 !important; } } /* Mobil: hikaye bandı üst/alt boşluğu kısa */ @media (max-width: 992px) { .dp-reels-band { padding: 4px 0 6px !important; margin-top: 0 !important; } } /* Hero'ların üst padding'i de sabit header telafisiydi → kısaltıyoruz */ .dp-hero { padding-top: 28px !important; } .dp-testet-hero { padding-top: 48px !important; } .dp-ct-hero { padding-top: 48px !important; } .ab-hero-inner { padding-top: 64px !important; } @media (max-width: 991px) { .dp-hero { padding-top: 40px !important; } .dp-testet-hero { padding-top: 32px !important; } .dp-ct-hero { padding-top: 32px !important; } .ab-hero-inner { padding-top: 44px !important; } } /* ──────────────────────────────── YÜZEN BUTONLAR — kartın kenarına yapışsın ──────────────────────────────── */ @media (min-width: 993px) { .doga-whatsapp-float { right: max(var(--shell-gutter), calc((100% - var(--shell-max)) / 2 + var(--shell-gutter))) !important; bottom: calc(var(--shell-gutter) + 8px) !important; } } /* ──────────────────────────────── TABLET ──────────────────────────────── */ @media (max-width: 1200px) { :root { --shell-gutter: 18px; --shell-radius: 26px; --shell-top: 16px; } } /* ──────────────────────────────── MOBİL — burada da full width değil ──────────────────────────────── */ @media (max-width: 767px) { :root { --shell-gutter: 10px; --shell-radius: 20px; --shell-top: 10px; } .wrapper { border: 1px solid rgba(255,255,255,.5); box-shadow: 0 14px 40px rgba(15,23,42,.14); } html { /* mobilde fixed background bazı tarayıcılarda titriyor */ background-attachment: scroll !important; } } /* ──────────────────────────────── MOBİL ÜST BAR — UIX: hamburger sol, logo orta, zil sağ ──────────────────────────────── */ @media (max-width: 991px) { header.header-nav { background: rgba(255,255,255,.97) !important; box-shadow: 0 2px 14px rgba(15,23,42,.06) !important; } .menu-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100%; padding: 8px 6px !important; float: none !important; } .menu-toggle #menu-btn { width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; } .menu-toggle #menu-btn .icon-bar { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: #0F172A !important; margin: 0 !important; } .menu-toggle .mt-logo { margin: 0 !important; } .menu-toggle .nav_logo_img { max-height: 58px !important; width: auto !important; height: auto !important; float: none !important; margin: 0 !important; } .menu-toggle .mt-bell { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #F6F4FF; color: #5B4BD5 !important; display: flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none !important; } .menu-toggle .mt-bell::after { content: ""; position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #EF4444; border: 2px solid #fff; } } /* ──────────────────────────────── MOBİL ÜST BAR (#page .mobile-menu) ≤992px'te header.header-nav gizli (.main-menu{display:none}), görünen bar budur. #page'i sticky yapıyoruz: bar #page'in tek yüksek içeriği olduğu için sticky'yi bara verirsek hiç hareket etmez. ──────────────────────────────── */ @media (max-width: 992px) { #page.stylehome1 { position: sticky !important; top: 0 !important; z-index: 9990 !important; } #page .mobile-menu .header { background: #fff !important; box-shadow: 0 2px 14px rgba(15,23,42,.07) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 12px !important; min-height: 68px; position: relative !important; } /* Logo ortada, siyah ve büyük */ #page .mobile-menu .main_logo_home2 { order: 2; flex: 1 1 auto; display: flex !important; justify-content: center !important; width: auto !important; margin: 0 !important; } #page .mobile-menu .nav_logo_img { content: url('../images/logo-black.png'); max-height: 58px !important; width: auto !important; height: auto !important; float: none !important; margin: 0 !important; } /* Hamburger solda, zil sağda */ #page .mobile-menu .menu_bar_home2 { display: contents !important; margin: 0 !important; padding: 0 !important; } #page .mobile-menu .menu_bar_home2 > li { margin: 0 !important; } #page .mobile-menu .menu_bar_home2 > li:first-child { display: none !important; } /* eski arama */ #page .mobile-menu .menu_bar_home2 > li:nth-child(2) { order: 1; } /* hamburger */ /* Sıra: hamburger(1) · logo(2) · arama(3) · sohbet(4) */ #page .mobile-menu .menu_bar_home2 > li.mb-search-li { order: 3; } /* arama */ #page .mobile-menu .menu_bar_home2 > li.mb-bell-li { order: 4; } /* sohbet */ /* Hamburger — temada yalnızca 2 çizgi var (a::before + a span); üçüncüyü a::after ile ekliyoruz. Dikey dizilim için flex-direction:column şart, yoksa çizgiler yan yana gelip görünmez oluyor. */ #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a { position: static !important; width: 46px !important; height: 46px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; top: auto !important; right: auto !important; left: auto !important; line-height: 0 !important; font-size: 0 !important; } /* Üç çizgi de birebir aynı: 34 × 3px */ #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a::before, #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a::after, #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a span { content: "" !important; display: block !important; box-sizing: border-box !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 3px !important; min-height: 3px !important; max-height: 3px !important; border: none !important; border-radius: 3px !important; background: #0F172A !important; background-color: #0F172A !important; margin: 0 !important; padding: 0 !important; flex: none !important; transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease !important; } /* Menü açıkken hamburger → çarpı (X) dönüşümü. gap:4px + height:3px olduğu için çizgi merkezleri 7px aralıklı. */ .mm-wrapper_opening #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a::before { transform: translateY(7px) rotate(45deg) !important; } .mm-wrapper_opening #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a span { opacity: 0 !important; transform: scaleX(.2) !important; } .mm-wrapper_opening #page .mobile-menu .menu_bar_home2 > li:nth-child(2) > a::after { transform: translateY(-7px) rotate(-45deg) !important; } /* Arama ve sohbet balonu — aynı sade görünüm (çerçevesiz) */ #page .mobile-menu .mb-search, #page .mobile-menu .mb-bell { position: relative; width: 44px; height: 44px; border-radius: 14px; background: transparent !important; border: none !important; box-shadow: none !important; color: #5B4BD5 !important; display: flex !important; align-items: center; justify-content: center; font-size: 22px; text-decoration: none !important; margin: 0 !important; padding: 0 !important; top: auto !important; right: auto !important; transition: transform .2s, color .2s; } #page .mobile-menu .mb-search:hover, #page .mobile-menu .mb-bell:hover { color: #4338CA !important; } #page .mobile-menu .mb-search:active, #page .mobile-menu .mb-bell:active { transform: scale(.94); } #page .mobile-menu .mb-search { font-size: 20px; color: #000 !important; } #page .mobile-menu .mb-search:hover { color: #000 !important; } /* Tema bu bağlantılara kendi ::before/::after çizgilerini basıyor — kapat */ #page .mobile-menu .mb-search::before, #page .mobile-menu .mb-search::after, #page .mobile-menu .mb-bell::before, #page .mobile-menu .mb-bell::after { content: none !important; display: none !important; } } /* ──────────────────────────────── MOBİL OFFCANVAS MENÜ — profil kimliği renkleri (siyah #16181f yerine isimdeki lacivert + mor vurgu) ──────────────────────────────── */ #menu.mm-menu, nav#menu.mm-menu, #menu.mm-menu .mm-panels, #menu.mm-menu .mm-panel, #menu.mm-menu .mm-navbar { background: #0F172A !important; } #menu.mm-menu { background: linear-gradient(165deg, #0F172A 0%, #1E1B4B 70%, #0F172A 100%) !important; } #menu.mm-menu .mm-navbar { border-bottom-color: rgba(139,124,246,.22) !important; } #menu.mm-menu .mm-listitem a, #menu.mm-menu .mm-listitem .mm-listitem__text { color: rgba(255,255,255,.88) !important; } #menu.mm-menu .mm-listitem:after { border-color: rgba(139,124,246,.14) !important; } #menu.mm-menu .mm-listitem__btn:before, #menu.mm-menu .mm-btn::before, #menu.mm-menu .mm-btn::after { border-color: #8B7CF6 !important; } #menu.mm-menu .mm-navbar__title { color: #A99BF8 !important; } /* ── Menü ikonları ── Sade (soluk beyaz) ::before ikonları seo.css:2104-2126'da tanımlı → kapatıldı, yerine renkli kutulu .mnav-ico ikonları kullanılıyor. */ #menu.mm-menu .mm-panels > .mm-panel:first-child > .mm-listview > .mm-listitem > a.mm-listitem__text::before { content: none !important; display: none !important; } #menu .mnav-ico, .mm-menu .mnav-ico { width: 32px !important; height: 32px !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-right: 12px !important; font-size: 14px !important; flex-shrink: 0; background: rgba(129,140,248,.20) !important; color: #A5B4FC !important; vertical-align: middle; line-height: 1 !important; } .mm-menu .mm-listview > .mm-listitem:nth-child(3n+2) .mnav-ico, #menu li:nth-child(3n+2) .mnav-ico { background: rgba(244,114,182,.20) !important; color: #F9A8D4 !important; } .mm-menu .mm-listview > .mm-listitem:nth-child(3n) .mnav-ico, #menu li:nth-child(3n) .mnav-ico { background: rgba(251,146,60,.20) !important; color: #FDBA74 !important; } .mm-menu .mm-listitem > a.mm-listitem__text, #menu li > a { display: flex !important; align-items: center !important; } /* Eski template mobil barındaki hamburger çizgileri koyu olsun */ .header.stylehome1 .menu_bar_home2 li:last-child a::before, .header.stylehome1 .menu_bar_home2 li:last-child a::after, .header.stylehome1 .menu_bar_home2 li:last-child a span, .header.stylehome1 .menu_bar_home2 li:last-child a span::before, .header.stylehome1 .menu_bar_home2 li:last-child a span::after { background-color: #0F172A !important; } /* ──────────────────────────────── HİKAYE (reels) OYNATICI — üstten/alttan nefes payı Çerçeve 92vh iken ekranın tamamını kaplıyor; ilerleme çubuğu ve alttaki başlık/CTA ekran kenarlarına yapışıyordu. ──────────────────────────────── */ .dp-reels-modal { padding: 40px 16px !important; box-sizing: border-box; } .dp-reels-modal-frame { height: auto !important; max-height: calc(100vh - 80px) !important; aspect-ratio: 9 / 16; max-width: 400px !important; } @media (max-width: 992px) { .dp-reels-modal { padding: 28px 10px !important; } .dp-reels-modal-frame { height: auto !important; max-height: calc(100vh - 56px) !important; border-radius: 18px !important; } } @media (max-height: 640px) { .dp-reels-modal { padding: 14px 8px !important; } .dp-reels-modal-frame { max-height: calc(100vh - 28px) !important; } } /* ──────────────────────────────── MODAL / OVERLAY — kart dışına taşabilenler ──────────────────────────────── */ .dp-reels-modal, .dp-result-overlay, .mk-fullscreen-search-overlay, .modal, .modal-backdrop, #menu.mm-menu { z-index: 100000; }