/* ============================================================ YALINAY ŞEKERLEME — yalinay.com · public_html/assets/css/public-enhancements.css ============================================================ Konu : Site üst katmanı Yukleme : app.css → bu dosya → yalinay.css Bagimlilik: app.css Tailwind jetonları ve yalinay.css --yalinay-* jetonları Not : Tailwind derlemesi gerekmez; elle yazılmış katmandır. ============================================================ */ /* PAGE HERO (the band that appears under the header on inner pages) Why it exists: tells the visitor where they are (breadcrumb + H1), sets context (eyebrow/subtitle), and offers a print/update action. Good for SEO (clear

) and UX (orientation). It is NOT redundant with the menu — the menu is navigation, this is the page title/context. ============================================================ */ .page-hero { position: relative; border-bottom: 1px solid var(--border); background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent), linear-gradient(180deg, var(--brand-50, #f6f7f8), #ffffff); overflow: hidden; } .page-hero__inner { max-width: 1200px; margin-inline: auto; padding: 0.75rem 20px 0.75rem; } @media (min-width: 640px) { .page-hero__inner { padding: 0.85rem 20px 0.85rem; } } @media (max-width: 639px) { .page-hero__inner { padding-inline: 16px; } } .breadcrumb, .page-hero__breadcrumb { font-size: 0.8125rem; color: var(--muted-foreground); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .breadcrumb a, .page-hero__breadcrumb a { color: var(--muted-foreground); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; } .breadcrumb a:hover, .page-hero__breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep, .page-hero__breadcrumb .sep { margin-inline: 0.4rem; opacity: 0.6; } .breadcrumb .current, .page-hero__breadcrumb .current { color: var(--foreground); font-weight: 600; } .page-hero__eyebrow { margin-top: 0.85rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .page-hero__title { margin-top: 0.5rem; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: var(--foreground); } .page-hero__subtitle { margin-top: 0.75rem; max-width: 42rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); } .page-hero__meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; font-size: 0.8125rem; color: var(--muted-foreground); } .btn-print { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; font-size: 0.8125rem; font-weight: 600; border-radius:var(--yalinay-r,2px); border: 1px solid var(--border); background: #fff; color: var(--foreground); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .btn-print:hover { background: var(--secondary); border-color: var(--muted-foreground); } .btn-print svg { width: 1rem; height: 1rem; } /* LEGAL / CONTENT PROSE (styled wrapper around the Sanitizer output) The Sanitizer only allows semantic tags (h2-h4, p, ul/ol/li, table, blockquote, a, img, strong…) and strips classes, so ALL visual styling must live here as descendant selectors. ============================================================ */ .legal-layout { max-width: 1200px; margin-inline: auto; padding: 0.75rem 20px 3.5rem; } @media (min-width: 640px) { .legal-layout { padding-inline: 20px; } } @media (max-width: 639px) { .legal-layout { padding-inline: 16px; } } @media (min-width: 1024px) { .legal-layout { display: block; } } /* İçerik breadcrumb ile AYNI hizada başlar. Eskiden margin-inline:auto 1200px kutuda 960px metni ortaliyordu → solda ~100px yalüzü girinti. Okuma çizgisi max-width ile hâlâ sınırlı, yalnız sola yaslıyoruz. */ .legal-layout .legal-prose { margin-inline: 0; } /* Makale kart çerçevesi (blog kart diliyle aynı) */ .legal-card { background: var(--card); border: 1px solid var(--yalinay-border); border-radius:var(--yalinay-r,2px); padding: 28px 30px; overflow: hidden; } @media (max-width: 640px) { .legal-card { padding: 20px 16px; } } .legal-prose { color: var(--foreground); font-size: 1rem; line-height: 1.75; max-width: 60rem; } .legal-prose > * + * { margin-top: 1.1rem; } .legal-prose > :first-child { margin-top: 0 !important; } .legal-prose h2 { margin-top: 2.5rem; padding: 0.45rem 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--foreground); scroll-margin-top: 6rem; } @media (max-width: 640px) { .legal-prose h2 { font-size: 1.3rem; margin-top: 2rem; } } .legal-prose h3 { margin-top: 1.6rem; font-size: 1.08rem; font-weight: 700; color: var(--foreground); scroll-margin-top: 6rem; } .legal-prose h4 { margin-top: 1.2rem; font-size: 0.98rem; font-weight: 600; color: var(--foreground); } .legal-prose p { color: color-mix(in srgb, var(--foreground) 88%, transparent); } .legal-prose strong { font-weight: 700; color: var(--foreground); } .legal-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .legal-prose a:hover { text-decoration-thickness: 2px; } .legal-prose ul, .legal-prose ol { padding-left: 1.25rem; } .legal-prose ul { list-style: disc; } .legal-prose ol { list-style: decimal; } .legal-prose li { margin-top: 0.45rem; padding-left: 0.15rem; } .legal-prose li::marker { color: var(--accent); } /* Tables (allowed by Sanitizer) */ .legal-prose table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: 0.92rem; overflow: hidden; border-radius:var(--yalinay-r,2px); border: 1px solid var(--border); } .legal-prose thead { background: var(--secondary); } .legal-prose th, .legal-prose td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; } .legal-prose tbody tr:last-child td { border-bottom: 0; } .legal-prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--secondary) 55%, transparent); } .legal-prose th { font-weight: 700; color: var(--foreground); } /* Callout / note — rendered from
(only allowed block element that can carry emphasis without classes). */ .legal-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 4px solid var(--info, #0ea5e9); border-radius:var(--yalinay-r,2px); background: color-mix(in srgb, var(--info, #0ea5e9) 8%, transparent); color: color-mix(in srgb, var(--foreground) 90%, transparent); font-size: 0.95rem; } .legal-prose blockquote p { margin: 0; } .legal-prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } /* STICKY TABLE OF CONTENTS (desktop) ============================================================ */ .legal-toc { display: none; } @media (min-width: 1024px) { .legal-toc { display: block; position: sticky; top: 6rem; align-self: start; font-size: 0.85rem; } } .legal-toc__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.75rem; } .legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); } .legal-toc li { margin: 0; } .legal-toc a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted-foreground); text-decoration: none; line-height: 1.3; transition: color .15s ease, border-color .15s ease; } .legal-toc a:hover { color: var(--foreground); } .legal-toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .legal-toc .lvl-3 a { padding-left: 1.6rem; font-size: 0.8rem; } /* HERO SLIDER — tek kaynak assets/css/yalinay.css + assets/js/ public-enhancements.js. Buradaki display:none / heroFade kuralları 2026-09-16'da, nokta hedef dolguları 2026-09-21'de kaldırıldı: alt nokta göstergesi artık hiç çizilmiyor, ok/durdur stilleri de yalinay.css'te duruyor. Bu blok bilerek boş. ============================================================ */ /* FAQ SEARCH + ACCORDION ============================================================ */ .faq-search { width: 100%; padding: 0.7rem 1rem 0.7rem 2.6rem; font-size: 0.95rem; border: 1px solid var(--border); border-radius:var(--yalinay-r,2px); background-color: var(--card); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16Zm6-2-4.5-4.5'/%3e%3c/svg%3e"); background-position: left 0.85rem center; background-repeat: no-repeat; background-size: 1.1rem 1.1rem; color: var(--foreground); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } .faq-search:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); } .faq-item.is-hidden { display: none; } .faq-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; } .faq-summary::-webkit-details-marker { display: none; } .faq-summary::after { content: "+"; flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius:9999px; background: var(--secondary); color: var(--foreground); font-size: 1.1rem; font-weight: 700; line-height: 1; transition: background-color .15s ease, color .15s ease, transform .2s ease; } .faq-item[open] .faq-summary::after { content: "\2212"; background: var(--accent); color: #fff; } .faq-summary:hover::after { background: color-mix(in srgb, var(--accent) 14%, transparent); } .faq-empty { display: none; padding: 2rem 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.95rem; } .faq-empty.is-visible { display: block; } /* PRINT — hide chrome, keep the document ============================================================ */ @media print { body { background: #fff; } .legal-prose { max-width: none; } .legal-prose a { color: #000; text-decoration: underline; } .legal-prose h2 { break-after: avoid; } .legal-prose table, .legal-prose blockquote, .legal-prose li { break-inside: avoid; } a[href]::after { content: ""; } } /* Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .hero-slide { animation: none !important; } } /* COOKIE CONSENT CMP — Yalınay Şekerleme ============================================================ */ .cookie-overlay{position:fixed;inset:0;z-index:9999;background:rgba(15,15,20,.85);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;padding:0} .cookie-overlay.hidden{display:none} @keyframes cookieSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} /* COOKIE CONSENT BANNER — Küçük, alt, yatay (Yalınay Şekerleme) ============================================================ */ .cookie-overlay{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;padding:0} .cookie-overlay.hidden{display:none !important} .cookie-banner{background:#fff;border-top:1px solid #F0DDC8;border-radius:var(--yalinay-r,2px) var(--yalinay-r,2px) 0 0;padding:12px 16px;max-width:1200px;margin:0 auto;box-shadow:0 -4px 24px rgba(0,0,0,.1)} .cookie-banner-content{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1200px;margin:0 auto} .cookie-banner-text{flex:1;min-width:200px;font-size:13px;color:#374151} .cookie-banner-text strong{color:#1A1A1E} .cookie-banner-cats{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .cookie-banner-cat{display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap} .cookie-banner-cat input[type="checkbox"]{width:16px;height:16px;accent-color:var(--yalinay-accent)} .cookie-banner-cat-name{font-size:12px;font-weight:600;color:#374151;cursor:pointer} .cookie-banner-cat input:disabled + .cookie-banner-cat-name{opacity:.6;cursor:not-allowed} .cookie-banner-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cookie-banner-link{font-size:12px;color:var(--yalinay-accent);text-decoration:none;font-weight:600} .cookie-banner-link:hover{text-decoration:underline} .cookie-banner-btn{padding:8px 16px;border-radius:var(--yalinay-r,2px);font-size:12px;font-weight:700;cursor:pointer;border:none;transition:.15s;white-space:nowrap} .cookie-banner-btn-selected{background:#7B1F1F;color:#fff} .cookie-banner-btn-selected:hover{filter:brightness(1.08)} .cookie-banner-btn-all{background:#fff;border:2px solid #7B1F1F;color:#7B1F1F} .cookie-banner-btn-all:hover{background:#7B1F1F;color:#fff} @media(max-width:600px){ .cookie-banner{padding:10px 12px;border-radius:var(--yalinay-r,2px) var(--yalinay-r,2px) 0 0} .cookie-banner-content{flex-direction:column;gap:10px;align-items:stretch} .cookie-banner-cats{justify-content:center} .cookie-banner-actions{justify-content:center} } /* İLETİŞİM bilgi ikonları: satıra gelince renk değişimi + hafif efekt ============================================================ */ .contact-info-icon { transition: transform .18s ease, background-color .18s ease, color .18s ease; } li:hover > .contact-info-icon, li:hover .contact-info-icon { transform: scale(1.12) rotate(-4deg); } li:hover > .contact-info-icon-accent, li:hover .contact-info-icon-accent { background: var(--yalinay-accent); color: #fff; } li:hover > .contact-info-icon-success, li:hover .contact-info-icon-success { background: var(--yalinay-success); color: #fff; } li:hover > .contact-info-icon.bg-brand-50, li:hover .contact-info-icon.bg-brand-50 { background: var(--yalinay-accent); color: #fff; } /* ===================================================================== ALAN SİSTEMİ — SİTE Site Ayarları (admin-form.css) sözleşmesinin BİREBİR aynısı. Değerler kopyalanmadı, oradan okundu: 42px kutu, 18px 10px 5px dolgu, 13.5px/1.15 punto, etiket 27px -> 11px + 10px. ===================================================================== */ /* Alan sarmalayıcı: ikon kutusu + gövde tek satırda. */ .alan-kayici { position: relative; --alan-h: 42px; --alan-ikon-genislik: 38px; display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; } /* İkon kutusu: input'la AYNI yükseklik (ayrı değer yazılırsa 1-2px ayrılıp "iğne iğne" görüntüsü oluşur — admin'de de aynı uyarı). */ .alan-ikon { flex: 0 0 auto; width: var(--alan-ikon-genislik); height: var(--alan-h); display: flex; align-items: center; justify-content: center; color: var(--yalinay-faint); background: var(--yalinay-soft-bg); border: 1px solid var(--yalinay-border); border-radius: var(--yalinay-radius); transition: none; } .alan-kayici:hover .alan-ikon, .alan-kayici:focus-within .alan-ikon { color: var(--yalinay-accent); background: color-mix(in srgb, var(--yalinay-accent) 8%, var(--yalinay-soft-bg)); border-color: color-mix(in srgb, var(--yalinay-accent) 35%, var(--yalinay-border)); } /* Gövde: etiketin konumlandığı bağlam. 🔴 Boyut jetonları BURADA: sarmalayıcı (`.alan-kayici`) olmadan da alan doğru ölçülsün. Eski admin dosyalarında her alanın etrafında zaten bir `
` var; onu `alan-govde` yapmak YETERLİ — DOM taşınmaz, alan adlarına dokunulmaz. (Önceki deneme: sarmalayıcıyı otomatik ekleyen araç ürün formunda 31 alan adı kaybettirdi, ölçüldü ve araç silindi.) */ .alan-govde { position: relative; flex: 1 1 auto; min-width: 0; --alan-h: 42px; --alan-ikon-genislik: 38px; } /* Input kutusu. `!important` sebebi: `.form-input` taban sınıfı yüksekliği ve dolguyu kendi belirliyor; bu sözleşme üstüne oturmalı. */ .alan-kayici .alan-girdi { /* Ölçülen kusur: gövde 257px, input 191px. Genişlik taban `form-input` sınıfından geliyordu; o düşerse alan daralıyor. Burada kural kendisi güvence verir. */ width: 100%; height: var(--alan-h); padding: 18px 10px 5px !important; font-size: 13.5px !important; line-height: 1.15 !important; border-radius: var(--yalinay-radius); } /* Odak halkası: taban `.form-input` 3px aura atıyordu; "neon olmayan kalınlık" tercihi için 1px. */ .alan-kayici .alan-girdi:focus, .alan-kayici .alan-girdi:focus-visible { box-shadow: 0 0 0 1px color-mix(in srgb, var(--yalinay-accent) 35%, transparent) !important; } /* Çok satırlı alan: yüzen etiket de çalışır, metin 20px'ten başlar. */ .alan-kayici textarea.alan-girdi { height: auto; min-height: 88px; padding: 20px 10px 8px !important; line-height: 1.4 !important; } .alan-kayici textarea.alan-girdi ~ .alan-etiket { top: 20px; } /* Yüzen etiket: input'un İÇİNDE, placeholder gibi durur. */ .alan-etiket { position: absolute; left: 10px; right: 10px; top: 27px; transform: translateY(-50%); font-size: 13.5px; line-height: 1; color: var(--yalinay-soft, #4B5563); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Yukarı kalkma: odak VEYA dolu. İkisi de aynı sınıfı kullanır. */ .alan-kayici .alan-girdi:focus ~ .alan-etiket, .alan-kayici .alan-girdi:not(:placeholder-shown) ~ .alan-etiket { top: 11px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--yalinay-accent, #7B1F1F); } .alan-kayici textarea.alan-girdi:focus ~ .alan-etiket, .alan-kayici textarea.alan-girdi:not(:placeholder-shown) ~ .alan-etiket { top: 11px; } /* 🔴 SELECT: `