/* ============================================================================ VOWLIA YARDIM MERKEZİ — TASARIM SİSTEMİ ---------------------------------------------------------------------------- Jetonlar ana siteyle (davetiye_web/y/index.html · tailwind.config) BİREBİR aynı. Ana site Tailwind CDN kullanıyor; burada elle yazıyoruz çünkü bu sayfaların işi arama motorundan trafik almak ve CDN'de JIT derleyen bir betik ilk boyamayı geciktiriyor. Karanlık tema: . Sınıf 'deki senkron betikle ilk boyamadan ÖNCE takılır — tema zıplaması olmaz. RTL (Arapça): yön duyarlı her yerde logical property (inline-start/end) kullanıldı; tek başına yeterli olsun diye. ========================================================================== */ :root { --primary: #d4909a; --primary-ink: #a95a6a; /* aydınlıkta vurgu için koyulaşmış ton */ --bg: #fbf8f9; --surface: #f3e8ea; --card: #ffffff; --copy: #1b0e11; --muted: #95505d; --border: #e6d1d5; --radius: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --shadow-soft: 0 6px 24px -6px rgb(0 0 0 / 15%); --shadow-lift: 0 12px 32px -12px rgb(27 14 17 / 22%); --header-h: 64px; --sidebar-w: 268px; /* Sağ ray kaldırıldı → iskelet iki sütun. Ölçüler nefes payına göre: 268 menü + 80 boşluk + ~770 içerik ≈ 1120, ekranda ortalanır. */ --shell-gap: 80px; /* TEK ÖLÇÜ: üst çubuk, okuma alanı ve alt bilgi aynı genişlikte hizalanır. Farklı olsalardı logo menünün soluna kaçıyordu (ölçüldü). */ --maxw: 1160px; --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --script: "Great Vibes", cursive; color-scheme: light; } .dark { --bg: #1b0e11; --surface: #2a1a1d; --card: #221418; --copy: #fbf8f9; --muted: #e6d1d5; --border: #392629; --primary-ink: #edb9c1; --shadow-soft: 0 6px 24px -6px rgb(0 0 0 / 45%); --shadow-lift: 0 12px 32px -12px rgb(0 0 0 / 60%); color-scheme: dark; } /* ───────────────────────────────── temel ────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; /* Kısa sayfalarda footer ekranın ortasına tırmanmasın: gövde dikey flex, iskelet boşluğu doldurur. (Arama katmanı position:fixed → akış dışı.) */ min-height: 100svh; display: flex; flex-direction: column; font-family: var(--font); background: var(--bg); color: var(--copy); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.02em; margin: 0; font-weight: 800; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } img, svg { max-width: 100%; } .ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; /* ikon adı RTL'de ters okunmasın */ -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; vertical-align: middle; flex: none; } kbd { font-family: inherit; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); } .skip { position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 200; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: var(--radius); } .skip:focus { inset-inline-start: 12px; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* Ana sitedeki kumlu doku — hero'da kullanılıyor */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 160px 160px; mix-blend-mode: multiply; opacity: .35; } .dark .grain::after { mix-blend-mode: screen; opacity: .22; } /* ─────────────────────────────── düğmeler ───────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; transition: transform .2s, box-shadow .2s, background .2s, color .2s; } .btn--sm { padding: 8px 16px; font-size: 14px; } .btn--primary { background: var(--primary); color: #fff; } .btn--primary:hover { transform: scale(1.04); box-shadow: var(--shadow-soft); } .btn--ghost { background: var(--surface); color: var(--copy); border: 1px solid var(--border); } .btn--ghost:hover { border-color: var(--primary); color: var(--primary); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: transparent; border: 0; cursor: pointer; color: var(--muted); transition: background .2s, color .2s; } .icon-btn:hover { background: var(--surface); color: var(--primary); } /* Ana sitedeki desen: aydınlıkta AY (gidilecek yer), karanlıkta GÜNEŞ */ .th-sun { display: none; } .dark .th-sun { display: inline-block; } .dark .th-moon { display: none; } /* ═══════════════════════════════ ÜST ÇUBUK ══════════════════════════════ */ .topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .topbar-in { max-width: var(--maxw); margin: 0 auto; height: var(--header-h); padding: 0 20px; display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; flex: none; } /* ⚠️ OPTİK KAYDIRMA — keyfi değil, ölçülerek bulundu. Logo bir wordmark ve mürekkebi kutusunu tepeden tabana TAM dolduruyor (SVG bbox: y=0, h=68.1 / viewBox 68.04) — yani kutunun alt kenarı doğrudan harflerin taban çizgisi. Yazının ise satır kutusunda alt/üst boşluk var. İkisi `align-items:center` ile kutu kutuya ortalanınca logonun taban çizgisi yazınınkinden 4,4px AŞAĞI kalıyor ve gözle fark ediliyor. (`align-items: baseline` denendi: SVG'nin sentezlenen taban çizgisi beklendiği gibi davranmayıp bu kez 3px yukarı taşırdı — bu yüzden elle kaydırıyoruz.) ⚠️ Logo yüksekliği (26px) veya .brand-name'in font/line-height'ı değişirse bu değer yeniden ölçülmeli: shift = (logoYüksekliği/2) − (yazının kutu merkezinden taban çizgisine uzaklığı). */ .brand-logo { display: block; color: var(--primary); transform: translateY(-4px); } .brand-logo svg { height: 26px; width: auto; display: block; } .brand-sep { width: 1px; height: 22px; background: var(--border); } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; } .searchbar { /* ⚠️ min-width:0 ŞART: flex öğeleri varsayılan min-width:auto ile gelir ve içindeki nowrap metin kutunun daralmasını engelliyordu — dar ekranda tema/dil düğmelerini ekran dışına itiyordu (ölçüldü). */ flex: 1; min-width: 0; max-width: 460px; margin-inline: auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--surface); color: var(--muted); border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; text-align: start; transition: border-color .2s, background .2s; } .searchbar:hover { border-color: var(--primary); } .sb-ic { font-size: 19px; } .sb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-kbd { flex: none; } .topbar-right { display: flex; align-items: center; gap: 6px; flex: none; } .lang-wrap { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; background: transparent; border: 1px solid var(--border); font: inherit; font-size: 14px; font-weight: 600; color: var(--copy); cursor: pointer; transition: border-color .2s; } .lang-btn:hover { border-color: var(--primary); } .lang-btn .fi { border-radius: 3px; flex: none; } .lang-sep { width: 1px; height: 18px; background: var(--border); flex: none; } .lang-chev { margin-inline-start: auto; } .lang-chev { font-size: 18px; opacity: .6; transition: transform .2s; } .lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); } .lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); /* footer'da menü YUKARI açılır — ana sitedeki davranışın aynısı */ width: 210px; max-height: 380px; overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); z-index: 70; } .lang-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius); font-size: 14px; } .lang-opt:hover { background: var(--surface); } .lang-opt.is-active { color: var(--primary); font-weight: 700; } .lang-opt .fi { border-radius: 3px; flex: none; } .lang-menu--up { top: auto; bottom: calc(100% + 8px); inset-inline-end: 0; inset-inline-start: auto; } /* Footer dil seçici — ana sitedeki `#langBtn`'in birebiri. ⚠️ Yuvarlak (pill) DEĞİL: rounded-lg = .75rem. */ .lang-btn--foot { height: auto; padding: 8px 12px; border-radius: var(--radius-lg); border-color: color-mix(in srgb, var(--border) 50%, transparent); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* ⚠️ 16px: ana sitede #langLabel'ın kendi boyutu yok, gövdeden 16px miras alıyor. 14px bırakınca düğme 154×41 kalıyordu, olması gereken 167×44. */ font-size: 16px; font-weight: 400; } .lang-btn--foot:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); } /* Emniyet: dar bir sütuna düşerse etiket kısalsın, taşma olmasın. */ .lang-btn--foot { max-width: 100%; } .lang-btn--foot .lang-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lang-btn--foot .lang-sep { height: 20px; margin-inline: 8px; background: color-mix(in srgb, var(--border) 60%, transparent); } .lang-btn--foot .lang-chev { margin-inline-start: 4px; opacity: .7; font-size: 18px; } /* w-4 h-4 karşılığı */ .lang-btn--foot + .lang-menu { width: 224px; /* w-56 */ background: color-mix(in srgb, var(--bg) 95%, transparent); border-color: color-mix(in srgb, var(--border) 50%, transparent); border-radius: var(--radius-lg); } .lang-check { margin-inline-start: auto; font-size: 18px; } .menu-btn { display: none; } .menu-close { display: none; } .menu-btn[aria-expanded="true"] .menu-open { display: none; } .menu-btn[aria-expanded="true"] .menu-close { display: inline-block; } /* ═══════════════════════════════ İSKELET ════════════════════════════════ */ .shell { flex: 1; max-width: var(--maxw); margin: 0 auto; /* ⚠️ Alttaki nefes payı İSKELETE verilir, tek bir sütuna değil. Sadece .content'e verilirse kısa sayfalarda en uzun sütun SOL MENÜ olur ve footer menüye ("İletişim / vowlia.com'a dön") yapışır — ölçüldü. */ padding: 0 20px 128px; display: grid; gap: var(--shell-gap); grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; } /* Ana sayfa/404 tek sütun VE tam genişlik. .shell'in 1440px sınırı burada kalkıyor ki hero ekranın iki kenarına dayansın; içerideki ızgaralar kendi max-width'leriyle ortalanmaya devam ediyor. */ .shell--wide { grid-template-columns: minmax(0, 1fr); padding-inline: 0; max-width: none; width: 100%; } /* Sütunun kendi kuyruğu kısa tutulur; asıl nefes payı .shell'in alt dolgusundan gelir (yukarıdaki nota bak). Toplam ≈ 160px. */ .content { min-width: 0; padding-block: 44px 32px; } .shell--wide .content { padding-block: 0 32px; } /* ────────────────────────────── SOL MENÜ ───────────────────────────────── */ .sidebar { position: sticky; top: var(--header-h); align-self: start; } .sidebar-inner { max-height: calc(100svh - var(--header-h)); overflow-y: auto; padding: 26px 8px 40px; scrollbar-width: thin; } .sidebar-inner::-webkit-scrollbar { width: 6px; } .sidebar-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .nav-home, .nav-cat, .nav-item, .side-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); font-size: 14px; color: var(--muted); transition: background .15s, color .15s; } .nav-home { font-weight: 700; color: var(--copy); margin-bottom: 10px; } .nav-home:hover, .nav-cat:hover, .nav-item:hover, .side-link:hover { background: var(--surface); color: var(--primary); } .nav-home.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); } .nav-ic { font-size: 19px; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nav-cat { font-weight: 700; color: var(--copy); } .nav-cat.is-active { color: var(--primary); } .nav-chev { margin-inline-start: auto; font-size: 18px; opacity: .45; transition: transform .2s; } .nav-group.is-open .nav-chev { transform: rotate(90deg); } [dir="rtl"] .nav-chev { transform: rotate(180deg); } [dir="rtl"] .nav-group.is-open .nav-chev { transform: rotate(90deg); } /* Kapalı kategoriler kapalı durur; açık olan (bulunduğun kategori) görünür. ⚠️ Bilerek `display:none` DEĞİL: kapalı kategorilerin makale bağlantıları DOM'da kalsın ki tarayıcı da arama motoru da iç bağlantıları görebilsin. ⚠️ Ve bilerek grid-template-rows:0fr DEĞİL (ölçüldü): o numara yalnız TEK çocuklu kapsayıcıda çalışır;