/* ========================================================================== Uzun Avukatlık Bürosu — arayüz stilleri Tasarım dili: sıcak, yakın, ferah. Krem zemin, kiremit turuncusu vurgu, yuvarlak formlar, yumuşak gölgeler, günlük dil. 1. Değişkenler 6. Bölümler 11. Formlar 2. Temel 7. Kartlar 12. Araçlar 3. Tipografi 8. Makale gövdesi 13. Alt bilgi 4. Bileşenler 9. Akordeon 14. Duyarlı düzen 5. Başlık 10. İlçe seçici ========================================================================== */ /* Plus Jakarta Sans — yerel barındırma (SIL Open Font License 1.1). Değişken ağırlıklı (400–800) woff2, yalnız latin + latin-ext alt kümeleri. Türkçe için ikisi de gerekli: ı/ç/ö/ü latin'de, ğ/ş/İ latin-ext'te. Google Fonts'tan çekildiğinde fonts.googleapis.com + fonts.gstatic.com için iki ayrı bağlantı kurulması gerekiyordu; yerelde ilk boyamayı geciktirmiyor. */ @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* 1. Değişkenler --------------------------------------------------------- */ :root{ /* Tarayıcının kendi bileşenleri (kaydırma çubuğu, tarih seçici, form denetimleri) de temayla uyumlu çizilsin diye. */ color-scheme:light; --paper:#FAF5EE; --card:#FFFFFF; --card-2:#F4EDE3; --card-3:#EBD9C7; --ink:#1A1512; --ink-2:#2B2320; --ink-3:#3D332D; /* Kontrast notu: --accent hem dolgu (beyaz metinle) hem de metin rengi olarak kullanılıyor. Her iki rol de beyazla kontrast gerektirdiği için tek değer ikisini birden belirler. #DD5525 4,5 eşiğinin altındaydı (3,89). */ --accent:#C24518; --accent-2:#A33911; --accent-3:#FF9455; --accent-text:#BF441A; --accent-ink:#98350F; --accent-soft:#FBE0D0; --accent-tint:#FDEDE3; --accent-line:#F3B08A; --text:#1A1512; --text-2:#3D332D; --muted:#5F534B; --muted-2:#8A7A6F; --line:#E6D8C8; --line-2:#F0E6D9; --ok:#1E7A50; --warn:#A85B12; --err:#B93A28; --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --r-sm:12px; --r:16px; --r-lg:18px; --r-xl:28px; --r-2xl:34px; --sh-1:0 1px 2px rgba(42,35,32,.04),0 2px 6px rgba(42,35,32,.04); --sh-2:0 4px 10px rgba(42,35,32,.05),0 14px 34px rgba(42,35,32,.08); --sh-3:0 24px 64px rgba(42,35,32,.14); --sh-warm:0 6px 18px rgba(221,85,37,.34); --wrap:1180px; --nav-h:76px; --ease:cubic-bezier(.22,.61,.36,1); } [data-theme="dark"]{ color-scheme:dark; --paper:#141109; --card:#211C13; --card-2:#1B170F; --card-3:#31291B; --ink:#0D0B06; --ink-2:#1B170F; --ink-3:#31291B; --accent:#FF8A4C; --accent-2:#FFA66E; --accent-3:#FFA66E; --accent-text:#FF9A5F; --accent-tint:#2A2116; --accent-soft:#362B1C; --accent-line:#5A462C; --accent-ink:#FFA66E; --text:#FAF5EE; --text-2:#E2D8CB; --muted:#C3B6A6; --muted-2:#9A8B7C; --line:#332C1E; --line-2:#272115; --ok:#6FD3A0; --warn:#F0AE5E; --err:#F0897C; --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 8px 30px rgba(0,0,0,.4); --sh-3:0 24px 70px rgba(0,0,0,.55); --sh-warm:0 8px 22px rgba(240,168,104,.2); } /* 2. Temel --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px); overflow-x:clip; /* Çekmece/arama açılırken overflow:hidden oluyor; kaydırma çubuğu kaybolunca sayfanın yana sıçramaması için yer baştan ayrılır. */ scrollbar-gutter:stable} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans); font-size:16.5px;line-height:1.68;font-weight:450; font-feature-settings:"kern","liga";text-rendering:optimizeLegibility; /* clip, hidden değil: overflow-x:hidden body'yi kaydırma kabı yapıyor ve .site-header'ın position:sticky özelliğini sessizce iptal ediyordu — başlık sayfayla birlikte yukarı kayıp gidiyordu. clip, yatay taşmayı yine engeller ama kaydırma kabı oluşturmaz. html üzerinde de zaten clip kullanılıyor. */ overflow-x:clip} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px} ::selection{background:var(--accent);color:#fff} hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0} .wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto} .wrap-narrow{width:min(100% - 2.5rem,780px);margin-inline:auto} .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--ink);color:#fff; padding:12px 20px;border-radius:0 0 14px 0} .skip:focus{inset-inline-start:0} /* Yalnızca ekran okuyucular için — başlık hiyerarşisini bozmadan gizli başlık */ /* `hidden` niteliği tarayıcının display:none'ı; .callout{display:flex} gibi sınıf kuralları onu eziyordu. Kıdem hesaplayıcısında "süre 1 yılın altında" uyarısı bu yüzden 7 yıllık kıdemde de görünüyordu (35. tur). */ [hidden]{display:none!important} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 3. Tipografi ----------------------------------------------------------- */ h1,h2,h3,h4{font-family:var(--sans);font-weight:800;line-height:1.12;letter-spacing:-.035em; margin:0 0 .55em;color:var(--text)} /* 34. tur ölçek sıkılaştırması (kullanıcı: "yazılar ve kutular büyük"): H1 64→52, H2 43→34, H3 20→18 masaüstünde; telefonda H1 37→32, H2 29→25. Gövde metni (16,5px) bilerek değişmedi. */ h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.25rem);letter-spacing:-.045em;line-height:1.06} h2{font-size:clamp(1.56rem,1.25rem + 1.3vw,2.125rem);letter-spacing:-.038em} h3{font-size:clamp(1.06rem,1rem + .35vw,1.125rem);font-weight:700;letter-spacing:-.025em} h4{font-size:1.03rem;font-weight:700;letter-spacing:-.015em} p{margin:0 0 1.15em} .lede{font-size:clamp(1.06rem,1rem + .38vw,1.2rem);line-height:1.68;color:var(--text-2);font-weight:500;max-width:52ch} .eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700; color:#fff;background:var(--accent);border-radius:100px;padding:.4rem 1rem;margin:0 0 1.1rem; box-shadow:0 4px 12px rgba(221,85,37,.26)} [data-theme="dark"] .eyebrow{background:var(--accent-soft)} .section-head{max-width:62ch} .section-head.center{margin-inline:auto;text-align:center} .text-muted{color:var(--muted)} .small{font-size:.9rem} /* max-width: .8rem metin geniş kutuda 114 karaktere uzuyordu; gövde metniyle aynı ölçüde (54ch ≈ 78 karakter) tutulur. */ .tiny{font-size:.8rem;max-width:54ch} /* 4. Bileşenler ---------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.6rem 1.45rem;min-height:44px;border-radius:100px;border:1.5px solid transparent;cursor:pointer; font-size:.95rem;font-weight:700;text-align:center; transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .18s,color .18s,border-color .18s} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn svg{width:17px;height:17px;flex:none} .btn-gold{background:var(--accent);color:#fff;box-shadow:var(--sh-warm)} .btn-gold:hover{background:var(--accent-2);color:#fff} [data-theme="dark"] .btn-gold{color:#17150F} [data-theme="dark"] .btn-gold:hover{color:#17150F} .btn-primary{background:var(--ink);color:#FBF7F2;box-shadow:var(--sh-1)} .btn-primary:hover{background:var(--ink-2);color:#fff;box-shadow:var(--sh-2)} [data-theme="dark"] .btn-primary{background:var(--card-3);color:var(--text)} .btn-ghost{background:var(--card);border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-light{background:rgba(255,255,255,.1);color:#FBF7F2;border-color:rgba(255,255,255,.22);backdrop-filter:blur(8px)} .btn-light:hover{background:rgba(255,255,255,.18);color:#fff} .btn-sm{padding:.6rem 1.2rem;font-size:.87rem} .btn-block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:.7rem} .chip{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .9rem;border-radius:100px; background:var(--card);border:1.5px solid var(--line);font-size:.805rem;font-weight:600;color:var(--text-2); transition:.2s var(--ease);line-height:1.5} .chip svg{width:15px;height:15px;flex:none;stroke-width:1.8} a.chip:hover{border-color:var(--accent-line);background:var(--accent-tint);color:var(--accent-ink);transform:translateY(-1px)} .chip-gold{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);font-weight:700} .link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.94rem;color:var(--accent-text); transition:.22s var(--ease)} .link-arrow svg{width:15px;height:15px;transition:transform .25s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)} .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;flex:none; background:var(--accent-soft);color:var(--accent);transition:.28s var(--ease)} .ico svg{width:22px;height:22px;stroke-width:1.8} [data-theme="dark"] .ico{color:var(--accent-3)} /* Bölüm boşluğu. Eskiden masaüstünde iki bölüm arası 192px (96+96) idi; kullanıcı fazla buldu, ölçülüp seçildi: masaüstü 112px, telefon 43px. Alt sınır 641px'e denk gelecek şekilde seçildi: telefondaki 43px'ten çıkarken sıçrama olmasın (641px'te 54px, kademeli olarak 1365px'te 112px). ⚠️ .section-tight HER ZAMAN .section'dan küçük kalmalı — üst sınırı .section'ın altında tut, yoksa "dar" varyant normalden geniş olur. */ .section{padding:clamp(1.5rem,.1rem + 3.2vw,3rem) 0} /* 1365px+ → 56px, arası 112px */ .section-tight{padding:clamp(1.2rem,.05rem + 2.8vw,2.2rem) 0} .section-ink{background:var(--ink);color:#F1EAE4} [data-theme="dark"] .section-ink{background:var(--card-2)} .section-ink h1,.section-ink h2,.section-ink h3{color:#FBF7F2} .section-ink .lede,.section-ink .text-muted{color:#D2C4B7} .section-ink .eyebrow{background:rgba(255,255,255,.09);color:var(--accent-3)} .section-alt{background:var(--card-2)} .rule{height:1px;background:var(--line);margin:0} /* 5. Başlık / gezinme ---------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:90;background:var(--paper); background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid transparent;transition:.3s var(--ease)} .site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(42,35,32,.05)} /* gap ve .nav-link dolgusu ölçülerek kısıldı: Rusça/Ukraynaca menü etiketleri Türkçeden ~150px uzun ve içerik 1180px'lik kaba sığmayıp taşıyordu (ru 30px, uk 22px — her ekran genişliğinde, çünkü kap --wrap ile sabit). Bu iki değer ~40px yer açıyor; Türkçede fark gözle seçilmiyor. */ .nav{display:flex;align-items:center;gap:.85rem;height:var(--nav-h)} .brand{display:flex;align-items:center;gap:.65rem;flex:none} .brand svg,.brand img{width:40px;height:40px;border-radius:13px} /* Logo, butonlarla aynı çifti kullanır: --accent zemin, üstünde .btn-gold metin rengi */ .logo-zemin{fill:var(--accent)} .logo-cizim{fill:#fff} [data-theme="dark"] .logo-cizim{fill:#17150F} .brand-text{display:flex;flex-direction:column;line-height:1.12} .brand-name{font-size:1.05rem;font-weight:800;letter-spacing:-.03em;color:var(--text)} .brand-sub{font-size:.75rem;color:var(--muted);font-weight:600;letter-spacing:-.005em} .nav-links{display:flex;align-items:center;gap:.15rem;margin-inline-start:auto} .nav-link{position:relative;padding:.55rem .62rem;border-radius:100px;font-size:.93rem;font-weight:600; color:var(--text-2);transition:.2s;display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap} .nav-link:hover{color:var(--accent-ink);background:var(--accent-tint)} .nav-link.active{color:var(--text)} .nav-link .caret{width:11px;height:11px;opacity:.5;transition:transform .25s} .has-mega:hover .caret,.mega-wrap:focus-within .caret{transform:rotate(180deg)} .nav-actions{display:flex;align-items:center;gap:.5rem;margin-inline-start:.4rem} /* Başlık düğmesi hiçbir genişlikte iki satıra kırılmaz. */ .nav-actions .btn{white-space:nowrap;flex:none} .icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;border:1.5px solid var(--line); background:var(--card);cursor:pointer;color:var(--muted);transition:.2s var(--ease)} .icon-btn:hover{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-tint)} .icon-btn svg{width:18px;height:18px} .mega-wrap{position:relative} /* Panel tetikleyicinin altına ortalanıyordu; 880px genişlik menü öğesinden çok daha geniş olduğu için sol kenarı ekran dışına taşıyordu (1180px ekranda sol:-11px). Artık ekrana göre konumlanıyor: hangi menü öğesinin altında olursa olsun taşmaz. .mega-wrap üzerinde transform/filter yok, bu yüzden fixed güvenle kullanılabilir. */ .mega{position:fixed;top:calc(var(--nav-h) + 10px);left:50%; transform:translateX(-50%) translateY(-8px); width:min(94vw,880px);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-3);padding:1.4rem;opacity:0;visibility:hidden;z-index:95; /* Kapanış kısa bir gecikmeyle olur: fare menüden bir an kayarsa panel kaybolmaz. pointer-events:none KULLANILMAZ: fare çıkınca anında devreye girip gecikme sırasında geri dönen fareyi yakalatmıyordu. Gizli (visibility:hidden) panel zaten tıklanamaz. */ transition:opacity .22s var(--ease) .12s,transform .22s var(--ease) .12s,visibility 0s linear .34s} .mega-wrap:hover .mega,.mega-wrap:focus-within .mega,.mega.open{ opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s} /* Köprü: "Ne yapıyoruz" bağlantısı ile panel arasında ~30px boşluk var. Fare bu boşluktan geçerken .mega-wrap:hover düşüyor ve panel kapanıyordu (34. tur, kullanıcı bildirdi). Panelin üstüne, başlığın alt kenarına kadar uzanan görünmez bir alan eklenir; panelin çocuğu olduğu için üzerindeyken hover sürer. Panel gizliyken (visibility) tıklama almaz. */ .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--nav-h) / 2 + 12px)} .mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem} .mega-item{display:flex;gap:.7rem;padding:.62rem .7rem;border-radius:14px;transition:.2s var(--ease)} .mega-item:hover{background:var(--accent-tint)} .mega-item .ico{width:34px;height:34px;border-radius:11px} .mega-item .ico svg{width:16px;height:16px} .mega-item b{display:block;font-size:.885rem;font-weight:700;letter-spacing:-.015em} /* Yalnız açıklama satırı. Eski seçici (.mega-item span) ikon kutusunu da () yakalıyor, .ico'nun display:grid ortalamasını ezip ikonu sol üste kaydırıyordu. */ .mega-item b + span{display:block;font-size:.775rem;color:var(--muted);line-height:1.45;margin-top:1px;font-weight:500} .mega-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem; margin-top:1rem;padding-top:1rem;border-top:1.5px solid var(--line-2);font-size:.86rem;color:var(--muted)} .burger{display:none;width:42px;height:42px;border-radius:13px;border:1.5px solid var(--line);background:var(--card); cursor:pointer;place-items:center} .burger span{display:block;width:17px;height:2px;background:var(--text);border-radius:2px;transition:.3s var(--ease)} .burger span+span{margin-top:4.5px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .drawer{position:fixed;inset:var(--nav-h) 0 0;background:var(--paper);z-index:88;padding:1.4rem 0 4rem; overflow-y:auto;transform:translateX(100%);transition:transform .34s var(--ease);visibility:hidden} .drawer.open{transform:none;visibility:visible} /* Çekmece araç şeridi. Eskiden flex'ti ve `flex:1` yalnız