/* ========================================================================== theme.css — Site geneli açık / koyu tema (js/theme.js ile birlikte çalışır) Bu dosya her sayfada, sayfanın kendi CSS dosyasından SONRA yüklenmelidir. Mantık: - Açık tema değerleri (--*-light) YALNIZCA burada tanımlıdır. - Koyu tema değerleri (--*-dark) her sayfanın kendi :root bloğunda kalır (photos / frommycamera sayfalarının koyu paleti ayrıdır). - olduğunda --*-light değişkenleri --*-dark'a eşlenir. Böylece koyu temada "-light" değişkenini kullanan kurallar da koyu görünür; hiçbir bileşeni tek tek yeniden yazmak gerekmez. ========================================================================== */ /* ---------- Açık tema paleti ---------- */ :root { color-scheme: light; --bg-light: #F8F6FC; --text-light: #2D2640; --card-bg-light: #FFFFFF; --shadow-light: rgba(80, 55, 140, 0.16); /* Açık zeminde okunabilir vurgu rengi (metin/ikon için) */ --accent-text: #6B4FB3; } html.dark-mode { color-scheme: dark; --accent-text: var(--primary-light); } /* ---------- Koyu tema: "-light" değişkenlerini "-dark"a eşle ---------- */ body.dark-mode { --bg-light: var(--bg-dark); --text-light: var(--text-dark); --card-bg-light: var(--card-bg-dark); --shadow-light: var(--shadow-dark); } /* ---------- Tema düğmesi ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 50%; line-height: 1; } .theme-toggle svg { display: block; } .theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Gezinme çubuğunda: bağlantıların hemen yanında, sağa yaslı */ .nav-container > .nav-links { margin-left: auto; } .nav-container > .theme-toggle { margin-left: 1rem; } @media (max-width: 768px) { /* Bağlantılar açılır menüye dönüşüyor: düğme hamburger'in yanında kalsın */ .nav-container > .theme-toggle { margin-left: auto; margin-right: 0.75rem; } } /* Gezinme çubuğu olmayan sayfalarda (404) */ .theme-toggle--floating { position: fixed; top: 1rem; right: 1rem; z-index: 3000; width: 2.5rem; height: 2.5rem; background: rgba(155, 126, 217, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } /* ========================================================================== Düğmeler — iki temada da okunaklı ve görünür ========================================================================== */ /* Beyaz zeminli düğme: metin bir ton koyu mor (beyaz üstünde ~5:1) */ .btn-primary { color: var(--primary-dark); } /* Açık temada beyaz düğme beyaz kartta kayboluyordu: çerçeve ver */ html:not(.dark-mode) .btn-primary { border: 2px solid var(--primary-color); } /* Açık zeminde çerçeveli mor düğmelerin yazısı */ html:not(.dark-mode) .lang-btn:not(.active), html:not(.dark-mode) .page-btn:not(.active), html:not(.dark-mode) .pagination button:not(.active), html:not(.dark-mode) .contactheader { color: var(--primary-dark); } /* Dolu mor düğmeler (aktif/hover/gönder): beyaz yazı için koyu ton zemin. Koyu temadaki `body.dark-mode .page-btn` kuralı aktif düğmenin yazısını açık lavanta yapıp okunmaz bırakıyordu. */ body .lang-btn.active, body .lang-btn:hover, body .page-btn.active, body .page-btn:hover:not(:disabled), body .pagination button.active, body .pagination button:hover:not(:disabled), body #submitButton, body .button-primary { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; } body #submitButton:hover:not(:disabled) { background: var(--primary-color); } /* 404: ikincil düğme çerçevesi açık zeminde belirgin olsun */ html:not(.dark-mode) .button-secondary { border-color: rgba(123, 95, 191, 0.45); } .blog-date { color: #767676; } html.dark-mode .blog-date { color: #9A9A9A; } /* Klavye odağı: her iki temada görünür halka */ .btn:focus-visible, .lang-btn:focus-visible, .page-btn:focus-visible, .pagination button:focus-visible, #submitButton:focus-visible, .button:focus-visible, .share-button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; } /* ========================================================================== Gezinme çubuğu: hamburger menü artık 1080px ve altında devreye girer. (Eskiden 768px'e kadar bağlantılar alta kayıyordu. Aşağıdaki kurallar her sayfanın kendi 768px / 769–1220px kurallarını ezer; theme.css en son yüklenir.) ========================================================================== */ @media (max-width: 1080px) { .navbar { height: 4rem; min-height: 0; padding: 0.85rem 1.2rem; } .nav-container { flex-wrap: nowrap; row-gap: 0; } .nav-home-text { display: inline; } .nav-home-icon { display: none; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; flex-wrap: nowrap; flex-direction: column; align-items: stretch; justify-content: flex-start; row-gap: 0; gap: 0.25rem; padding: 1rem; background: var(--primary-color); box-shadow: 0 8px 15px var(--shadow-light); max-height: calc(100vh - 4rem); overflow-y: auto; } .nav-links.active { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.75rem 0.5rem; } .mobile-menu { display: block; flex: 0 0 auto; } .nav-container > .theme-toggle { margin-left: auto; margin-right: 0.75rem; } /* Fotoğraflar alt menüsü: açılır liste yerine akordeon */ .nav-dropdown-menu { position: static; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(0, 0, 0, 0.18); border-radius: 8px; margin-top: 0; margin-left: 0.5rem; padding: 0; border-left: 2px solid rgba(255, 255, 255, 0.2); transition: max-height 0.3s ease, margin-top 0.3s ease, padding 0.3s ease; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; transform: none; } .nav-dropdown.open .nav-dropdown-menu { max-height: 160px; margin-top: 0.4rem; padding: 0.35rem 0; } .nav-dropdown-menu a { padding: 0.85rem 1.5rem; font-size: 0.95rem; } .nav-dropdown-menu a.active::after { left: 1.5rem; right: 1.5rem; bottom: 8px; } } @media (min-width: 769px) and (max-width: 1080px) { .nav-logo { width: 300px; } } /* Açık temada kart biçimli bağlantıların kenarı belli olsun */ html:not(.dark-mode) .contact-link-item, html:not(.dark-mode) .buy-link-card { border-color: rgba(123, 95, 191, 0.3); } /* 1081–1320px: bağlantılar alta sarılmasın; logo küçülür, sarma kapanır. (1220px üstünde "Ana Sayfa" yazısı da göründüğü için 1320'ye kadar uzatıldı.) */ @media (min-width: 1081px) and (max-width: 1320px) { .navbar { height: 4rem; min-height: 0; } .nav-container { flex-wrap: nowrap; row-gap: 0; } .nav-logo { width: 340px; } .nav-links { flex-wrap: nowrap; gap: 1.25rem; } } @media (min-width: 1221px) and (max-width: 1320px) { .nav-logo { width: 400px; } } /* Masaüstü: tema düğmesi ~50px yer kapladığı için logo 500px -> 460px, böylece farklı yazı tiplerinde de bağlantılar tek satırda kalır. */ @media (min-width: 1321px) { .nav-logo { width: 460px; } } /* ========================================================================== Gezinme çubuğu: aşağı kaydırınca gizlenir, yukarı kaydırınca döner (js/navbar.js) ========================================================================== */ .navbar { transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; } .navbar.navbar--hidden { transform: translateY(-100%); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .navbar { transition: none; } } /* `body { overflow-x: hidden }` body'yi kaydırma kabına çeviriyordu ve `position: sticky` gezinme çubuğu hiçbir zaman yapışmıyordu. `clip` yatay taşmayı aynı şekilde keser ama kaydırma kabı oluşturmaz. */ body { overflow-x: clip; }