/* --- Yazi tipleri --------------------------------------------------------- Ikisi de SIL OFL lisansli ve ayni kokenden servis edilir; harici istek yok, CSP'ye dokunmaz. Lisans metinleri yanlarinda durur (OFL, yazi tipinin dagitildigi her yerde lisansin da bulunmasini ister). latin ve latin-ext AYRI dosyalardir ve ikisi de gereklidir: tarayici unicode-range'e bakip yalniz ihtiyaci olani indirir, ama Turkce'nin s ve g harfleri latin-ext'te, i harfi latin'de yasar. Biri eksik olursa yazi ortasinda yedek yazi tipine duser. DOSYA DEGISIRSE build_site.py'deki FONT_VERSION artirilmalidir: /assets/* bir yil immutable cache'lenir, surumsuz bir guncelleme ziyaretcide eskisi olarak kalir. font-display:swap. BIR KEZ optional DENENDI VE GERI ALINDI -- sebebi kayitli kalsin, yoksa ayni fikir tekrar cazip gorunur. Gerekce dogruydu: swap ile ilk acilista once yedek yuz cizilip sonra degistiriliyor ve bu istenmiyor. optional'da gecis hic olmaz; yazi tipi ilk boyamaya yetisirse kullanilir, yetisemezse o sayfa goruntulemesinde hic kullanilmaz. ATLANAN SEY: optional'in ~100 ms'lik bir ENGELLEME suresi var, swap'in pratikte yok. Font o pencerede yetisemezse tarayici yaziyi o sure boyunca HIC cizmiyor -- kutular ve zeminler duruyor, yazilar bos. Yani "yanlis yuzle bir kare" gitti, yerine "yazisiz bir kare" geldi; kullanici bunu "anlik atlama/takilma" olarak gordu ve her sert yenilemede tekrarladi. OLCUM NEDEN YAKALAMADI: yerel sunucuda ag gecikmesi sifir, font yarisi her seferinde kazaniyor (fontlar ilk boyamadan 8 ms once hazirdi, duzen kaymasi iki secenekte de 0). Localhost bu kararin dogru laboratuvari degil; gercek ilk ziyaret ancak gecikmeli bir baglantida gorunuyor. Kalan sorun swap'in kendi sorunu: yedek yuz gercek yuzden farkli yer kapliyor ve gecis aninda yazi oynuyor. ONCEKI OLCUM YANLISTI ve buraya yanlis yazilmisti: "Sekuya/Arial buyuk harfte %100,4, orada kayma zaten yok" deniyordu. Iki hatasi vardi -- karsilastirma Arial ile yapilmisti ama dizilimdeki ilk yedek `system-ui` (Windows'ta Segoe UI), ve olcum sayfa baglami disinda alinmisti. Gercek dizilimle, canli sayfada, 100px ve ayni metinle yeniden olculdu: Sekuya (h1, buyuk harf) Segoe UI yedegin %64,5'i <- EN BUYUK KAYMA Bricolage 400 (govde) yedek %95,3 Bricolage 800 (header) yedek %101,1 <- zaten oturuyor Yani yuz gelince h1 %55 GENISLIYOR; sitedeki gorunur sicramanin tamami burada. Bricolage'da kayma kucuk, header'da yok denecek kadar az. METRIK ESLEMELI YEDEK DENENDI VE ISE YARAMADI; kayitli kalsin, yoksa ilk akla gelen cozum oldugu icin tekrar denenir. Su kural eklenmisti: @font-face{font-family:'Sekuya yedek';src:local('Segoe UI'),...; size-adjust:155.1%;ascent-override:64.5%;descent-override:19.3%; line-gap-override:0%} ve dizilim 'Sekuya','Sekuya yedek',system-ui,... yapilmisti. Kural TEK BASINA dogru calisiyor: yalniz 'Sekuya yedek' isteyen bir yoklama 704px yerine 1093px olcuyor (= 704 x 1,551, tam hedef) ve satir yuksekligi korunuyor. Ama DIZILIM ICINDE hic devreye girmiyor: ayni karede, basinda 'Sekuya' olan yoklama yine 704 olcuyor. Yani tarayici, 'Sekuya' swap suresindeyken bir sonraki @font-face ailesine dusmuyor, dogrudan system-ui'ye atliyor. Chrome'da ve Zen'de ayni sonuc. Bricolage'a zaten eklenmeyecekti: kazanci %5 ve dogru yapmak icin agirliga gore iki ayri yuz gerekiyor (400 icin %105, 800 icin %98,9); header %101,1 ile zaten oturuyor. GERIYE KALAN GERCEK COZUM yuzu ilk boyamadan ONCE elde etmek. Sekuya yalniz buyuk harf ve tek agirlikta kullanildigi halde 48 KB (latin + latin-ext); kullanilan karakterlere indirilirse tek ve cok kucuk bir dosyaya duser, hem bir istek eksilir hem de ilk boyamaya yetisir. ON YUKLEME HER YUZEYDE, ve o karar yerinde kaliyor: swap ile de fontun ilk boyamaya yetismesi tek basina en buyuk kazanc. Statik sayfalarda (build_site.py), Function yuzeylerinde (site-page.js'teki FONT_ONYUKLEME) ve /b4/ panelinde var; check_site.py kapiyla kolluyor -- style.css'e baglanan her uretilen sayfa dort on yuklemeyi de tasimak zorunda. */ /* Sekuya: yalniz BUYUK HARF ve tek agirlik (400). Sadece en buyuk iki yerde kullanilir (hero basligi, 404 rakami); kucuk puntoda display yuzler okunurlugu bozar. */ @font-face{font-family:'Sekuya';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sekuya-latin.woff2?v=1) 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:'Sekuya';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sekuya-latin-ext.woff2?v=1) 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} /* Yazi tipleri hazir olana kadar sayfa gosterilmez. Sinifi theme.js ekler ve kaldirir; neden gerektigi ve nasil emniyete alindigi orada uzun uzun yazili. Kural yalnizca sinif VARKEN gecerlidir, yani betik kosmazsa sayfa bugunku gibi gorunur. Kok ogeye verilir ama zemin rengi kaybolmaz: kok ogenin arka plani tarayici tuvaline aktarilir ve visibility bunu etkilemez. Olculdu -- bekleme suresince ekran koyu temada siyah, beyaz bir flas yok. */ .yazi-bekliyor{visibility:hidden} /* Bricolage Grotesque: degisken agirlik (200-800), sitenin geri kalaninin tamami. Optik boyut ekseni olan surumu de var ama dosyayi 1.86 katina cikariyor; bu sitede yazi 1rem-2.2rem arasinda kaldigi icin eksenin kazanci gorunmuyordu, agirlik ekseniyle yetiniliyor. */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/bricolage-latin.woff2?v=1) 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:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/bricolage-latin-ext.woff2?v=1) 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} /* --line dekoratif cizgiler icindir (kart, ayirici); --line-strong yalniz etkilesimli kontrollerin (input, select, ikincil buton) sinirinda kullanilir ve her yuzeyde >=3:1 kontrast tasir (WCAG 1.4.11). GOVDE AGIRLIGI ARTIK IKI TEMADA DA 400. Bir sure koyu temada 375 idi: acik renk yazi koyu zeminde optik olarak sisip kalin gorunur (halation) ve degisken yazi tipiyle bu telafi edilebiliyordu. Iki sebeple kaldirildi. 1) Tema GECISI puruzlu oluyordu. Gecis renkleri 220ms'de solduruyor ama font-weight aninda degisiyor; yazi genisligi degistigi icin metin geciste yeniden AKIYOR. Renk yumusarken satirlarin zipladigi bir gecis, gecis olmaktan cikiyor. 2) Telafi 400 -> 375 iken govde yazisi koyu temada ~%0.3 DARALIYORDU. Cogu yerde satir sonunda 1-2px olarak kaliyor, ama urun kartinin aciklamasinda birikimli fark satir kirilma sinirini asiyor ve paragraf iki temada FARKLI sariyordu. Ustelik o kartin zemini iki temada da ayni (--u-yuzey sabit), yani halation gerekcesi tam da orada gecerli degildi. */ /* UC YUZEY, UC KADEME. Bir sure --bg ile --surface'in IKISI DE #ffffff idi: kart, panel, diyalog ve girdi sayfayla AYNI duzlemde duruyor, onlari yalniz 1.26:1'lik bir kilcal cizgi ayiriyordu. Sayfanin derinligi yoktu ve en cok /klinik/ hissediyordu, cunku orada uc kat ic ice: panel > kart > gerekce. Cozum karti yukseltmek degil ZEMINI GERI CEKMEK -- kagit hala en parlak yuzey, sayfa onun altina iniyor. Acikta bg/surface 1.00 -> 1.09, koyuda 1.08 -> 1.14. Urun YAZI tonlari bu yuzden 1-2 adim koyulasti: --surface-2 koyulasinca `code` uzerindeki urun tonu 4.41:1'e dusuyordu. Elle hesap bunu kacirmisti ("--muted dar kalir" demistim, oysa kirilan --muted degildi); denetim yakaladi. Ayni ton, ayni doygunluk, yalnizca esigi gececek kadar koyu. Bkz. scripts/kontrast.py. */ :root{ color-scheme:light; --bg:#f5f5f5; --surface:#ffffff; --surface-2:#ebebeb; --text:#313131; --muted:#686868; --line:#e5e5e5; --line-strong:#787878; --accent:#363636; --accent-2:#686868; --warm:#8f5e18; --on-accent:#ffffff; --shadow:0 14px 34px rgba(0,0,0,.10); --kenar-isigi:0 0 rgba(0,0,0,0); --u-minamo-yazi:#346e93; --u-aruna-yazi:#8e2f3c; } @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#000000; --surface:#141414; --surface-2:#202020; --text:#d7d7d7; --muted:#9d9d9d; --line:#1e1e1e; --line-strong:#737373; --accent:#d3d3d3; --accent-2:#9d9d9d; --warm:#e0ad5f; --on-accent:#000000; --shadow:0 16px 36px rgba(0,0,0,.55); --kenar-isigi:inset 0 1px 0 rgba(255,255,255,.12); --u-minamo-yazi:#4e95c1; --u-aruna-yazi:#d5818c; } } :root[data-theme="light"]{ color-scheme:light; --bg:#f5f5f5; --surface:#ffffff; --surface-2:#ebebeb; --text:#313131; --muted:#686868; --line:#e5e5e5; --line-strong:#787878; --accent:#363636; --accent-2:#686868; --warm:#8f5e18; --on-accent:#ffffff; --shadow:0 14px 34px rgba(0,0,0,.10); --kenar-isigi:0 0 rgba(0,0,0,0); --u-minamo-yazi:#346e93; --u-aruna-yazi:#8e2f3c; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#000000; --surface:#141414; --surface-2:#202020; --text:#d7d7d7; --muted:#9d9d9d; --line:#1e1e1e; --line-strong:#737373; --accent:#d3d3d3; --accent-2:#9d9d9d; --warm:#e0ad5f; --on-accent:#000000; --shadow:0 16px 36px rgba(0,0,0,.55); --kenar-isigi:inset 0 1px 0 rgba(255,255,255,.12); --u-minamo-yazi:#4e95c1; --u-aruna-yazi:#d5818c; } /* --- Urun renkleri -------------------------------------------------------- HER URUNE BIR TON. Sitenin ikinci renk sistemi bu; sicak temel palet sayfanin kendisi olmaya devam eder (kagit, murekkep, cizgi, yapi). Gerekcesi olculdu: yukaridaki on belirtecin tamami acik temada 28, koyu temada 15 derecelik bir ton diliminde -- renk carkinin %8'i ve %4'u. Tek tonlu bir sistemde renk hicbir sey ANLATAMAZ, cunku her renk "site" demek. Tonlar UYDURULMADI, uygulamalarin kendisinden geliyor: Minamo'nun tema cekirdegi #00658E (aqua, 203 derece), Aruna sarap kirmizisi (352 derece). Boylece renk yelpazesi bir suse degil "urun basina bir ton" kuralina dayaniyor ve ucuncu uygulamada da bozulmadan buyur. HER URUN TONUNUN IKI ISI VAR ve ikisi ayri belirtec ister: 1) YUZEY (--u-minamo / --u-aruna). Urun kutusunun dolgu rengi. Her yuzey KENDI murekkebini tasir (--u-*-murekkep) ve ikisi ayni kutupta degil: Minamo acik zemin + koyu murekkep, Aruna koyu zemin + beyaz murekkep. Kutu kendi zeminini tasidigi icin bu takim TEMADAN BAGIMSIZ, o yuzden ayri blokta. 2) YAZI (--u-minamo-yazi / --u-aruna-yazi). Ayni ton SAYFA ZEMININDE metin/vurgu olarak kullaniliyor: madde numaralari, izin vurgusu, kanit cumlesindeki vurgulu kelime, baglanti oku. Bu TEMAYA BAGLI ve dort varyanta da yazilmali. DERS: yukaridaki iki isi bir belirtece yikmistim. Olcum yapilmisti bile -- bu yorumda "acik temada ~2.9:1" yaziyordu -- ama o rakam yuzey icin yeterli goruldugunden metin icin de yeterli sanildi. Degildi: 2.9:1, AA metin esiginin (4.5:1) belirgin altinda ve ekran goruntuleri koyu temada alindigi icin gorulmedi. Acik tema tonlari ayni HUE'da (203 / 20) ve ayni doygunlukta, yalniz kagida karsi 4.7:1'e inecek kadar koyu. Bkz. test: "urun tonlari sayfa zemininde AA esigini gecer". */ :root{ --u-minamo:#4e95c1; /* 203 - uygulamanin aqua cekirdegi (#00658E) */ --u-aruna:#8e2f3c; /* 352 - sarap kirmizisi */ /* HER YUZEYIN KENDI MUREKKEBI VAR. Bir donem tek ortak --u-ink vardi ve iki urunun yuzeyi de acik tonluydu, yani ayni koyu murekkep ikisinde de okunuyordu. Aruna'nin tonu koyu saraba donunce o model bozuldu: koyu murekkep sarap zeminde 2.13:1 kaliyor, beyaz murekkep ayni zeminde 8.01:1. Iki yuzeyde de okunan TEK bir murekkep matematiksel olarak yok -- birinden koyu, otekinden acik olmasi gerekirdi. */ --u-minamo-murekkep:#241a10; --u-aruna-murekkep:#ffffff; /* Ana sayfa acilisinda secili duran urun. Isaretlemedeki `secili` sinifi ve yuzeydeki metinle AYNI urunu gostermeli: ayrisirsa betik kosana kadar panel bir urunun rengini tasiyip otekinin metnini yazar. */ --u-secili:var(--u-aruna); --u-secili-murekkep:var(--u-aruna-murekkep); } /* --- Hareket --------------------------------------------------------------- Tarayicinin yerlesik ease/ease-out egrileri zayif: ilk anda yeterince hizli acilmadiklari icin ayni surede DAHA YAVAS hissettiriyorlar. Kullanici en cok ilk 50 ms'ye bakiyor. --ease-out girip cikan seyler icin (baslangicta hizli, sonda yumusar). --ease-in-out ekranda YER DEGISTIREN seyler icin. ease-in UI'da hic kullanilmaz: basta yavas oldugu icin arayuzu uyusuk gosterir. Sureler: basma 100-160ms, ipucu 125-200ms, acilir liste 150-250ms, kalici yuzey (cekmece) 200-300ms. UI hareketi 300ms'yi asmaz. */ /* --ease-supurme EKRANI KATEDEN hareketler icin. --ease-out (easeOutQuint) sona dogru neredeyse duruyor; kucuk bir dugmede bu "yerine oturdu" hissi verir ama tam ekran bir supurmede son yuzde onu surunerek tamamlanir. OLCULDU. Tema dairesi --ease-out ile: yaricap 152ms'de %90'a variyor ve goz "daire doldu" diyor, ama geriye 268ms kaliyor. Kosseler o sure boyunca acikta: sag alt 119ms'de, SOL ALT ise 420ms'de, yani tam son karede kapaniyordu. Kullanicinin gordugu "daire doluyor, alt koselerde bosluk kaliyor, sonra aniden degisiyor" tam olarak buydu. Yaricapa pay vermek COZUM DEGIL: kose erken kapanir ama animasyon devam eder, yani gecikme olu zamana donusur. Duz sayilacak bir egri ile yaricap duzgun buyur ve en uzak kose animasyon biterken kapanir. */ :root{ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-supurme:cubic-bezier(.4,0,.2,1); --basma:130ms; /* Buyutme ortusunun karartma alfasi. Tek yerde duruyor cunku iki kural buna bagli: ortunun kendisi ve kaydirma olugunun rengi. */ --lb-ortu-alfa:.88; } *{box-sizing:border-box} /* KAYDIRMA OLUGU HEP AYRILIR. Buyutme penceresi acilirken html'e overflow:hidden geliyor; klasik (yer kaplayan) kaydirma cubugu olan tarayicilarda cubuk kayboluyor, duzen 15px genisliyor ve ORTALANMIS icerik 7.5px sagi kayiyordu. Olculdu: Chrome'da cubuk 15px, kilitliyken 0px, kayma tam 7.5px. Kullanici bunu Zen'de gormemisti ve sebebi de olculdu: Zen'in kaydirma cubugu USTTE YUZUYOR, genisligi 0. Yani kaybolacak bir sey yok. Hata yalnizca klasik cubuklu tarayicilarda vardi. BEDELI BILINEREK ODENIYOR: oluk artik kaydirma GEREKMEYEN kisa sayfalarda da ayrilir (/iletisim/, /404), yani oralarda 15px'lik bos bir serit kalir ve icerik yarim cubuk kadar sola kayar. Kayma bir hata, bos serit bir tercih; sabit duran yanlis olani degil dogru olani secmek. Ustte yuzen cubuklu tarayicilarda (Zen) hicbir etkisi yok. */ html{scroll-behavior:smooth;scrollbar-gutter:stable} /* `hidden` OZNITELIGI CSS'E YENILIYORDU. Tarayicinin kendi kurali [hidden]{display:none}, ama YAZAR kurallari tarayici kurallarini yener (ozgullukten bagimsiz, koken sirasi geregi). Yani `display` bildiren her sinif, uzerindeki hidden'i sessizce iptal eder. GERCEKTEN OLDU, /b4/ panelinde iki yerde birden: .admin-empty{display:grid} -> "Filtreye uyan kayit yok" kutusu, kayit VARKEN de listenin altinda duruyordu .btn{display:inline-flex} -> "Tumunu sifirla" istatistik kapaliyken de gorunuyordu; bu YIKICI bir islem, yani kusur kozmetik degildi Ikisi de JS'te dogru yazilmisti (`el.hidden = ...`); kusur yalnizca cizimde vardi, o yuzden kodu okurken gorunmuyordu. !important burada dogru arac: hidden "bu oge su an ilgisiz" demektir ve sunum katmani bunu ezememeli. Normalize eden kutuphaneler de ayni satiri ayni gerekceyle koyar. */ [hidden]{display:none!important} .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} #icerik:focus{outline:none} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;border-radius:0 0 10px 0;background:var(--accent);color:var(--on-accent);font-weight:800;text-decoration:none} .skip-link:focus{left:0} body{ min-width:320px; min-height:100vh; display:flex; flex-direction:column; margin:0; background:var(--bg); color:var(--text); font-family:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:400; line-height:1.65; } main{flex:1} /* Sekuya yalniz en buyuk iki yerde; site adi ve alt basliklar Bricolage'i izler ki header'daki 800 agirlik gercekten calissin (Sekuya'da kalin yok). */ h1{font-family:'Sekuya',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400} h2,h3,.brand{font-family:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif} h2{letter-spacing:-.015em} /* TASMA EMNIYETI: dar ekranda kaba sigmayan bir kelime, tasmak yerine kirilir. Sekuya yalnizca buyuk harf uretir ve h1 pozitif harf araligi tasir; Turkce'de "CIHAZINDAN", "POLITIKASI" gibi uzun kelimeler bu ikisiyle birlesince 360px'lik bir telefonda kabi asiyordu. Boyut ayarlari asagida duzeltildi, bu satir ise garantidir: font olculeri ne olursa olsun yatay tasma artik yapisal olarak mumkun degil. */ h1,h2,h3,h4,code{overflow-wrap:break-word} a{color:var(--accent);text-underline-offset:.18em} a:focus-visible,.btn:focus-visible,.admin-action:focus-visible,.theme-toggle:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .container{width:min(920px,calc(100% - 40px));margin:auto} /* Yuzen baslik: header artik seffaf bir raydir, kapsul olan nav'dir. Icerik kapsulun altindan gecer; ayirici cizgi yerine bulaniklik ve golge ayirir. ::before, kapsulun ustunde kalan seride icerigin dilimlenmis gorunmesini onleyen yumusak bir zemin; header z-index:10 ile kendi yigin baglamini kurdugu icin z-index:-1 nav'in altina duser, sayfanin altina degil. */ /* Kapsul artik ICERIGINE SARILIYOR. Onceden nav .container.wide idi, yani 1160px'e geriliyordu; icerik ~300px oldugu icin %75'i bos havaydi ve 999px yaricapli o kutu kapsul olmaktan cikip uclari yuvarlatilmis bos bir cubuk gibi duruyordu. max-content ile tasidigi kadar yer kapliyor. Genislik sinirini ARTIK HEADER tasiyor (padding), nav degil: boylece kirilma noktalarinda tek tek max-width ezmek gerekmiyor, nav yalnizca %100'e kadar buyuyor. SOLMA BANDI KALDIRILDI. header::before tam genislikte bir zemin->seffaf gradyani ciziyordu. Kapsul tam genislikteyken bandi kendisi ortuyordu; kapsul icerigine sarilinca band ACIGA CIKTI: dar bir kapsulun etrafinda sayfa genisliginde bulanik bir dikdortgen kaliyor, altindan gecen baslik solmus gorunuyordu. Kapsulun kendi backdrop-filter'i, kenarligi ve golgesi zaten okunabilirligi tasiyor -- yuzen kapsulun isi bu. (Yedek bicimler yerinde: backdrop-filter desteklenmiyorsa ve saydamligi azalt tercihinde nav zaten SOLID geliyor.) */ header{position:sticky;top:0;z-index:10;padding:14px 24px 6px} /* KAPSULDE KENAR ISIGI YOK. Iki kez denendi (%6, sonra %12) ve kullanici ikisinde de goremedi. Sebebi olculebilir: kapsulun zemini %68 saydam ve ustune blur(20px) biniyor, yani 1px'lik %12 beyaz cizgi bulanik zeminin icinde kayboluyor. Gorunmeyen efekt is yapmiyor demektir. Belirtec duruyor: panel kartlarinda (.metric, .link-card) zemin OPAK, orada gorunur olabilir ve panel henuz hic test edilmedi. */ header nav{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:6px 10px 6px 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 68%,transparent);backdrop-filter:blur(20px) saturate(1.8);box-shadow:var(--shadow)} /* KAPSULE KAYDIRMA TEPKISI EKLENMEZ -- bir kez denendi, GERI ALINDI. Golgesi scroll() zaman cizelgesine baglanmisti: tepede duz, kaydirinca yukselen bir kapsul. Chrome'da kaydirma tutukluyordu ve sebebi net: box-shadow bir BOYA ozelligi, her karede degisince kapsul yeniden boyaniyor, kapsulde backdrop-filter oldugu icin de arkasindaki alan her karede yeniden bulaniklastiriliyordu. Etki ilk 90px'te tanimliydi, tutukluk da tam orada hissediliyordu. Bu kapsulde HERHANGI bir boya ozelligini (golge, kenarlik, zemin) kaydirma boyunca degistirmek ayni bedeli getirir; backdrop-filter durdukca bu yol kapali. transform/opacity ucuz olurdu ama ikisi de kapsulu gorunur bicimde oynatir. Firefox'ta sorun gorunmuyordu; Chrome'da gorunuyordu. */ /* OZGULLUK: .container.wide (0,2,0) duz `header nav`i (0,0,2) YENER, o yuzden ezme sinifla birlikte yazilmali. Bu dosyada ayni tuzak iki kez belgeli (bkz. .container.wide ve `header nav` notlari); ucuncusu burasi. Iki secici de gerekli: statik sayfalar wide, Functions kabugu da wide ama render_header(wide=False) hala duz .container uretebiliyor. */ header nav.container,header nav.container.wide{width:max-content;max-width:100%} @supports not (backdrop-filter:blur(1px)){header nav{background:var(--surface)}} .brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800} /* MARKA ISARETI notr paletin DISINDA, bilerek: logo sayfanin degil kimligin parcasi ve tema degistirince renk degistirmemeli. Degerler eski sicak paletin --accent/--accent-2 ciftidir; belirtec yerine SABIT yazildilar, yoksa notr palette griye donerlerdi. Favicon'un kendi degradesi (#c15f3c -> #a3752f) DENENDI ve birakildi: daha acik oldugu icin uzerindeki "HB" yazisi 4.01:1'de kaliyordu, AA esigi 4.5. Simge dosyasinda sorun degil (orasi metin degil), baslikta sorun. Eski cift beyaz yaziyla 5.71:1 veriyor. GECICI: Basri kendi site simgesini tasarlayana kadar. O zaman kare ile favicon tek bir kaynaktan gelmeli, su an ikisi yakin ama ayni degil. */ .mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#a84a2b,#7d5c20);color:#ffffff} .links{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .links a{display:inline-flex;min-height:38px;align-items:center;padding:0 10px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:700} .links a[aria-current="page"]{background:var(--surface-2);color:var(--text)} @media (hover:hover) and (pointer:fine){.links a:hover{background:var(--surface-2);color:var(--text)}} /* TEMA ANAHTARI: DUGME DEGIL, SWITCH. Onceki hali tek ikon tasiyan yuvarlak bir dugmeydi ve ikon HEDEFI gosteriyordu (acik temada ay = "koyuya gec"). Erisilebilirlik adi ise DURUMU soyluyordu: aria-pressed koyu temada true. Yani goz eylemi, ekran okuyucu durumu okuyordu -- ayni kontrol iki farkli sey anlatiyordu. Switch celiskiyi kaldirir cunku KONUM ZATEN DURUMDUR. Sag = koyu. Ikon da artik mevcut temayi gosterir (acikta gunes, koyuda ay), hedefi degil. Boylece uc sinyal -- konum, ikon, aria-pressed -- ayni seyi soyler. Topuz YALNIZCA transform ile kayar. Kapsulde backdrop-filter var; orada bir boya ozelligini (golge, zemin, kenarlik) her karede degistirmek butun kapsulu yeniden bulaniklastirir ve kaydirma tutuklugu yasanmisti. transform bu bedeli odemez. */ /* DOKUNMA VURGUSU KAPALI. Mobil Chrome dokununca ogenin ustune mavi bir DIKDORTGEN ciziyor; anahtar hap bicimli oldugu icin kose kose tasiyor. Geri bildirim kaybolmuyor: topuz zaten kayiyor ve tema doniyor. Klavye odagi ayri kural, ondan etkilenmez. */ .theme-toggle{position:relative;display:inline-flex;align-items:center; width:46px;height:26px;min-width:46px;padding:0; border:1px solid var(--line-strong);border-radius:999px; -webkit-tap-highlight-color:transparent; background:var(--surface-2);color:var(--text);cursor:pointer;box-shadow:none} /* Gorsel yukseklik 26px ama dokunma hedefi 44px olmali. Sozde-oge gorunmez bir alan serer: kapsulun yuksekligi buyumeden parmakla basilabilir kalir. */ .theme-toggle::before{content:"";position:absolute;inset:-9px -4px;border-radius:999px} .tt-yuva{position:absolute;top:2px;left:2px;width:20px;height:20px; display:grid;place-items:center;border-radius:50%; background:var(--surface);color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.22); transition:transform .22s var(--ease-out)} .tt-yuva svg{display:block} /* Iki SVG de isaretlemede durur, secimi burasi yapar. data-resolved-theme'i tema betigi 'de, ilk boyamadan ONCE yaziyor -- yani topuz atlamasi olmaz. Betik hic kosmazsa nitelik de yoktur; o durumda isletim sistemi tercihi devreye girer, o da yoksa acik tema (gunes, sol) kalir. */ .theme-toggle .ikon-ay{display:none} [data-resolved-theme="dark"] .tt-yuva{transform:translateX(20px)} [data-resolved-theme="dark"] .theme-toggle .ikon-gunes{display:none} [data-resolved-theme="dark"] .theme-toggle .ikon-ay{display:block} @media (prefers-color-scheme:dark){ :root:not([data-resolved-theme]) .tt-yuva{transform:translateX(20px)} :root:not([data-resolved-theme]) .theme-toggle .ikon-gunes{display:none} :root:not([data-resolved-theme]) .theme-toggle .ikon-ay{display:block} } .theme-toggle:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))} .hero{padding:54px 0 28px} .eyebrow{display:inline-block;color:var(--accent-2);font-size:.84rem;font-weight:800} .eyebrow{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted)} /* Satir araligi ve harf arasi Sekuya icin ayarlidir. 1.08 mevcut serif icin ayarlanmisti; Sekuya yalniz buyuk harf ve Turkce sapkalar (Ğ Ö Ü İ) buyuk harfin ustune bindigi icin iki satirli basliklarda isaretler ust satira giriyordu. Buyuk harf metinde alt uzanti olmadigindan 1.3 gozle 1.15 gibi durur. Harf arasi da buyuk harf dizgisinin klasik ihtiyaci; em biriminde oldugu icin telefonda punto kuculunce kendiliginden olceklenir. */ h1{max-width:760px;margin:16px 0 0;font-size:clamp(2.2rem,5vw,3.55rem);line-height:1.3;letter-spacing:.03em} h2{margin:0;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.22;letter-spacing:0} h3{margin:12px 0 8px;line-height:1.25} .hero p,.lead{max-width:680px;color:var(--muted);font-size:1.04rem} .hero p{margin-top:18px} .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:0 18px;border-radius:10px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:750} button.btn{border:0;cursor:pointer;font:inherit} .btn.alt{border:1px solid var(--line-strong);background:var(--surface);color:var(--text)} .btn:disabled{opacity:.62;cursor:not-allowed} section{padding:24px 0 54px} .content p{color:var(--muted)} .content{width:min(820px,calc(100% - 32px));margin:auto;padding:44px 0 78px;font-size:1.02rem} .content h2{margin-top:38px} /* DOGRUDAN cocuk. Kuralin niyeti "icerik blogu bir baslikla basliyorsa ust bosluk verme". Torunlara da islemesi istenmez: Ingilizce bolum lang="en" tasiyan bir sarmalayiciya alininca oradaki h2 kendi sarmalayicisinin ilk cocugu oluyor ve ust boslugunu kaybediyordu. `>` niyeti acikca yaziyor. */ .content>h2:first-child{margin-top:0} .notice{padding:18px 20px;border-left:4px solid var(--accent);box-shadow:none} .notice a{font-weight:800} .compact-section{padding-top:8px} .hero-meta{margin:20px 0 0;color:var(--muted);font-size:.9rem} /* Yayin durumu satiri. Rozet "geliştirme aşamasında" der ama kanali ve sonraki adimi soylemez; okuyucunun "nereden alacagim, ne zaman" sorusu sayfada baska hicbir yerde cevaplanmiyordu. hero-meta'dan AYRI sinif: o satir kuru bir etiket dizisi (Android · ucretsiz · ...), bu ise cumle ve baglanti tasiyor, dolayisiyla satir yuksekligi ve ust boslugu farkli. Genislik lead ile ayni olcude tutulur ki tepe blogu tek kolon okunsun. */ .hero-cikis{margin:10px 0 0;max-width:46ch;color:var(--muted);font-size:.9rem;line-height:1.55} .hero-cikis a{color:var(--text);font-weight:800} .status-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--accent-2);font-size:.82rem;font-weight:800} .status-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-2)} .device{justify-self:center;width:min(268px,74vw);aspect-ratio:9/19;padding:12px;border-radius:36px;background:linear-gradient(155deg,#2b2b2b,#111111);box-shadow:0 34px 60px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.05)} .device img{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px;background:#000} /* Temali ekran goruntuleri ile geliyor. varsayilan olarak satir ici; kutuyu doldurmasi icin blok yapilmali, yoksa telefon cercevesi ile gorsel arasinda satir ici taban cizgisi boslugu kaliyor. `display:contents` de isi gorurdu ama gereksiz: burada ezilecek tek sey kutu modeli. */ .device picture{display:block;width:100%;height:100%} /* --- Urun hero'su: simge + baslik solda, telefon sagda ------------------ Bir donem simge basligin USTUNDE tek basina duruyordu ve saginda 600px'lik bos alan kaliyordu. Simgeyi buyutmek bunu COZMUYOR (96px denendi: sol sutun tepeden agirlasti, bosluk aynen kaldi) -- tek bir simge o alani dolduramaz. Iki degisiklik birlikte cozuyor: simge basligin yanina gecip metin blogunu toparliyor, bosluga da ekran goruntusu giriyor. */ .hero-izgara{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:64px;align-items:center} /* floaty ANIMASYONU BURADA DA KAPALI. Kural (.device{animation:floaty}) su an sitede hicbir yerde CALISMIYOR: butun telefonlar .detail-row/.detail-trio icinde ve ikisi de animasyonu kapatiyor. Hero telefonu o kaplarin disinda, yani kapatilmazsa uyuyan animasyon YALNIZ BURADA uyanir ve sayfadaki tek oynayan telefon olurdu. */ .hero-izgara .device{animation:none} .hero-satir{display:flex;align-items:center;gap:26px;margin:0 0 24px} /* Simge TEMAYLA DEGISMEZ -- marka isaretiyle (.mark) ayni gerekce: simge uygulamanin kimligi, sayfanin degil. Kose yuvarlakligi SVG'nin kendi icinde (rx=21/72, .mark'taki 10/34 ile ayni oran), burada border-radius yok. */ .urun-simge{display:block;width:88px;height:88px;flex:none} /* OZGULLUK: `.urun-tepe h1` (0,1,1) alt bosluk veriyor ve bu dosyada DAHA SONRA geliyor; duz `.hero-satir h1` (0,1,1) esit ozgullukte kalip kaybederdi. Kap sinifiyla birlikte yazildi. Bosluk artik satirin kendisinde. */ .urun-tepe .hero-satir h1{margin:0} .container.wide{width:min(1160px,calc(100% - 48px))} /* --- Ana sayfa: urun kumandasi --------------------------------------- Urun listesi kart izgarasi DEGIL, sayfanin rengini suren bir kumanda. Kartlar silinerek degil IS VERILEREK kaldirildi: kutular dugme oldu. Uzerine gelince (ya da klavyeyle odaklaninca) hem sagdaki yuzeyin rengi hem ust bandin vurgusu o URUNUN tonuna kayiyor. */ .urun-bant{height:12px;border-radius:2px;margin-bottom:40px;position:relative;overflow:hidden; background:linear-gradient(90deg,var(--u-minamo),var(--u-aruna))} .urun-bant::after{content:"";position:absolute;inset:0;background:var(--u-secili); opacity:0;transition:opacity .55s ease} .urun-bant.odak::after{opacity:1} .urun-tepe{padding:9vh 0 6vh} .urun-tepe h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;margin:0 0 24px} .urun-tepe .lead{max-width:42ch;margin:0 0 30px} .urun-kumanda{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,340px); gap:64px;align-items:start;padding:52px 0;border-top:1px solid var(--line)} .urun-liste{display:grid} /* Madde = gercek : urunun kendi sayfasina gider. Ustune gelmek ya da klavyeyle odaklanmak yalnizca ONIZLER (sagdaki yuzeyin rengini ve metnini degistirir); tiklamak GOTURUR. JS hic calismazsa madde sade bir baglanti olarak kalir, yani sayfa yine tamdir. */ .urun-md{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;align-items:baseline; padding:20px 26px 20px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left; font:inherit;color:inherit;text-decoration:none;cursor:pointer;position:relative} /* Her urunun tonu SINIFLA geliyor, satir ici style ile degil: CSP style-src 'self' oldugu icin satir ici stil ozniteligi de engelleniyor (check_site bunu yakaladi). */ /* --u-renk = sayfa zemininde METIN/vurgu (temaya bagli). --u-yuzey = urun kutusunun DOLGUSU (sabit, kendi murekkebini tasir). --u-yuzey-koyu = urun sayfasindaki bandin KOYU TEMADAKI hali. */ .urun-minamo{--u-renk:var(--u-minamo-yazi);--u-yuzey:var(--u-minamo); --u-yuzey-koyu:color-mix(in srgb,var(--u-minamo) 78%,#000)} .urun-aruna{--u-renk:var(--u-aruna-yazi);--u-yuzey:var(--u-aruna); --u-yuzey-koyu:var(--u-aruna)} .urun-md::before{content:"";position:absolute;left:-22px;top:20px;bottom:20px;width:4px; border-radius:2px;background:var(--u-renk);opacity:.25; transform:scaleY(.5);transform-origin:center;transition:opacity .35s,transform .35s} .urun-md:focus-visible::before,.urun-md.secili::before{opacity:1;transform:scaleY(1)} @media (hover:hover) and (pointer:fine){.urun-md:hover::before{opacity:1;transform:scaleY(1)}} /* Ok, maddenin baglanti oldugunu soyler; ustune gelince ilerler. */ .urun-md::after{content:"\2192";position:absolute;right:2px;top:22px;font-size:1.05rem; color:var(--u-renk);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s} .urun-md:focus-visible::after,.urun-md.secili::after{opacity:1;transform:translateX(0)} @media (hover:hover) and (pointer:fine){.urun-md:hover::after{opacity:1;transform:translateX(0)}} .urun-md b{font-family:'Sekuya',system-ui,sans-serif;font-weight:400;font-size:.92rem; letter-spacing:.16em;color:var(--muted);transition:color .35s} .urun-md.secili b{color:var(--u-renk)} @media (hover:hover) and (pointer:fine){.urun-md:hover b{color:var(--u-renk)}} .urun-md strong{display:block;font-size:1.2rem;line-height:1.25;margin-bottom:4px;font-weight:750} /* `.urun-not` KALDIRILDI. Ana sayfadaki "Günlük (adı geçici)" notunun ikinci parcasiydi; urun adi kesinlesince not da kalkti. Kural bosta kalinca kontrast kapsam kapisi hata verir (renk bildiren her kural bir ogeye dusmeli), o yuzden isaretlemeyle birlikte silindi. */ .urun-md em{font-style:normal;display:block;color:var(--muted);font-size:.98rem;line-height:1.55} /* Sagdaki yuzey DUZ RENK ALANI: ekran goruntusu yok. Bir ara icine urun gorseli konmustu, geri alindi -- renk alani gorseli tasiyinca hem renk sonuyor hem de kutu yeniden "kart" gibi okunuyordu. Yazi dibe hizali, ustte etiket ve bes nokta. YAPISKAN DEGIL, `relative`. Bir sure `position:sticky;top:88px` idi ve OLCULDUGUNDE hicbir yaygin ekranda calismadigi goruldu: yuzey yapisma noktasina varmadan sayfa bitiyor. 1920x1080 varmak icin 705px gerekiyor, sayfada 574px var -> hic 1600x1000 639px gerekiyor, 588px var -> hic 1280x1024 696px gerekiyor, 622px var -> hic 1440x900 678px gerekiyor, 727px var -> 49px, yolun %7'si Ana sayfa tek ekranlik ve sol sutun (iki urun) sagdaki 4/5 oranli yuzeyden kisa; yapismanin yol alacagi pay zaten 105px. Ucuncu uygulama gelip liste uzayinca yapismayi geri koymak anlamli olur, simdi degil. `relative` SART, `static` DEGIL: asagidaki .urun-yuzey-ust mutlak konumlu ve kapsayici blogunu buradan aliyor. Bu kural `static` olursa serit belgenin en ustune firlar -- gercekten olan buydu, bkz. asagisi. `top` DA KALKTI: `relative` ile kalsaydi yuzeyi 88px asagi kaydirirdi. */ .urun-yuzey{position:relative;border-radius:4px;padding:28px;overflow:hidden; aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;gap:12px; background:var(--u-secili)} /* PANELDE RENK GECISI YOK, bilerek. Iki urunun yuzeyi ters kutupta: biri acik zemin + koyu murekkep, oteki koyu zemin + beyaz murekkep. Aradaki 0,55 sn'lik bir gecis boyunca murekkep ya eski ya yeni zemine karsi okunmaz kalirdi (koyu murekkep sarap zeminde 2.13:1, beyaz murekkep acik mavide 2.6:1). Ara degeri yumusatmak da kurtarmaz -- ayni tuzak tema anahtarinda olculmustu; cozum ARA KAREYI ORTADAN KALDIRMAK. Zemin ve murekkep artik ayni karede degisiyor. Ust bandin kendi gecisi DURUYOR: orada metin yok, kontrast cukuru olusamaz. */ /* KAPSAYICI BLOK BAGIMLILIGI. Bu serit mutlak konumlu, yani en yakin KONUMLANDIRILMIS atasina gore yerlesir. O ata .urun-yuzey. 900px altinda `.urun-yuzey{position:static}` diye bir kural vardi; ata konumlandirilmis olmaktan cikinca serit ilk kapsayici bloga, yani BELGENIN kendisine gore yerlesiyordu: "HB4sri" etiketi sayfanin sol ustunde, noktalar sag ustunde, basligin iki yaninda beliriyordu. Dar ekranin yani sira YAKINLASTIRMA da tetikliyordu (yakinlastirma CSS genisligini kucultur). Kural silindi; taban artik `relative`. Marka `lang="en"` ile isaretli: text-transform:uppercase, sayfa lang="tr" oldugu icin Turkce kurallariyla buyutuyor ve "hb4sri" "HB4SRİ" (noktali I) olarak ciziliyordu. */ .urun-yuzey-ust{position:absolute;top:24px;left:28px;right:28px; display:flex;justify-content:space-between;align-items:center; font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800; color:var(--u-secili-murekkep);opacity:.62} .urun-noktalar{display:flex;gap:7px} .urun-noktalar b{width:10px;height:10px;border-radius:50%;background:var(--u-secili-murekkep);opacity:.24;transition:opacity .35s} .urun-noktalar b.on{opacity:.85} .urun-yuzey h2{margin:0;font-family:'Sekuya',system-ui,sans-serif;font-weight:400; color:var(--u-secili-murekkep);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.06;letter-spacing:.01em} .urun-yuzey p{margin:0;color:var(--u-secili-murekkep);opacity:.8;font-size:.96rem;line-height:1.5} /* Kuyruk iki kolon: anlati solda kendi olcusunde, baglantilar sagda karsi agirlik olarak. Tek kolonken sag taraf bombos kaliyordu. DIKKAT: bu bolum ANA SAYFADA YOK (iki paragrafi altbilgiye tasindi) ama urun sayfalari, gizlilik ve iletisim HALA kullaniyor. Silmeden once dort sayfayi da kontrol et; bir kez yalnizca ana sayfaya bakip silinmisti. */ .urun-kuyruk{padding:56px 0 76px;border-top:1px solid var(--line)} .urun-kuyruk .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,260px); gap:20px 64px;align-items:start} .urun-kuyruk p{max-width:60ch;margin:0;color:var(--muted);font-size:1.04rem;line-height:1.62} .urun-kuyruk .hero-meta{margin:0;font-size:.9rem} /* --- Urun sayfasi ------------------------------------------------------ Sayfa bastan sona URUNUN tonunu giyer: --u-renk ust kapta bir kez tanimlanir (.urun-minamo / .urun-aruna), asagidaki her parca ondan icer. "Urun basina bir ton" boylece dekor degil sayfanin yapisi olur. */ /* Bant bir grafik serit, metin degil: ana sayfadaki degradeyle ayni parlak yuzey tonunu kullanir, metin varyantini degil. */ .urun-sayfa .urun-bant{background:var(--u-yuzey)} /* KOYU TEMADA BANT KISILIR. Duz renk serit, saf siyah zeminde sayfanin en yuksek parlaklikli alani oluyordu: goz h1'den ONCE oraya gidiyor ve gorsel hiyerarsi bozuluyordu. Acik temada boyle bir sorun yok, o yuzden kural yalniz koyu temada. Doygunluk degil PARLAKLIK dusuruluyor -- urunun kimlik rengi korunmali, yalnizca one cikma gucu kirpilmali. KISMA URUN BASINA (--u-yuzey-koyu). Kural PARLAK yuzeyler icin yazilmisti; zaten koyu olan bir tona uygulaninca band siyah zeminde kayboluyor. Olculdu: Minamo kisilmis halde 4.14:1, Aruna kisilsaydi 1.98:1 -- yarisi. Aruna'nin bandi bu yuzden kisilmadan geciyor (2.62:1). */ :root[data-theme="dark"] .urun-sayfa .urun-bant{ background:var(--u-yuzey-koyu)} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .urun-sayfa .urun-bant{ background:var(--u-yuzey-koyu)} } .urun-sayfa .urun-tepe .lead{max-width:46ch} /* OMURGA. Metnin genisligi bilerek sinirli (satir ~55-70 karakter; daha uzun satirda goz bir sonraki satirin basini kaybediyor). Ama sinir tek basina konunca sagda is yapmayan bir bosluk kaliyordu. Cozum olcuyu bozmak degil, bosluga is vermek: bolum basligi SOL kolona geciyor ve sticky duruyor, metin sagda kendi genisliginde akiyor. Boylece iki kolon da dolu ve bolumun icinde gezerken nerede oldugun kaybolmuyor. */ .bolum{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:0 64px; padding:44px 0 0;border-top:1px solid var(--line)} .bolum-basi{position:sticky;top:96px;align-self:start} .bolum-basi h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)} .bolum-giris{margin:0;max-width:60ch;color:var(--muted);line-height:1.62} /* Kanit blogu: pazarlama cumlesi degil, dogrulanabilir bir olcu. Uygulamanin izin listesi yazilir ve INTERNET'in YOKLUGU sayfanin omurgasi olur -- okuyucu bunu kurulum dosyasindan kendisi kontrol edebilir. */ .kanit{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:52px; align-items:center;padding:46px 0} /* PUNTO 2.7rem -> 3.1rem: sayfada hero'dan (5.2rem) sonra tek yuksek sesli oge burasi ve arasindaki fark cok acikti; bolum basliklari (2.1rem) yapiskan ve iki kolonlu oldugu icin BUYUTULEMEZ, dolayisiyla ara yalnizca buradan kapanabiliyor. Yan kazanc olculdu: 1440px'de vurgulu ifade artik iki satira bolunmuyor ("UYGULAMANIN / INTERNET IZNI YOK." seklinde temiz kiriliyor, onceden "INTERNET" ust satirda kaliyordu). 3.5rem de denendi; Minamo'da metin sagdaki izin listesine degecek kadar yaklasiyor. Taban 1.7rem AYNI KALDI -- dar ekranda zaten o gecerli, tavan orada hic devreye girmiyor. */ .kanit-soz{margin:0;font-family:'Sekuya',system-ui,sans-serif;font-weight:400; font-size:clamp(1.7rem,4vw,3.1rem);line-height:1.04;letter-spacing:.01em} .kanit-soz em{font-style:normal;color:var(--u-renk)} .kanit-not{margin:18px 0 0;max-width:54ch;color:var(--muted);line-height:1.62} .izin-listesi{margin:0;padding:0;list-style:none;font-size:.92rem} .izin-listesi li{display:flex;justify-content:space-between;gap:14px;align-items:baseline; padding:10px 0;border-top:1px solid var(--line);color:var(--muted)} .izin-listesi code{font-size:.8rem;color:var(--text);white-space:nowrap} .izin-listesi .yok{color:var(--u-renk);font-weight:750} .izin-listesi .yok code{color:var(--u-renk);text-decoration:line-through} .izin-alt{margin:12px 0 0;font-size:.84rem;color:var(--muted);line-height:1.5} /* Ozellik satirlari: kart degil satir. Ana sayfadaki .urun-md ile ayni ritim, ama tiklanmiyor -- burada secilecek bir sey yok. */ .ozellikler{display:grid;padding:14px 0 0} .ozellik{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;align-items:baseline; padding:22px 0;border-top:1px solid var(--line);position:relative} .ozellik::before{content:"";position:absolute;left:-22px;top:22px;bottom:22px;width:4px; border-radius:2px;background:var(--u-renk);opacity:.3} .ozellik b{font-family:'Sekuya',system-ui,sans-serif;font-weight:400;font-size:.92rem; letter-spacing:.16em;color:var(--u-renk)} .ozellik h3{margin:0 0 6px;font-size:1.18rem;line-height:1.25;font-weight:750} .ozellik p{margin:0;max-width:62ch;color:var(--muted);font-size:.99rem;line-height:1.6} /* Iletisim sayfasinin tek isi bir adresi vermek; adres de sayfanin en buyuk ogesi olsun. Sekuya kullanilmadi: yalniz buyuk harf uretiyor ve bir e-posta adresini buyuk harfe cevirmek onu yanlis gosterir. */ .buyuk-adres{margin:22px 0 10px;font-size:clamp(1.35rem,4.2vw,2.3rem);font-weight:750; line-height:1.2;overflow-wrap:anywhere} .buyuk-adres a{color:var(--text);text-decoration-thickness:2px;text-underline-offset:.14em} .buyuk-adres a:hover{color:var(--accent)} /* Duz liste: numaralanmayi hak etmeyen ama madde madde okunmasi gereken yerler icin (Health Connect, verinin cikis yollari). */ .duz-liste{margin:18px 0 0;padding:0;list-style:none} .duz-liste li{padding:12px 0 12px 22px;border-top:1px solid var(--line);position:relative; color:var(--muted);line-height:1.62;max-width:70ch} .duz-liste li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:2px;background:var(--u-renk)} .duz-liste strong{color:var(--text)} @media(max-width:900px){ .urun-kumanda{grid-template-columns:1fr;gap:32px;padding-top:36px} /* `.urun-yuzey{position:static}` BURADAN SILINDI. Yapisma zaten taban kuraldan kalkti, yani kapatilacak bir sey yok; ustelik `static` icindeki mutlak konumlu seridin kapsayici blogunu yok ediyordu. */ .urun-md::before,.ozellik::before{left:-12px} .urun-tepe{padding:6vh 0 4vh} .kanit{grid-template-columns:1fr;gap:28px;padding:34px 0} /* Omurga tek kolona iner: baslik metnin ustune gecer, sticky biter. */ .bolum{grid-template-columns:1fr;gap:14px;padding-top:34px} .urun-kuyruk .container{grid-template-columns:1fr;gap:18px} .bolum-basi{position:static} } @media(prefers-reduced-motion:reduce){ .urun-bant::after,.urun-yuzey,.urun-md::before,.urun-md b,.urun-md::after{transition:none} } .detail-row{display:grid;grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:48px;align-items:center;padding:34px 0} .detail-row+.detail-row{border-top:1px solid var(--line)} .detail-row.flip{grid-template-columns:minmax(0,1fr) minmax(200px,270px)} .detail-row.flip .detail-media{order:2} .detail-row .device{animation:none} .detail-text h2{margin:0 0 12px} .detail-text p{margin:0;color:var(--muted)} .detail-trio{display:grid;grid-template-columns:1fr minmax(0,1.15fr) 1fr;gap:30px;align-items:center;padding:34px 0;border-top:1px solid var(--line)} .detail-trio .device{animation:none} .detail-trio .detail-media:first-child{justify-self:start} .detail-trio .detail-media:last-child{justify-self:end} .detail-text{text-align:center} .detail-note{margin:0 auto 6px;color:var(--muted);font-size:.85rem;text-align:center} .btn,.metric{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-2px)}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .device{animation:floaty 6.5s ease-in-out infinite} @media(prefers-reduced-motion:reduce){ .device{animation:none} .btn{transition:none} .btn:hover{transform:none;box-shadow:var(--shadow)} } /* Saydamligi azalt diyen kullaniciya yuzen baslik SOLID gelir. Yedek bicim zaten vardi (@supports not backdrop-filter); ayni bicim artik tercihe de bagli. Blur kalkinca arkadaki metin baslikta hayalet birakmaz. */ @media (prefers-reduced-transparency:reduce){ header nav{background:var(--surface);backdrop-filter:none} } /* --- Basma geri bildirimi ------------------------------------------------- Geri bildirim BIRAKISTA degil BASISTA verilir; arayuz ancak o zaman "duydum" demis olur. Dokunmatikte tarayicinin kendi vurgusu duruyor (-webkit-tap-highlight-color hicbir yerde bastirilmadi), yani ACIK olan yer MASAUSTU: fareyle basildiginda sayfa degisene kadar hicbir sey olmuyordu. Kapsam denetimler: metin baglantilarina eklenmedi -- onlarda yerel vurgu zaten var ve hemen gezindikleri icin basma durumu goze bile gorunmez. Kutular %97, buyuk kartlar %99,3 (kart genis oldugu icin ayni oran orada abartili durur). Sure 130ms: 100-160 araligi, basmanin anlik hissetmesi gereken bant. RENK DE degisiyor, yalniz olcek degil: azaltilmis harekette olcek kapanir, geri bildirimin kendisi kapanmaz -- azaltilmis hareket "geri bildirim yok" demek degil, "hareket yok" demek. */ .btn,.admin-action,.theme-toggle,.lightbox-close,.drawer-close,.chart-select, .link-card{transition:transform var(--basma) var(--ease-out), box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)} .btn:active,.admin-action:active,.theme-toggle:active,.lightbox-close:active, .drawer-close:active,.chart-select:active{transform:scale(.97)} .link-card:active{transform:scale(.993); border-color:color-mix(in srgb,var(--accent) 34%,var(--line))} /* --- Tema gecisi: DAIRE ILE ORTULUR, CAPRAZ GECISLE DEGIL ----------------- Onceki cozum her rengi tek tek soldurmakti (evrensel secici + transition). Kullanici "tema degisiminde buyuk baslik yanip soniyor" dedi; ilk teshisim yanlisti (kompozit katman sanmistim), duzelmedi. OLCULUNCE cikti: acik tema zemin #f5f5f5 yazi #313131 -> 11.93:1 koyu tema zemin #000000 yazi #d7d7d7 -> 14.59:1 Ikisi ayni surede, ayni yumusatmayla, BIRBIRINDEN BAGIMSIZ ve ZIT yonlere gidiyor; dolayisiyla yolda kesisiyorlar: %25 zemin #b8b8b8 yazi #5a5a5a 3.48:1 %40 zemin #939393 yazi #737373 1.54:1 %50 zemin #7a7a7a yazi #848484 1.15:1 <-- yazi kayboluyor %60 zemin #626262 yazi #959595 2.04:1 220ms'lik gecisin ~55ms'si boyunca metin zeminle ayni gri. Goz bunu "yanip sonme" olarak okuyor. En buyuk ve en uzun yolu kateden metin oldugu icin once kahraman basliginda fark ediliyor, ama her koyu metinde var. BUNU CAPRAZ GECISI GUZELLESTIREREK COZMEK MUMKUN DEGIL. Piksel karisimi dogrusal interpolasyondur: birbirinin TERSI iki goruntu arasinda hangi yolu secersen sec ayni bulamactan gecersin. plus-lighter de kurtarmaz, cunku pikseller ozdes degil, tam tersi. Cozum gecisi yumusatmak degil, ARA KAREYI ORTADAN KALDIRMAK. Gorunum Gecisleri (View Transitions) eski sayfayi bir goruntu olarak dondurup yenisini ustune ciziyor. Varsayilan animasyonu yine capraz gecis, yani ayni tuzak -- bu yuzden ikisi de `animation:none` ile kapatiliyor ve yeni sayfaya KIRPMA uygulaniyor. Boylece her piksel her an ya tamamen eski ya tamamen yeni temadir; arada karisim YOK, kontrast cukuru fiziken olusamaz. mix-blend-mode:normal bilincli: varsayilan plus-lighter, capraz gecisin ortada kararmamasi icindir. Burada capraz gecis yok, ustuste binen iki kat var; plus-lighter kalsaydi kirpma sinirinda iki tema TOPLANIR ve kenarda parlak bir halka olusurdu. Yaricap ve merkez betikten geliyor (dugmenin gercek yeri). Yedek degerler CSS'te duruyor: betik degeri koyamazsa daire ust ortadan acilir, efekt yine calisir. */ ::view-transition-old(root), ::view-transition-new(root){animation:none;mix-blend-mode:normal} ::view-transition-old(root){z-index:0} ::view-transition-new(root){z-index:1} /* KONUM VE YARICAP YUZDE, PIKSEL DEGIL. Sozde-ogenin koordinat uzayi Chrome'da sayfa YAKINLASTIRMASINI izlemiyor; piksel yazilan bir uzunluk yakinlastirma 1'deki uzayda okunuyor. Kullanicinin ekran kaydindan olculdu (1918px'lik kare): %200'de topuz cihazda 1222'de ama daire 610'dan aciliyor, tam yarisi. Uzaklastirinca ters yone kaciyor -- topuz 1065, daire 1425. Yaricap da ayni carpanla bozuldugu icin %200'de supurme ekranin ~%55'inde tikaniyor, kalani animasyon bitince TEK KAREDE deginiyor: "tam daire olduktan sonra koseye atliyor" tarifi bu. %100'de iki uzay ortustugu icin hicbir belirti yoktu. Yuzde bu sinifi tamamen kaldirir: sozde-ogenin KENDI kutusuna gore cozulur, kutunun birimi ne olursa olsun. Oranlari theme.js CSS pikselinde hesapliyor, yani yakinlastirmadan bagimsizlar. Yuzde yaricap kutunun kosegenine gore cozulur (sqrt(w^2+h^2)/sqrt(2)); theme.js ayni bolen ile ceviriyor. Baslangic da `0%`: piksel ile yuzde arasinda ara deger uretmek gereksiz karmasik. Bu ayni zamanda telefondaki adres cubugu sorununu da kapatiyor. Anlik goruntu kapsayici blogu gorunum alanindan buyuk oldugunda yuzde yaricap o buyuk kutunun kosegenine gore cozuluyor, yani KENDILIGINDEN buyuyor; %6 pay aradaki farki karsiliyor. */ @keyframes tema-daire{ from{clip-path:circle(0% at var(--tema-x,50%) var(--tema-y,0%))} to{clip-path:circle(var(--tema-r,150%) at var(--tema-x,50%) var(--tema-y,0%))}} @media (prefers-reduced-motion:no-preference){ ::view-transition-new(root){animation:tema-daire .42s var(--ease-supurme)} } /* --- Canlilik: giris ve beliris ------------------------------------------ Sayfa tek bir donmus kareydi; hicbir sey ne acilista ne kaydirmada tepki veriyordu. Iki kural ekleniyor, ikisi de SIFIR JavaScript. 1) KAHRAMAN GIRISI. Baslik bloğu bir kez, kademeli acilir. Kapsam `>.container>*`: kahramanin dogrudan cocuklari (serit, rozet, h1, lead, kunye). Derine inmiyor, yoksa baslik icindeki her parca ayri ayri oynardi. Sure kisa (.5s) ve mesafe kucuk (14px): tekrar ziyarette bekletmeyen, yalnizca "yerine oturdu" diyen bir hareket. 2) KAYDIRMAYLA BELIRIS. Bolumler gorus alanina girerken yukselerek belirir. view() zaman cizelgesi ogeye BAGLI: her bolum kendi konumuna gore ilerler, yani kademelenme kendiliginden olusur, gecikme hesaplamaya gerek yok. Yuklendiginde zaten ekranda olan oge araligin sonundadir, yani gorunur baslar -- ilk ekranda hicbir sey gizli kalmaz. Ikisi de azaltilmis harekette HIC tanimlanmaz: kural blogun disinda kalir, sonradan notrlestirilmesi gerekmez. */ /* DOLGU KIPI `backwards`, `both` DEGIL. `both` ile animasyon BITTIKTEN sonra da etki uygulanmaya devam ediyor; Chrome bu yuzden ogeyi kendi kompozit katmaninda tutuyor ve tema degisince o dev basligin katmani bastan rasterize ediliyordu -- ekranda bir karelik yanip sonme. `backwards` yalnizca animasyon BASLAMADAN oncesini doldurur (kademelenme icin gereken tam olarak bu), bittikten sonra oge dogal bicimine doner ve katman kalmaz. Bitis durumu zaten dogal durumla ayni oldugu icin gorsel fark yok. */ @media (prefers-reduced-motion:no-preference){ @keyframes giris{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .urun-tepe>.container>*,.hero>.container>*{animation:giris .5s var(--ease-out) backwards} .urun-tepe>.container>:nth-child(2),.hero>.container>:nth-child(2){animation-delay:60ms} .urun-tepe>.container>:nth-child(3),.hero>.container>:nth-child(3){animation-delay:120ms} .urun-tepe>.container>:nth-child(n+4),.hero>.container>:nth-child(n+4){animation-delay:180ms} } /* BELIRIS. Bolumler gorus alanina girerken belirir. Mekanigin tamami ve hangi yollarin neden elendigi /assets/beliris.js basinda yazili; buradaki kural yalnizca gorunumu tarif eder. Sinifi da o betik ekler. MESAFE 34px. Once 14, sonra 22 idi ve ikisi de fark edilmiyordu. Esik ekranin %82'sinde: oge okunan yerdeyken oynuyor. Eski surumde solmanin tamami ekranin ALT CEYREGINDE gecip gidiyordu, yani is bolum okuma alanina varmadan bitmis oluyordu. GIZLEME `html.beliris-var` ARKASINDA. Dogrudan CSS'e yazsaydik betik herhangi bir sebeple kosmadiginda (hata, engelleme, eski tarayici) icerik KALICI olarak gizli kalirdi. Bir metin sitesinde en kotu basarisizlik budur; gizleme yalnizca efektin calisacagi kesinlestikten sonra aciliyor. */ @media (prefers-reduced-motion:no-preference){ .beliris-var .bolum,.beliris-var .ozellik,.beliris-var .detail-row, .beliris-var .detail-trio,.beliris-var .urun-kuyruk>.container{ opacity:0;transform:translateY(34px); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)} .beliris-var .bolum.belirdi,.beliris-var .ozellik.belirdi, .beliris-var .detail-row.belirdi,.beliris-var .detail-trio.belirdi, .beliris-var .urun-kuyruk>.container.belirdi{opacity:1;transform:none} } /* KAGITTA BELIRIS YOK. Gizleme ekranda kaydirmayla aciliyor; kagitta kaydirma diye bir sey yok, yani sayfayi acar acmaz yazdiran herkes ekranin altinda kalan HER SEYI bos basiyordu. GERCEKTEN OLDU. Olculdu (1262x748 gorunum, sayfa acilir acilmaz, hic kaydirmadan): /uygulamalar/aruna/ onikinin onikisi, /uygulamalar/minamo/ onbirin onbiri, /gizlilik/ ucun ikisi, /iletisim/ ikinin biri gizliydi. Beliris geldigi commit'te bu kural yoktu. Kural gizlemeden SONRA gelmeli: ozgulluk ayni (0,2,0), kazanan kaynakta sonra yazilandir. `transition:none` SART. Gizleme kurali opacity'ye .5s gecis veriyor; onu birakirsak yazdirma ortamina gecince opacity 0'dan 1'e GECISLE gider. Yazdirma anlik goruntu alir -- gecis surerken alinirsa sayfa yari saydam basilir. Olculdu: gecis acikken ortam degistigi anda opacity hala 0, ancak 900ms sonra 1 oluyordu. */ @media print{ .beliris-var .bolum,.beliris-var .ozellik,.beliris-var .detail-row, .beliris-var .detail-trio,.beliris-var .urun-kuyruk>.container{ opacity:1;transform:none;transition:none} } footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted)} .foot{display:flex;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;align-items:center} .foot-left{display:flex;flex-direction:column;align-items:flex-start;gap:8px} /* Ana sayfaya ozel iki satir. 60ch: altbilgide satir uzunlugu govde metniyle ayni olcude tutulur, yoksa genis ekranda tek satira yayilip okunmaz hale gelirdi. */ .foot-not{max-width:60ch;margin:0;font-size:.9rem;line-height:1.55} .foot-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .foot-gh{display:inline-flex;align-items:center;color:var(--muted)} .foot-gh svg{display:block;width:20px;height:20px} .foot-gh:hover{color:var(--text)} /* Buyutme penceresi halka acik sitedeki TEK uygulama benzeri etkilesim ve hicbir gecisi yoktu: display:none -> grid animasyon almaz, pencere birden beliriyordu. Gorunurluk artik opacity + visibility uzerinden tasiniyor. visibility GECIKMELI kapanir (0s linear .16s): solma bitmeden gizlenirse goruntu yarida kesilir. Acilista gecikme yok, yoksa odak gorunmeyen dugmeye giderdi. pointer-events kapali durumda arkadaki sayfayi serbest birakir, visibility:hidden ekran okuyucudan da cikarir. Kapanis acilistan HIZLI (160ms karsi 240ms): kullanici kapatmaya zaten karar vermistir. Temel durum cikisi tarif eder, .open girisi. */ .lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:28px;background:rgba(0,0,0,var(--lb-ortu-alfa));backdrop-filter:blur(3px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s var(--ease-out),visibility 0s linear .16s} .lightbox.open{opacity:1;visibility:visible;pointer-events:auto; transition:opacity .24s var(--ease-out),visibility 0s} .lightbox img{max-width:min(90vw,440px);max-height:90vh;width:auto;height:auto;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.6); transform:scale(.94);transition:transform .16s var(--ease-out)} .lightbox.open img{transform:none;transition:transform .26s var(--ease-out)} .lightbox-close{position:absolute;top:16px;right:16px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer} .lightbox-close:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))} /* OLUK DA BOYANIR. Ortu `position:fixed; inset:0` -- kapsayicisi gorunum alani, yani AYRILMIS KAYDIRMA OLUGU DISARIDA kaliyor. Sagda 15px'lik bir serit ortunun altindan sayfa zeminini gosteriyordu: acik temada tam boy beyaz bir cizgi. Zen'de yok, cunku orada cubuk ustte yuzuyor (0px). Olculdu: serit tam x=1247..1261, rengi #f5f5f5. ORTUYU GENISLETMEK YANLIS COZUM. `width:100vw` hicbir sey degistirmiyor (o da 1247'ye cozuluyor, olculdu); `right` ile 15px tasirmak ise ortunun merkezini 7.5px kaydirir ve icindeki gorseli tam da az once duzeltilen kadar egri gosterirdi. Onun yerine olugun kendisi, ortunun sayfa uzerindeki BILESIK rengiyle boyaniyor. Yuzde alfadan turetiliyor, elle yazilmiyor: alfa degisirse oluk da kendiliginden uyar. Olculdu: acik temada fark 3/255, koyu temada 0 -- ikisinde de gorunmez. */ html.lb-lock{overflow:hidden; background:color-mix(in srgb,var(--bg) calc(100% * (1 - var(--lb-ortu-alfa))),#000)} code{padding:.12em .36em;border-radius:6px;background:var(--surface-2)} .admin-body{background:var(--bg)} .admin-shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:34px 0 64px} /* --- Panel ust bari --------------------------------------------------- Panel sitenin kapsulunu KOPYALAMAZ, OLDUGU GIBI KULLANIR: header, header nav, .brand, .mark, .links, .theme-toggle -- hepsi yukaridaki site kurallarindan geliyor. Kopyalanmis bir kapsul olsaydi ikisi zamanla ayrisirdi; panele ozel olan yalnizca asagidaki iki sinif. Onceki hal 54px'lik iki satirlik bir basliкti ve tek basina 164px yer kapliyordu: 900px'lik bir ekranda ilk kayit 563. pikselde basliyordu, yani ekranin %63'u icerikten once gidiyordu. */ .panel-etiket{padding:0 6px;color:var(--muted);font-size:.72rem;font-weight:800; letter-spacing:.16em;text-transform:uppercase} /* Ad yerine simge: yazili dugmeler kapsulu sisiriyordu. Erisilebilir ad aria-label'da, fare kullanicisi icin ayni metin title'da. */ .ikon-dugme{position:relative;display:inline-grid;place-items:center; width:38px;height:38px;flex:none;padding:0; border:1px solid var(--line-strong);border-radius:50%; -webkit-tap-highlight-color:transparent; background:var(--surface-2);color:var(--muted);cursor:pointer} /* .theme-toggle ile AYNI DESEN: gorsel kutu 38px kalir, sozde-oge dokunma hedefini 44px'e tasir. Kutuyu buyutmek kapsulu de buyuturdu. Yaricap da daire: kare bir vurus alani, yuvarlak dugmenin kosesinden tasip komsusuna girerdi. */ .ikon-dugme::before{content:"";position:absolute;inset:-3px;border-radius:50%} .ikon-dugme svg{display:block} .ikon-dugme:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))} .ikon-dugme-riskli:hover{color:var(--accent)} /* Sabit sayilar (toplam/aktif/gizli/harici) kart degil, tek satir metin. Kart olarak dururken canli sayilarla ayni gorsel agirligi tasiyorlardi; oysa neredeyse hic degismiyorlar. Kart olarak yalniz "Acilis" ve "Bugun" kaldi. */ .metrics-ozet{margin:0 0 12px;color:var(--muted);font-size:1.02rem} .metrics-ozet b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums} .metrics{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:12px;padding:0 0 18px} .metric{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow),var(--kenar-isigi)} .metric span{display:block;color:var(--muted);font-size:.8rem;font-weight:800;text-transform:uppercase} .metric strong{display:block;margin-top:6px;font-family:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.75rem;line-height:1;letter-spacing:-.01em} .admin-toolbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(220px,1fr) repeat(4,minmax(130px,180px));gap:12px;padding:14px 0;margin-bottom:2px;background:var(--bg);border-bottom:1px solid var(--line)} .admin-field{display:grid;gap:7px} .admin-field span{color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase} .admin-field input,.admin-field select{width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;padding:0 12px} /* SOLDURMA YOK: --muted uzerine %12 saydamlik, acik temada 5.57:1'i 4.29:1'e dusuruyordu (AA esigi 4.5). Yer tutucu metni de metindir. Ayni desen /klinik/'te de vardi ve ayni sekilde kaldirildi. */ .admin-field input::placeholder{color:var(--muted)} /* Ozet kart geliştirmeleri */ .metric-spark{margin-top:10px;height:30px} .metric-spark .spark{width:100%;height:100%} .metric-delta{display:block;margin-top:8px;font-size:.82rem;font-weight:800} .metric-delta.up{color:var(--accent-2)} .metric-delta.down{color:var(--warm)} .metric-delta.flat{color:var(--muted)} /* Durum notu */ .admin-shell .notice{margin:0 0 18px;padding:14px 18px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface)} /* Aksiyon butonlari */ .admin-action{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.84rem;font-weight:800;text-decoration:none;white-space:nowrap;cursor:pointer} .admin-action:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))} .admin-action:disabled{opacity:.62;cursor:not-allowed} .admin-action.primary{background:var(--accent);color:var(--on-accent);border-color:transparent} .admin-action.primary:hover{filter:brightness(1.05)} .admin-action.danger{color:var(--accent)} .admin-action.danger:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line-strong))} /* Link kartlari */ .links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px} .link-card{display:flex;flex-direction:column;gap:9px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow),var(--kenar-isigi);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .link-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 18px 38px rgba(0,0,0,.13)}} .link-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .link-card-slug{font-family:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--accent);text-decoration:none;overflow-wrap:anywhere} .link-card-slug:hover{text-decoration:underline;text-underline-offset:.16em} .link-card-title{margin:0;color:var(--text);font-weight:750} .link-card-target{display:block;padding:3px 0;color:var(--muted);font-size:.9rem;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .link-card-target:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.16em} .link-card-muted{margin:2px 0;color:var(--muted);font-size:.9rem} .link-card-stats{display:flex;align-items:center;gap:14px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)} .card-clicks{display:flex;flex-direction:column;line-height:1.05} .card-clicks strong{font-family:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.6rem;font-variant-numeric:tabular-nums} .card-clicks span{color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase} .card-last{margin-left:auto;color:var(--muted);font-size:.82rem;text-align:right} .spark{display:block;height:30px} .link-card-stats .spark{width:96px;flex:none} .spark-bar{fill:var(--accent)} .spark-bar.zero{fill:var(--line)} .link-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .link-card-actions .admin-action{flex:1;min-width:0} /* Bos durum */ .admin-empty{display:grid;justify-items:center;gap:12px;padding:48px 24px;text-align:center;color:var(--muted)} .admin-empty svg{color:color-mix(in srgb,var(--accent) 55%,var(--muted))} .admin-empty p{margin:0;max-width:360px} /* Ayrinti cekmecesi (drawer) */ .drawer-backdrop{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .16s var(--ease-out)} .drawer-backdrop.open{opacity:1;pointer-events:auto;transition:opacity .25s var(--ease-out)} .drawer{position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(0,0,0,.28);transform:translateX(100%);transition:transform .18s var(--ease-out);overflow-y:auto;overscroll-behavior:contain} .drawer.open{transform:none;transition:transform .28s var(--ease-out)} .drawer-inner{display:flex;flex-direction:column;gap:16px;padding:24px} .drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .drawer-head h2{margin:0;font-size:1.7rem;overflow-wrap:anywhere} .drawer-close{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:1rem;line-height:1;cursor:pointer} .drawer-close:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))} .drawer-meta{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem} .drawer-meta dt{color:var(--muted);font-weight:800} .drawer-meta dd{margin:0;overflow-wrap:anywhere} .drawer-meta dd a{overflow-wrap:anywhere} .stat-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .stat-chip{display:flex;flex-direction:column;gap:2px;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);text-align:center} .stat-chip strong{font-family:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.3rem;font-variant-numeric:tabular-nums} .stat-chip span{color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase} .drawer-actions{display:flex;gap:8px;flex-wrap:wrap} /* Grafikler (drawer icinde) */ .chart-block{margin:0;display:grid;gap:8px;align-content:start} .chart-block figcaption{color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase} .chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .chart-select{min-height:32px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.8rem;font-weight:700;text-transform:none;padding:0 8px;cursor:pointer} .chart{display:block;width:100%;height:auto} .chart-bar{fill:var(--accent)} .chart-bar.zero{fill:var(--line)} .chart-label{fill:var(--muted);font-size:10px;font-weight:700} /* Toast */ .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);z-index:70;padding:12px 20px;border-radius:12px;background:var(--text);color:var(--bg);font-weight:800;box-shadow:0 18px 40px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .state-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .state{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.8rem;font-weight:800} .state.on{color:var(--accent-2)} .state.hidden{color:var(--warm)} .state.locked{color:var(--accent)} .link-target{margin:24px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-weight:800;overflow-wrap:anywhere;max-width:640px} .notice-warn{display:flex;gap:12px;align-items:flex-start;max-width:640px;margin:18px 0 0} .notice-warn svg{flex:none;width:22px;height:22px;margin-top:3px;color:var(--warm)} .notice-warn p{margin:0;color:var(--muted)} .notice-warn strong{color:var(--text)} .password-form{display:grid;gap:10px;max-width:420px;margin-top:26px} .password-label{color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase} .password-input{width:100%;min-height:46px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;padding:0 52px 0 12px} /* Edge parola kutularina kendi "goster" gozunu basar (::-ms-reveal); kendi dugmemizle birlikte yan yana iki simge cikardi. */ .password-input::-ms-reveal,.password-input::-ms-clear{display:none} .password-box{position:relative;display:block} /* Simge 20px gorunur ama dokunma hedefi 46x46: parmakla isabet ettirilebilsin. */ .password-toggle{position:absolute;top:0;right:0;display:grid;place-items:center;width:46px;height:100%;min-height:46px;padding:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:0 10px 10px 0} .password-toggle:hover{color:var(--text)} .password-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:10px} .password-toggle svg{width:20px;height:20px;pointer-events:none} .password-toggle .p-gizle{display:none} .password-toggle[aria-pressed="true"] .p-goster{display:none} .password-toggle[aria-pressed="true"] .p-gizle{display:block} .form-error{margin:0;color:var(--accent);font-weight:700} .password-form .actions{margin-top:10px} /* --- Servis ve hata sayfalari ------------------------------------------- 404, 410, 500, 503, dis baglanti uyarisi, parola kapisi, yonlendirme: yedi yuzey, tek iskelet. Hepsinin isi ayni -- ne oldugunu soyle, bir cikis yolu ver. Kart ve panel yok; ayrimi kilcal cizgi yapiyor. Iki kademe var ve fark BILEREK: sayisal durum kodu olan sayfalar kodu Sekuya ile buyuk gosterir (bir sey ters gitti), otekiler kucuk duz bir etiket tasir (dikkatini istiyoruz ama hata yok). Etiketler isaretlemede zaten BUYUK HARF yazili, text-transform yok: Turkce'de "Dis" -> "DIS" donusumu i/I ayrimina takiliyor, harfleri elle yazmak bu riski tamamen kaldiriyor. min-height/dikey ortalama YOK: body flex kolon ve main{flex:1}, yani altbilgi kisa sayfada zaten dibe iniyor. */ .servis{padding:9vh 0 8vh} .servis-kod{display:block;margin:0 0 4px;font-family:'Sekuya',system-ui,-apple-system,"Segoe UI",sans-serif; font-size:clamp(3.2rem,11vw,5.6rem);line-height:.92;font-weight:400;letter-spacing:-.02em;color:var(--accent)} .servis-etiket{display:block;margin:0 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.18em;color:var(--muted)} .servis h1{max-width:20ch;margin:0 0 16px} .servis .lead{max-width:58ch} .servis-yollar{margin:36px 0 0;padding:0;list-style:none;max-width:520px} .servis-yollar li{border-top:1px solid var(--line)} .servis-yollar li:last-child{border-bottom:1px solid var(--line)} /* Tek satir kaldi (bkz. src/pages/404.html). Alt aciklama kalkinca `.servis-yollar span` kurali hicbir ogeyle eslesmiyordu ve kontrast kapsam kapisi bunu hata sayar -- renk bildiren her kural bir ogeye dusmeli. Kural da satirla birlikte silindi; izgara yerine blok yeterli, ustuste dizilecek ikinci bir sey yok. */ .servis-yollar a{display:block;padding:15px 0;color:var(--text);font-weight:750;text-decoration:none} .servis-yollar a:hover{color:var(--accent)} @media(max-width:1000px){ .detail-trio{grid-template-columns:1fr 1fr;gap:20px 16px;padding:26px 0;justify-items:center} .detail-trio .detail-text{grid-column:1/-1;order:-1;justify-self:stretch} .detail-trio .device{width:min(190px,42vw)} } @media(max-width:860px){ /* .container.wide ozgullukte (0,2,0), duz .container (0,1,0): asagidaki daraltmalar `wide` kaplara HIC islemiyordu. Ikisi de yazilmali. */ .container{width:min(720px,calc(100% - 32px))} .container.wide{width:min(760px,calc(100% - 32px))} .hero{padding:56px 0 34px} .device{width:min(232px,64vw)} /* Hero tek kolona duser; telefon metnin ALTINA gecer, cunku dar ekranda once ne yaptigi okunmali. Simge de kuculur: 88px, mobil h1'in yaninda (clamp tabani 1.9rem) basligi eziyordu. */ .hero-izgara{grid-template-columns:1fr;gap:34px;justify-items:start} .hero-satir{gap:18px;margin:0 0 20px} .urun-simge{width:64px;height:64px} .detail-row,.detail-row.flip{grid-template-columns:1fr;gap:24px;justify-items:start;padding:26px 0} .detail-row.flip .detail-media{order:0} .admin-toolbar{grid-template-columns:1fr 1fr} .admin-field:first-child{grid-column:1/-1} } @media(max-width:760px){ /* Ozgullugu base kuralla ayni tutuyoruz: duz `nav` artik `header nav`e yenilir. */ /* Yatay padding govdenin oluguyla ayni: kapsul genislik sinirini header'dan aliyor, sifirlanirsa ekranin iki kenarina yapisir. */ header{padding:11px 16px 5px} header nav{min-height:52px;padding:5px 8px 5px 12px;gap:12px;align-items:center;flex-direction:row} .brand{width:max-content;justify-content:flex-start} .mark{width:36px;height:36px} .links{display:flex;width:auto;gap:8px;flex-wrap:nowrap} .links a{min-height:38px;justify-content:center;padding:0 8px;border:0;background:transparent;font-size:.9rem;text-align:center} .hero{padding:34px 0 20px} h1{font-size:clamp(2rem,10vw,2.8rem);line-height:1.1;letter-spacing:.015em} /* Bu satir olmadan urun kahramani telefonda 41.6px'te takili kaliyordu: `.urun-tepe h1` (0,1,1) yukaridaki duz `h1`i (0,0,1) yeniyor, yani mobil boyut kuralini HIC gormuyordu. Ayni ozgullukte ve daha sonra yazildigi icin burasi kazanir. */ .urun-tepe h1{font-size:clamp(1.9rem,8.6vw,3.1rem);line-height:1.05;letter-spacing:.01em} h2{font-size:clamp(1.42rem,6vw,1.95rem)} h3{font-size:1.08rem} .bolum-basi{padding-top:34px} .kanit-soz{font-size:clamp(1.45rem,7vw,2.2rem)} .kanit{padding:28px 0} .ozellik{padding:18px 0} .ozellik::before{top:18px;bottom:18px} .duz-liste li{padding-left:18px} .duz-liste li::before{top:20px} .hero p,.lead{font-size:1rem;line-height:1.58} .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px} .btn{width:100%;min-height:44px;padding:0 14px} section{padding:20px 0 40px} .foot{flex-direction:column} .admin-shell{width:min(720px,calc(100% - 28px));padding:22px 0 46px} .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .metric{padding:12px 13px} .metric strong{font-size:1.5rem} .admin-toolbar{grid-template-columns:1fr 1fr;gap:10px} .links-grid{grid-template-columns:1fr} .admin-action{min-height:44px} .drawer-inner{padding:20px} } @media(max-width:560px){ /* Izin satiri dar ekranda alt alta: kod adlari (READ/WRITE_HYDRATION) nowrap tasidigi icin yan yana sigmiyordu. */ .izin-listesi li{flex-direction:column;align-items:flex-start;gap:2px} .izin-listesi code{white-space:normal} } @media(max-width:430px){ .metrics{grid-template-columns:1fr 1fr} /* Tek kolonda bes filtre ~400px yukseklige ulasiyor; sticky kalirsa telefonda icerigi kapatiyor (PANEL-02). */ .admin-toolbar{grid-template-columns:1fr;position:static} .stat-chips{grid-template-columns:repeat(2,1fr)} } @media(max-width:380px){ .container,.container.wide{width:calc(100% - 28px)} header{padding:8px 14px} .links{gap:6px} .links a{font-size:.82rem;padding:0 4px} /* Dugmenin kendi olcusu zaten 38px; `.links .theme-toggle` (0,2,0) ezmeleri kaldirildi -- ayni degeri uc yerde tekrarlamak, biri degistiginde otekilerin sessizce ayrismasi demekti. */ .actions{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .link-card,.drawer,.drawer-backdrop,.toast{transition:none} .link-card:hover{transform:none} /* .open varyantlari AYRICA yazilmali: .drawer.open (0,2,0) ozgullukte .drawer'i (0,1,0) yener, yalniz .drawer'i notrlestirmek yetmez. */ .drawer.open,.drawer-backdrop.open{transition:none} /* Basma geri bildirimi KALIR, yalniz OLCEK gider: kenarlik ve renk degisimi hareketsiz bir "duydum" sinyali olarak yeterli. Azaltilmis hareket "geri bildirim yok" demek degil, "hareket yok" demek. */ .btn,.admin-action,.theme-toggle,.lightbox-close,.drawer-close,.chart-select, .link-card{transition:box-shadow .2s linear,border-color .2s linear} .btn:active,.admin-action:active,.theme-toggle:active,.lightbox-close:active, .drawer-close:active,.chart-select:active, .link-card:active{transform:none} /* Topuz YERINI DEGISTIRIR, hareketi kaldirilir: transform:none yazilamaz, yoksa koyu temada topuz sola atlar ve anahtar yanlis durumu gosterir. Kaldirilan sey gecis, konum degil. */ .tt-yuva{transition:none} /* .open varyantlari yine AYRICA yazildi: .lightbox.open (0,2,0) ozgullukte .lightbox'i (0,1,0) yener. Gorunurluk aninda doner, gorsel olceklenmez; pencere yine acilir, yalnizca hareketsiz acilir. */ .lightbox,.lightbox.open{transition:none} .lightbox img,.lightbox.open img{transform:none;transition:none} /* Tema dairesi zaten betikten kapali (startViewTransition hic cagrilmaz, tema aninda doner). Kural CSS'in kendi basina da dogru olmasi icin duruyor: daire yalniz no-preference blogunda taniniyor, burada acikca sifirlaniyor. Ikisi birden olmasa efekt tercihi olan kullaniciya baska bir yoldan sizardi. */ ::view-transition-old(root),::view-transition-new(root){animation:none} }