/* Civic Space Media Tema değişkenleri içinde theme_css_vars() ile basılır. Buradaki her renk var() üzerinden gelir, sabit renk yazılmaz. */ /* ================= TASARIM TOKEN SETİ (C21) ================= Panelden gelen iki düğme `theme_css_vars()` ile içine basılıyor: --radius ve --scale. Bu blok ikisinden bütün ölçeği türetiyor. Öncesinde --scale yalnızca gövde yazı tipini ölçekliyordu, --radius ise 19 yerde kullanılıyordu; dosyada 874 sabit piksel değeri vardı. Yani panelin "Yazı ölçeği" ve "Köşe" ayarları fiilen etkisizdi. Bu paket GÖRÜNÜMÜ DEĞİŞTİRMEZ. Ölçek 1 ve köşe 14px iken üretilen her değer bugünküyle aynı; tek istisna 4/6/9/18/20 piksellik beş köşe, onlar da 1 pikselin altında oynuyor. Ölçeğin kendisi sadeleştirilmedi (20 basamak, 12,5 / 13,5 / 14,5 gibi yarım adımlar duruyor): onu dagitim29 tasarım yönü zaten baştan kuruyor, iki kez yapmanın anlamı yok. ------------------------------------------------------------ */ :root{ /* --- tipografi: hepsi --scale ile çarpılıyor --- */ --fs-10:calc(10px*var(--scale,1)); --fs-11:calc(11px*var(--scale,1)); --fs-115:calc(11.5px*var(--scale,1)); --fs-12:calc(12px*var(--scale,1)); --fs-125:calc(12.5px*var(--scale,1)); --fs-13:calc(13px*var(--scale,1)); --fs-135:calc(13.5px*var(--scale,1)); --fs-14:calc(14px*var(--scale,1)); --fs-145:calc(14.5px*var(--scale,1)); --fs-15:calc(15px*var(--scale,1)); --fs-155:calc(15.5px*var(--scale,1)); --fs-16:calc(16px*var(--scale,1)); --fs-165:calc(16.5px*var(--scale,1)); --fs-17:calc(17px*var(--scale,1)); --fs-18:calc(18px*var(--scale,1)); --fs-19:calc(19px*var(--scale,1)); --fs-20:calc(20px*var(--scale,1)); --fs-22:calc(22px*var(--scale,1)); --fs-24:calc(24px*var(--scale,1)); --fs-76:calc(76px*var(--scale,1)); /* Akışkan başlıklar. clamp() içi de ölçekle çarpılıyor; yoksa yazı ölçeği büyütüldüğünde başlıklar yerinde kalır, gövde onlara yetişirdi. */ --fs-d1:calc(clamp(34px,7vw,54px)*var(--scale,1)); --fs-h1:calc(clamp(30px,4.4vw,52px)*var(--scale,1)); --fs-h1b:calc(clamp(28px,3.2vw,40px)*var(--scale,1)); --fs-h1c:calc(clamp(26px,3.4vw,38px)*var(--scale,1)); --fs-h2:calc(clamp(23px,3vw,33px)*var(--scale,1)); --fs-h2b:calc(clamp(20px,2.6vw,29px)*var(--scale,1)); --fs-h2c:calc(clamp(20px,2.4vw,26px)*var(--scale,1)); --fs-h3:calc(clamp(19px,2.2vw,24px)*var(--scale,1)); --fs-h3b:calc(clamp(18px,2.2vw,23px)*var(--scale,1)); --fs-lede:calc(clamp(16.5px,1.9vw,19.5px)*var(--scale,1)); /* --- köşe: hepsi --radius'tan türüyor, yedi basamak --- Marka geometrisi (44/115/161/230 piksellik yarım daireler ve sosyal ikonların %50'si) bilerek DIŞARIDA: onlar köşe değil biçim. "Köşe" ayarı sıfıra çekilse bile logonun yarım daireleri yarım daire kalmalı. */ --r-1:calc(var(--radius,14px)*.357); /* 5 */ --r-2:calc(var(--radius,14px)*.571); /* 8 */ --r-3:calc(var(--radius,14px)*.714); /* 10 */ --r-4:calc(var(--radius,14px)*.857); /* 12 */ --r-5:var(--radius,14px); /* 14 */ --r-6:calc(var(--radius,14px)*1.357); /* 19 */ --r-pill:999px; /* --- boşluk ölçeği: 4 piksel taban, dördün katları --- dagitim28'de bilerek ertelenmişti ("dikey ritim tasarım yönüyle birlikte kurulmalı"). Yön dagitim29'da kuruldu, sırası geldi. Yalnızca ölçeğe BİREBİR oturan değerler bağlandı; 5, 7, 9, 18, 22, 26, 34 gibi ızgara dışı değerler olduğu gibi duruyor. Onları ölçeğe çekmek sayfanın dikey ritmini görünür biçimde değiştirir, yani ayrı bir tasarım kararı. */ --olcu-1:4px; --olcu-2:8px; --olcu-3:12px; --olcu-4:16px; --olcu-5:24px; --olcu-6:32px; --olcu-7:48px; --olcu-8:64px; --olcu-9:96px; /* Giriş yumuşatması: kart ve bölüm geçişlerinde ortak eğri. */ --easing-giris:cubic-bezier(.16,.84,.44,1); /* --- hareket süreleri --- */ --sure-hizli:.15s; --sure:.2s; --sure-orta:.25s; --sure-yavas:.3s; /* --- katman sırası: aralarında onar boşluk var, araya girmek kolay --- */ --z-serit:60; /* yapışkan üst şerit */ --z-menu:70; /* açılır menüler */ --z-ustbar:80; /* mobil menü paneli */ --z-katman:120; /* çerez bandı, bildirimler */ --z-atla:200; /* "içeriğe atla", her şeyin üstünde */ /* --- gölgeler --- */ --golge-md:0 12px 34px rgba(0,0,0,.13); --golge-lg:0 14px 38px rgba(0,0,0,.13); --golge-ust:0 -8px 30px rgba(0,0,0,.10); } /* Kırılım noktaları token olamaz: @media kuralı var() okumuyor. Kullanımda olanlar kayda geçsin diye buraya yazıldı, sekiz tane: 1180 · 1040 · 980 · 860 · 760 · 720 · 640 · 520 Sekiz kırılım fazla, üçe inmeli; ama bu düzen davranışını değiştiren ayrı bir iş, bu pakete alınmadı. */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px} /* Sabit çerez bandı sayfa sonundaki bağlantıları örtüyordu. --band-y'yi site.js bandın gerçek yüksekliğinden hesaplayıp yazıyor. */ body{padding-bottom:calc(var(--alt-serit,0px) + var(--band-y,0px))} body{ margin:0;background:var(--bg);color:var(--ink); font:calc(16px * var(--scale,1))/1.65 var(--font); -webkit-font-smoothing:antialiased; transition:background var(--sure-yavas),color var(--sure-yavas); } img{max-width:100%;height:auto} a{color:inherit} [hidden]{display:none!important} :focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-1); box-shadow:0 0 0 6px var(--bg)} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--olcu-5)} .muted{color:var(--muted)} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff; padding:10px 18px;z-index:var(--z-atla);border-radius:0 0 var(--r-2) 0} .skip:focus{left:0} /* ---------- tipografi ---------- */ h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.028em;margin:0 0 18px;font-weight:800} .h2{font-size:var(--fs-h2);letter-spacing:-.022em;margin:0 0 var(--olcu-3);font-weight:800} .h3{font-size:var(--fs-h3);letter-spacing:-.015em;margin:38px 0 14px;font-weight:700} .h4{font-size:var(--fs-17);margin:0 0 var(--olcu-2);font-weight:700} .lede{font-size:var(--fs-lede);line-height:1.62;color:var(--muted);max-width:58ch;margin:0 0 26px} .sub{color:var(--muted);max-width:58ch;margin:0 0 26px} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-13);font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 18px} .eyebrow::before{content:"";width:26px;height:2px;background:var(--r)} .prose{max-width:70ch;font-size:var(--fs-17)} .prose h2{font-size:var(--fs-24);margin:34px 0 var(--olcu-3);letter-spacing:-.015em} .prose h3{font-size:var(--fs-20);margin:28px 0 10px} .prose p{margin:0 0 var(--olcu-4)} .prose ul,.prose ol{margin:0 0 var(--olcu-4);padding-left:22px} .prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:currentColor} .prose blockquote{margin:22px 0;padding:var(--olcu-1) 0 var(--olcu-1) 20px;border-left:3px solid var(--o);color:var(--muted)} .prose img{border-radius:var(--radius)} .prose code{background:var(--card);border:1px solid var(--line);border-radius:var(--r-1);padding:1px 5px;font-size:.9em} /* Tablo anatomisi. Metin editörü tablo basabiliyordu ama hiçbir kural yoktu: tablolar tarayıcı varsayılanıyla, kenarlıksız çıkıyor ve dar ekranda sayfayı yatay taşırıyordu. Kaydırma kabını site.js sarıyor. */ .tablo-kap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:var(--radius); -webkit-overflow-scrolling:touch} .tablo-kap:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .prose table{border-collapse:collapse;width:100%;min-width:420px;font-size:var(--fs-155);margin:0} .prose th,.prose td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line); vertical-align:top} .prose thead th{background:var(--card);font-weight:700;font-size:var(--fs-135);letter-spacing:.02em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .prose tbody tr:last-child td{border-bottom:none} .prose td:has(+ td){border-right:1px solid var(--line)} .prose caption{caption-side:top;text-align:left;padding:0 0 10px;color:var(--muted);font-size:var(--fs-14)} /* ---------- düğmeler ---------- */ .btn{display:inline-block;border:1px solid var(--line);background:transparent;color:var(--ink); border-radius:var(--r-pill);padding:9px 17px;font:600 14px/1.2 var(--font);cursor:pointer; text-decoration:none;transition:background var(--sure),border-color var(--sure),color var(--sure)} .btn:hover{border-color:var(--ink)} .btn--cta{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)} .btn--cta:hover{filter:brightness(1.12);border-color:var(--accent)} .btn--invert{background:var(--ink);border-color:var(--ink);color:var(--bg)} .btn--ghost{background:transparent} .btn--lg{padding:13px 26px;font-size:var(--fs-155)} .btn--sm{padding:5px 11px;font-size:var(--fs-125)} .link-lg{font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px} /* ---------- üst bar ---------- */ .bar{position:sticky;top:0;z-index:var(--z-serit);background:var(--bg);border-bottom:1px solid var(--line);transition:background var(--sure-yavas)} .bar .wrap{display:flex;align-items:center;gap:20px;min-height:76px} .brand{display:flex;align-items:center;text-decoration:none;flex:none} .brand img{height:42px;width:auto;display:block} .brand--plate img{background:#fff;padding:5px 9px;border-radius:var(--r-2)} .nav{margin-right:auto} /* Boşluk 20 pikselken menü sığmıyordu. Üst bar .wrap ile 1120 piksele sınırlı olduğu için ekran ne kadar geniş olursa olsun menüye 733 piksel kalıyor; yedi başlık artı açılır menü oku 742 piksel istiyordu ve "İletişim" alt satıra düşüp barı 76'dan 84 piksele çıkarıyordu. Bu yüzden ekran genişliğine bağlı bir çözüm işe yaramıyor. */ .nav ul{display:flex;gap:15px;list-style:none;margin:0;padding:0;flex-wrap:wrap} .nav a{text-decoration:none;font-size:var(--fs-145);font-weight:500;padding:6px 0;border-bottom:2px solid transparent} .nav a:hover,.nav a[aria-current]{border-bottom-color:var(--o)} .bar-actions{display:flex;align-items:center;gap:10px;flex:none} .lang{text-decoration:none;font-weight:700;font-size:var(--fs-13);border:1px solid var(--line); border-radius:var(--r-pill);padding:6px var(--olcu-3)} .nav-toggle{display:none;flex-direction:column;gap:var(--olcu-1);background:none;border:0;cursor:pointer;padding:var(--olcu-2)} .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink)} /* ---------- logo işareti (dört yarım daire) ---------- */ .mark{position:relative;display:block;flex:none} .mark i{position:absolute;top:0;display:block} .mark .m1{left:0;background:var(--o)} .mark .m2{left:0;background:var(--y)} .mark .m3{background:var(--r)} .mark .m4{background:var(--b)} .mark--lg{width:460px;height:230px} .mark--lg .m1{width:230px;height:115px;border-radius:0 0 230px 230px} .mark--lg .m2{width:230px;height:115px;top:115px;border-radius:230px 230px 0 0} .mark--lg .m3{left:230px;width:115px;height:230px;border-radius:0 230px 230px 0} .mark--lg .m4{left:345px;width:115px;height:230px;border-radius:230px 0 0 230px} .mark--md{width:230px;height:115px} .mark--md .m1{width:115px;height:57.5px;border-radius:0 0 115px 115px} .mark--md .m2{width:115px;height:57.5px;top:57.5px;border-radius:115px 115px 0 0} .mark--md .m3{left:115px;width:57.5px;height:115px;border-radius:0 115px 115px 0} .mark--md .m4{left:172.5px;width:57.5px;height:115px;border-radius:115px 0 0 115px} .tick{display:block;width:44px;height:22px;border-radius:0 0 44px 44px;margin-bottom:var(--olcu-4)} .c1 .tick{background:var(--o)} .c2 .tick{background:var(--b)} .c3 .tick{background:var(--y)} /* ---------- hero ---------- */ .hero{padding:74px 0 62px} .hero-grid{display:flex;align-items:center;gap:var(--olcu-7);justify-content:space-between} .hero-text{max-width:600px} .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0} /* ---------- sayfa başlığı ---------- */ .phead{padding:56px 0 var(--olcu-2)} .phead h1{margin-bottom:14px} /* ---------- bölümler ---------- */ .sec{padding:60px 0;background:var(--bg);color:var(--ink);transition:background var(--sure-yavas)} .sec + .sec{border-top:1px solid var(--line)} .more{margin-top:22px} /* ---------- logo bandı ---------- */ .logo-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0} .logo-list{display:flex;flex-wrap:wrap;gap:var(--olcu-2);list-style:none;margin:0;padding:0} .logo-list a{display:inline-block;border:1px solid var(--line);border-radius:var(--r-2); padding:var(--olcu-2) 13px;font-size:var(--fs-135);color:var(--muted);text-decoration:none} .logo-list a:hover{color:var(--ink);border-color:var(--ink)} /* ---------- rakamlar ---------- */ .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0} .stats--slim{padding:22px 0} /* Rakamların hesabını açıklayan bağlantı. Şeridin altında, sessiz. */ .stats-kaynak{margin:18px 0 0;font-size:var(--fs-135)} .stats-kaynak a{display:inline-block;min-height:24px;padding:var(--olcu-1) 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .stats-kaynak a:hover{color:var(--ink)} .stats-grid{display:grid;gap:var(--olcu-5);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .stats-grid--inline{margin:0 0 30px} .stat b{display:block;font-size:var(--fs-h1c);line-height:1.05;letter-spacing:-.03em;font-weight:800} /* Etiket, sayının hemen ardından gelen span. Düz ".stat span" yazınca kural sayı bloğunun iç kutularını da yakalıyor ve rakam 13,5 piksele düşüp griye dönüyordu; "50.000" küçücük kalıp yanındaki "+" kocaman çıkıyordu. Kardeş seçici ikisini ayırıyor. */ .stat b + span{display:block;font-size:var(--fs-135);color:var(--muted);margin-top:5px} /* Yazı olarak marka rengi doğrudan kullanılmıyor: --*-lg 24px+ kalın metin eşiğini (3:1), --*-ink normal metin eşiğini (4.5:1) tutturan sürümler. */ .s1 b{color:var(--o-lg)} .s2 b{color:var(--r-lg)} .s3 b{color:var(--b-lg)} .s4 b{color:var(--o-lg)} /* ---------- çipler ---------- */ .chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0} .chip{border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill); padding:var(--olcu-2) 15px;font-size:var(--fs-14)} .chip a{text-decoration:none} .chip::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--o);margin-right:9px;vertical-align:1px} .chip:nth-child(4n+2)::before{background:var(--r)} .chip:nth-child(4n+3)::before{background:var(--b)} .chip:nth-child(4n+4)::before{background:var(--y)} .chips--sm .chip{font-size:var(--fs-125);padding:5px 11px} .tags{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:6px} .tag{display:inline-block;border:1px solid var(--line);border-radius:var(--r-1); padding:2px var(--olcu-2);font-size:var(--fs-12);color:var(--muted);text-decoration:none} .badge{display:inline-block;border:1px solid var(--line);border-radius:var(--r-pill); padding:3px 11px;font-size:var(--fs-125);color:var(--muted)} .badge--accent{border-color:var(--accent);color:var(--accent)} .badges{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px} /* ---------- kartlar ---------- */ .cards{display:grid;gap:var(--olcu-4);grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .card{border:1px solid var(--line);background:var(--card);border-radius:var(--radius);padding:var(--olcu-5); display:flex;flex-direction:column;text-decoration:none;transition:transform var(--sure),border-color var(--sure)} .card:hover{transform:translateY(-3px);border-color:var(--ink)} .card h2,.card h3{margin:0 0 var(--olcu-2);font-size:var(--fs-18);letter-spacing:-.01em} .card p{margin:0 0 var(--olcu-4);font-size:var(--fs-145);color:var(--muted);flex:1} .card .go{font-size:var(--fs-135);font-weight:700} .grid-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .wcard{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;background:var(--card);transition:transform var(--sure),border-color var(--sure)} .wcard:hover{transform:translateY(-3px);border-color:var(--ink)} .wcard-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} .wcard-img--empty{background:linear-gradient(135deg,var(--o),var(--r))} .wcard-body{padding:var(--olcu-4) 18px 18px;display:flex;flex-direction:column;gap:7px} .wcard h3{margin:0;font-size:var(--fs-165);line-height:1.35} .wcard p{margin:0;font-size:var(--fs-14);color:var(--muted)} .pcard{display:flex;flex-direction:column;gap:9px;text-decoration:none;border:1px solid var(--line); border-radius:var(--radius);padding:20px;background:var(--card);transition:transform var(--sure),border-color var(--sure)} .pcard:hover{transform:translateY(-3px);border-color:var(--ink)} .pcard-logo{max-height:44px;width:auto;object-fit:contain;align-self:flex-start} .pcard-name{margin:0;font-size:var(--fs-17)} .pcard-sum{margin:0;font-size:var(--fs-14);color:var(--muted)} .pcard-meta{font-size:var(--fs-125);color:var(--muted);font-weight:600} /* ---------- ekip ---------- */ .people{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .person{display:flex;flex-direction:column;gap:5px;text-decoration:none} .person-ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);display:block} /* Fotoğraf yokken baş harfler. Yer tutucu dosya yüklemiyoruz; gerçek fotoğraf geldiği an bu kutu kendiliğinden yerini bırakıyor. */ .person-ph--empty,.profile-ph--empty{ display:flex;align-items:center;justify-content:center; font-weight:800;letter-spacing:-.02em;line-height:1; user-select:none; } .person-ph--empty{font-size:var(--fs-d1)} .profile-ph--empty{width:240px;height:240px;border-radius:var(--radius);flex:none;font-size:var(--fs-76)} .mono-1{background:var(--accent);color:var(--accent-ink)} .mono-2{background:var(--o);color:#111418} .mono-3{background:var(--y);color:#111418} .mono-4{background:var(--ink);color:var(--bg)} .person-name{font-weight:700;margin-top:var(--olcu-2)} .person-title{font-size:var(--fs-135);color:var(--muted)} .profile{padding:var(--olcu-7) 0 0} .profile-head{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap} .profile-ph{width:240px;height:240px;object-fit:cover;border-radius:var(--radius);flex:none} .profile-title{font-size:var(--fs-16);color:var(--muted);margin:0 0 14px} .plogo{max-width:200px;max-height:120px;object-fit:contain;flex:none} /* ---------- sekmeler ---------- */ .tabs{margin:34px 0} .tablist{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:22px} .tablist button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted); font:600 14.5px/1 var(--font);padding:11px 13px;cursor:pointer} .tablist button em{font-style:normal;opacity:.6;font-size:var(--fs-125)} .tablist button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--o)} /* ---------- zaman çizelgesi ---------- */ .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)} .tl-year{position:relative;padding:0 0 var(--olcu-2) 34px} .tl-y{margin:0 0 10px;font-size:var(--fs-19);font-weight:800;letter-spacing:-.02em} .tl-year::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px; border-radius:50%;background:var(--o);border:3px solid var(--bg)} .tl-gap{height:26px;margin-left:7px;border-left:2px dashed var(--line)} .tl-items{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:14px} .tl-item strong{display:inline} .tl-item p{margin:var(--olcu-1) 0 0;font-size:var(--fs-145);color:var(--muted)} .active-box{border:1px solid var(--line);background:var(--card);border-radius:var(--radius); padding:20px 22px;margin:0 0 34px} .active-box .h3{margin:0 0 var(--olcu-3)} .active-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} /* ---------- kütüphane ---------- */ .lib{display:grid;gap:var(--olcu-6);grid-template-columns:260px 1fr;align-items:start} .lib-filters{position:sticky;top:96px} .filter-toggle{display:none;width:100%} .fpanel{display:flex;flex-direction:column;gap:14px} .field{display:block} .field-l{display:block;font-size:var(--fs-13);font-weight:600;margin-bottom:5px} .field input,.field select{width:100%;padding:9px var(--olcu-3);border:1px solid var(--line); border-radius:var(--r-2);background:var(--bg);color:var(--ink);font:inherit;font-size:var(--fs-145)} .facet{border-top:1px solid var(--line);padding-top:10px} .facet summary{cursor:pointer;font-weight:700;font-size:var(--fs-14);padding:var(--olcu-1) 0;list-style:none} .facet summary::-webkit-details-marker{display:none} .facet summary::before{content:"+";display:inline-block;width:16px;color:var(--muted)} .facet[open] summary::before{content:"\2212"} .facet-list{list-style:none;margin:var(--olcu-2) 0 var(--olcu-1);padding:0;display:flex;flex-direction:column;gap:5px; max-height:280px;overflow:auto} .facet-list--chips{flex-direction:row;flex-wrap:wrap;gap:6px} .check{display:flex;align-items:center;gap:var(--olcu-2);font-size:var(--fs-14);cursor:pointer} .check em{font-style:normal;color:var(--muted);font-size:var(--fs-125)} .check.is-zero{opacity:.45;cursor:not-allowed} .check--chip{border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--olcu-1) 10px;font-size:var(--fs-13)} .result-count{font-size:var(--fs-14);color:var(--muted);margin:0 0 var(--olcu-4)} .zero{border:1px dashed var(--line);border-radius:var(--radius);padding:34px;text-align:center} .zero h3{margin:0 0 var(--olcu-2)} .empty{color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center} .meta{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:26px 0;font-size:var(--fs-145)} .meta dt{font-weight:700;color:var(--muted)} .meta dd{margin:0} .licence{border:1px solid var(--line);background:var(--card);border-radius:var(--radius);padding:20px;margin:34px 0 0} .cite{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:var(--olcu-3) 0 0} .cite code{font-size:var(--fs-13);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-1);padding:7px 11px} .embed{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#000;margin:0 0 26px} .embed img,.embed iframe{width:100%;height:100%;object-fit:cover;border:0;display:block} .embed-play{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer;width:100%;height:100%} .embed-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:74px;height:52px;border-radius:var(--r-4);background:var(--r)} .embed-icon::after{content:"";position:absolute;left:29px;top:15px;border-style:solid; border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff} .work-cover,.post-cover{width:100%;border-radius:var(--radius);margin:0 0 26px} .post-meta{font-size:var(--fs-14);color:var(--muted);margin:0 0 20px} .notice-box{border-left:3px solid var(--y);background:var(--card);padding:var(--olcu-3) var(--olcu-4); border-radius:0 var(--r-2) var(--r-2) 0;font-size:var(--fs-145);margin:0 0 22px} .pager ul{display:flex;gap:6px;list-style:none;margin:30px 0 0;padding:0;flex-wrap:wrap} .pager a{display:inline-block;border:1px solid var(--line);border-radius:var(--r-2); padding:7px 13px;text-decoration:none;font-size:var(--fs-14)} .pager a[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)} .search-form{display:flex;gap:var(--olcu-3);align-items:flex-end;flex-wrap:wrap;margin:0 0 30px} .search-form .field{flex:1;min-width:240px} /* ---------- sosyal ---------- */ .social{display:flex;gap:10px;flex-wrap:wrap} .social a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%; display:grid;place-items:center;transition:background var(--sure),border-color var(--sure)} .social a:hover{background:var(--ink);border-color:var(--ink)} .social a:hover svg{fill:var(--bg)} .social svg{width:17px;height:17px;fill:var(--ink);transition:fill var(--sure)} .social--sm a{width:34px;height:34px} .social--sm svg{width:15px;height:15px} /* ---------- alt bilgi ---------- */ .foot{border-top:1px solid var(--line);padding:52px 0 26px;margin-top:20px} .foot-grid{display:grid;gap:var(--olcu-6);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .foot-h{font-size:var(--fs-15);margin:0 0 var(--olcu-3);font-weight:700} .foot-p{font-size:var(--fs-14);color:var(--muted);margin:0 0 10px;max-width:36ch} .foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:var(--fs-14)} .foot-list a{color:var(--muted);text-decoration:none} .foot-list a:hover{color:var(--ink)} .foot-bottom{display:flex;flex-wrap:wrap;gap:var(--olcu-4);justify-content:space-between; margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-125);color:var(--muted)} .foot-legal{display:flex;gap:14px;flex-wrap:wrap} .foot-legal a{text-decoration:none} /* ---------- duyarlı ---------- */ @media (max-width:1180px){ .mark--lg{width:322px;height:161px} .mark--lg .m1,.mark--lg .m2{width:161px;height:80.5px} .mark--lg .m1{border-radius:0 0 161px 161px} .mark--lg .m2{top:80.5px;border-radius:161px 161px 0 0} .mark--lg .m3{left:161px;width:80.5px;height:161px;border-radius:0 161px 161px 0} .mark--lg .m4{left:241.5px;width:80.5px;height:161px;border-radius:161px 0 0 161px} } @media (max-width:980px){ .lib{grid-template-columns:1fr} .lib-filters{position:static} .filter-toggle{display:block;margin-bottom:14px} .fpanel{display:none} .fpanel.is-open{display:flex} } @media (max-width:860px){ .bar .wrap{min-height:64px;gap:var(--olcu-3)} .brand img{height:34px} .hero-grid{flex-direction:column-reverse;align-items:flex-start;gap:30px} .mark--lg{width:230px;height:115px;margin:0 auto} .mark--lg .m1,.mark--lg .m2{width:115px;height:57.5px} .mark--lg .m1{border-radius:0 0 115px 115px} .mark--lg .m2{top:57.5px;border-radius:115px 115px 0 0} .mark--lg .m3{left:115px;width:57.5px;height:115px;border-radius:0 115px 115px 0} .mark--lg .m4{left:172.5px;width:57.5px;height:115px;border-radius:115px 0 0 115px} .profile-ph{width:150px;height:150px} .sec{padding:46px 0} .hero{padding:44px 0 38px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} } @media print{ .bar,.foot,.lib-filters,.nav-toggle,.skip{display:none} } /* ---------- çerez onay bandı ---------- */ /* --band-y'yi site.js yazıyor: sabit band alt bilgiyi örtmesin. */ .consent{position:fixed;left:0;right:0;bottom:var(--alt-serit,0px);z-index:var(--z-katman);background:var(--bg); border-top:1px solid var(--line);box-shadow:var(--golge-ust)} .consent-in{max-width:var(--max);margin:0 auto;padding:var(--olcu-4) var(--olcu-5);display:flex;gap:22px; align-items:center;justify-content:space-between;flex-wrap:wrap} .consent-h{font-size:var(--fs-14);margin:0 0 var(--olcu-1);font-weight:700} .consent p{margin:0;font-size:var(--fs-135);color:var(--muted);max-width:70ch} .consent p a{text-decoration:underline;text-underline-offset:3px} .consent-btns{display:flex;gap:10px;flex-wrap:wrap} .consent-btns .btn{min-width:132px;min-height:44px;text-align:center} /* Reddetmek kabul etmek kadar kolay olmalı: iki düğme aynı ağırlıkta. */ .btn--esit{background:var(--card);color:var(--ink);border:1px solid var(--ink)} .btn--esit:hover{background:var(--ink);color:var(--bg)} @media (max-width:640px){.consent-in{padding:14px 18px}.consent-btns .btn{flex:1}} /* ---------- paylaşım çubuğu ---------- */ .share{border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:22px 0;margin:36px 0 0;max-width:70ch} .share-h{font-size:var(--fs-145);font-weight:700;margin:0 0 var(--olcu-3)} .share-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .sbtn{display:inline-flex;align-items:center;gap:var(--olcu-2);text-decoration:none;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--bg);color:var(--ink);font:600 13.5px/1 var(--font); cursor:pointer;padding:10px 15px;transition:border-color var(--sure-hizli),background var(--sure-hizli),transform var(--sure-hizli)} .sbtn:hover{border-color:var(--ink);transform:translateY(-1px)} .sbtn svg{width:16px;height:16px;fill:currentColor;flex:none} .sbtn--wa{background:#25D366;border-color:#25D366;color:#fff} .sbtn--wa:hover{border-color:#1da851;background:#1da851} .share--kucuk .sbtn{padding:7px var(--olcu-3);font-size:var(--fs-125)} .share--kucuk .sbtn svg{width:14px;height:14px} .share--buyuk .sbtn{padding:13px 20px;font-size:var(--fs-15)} .share--buyuk .sbtn svg{width:19px;height:19px} .share--ikon .sbtn{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%} .share--ikon.share--kucuk .sbtn{width:38px;height:38px} .share--ikon.share--buyuk .sbtn{width:52px;height:52px} .sbtn.is-done{background:var(--ink);border-color:var(--ink);color:var(--bg)} @media (max-width:640px){ .share-row .sbtn{flex:1 1 calc(50% - 5px);justify-content:center} .share--ikon .share-row .sbtn{flex:0 0 auto} } /* ---------- benzer yazılar ---------- */ .related{margin:44px 0 0;padding-top:34px;border-top:1px solid var(--line)} .related .h3{margin:0 0 18px} .related-grid{display:grid;gap:var(--olcu-4);grid-template-columns:repeat(3,1fr)} .rcard{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;background:var(--card); transition:transform var(--sure),border-color var(--sure)} .rcard:hover{transform:translateY(-3px);border-color:var(--ink)} .rcard-th{width:100%;height:96px;object-fit:cover;display:block} .rcard-th--empty{background:linear-gradient(135deg,var(--o),var(--r))} .rc2 .rcard-th--empty{background:linear-gradient(135deg,var(--y),var(--o))} .rc3 .rcard-th--empty{background:linear-gradient(135deg,var(--b),var(--r))} .rcard-in{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px} .rcard-cat{font-size:var(--fs-11);color:var(--muted);text-transform:uppercase;letter-spacing:.06em} .rcard-t{font-size:var(--fs-145);font-weight:600;line-height:1.35} .rcard-d{font-size:var(--fs-12);color:var(--muted)} .related--liste .related-grid{grid-template-columns:1fr} .related--liste .rcard{flex-direction:row;align-items:center;gap:14px;padding:var(--olcu-3) 14px} .related--liste .rcard-th{width:64px;height:52px;border-radius:var(--r-2);flex:none} .related--liste .rcard-in{padding:0} @media (max-width:760px){.related-grid{grid-template-columns:1fr}} .inline-card{display:flex;flex-direction:column;gap:var(--olcu-1);border:1px solid var(--line); border-radius:var(--radius);padding:var(--olcu-4) 18px;text-decoration:none;background:var(--card);margin:22px 0} .inline-card span{font-size:var(--fs-14);color:var(--muted)} /* ================= blok kurgusu ================= */ .blk--pad-yok{padding:0} .blk--pad-az{padding:26px 0} .blk--pad-cok{padding:var(--olcu-9) 0} .blk--kahraman{padding-top:70px} .blk--ayrac{padding:0} .btn--xl{padding:18px 40px;font-size:var(--fs-18)} .blk .h2{margin-top:0} /* buton grubu */ .btnset{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .btnset--orta{justify-content:center} .btnset--sag{justify-content:flex-end} .btnset--genis{flex-direction:column;align-items:stretch} .btnset--genis .btn{text-align:center;width:100%} /* sosyal ikon grubu */ .socialset{display:flex;flex-wrap:wrap;gap:var(--olcu-3);align-items:center} .socialset--orta{justify-content:center} .socialset--sag{justify-content:flex-end} .socialset a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink); border:1px solid var(--line);background:var(--card); transition:border-color var(--sure),transform var(--sure)} .socialset a:hover{border-color:var(--ink);transform:translateY(-2px)} .socialset svg{width:20px;height:20px;flex:none;fill:currentColor} .socialset--yuvarlak a,.socialset--kare a{width:44px;height:44px;justify-content:center;padding:0} .socialset--yuvarlak a{border-radius:var(--r-pill)} .socialset--kare a{border-radius:var(--r-3)} .socialset--etiketli a{border-radius:var(--r-pill);padding:9px 17px;font-weight:600;font-size:var(--fs-14)} .socialset--kucuk svg{width:17px;height:17px} .socialset--kucuk.socialset--yuvarlak a,.socialset--kucuk.socialset--kare a{width:36px;height:36px} .socialset--buyuk svg{width:24px;height:24px} .socialset--buyuk.socialset--yuvarlak a,.socialset--buyuk.socialset--kare a{width:56px;height:56px} /* görsel ve metin */ .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} .split--sag .split-img{order:2} .split-img{width:100%;height:auto;border-radius:var(--radius);display:block} .split-txt .prose{margin-bottom:18px} .prose--tam{max-width:none} /* sık sorulanlar */ .faq{border-top:1px solid var(--line);max-width:74ch} .faq-i{border-bottom:1px solid var(--line)} .faq-i summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:var(--fs-165);list-style:none; display:flex;justify-content:space-between;gap:var(--olcu-4);align-items:flex-start} .faq-i summary::-webkit-details-marker{display:none} .faq-i summary::after{content:"+";font-weight:400;font-size:var(--fs-22);line-height:1;color:var(--muted)} .faq-i[open] summary::after{content:"\2212"} .faq-a{padding:0 0 18px;color:var(--muted);max-width:66ch} .faq-a p{margin:0} /* alıntı */ .pull{margin:0;max-width:70ch} .pull blockquote{margin:0;font-size:var(--fs-h2b);line-height:1.35;font-weight:600; border-left:4px solid var(--o);padding-left:22px} .pull figcaption{margin-top:14px;padding-left:26px;color:var(--muted);font-size:var(--fs-14)} /* ayraç ve boşluk */ .spacer--sm{height:18px} .spacer--md{height:44px} .spacer--lg{height:88px} .spacer{display:flex;align-items:center} .rule{width:100%;border:0;border-top:1px solid var(--line);margin:0} @media (max-width:760px){ .split{grid-template-columns:1fr;gap:var(--olcu-5)} .split--sag .split-img{order:0} .blk--pad-cok{padding:56px 0} .btn--xl{padding:15px 30px;font-size:var(--fs-16)} } /* ================= formlar ================= */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formbox{max-width:720px} .cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--olcu-4) 18px;margin:22px 0 0} .cform-f{display:flex;flex-direction:column;gap:6px;grid-column:1 / -1} .cform-f--yari{grid-column:auto} .cform-f--tam{grid-column:1 / -1} .cform-h{font-size:var(--fs-16);margin:14px 0 0} .cform-l{font-size:var(--fs-135);font-weight:600;color:var(--muted)} .cform-l .req{color:var(--r-ink)} .cform input[type=text],.cform input[type=email],.cform input[type=tel], .cform select,.cform textarea,.nl-form input[type=text],.nl-form input[type=email]{ font:inherit;font-size:var(--fs-15);color:var(--ink);background:var(--bg); border:1px solid var(--muted);border-radius:var(--r-3);padding:11px 13px;width:100%} .cform textarea{resize:vertical;min-height:120px} .cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{border-color:var(--ink)} .cform-chk{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-14);line-height:1.5} .cform-chk input{margin-top:3px;flex:none;width:17px;height:17px} .cform-actions{margin-top:var(--olcu-5)} .form-ok,.form-err{border-radius:var(--radius);padding:15px 18px;margin:18px 0; border:1px solid var(--line);background:var(--card)} .form-ok{border-left:4px solid #1c8a4c} .form-err{border-left:4px solid var(--r)} .form-ok p,.form-err p{margin:0} .form-err ul{margin:var(--olcu-2) 0 0;padding-left:20px;font-size:var(--fs-14)} /* bülten */ .nl{max-width:640px} .nl-form{margin-top:18px} .nl-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px var(--olcu-3);align-items:end} .nl-row .cform-l{grid-row:1} .nl-row input{grid-row:2} .nl-row .btn{grid-row:2;white-space:nowrap} .nl-riza{margin-top:14px;font-size:var(--fs-13);color:var(--muted);display:flex;gap:9px;align-items:flex-start} .nl-riza input{margin-top:3px;flex:none} @media (max-width:760px){ .cform-grid{grid-template-columns:1fr} .cform-f--yari{grid-column:1 / -1} .nl-row{grid-template-columns:1fr} .nl-row .cform-l,.nl-row input,.nl-row .btn{grid-row:auto} } /* ---------- vitrin uyarı şeridi (yalnızca panele girmiş kişi görür) ---------- */ .has-vitrin{--alt-serit:58px} .vitrin-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-ustbar); display:flex;gap:var(--olcu-4);align-items:center;justify-content:center;flex-wrap:wrap; background:#1A1206;color:#FFF7EC;padding:11px 20px;font-size:var(--fs-135);line-height:1.45} .vitrin-bar strong{color:var(--y)} .vitrin-bar .btn{border-color:rgba(255,247,236,.45);color:#FFF7EC} .vitrin-bar .btn:hover{border-color:#FFF7EC} @media (max-width:760px){.vitrin-bar{font-size:var(--fs-125);padding:9px 14px;text-align:center}} /* yalnızca ekran okuyucu */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .field-err{color:var(--r-ink);font-size:var(--fs-13);margin:2px 0 0;font-weight:600} .cform [aria-invalid="true"]{border-color:var(--r);border-width:2px} main:focus{outline:none} /* ---------------- takip şeridi: platformlar sayfası ---------------- */ .takip{margin:56px 0 var(--olcu-2);padding:var(--olcu-6);border-radius:var(--r-6);background:var(--card); border:1px solid var(--line)} .takip-ust{max-width:62ch;margin-bottom:22px} .takip-ust h2{margin:0 0 var(--olcu-2);font-size:var(--fs-h2c)} .takip-ust p{margin:0;color:var(--muted)} .takip-alt{display:flex;gap:var(--olcu-6);align-items:flex-start;flex-wrap:wrap} .takip-sos{flex:0 0 auto} .takip-bulten{flex:1 1 340px;min-width:280px} .takip-bulten .cform{margin:0} .takip-bulten .cform-head{margin-bottom:10px} @media (max-width:720px){.takip{padding:var(--olcu-5) 20px}.takip-alt{gap:22px}} /* kütüphane boş durumu */ .empty--rich{padding:40px 28px;border:1px dashed var(--line);border-radius:var(--r-6); text-align:center;max-width:62ch;margin:0 auto} .empty--rich h3{margin:0 0 10px;font-size:var(--fs-h3b)} .empty--rich p{margin:0;color:var(--muted);line-height:1.65} /* form altındaki veri notu */ .cform-kvkk{margin:14px 0 0;font-size:var(--fs-13);color:var(--muted);line-height:1.6} .cform-kvkk a{color:inherit;text-decoration:underline;text-underline-offset:3px} /* ---------------- dil seçici ---------------- */ .dilsec{position:relative} .dilsec summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px; padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-pill); font-size:var(--fs-13);font-weight:600;line-height:1;color:var(--ink);background:var(--card);user-select:none} .dilsec summary::-webkit-details-marker{display:none} .dilsec summary:hover{border-color:var(--ink)} .dilsec summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .dilsec-bayrak{font-size:var(--fs-15);line-height:1} .dilsec-kod{letter-spacing:.02em} .dilsec-ok{transition:transform var(--sure-hizli) ease;flex:none} .dilsec[open] .dilsec-ok{transform:rotate(180deg)} .dilsec-liste{position:absolute;right:0;top:calc(100% + 8px);z-index:var(--z-serit);margin:0;padding:6px; list-style:none;min-width:172px;background:var(--bg);border:1px solid var(--line); border-radius:var(--r-4);box-shadow:var(--golge-md)} .dilsec-liste a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r-2); text-decoration:none;color:inherit;font-size:var(--fs-14)} .dilsec-liste a:hover{background:var(--card)} .dilsec-liste a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} .dilsec-liste .dilsec-kod{font-weight:700;font-size:var(--fs-125);min-width:20px;color:var(--muted)} .dilsec-liste .dilsec-ad{margin-left:auto} .dilsec-liste a[aria-current]{background:var(--card);font-weight:600;cursor:default} .dilsec-liste a[aria-current]::after{content:"✓";margin-left:6px;font-size:var(--fs-12)} @media (max-width:640px){.dilsec-liste .dilsec-ad{display:none}.dilsec-liste{min-width:96px}} /* ofis haritası */ .harita{margin:20px 0;border-radius:var(--r-5);overflow:hidden;border:1px solid var(--line); aspect-ratio:16/9;max-height:380px} .harita iframe{width:100%;height:100%;border:0;display:block} /* ---------- menüde alt başlık ----------
ile: JavaScript kapalıyken de açılıyor, dokunmatik ekranda "üzerine gelme" sorunu çıkmıyor. */ .altmenu{position:relative} .altmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--olcu-1); font-size:var(--fs-145);font-weight:500;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap} .altmenu summary::-webkit-details-marker{display:none} .altmenu summary:hover{border-bottom-color:var(--o)} .altmenu summary[aria-current]{border-bottom-color:var(--o)} .altmenu summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-1)} .altmenu-ok{transition:transform var(--sure-hizli) ease;flex:none;opacity:.65} .altmenu[open] .altmenu-ok{transform:rotate(180deg)} /* .nav ul kuralı (flex, 20px boşluk) bundan daha ağır bir seçici; alt listeyi aynı ağırlıkta yazmazsak satırlar birbirinden kopuyor. */ .nav .altmenu-liste{position:absolute;left:0;top:calc(100% + 10px);z-index:var(--z-menu); display:block;gap:0; margin:0;padding:6px;list-style:none;min-width:196px; background:var(--bg);border:1px solid var(--line);border-radius:var(--r-4); box-shadow:var(--golge-lg)} .nav .altmenu-liste li{margin:0} .nav .altmenu-liste a{display:block;padding:9px var(--olcu-3);border-radius:var(--r-2); text-decoration:none;font-size:var(--fs-145);border-bottom:0} .nav .altmenu-liste a:hover{background:var(--card);border-bottom:0} .nav .altmenu-liste a[aria-current]{background:var(--card);font-weight:600;border-bottom:0} .nav .altmenu-liste a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} /* Ok işareti menüyü birkaç piksel genişletti ve 1500 piksel civarında "İletişim" alt satıra düşüp üst barı 76'dan 84 piksele çıkardı. Boşluğu kademeli daraltıyoruz, menü tek satırda kalıyor. */ /* Menü ne zaman hamburgere dönüşüyor. Eşik 860 pikseldi ve 900-1050 arasında yedi başlık iki satıra düşüp üst barı şişiriyordu. Eşiği yukarı çekince o aralık dikey menüye geçiyor, iki satırlık kırık görünüm hiç oluşmuyor. */ @media (max-width:1040px){ /* flex-wrap olmadan menünün flex-basis:100% değeri işe yaramıyor: menü alt satıra inmek yerine yan yana kalıp sayfayı yatay taşırıyordu. */ .bar .wrap{flex-wrap:wrap} .nav-toggle{display:flex;order:3} .nav{order:10;flex-basis:100%;width:100%;display:none;margin:0 0 var(--olcu-3)} .nav.is-open{display:block} .nav ul{flex-direction:column;gap:2px} .nav a{display:block;padding:10px 0;border-bottom:1px solid var(--line)} /* Dikey menüde açılır başlık da tam satır; kutu yerine girinti okunur. */ .altmenu summary{display:flex;justify-content:space-between;width:100%; padding:10px 0;border-bottom:1px solid var(--line)} .altmenu[open] summary{border-bottom-color:transparent} .nav .altmenu-liste{position:static;border:0;box-shadow:none;background:none; padding:2px 0 6px 14px;min-width:0;border-left:2px solid var(--line);margin-left:2px} .nav .altmenu-liste a{padding:7px 0;border-bottom:0} } /* ---------- çapraz bağ parçaları ---------- Kurum, hizmet, çıktı ve kişi birbirine bağlandı; aşağıdakiler o bağların göründüğü küçük bileşenler. */ /* iş kaydı satırının altındaki kişi şeridi */ .kseri{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:var(--olcu-2) 0 0;padding:0} .kseri a{display:inline-flex;align-items:center;gap:7px;text-decoration:none; font-size:var(--fs-13);padding:3px var(--olcu-2) 3px 3px;border-radius:var(--r-pill);border:1px solid transparent} .kseri a:hover{border-color:var(--line);background:var(--card)} .kseri-ph{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;display:block} .kseri-ph--empty{display:flex;align-items:center;justify-content:center; font-size:var(--fs-10);font-weight:800;letter-spacing:-.02em;line-height:1;user-select:none} .kseri-ad{font-weight:600} .kseri-rol{color:var(--muted);font-size:var(--fs-125)} /* iş kaydından çıkan kütüphane kayıtları */ .tl-cikti{list-style:none;margin:var(--olcu-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .tl-cikti a{display:inline-block;border:1px solid var(--line);border-radius:var(--r-2); padding:5px 10px;font-size:var(--fs-13);text-decoration:none;background:var(--card)} .tl-cikti a:hover{border-color:var(--ink)} .tl-cikti a::before{content:"↳";margin-right:6px;color:var(--muted)} /* kişi sayfasındaki kurum listesi */ .kurum-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--olcu-2); grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .kurum-list a{display:flex;flex-direction:column;gap:2px;text-decoration:none; border:1px solid var(--line);border-radius:var(--r-3);padding:11px 14px;background:var(--card)} .kurum-list a:hover{border-color:var(--ink)} .kurum-list strong{font-size:var(--fs-145)} .kurum-list span{font-size:var(--fs-125)} /* hizmet sayfasındaki kurum şeridi: logo varsa logo, yoksa ad kutusu */ .kurumseri{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .kurumseri a{display:flex;align-items:center;justify-content:center; height:64px;min-width:132px;padding:10px var(--olcu-4); border:1px solid var(--line);border-radius:var(--r-3);background:var(--card);text-decoration:none} .kurumseri a:hover{border-color:var(--ink)} .kurumseri img{max-height:40px;max-width:150px;width:auto;object-fit:contain;display:block} .kurumseri-ad{font-size:var(--fs-135);font-weight:600;text-align:center;line-height:1.35} /* kişi sayfasında "çalıştığı alanlar" başlığı ve sayaç */ .alan-l{font-size:var(--fs-125);font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin:var(--olcu-4) 0 var(--olcu-2)} .chip a{text-decoration:none;display:inline-flex;align-items:center;gap:7px} .chip-adet{font-style:normal;font-size:var(--fs-115);font-weight:700;color:var(--muted); background:var(--bg);border-radius:var(--r-pill);padding:1px 7px;min-width:20px;text-align:center} /* ---------- sayı bloğu ---------- Tek blok iki görünüm basıyor. Varsayılanlar eski rakam bandıyla aynı sonucu veriyor; kimsenin sayfasını elle taşıması gerekmedi. */ .stats-grid--k2{grid-template-columns:repeat(2,1fr)} .stats-grid--k3{grid-template-columns:repeat(3,1fr)} .stats-grid--k4{grid-template-columns:repeat(4,1fr)} .stats-grid--k5{grid-template-columns:repeat(5,1fr)} .stats-grid--orta{text-align:center} .stats-grid--orta .stat{align-items:center} .stats-grid--orta .stat-g{justify-content:center} .stat{display:flex;flex-direction:column;position:relative;text-decoration:none;min-width:0} a.stat:hover .stat-n{text-decoration:underline;text-underline-offset:4px} .stat-ic{display:block;min-width:0} /* kart görünümü */ .stats-grid--kart{gap:var(--olcu-4)} .stats-grid--kart .stat{background:var(--card);border:1px solid var(--line); border-radius:var(--radius);padding:22px 22px var(--olcu-5)} .stats-grid--kart .stat b{font-size:var(--fs-h1b)} /* ikon ve görsel yerleşimi */ .stat-g{display:flex;align-items:flex-start;color:var(--muted)} .stat-g--ust{margin:0 0 var(--olcu-3)} .stat-g--alt{margin:var(--olcu-3) 0 0} .stat-g--kose{position:absolute;top:16px;right:18px;margin:0;opacity:.75} .stat-g--sol{margin:0} .stats-grid--gsol .stat{flex-direction:row;align-items:flex-start;gap:14px} .stats-grid--gsol .stat-g{flex:none;padding-top:var(--olcu-1)} .stat-ikon{width:34px;height:34px;display:block} .stats-grid--kart .stat-g--kose .stat-ikon{width:30px;height:30px} .stat-gorsel{max-width:52px;max-height:52px;width:auto;object-fit:contain;display:block} .stats-grid--gkose .stat-ic{padding-right:44px} /* sayaç boyunca genişlik zıplamasın diye rakam kutusu satır içinde kalır */ .stat-n{display:inline-block;font-variant-numeric:tabular-nums} @media (max-width:860px){ .stats-grid--k4,.stats-grid--k5{grid-template-columns:repeat(2,1fr)} .stats-grid--k3{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .stats-grid--k2,.stats-grid--k3,.stats-grid--k4,.stats-grid--k5{grid-template-columns:1fr} .stats-grid--gkose .stat-ic{padding-right:0} } /* ---------- yol arkadaşları şeridi ---------- Logosu olmayan kurum adıyla, aynı boyutta bir kutu olarak çıkıyor. Gri durup üstüne gelince renklenme yalnızca fare olan cihazlarda: dokunmatikte "üzerine gelme" diye bir şey yok, orada hep renkli. */ .yolseri{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--olcu-3)} .yolseri li{flex:0 1 auto} .yolseri a{display:flex;align-items:center;justify-content:center; height:78px;min-width:150px;padding:var(--olcu-3) 20px; border:1px solid var(--line);border-radius:var(--r-4);background:var(--card); text-decoration:none;transition:border-color var(--sure),filter var(--sure-orta),opacity var(--sure-orta)} .yolseri img{max-height:44px;max-width:170px;width:auto;object-fit:contain;display:block} .yolseri-ad{font-size:var(--fs-145);font-weight:600;text-align:center;line-height:1.35} .yolseri a:hover{border-color:var(--ink)} .yolseri a:focus-visible{outline:3px solid var(--ink);outline-offset:2px} @media (hover:hover){ .yolseri--gri a{filter:grayscale(1);opacity:.72} .yolseri--gri a:hover,.yolseri--gri a:focus-visible{filter:grayscale(0);opacity:1} } @media (prefers-reduced-motion:reduce){ .yolseri a{transition:none} } @media (max-width:640px){ .yolseri{gap:9px} .yolseri a{height:66px;min-width:0;flex:1 1 44%;padding:10px var(--olcu-3)} .yolseri img{max-height:36px} .yolseri-ad{font-size:var(--fs-13)} } /* ---------- dokunma hedefleri ve bileşen durumları ---------- Mobil denetimde menü butonu 38x30, kütüphane filtreleri 23px yüksek ve 5px aralıklıydı; hiçbiri parmakla güvenilir seçilemiyordu. Eşik 44x44 ve 8px aralık. Ayrıca :active, :disabled ve yükleniyor durumu hiç tanımlı değildi: devre dışı bir gönder butonu etkin olanla birebir aynı görünüyordu. */ .btn:active{transform:translateY(1px)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none} .btn:disabled:hover,.btn[aria-disabled="true"]:hover{border-color:var(--line);filter:none} [aria-busy="true"]{cursor:progress} [aria-busy="true"] .btn{pointer-events:none;opacity:.6} /* Filtre etiketleri: satır yüksekliği ve komşu aralığı eşiğe çekiliyor. */ .check--chip,.facet label{min-height:44px;display:flex;align-items:center;gap:10px} .facet ul{display:flex;flex-direction:column;gap:var(--olcu-2)} .facet input[type="checkbox"]{width:20px;height:20px;flex:none} /* WhatsApp marka yeşili beyaz yazıyla 1,98:1 veriyordu. Koyu marka tonu 4,5:1'i geçiyor ve hâlâ WhatsApp olarak okunuyor. */ .sbtn--wa{background:#0F7A6C} .sbtn--wa:hover{background:#0B5F54} /* Form alanının iki ayrı anatomisi vardı ve birinin kenarlığı --line üstünden geldiği için 1,2:1 ile fiilen görünmüyordu. Tek anatomi. */ .field input,.field select,.field textarea, .cform input,.cform select,.cform textarea{ border:1px solid var(--muted);border-radius:var(--r-3);font-size:var(--fs-15);background:var(--bg);color:var(--ink)} .field input:focus-visible,.cform input:focus-visible, .field select:focus-visible,.cform select:focus-visible, .field textarea:focus-visible,.cform textarea:focus-visible{border-color:var(--ink)} /* Dokunmalı ekranlarda hedef boyutu. Blok en sonda: form alanı anatomisinden sonra gelmezse 15px punto bu kuralı yeniyordu. */ @media (pointer: coarse) { .btn,.nav a,.lang,.pager a,.tl-cikti a,.chip a,.logo-list a,.link-lg,.brand, .dilsec summary,.dilsec-liste a{ min-height:44px;display:inline-flex;align-items:center} .btn,.pager a,.lang,.dilsec summary{justify-content:center} .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center} .social a,.share--ikon a,.sbtn{min-width:44px;min-height:44px} /* iOS, 16 pikselin altındaki bir alana odaklanınca sayfayı kendiliğinden yakınlaştırıyor ve kullanıcı elle geri çıkmak zorunda kalıyor. */ .cform input[type=text],.cform input[type=email],.cform input[type=tel], .nl-form input[type=text],.nl-form input[type=email], .field input,.field select,.field textarea, .cform input,.cform select,.cform textarea, input,select,textarea{font-size:var(--fs-16);min-height:44px} textarea{min-height:120px} .cform input[type="checkbox"],.facet input[type="checkbox"], input[type="checkbox"],input[type="radio"]{width:24px;height:24px} .cform-l,.check--chip,.facet label{min-height:44px} } /* WCAG 2.2 AA hedef boyutu 24x24. Alt bilgi ve gezinme listelerindeki metin bağlantıları 16 piksel yüksekliğindeydi; cümle içindeki bağlantılar muaf, bunlar değil. */ .foot-nav a,.foot-links a,.foot-legal a,.foot a:not(.prose a){ display:inline-block;min-height:24px;padding:var(--olcu-1) 0} @media (pointer: coarse){ .foot-nav a,.foot-links a,.foot-legal a,.foot a:not(.prose a){min-height:32px;padding:7px 0} } /* Kırıntı navigasyon. Derin sayfalarda ziyaretçi nerede olduğunu görüyor; aynı dizi JSON-LD olarak da basılıyor. */ .kirinti{margin:0 0 var(--olcu-4)} .kirinti ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0; font-size:var(--fs-135);color:var(--muted)} .kirinti li{display:flex;align-items:center;gap:6px} .kirinti li + li::before{content:"›";color:var(--muted);opacity:.7} .kirinti a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent; display:inline-block;min-height:24px;padding:3px 0} .kirinti a:hover{color:var(--ink);border-bottom-color:var(--ink)} .kirinti [aria-current]{color:var(--ink);font-weight:600} /* ---------- platform dizini kartı ---------- Kart tek bağlantı olmaktan çıktı: içinde platformun kendi hesapları ve katılma düğmeleri var. Bu yüzden hover'ı kartın kendisine değil başlığa ve düğmelere bağladık; tıklanabilir alan artık gerçekten tıklanan yer. */ .card--plat{display:flex;flex-direction:column} .card--plat h2{margin:0 0 var(--olcu-2)} .card--plat h2 a{text-decoration:none} .card--plat h2 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px} .card--plat p{flex:0 0 auto;margin:0 0 14px} .card--plat .social{margin:0 0 14px} .card--plat .go{margin-top:auto;padding-top:var(--olcu-1);text-decoration:none} .card--plat .go:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px} .card--plat:hover{transform:none;border-color:var(--line)} /* Katılma düğmeleri: WhatsApp topluluğu, e-bülten. Adres girilmemişse sarmalayıcı hiç basılmıyor, boş bir satır kalmıyor. */ .plat-katil{display:flex;gap:var(--olcu-2);flex-wrap:wrap;margin:0 0 var(--olcu-4)} /* ================= dagitim29 · "Bölüm Bölüm Renk" ================= Yön kararı: civicspacemedia/tasarim-yonu-bolum-bolum-renk.md Baskın yön bölüm bölüm renk; Poster-Kolaj'dan yalnızca üç imza hamlesi ödünç alındı (iri rakam, kaydırılmış düz renk gölge, tarak kenar). ------------------------------------------------------------------- */ /* --- yazı tipi: kendi sunucumuzda, dış istek yok --- Google Fonts'a bağlanmak CSP'yi gevşetmeyi gerektirirdi. Dosyalar Türkçe için altkümelendi (176 + 6 glif), iki eksen korundu: ağırlık 100-900 ve genişlik 62-125. Genişlik ekseni bu yönün karakteri. GÖVDE METNİ Archivo'ya alınmadı: panelin yazı tipi ayarı okunan metni yönetmeyi sürdürsün diye başlıklar ve arayüz Archivo, gövde var(--font). */ @font-face{ font-family:"Archivo CSM"; font-style:normal;font-weight:100 900;font-display:swap; src:url(/assets/fonts/archivo-lat.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+2013-2014,U+2018-201E,U+2026,U+2039-203A; } @font-face{ font-family:"Archivo CSM"; font-style:normal;font-weight:100 900;font-display:swap; src:url(/assets/fonts/archivo-ext.woff2) format("woff2"); unicode-range:U+011E-011F,U+0130,U+015E-015F,U+20BA; } :root{ --font-baslik:"Archivo CSM",var(--font); } h1,.h2,.h3,.h4,h2,h3, .btn,.chip,.stat b,.eyebrow,.link-lg,.go,.nav a,.card h2,.card h3{ font-family:var(--font-baslik); } h1{font-variation-settings:"wdth" 112;font-weight:800;letter-spacing:-.032em;line-height:1.02} .h2,h2{font-variation-settings:"wdth" 108;font-weight:800} .stat b{font-variation-settings:"wdth" 106} .btn{font-variation-settings:"wdth" 104;font-weight:700} /* --- rakam bandı: sayfanın en yüksek sesli yeri --- */ .sec--stats{position:relative;padding:78px 0} .sec--stats .stats-grid{gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* Mavi zeminde marka renkli rakam okunmaz; şemanın mürekkebi devralıyor. */ .sec--stats .stat b, .sec--stats .s1 b,.sec--stats .s2 b,.sec--stats .s3 b,.sec--stats .s4 b{ color:inherit;font-size:clamp(38px,4.4vw,60px);line-height:.92;letter-spacing:-.045em; } .sec--stats .stat b + span{color:inherit;opacity:.86;font-size:var(--fs-15);margin-top:10px} .sec--stats .stats-kaynak a{color:inherit;opacity:.92} .sec--stats .stats-kaynak a:hover{color:inherit;opacity:1} /* --- tarak kenar: marka yarım daireleri bölüm dikişi olarak --- var(--bg) bölümün kendi zemininden geliyor, yani şema değişirse dikiş de kendiliğinden o rengi alıyor. Süs değil, bölüm ayıracı. */ .sec--stats::before,.sec--cta::before{ content:"";position:absolute;left:0;right:0;top:-22px;height:22px;pointer-events:none; background-image:radial-gradient(circle at 22px 0,var(--bg) 21px,transparent 21.5px); background-size:44px 22px;background-repeat:repeat-x; } .sec--cta{position:relative;padding:72px 0} /* Renkli bandın ardından gelen bölümde ayrıca çizgi istemiyoruz. */ .sec--stats + .sec,.sec--cta + .sec{border-top:0} /* --- hizmet çipleri: hap değil kutu, üzerine gelince kayan düz gölge --- */ .chip{ border:2px solid var(--ink);background:var(--bg);border-radius:var(--r-1); padding:11px 15px;transition:transform var(--sure) ease-out,box-shadow var(--sure) ease-out; } .chip:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)} .chip::before{width:9px;height:9px;margin-right:10px} /* --- platform kartları marka renginde --- Mürekkep değerleri theme_schemes() içindeki turuncu ve mavi şemalarından alındı; sarının şeması yok, krem şemasının mürekkebi kullanıldı. Kontrast: turuncu 6,8:1 · mavi 10,2:1 · sarı 12,6:1. */ :root{ --on-o:#1A0F06; --on-b:#FFFFFF; --on-y:#1A1206; } .card--marka{border:0;transition:transform var(--sure) ease-out,box-shadow var(--sure) ease-out} .card--marka.c1{background:var(--o);color:var(--on-o)} .card--marka.c2{background:var(--b);color:var(--on-b)} .card--marka.c3{background:var(--y);color:var(--on-y)} .card--marka h2,.card--marka h3,.card--marka p,.card--marka .go{color:inherit} .card--marka p{opacity:.9} .card--marka .tick{background:currentColor;opacity:.28} .card--marka:hover{transform:translate(-4px,-4px);box-shadow:7px 7px 0 var(--ink)} /* --- hero: başlık daha iri, blok daha nefesli --- */ .hero{padding:88px 0 74px} .hero h1{font-size:clamp(34px,5.2vw,62px)} @media (max-width:640px){ .sec--stats{padding:56px 0} .sec--cta{padding:52px 0} .hero{padding:56px 0 var(--olcu-7)} .chip:hover,.card--marka:hover{transform:none;box-shadow:none} } /* --- dagitim29 sonrası düzeltmeler (canlıda görülüp giderildi) --- */ /* Rakamlar dört sütuna sığmıyordu: "160.000+" 60 pikselde sütunu taşırıp yanındaki "1.000+" ile üst üste biniyordu. Ölçek düşürüldü, sütun tabanı yükseltildi, kutu taşmaya kilitlendi. */ .sec--stats .stats-grid{gap:var(--olcu-5);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .sec--stats .stat{min-width:0} .sec--stats .stat b, .sec--stats .s1 b,.sec--stats .s2 b,.sec--stats .s3 b,.sec--stats .s4 b{ font-size:clamp(32px,3.4vw,48px); overflow-wrap:anywhere;font-variant-numeric:tabular-nums; } /* Başlık büyüyünce 600 piksellik kutu onu beş satıra bölüyordu. */ .hero-text{max-width:680px} /* Marka renkli kartta yarım daire currentColor ile çamura dönüyordu. */ .card--marka .tick{background:#fff;opacity:.42} /* Hero dengesi. Marka işareti 460 piksel sabit ve küçülmüyordu; başlığa yalnızca 564 piksel kalıyor, cümle beş ragged satıra bölünüyordu. İşaret 380'e indirildi (iç parçalar da aynı oranda), başlık 58 pikselde sabitlendi: dört dengeli satır. Yalnızca hero'da, diğer sayfalardaki işaret boyutuna dokunmuyor. */ .hero-grid{gap:40px} .hero h1{font-size:clamp(32px,4.6vw,58px)} /* DİKKAT: küçültme yalnızca geniş ekranda. `.hero .mark--lg` özgüllüğü `.mark--lg`den yüksek olduğu için medya sorgusuna alınmazsa 1180 ve 860 kırılımlarındaki mevcut küçültmeleri de eziyor ve 390 pikselde 38 piksel yatay taşma yaratıyordu. */ @media (min-width:1181px){ .hero .mark--lg{width:380px;height:190px} .hero .mark--lg .m1{width:190px;height:95px;border-radius:0 0 190px 190px} .hero .mark--lg .m2{width:190px;height:95px;top:95px;border-radius:190px 190px 0 0} .hero .mark--lg .m3{left:190px;width:95px;height:190px;border-radius:0 190px 190px 0} .hero .mark--lg .m4{left:285px;width:95px;height:190px;border-radius:190px 0 0 190px} } /* Düğmeler hap olmaktan çıkıyor: denetimin "99 → 6" önerisi ve yeni tasarım yönünün gereği. --radius'tan türüyor, yani panelin "Köşe" ayarı düğmelere de işliyor (14 → 6). Rozet, dil seçici, sosyal ikon ve etiketler hap kalıyor: onlar küçük etiketler, orada yuvarlaklık doğru duruyor. */ :root{ --r-btn:calc(var(--radius,14px)*.43); } .btn{border-radius:var(--r-btn)}