/* ========================================================================== Mescier Grup - theme-glass.css Dokulu / desenli arka planlar uzerine oturan koyu cam tasarim dili. Renkten bagimsizdir: tum yuzeyler siyah-beyaz alfa katmanlaridir, arka plan gorseli hangi renkte olursa olsun uyum saglar. Arka plan degistirmek icin: Vurgu rengi degistirmek icin: body { --accent: #RRGGBB } (varsayilan beyaz) ========================================================================== */ body.theme-glass { color-scheme: dark; /* --- Tema degiskenleri --- */ --bg-base: #0A0A0D; /* gorsel yokken taban renk */ --veil-top: rgba(8, 8, 12, 0.5); /* doku uzerindeki karartma */ --veil-bottom: rgba(8, 8, 12, 0.9); --bg-blur: 2px; /* dokuyu yumusatma miktari */ --accent: #FFFFFF; /* vurgu: tek degiskenden yonetilir */ /* --- Navbar dokusu --- */ --nav-image: none; /* navbar arka plan gorseli (kapali) */ --nav-pos: center 45%; /* gorselin hangi yatay dilimi gorunsun */ --nav-scale: 100% auto; /* tam genislik: butun desen gorunur */ --nav-opacity: 0.8; /* dokunun yogunlugu */ --nav-opacity-solid: 0.6; /* sayfa kaydirilinca */ --nav-mask: none; /* doku tum genislikte gorunur */ --surface: rgba(255, 255, 255, 0.055); /* cam panel */ --surface-2: rgba(255, 255, 255, 0.1); --surface-deep: rgba(10, 10, 14, 0.55); /* koyu panel */ --stroke: rgba(255, 255, 255, 0.12); --stroke-2: rgba(255, 255, 255, 0.24); --blur: saturate(150%) blur(22px); /* --- Mevcut token'larin koyu tema karsiliklari --- */ --ink-900: #FFFFFF; --ink-800: rgba(255, 255, 255, 0.92); --ink-700: rgba(255, 255, 255, 0.82); --ink-600: rgba(255, 255, 255, 0.72); --ink-500: rgba(255, 255, 255, 0.6); --ink-400: rgba(255, 255, 255, 0.5); --ink-300: rgba(255, 255, 255, 0.58); --ink-200: rgba(255, 255, 255, 0.82); --paper: var(--surface); --paper-soft: transparent; --paper-tint: var(--surface-2); --line: var(--stroke); --line-dark: var(--stroke); --gold: var(--accent); --gold-light: var(--accent); --gold-dark: var(--accent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55); background: var(--bg-base); color: var(--ink-800); } /* -------------------------------------------------------------------------- Sayfa geneli arka plan katmani data-bg ile verilen gorsel sabit durur, icerik uzerinde kayar. -------------------------------------------------------------------------- */ body.theme-glass::before, body.theme-glass::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body.theme-glass::before { z-index: -2; background-color: var(--bg-base); /* Ilk katman data-bg ile verilen gorsel; dosya yoksa altindaki ornek doku gorunur. Gercek gorsel eklenince ustunu kapatir. */ background-image: var(--bg-image, none), url("../media/arkaplan-ornek.svg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; /* Doku detayini yumusatir; desen ne kadar yogun olursa olsun metin okunakli kalir, arka plan atmosfer olarak kalir. */ filter: saturate(105%) blur(var(--bg-blur, 2px)); transform: scale(1.06); } body.theme-glass::after { z-index: -1; background: radial-gradient(120% 85% at 50% 0%, rgba(8, 8, 12, 0.2), rgba(8, 8, 12, 0.7) 72%), linear-gradient(180deg, var(--veil-top), var(--veil-bottom)); } body.theme-glass ::selection { background: var(--accent); color: #0A0A0D; } /* -------------------------------------------------------------------------- Bolumler: varsayilan olarak seffaf, doku gorunur -------------------------------------------------------------------------- */ .theme-glass .section--soft { background: transparent; } .theme-glass .section--dark { background: rgba(10, 10, 14, 0.5); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-block: 1px solid var(--stroke); color: var(--ink-800); } .theme-glass .section--dark h1, .theme-glass .section--dark h2, .theme-glass .section--dark h3, .theme-glass .section--dark h4 { color: var(--ink-900); } /* Bolume ozel arka plan gorseli:
*/ .theme-glass [data-bg]:not(body) { position: relative; isolation: isolate; background-image: var(--bg-image, none); background-size: cover; background-position: center; } .theme-glass [data-bg]:not(body)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 12, 0.6), rgba(8, 8, 12, 0.8)); } .theme-glass .skip-link { background: #FFFFFF; color: #0A0A0D; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .theme-glass .site-header { color: #FFFFFF; overflow: hidden; isolation: isolate; } /* Doku katmani: gorselin bir kismi, sagda sonumlenerek biter */ .theme-glass .site-header::before { inset: 0; z-index: 0; background-image: var(--nav-image, none); background-size: var(--nav-scale); background-position: var(--nav-pos); background-repeat: no-repeat; filter: grayscale(1) contrast(1.05); opacity: var(--nav-opacity); -webkit-mask-image: var(--nav-mask); mask-image: var(--nav-mask); /* mask-image: none ise doku bant boyunca kesintisiz gorunur */ transition: opacity var(--dur) var(--ease); } /* Dokunun uzerindeki karartma: logo ve menu her zaman okunur kalir */ .theme-glass .site-header::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 8, 12, 0.5), rgba(8, 8, 12, 0)); } .theme-glass .site-header .brand__name, .theme-glass .nav__link, .theme-glass .nav-toggle { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.5); } /* Koyu tema: kaydirilinca da beyaz logo kalir */ .theme-glass .site-header.is-solid .brand__logo--acik { display: block; } .theme-glass .site-header.is-solid .brand__logo--koyu { display: none; } .theme-glass .site-header.is-solid::before { opacity: var(--nav-opacity-solid); } .theme-glass .site-header.is-solid::after { background: none; } .theme-glass .site-header.is-solid { background: rgba(10, 10, 14, 0.6); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #FFFFFF; border-bottom-color: var(--stroke); } .theme-glass .mobile-nav { background: rgba(8, 8, 12, 0.92); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } /* -------------------------------------------------------------------------- Butonlar -------------------------------------------------------------------------- */ .theme-glass .btn--primary, .theme-glass .btn--light { background: #FFFFFF; color: #0A0A0D; } .theme-glass .btn--primary:hover, .theme-glass .btn--light:hover { background: rgba(255, 255, 255, 0.88); box-shadow: var(--shadow-md); } .theme-glass .btn--gold { background: var(--accent); color: #0A0A0D; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset; } .theme-glass .btn--gold:hover { filter: brightness(1.08); } .theme-glass .btn--ghost { border-color: var(--stroke-2); color: #FFFFFF; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .theme-glass .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); } .theme-glass .lang-toggle { border-color: var(--stroke-2); color: #FFFFFF; } .theme-glass .lang-toggle:hover { background: rgba(255, 255, 255, 0.12); } .theme-glass .link-arrow, .theme-glass .section--dark .link-arrow { color: #FFFFFF; } /* -------------------------------------------------------------------------- Hero: sayfa dokusu uzerine oturur, video/gorsel varsa onun uzerine -------------------------------------------------------------------------- */ /* Video yuklenene kadar (ve engellenirse) gorunen zemin: soyut doku yerine marka kartlariyla ayni dili konusan kurumsal degrade + ince izgara. */ .theme-glass .hero__media { background-color: #060D16; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), radial-gradient(110% 85% at 24% 12%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 62%), linear-gradient(160deg, #1D3D5C 0%, #142C45 38%, #060D16 92%); background-size: 56px 56px, 56px 56px, cover, cover; background-repeat: repeat, repeat, no-repeat, no-repeat; } .theme-glass .hero__scrim { background: linear-gradient( 180deg, rgba(8, 8, 12, 0.55) 0%, rgba(8, 8, 12, 0.18) 40%, rgba(8, 8, 12, 0.92) 100% ), linear-gradient(90deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0) 65%); } .theme-glass .hero h1 { color: #FFFFFF; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5); } .theme-glass .hero__lead { color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); } .theme-glass .hero__eyebrow { color: var(--accent); } .theme-glass .page-hero__media { background: transparent; } .theme-glass .page-hero__scrim { background: linear-gradient(180deg, rgba(8, 8, 12, 0.7), rgba(8, 8, 12, 0.85)); } /* -------------------------------------------------------------------------- Cam yuzeyler: istatistik, kart, ozellik kutusu -------------------------------------------------------------------------- */ .theme-glass .stats { background: var(--stroke); border-color: var(--stroke); border-radius: var(--radius-lg); overflow: hidden; } .theme-glass .stat, .theme-glass .section--dark .stat { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .theme-glass .stat__value, .theme-glass .section--dark .stat__value { color: #FFFFFF; } .theme-glass .stat__suffix { color: var(--accent); } .theme-glass .card, .theme-glass .feature, .theme-glass .section--dark .feature { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-color: var(--stroke); } .theme-glass .card:hover, .theme-glass .feature:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--stroke-2); box-shadow: var(--shadow-lg); } .theme-glass .card__media { background: rgba(255, 255, 255, 0.04); } .theme-glass .card__tag { background: rgba(10, 10, 14, 0.65); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #FFFFFF; box-shadow: 0 0 0 1px var(--stroke) inset; } .theme-glass .feature__icon, .theme-glass .section--dark .feature__icon, .theme-glass .info-item__icon { background: rgba(255, 255, 255, 0.09); color: #FFFFFF; box-shadow: 0 0 0 1px var(--stroke) inset; } .theme-glass .cevre-band .eyebrow { color: #a5d6a7; } .theme-glass .media, .theme-glass .section--dark .media { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 0 0 1px var(--stroke) inset; } .theme-glass .media::after { background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); } /* -------------------------------------------------------------------------- Filtreler -------------------------------------------------------------------------- */ .theme-glass .filter { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--stroke); color: rgba(255, 255, 255, 0.7); } .theme-glass .filter:hover { color: #FFFFFF; border-color: var(--stroke-2); } .theme-glass .filter.is-active { background: #FFFFFF; border-color: #FFFFFF; color: #0A0A0D; } /* -------------------------------------------------------------------------- Cagri seridi -------------------------------------------------------------------------- */ .theme-glass .cta-band { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-block: 1px solid var(--stroke); } .theme-glass .cta-band__scrim { background: linear-gradient(90deg, rgba(8, 8, 12, 0.8), rgba(8, 8, 12, 0.35)); } /* -------------------------------------------------------------------------- Formlar -------------------------------------------------------------------------- */ .theme-glass .field input, .theme-glass .field textarea, .theme-glass .field select { background: rgba(255, 255, 255, 0.05); border-color: var(--stroke); color: #FFFFFF; } .theme-glass .field input::placeholder, .theme-glass .field textarea::placeholder { color: rgba(255, 255, 255, 0.38); } .theme-glass .field input:focus, .theme-glass .field textarea:focus, .theme-glass .field select:focus { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } .theme-glass .field label { color: rgba(255, 255, 255, 0.75); } .theme-glass .form__status { background: rgba(255, 255, 255, 0.08); border-color: var(--stroke); color: #FFFFFF; } /* -------------------------------------------------------------------------- Zaman cizelgesi ve footer -------------------------------------------------------------------------- */ .theme-glass .timeline, .theme-glass .timeline__item { border-color: var(--stroke); } .theme-glass .timeline__year { color: var(--accent); } .theme-glass .site-footer { background: rgba(8, 8, 12, 0.72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--stroke); color: rgba(255, 255, 255, 0.62); } .theme-glass .footer__title, .theme-glass .footer__brand .brand { color: #FFFFFF; } .theme-glass .social a:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0A0A0D; } /* -------------------------------------------------------------------------- Ince dokunuslar -------------------------------------------------------------------------- */ .theme-glass .eyebrow { color: var(--accent); opacity: 0.9; } .theme-glass .divider, .theme-glass hr { background: var(--stroke); border-color: var(--stroke); } .theme-glass :focus-visible { outline-color: #FFFFFF; } /* -------------------------------------------------------------------------- Dar ekran: navbar dokusu logo yazisinin ustune binmesin, yazi ile menu dugmesi arasindaki bosluga tasinir -------------------------------------------------------------------------- */ @media (max-width: 760px) { body.theme-glass { --nav-scale: 190% auto; --nav-opacity: 0.7; } }