/* {CC} 2026-09-09 */ /* Theme Name: MetroWo Author: MetroWo, LLC Description: Kurumsal ana site temasi Version: 0.1.0 Text Domain: metrowo Update URI: false */ /* =========================================================================== RESET VE TEMEL =========================================================================== */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: auto; } body{ margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); } /* Masaustu sayfa --w-content'in (1180px) altina kucultulmez - pencere ne kadar daraltilirsa daraltilsin ic elemanlar bozulmak yerine tum sayfa yatayda kayar. Genislik bazli media query (min-width:769px) YANLISTI - pencere daraltildikca viewport da 769'un altina dusup kurali kendiliginden kapatiyordu (Matt bulgusu, 2026-09-04). {CC} 2026-09-20 - CSS'in @media (pointer:...) sorgusu Matt'in gercek telefonunda guvenilmez davrandi (menu kurali calisiyor, ayni bloktaki logo kucultme kurali calismiyordu - dosya dogru, yorumlama tutarsizdi). Yontem degistirildi: pointer turu artik CSS media feature ile degil, header.php'nin en basindaki JS ile (dokunma ozelligi dogrudan test edilip etiketine is-touch sinifi eklenerek) belirleniyor. Bu sinif yoksa (touch YOKSA = fare/touchpad) asagidaki masaustu kurali gecerlidir; varsa (gercek dokunmatik cihaz) is-touch ile ezilir. */ body{ min-width: 1180px; } html.is-touch body{ min-width: 0; } h1, h2, h3, h4{ font-family: var(--font-head); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); color: var(--text); } h1{ font-size: var(--fs-hero); } h2{ font-size: var(--fs-h2); } h3{ font-size: var(--fs-h3); } p{ margin: 0 0 var(--sp-4); color: var(--text-muted); } a{ color: var(--accent-deep); text-decoration: none; } a:hover{ color: var(--accent-2); } img{ max-width: 100%; height: auto; display: block; } ul{ margin: 0; padding: 0; list-style: none; } .container{ max-width: var(--w-content); margin: 0 auto; padding: 0 var(--sp-5); } .full-bleed{ width: 100%; } .section.full-bleed{ padding: 0; } .container-text{ max-width: var(--w-text); margin: 0 auto; padding: 0 var(--sp-5); } .container-wide{ max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--sp-5); } .page-breadcrumb{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .page-breadcrumb-inner{ padding: var(--sp-2) 0; font-size: var(--fs-small); color: var(--text-dim); } .page-title{ white-space: nowrap; } @media (max-width: 900px){ .page-title{ font-size: var(--fs-h2); white-space: normal; } } .screen-reader-text{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* =========================================================================== BUTON =========================================================================== */ .btn{ display: inline-block; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.02em; border: 1px solid var(--accent-deep); cursor: pointer; transition: background var(--fade) var(--ease), color var(--fade) var(--ease); } .btn-cta{ background: var(--accent-deep); color: var(--bg); } .btn-cta:hover{ background: var(--accent-2); color: var(--bg); } .btn-secondary{ background: transparent; color: var(--accent-deep); } .btn-secondary:hover{ background: var(--accent-deep); color: var(--bg); } /* CF7 form gonder butonu - varsayilan tarayici stiliyle cok kucuk kaliyordu, .btn-cta ile ayni gorunume getirildi (2026-08-31) */ .wpcf7-submit{ display: inline-block; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.02em; border: 1px solid var(--accent-deep); background: var(--accent-deep); color: var(--bg); cursor: pointer; transition: background var(--fade) var(--ease), color var(--fade) var(--ease); } .wpcf7-submit:hover{ background: var(--accent-2); } .wpcf7-submit:disabled{ opacity: 0.5; cursor: not-allowed; } /* Bolum 23.2 - gonderim basarili olunca form kapanir, yerine buyuk/belirgin durum mesaji gelir (contact-form-behavior.js formu gizleyip bu sinifi ekler) */ .form-success-message{ display: block; font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-body); padding: var(--sp-5); border: 2px solid var(--accent-deep); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); } /* Kaynak kivilcimi efekti (2026-08-30, Matt onayli) - Request a Quote/Demo/Quotation butonlarina (.btn-cta) tiklaninca tiklanan noktadan rastgele sayida (10-20) kivilcim parcacigi sacilir. Her parcacigin yorungesi JS'de hesaplanip Web Animations API ile oynatilir (bkz. footer.php) - yatay hiz sabit, tepe nokta zamanda tam ortada (t=0.5), alfa sadece inis basladiktan sonra dusup yere degdiginde sifirlanir. Sadece Request-a-X butonlarinda, ikincil butonlara (.btn-secondary) dokunmuyor. */ .btn-cta{ position: relative; } .weld-spark{ position: fixed; border-radius: 50%; background: #FFFDF2; box-shadow: 0 0 5px 1.5px #FFE066, 0 0 10px 3px rgba(255, 214, 79, .6); pointer-events: none; z-index: 9999; } /* =========================================================================== ROZET (badge - In development / On the roadmap / Modernization) =========================================================================== */ .badge{ display: inline-block; padding: var(--sp-1) var(--sp-3); border: 1px dashed var(--text-dim); border-radius: 999px; font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-dim); } /* =========================================================================== UST SERIT (topbar) - bes urun adi =========================================================================== */ .topbar{ position: sticky; top: 0; z-index: 1000; height: var(--topbar-h); background: var(--panel); border-bottom: 1px solid var(--line); } .topbar-inner{ max-width: var(--w-content); margin: 0 auto; padding: 0 var(--sp-5); height: 100%; display: flex; align-items: center; gap: var(--sp-4); overflow-x: auto; scrollbar-width: none; } .topbar-inner::-webkit-scrollbar{ display: none; } /* {CC} 2026-09-20 - asagidaki .topbar-label/.topbar-sep taban kurali (display:inline-flex) dosyada bu mobil kuraldan SONRA geldigi icin ayni ozgullukte kaynak sirasi yuzunden onu eziyordu - mobilde metin hic gizlenmiyordu. html on-eki ozgullugu artirip kesin kazanmasini sagliyor. */ @media (max-width: 768px){ html .topbar-label, html .topbar-sep{ display: none; } } .topbar-label{ display: inline-flex; align-items: center; height: 100%; position: relative; top: 2px; font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } .topbar-sep{ display: inline-flex; align-items: center; height: 100%; line-height: 1; color: var(--text-dim); opacity: .5; } .topbar-nav{ display: flex; align-items: center; height: 100%; white-space: nowrap; } .topbar-nav-list{ display: flex; align-items: center; height: 100%; gap: var(--sp-5); } .topbar-nav-list li{ display: flex; align-items: center; height: 100%; } .topbar-nav-list a{ display: inline-flex; align-items: center; font-size: var(--fs-small); line-height: 1; color: var(--text-dim); } .topbar-nav-list a:hover{ color: var(--text); } .topbar-nav-list li.current-menu-item > a, .topbar-nav-list li.current_page_item > a{ display: inline-block; background: var(--panel-dark); color: var(--text-on-dark); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); } /* =========================================================================== HEADER - yapiskan =========================================================================== */ .site-header{ position: sticky; top: var(--topbar-h); z-index: 999; height: var(--header-h); background: var(--bg); border-bottom: 1px solid var(--line); } .site-header-inner{ max-width: var(--w-content); margin: 0 auto; padding: 0 var(--sp-5); height: 100%; display: flex; align-items: center; gap: var(--sp-6); } .site-logo-group, .site-header-inner > .product-logo, .site-header-inner > .site-logo-link{ margin-right: auto; } .site-logo-link{ display: inline-flex; align-items: center; flex-shrink: 0; } .site-logo-img{ height: 97px; width: auto; display: block; } /* 44px * 2.2 - Matt talebi */ .site-logo-group{ display: flex; align-items: center; gap: var(--sp-3); } .logo-placeholder{ display: inline-flex; align-items: center; min-width: 160px; height: 44px; border: 1px dashed var(--text-muted); border-radius: var(--radius); padding: 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-small); letter-spacing: var(--ls-cap); text-transform: uppercase; text-decoration: none; } .ecosystem-mark{ min-width: 0; height: 28px; font-size: var(--fs-cap); } .primary-nav-list{ display: flex; gap: var(--sp-5); } .primary-nav-list a{ font-size: var(--fs-small); color: var(--text-muted); } .primary-nav-list a:hover{ color: var(--text); } .site-header-cta{ white-space: nowrap; } .menu-toggle{ display: none; } /* =========================================================================== BOLUM (section) genel =========================================================================== */ .section{ padding: var(--section-y) 0; border-bottom: 1px solid var(--line); } .section:last-of-type{ border-bottom: none; } .section-label{ font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--sp-3); display: block; } .section-subtitle{ font-size: var(--fs-small); font-weight: 400; color: var(--text-dim); } /* =========================================================================== HERO =========================================================================== */ /* Hero - IS-EMRI-PASTEL-ARKAPLAN-2026-08-30 kapsami disinda, eski koyu tema korunuyor */ .hero{ padding: var(--sp-9) 0 var(--sp-8); text-align: left; background: var(--accent-deep); } .hero .badge{ margin-bottom: var(--sp-4); } .hero h1{ max-width: 900px; color: var(--text-on-dark); font-weight: 400; } .hero .hero-sub{ max-width: var(--w-text); font-size: var(--fs-h3); color: var(--text-muted-on-dark); } .hero .btn-cta{ background: var(--accent); color: var(--bg-dark); } .hero .btn-cta:hover{ background: var(--accent-2); color: var(--bg-dark); } .contact-heading{ font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--ls-cap); color: var(--accent-deep); } .hero-cta-row{ display: flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; } /* =========================================================================== VIDEO BANNER (yer tutucu) =========================================================================== */ .video-banner{ position: relative; width: 100%; aspect-ratio: 16 / 6; background: var(--panel-dark); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .video-banner .play-icon{ width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--text-dim); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 1.5rem; } /* =========================================================================== EKOSISTEM BANDI (ince serit - bes sitede kullanilir) =========================================================================== */ .ecosystem-band{ display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) 0; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ecosystem-band a{ font-family: var(--font-head); font-weight: 600; font-size: var(--fs-body); color: var(--text-dim); white-space: nowrap; } .ecosystem-band a.is-active{ background: var(--panel-dark); color: var(--text-on-dark); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); } .ecosystem-band a:hover{ color: var(--text); } /* =========================================================================== EKOSISTEM DIYAGRAMI (buyuk, animasyonlu - yalniz metrowo.com) =========================================================================== */ /* {CC} 2026-09-04: Matt: "Calibration management secildiginde animasyonun boyu kisa gelmeye baslamis, sagda dikey scrollbar cikiyor." Iframe'in .html ici gercek icerigi (Calibration paneli acikken) 902px olculuyordu, sabit yukseklik ise tam 900px'ti - 2px'lik farkin bile scrollbar dogurdugu kadar dar bir pay birakilmisti. 900px -> 940px, gercek ihtiyactan (902px) rahat bir pay (38px) birakildi. */ .ecosystem-diagram-frame{ width: 100%; height: 940px; border: 0; display: block; background: var(--bg-dark); } /* =========================================================================== KART IZGARASI (urun kartlari, sekiz modul, dort adim vb.) =========================================================================== */ .card-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); } .card{ display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); } a.card{ text-decoration: none; color: inherit; transition: border-color var(--fade) ease; } a.card:hover{ border-color: var(--accent-deep); } .card.is-muted{ opacity: 0.55; border-style: dashed; } .card h3{ margin-bottom: var(--sp-2); } .card p{ margin-bottom: var(--sp-3); } .card .badge{ margin-top: var(--sp-3); } .card .card-link{ color: var(--accent-deep); font-weight: 600; } /* =========================================================================== IS AKISI SERIDI (Gypsy zinciri vb.) =========================================================================== */ .flow-strip{ display: flex; align-items: center; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-4) 0; } .flow-step{ flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; } .flow-step.is-muted{ opacity: 0.5; border-style: dashed; } .flow-arrow{ color: var(--text-dim); } /* =========================================================================== CTA SERIDI =========================================================================== */ .cta-strip{ background: var(--panel); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6); text-align: center; } .cta-strip h2{ margin-bottom: var(--sp-5); } /* =========================================================================== RESIM YER TUTUCU (satir ici SVG - inline stil gerekmiyor, SVG kendi tasir) =========================================================================== */ .placeholder-note{ font-size: var(--fs-small); color: var(--text-dim); } /* =========================================================================== BASARI HIKAYESI (Success Stories - metrowo.com, ayri sayfalar) Banner rengi kaynak PDF'in kendi banner rengine gore (Matt onayli, MARKA-KURALLARI'ndaki iki-renk sisteminden bu sayfalara ozel sapma) =========================================================================== */ .story-back-link{ display: inline-block; margin-bottom: var(--sp-5); font-size: var(--fs-small); } .story-link-list{ margin: var(--sp-4) 0 0; } .story-link-list li{ margin-bottom: var(--sp-2); } .story-banner{ padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); background-size: cover; background-position: center bottom; } .story-banner h1{ margin: 0; } .story-banner.is-2002{ background-image: linear-gradient(135deg, rgba(31,169,160,0.75), rgba(127,231,224,0.75)), url("assets/success/2002/banner.png"); } .story-banner.is-2002 h1{ color: #0B2E2B; } .story-banner.is-2003{ background-image: linear-gradient(135deg, rgba(14,59,61,0.85), rgba(28,96,104,0.85)), url("assets/success/2003/banner.png"); } .story-banner.is-2003 h1{ color: #EAFBFA; } .story-banner.is-2005{ background-image: linear-gradient(135deg, rgba(255,206,0,0.7), rgba(255,243,176,0.7)), url("assets/success/2005/banner.png"); } .story-banner.is-2005 h1{ color: #3A2E00; } /* Bolum baslik ikonu - kaynak PDF'in ilerleme gostergesi (Customer->Result) */ .step-icon{ width: 28px; height: 28px; vertical-align: middle; margin-right: var(--sp-2); } /* =========================================================================== HUKUKI SAYFA (legal-doc) =========================================================================== */ .legal-doc .legal-meta{ font-size: var(--fs-small); color: var(--text-dim); font-family: var(--font-mono); } .legal-doc h2{ margin-top: var(--sp-7); } .legal-doc h3{ margin-top: var(--sp-5); } .legal-doc ul{ margin: 0 0 var(--sp-4); padding-left: var(--sp-5); list-style: disc; } .legal-doc li{ margin-bottom: var(--sp-2); color: var(--text-muted); } .legal-doc .legal-end{ color: var(--text-dim); font-size: var(--fs-small); } /* =========================================================================== FORM =========================================================================== */ .form-field{ margin-bottom: var(--sp-4); } .form-field label{ display: block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-2); } .form-field input, .form-field select, .form-field textarea{ width: 100%; padding: var(--sp-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline: none; border-color: var(--accent-deep); } .form-field-checkbox{ display: flex; align-items: flex-start; gap: var(--sp-2); } .form-field-checkbox input{ width: auto; margin-top: 4px; } .required-mark{ color: var(--accent-deep); } .required-legend{ font-size: var(--fs-small); color: var(--text-dim); margin: var(--sp-2) 0 var(--sp-4); } .hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .captcha-field img{ border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: var(--sp-2); } .captcha-refresh{ font-size: var(--fs-small); margin-left: var(--sp-3); cursor: pointer; background: none; border: 0; color: var(--accent-deep); padding: 0; } .form-message{ display: none; padding: var(--sp-4); border-radius: var(--radius); border: 1px solid var(--accent-deep); color: var(--accent-deep); margin-bottom: var(--sp-4); } .form-message.is-visible{ display: block; } .contact-form.is-sent{ display: none; } /* =========================================================================== FOOTER =========================================================================== */ .site-footer{ padding: var(--sp-8) 0 var(--sp-6); } .site-footer-inner{ max-width: var(--w-content); margin: 0 auto; padding: 0 var(--sp-5); display: grid; /* 2026-09-08 (Matt): Resource Center'in icerigi kaldirildi ama sutun GRID'DE yer kaplamaya devam ediyor (footer.php, visibility:hidden) - Legal Notices/Newsletter'in kaymamasi icin 4 sutun GERI acildi. */ grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } .footer-heading{ font-size: var(--fs-cap); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--sp-3); } .footer-menu li{ margin-bottom: var(--sp-2); } .footer-menu a{ color: var(--text-muted); font-size: var(--fs-small); } .footer-menu a:hover{ color: var(--accent-deep); } .footer-phone{ font-family: var(--font-mono); color: var(--text-muted); } .site-footer-bottom{ max-width: var(--w-content); margin: var(--sp-7) auto 0; padding: var(--sp-5) var(--sp-5) 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; } .footer-social{ display: flex; gap: var(--sp-4); } .social-link{ font-size: var(--fs-small); color: var(--text-dim); } .footer-copy, .footer-trademark{ font-size: var(--fs-cap); color: var(--text-dim); margin: 0; } /* =========================================================================== PROBLEM CRAWL - {CC} 2026-09-07, Bolum "hero video -> problem animasyonu" karari. Video banner slotunun yerini alan Star Wars tarzi yukari akan problem listesi + altindaki statik/tiklanabilir liste (SEO/erisilebilirlik yedegi - crawl-only icerik ekran okuyucu icin gorunmez olurdu). MIMARI (2026-09-07, Matt'in verdigi calisan referans koduna GORE BIREBIR UYARLANDI - E:\_17_WEBSITES\assets\StarWarsEffect\index.html/style.css). 3D transform (rotateX+perspective) TEK SEFERLIK ve SABIT, `.problem-crawl- scroller`da tanimli - JS HER FRAME style YAZMAZ, CSS `@keyframes` + tarayicinin kendi compositor'u hareketi yonetir. ONEMLI - GLITCH KOK NEDENI (uzun debug sureci, sirayla denendi/elendi): Chrome, `text-align:center` OLAN bir elemana rotateX(3D) uygulaninca kalin webfontu TUTARSIZ render ediyor - AYNI satirda/paragrafta bazi satirlar egik, bazilari duz cikiyor (zoom ekran goruntusuyle defalarca dogrulandi). Elenen hipotezler: font (Barlow VE Arial'de de ayni hata - font-specific degil), genislik (tam viewport genisliginde VE 640px dar genislikte de ayni hata - Matt'in referans dosyasinda calisan versiyon ONA GORE DAR olsa da, asil degisken genislik degildi), per-frame JS rewrite (SABIT/statik transform'da da ayni hata cikti - mimari degil), line-height (1.15 VE 1.6'da da ayni hata). TEK degisken hatayi duzelten: `text-align:center` -> `text-align:left` (Matt'in referans dosyasi zaten `text-align:justify` kullaniyordu, o da glitch vermiyordu - ikisi de "her satirin sabit/degismeyen bir X baslangic noktasi olmasi" ortak paydasinda; center'in HER SATIR ICIN FARKLI bir X-baslangici hesaplamasi rotateX'in 3D matrisiyle CAKISIYOR). Gorsel olarak ortalanmis GORUNMESI icin text-align:left KALIYOR (guvenli) ama JS (problem-crawl.js, centerLines()) her satirin dogal genisligini bir kez olcup sabit `width` + `margin:auto` uyguluyor - blok kendisi ortalaniyor, icindeki metin sola yasli ama blok tam metin genisliginde oldugu icin fark edilmiyor. - Yamuk/perspektif (alt genis, ust dar) GERCEK 3D projeksiyondan gelir, otomatik - ayrica scale() hesaplamaya gerek yok. - "Uzaklastikca yavaslama" gercek perspektifin dogal bir sonucu. - Sonme: `.problem-crawl-viewport::before` gradyanina birakiliyor. Satirlar `.problem-crawl-track` icinde NORMAL AKISTA (duz p/a elemanlari) - GAP, satir margin'i ile saglanir. ========================================================================== */ .problem-crawl-section{ background: var(--bg-dark); padding: var(--sp-8) 0; } .problem-crawl-viewport{ --crawl-scroller-half-width: 832px; /* Matt: "neredeyse tam, birkac 10px daha genislet" - 792px'den 40px arttirildi. .problem-crawl-scroller genisliginin yarisi - intro'nun konumu (asagida) da bundan turer, TEK yerden degistirilir. Matt: "listenin aktigi alan ufalmali, sola/saga dayali yazilar en az intro'nun iki kati kadar iceride olmali" - 1472px'den 680px (=intro'nun scroller kenarindan ice-tasma miktarinin, 340px'in, iki kati) kadar dusuruldu. */ position: relative; width: 100%; margin: 0 auto; height: 85vh; max-height: 860px; overflow: hidden; } .problem-crawl-viewport::before{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--bg-dark) 0%, transparent 20%, transparent 82%, var(--bg-dark) 100%); } .problem-crawl-intro{ /* = Matt'in referans dosyasindaki `.intro`: ekranin ortasinda SABIT (kaymayan) baslik - belirir, bir sure kalir, kaybolur, SONRA asil crawl kaymaya baslar. Metin JS'te (problem-crawl.js) crawl'in ilk satirindan (.problem-crawl-lead) klonlanir - icerik WP'de TEK yerde kalir (Bolum 9.1), burada tekrar yazilmaz. */ /* Konum: crawl metninin akacagi alanin (.problem-crawl-scroller) SOL KENARINA gore, sonra iki kez daha SAGA kaydirildi: once "iki kati kadar ortaya al" (+340px), sonra (2. checkpoint sonrasi) "intro genisligi kadar saga al" (+340px daha) - toplam +680px. `max()` ile GUVENLIK PAYI: scroller yarisi (1472px) SABIT bir piksel degeri - dar pencerelerde (orn. 1120px) bu hesap ekranin COK disina (negatif x) tasiyordu (Matt bulgusu, canli test edildi, iki kez duzeltildi). Pay = max-width/2 (340px, genislik iki katina cikince guncellendi) + var(--sp-6). */ position: absolute; top: 50%; left: max(calc(50% - var(--crawl-scroller-half-width) + 680px), calc(var(--sp-6) + 340px)); transform: translate(-50%, -50%); z-index: 3; max-width: 680px; /* Matt: "genisligini iki katina cikart" - 340px'den */ text-align: left; color: var(--text-on-dark); /* Matt: "beyaza yakin gri" */ font-family: var(--font-head); font-weight: 400; /* Matt: "hicbir yazi bold olmasin" */ font-size: 3rem; /* Matt: "boylari kisaldi, uzat" - 2.25rem'den geri 3rem'e */ line-height: 1.35; opacity: 0; pointer-events: none; /* 2026-09-08 (Matt): "ilk Across yazisi ekranda 5 saniye kaliyor, 3 sn'ye indir" - 6s -> 3s (yuzdelik keyframe'ler ayni kaldigi icin fade-in/hold/fade-out orani korunuyor, sadece toplam sure kisaldi). */ animation: problem-crawl-intro-fade 3s ease-out 0.3s; } @keyframes problem-crawl-intro-fade{ 0%{ opacity: 0; } 20%{ opacity: 1; } 80%{ opacity: 1; } 100%{ opacity: 0; } } .problem-crawl-scroller{ /* = Matt'in #scroller'i: left:50%+negatif margin ile ortalanmis, overflow:hidden + perspective+rotateX AYNI elemanda. Genislik glitch sebebi DEGILDI (kok neden text-align:center'di, yukaridaki nota bakiniz) - o yuzden Matt'in "yataydaki genisligi en az 4 kati yap" talebiyle serbestce buyutulebildi. */ position: absolute; top: 0; bottom: 0; left: 50%; width: calc(2 * var(--crawl-scroller-half-width)); /* Matt: "liste alani ufalmali" - artik --crawl-scroller-half-width'ten turer */ margin-left: calc(-1 * var(--crawl-scroller-half-width)); overflow: hidden; perspective: 500px; } .problem-crawl-track{ position: absolute; top: 100%; left: 0; right: 0; transform-origin: 50% 0%; transform: rotateX(24deg) translateY(0); animation-name: problem-crawl-scroll; animation-duration: 60s; /* JS gercek sureyi olcup ezer */ animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; /* JS olcumu bitince 'running' yapar */ } /* Hover-durdurma artik BURADA degil, problem-crawl.js icinde - Matt: "sadece linkli alanlarin uzerine gelince akma dursun, bos alanlarda mouse durmayi engellemesin" - CSS ile TUM viewport'u kapsayan eski kural (`.problem-crawl-viewport:hover`) bu yuzden KALDIRILDI, sadece `.problem-crawl-item` linklerine JS mouseenter/leave baglaniyor. */ @keyframes problem-crawl-scroll{ from{ transform: rotateX(24deg) translateY(0); } to{ transform: rotateX(24deg) translateY(calc(-1 * var(--crawl-distance, 2000px))); } } .problem-crawl-lead, .problem-crawl-category, .problem-crawl-item{ display: block; text-align: left; /* GLITCH DUZELTMESI - asagidaki nota bakiniz, DEGISTIRME */ -webkit-font-smoothing: antialiased; } .problem-crawl-lead{ color: var(--text-muted-on-dark); font-family: var(--font-head); font-weight: 400; /* Matt: "hicbir yazi bold olmasin" - 700'den 400'e */ font-stretch: normal; font-size: 3rem; line-height: 1.15; padding: 0 4ch; margin: 0 0 var(--sp-6) 0; } .problem-crawl-category{ /* Matt: "yesil olanlari yani baslik saga dayali" - centerLines() (problem-crawl.js) bu sinifi ATLAR, tam scroller genisliginde kalir, text-align:right GORUNUR olur. */ font-family: var(--font-head); font-weight: 400; /* Matt: "hicbir yazi bold olmasin" - 700'den 400'e */ font-stretch: normal; font-size: 3.5rem; line-height: 1.1; color: var(--output); text-transform: uppercase; letter-spacing: var(--ls-cap); text-align: right; padding: 0 4ch; margin: var(--sp-8) 0 var(--sp-5) 0; /* Matt: "onceki grubun son satiri ile bu baslik arasinda bosluk (bir satir) olsun" - margin-top eklendi */ } .problem-crawl-item{ /* Matt: "normal yazilar sola dayali" - centerLines() bu sinifi da ATLAR, tam scroller genisliginde kalir, text-align:left GORUNUR olur. */ color: var(--text-on-dark); font-family: var(--font-head); font-weight: 400; /* Matt: "hicbir yazi bold olmasin" - 700'den 400'e */ font-stretch: normal; font-size: 2.5rem; line-height: 1.2; text-align: left; text-decoration: none; padding: 0 4ch; margin: 0 0 var(--sp-4) 0; } .problem-crawl-item:hover, .problem-crawl-item:focus{ color: var(--output); text-decoration: underline; } .problem-crawl-quote{ /* Matt: "bu satirlara tiklanamasin, bunlar problem degil, problemin dile getirilme sekilleri - sadece alttaki listeye tiklanabilecek" - zaten (href yok, tiklanamaz), ama .problem-crawl-item ile AYNI class'i paylastigi icin link gibi hover/altcizgi efekti ALIYORDU - kafa karistirici. Ayri bir sinif: item ile AYNI yerlesim (sol yasli, centerLines() atlar) ama hover efekti YOK. */ color: var(--text-muted-on-dark); font-family: var(--font-head); font-weight: 400; font-stretch: normal; font-size: 2.5rem; line-height: 1.2; text-align: left; display: block; padding: 0 4ch; margin: 0 0 var(--sp-4) 0; } .problem-crawl-lead-gap{ /* Matt: "Here is what... satirindan once 3 bos satir olsun" */ margin-top: 9rem; } .problem-crawl-hint{ text-align: center; color: var(--text-muted-on-dark); font-size: var(--fs-small); margin-top: var(--sp-3); } @media (prefers-reduced-motion: reduce){ .problem-crawl-viewport{ height: auto; max-height: none; overflow: visible; } .problem-crawl-viewport::before{ display: none; } .problem-crawl-intro{ display: none; } /* lead satiri zaten asagida statik listede gorunuyor */ .problem-crawl-scroller{ position: static; width: auto; margin-left: 0; overflow: visible; perspective: none; } .problem-crawl-track{ position: static; animation: none; transform: none; } } .problem-list-section{ background: var(--bg); } .problem-list-section .section-subtitle{ margin-bottom: 0; } .problem-list-note{ margin: var(--sp-8) 0 0 0; } .problem-list-note p{ font-size: var(--fs-small); font-weight: 400; color: var(--text-dim); white-space: nowrap; margin: 0 0 var(--sp-1) 0; } .problem-list-note a{ color: var(--accent-deep); text-decoration: underline; } @media (max-width: 1024px){ .problem-list-note p{ white-space: normal; } } .problem-list-groups{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-6); row-gap: var(--sp-8); margin-top: var(--sp-7); } @media (max-width: 1024px){ .problem-list-groups{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px){ .problem-list-groups{ grid-template-columns: 1fr; } } .problem-list-group h3{ font-family: var(--font-head); font-size: var(--fs-h3); color: var(--accent-deep); margin-bottom: var(--sp-3); } .problem-list-group ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .problem-list-group li a{ display: block; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; font-size: var(--fs-body); line-height: var(--lh-body); } .problem-list-group li a:hover, .problem-list-group li a:focus{ color: var(--accent-deep); text-decoration: underline; } /* =========================================================================== KIRILMA NOKTALARI - 480 / 768 / 1024 / 1280 =========================================================================== */ @media (max-width: 1024px){ .site-footer-inner{ grid-template-columns: repeat(2, 1fr); } } /* {CC} 2026-09-20 - genislik bazli (max-width:768px) tetikleyici masaustu pencere daraltilinca da hamburger menuye donusuyordu - Matt bulgusu. Sonra @media(pointer:coarse) denendi, Matt'in gercek telefonunda tutarsiz sonuc verdi. Simdi JS ile eklenen html.is-touch sinifina baglandi - Matt tarafindan dogrulanan yontem. */ html.is-touch .primary-nav-list{ display: none; } html.is-touch .menu-toggle{ display: flex; flex-direction: column; gap: 4px; background: none; border: 0; padding: var(--sp-2); } html.is-touch .menu-toggle span{ width: 20px; height: 2px; background: var(--text); } html.is-touch #site-header.is-open .primary-nav-list{ display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); padding: var(--sp-4); gap: var(--sp-4); border-top: 1px solid var(--line); z-index: 50; } html.is-touch #site-header.is-open .primary-nav-list li{ width: 100%; } html.is-touch #site-header.is-open .primary-nav-list a{ display: block; padding: var(--sp-2) 0; } html.is-touch{ --header-h: 76px; } html.is-touch .site-logo-img{ height: 56px; } /* {CC} 2026-09-20 - dar telefonlarda header toplam icerigi taşabiliyor, hamburger gorunur alanin disina itilebiliyordu (GageEye'da bulundu, ayni kalip burada da onleyici olarak uygulandi). */ html.is-touch .site-header-inner{ gap: var(--sp-3); } html.is-touch .site-header-cta{ padding: var(--sp-2) var(--sp-3); } @media (max-width: 480px){ .site-footer-inner{ grid-template-columns: 1fr; } .hero .hero-sub{ font-size: var(--fs-body); } } /* =========================================================================== VIDEO LIGHTBOX - [video_ref] icin (kendi sunucumuzdan MP4, YouTube yok) =========================================================================== */ .video-lightbox-link{ cursor: pointer; text-decoration: underline; text-decoration-style: dotted; } .video-lightbox-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; align-items: center; justify-content: center; padding: var(--sp-5); } .video-lightbox-overlay.is-open{ display: flex; } .video-lightbox-box{ position: relative; width: 100%; max-width: 960px; } .video-lightbox-player{ display: block; width: 100%; height: auto; background: #000; } .video-lightbox-close{ position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; padding: var(--sp-2); }