/* ══════════════════════════════════════════════════════════════════════════════════ V7 · ÇOK-SAYFA ORTAK TASARIM SİSTEMİ — KOPAR DANIŞMANLIK ───────────────────────────────────────────────────────────────────────────────── NEDEN BU DOSYA VAR (sözleşme §15): V4 tek sayfaydı; çarklar çapaya gidiyor, ziyaretçi "koşa koşa" kaydırıyordu (AKK göz-testi 08-15, bulgu ①). V7'de her çark KENDİ sayfasına gider. Sekiz sayfa TEK dilden beslensin diye stil burada TEK kopya durur — sayfalara kopyalanmaz (çatallanan CSS = ikiz kimlik; sözleşme §14-2 "tek tasarım dili"). DİL (sözleşme §1-B yürürlük paleti — DEĞİŞMEDİ): sıcak siyah #0A0A0A · tek sinyal #FF4D1C · pano #0E0E0E · kat #121212 · Inter (yapı) + Lora (YALNIZ serif vurgu). Kağıt/beyaz kesit YOK (AKK 08-15 reddi). Ritim ekseni artık ZEMİN değil YOĞUNLUK: sessiz nesir ↔ yükseltilmiş pano. V4'TEN NE DÜŞTÜ: scroll-snap (`.kaydir`, `.sayfa{min-height:100vh}`), omurga şeridi ve bölüm-bazlı fold sıkıştırma yamaları (#s3/#s5/#s8/#s9 ...). Sebep: tek-sayfada her bölüm tek ekrana sığmak zorundaydı; çok-sayfada sayfa BELGEDİR, kaydırma doğaldır — yamalar ölü kural olurdu (ölü CSS bırakmak gecekondu sayılır). ══════════════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Inter";src:url("../../assets/font/Inter-var.woff2")format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"Lora";src:url("../../assets/font/Lora-var.woff2")format("woff2");font-weight:400 700;font-display:swap} :root{ /* YÜZEY MERDİVENİ (dalga-1, 08-20): kat/pano/hat bir tık aydınlandı + gri ikiye ayrıldı — düz tek-zemin yerine üç kademeli derinlik hissi (siyah taban < kat < pano, aynı sırayla hat/gri). */ --siyah:#0A0A0A; --kat:#17181B; --pano:#131417; --beyaz:#FFFFFF; --gri:#9A9A9A; --gri2:#B8B8B8; --hat:#2E3138; --sinyal:#FF4D1C; --panel-metin:#B8B8B8; --panel-ikincil:#8E8E8E; --panel-hat:#3A3A3A; --r-nokta:999px; --r-kesik:3px; /* iki yuvarlaklık ölçeği: tam-yuvarlak ↔ keskin */ --yan:clamp(22px,7vw,120px); /* sayfa yan payı — bar ve gövde AYNI paydan hizalanır */ } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--siyah);color:var(--beyaz);font-family:"Inter",system-ui,sans-serif; font-size:17px;line-height:1.6} h1,h2{font-weight:850;letter-spacing:-.035em;line-height:.98} h3{font-weight:700;letter-spacing:-.01em} .serif{font-family:"Lora",Georgia,serif;font-weight:400} strong{color:var(--beyaz)} :focus-visible{outline:1px solid var(--sinyal);outline-offset:3px} /* SAYFA GEÇİŞİ — belgeler arası yumuşak geçiş (destekleyen tarayıcıda; diğerinde sessizce yok) */ @view-transition{navigation:auto} /* ══ ÜST BAR — her sayfada aynı: mini çark (hub'a dönüş) + marka + yedi kapı ══ Mini çark dekor değil NAVİGASYON: karşılama ekranındaki mekanizmanın küçük hâli, tıklanınca ziyaretçi çark takımına döner. "Buradan geldim" hattı her sayfada görünür kalır. */ .ust{position:sticky;top:0;z-index:20;background:var(--siyah);border-bottom:1px solid var(--hat); display:flex;align-items:center;gap:18px;padding:11px var(--yan)} .ust-marka{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none} /* ÖLÇÜ (§16.5, AKK 08-18): masaüstü logo 38px (web başlık standardı 32-48px; 26px zayıftı), mini çark 32px — çark logonun x-yüksekliğiyle hizalı kalsın diye logodan bir tık küçük. Dar ekranda (≤900) 30/26'ya iner: menü zaten alt satıra geçtiği için üst bar iki kat büyümesin. */ .mini-cark{width:32px;height:32px;display:block;flex:none} .mini-cark .mdisler{stroke:#5C5C5C;stroke-width:2.6;fill:none} .mini-cark .mdis{fill:#141414;stroke:#5C5C5C;stroke-width:1.4} .mini-cark .mgobek{fill:var(--pano);stroke:var(--panel-hat);stroke-width:1.4} .ust-marka:hover .mdis,.ust-marka:focus-visible .mdis, .ust-marka:hover .mdisler,.ust-marka:focus-visible .mdisler{stroke:var(--sinyal)} .marka-logo{height:38px;width:auto;display:block} .ust-menu{display:flex;gap:22px;align-items:center;margin-left:auto;flex-wrap:wrap} /* ══ NAV TİPOGRAFİSİ — .ust-menu a + .nav-cta AYNI KURAL BLOĞUNDA (v7.3 kök-fix, AKK canlıda mor+altçizgili "ham link" gördü). Neden birleşik: .nav-cta önceden AYRI blokta kopya değerlerle tanımlıydı (font-size/letter-spacing/color kopyası) — CSS gecikmeli yüklenirse/eski önbellek sunulursa `.nav-cta` seçicisi hiç eşleşmez, tarayıcı varsayılan link stiline (mavi/mor+altçizgili) düşerdi. Şimdi TEK seçici-listesi = tek doğruluk kaynağı; ayrışık render imkânsız (ya hep ya hiç). `:visited` AÇIKÇA yazılır — UA'nın "ziyaret edilmiş=mor" varsayılanı bir daha görünmesin. */ .ust-menu a,.nav-cta{color:var(--gri);text-decoration:none;font-size:.7rem;letter-spacing:.18em; white-space:nowrap;padding-bottom:2px;border-bottom:1px solid transparent} .ust-menu a:visited,.nav-cta:visited{color:var(--gri)} .ust-menu a:hover,.ust-menu a:focus-visible, .nav-cta:hover,.nav-cta:focus-visible{color:var(--beyaz);border-bottom-color:var(--sinyal);outline:none} .ust-menu a[aria-current="page"]{color:var(--beyaz);border-bottom-color:var(--sinyal)} @media(max-width:900px){ .ust{gap:12px;padding:9px 16px;flex-wrap:wrap} .marka-logo{height:30px} .mini-cark{width:26px;height:26px} .ust-menu{gap:11px;margin-left:0;width:100%} .ust-menu a,.nav-cta{font-size:.6rem;letter-spacing:.06em} .nav-cta{padding-left:12px;margin-left:0} } /* ══ BİRİNCİL CTA — tek dolu-beyaz düğme, sitenin tek "asıl eylem" işareti (dalga-1) ══ Üst barda (nav sağı) + her sayfanın "SIRADAKİ DURAK" kapanışında kullanılır. İkincil linkler (hub-bag, raf-bag, raf-cta …) eski ince alt-çizgili dilde KALIR — ayrım bilinçli. */ .cta-birincil{display:inline-block;background:var(--beyaz);color:var(--siyah);text-decoration:none; padding:14px 28px;border-radius:var(--r-kesik);font-weight:800;font-size:.86rem;letter-spacing:.08em; white-space:nowrap;border:0} .cta-birincil:visited{color:var(--siyah)} .cta-birincil:hover,.cta-birincil:focus-visible{background:var(--sinyal);color:var(--beyaz);outline:none} /* ══ NAV-CTA (v7.2, AKK RED② düzeltmesi; v7.3'te tipografi yukarıdaki ortak bloğa taşındı) — dolu düğme sekme sanılıyordu + nav'la font uyumsuzdu. Artık nav-dilinin BİREBİR AYNISI (yukarıdaki ortak seçici üretir) — kutu/dolgu YOK, yalnız ince sol ayraçla nav-linklerden ayrışır. "Eylem" olduğu tek işareti: ok karakteri turuncu. Sekme DEĞİL — aria-current mantığına girmez, K15 nav-tutarlılık taramasına da girmez (nav'ın DIŞINDA duruyor, önceki dolu-CTA'yla aynı DOM konumu). Burada SADECE .nav-cta'ya ÖZGÜ yerleşim kalır (tipografi değil). */ .nav-cta{display:inline-flex;align-items:center;flex:none; padding:2px 0 2px 18px;margin-left:4px;border-left:1px solid var(--hat)} .nav-cta .ok{color:var(--sinyal);margin-left:.4em} /* ══ GÖVDE — sayfa BELGEDİR: tek konu, doğal kaydırma, blok aralığı nefes alır ══ */ main{padding:0 var(--yan) 0} /* çapaya atlarken yapışkan üst bar başlığı örtmesin (bar ~61px; 84 = bar + nefes payı) */ section[id]{scroll-margin-top:84px} .blok{max-width:1240px;padding:52px 0;border-bottom:1px solid var(--hat);position:relative} .blok.dar{max-width:820px} .blok.genis{max-width:none} .blok:last-of-type{border-bottom:0} /* ══ BÖLÜM-ZEMİN BANDI (dalga-1) — ardışık bölümler dönüşümlü zeminle nefes alır ══ Bant TAM genişlik: `.blok`in kendi kutusu (max-width'le sınırlı) hiç değişmez, yalnız bir ::before viewport-genişliğinde ARKA KATMAN açar (klasik "breakout" hilesi: kendi kutusunun %50'sinden viewport'un %50'sine göre konumlanır → ebeveynin ne kadar kaydırılmış olduğu önemsizleşir). İçerik hizası, grid'ler, max-width'ler bu bandı hiç hissetmez. */ .blok:nth-of-type(even)::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw; margin-left:-50vw;background:var(--pano);z-index:-1} /* KAÇIŞ SINIFI — bir bölümün kendi içeriği (ör. zaten --pano tonlu bir panoyla dolu) bantla çakışıyorsa `blok--duz` eklenir, band o bölümde iptal olur. */ .blok--duz::before{display:none} /* ══ DURAK/ETİKET VURGUSU (AKK 08-20 gez-notu, sistemik): "DURAK 01 · SEKTÖR ANALİZİ" tipi numaralı bölüm-etiketleri site genelinde zayıftı. `.no` (bölüm kickeri, 32 kullanım/8 sayfa) + `.durak-k .kod` (kart kickeri, 15 kullanım — DURAK/HALKA/TESLİM) AYNI aileye alındı: punto +~%40, ağırlık arttı, numara (``) turuncu KALDI, ad kısmı gri'den beyaz-güçlüye çıktı, üstüne `.im` ailesinin kısa turuncu tire-çizgi diliyle (22×2px) hizalandı (bkz. `.alan .im`/`.im`). `.alan .kod`/`.modul .kod`/`.alan-panel-ic .kod` BİLEREK dışarıda: 1px-gap grid hücreleri (TASARIM_NOTU §3 "hücre-denetimli" uyarısı) — numara/ad ayrımı da yok, tek düz kısa kod. */ /* `display:flex` BİLEREK YOK (ilk denemede kırıldı, 08-20): `.no` bazı sayfalarda `.say` sayaç span'i gibi GERÇEK ELEMENT çocuk barındırıyor (PROGRAM 02 — "· 204 SLAYT") — flex konteynerde HER doğrudan eleman çocuğu ayrı flex item olur (bitişik metin gibi TEK kutuya birleşmez), `flex-wrap` olmadan satır taşması, `wrap` ile de kelime kelime çirkin kırılma verdi. Güvenli desen: `.no` DÜZ BLOK kalır (doğal metin akışı/sarması bozulmaz), tire `::before` INLINE-BLOCK ilk "kelime" gibi eklenir — sarma tamamen normal paragraf davranışı. */ .no{font-size:1rem;letter-spacing:.14em;color:var(--beyaz);font-weight:700;margin-bottom:16px} .no::before{content:"";display:inline-block;width:22px;height:2px;background:var(--sinyal); margin-right:11px;vertical-align:.14em} .no b{color:var(--sinyal);font-weight:800;white-space:nowrap} h1{font-size:clamp(2.1rem,6.6vw,4.6rem);max-width:19ch;text-wrap:balance} h1 span{color:var(--sinyal)} h2{font-size:clamp(1.5rem,4.2vw,2.9rem);margin-bottom:14px;max-width:22ch} h2.genis-bas{max-width:28ch} .girizgah{color:var(--gri);max-width:64ch;margin-bottom:24px;font-size:1.02rem} .girizgah.iri{font-size:clamp(1rem,2vw,1.24rem);color:#D2D2D2;max-width:58ch} /* sayfa başı: künye + başlık + giriş nesri (her sayfanın ilk bloğu) */ .giris{padding-top:60px} .giris .alt{margin-top:22px;font-size:clamp(1rem,2vw,1.26rem);color:var(--gri);max-width:56ch} /* ══ SIRADAKİ DURAK — sayfa sonu tek yön: ziyaretçi asla çıkmaz sokakta kalmaz ══ */ .sonraki{max-width:1240px;margin-top:6px;padding:26px 0 34px;border-top:1px solid var(--hat); display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .sonraki .et{font-size:.7rem;letter-spacing:.2em;color:var(--panel-ikincil)} .sonraki a{color:var(--beyaz);text-decoration:none;font-weight:800;letter-spacing:-.01em; font-size:clamp(1.05rem,2.4vw,1.5rem);border-bottom:1px solid var(--hat);padding-bottom:4px} .sonraki a:hover,.sonraki a:focus-visible{color:var(--sinyal);border-bottom-color:var(--sinyal);outline:none} /* sayfa-kapanış linki artık BİRİNCİL CTA düğmesi (dalga-1) — üstteki `.sonraki a` metin-link kuralını iki-sınıf özgüllüğüyle ezer. KÖK-FİX (r2, göz-denetimi bulgusu): `color` burada da AÇIKÇA yazılmalı — yazılmazsa `.sonraki a{color:var(--beyaz)}` (0,1,1) çıplak `.cta-birincil` (0,1,0)'ı ezer ve düğme beyaz-üstü-beyaz basar (WCAG ihlali, metin görünmez). Aynı sebep hover'da da geçerliydi (`.sonraki a:hover{color:var(--sinyal)}` turuncu-üstü-turuncu yapardı). */ .sonraki .cta-birincil{border-bottom:0;padding:14px 28px;font-size:.86rem;letter-spacing:.08em; color:var(--siyah)} .sonraki .cta-birincil:hover,.sonraki .cta-birincil:focus-visible{border-bottom:0;color:var(--beyaz)} /* ⚠️ MOBİL YATAY-TAŞMA FİKSİ (v7.3 QC bulgusu, C1-C3'ten BAĞIMSIZ ön-var-olan kusur): temel `.cta-birincil{white-space:nowrap}` masaüstünde doğru (tek-satır pil düğme) ama uzun "sonraki durak" başlıkları (ör. "Danışmanlık paketi — rapor değil, çalışan sistem →", 51 karakter) 390px ekranda düğmeyi viewport'tan taşırıyordu (ölçüldü: raporlar 140px, egitim 92px, kanit 11px yatay taşma). Yalnız bu bağlamda nowrap kaldırılır — düğme iki satıra sarar, taşma sıfırlanır. */ @media(max-width:480px){ .sonraki .cta-birincil{white-space:normal;text-align:center;max-width:100%} } footer{max-width:1240px;color:var(--gri2);font-size:.73rem;letter-spacing:.06em;padding:0 0 40px; display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} footer a{color:var(--gri2)} /* ══ HEKSAGON ÖRGÜ ZEMİN — altı sütun geometrisinin yankısı (kod-SVG, bitmap yok) ══ */ .orgu{position:absolute;inset:0;pointer-events:none;opacity:.48;z-index:0; -webkit-mask-image:radial-gradient(80% 70% at 30% 45%,#000 0%,transparent 78%); mask-image:radial-gradient(80% 70% at 30% 45%,#000 0%,transparent 78%)} .giris{position:relative} .giris > *:not(.orgu){position:relative;z-index:1} /* ══ ATMOSFER KATMANI (dalga-1) — kahraman bölümlere fısıltı-seviyeli lacivert ışıma ══ Marka laciverti (#0B2545 ailesi) siteye böyle giriyor: büyük, düşük-opaklık, sayfanın SAĞ-ÜSTÜNDEN gelen radyal ışık. `::before` DOM'da `.orgu`dan da önce sayıldığı için (ilk-çocuk muadili) z-index eşitliğinde EN ALTA çizilir — heksagon doku üstünde, metin altında kalır. */ /* KÖK-FİX (r2, göz-denetimi bulgusu): `.giris` çoğu sayfada `.blok.dar` (820px) — ışımanın 1200px'lik yatay yarı-ekseni bu dar kutuda TAMAMEN sönemeden kutunun kendi kenarına çarpıp kırpılıyordu (dikdörtgen dikiş). `inset:0` yerine bant bileşeniyle AYNI viewport-göreli breakout (`left:50%;width:100vw;margin-left:-50vw`) + kutudan bağımsız sabit yükseklik: ışıma artık kendi kutusunun sınırından değil, gerçekten şeffafa sönerek biter — hiçbir kenarda kesik görünmez. (index.html v7.2'de v7.0 kompozisyonuna döndü — hub'da bu atmosfer katmanı yok, AKK RED① "anasayfa sıkıştı" kararı; bu not yalnız `.giris` kullanan 7 sayfa için geçerli.) */ .giris::before{content:"";position:absolute;left:50%;top:0;width:100vw;height:640px; margin-left:-50vw;z-index:0;pointer-events:none; background:radial-gradient(1200px 600px at 70% -10%, rgba(11,37,69,.35), transparent 60%)} /* ══ PANO — yükseltilmiş enstrüman yüzeyi (kağıt kesitin yerine geçen yoğunluk ekseni) ══ */ .pano{background:var(--pano);border:1px solid var(--hat);padding:20px 26px 18px;margin-top:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5)} .pano-bas{display:flex;justify-content:space-between;align-items:baseline;gap:18px; padding-bottom:12px;border-bottom:1px solid var(--hat)} .pano-bas .etiket{font-size:.7rem;letter-spacing:.22em;color:var(--panel-ikincil)} .pano-bas .olcek{font-size:.68rem;letter-spacing:.08em;color:#7E7E7E} .numune{background:#141414} .numune-im{display:block;text-align:right;margin-top:6px;font-size:.6rem;letter-spacing:.14em;color:#7E7E7E} .dipnot{margin-top:26px;color:var(--gri2);font-size:.84rem;max-width:66ch} .teslim-satir{margin-top:19px;border-top:1px solid var(--hat);padding-top:12px; font-size:.78rem;letter-spacing:.12em;color:var(--gri2)} .teslim-satir b{color:var(--sinyal);font-weight:700} .raf-bag{color:#7E7E7E;letter-spacing:.1em;text-decoration:none;border-bottom:1px solid #2E2E2E} .raf-bag:hover,.raf-bag:focus-visible{color:var(--sinyal);border-bottom-color:var(--sinyal);outline:none} /* sayaç: rakam görünürken 0→hedef sayar; tabular-nums + sabit genişlik → satır kaymaz (CLS 0) */ .say{display:inline-block;text-align:right;font-variant-numeric:tabular-nums;min-width:var(--sw,1.4ch)} /* ══ ÜRÜN ÇİPLERİ — rafa giden kapı (sıfat rozeti değil) ══ */ .cipler{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} .cip{border:1px solid var(--hat);border-radius:var(--r-kesik);padding:9px 15px;font-size:.74rem; letter-spacing:.1em;color:var(--gri);text-decoration:none;display:inline-flex;align-items:center;gap:9px} .cip::after{content:"→";color:#5C5C5C} .cip:hover,.cip:focus-visible{border-color:var(--sinyal);color:var(--beyaz);outline:none} .cip:hover::after,.cip:focus-visible::after{color:var(--sinyal)} /* ══ ALTI SÜTUN ÇERÇEVESİ ══ */ .alanlar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hat);border:1px solid var(--hat)} @media(max-width:980px){.alanlar{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.alanlar{grid-template-columns:1fr}} .alan{background:var(--siyah);padding:24px 22px} .alan .kod{font-size:.7rem;letter-spacing:.22em;color:var(--gri2)} .alan h3{font-size:1.24rem;margin:8px 0 10px} .alan p{font-size:.95rem;color:var(--gri);font-family:"Lora",Georgia,serif} .alan .im{width:22px;height:2px;background:var(--sinyal);margin-bottom:16px} .ai-bant{margin-top:1px;background:var(--kat);border:1px solid var(--hat);padding:18px 22px; display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5)} .ai-bant .etiket{font-size:.72rem;letter-spacing:.22em;color:var(--sinyal)} .ai-bant p{color:var(--gri);font-family:"Lora",Georgia,serif;font-size:1rem;max-width:64ch} @media(max-width:600px){.ai-bant{grid-template-columns:1fr;gap:10px}} /* ══ DURAK KARTLARI (süreç sayfası) — altı durak, her biri teslimle kapanır ══ */ /* ⚠️ auto-fit YASAK burada (görsel denetim 08-15): 6 kart 4 sütuna düşünce 2 BOŞ hücre kalıyor ve ızgara zemini gri kutu gibi görünüyordu. Sabit 3 sütun → 6 kart tam iki satır, boşluk yok. */ .duraklar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--hat);border:1px solid var(--hat)} @media(max-width:980px){.duraklar{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.duraklar{grid-template-columns:1fr}} .durak-k{background:var(--siyah);padding:20px 20px 22px;display:flex;flex-direction:column;gap:7px} /* durak kartı da GÖRSELLİ (AKK 08-15): kartın kendi şeması film kartıyla AYNI çizim dilinde (`.film-sema` sınıfı paylaşılır) — ayrı bir görsel dil doğmasın diye. Şerit değil kart: aynı altı içeriği bir de şerit olarak koymak kopya olurdu. */ .durak-k .film-sema{width:58px;height:58px;margin-bottom:4px} .durak-k .kod{font-size:.95rem;letter-spacing:.08em;color:var(--beyaz);font-weight:700;display:block} .durak-k .kod::before{content:"";display:inline-block;width:22px;height:2px;background:var(--sinyal); margin-right:11px;vertical-align:.14em} .durak-k .kod b{color:var(--sinyal);font-weight:800;white-space:nowrap} .durak-k h3{font-size:1.06rem} .durak-k p{font-size:.9rem;color:var(--gri);line-height:1.5} .durak-k .teslim{margin-top:auto;padding-top:10px;border-top:1px solid #1E1E1E;font-size:.71rem; letter-spacing:.1em;color:var(--gri2)} .durak-k .teslim b{color:var(--sinyal);font-weight:700} /* TEK-YER İŞARET SATIRI (§16.7, AKK 08-18): her durağın detayı TEK yerde durur, kart o yeri açıkça işaret eder. Altı kartın HEPSİNDE bulunur — kimi "bu sayfada ↓", kimi "→ ürün sayfası"; boş bırakılan durak yok, çünkü sessiz kural kural değildir. */ .durak-k .detay{margin-top:7px;font-size:.68rem;letter-spacing:.1em} /* ══ ÜÇ KUTU (kapsam / izlenebilirlik / kıyaslanabilirlik) ══ */ .rapor{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:20px} .rapor .kutu{border:1px solid var(--hat);padding:22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5)} .rapor h3{font-size:1rem;margin-bottom:8px} .rapor p{color:var(--gri);font-size:.92rem} /* ══ RAKAM ŞERİDİ (dalga-1) — sitede ZATEN yazılı sayılar, tek bakışta ══ Kaynak: kanit.html "ÇALIŞMA SİCİLİ" (6+ yıl · 5-6 firma · 11 departman) + raporlar.html "RAPORLARIN KENDİSİ" (72 sayfa · 51 sayfa). Yeni rakam UYDURULMAZ (A35) — bu bileşen yalnız var olan sayıyı görsel öne çıkarır. auto-fit: 3 kalemde 3 geniş sütun, 5 kalemde 5 sütun. */ .rakam-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--hat);border:1px solid var(--hat);margin-top:22px} .rakam-serit .rk{background:var(--siyah);padding:20px 18px;display:flex;flex-direction:column;gap:6px} .rakam-serit .rk .r{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:850;letter-spacing:-.03em; color:var(--sinyal);line-height:1;font-variant-numeric:tabular-nums} .rakam-serit .rk .e{font-size:.68rem;letter-spacing:.14em;color:var(--panel-ikincil)} @media(max-width:600px){.rakam-serit{grid-template-columns:repeat(2,1fr)}} /* ══ ANALİZ KATMANLARI — her katman NE ÜRETTİĞİNİ söyler ══ */ .katman{margin-top:18px} .kat-satir{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center; padding:15px 20px;border:1px solid var(--hat);border-bottom:0;background:var(--pano)} .kat-satir:last-child{border-bottom:1px solid var(--hat)} .kat-satir .kat-ad{font-size:.86rem;font-weight:800;letter-spacing:.18em;color:var(--panel-metin)} .kat-satir .kat-not{font-size:.93rem;color:var(--gri)} .kat-satir.sonuc{background:#141414} .kat-satir.sonuc .kat-ad{color:var(--sinyal)} .kat-satir.sonuc .kat-not{color:#D2D2D2} @media(max-width:720px){.kat-satir{grid-template-columns:1fr;gap:6px}} /* ══ MİZAN CETVELİ — grafik ARGÜMAN taşır: turuncu satır = açık veren hesap ══ v7.3 (C2, AKK): satır yüksekliği ~2× (padding 12→24, skala 16→30, dolgu/nokta büyüdü) + dolgu çubuğu artık DÜZ RENK değil GRADYAN — kapalı satır gri-merdiven (--hat→--gri2, "ilerleme" hissi), açık (vurgu) satır --sinyal ailesi gradyan. ⚠️ RENKLİ box-shadow BİLEREK YOK (tasarim_kapisi.py K9 "gölge nötr" kuralı — glow hissi burada DOYGUN RENKLİ GÖLGE değil metin text-shadow + gradyan-dolgunun kendisiyle taşınır; gölgeler nötr siyah kalır). */ .mizan{margin-top:4px} .mizan-satir{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) 54px 92px; gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid #1E1E1E} .mizan-satir .ad{font-weight:700;letter-spacing:.04em;font-size:.94rem;color:var(--panel-metin);white-space:nowrap} .mizan-satir.acik .ad{color:var(--beyaz)} .mizan-satir .skala{position:relative;height:30px} .mizan-satir .skala i{position:absolute;top:13px;left:0;right:0;height:4px;background:#242424;border-radius:2px} .mizan-satir .skala s{position:absolute;top:12px;left:0;height:6px;border-radius:3px;text-decoration:none; background:linear-gradient(90deg, var(--hat), #6C6C6C 55%, var(--gri2))} .mizan-satir.acik .skala s{background:linear-gradient(90deg, rgba(255,77,28,.5), var(--sinyal) 65%)} .mizan-satir .skala b{position:absolute;top:5px;width:18px;height:18px;background:var(--panel-metin); border-radius:var(--r-nokta);transform:translateX(-9px); box-shadow:0 2px 6px rgba(0,0,0,.5)} .mizan-satir.acik .skala b{background:var(--sinyal)} .mizan-satir .skala u{position:absolute;top:9px;width:1px;height:12px;background:#2E2E2E;text-decoration:none} .mizan-satir .deger{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:1.1rem; color:var(--panel-metin)} .mizan-satir.acik .deger{color:var(--beyaz)} .mizan-satir .durum{font-size:.7rem;letter-spacing:.14em;color:#7E7E7E;text-align:right} .mizan-satir.acik .durum{color:var(--sinyal);text-shadow:0 0 10px rgba(255,77,28,.5)} .mizan-toplam{white-space:nowrap;display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) 54px 92px; gap:20px;padding:28px 0 0;border-top:2px solid var(--panel-hat);margin-top:2px; font-weight:800;align-items:baseline} .mizan-toplam .deger{text-align:right;font-variant-numeric:tabular-nums;color:var(--beyaz);font-size:1.14rem} .mizan-toplam .durum{font-size:.7rem;letter-spacing:.14em;color:#7E7E7E;text-align:right;font-weight:400} .mizan-not{margin-top:16px;font-size:.82rem;color:var(--panel-ikincil);max-width:70ch} .olcek-satir{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) 54px 92px;gap:20px; padding-bottom:12px} .olcek-satir .tik{display:flex;justify-content:space-between;font-size:.7rem;color:#7E7E7E; letter-spacing:.06em;font-variant-numeric:tabular-nums} @media(max-width:720px){ .mizan-satir,.mizan-toplam,.olcek-satir{grid-template-columns:minmax(84px,110px) minmax(0,1fr) 42px;gap:12px} .mizan-satir{padding:18px 0} .mizan-satir .durum,.mizan-toplam .durum{display:none} } /* ══ RAFIN SAYIMI — ISI-SKALASI (AKK 08-20 gez-notu, egitim.html'e ÖZEL, `.mizan-satir`in kendisi DEĞİL — `.pano--isi`/`.mizan--isi` sarmalayıcısı altında dar-kapsam): altı çubuk tek-tip gri yerine DEĞERLE orantılı turuncu→gri geçişi (204=tam --sinyal, 10'a inen kademe soluklaşıp --hat grisine yaklaşır). rgba(255,77,28,α) — hex-eşdeğeri #FF4D1C §1-B paletinde tanımlı, α serbest (bkz. TASARIM_NOTU §9 C2, aynı rgba zaten .mizan-satir.acik'te kullanılıyordu). Sıra sabit (HTML satır sırası = 204→10 azalan), nth-child ile eşlenir; veri değişirse sıra da güncellenmeli (bu blok DEKORATIF değil, DEĞER-orantılı — bkz. HTML yorumu). */ .pano--isi .pano-bas .etiket{font-size:1rem;letter-spacing:.14em;color:var(--beyaz);font-weight:700} .mizan--isi .mizan-satir{margin:0 -26px;padding-left:26px;padding-right:26px; transition:background .15s ease} .mizan--isi .mizan-satir:hover{background:rgba(255,77,28,.06)} .mizan--isi .mizan-satir .deger{color:var(--sinyal);font-size:1.26rem;font-weight:800} .mizan--isi .mizan-satir:nth-child(1) .skala s{background:linear-gradient(90deg, rgba(255,77,28,.55), var(--sinyal) 65%)} .mizan--isi .mizan-satir:nth-child(2) .skala s{background:linear-gradient(90deg, rgba(255,77,28,.28), rgba(255,77,28,.82) 65%)} .mizan--isi .mizan-satir:nth-child(3) .skala s{background:linear-gradient(90deg, rgba(255,77,28,.2), rgba(255,77,28,.72) 65%)} .mizan--isi .mizan-satir:nth-child(4) .skala s{background:linear-gradient(90deg, var(--hat), rgba(255,77,28,.5) 70%)} .mizan--isi .mizan-satir:nth-child(5) .skala s{background:linear-gradient(90deg, var(--hat), rgba(255,77,28,.34) 70%)} .mizan--isi .mizan-satir:nth-child(6) .skala s{background:linear-gradient(90deg, var(--hat), rgba(255,77,28,.2) 70%)} /* uç-nokta (skala b) da aynı kademeyle boyanır — yoksa çubuk turuncu, nokta nötr kalıp göz tırmalıyordu (04-satır ölçümü, ilk render'da yakalandı) */ .mizan--isi .mizan-satir:nth-child(1) .skala b{background:var(--sinyal)} .mizan--isi .mizan-satir:nth-child(2) .skala b{background:rgba(255,77,28,.82)} .mizan--isi .mizan-satir:nth-child(3) .skala b{background:rgba(255,77,28,.7)} .mizan--isi .mizan-satir:nth-child(4) .skala b{background:rgba(255,77,28,.5)} .mizan--isi .mizan-satir:nth-child(5) .skala b{background:rgba(255,77,28,.34)} .mizan--isi .mizan-satir:nth-child(6) .skala b{background:rgba(255,77,28,.2)} /* ══ İLK ↔ İKİNCİ ÖLÇÜM KIYASI — "aynı cetvel" iddiasının görsel karşılığı ══ */ .kiyas-satir{display:grid;grid-template-columns:minmax(72px,96px) minmax(0,1fr) 108px;gap:18px; align-items:center;padding:9px 0;border-bottom:1px solid #1E1E1E} .kiyas-satir:last-of-type{border-bottom:0} .kiyas-satir .ad{font-weight:700;letter-spacing:.04em;font-size:.86rem;color:var(--panel-metin);white-space:nowrap} .kiyas-cift{display:grid;gap:4px;min-width:0} .kiyas-cift i{display:block;height:7px;border-radius:3px;background:#1E1E1E;position:relative} .kiyas-cift i s{position:absolute;left:0;top:0;bottom:0;display:block;text-decoration:none;border-radius:3px} .kiyas-cift .ilk s{background:linear-gradient(90deg, var(--hat), #6C6C6C 55%, var(--gri2))} .kiyas-cift .son s{background:linear-gradient(90deg, rgba(255,77,28,.5), var(--sinyal) 65%)} .kiyas-satir .deger{text-align:right;font-variant-numeric:tabular-nums;font-size:.82rem; color:var(--panel-ikincil);white-space:nowrap} .kiyas-satir .deger b{color:var(--beyaz);font-weight:800} @media(max-width:720px){.kiyas-satir{grid-template-columns:minmax(60px,74px) minmax(0,1fr) 88px;gap:12px}} /* ══ ZAMAN ÇATISI 90/90/12 — segment genişliği SÜREYLE ORANTILI, dekoratif değil ══ */ .zaman-svg{display:block;width:100%;height:auto;margin-top:12px;font-family:"Inter",system-ui,sans-serif} .zaman-metin{display:none} @media(max-width:820px){ /* dar ekranda etiketler okunmaz punto'ya iner → grafik gizlenir, AYNI bilgi metin olarak kalır */ .zaman-svg{display:none} .zaman-metin{display:block;margin-top:12px;font-size:.82rem;color:var(--panel-metin);line-height:1.55} .zaman-metin b{color:var(--sinyal);font-weight:700} } /* ══ ON ADIM / DÖRT ADIM ══ */ .adimlar{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:22px;margin-top:22px} .adim .rakam{font-size:clamp(2.2rem,5.4vw,3.8rem);font-weight:850;letter-spacing:-.06em;color:#7A7A7A;line-height:.9} .adim h3{margin-top:10px;font-size:1.06rem} .adim p{color:var(--gri);font-size:.93rem;margin-top:6px} .adim .cikti{margin-top:12px;font-size:.74rem;letter-spacing:.1em;color:var(--sinyal)} /* ══ FAZ ŞERİDİ ══ */ .ritim{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0; border-top:1px solid var(--hat);margin-top:20px} /* ⚠️ `>` ŞART (görsel denetim 08-15 — V4'ten devralınan kusur): `.ritim div` sütun İÇİNDEKİ `.faz`/`.sure` div'lerini de yakalıyordu → onlar da dolgu + SAĞ KENARLIK alıyor, son sütunun içinde asılı kalan kısa dikey çizgi çıkıyordu (`:last-child` yalnız sonuncuyu sıfırlıyor). */ .ritim > div{padding:16px 22px 16px 0;border-right:1px solid var(--hat)} .ritim > div:last-child{border-right:0} .ritim .faz{font-size:.72rem;letter-spacing:.18em;color:var(--sinyal)} .ritim h3{margin:6px 0 5px;font-size:1.02rem} .ritim p{color:var(--gri);font-size:.89rem} .ritim .sure{margin-top:8px;font-size:.78rem;color:var(--gri2);letter-spacing:.04em} @media(max-width:720px){.ritim > div{padding-right:14px}} /* ══ RAF BAŞLIĞI (ürün sayfalarının kimlik bloğu) ══ */ .raf-ust{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .raf-no{font-size:.66rem;letter-spacing:.22em;color:var(--gri2)} .raf-kanca{font-family:"Lora",Georgia,serif;font-size:clamp(1.2rem,2.8vw,1.7rem);color:var(--beyaz); line-height:1.25;margin-top:10px;max-width:34ch} .raf-tarif{color:var(--gri);font-size:.98rem;margin-top:12px;line-height:1.55;max-width:64ch} .raf-tarif b{color:var(--panel-metin);font-weight:700} .raf-envanter{margin-top:14px;color:var(--gri);font-size:.92rem;line-height:1.55;max-width:66ch} .raf-envanter b{color:var(--panel-metin);font-weight:700;white-space:nowrap} .im{width:22px;height:2px;background:var(--sinyal);margin:14px 0 0} .raf-alt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap; margin-top:20px;padding-top:12px;border-top:1px solid var(--hat)} .raf-teslim{font-size:.73rem;letter-spacing:.1em;color:var(--gri2)} .raf-teslim b{color:var(--sinyal);font-weight:700} .raf-cta{font-size:.71rem;letter-spacing:.14em;color:var(--panel-metin);white-space:nowrap; text-decoration:none;border-bottom:1px solid var(--panel-hat);padding-bottom:2px} .raf-cta:hover,.raf-cta:focus-visible{color:var(--sinyal);border-bottom-color:var(--sinyal);outline:none} .paket-kapsam{margin-top:14px;font-size:.88rem;color:var(--gri);line-height:1.55;max-width:66ch} .paket-kapsam b{color:var(--panel-ikincil);font-weight:700;letter-spacing:.08em} /* ══ 11-DEPARTMAN ÖRGÜSÜ — "genel müdür gözü" bir slogan değil KAPSAM iddiasıdır ══ v7.3 (C2, AKK): viewBox 1200×236→1200×430 (~1.8× dikey — SVG'nin KENDİ koordinatları büyüdü, bkz. danismanlik.html; hexagonlar uniform ölçeklendi, distorsiyon yok). max-height burada eşlik eder (260→460), yoksa CSS tavanı SVG'yi geri küçültür. */ .orgut-sarma{margin-top:20px;padding-top:16px;border-top:1px solid #1E1E1E} .orgut{display:block;width:100%;height:auto;max-height:460px;font-family:"Inter",system-ui,sans-serif} @media(max-width:900px){ /* dar ekranda etiketler 6px'e iner — okunmayan grafik süstür; bilgi kapsam satırında kalır */ .orgut-sarma{display:none} } /* ══ MODÜL IZGARASI ══ */ /* ⚠️ BOŞ HÜCRE FİKSİ (görsel denetim 08-15): ızgara zemini `--hat` iken, son satırda kart bitmeyince ARTAN ALAN gri kutu gibi görünüyordu (11 konu → 5+5+1, dört boş hücre). Çözüm: zemin şeffaf, çizgiyi her kart KENDİ halkasıyla taşır → dolu hücre çizgili, boş alan sayfa zemininde kaybolur. Halka box-shadow'la verilir (kutu ölçüsünü değiştirmez). */ .moduller{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px; margin-top:20px} .modul{background:var(--siyah);padding:18px 18px 20px;box-shadow:0 0 0 1px var(--hat)} .modul .kod{font-size:.68rem;letter-spacing:.18em;color:var(--gri2)} .modul h3{font-size:.98rem;margin:6px 0 8px} .modul p{font-size:.86rem;color:var(--gri);font-family:"Lora",Georgia,serif;line-height:1.55} .modul .odev{margin-top:10px;font-size:.72rem;color:var(--gri2);letter-spacing:.04em} /* ══ PROGRAM YERLEŞİM ROTASYONU (C3, v7.3) — egitim.html'in dört programı aynı kalıbın (film + ızgara) dört kopyası gibi okunuyordu (AKK 08-20 bulgusu). İÇERİK METNİ DOKUNULMADI, yalnız sarma/yerleşim değişti: 01 ızgara sağda · 02 tam-genişlik şerit · 03 ızgara solda · 04 kompakt liste. DOM sırası (a11y okuma sırası) sabit kalır — sol/sağ farkı yalnız görsel (`order`). ══ */ .prog-yerlesim{display:grid;gap:30px;align-items:start;margin-top:8px} @media(min-width:900px){ .prog-yerlesim.izgara-sag{grid-template-columns:minmax(0,.86fr) minmax(0,1.32fr)} .prog-yerlesim.izgara-sol{grid-template-columns:minmax(0,1.32fr) minmax(0,.86fr)} .prog-yerlesim.izgara-sol .moduller{order:-1} .prog-yerlesim .pano.film{margin-top:0} .prog-yerlesim .moduller{margin-top:0} } /* PROGRAM 02 — "tam genişlik yatay şerit": pano.film viewport'a kadar bleed eder (breakout hilesi .blok bandıyla aynı yöntem), iç dolgu --yan'la sayfanın diğer kenarlarıyla hizalı kalır. */ .pano.film--serit{position:relative;width:100vw;left:50%;margin-left:-50vw;margin-top:0; border-left:0;border-right:0;border-radius:0;padding-left:var(--yan);padding-right:var(--yan)} /* PROGRAM 04 — "kompakt liste": kart-ızgarası yerine tek-sütun satır listesi (aynı .modul veri alanları — kod/başlık/açıklama — sadece kart değil satır olarak dizilir). */ .moduller.liste{display:block;margin-top:20px} .moduller.liste .modul{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px; background:transparent;box-shadow:none;border-bottom:1px solid var(--hat);padding:13px 0} .moduller.liste .modul:first-child{border-top:1px solid var(--hat)} .moduller.liste .modul .kod{flex:0 0 128px;font-size:.66rem} .moduller.liste .modul h3{flex:0 0 240px;margin:0;font-size:.94rem} .moduller.liste .modul p{flex:1 1 320px;margin:0;font-size:.85rem} @media(max-width:640px){ .moduller.liste .modul{gap:2px 0} .moduller.liste .modul .kod,.moduller.liste .modul h3{flex:0 0 100%} } /* ══ T-HESAP (koyu defter) ══ v7.3 (C2, AKK — kanit.html'in şema-eşdeğeri): satır payı büyüdü (14→22), boş taraf (th-bekleyen, sayfanın TEK vurgu kutusu) artık düz kesikli-gri çerçeve değil --sinyal ailesi kenarlık + çok hafif üstten-alta ısı-tonu (rgba, RENKLİ box-shadow YOK — tasarim_kapisi.py K9) taşıyor — "kayıt bekliyor" beyanı gözle de vurgu alıyor, mizan/zaman çatısındaki aynı dil. */ .thesap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:4px} .th-bas{display:contents} .th-bas span{font-size:.68rem;letter-spacing:.2em;color:var(--panel-ikincil);padding-bottom:10px; border-bottom:2px solid var(--panel-hat)} .th-bas span:last-child{text-align:left;padding-left:24px} .th-sol{padding:6px 24px 0 0;border-right:2px solid var(--panel-hat)} .th-sag{padding:6px 0 0 24px;display:flex;align-items:center} .th-satir{padding:22px 0;border-bottom:1px solid #1E1E1E;font-size:.98rem;color:#D2D2D2} .th-satir:last-child{border-bottom:0} .th-bekleyen{font-size:.92rem;color:var(--panel-ikincil);border:1px dashed rgba(255,77,28,.45); background:linear-gradient(180deg, rgba(255,77,28,.06), rgba(255,77,28,0)); padding:24px 18px;width:100%;text-align:center;border-radius:var(--r-kesik)} .th-bakiye{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:16px; margin-top:14px;padding-top:12px;border-top:2px solid var(--panel-hat);font-size:.68rem; letter-spacing:.2em;color:var(--panel-ikincil)} .th-bakiye b{color:var(--sinyal);font-weight:700;letter-spacing:.14em;text-shadow:0 0 12px rgba(255,77,28,.5)} @media(max-width:720px){ /* tek sütuna inince başlık↔sütun sırası elle kurulur (yoksa ALACAK başlığı borç satırlarının önüne düşer) */ .thesap{grid-template-columns:1fr} .th-sol{border-right:0;border-bottom:0;padding:6px 0 12px;order:2} .th-sag{padding:4px 0 0;order:4} .th-bas span{border-bottom-width:1px} .th-bas span:first-child{order:1} .th-bas span:last-child{text-align:left;padding-left:0;padding-top:18px;order:3} .th-bakiye{order:5} } /* ══ RAPOR YAPRAĞI NUMUNESİ — her cümle künyeli ══ */ .yaprak p{font-family:"Lora",Georgia,serif;font-size:.95rem;color:var(--panel-metin);line-height:1.5; padding:8px 0;border-bottom:1px solid #1E1E1E} .yaprak p:last-child{border-bottom:0} .yaprak p.hukum{color:var(--beyaz)} .rz{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; margin-left:7px;vertical-align:-4px;background:none;border:1px solid #2E2E2E;color:var(--panel-ikincil); /* glif BÜYÜTÜLDÜ (08-18 göz-taraması): .72rem'de ◦ ve ▸ 19px kutunun içinde boş kutu gibi okunuyordu — rozet "tıklanacak bir şey" olduğunu ancak işareti görülebiliyorsa anlatır. */ font-family:inherit;font-size:1.05rem;line-height:1;padding:0;cursor:help} .rz:hover,.rz:focus-visible,.rz.acik{border-color:var(--sinyal);color:var(--sinyal);outline:none} .ipucu{position:absolute;right:0;bottom:calc(100% + 7px);width:max-content;max-width:220px; background:var(--kat);border:1px solid var(--panel-hat);color:var(--panel-metin); font-family:"Inter",system-ui,sans-serif;font-size:.68rem;letter-spacing:.02em;line-height:1.4; padding:6px 9px;text-align:left;opacity:0;visibility:hidden;transition:opacity .16s;z-index:4} .rz:hover .ipucu,.rz:focus-visible .ipucu,.rz.acik .ipucu{opacity:1;visibility:visible} /* ══ BİR MODÜLÜN 60 SANİYESİ — tez → soru → ödev ══ */ .mk-alan{min-height:78px;display:grid;align-content:center} .mk{display:none} .mk.aktif{display:block} .mk-rol{font-size:.64rem;letter-spacing:.22em;color:var(--sinyal)} .mk p{font-family:"Lora",Georgia,serif;font-size:1.02rem;color:#D2D2D2;margin-top:7px;line-height:1.42} .mk-alt{display:flex;align-items:center;gap:11px;padding-top:8px;border-top:1px solid #1E1E1E;margin-top:8px} .mk-ok{background:none;border:1px solid #2E2E2E;color:var(--panel-ikincil);font-family:inherit; font-size:.82rem;line-height:1;width:23px;height:23px;padding:0;cursor:pointer;flex:none} .mk-ok:hover,.mk-ok:focus-visible{border-color:var(--sinyal);color:var(--sinyal);outline:none} .mk-nokta{display:flex;gap:7px;flex:1} .mk-nokta span{width:7px;height:7px;background:var(--panel-hat);border-radius:var(--r-nokta)} .mk-nokta span.aktif{background:var(--sinyal)} .mk-sayac{font-size:.64rem;letter-spacing:.14em;color:#7E7E7E;font-variant-numeric:tabular-nums} /* ══ FİLM ŞERİDİ (.film) — generik disiplin görseli: kart = etiket + tez + kaynak notu ══ TEK ZAMAN KAYNAĞI: akış JS zamanlayıcısıyla değil, ilerleme çubuğunun CSS animasyonuyla sürülür (JS yalnız `animationiteration` dinler) → üstüne gelince ikisi birden durur. */ .film-yuva{position:relative;display:grid;min-height:112px;align-content:center;margin-top:12px} /* ══ KART v2 (AKK 08-15: "görselli") — iki sütun: solda kartın KENDİ mini şeması, sağda tez ══ Şema dekor değil: kartın konusunu çizer (pazar daralması · darboğaz · rakip matrisi …). Her şema kartın içinde satır-içi SVG olarak durur — tek kullanımlık olduğu için kütüphaneye taşımak kopya değil dolaylılık üretirdi; JS'e bağlamak da script düşerse görseli düşürürdü. */ .film-kart{grid-area:1/1;display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px; align-items:center;opacity:0;visibility:hidden} .film-kart.aktif{opacity:1;visibility:visible} .film-metin{display:grid;gap:5px;min-width:0} .film-sema{width:96px;height:96px;display:block;flex:none;overflow:visible} /* ⚠️ ÇİZGİ KALINLIĞI (AKK 08-15 "çalışmıyor" bulgusu): 1,6px çizgi 96px kutuda kayboluyordu — şema "kırık çizim" gibi okunuyordu. Kalınlık artırıldı; formlar da kutunun ~%80'ini doldurur. */ .film-sema .n{fill:none;stroke:#7E7E7E;stroke-width:2.2;stroke-linecap:round} /* nötr çizgi */ .film-sema .v{fill:none;stroke:var(--sinyal);stroke-width:2.6;stroke-linecap:round} /* vurgu */ .film-sema .d{fill:#5C5C5C} .film-sema .dv{fill:var(--sinyal)} .film-sema .k{fill:none;stroke:#5C5C5C;stroke-width:1.4;stroke-dasharray:3 3} .film-sema text{fill:#8E8E8E;font-size:9px;letter-spacing:.5px;font-family:"Inter",system-ui,sans-serif} @media(max-width:560px){ /* dar ekranda şema küçülür, kaybolmaz */ .film-kart{grid-template-columns:62px minmax(0,1fr);gap:13px} .film-sema{width:62px;height:62px} } .film-et{font-size:.64rem;letter-spacing:.22em;color:var(--sinyal)} .film-tez{font-family:"Lora",Georgia,serif;font-size:clamp(1rem,2vw,1.25rem);color:var(--beyaz); line-height:1.3;max-width:58ch} .film-not{font-size:.72rem;letter-spacing:.06em;color:#7E7E7E} .film-alt{display:flex;align-items:center;gap:11px;margin-top:10px;padding-top:9px;border-top:1px solid #1E1E1E} .film-ok{background:none;border:1px solid #2E2E2E;color:var(--panel-ikincil);font-family:inherit; font-size:.82rem;line-height:1;width:22px;height:22px;padding:0;cursor:pointer;flex:none} .film-ok:hover,.film-ok:focus-visible{border-color:var(--sinyal);color:var(--sinyal);outline:none} /* DURDUR/OYNAT — WCAG 2.2.2: 5 sn'den uzun otomatik hareket durdurulabilir olmalı. Süre kart başına 6-10 sn'ye çıktığı için hover/odak duraklatması yetmez, açık bir denetim şart. Düğmeyi JS basar (hareket kapalıysa akış da yok, düğme de yok — ölü denetim bırakmayalım). */ .film-dur{background:none;border:1px solid #2E2E2E;color:var(--panel-ikincil);font-family:inherit; font-size:.6rem;letter-spacing:.14em;line-height:1;height:22px;padding:0 8px;cursor:pointer;flex:none} .film-dur:hover,.film-dur:focus-visible{border-color:var(--sinyal);color:var(--sinyal);outline:none} .film-ray{flex:1;height:2px;background:#242424;overflow:hidden} .film-dolgu{display:block;width:100%;height:2px;background:var(--sinyal); transform:scaleX(var(--oran,0));transform-origin:left center} .film-sayac{font-size:.64rem;letter-spacing:.14em;color:#7E7E7E;font-variant-numeric:tabular-nums} @media(max-width:720px){.film-tez{max-width:none}} /* ══ GENEL MÜDÜR GÜNÜ — süreklilik fazının bir gününün saat şeridi ══ */ .gmg-hat{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));margin-top:14px;position:relative} .gmg-hat::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:#242424} .gmg-dugum{position:relative;background:none;border:0;padding:0 3px 0 0;cursor:pointer;font-family:inherit; display:grid;justify-items:start;gap:9px;color:var(--panel-ikincil);text-align:left;min-width:0} .gmg-im{width:10px;height:10px;background:#5C5C5C;display:block;position:relative;z-index:1} .gmg-saat{font-size:.65rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap} .gmg-dugum:hover .gmg-im,.gmg-dugum:focus-visible .gmg-im,.gmg-dugum.aktif .gmg-im{background:var(--sinyal)} .gmg-dugum:hover .gmg-saat,.gmg-dugum:focus-visible .gmg-saat,.gmg-dugum.aktif .gmg-saat{color:var(--beyaz)} .gmg-metin{display:none} .gmg-not{margin-top:12px;padding-top:10px;border-top:1px solid #1E1E1E;font-size:.9rem;color:var(--panel-metin)} .gmg-not b{color:var(--sinyal);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em} @media(max-width:820px){ /* dar ekranda yatay şerit dikey listeye düşer */ .gmg-hat{grid-template-columns:minmax(0,1fr)} .gmg-hat::before{display:none} .gmg-dugum{grid-template-columns:10px 44px minmax(0,1fr);align-items:center;gap:11px; padding:9px 0;border-bottom:1px solid #1E1E1E} .gmg-metin{display:block;font-size:.8rem;color:var(--gri)} .gmg-not{display:none} } /* ══ KİME UYGUN ══ */ .uygun{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;margin-top:20px} .uygun ul{list-style:none;display:grid;gap:10px} .uygun li{padding-left:20px;position:relative;color:var(--gri);font-size:.95rem} .uygun li::before{content:"—";position:absolute;left:0;color:var(--sinyal)} .uygun h3{margin-bottom:12px;font-size:1rem} .uygun .degil li::before{content:"×";color:var(--gri2)} /* ══ İLKELER + ALINTI ══ */ .alinti{font-family:"Lora",Georgia,serif;font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1.24;max-width:24ch} .alinti span{color:var(--sinyal)} .ilke-liste{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px} .ilke{border-top:1px solid var(--hat);padding-top:14px;font-size:.93rem;color:var(--gri)} .ilke b{display:block;color:var(--beyaz);font-weight:700;margin-bottom:4px;font-size:.98rem} /* ══ KİM OLDUĞUM ══ */ .kim-izgara{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr);gap:44px;align-items:start} .kim h1{margin-bottom:16px} .kim p{color:#D2D2D2;font-size:clamp(1rem,1.9vw,1.16rem);max-width:56ch} .kim p + p{margin-top:16px} .kim-sol{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start} .portre{width:100%;max-width:420px;height:auto;flex:none;display:block;border-radius:var(--r-kesik); border:1px solid var(--hat); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5)} .kunye{border:1px solid var(--hat);padding:22px;min-width:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5)} .kunye div{display:flex;justify-content:space-between;gap:18px;padding:9px 0; border-bottom:1px solid var(--hat);font-size:.88rem} .kunye div:last-child{border-bottom:0} .kunye span:first-child{color:var(--gri2);letter-spacing:.06em} @media(max-width:820px){.kim-izgara{grid-template-columns:1fr;gap:26px}} @media(max-width:700px){.kim-sol{grid-template-columns:1fr}} /* ══ İLETİŞİM ══ */ .cta{display:inline-block;justify-self:start;margin-top:26px;background:var(--beyaz);color:var(--siyah); text-decoration:none;padding:18px 34px;border-radius:var(--r-kesik);font-weight:800;font-size:.86rem; letter-spacing:.1em} .cta:hover{background:var(--sinyal);color:var(--beyaz)} .iletisim-satir{font-size:clamp(1rem,2.2vw,1.4rem);color:var(--gri);margin-top:8px} .bekleyen{display:inline-block;margin-top:18px;border:1px dashed var(--panel-hat);padding:14px 18px; color:var(--panel-ikincil);font-size:.86rem;max-width:60ch} /* ══ CANLILIK PAKETİ — bilgi taşıyan hareket, süs değil ══ SÖZLEŞME: hareketin TAMAMI `prefers-reduced-motion: no-preference` + `html.can` ikili kapısı altında. `.can` sınıfını JS yalnız hareket AÇIKKEN ve gözcüler kurulurken basar → azaltılmış hareket kullanıcısında (ve headless ekran-çekiminde) her öge SON HÂLİNDE durur. Yalnız transform/opacity → düzen yeniden hesaplanmaz, CLS 0. */ @media (prefers-reduced-motion: no-preference){ .can .blok h2,.can .blok .girizgah{opacity:0;transform:translateY(12px); transition:opacity .4s ease,transform .4s ease} .can .blok .girizgah{transition-delay:90ms} .can .blok.gor h2,.can .blok.gor .girizgah{opacity:1;transform:none} .can .mizan-satir .skala s{transform:scaleX(0);transform-origin:left center; transition:transform .62s cubic-bezier(.22,.61,.36,1);transition-delay:var(--gec,0ms)} .can .mizan-satir .skala b,.can .mizan-satir .deger,.can .mizan-satir .durum, .can .mizan-toplam .deger{opacity:0;transition:opacity .45s ease;transition-delay:var(--gec,0ms)} .can .gor .mizan-satir .skala s{transform:scaleX(1)} .can .gor .mizan-satir .skala b,.can .gor .mizan-satir .deger,.can .gor .mizan-satir .durum, .can .gor .mizan-toplam .deger{opacity:1} .can .mizan-satir:nth-child(2){--gec:0ms} .can .mizan-satir:nth-child(3){--gec:120ms} .can .mizan-satir:nth-child(4){--gec:240ms} .can .mizan-satir:nth-child(5){--gec:360ms} .can .mizan-satir:nth-child(6){--gec:480ms} .can .mizan-satir:nth-child(7){--gec:600ms} .can .mizan-toplam{--gec:720ms} @keyframes dugum-gel{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} .can .gmg-hat.gor .gmg-im{animation:dugum-gel .34s ease-out both} .can .gmg-hat.gor .gmg-dugum:nth-child(2) .gmg-im{animation-delay:70ms} .can .gmg-hat.gor .gmg-dugum:nth-child(3) .gmg-im{animation-delay:140ms} .can .gmg-hat.gor .gmg-dugum:nth-child(4) .gmg-im{animation-delay:210ms} .can .gmg-hat.gor .gmg-dugum:nth-child(5) .gmg-im{animation-delay:280ms} .can .gmg-hat.gor .gmg-dugum:nth-child(6) .gmg-im{animation-delay:350ms} .can .gmg-hat.gor .gmg-dugum:nth-child(7) .gmg-im{animation-delay:420ms} .can .gmg-hat.gor .gmg-dugum:nth-child(8) .gmg-im{animation-delay:490ms} .can .gmg-hat.gor .gmg-dugum:nth-child(9) .gmg-im{animation-delay:560ms} .can .gmg-hat.gor .gmg-dugum:nth-child(10) .gmg-im{animation-delay:630ms} .can .film-kart{transition:opacity .5s ease,visibility 0s linear .5s} .can .film-kart.aktif{transition:opacity .5s ease,visibility 0s} @keyframes film-ilerle{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* SÜRE ARTIK KART BAŞINA (§16.2, AKK 08-15 "şerit çok hızlı"): sabit 3500ms = 446 kelime/dk, ekran okuma hızının ~2,5 katıydı. JS her kartta `--film-sure` yazar (2 sn + kelime/2,8; alt 6 sn · üst 10 sn). Buradaki 7500ms yalnız yedek: JS düşerse okunabilir bir taban kalsın. */ .can .film-dolgu{animation:film-ilerle var(--film-sure,7500ms) linear infinite} /* HOVER/ODAK duraklatması yalnız kullanıcı DÜĞMEYE dokunmadıysa geçerli. Dokunduysa (.elle) yetki düğmenindir: yoksa OYNAT'a basan ziyaretçi imleci şeridin üstünde tuttuğu için hiçbir şey olmadığını görür ve site bozuk sanır (08-18 canlı ölçümde tam bu yakalandı). */ .can .film:not(.elle):hover .film-dolgu,.can .film:not(.elle):focus-within .film-dolgu, .can .film.durdu .film-dolgu{animation-play-state:paused} .can .kiyas-cift .son s{transform:scaleX(0);transform-origin:left center; transition:transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--gec,0ms)} .can .gor .kiyas-cift .son s{transform:scaleX(1)} } /* ══ GÖMÜLÜ RAPOR GÖRÜNTÜLEYİCİ (S7-a, 08-19) — pdf.js YOK, yerleşik tarayıcı ══ NEDEN: pdf.js ~400KB ek bağımlılık getirir (site bütçesinin ~2,5 katı). tarayıcının KENDİ PDF motorunu kullanır (0KB ek JS). Desteklemeyen tarayıcıda (bazı mobil motorlar) içindeki DOM içeriği (yedek panel) OTOMATİK gösterilir — bitmap/sayfa-görseli YOK (K12 yasağı), yalnız metin + düğme. */ .gomulu-cerceve object{display:block;width:100%;height:80vh;border:0;margin-top:16px;background:var(--siyah)} .gomulu-yedek{padding:54px 26px;text-align:center;color:var(--gri)} .gomulu-yedek p{font-size:.95rem;margin:0 0 18px} @media(max-width:640px){.gomulu-cerceve object{height:70vh}} /* ══ TANITIM ŞERİDİ DÜĞMELERİ — birincil (.cta zaten var) + ikincil ══ */ .buton-satir{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .gomulu-yedek .buton-satir{justify-content:center} .buton-ikincil{display:inline-block;border:1px solid var(--panel-hat);color:var(--beyaz); text-decoration:none;padding:17px 32px;border-radius:var(--r-kesik);font-weight:700; font-size:.86rem;letter-spacing:.08em} .buton-ikincil:hover,.buton-ikincil:focus-visible{border-color:var(--sinyal);color:var(--sinyal);outline:none} /* ══ ÖRNEK-RAPOR İKİLİSİ (S7-b, 08-19) — raporlar.html sonu, ornek.html'in taşınmış hâli ══ .gomulu-cerceve'nin kendisi artık KART: pano zaten arka-plan+çerçeve verir. .gomulu-yuva CLICK-TO-LOAD'dan önce boş durur (0KB PDF talebi) — JS tıklamada enjekte eder. */ /* v7.4 (08-20): üçüncü kart eklendi (AI-Destekli İşletme Karnesi) — minmax 420→340px, üç kart 1240px'lik `.blok.genis` gövdesinde (340×3+2×26=1072) rahatça sığar; 900-1180px bandında iki sütuna, 900px altında (mevcut kural) tek sütuna düşer. */ .ornek-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;margin-top:22px} .ornek-izgara h3{margin-top:16px;font-size:1.14rem} .ornek-izgara .pano-bas{flex-wrap:wrap} .gomulu-yuva:empty{display:none} button.cta.rapor-yukle{border:0;cursor:pointer;font-family:inherit} button.cta.rapor-yukle:disabled{background:var(--kat);color:var(--panel-ikincil);cursor:default} @media(max-width:900px){.ornek-izgara{grid-template-columns:1fr}} /* ══ RAPOR-VİTRİNİ (C1, v7.3) — kartın üstünde gerçek sayfa görselleri: kapak önde + iki iç sayfa arkada katmanlı-kaymış. Kartın KENDİ .pano dolgusuna bindirilir (negatif margin = pano'nun 20px/26px iç payını iptal eder, görsel kart kenarına kadar bleed eder). Alt kenar ::after ile pano zeminine erir (mask DEĞİL — aynı katı renge biten gradient, PNG şeffaflığı gerekmez). Görsel kaynak: web/site/assets/rapor/vitrin/*.png (pdftoppm 150dpi render, A4→1240×1754px). */ .vitrin-yayilim{position:relative;margin:-20px -26px 24px;padding-top:30px;height:300px; overflow:hidden;display:flex;align-items:flex-start;justify-content:center} .vitrin-yayilim::after{content:"";position:absolute;inset:auto 0 0 0;height:96px; background:linear-gradient(to bottom, transparent, var(--pano));pointer-events:none} .vitrin-ic{position:absolute;top:44px;width:44%;max-width:216px;height:auto;display:block; border:1px solid var(--panel-hat);border-radius:var(--r-kesik); box-shadow:0 14px 30px rgba(0,0,0,.55);opacity:.8} .vitrin-ic--sol{left:8%;transform:rotate(-7deg)} .vitrin-ic--sag{right:8%;transform:rotate(7deg)} .vitrin-kapak{position:relative;z-index:2;width:48%;max-width:232px;height:auto;display:block; border:1px solid var(--panel-hat);border-radius:var(--r-kesik);box-shadow:0 20px 42px rgba(0,0,0,.65)} @media(max-width:640px){ .vitrin-yayilim{height:250px} .vitrin-ic{top:36px;max-width:150px} .vitrin-kapak{max-width:164px} } /* ══════════════════════════════════════════════════════════════════════════════════ V7.4 (08-20) — AI-DESTEKLİ İŞLETME ANLATISI + TEZ-TİPOGRAFİSİ + EĞİTİM-VİTRİNİ + MODAL ══════════════════════════════════════════════════════════════════════════════════ */ /* ══ ÜST-KATMAN AI BANDI — surec.html, artık altı-sütun cetvelinin ÜSTÜNDE + büyütülmüş ══ `.ai-bant` tabanını miras alır (zemin/çerçeve/gölge), yerleşimi grid'den bloğa çevirir: etiket + büyük tez başlığı üstte, açıklama paragrafı altta — küçük yan-yana bant artık okunaklı bir duyurudur. AYNI özgüllük (0,1,0) ama DOSYADA SONRA geldiği için `.ai-bant` ile çakışan display/grid-template-columns değerlerini ezer (kural: son kazanır, özgüllük eşit). */ .ai-bant--ust{display:block;margin:0 0 22px;padding:28px 30px 26px} .ai-bant--ust .etiket{display:block;margin-bottom:12px} .ai-bant--ust h3{font-size:clamp(1.32rem,3.2vw,2rem);font-weight:850;letter-spacing:-.02em; color:var(--beyaz);max-width:28ch;margin-bottom:14px;line-height:1.15} .ai-bant--ust p{font-size:1.04rem;max-width:68ch} .ai-bant--ust .raf-bag{margin-left:2px} .alanlar{margin-top:0} /* ══ AI-BANDI TIKLANABİLİR + HOVER (AKK 08-20 gez-notu): altı-sütun `button.alan` ailesindeki hover diliyle TUTARLI — zemin bir tık aydınlanır (button.alan:hover aynen --kat'a aydınlanıyordu; burada taban zaten --kat olduğu için bir basamak daha açık nötr gri) + hat (kenarlık) sinyal rengine parlar (aynı desen: .cip/.rz/.buton-ikincil zaten border-color:var(--sinyal) hover'ı kullanıyor). Element artık (tüm kart tıklanabilir, iç `.raf-bag` süs-span'e indirgendi — iki iç-içe geçersiz HTML üretirdi). #1D1E21 nötr gri (R-G-B farkı ≤4, K11 palet-kapısı serbest bırakır — bkz. tasarim_kapisi.py K11 "R≈G≈B nötr" ölçütü). */ a.ai-bant--ust{text-decoration:none;color:inherit;cursor:pointer; transition:background .15s ease,border-color .15s ease} a.ai-bant--ust:hover,a.ai-bant--ust:focus-visible{background:#1D1E21;border-color:var(--sinyal);outline:none} a.ai-bant--ust:hover .raf-bag,a.ai-bant--ust:focus-visible .raf-bag{color:var(--sinyal);border-bottom-color:var(--sinyal)} @media(prefers-reduced-motion:reduce){a.ai-bant--ust{transition:none}} /* ══ SÜTUN DETAY PANELİ — tetikleyici (v7.4 pilot, surec.html) ══ `.alan` artık