/* ============================================================ Ayla Uğur — Ortak Frontend Bileşen Standartları (REFERANS) Tema CSS'ine dokunmadan, tüm sayfalarda tutarlı görünüm için. Görsel/ürün kartlarındaki metinler (ürün adı, kreasyon, kod, buton) bu standartla aynı font ve boyutta olmalıdır. ============================================================ */ /* ---- ÜRÜN / GÖRSEL KARTI METİN STANDARDI ---- Ürün adı (en büyük): tema .gl-product-info h3 → font: var(--font-serif), boyut: clamp(16px,1.8vw,22px), weight 400 Aşağıdaki öğeler ürün adından KÜÇÜK kalır. */ /* Atölye hero — başlık/metin daha şık (dengeli kırılım, ferah) */ .gl-atl-hero-title{ text-wrap:balance; } .gl-atl-hero-lede{ text-wrap:pretty; } /* Atölye — hero altı hızlı erişim şeridi (okunaklı, sticky) */ .gl-atl-jumpbar{ position:sticky; top:0; z-index:50; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 38px; padding:16px 24px; background:rgba(20,16,14,.96); backdrop-filter:blur(6px); border-top:1px solid rgba(201,169,110,.25); border-bottom:1px solid rgba(201,169,110,.25); } .gl-atl-jumpbar a{ display:inline-flex; align-items:center; gap:8px; color:#e8e0d4; font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; transition:.15s; white-space:nowrap; } .gl-atl-jumpbar a:hover{ color:#c9a96e; } .gl-atl-jb-no{ color:#c9a96e; font-size:12px; font-weight:600; } @media (max-width:575px){ .gl-atl-jumpbar{ gap:6px 20px; padding:12px 14px; } .gl-atl-jumpbar a{ font-size:12px; letter-spacing:.05em; } } /* Kreasyon detay "parçalar" grid'i — tek/az kart dev olmasın (sabit genişlik, ortalı) */ .gl-krd-pieces-grid{ grid-template-columns:repeat(auto-fill, minmax(220px, 260px)) !important; justify-content:center; } /* ---- ÜRÜN ETİKET ROZETLERİ (outline) ---- Birden fazla etiket alt alta dizilir; uzun yazılar (Sınırlı Üretim) kırpılmaz. */ .gl-product-badges{ position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .gl-product-badge{ position:static !important; /* tema absolute konumunu ez */ top:auto !important; left:auto !important; /* renk satır içinden gelir — okunur_metin_rengi() etiket rengine göre seçer */ border:none; padding:5px 12px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; line-height:1.2; border-radius:4px; white-space:nowrap; /* kırpılmasın */ box-shadow:0 2px 10px rgba(0,0,0,.28); text-shadow:0 1px 2px rgba(0,0,0,.25); } /* Detay sayfası rozeti NOT: renk artık satır içinde `okunur_metin_rengi()` ile geliyor (etiket rengine göre siyah/beyaz). Buraya `color:#fff !important` YAZMA — satır içini ezer ve açık zeminli etiketlerde yazı okunmaz olur. */ .gl-ud-badge{ border:none; white-space:nowrap; font-weight:600; letter-spacing:.06em; box-shadow:0 2px 10px rgba(0,0,0,.28); text-shadow:0 1px 2px rgba(0,0,0,.25); } /* Kreasyon / koleksiyon adı — üründen küçük */ .gl-product-kreasyon{ display:block; margin:3px 0 0; font-size:14px; color:rgba(240, 232, 220, .78); } /* Kod + buton alt alta, ortalı */ .gl-product-foot{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; } /* Ürün kodu — butonla orantılı, ortalı */ .gl-product-kod{ font-size:12px; letter-spacing:.6px; color:rgba(240, 232, 220, .85); font-weight:600; line-height:1; text-align:center; } /* "Bilgi Al" — nötr outline, hover'da yeşil (solid değil) */ .gl-product-wa{ display:inline-flex; align-items:center; gap:6px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); padding:6px 14px; border-radius:4px; font-size:12px; font-weight:600; cursor:pointer; transition:.18s; white-space:nowrap; } .gl-product-wa:hover{ background:rgba(37,211,102,.12); border-color:#25d366; color:#25d366; } .gl-product-wa i{ font-size:14px; } /* ===== Ürün Detay — Bilgi Sekmeleri (Akordeon) ===== */ .gl-ud-accordion{ margin:26px 0 4px; border-top:1px solid rgba(255,255,255,.12); } .gl-ud-acc-item{ border-bottom:1px solid rgba(255,255,255,.12); } .gl-ud-acc-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 2px; cursor:pointer; list-style:none; font-family:var(--font-serif,serif); font-size:clamp(15px,1.4vw,17px); color:inherit; transition:color .2s; } .gl-ud-acc-head::-webkit-details-marker{ display:none; } .gl-ud-acc-head:hover{ color:#c9a96e; } .gl-ud-acc-icon{ font-size:13px; color:#c9a96e; transition:transform .25s; flex:0 0 auto; } .gl-ud-acc-item[open] .gl-ud-acc-icon{ transform:rotate(45deg); } .gl-ud-acc-body{ padding:0 2px 18px; } .gl-ud-acc-body p{ margin:0; font-size:14px; line-height:1.7; opacity:.82; } /* ===== Koleksiyonlar Hero — atölye hero ile aynı yükseklik (70vh, dikey ortalı) ===== */ .gl-page-hero{ min-height:70vh !important; height:auto !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; padding-top:clamp(63px,9.9vh,110px) !important; padding-bottom:clamp(36px,6.6vh,66px) !important; } /* ===== Atölye Hero — iki kolon (sol başlık · sağ açıklama dikey ortalı, sağa yaslı) ===== */ /* Simetrik padding → içerik hero'nun dikey tam ortasında */ .gl-atl-hero{ padding-top:clamp(48px,7vh,80px) !important; padding-bottom:clamp(48px,7vh,80px) !important; } /* Mini başlık (eyebrow) — tutarlı boyut + dengeli satır yüksekliği */ .gl-atl-hero-eyebrow{ font-size:clamp(12px,1.05vw,14px) !important; line-height:1.4 !important; } .gl-atl-hero-split{ max-width:1240px; display:flex; align-items:center; justify-content:space-between; gap:clamp(32px,6vw,90px); } .gl-atl-hero-main{ flex:1 1 50%; min-width:0; } .gl-atl-hero-aside{ flex:0 1 46%; display:flex; align-items:center; /* dikey ortalı */ justify-content:flex-end; /* sağa yaslı */ /* Yazıyı sağ kenara yaklaştırmak için hero'nun kendi dolgusunun İÇİNE taşıyoruz. Çekme miktarı dolguya BAĞLI olmalı: ⚠️ Buradaki değer sabit -100px idi. Hero'nun yatay dolgusu ise clamp(20px, 5vw, 80px) — yani 1024px'te yalnızca 51px. 100px çekince metin 49px viewport DIŞINA taşıyor, `overflow:hidden` de onu kesiyordu: "…on dört za|" (zanaatkâr), "…burada t|" (topladık). 981-1300px bandında, yani tipik dizüstü genişliklerinde okunmaz haldeydi. Formül metnin sağ kenarını her genişlikte tam 24px içeride tutar: sağ boşluk = dolgu − çekme = 24px → çekme = dolgu − 24px */ margin-right: calc(24px - clamp(20px, 5vw, 80px)); } .gl-atl-hero-aside .gl-atl-hero-lede{ margin:0; text-align:right; max-width:none; font-size:clamp(17px,1.55vw,21px); line-height:1.7; } @media (max-width:980px){ .gl-atl-hero-split{ flex-direction:column; align-items:flex-start; gap:24px; } .gl-atl-hero-aside{ justify-content:flex-start; margin-right:0; } .gl-atl-hero-aside .gl-atl-hero-lede{ text-align:left; max-width:none; } } /* ===== Ürün kartı görseli — alanı doldurur, dikey ortadan hizalı ===== */ .gl-product-img .p-main, .gl-product-img .p-hover{ object-fit:cover !important; object-position:center center !important; background:#15110d; } /* ===== Ürün DETAY ana görseli — kırpma yok (etek dahil tam görünür) ===== */ .gl-ud-main-img img{ object-fit:contain !important; object-position:center !important; } /* ===== Antrasit gradyan arka plan tüm sitede ===== Antrasit gradyan body.dark-theme::before ile global (fixed katman). Sayfaların içerik bölümleri kahve-siyah bg ile onu örtüyordu; o düz örtüleri kaldırıyoruz. Görselli hero'lar ([class*="hero"]) HARİÇ — onların arka plan görseli korunur. ⚠️ BUTON/BAĞLANTILAR HARİÇ: desen `[class*="-cta"]` yalnız bölümleri değil, `gl-br-cta-btn-primary` gibi BUTONLARI da yakalıyordu. Butonun altın zemini siliniyor, geriye koyu zeminde koyu yazı (#1a1612) kalıyordu — görünmez buton. Kontrast ölçümünde 1.06 oranıyla yakalandı. */ .gelinlik-body [class*="-cta"]:not(a):not(button):not([class*="-btn"]), .gelinlik-body [class*="-manifesto"], .gelinlik-body [class*="-stats"], .gelinlik-body [class*="-founder"], .gelinlik-body [class*="-vm"], .gelinlik-body [class*="-values"], .gelinlik-body [class*="-process"], .gelinlik-body [class*="-visits"], .gelinlik-body [class*="-measure"], .gelinlik-body [class*="-zones"], .gelinlik-body [class*="-related"], .gelinlik-body [class*="-timeline"], .gelinlik-body [class*="-lookbook"], .gelinlik-body [class*="-notes"], .gelinlik-body [class*="-editorial"], .gelinlik-body [class*="-products"], .gelinlik-body [class*="-appt"], .gelinlik-body .gl-ilt-main, .gelinlik-body .gl-ilt-map, .gelinlik-body .gl-kvk-main, .gelinlik-body .gl-kol-section, .gelinlik-body .gl-ud-main, .gelinlik-body .gl-fav-page, .gelinlik-body .gl-sss-main, .gelinlik-body .gl-br-main{ background-color:transparent !important; background-image:none !important; } /* ===== Koleksiyonlar filtre barı — yazılar 9px çok küçüktü, büyütüldü ===== */ .gl-filter-toggle-btn, .gl-kol-tab, .gl-kol-count, .gl-kol-sort span, .gl-kol-sort select{ font-size:12px !important; letter-spacing:1.4px !important; } /* Filtre drawer (açılan panel) içi yazılar — aynı oranda (.gl-fd-group-trigger buradan çıkarıldı → dosya sonu "FİLTRE GRUP BAŞLIKLARI") */ .gl-fd-reset, .gl-fd-apply, .gl-fd-active-count{ font-size:12px !important; } /* 2026-08-05: 13px → --ty-mini (14px). Ölçekte 13px diye bir kademe yok. `!important` KORUNDU — buradaki tema kurallarını ezmek için konmuş; kaldırılırsa filtre çekmecesindeki etiketler tema değerine geri döner. */ .gl-fd-opt-label{ font-size: var(--ty-mini) !important; } /* ===== Footer okunabilirliği (koyu zeminde #555/#444 çok karanlıktı) ===== */ .dark-theme .bridal-footer-col a{ color:rgba(240, 232, 220,.6); } .dark-theme .bridal-footer-col a:hover{ color:#c9a96e; } .dark-theme .bridal-footer-brand p{ color:#e8e0d4; } .dark-theme .bridal-footer-social a{ color:rgba(240, 232, 220,.55); } .dark-theme .bridal-footer-social a:hover{ color:#c9a96e; } .dark-theme .bridal-footer-bottom p{ color:rgba(240, 232, 220,.45); } /* ===== Genel gövde metin rengi ===== Başlıklar (h1-h6) ve hero alanları kendi rengini korur. #e8e0d4 → #dcd5ca (2026-08-02, kullanıcı isteği): metnin ekrandaki AÇIKLIĞINI eski haline döndürmek için. Gerekçe ve ölçüm: Uzun süre tarayıcılar önbellekteki eski CSS yüzünden metni Montserrat sanıp macOS sistem fontu "Helvetica Neue" ile çiziyordu. Önbellek sürümlemesi eklenince site kendi fontuna (Jost) döndü. Renk DEĞERİ değişmedi ama Jost aynı renkte %7.2 daha fazla "mürekkep" bırakıyor (canvas ile ölçüldü: mürekkep 7.262 vs 6.775), yani metin dolgunlaştı. Bu renk, Jost ile ESKİ ekran açıklığını birebir veren karşılık: doğrulama mürekkep 6.762 ≈ hedef 6.775. ⚠️ Bu değişiklik metni bir miktar SÖNÜKLEŞTİRİR — okunaklık artırma yönündeki çalışmayla ters yönde. Kontrast 14.56 → 13.08:1, eşiğin çok üstünde kaldığı için güvenli. Geri almak için değeri #e8e0d4 yapmak yeterli. */ .gelinlik-body p, .gelinlik-body li, .gelinlik-body dd, .gelinlik-body td, .gelinlik-body label, .gelinlik-body figcaption, .gelinlik-body blockquote{ color:#dcd5ca; } /* Editöryal kart paragrafı kendi (daha sakin) tonunu kullanıyor — onun da Jost karşılığı: #a89f8e → #9e9586, kontrast 7.27 → 6.44:1 */ .dark-theme .gl-editorial-right p{ color:#9e9586; } /* Hero alanları + küçük dekoratif/CTA alıntıları hariç (kendi tema rengini korusun) */ .gelinlik-body [class*="-hero"] p, .gelinlik-body [class*="-hero"] li, .gelinlik-body [class*="-hero"] label, .gelinlik-body [class*="-hero"] dd, .gelinlik-body .gl-appt p, .gelinlik-body [class*="-cta"] p, .gelinlik-body [class*="-cta-lede"], .gelinlik-body [class*="-cta-sub"]{ color:revert; } /* ===== Koleksiyonlar hero, Atölye banner'ının aynısı ===== Blade'de doğrudan .gl-atl-hero* sınıfları kullanılıyor (bileşen paylaşılıyor). .gl-hero-okunakli — okunabilirlik katmanı. Atölye'nin fotoğrafı koyu olduğu için orada katman yok; Koleksiyonlar'a her türlü görsel yüklenebildiği için metnin altına kontrast garantisi koyuyoruz. Düz koyu perde fotoğrafı öldürür — bunun yerine YATAY gradyan: metnin oturduğu iki kenar koyu, fotoğrafın nefes aldığı orta bölge açık. */ .gl-hero-okunakli::before{ content: ''; position: absolute; inset: 0; /* Katman sırası: -bg (z:0) → scrim (z:1, ::before olduğu için DOM'da önce) → -inner (z:1, DOM'da sonra ⇒ metin en üstte). Scrim'e 0 verilirse -bg div'i DOM'da sonra geldiği için scrim'i örter. */ z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,8,6,.78) 0%, rgba(10,8,6,.42) 38%, rgba(10,8,6,.34) 55%, rgba(10,8,6,.72) 100%), linear-gradient(180deg, rgba(10,8,6,.30) 0%, transparent 30%, transparent 70%, rgba(10,8,6,.40) 100%); } /* Açıklama: tema onu İTALİK Cormorant serif olarak veriyor — koyu düz zeminde zarif, ama detaylı fotoğraf üstünde ince tırnaklı harfler kayboluyor. Yazı karakterini değiştirmiyoruz (tasarım dili bozulmasın); bunun yerine metnin arkasına KENARI YUMUŞAK yerel bir perde koyuyoruz. Kutu görünmez, sadece o bölgedeki fotoğraf sakinleşir. */ .gl-hero-okunakli .gl-atl-hero-aside{ position: relative; isolation: isolate; /* ::before yalnızca bu blokta katmanlansın */ } .gl-hero-okunakli .gl-atl-hero-aside::before{ content: ''; position: absolute; inset: -30px -40px -30px -60px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 62% 50%, rgba(8,6,5,.80) 0%, rgba(8,6,5,.66) 48%, rgba(8,6,5,.34) 74%, transparent 92%); } /* İtalik serifin gövdesini biraz kalınlaştır — 400'de tırnaklar çok inceydi. */ .gl-hero-okunakli .gl-atl-hero-lede{ color: rgba(252, 249, 244, .97); font-weight: 500; text-shadow: 0 1px 4px rgba(0,0,0,.6); } .gl-hero-okunakli .gl-atl-hero-title{ text-shadow: 0 2px 14px rgba(0,0,0,.45); } .gl-hero-okunakli .gl-atl-hero-eyebrow{ color: #d9bd85; /* altın, fotoğraf üstünde .85 opaklık sönük kalıyordu */ text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* Dar ekranda iki sütun alt alta gelir; gradyan da dikeye döner */ @media (max-width: 980px){ .gl-hero-okunakli::before{ background: linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.40) 45%, rgba(10,8,6,.72) 100%); } } /* ============================================================ HERO TİPOGRAFİ BİRLİĞİ Denetimde üç sürüklenme çıktı; tema dosyalarına dokunmadan burada tekleştiriliyor: 1) Ana başlık üç ayrı ölçekteydi → 76 / 84 / 78 px 2) Başlık rengi ikiye ayrılmıştı → #f5e3b8 (altın) ve #f0e8dc (krem) 3) Hakkımızda açıklaması aykırıydı → sabit 14px, %55 opak beyaz Mini başlık (eyebrow) zaten tutarlıydı: 14px / .36em / altın .85 / uppercase. ============================================================ */ /* 0 — Mini başlık: masaüstünde zaten 14px'te buluşuyor, küçük ekranda 12px'e iner. 0.36em harf aralığıyla sabit 14px dar ekranda kötü sarıyordu. */ .gl-atl-hero-eyebrow, .gl-hkk-hero-eyebrow, .gl-ilt-hero-eyebrow, .gl-sss-hero-eyebrow, .gl-kvk-hero-eyebrow, .gl-br-hero-eyebrow{ font-size: clamp(12px, 1.05vw, 14px); line-height: 1.4; } /* 1+2 — Tek ölçek, tek renk. Ortadaki değer seçildi; en uzun başlık (Atölye, üç satır) 78px'te taşmıyor, en kısa başlık (KVK) boşlukta kaybolmuyor. */ .gl-atl-hero-title, .gl-hkk-hero-title, .gl-ilt-hero-title, .gl-sss-hero-title, .gl-kvk-hero-title, .gl-br-hero-title{ font-size: clamp(40px, 6vw, 78px); line-height: 1.05; letter-spacing: .01em; font-weight: 400; color: #f0e8dc; text-wrap: balance; /* satır kırılımı dengeli olsun */ } /* 3 — Açıklama metinleri. Hakkımızda'nınki en uzun hero'da en küçük ve en soluk metindi (14px, %55 beyaz); artık yığılmış hero'ların hepsi aynı davranıyor. DİKKAT: İki kolonlu hero'larda (Atölye · Koleksiyonlar) açıklama SAĞ SÜTUNDA ve bilinçli olarak daha büyük (17-21px) — orada başlığın karşı ağırlığı, ikincil metin değil. O kural yukarıda `.gl-atl-hero-aside .gl-atl-hero-lede` ile tanımlı ve daha spesifik olduğu için buradaki boyutu EZER; kasıtlıdır, kaldırma. */ .gl-atl-hero-lede, .gl-hkk-hero-lede, .gl-ilt-hero-lede, .gl-sss-hero-lede, .gl-kvk-hero-lede, .gl-br-hero-lede{ font-size: clamp(15px, 1.6vw, 18px); line-height: 1.75; color: rgba(245, 238, 228, .78); text-wrap: pretty; /* tek kelimelik son satır oluşmasın */ } /* ===== Kreasyonlar hero — açıklama (motto altında) ===== Motto italik SERİF (slogan). Açıklama aynı karakterde olsaydı iki satır birbiriyle yarışırdı; bu yüzden SANS gövde sesi kullanılıyor. Hiyerarşi: eyebrow → başlık → motto → açıklama → butonlar. */ .gl-kr-vh-lede{ font-family: var(--font-sans); font-size: clamp(14px, 1.25vw, 16px); font-weight: 300; line-height: 1.8; letter-spacing: .01em; color: rgba(255, 250, 240, .74); /* mottodan (.88) daha sakin */ max-width: 620px; margin: 0 auto 30px; text-shadow: 0 2px 10px rgba(0,0,0,.5); text-wrap: pretty; } /* Açıklama eklenince içerik uzuyor ve alttaki "Keşfet" kaydırma göstergesiyle çakışıyordu. Dikey ritmi, eklenen yüksekliği telafi edecek kadar sıkıyoruz — yalnızca açıklama VARKEN (has-lede), diğer durumda tema ritmi bozulmasın. */ .gl-kr-vh-tagline.has-lede{ margin-bottom: 14px; } .gl-kr-vh-content:has(.gl-kr-vh-lede) .gl-kr-vh-eyebrow{ margin-bottom: 22px; padding-bottom: 14px; } .gl-kr-vh-content:has(.gl-kr-vh-lede) .gl-kr-vh-title{ margin-bottom: 18px; } @media (max-width: 767px){ .gl-kr-vh-lede{ font-size: 14px; line-height: 1.7; margin-bottom: 24px; } } /* Hero 100vh; kısa ekranlarda (dizüstü, yatay tablet) eklenen açıklama içeriği aşağıdaki "Keşfet" göstergesine yaklaştırıyor. Ritmi biraz daha sık, çok kısa ekranda ise dekoratif göstergeyi gizle (sayfa zaten kaydırılabiliyor). */ @media (max-height: 800px){ .gl-kr-vh-content:has(.gl-kr-vh-lede) .gl-kr-vh-title{ margin-bottom: 14px; } .gl-kr-vh-content:has(.gl-kr-vh-lede) .gl-kr-vh-lede{ margin-bottom: 24px; } } @media (max-height: 730px){ .gl-kr-vh-content:has(.gl-kr-vh-lede) ~ .gl-kr-vh-scroll{ display: none; } } /* ============================================================ HERO — HEADER PAYI + GİRİŞ ANİMASYONU ============================================================ */ /* 1) Sabit header (80px) hero'nun ÜSTÜNE biniyor. Bu hero'lar içeriği dikey ortalıyor; kısa yükseklikte (50-58vh) mini başlık menünün altında kalıyordu. Atölye'de zaten padding-top vardı, sorun onda yoktu — aynı çözüm buraya. */ .gl-ilt-hero, .gl-br-hero, .gl-sss-hero, .gl-kvk-hero{ padding-top: var(--header-h, 80px); } /* 2) Giriş animasyonu — anasayfadaki `glFadeUp` (22px aşağıdan yukarı + fade), aynı easing. Gecikmeler temanın içerik-hero ritmini izler (eyebrow .35s, başlık .55s), açıklama üçüncü basamak olarak eklendi. */ .gl-atl-hero-eyebrow, .gl-hkk-hero-eyebrow, .gl-ilt-hero-eyebrow, .gl-sss-hero-eyebrow, .gl-kvk-hero-eyebrow, .gl-br-hero-eyebrow{ animation: glFadeUp .8s cubic-bezier(.4,0,.2,1) .35s both; } .gl-atl-hero-title, .gl-hkk-hero-title, .gl-ilt-hero-title, .gl-sss-hero-title, .gl-kvk-hero-title, .gl-br-hero-title{ animation: glFadeUp 1s cubic-bezier(.4,0,.2,1) .55s both; } .gl-atl-hero-lede, .gl-hkk-hero-lede, .gl-ilt-hero-lede, .gl-sss-hero-lede, .gl-kvk-hero-lede, .gl-br-hero-lede{ animation: glFadeUp 1s cubic-bezier(.4,0,.2,1) .75s both; } /* Hareket azaltma tercihi: animasyon kapalı, içerik anında görünür (`both` yüzünden opacity:0'da takılı kalmasın diye animation:none yetmez) */ @media (prefers-reduced-motion: reduce){ .gl-atl-hero-eyebrow, .gl-hkk-hero-eyebrow, .gl-ilt-hero-eyebrow, .gl-sss-hero-eyebrow, .gl-kvk-hero-eyebrow, .gl-br-hero-eyebrow, .gl-atl-hero-title, .gl-hkk-hero-title, .gl-ilt-hero-title, .gl-sss-hero-title, .gl-kvk-hero-title, .gl-br-hero-title, .gl-atl-hero-lede, .gl-hkk-hero-lede, .gl-ilt-hero-lede, .gl-sss-hero-lede, .gl-kvk-hero-lede, .gl-br-hero-lede{ animation: none; opacity: 1; transform: none; } } /* ============================================================ ÜRÜN DETAY — SAĞ SÜTUN TİPOGRAFİSİ Denetimde iki sorun çıktı: 1) Dört ayrı öğe 9px'ti (koleksiyon etiketi, ref, fiyat notu, garanti) — bilgi taşıyan metinler için okunamayacak kadar küçük. 2) Kontrastlar %20-30 beyazdı; koyu zeminde neredeyse görünmüyorlardı. Çözüm: net bir küçük-metin kademesi (11px etiket · 12px cümle · 14px değer) ve kontrastların okunur seviyeye çekilmesi. ============================================================ */ /* Ürün adı: 68px, 16px'lik gövdeye karşı orantısız büyüktü — ölçek yumuşatıldı */ .gl-ud-name{ font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; } /* — Etiket kademesi: 12px (--ty-micro), okunur kontrast — 2026-08-05: 11px'ten 12px'e çekildi. Ölçeğin tabanı 12px ve gerekçesi dosyanın başında yazılı (ölçülen couture emsalleri 12px'in altına inmiyor); bu üç etiket o kuralın dışında kalmış son öğelerdi. Hepsi .12–.16em harf aralıklı BÜYÜK HARF — o biçimde 11px okunurluğu ayrıca düşürüyordu. ⚠️ .gl-ud-collection-tag'deki 11px ÖLÜ: dosyanın sonundaki tipografi ölçeği (`.gelinlik-body .gl-ud-collection-tag`) onu --ty-eyebrow-sans ile eziyor, sayfada 14px basılıyor. Buradaki değeri düzeltmek görüntüyü değiştirmez — şaşırtmasın diye bırakıldı. */ .gl-ud-collection-tag{ font-size: 11px; /* ← ölü, gerçek değer 14px (bkz. yukarıdaki not) */ letter-spacing: .26em; color: rgba(201, 169, 110, .9); } .gl-ud-ref{ font-size: var(--ty-micro); /* 11px idi */ letter-spacing: .16em; color: rgba(240, 232, 220, .55); /* .2 idi — neredeyse görünmezdi */ } .gl-ud-spec-label{ font-size: var(--ty-micro); /* 11px idi */ letter-spacing: .16em; color: rgba(240, 232, 220, .55); /* .28 idi */ } .gl-ud-guarantee{ font-size: var(--ty-micro); /* 11px idi (custom.css'te 9px) */ letter-spacing: .12em; color: rgba(240, 232, 220, .5); /* .28 idi */ } /* — Değer kademesi — */ .gl-ud-spec-val{ font-size: 14px; color: rgb(232, 224, 212); letter-spacing: .01em; } /* — Cümle kademesi — */ /* Fiyat notu bir etiket değil, bilgi cümlesi: harf aralığı düşük, punto biraz büyük */ .gl-ud-price-note{ font-size: 12px; letter-spacing: .06em; line-height: 1.6; color: rgba(240, 232, 220, .62); /* .3 idi */ text-transform: none; /* tümü büyük harf cümle olarak yorucuydu */ } .gl-ud-desc{ color: rgba(240, 232, 220, .82); /* .7 idi */ /* 2026-08-05 — GÖVDE METNİ JOST OLMALI. custom.css bu paragrafa `var(--font-serif)` + clamp(14px,1.3vw,16px) veriyordu; ürün açıklaması sayfadaki tek serif gövde metniydi ve hemen üstündeki fiyat satırı Jost olduğu için ikisi yan yana ayrışıyordu. Cormorant'ın tasarımcısı fontu "display type family" olarak tanımlıyor — gövde puntosunda kullanılmak için çizilmemiş (bkz. dosya başı, 3. dayanak). Akordeon başlıkları (17px Cormorant) BAŞLIK rolünde, onlara dokunulmadı. */ font-family: var(--font-sans); font-size: var(--ty-body); } /* --------------------------------------------------------------------------- 12px TABANI — ölçeğin altında kalan son öğeler (2026-08-05) Denetimde 11 öğe 10-11px basıyordu; hepsi bu iki detay sayfasında toplanmıştı. Ölçeğin tabanı 12px ve altına inilmiyor (dosya başı, 4. dayanak). Seçiciler custom.css'teki tanımlarla AYNI özgüllükte (0,1,1) — bu dosya sonra yüklendiği için kazanıyor, !important gerekmiyor. --------------------------------------------------------------------------- */ .gl-ud-badge{ font-size: var(--ty-micro); } /* 10px idi */ /* --------------------------------------------------------------------------- ÖLÇEK DIŞI KADEMELER — 2026-08-05 denetimi 13px ve 15.8px sitede tanımlı bir kademe değildi; ölçek 12 · 14 · 17 · 20 · 22 · 26 · 48 · 78 üzerine kurulu. Bu üç tablo/etiket grubu --ty-mini'ye (14px) bağlandı — özellikle beden ölçüleri müşterinin okumak için geldiği asıl veri. --------------------------------------------------------------------------- */ .gl-br-table{ font-size: var(--ty-mini); } /* 13px — beden ölçü değerleri */ .gl-kvk-table{ font-size: var(--ty-mini); } /* 13px — saklama süresi tablosu */ /* .gl-fd-opt-label buraya YAZILMAZ — dosyanın başında `!important`li kendi kuralı var (filtre barı bölümü) ve oradan --ty-mini'ye bağlandı. Buraya da yazılırsa iki ayrı yerde aynı öğe tanımlanmış olur. */ .gl-br-controls-sub{ font-size: var(--ty-mini); } /* 15.8px — tekil kaçak, yardımcı metin */ /* "Sorularınız mı var?" — kart başlığı kademesine hizalandı (24 → 26px). SSS soru metni (19px) ve KVK alt başlıkları (18px) BİLEREK dokunulmadı: ölçeğin başlık kademesi 26px ve oraya çekmek %37'ye varan büyüme demek. */ .gl-kvk-bottom-cta h3{ font-size: var(--ty-h3); } /* Etiket sütunu 11→12px ile genişledi: "ÜRETİM SÜRESİ" 102px'e çıkıp custom.css'teki min-width:100px'i aştı ve o satırın değeri 2px kaydı. ⚠️ Özellik tipleri PANELDEN yönetiliyor — daha uzun bir etiket eklenirse (ör. "KOL DETAYI TİPİ") bu sütun yine taşar. 120px mevcut en uzun etikete 18px pay bırakıyor; yeni etiket eklenince buranın kontrol edilmesi gerekir. */ .gl-ud-spec-label{ min-width: 120px; } .gl-krd-stat span{ font-size: var(--ty-micro); } /* 10px idi — "Parça", "Ay Atölye", "Kumaş" */ .gl-krd-piece-info p{ font-size: var(--ty-micro); } /* 10px idi — kategori · ürün kodu */ .gl-kr-vh-scroll-label{ font-size: var(--ty-micro); }/* 10px idi — video hero "Keşfet" */ .gl-ud-price{ font-size: 22px; } @media (max-width: 767px){ .gl-ud-name{ font-size: clamp(28px, 8vw, 38px); } .gl-ud-spec-val{ font-size: 13.5px; } } /* ============================================================ SİTE GENELİ TİPOGRAFİ TABANI Tema, lüks moda dilinde çok küçük + geniş harf aralıklı etiketler kullanıyor (9-11px). Bu dil korunuyor, ama okunabilirlik tabanı yükseltiliyor: 11px → dekoratif mikro etiket (rozet, sayaç, ikon yanı) 12.5px→ arayüz metni (menü, buton, form, bağlantı) 14px → içerik/paragraf 16px+ → gövde metni Not: 300+ kural 12px altındaydı; hepsini toptan büyütmek düzeni bozardı. Burada yalnızca ziyaretçinin OKUDUĞU roller hedeflendi. ============================================================ */ /* — Arayüz metni — */ .bridal-nav a{ font-size: 12.5px; } .bridal-product-info p{ font-size: 12.5px; } .bridal-product-actions button{ font-size: 12px; } .bridal-footer-col h4{ font-size: 11.5px; } .bridal-footer-bottom p{ font-size: 12px; } .bridal-filter-header h2{ font-size: 12px; } .bridal-filter-tag{ font-size: 11.5px; } .gl-header-appt{ font-size: 11px; } /* — İçerik metni — */ .bridal-section-subtitle{ font-size: 13px; line-height: 1.7; } .bridal-page-header-content p{ font-size: 13px; line-height: 1.75; } .gl-page-hero-scroll{ font-size: 11px; } /* — Dekoratif mikro etiketler: 9px'ten 10.5-11px'e (kompakt kalmalı) — */ .bridal-product-badge, .bridal-collection-label span, .bridal-mobile-nav-copy{ font-size: 10.5px; } /* ============================================================ BAĞLANTILAR — HOVER'DA ALT ÇİZGİ YOK Kaynak: theme.css → `a:not(.btn):hover { text-decoration: underline }` ve custom.css'te 8 ayrı kural. Premium his için alt çizgi yerine renk geçişi kullanılıyor. Erişilebilirlik: klavye odağı (:focus-visible) korunuyor. ============================================================ */ .gelinlik-body a, .gelinlik-body a:hover, .gelinlik-body a:focus, .gelinlik-body a:active, .gelinlik-body a:not(.btn):hover, .gelinlik-body .gl-ilt-info-body a:hover, .gelinlik-body .gl-rnd-side-list a:hover, .gelinlik-body .gl-ss-tos a:hover, .gelinlik-body .gl-auth-forgot:hover, .gelinlik-body .gl-auth-alt a:hover, .gelinlik-body .gl-hes-logout:hover, .gelinlik-body .gl-hes-help-phone:hover, .gelinlik-body .gl-hes-address-make-default:hover{ text-decoration: none; } /* Klavyeyle gezinenler bağlantıyı görebilmeli — alt çizgi kalktı, halka kalıyor */ .gelinlik-body a:focus-visible{ outline: 1px solid rgba(201, 169, 110, .85); outline-offset: 3px; border-radius: 2px; } /* ============================================================ KONTRAST DÜZELTMELERİ (tarayıcıda ölçülerek bulundu) Her biri WCAG oranı hesaplanarak tespit edildi; eşik 4.5:1 (küçük metin). ============================================================ */ /* Filtre barı — 2.47:1 idi, okunmuyordu */ .gl-kol-count, .gl-kol-sort span, .gl-kol-sort select{ color: rgba(240, 232, 220, .82); } .gl-kol-count strong{ color: #c9a96e; } .gl-kol-tab{ color: rgba(240, 232, 220, .72); } /* 3.56 → okunur */ .gl-kol-tab.active{ color: #c9a96e; } .gl-fd-reset{ color: rgba(240, 232, 220, .82); } /* 3.82 */ /* Footer telif — 3.79 */ .dark-theme .bridal-footer-bottom p{ color: rgba(240, 232, 220, .68); } /* Beden rehberi birim etiketi ("cm") — 3.82 */ .gl-br-unit small, .gl-br-table small{ color: rgba(240, 232, 220, .75); } /* Rozet yazı rengi artık etiket rengine göre PHP'de hesaplanıyor (okunur_metin_rengi helper'ı) — sabit beyaz, açık zeminlerde okunmuyordu. Gölge yalnız kenar netliği için kalıyor. */ .gl-product-badge{ text-shadow: 0 1px 2px rgba(0,0,0,.22); } /* Tablo hücrelerindeki birim etiketleri ("78 cm" içindeki cm) — %40 beyaz / 10px'ti, ölçümde 3.82:1 çıktı. Sınıfları olmadığı için hücre bağlamından hedefleniyor. */ .gelinlik-body td small, .gelinlik-body th small{ color: rgba(240, 232, 220, .72); font-size: 10.5px; } /* Form alan ipuçları — "(opsiyonel)" 9px/%2.66 idi, alanın zorunlu olup olmadığını söyleyen bilgi; okunmalı. "(WhatsApp)" da aynı grupta. */ .gl-ilt-opt, .gl-ilt-form small, .gl-ilt-info-body small{ font-size: 11px; color: rgba(240, 232, 220, .72); letter-spacing: .04em; } /* Atölye bölüm numaraları — dekoratif ama 4.19 ile eşiğin hemen altındaydı */ .gl-atl-zone-no{ color: rgba(201, 169, 110, .95); } /* Son iki bulgu */ .gl-ud-related-eyebrow{ color: rgba(201, 169, 110, .95); } /* 4.19 → eşik üstü */ /* Süreç adım numarası — 2026-08-05 düzeltmesi. Eski yorum "57px'lik rakam, 3:1 üstüne çıkarılıyor" diyordu ama iki şey değişmişti: (a) rakam ölçek revizyonuyla 57px'ten 34px'e indi, (b) .42 opaklık zemin rgb(14,16,19) üzerinde 2.43:1 veriyor — yani hedeflenen eşiğin ALTINDA kalmış. .55'te 3.33:1 oluyor, filigran karakteri korunuyor. `aria-hidden` bilerek EKLENMEDİ: 01-04 adım sırası bilgi taşıyor ve artık kontrast eşiğini geçtiği için gizlemek gerekmiyor (anasayfadaki dekoratif yıl rakamından farkı bu — o 1.42:1 ve okunacak içerik değil). */ /* ============================================================ ÖNE ÇIKAN ÜRÜNLER — SCROLL'DA 3D BELİRME Izgara, kart tasarımı ve içerik DEĞİŞMEZ. Tema zaten her .gl-product-card'a scroll-reveal veriyor (gelinlik-animations.js → .gl-reveal + ekrana girince .gl-visible); burada yalnızca o reveal'ın dönüşümü bu bölüm için 3D'ye çevriliyor. Yeni JS yok. perspective kart transform'unun İÇİNDE (ızgaraya değil): böylece her kartın kaçış noktası kendi merkezi olur ve hepsi aynı açıyla kalkar. Izgaraya verilseydi kenardaki kartlar ortak kaçış noktası yüzünden yamuk görünürdü. ============================================================ */ .gl-products-section .gl-product-card.gl-reveal{ transform: perspective(900px) translateY(34px) translateZ(-70px) rotateX(9deg); transform-origin: 50% 100%; /* kartlar alt kenarından doğrulur */ } /* perspective() iki durumda da yazılı: dönüşüm listeleri eşleşmezse tarayıcı yumuşak geçiş yerine ani sıçrama yapar. */ .gl-products-section .gl-product-card.gl-reveal.gl-visible{ transform: perspective(900px) translateY(0) translateZ(0) rotateX(0deg); } /* Eşit sıralı gecikme. Tema kardeş gecikmesini satır içi stille yalnızca ilk 5 karta veriyor; 8 ürünlü ızgarada 7-8. kartlar 6.'dan ÖNCE beliriyor. Satır içi stili ezmek için !important şart (tema .gl-stagger-* de öyle). */ .gl-products-section .gl-product-card:nth-child(1) { transition-delay: 0s !important; } .gl-products-section .gl-product-card:nth-child(2) { transition-delay: .07s !important; } .gl-products-section .gl-product-card:nth-child(3) { transition-delay: .14s !important; } .gl-products-section .gl-product-card:nth-child(4) { transition-delay: .21s !important; } .gl-products-section .gl-product-card:nth-child(5) { transition-delay: .28s !important; } .gl-products-section .gl-product-card:nth-child(6) { transition-delay: .35s !important; } .gl-products-section .gl-product-card:nth-child(7) { transition-delay: .42s !important; } .gl-products-section .gl-product-card:nth-child(8) { transition-delay: .49s !important; } /* Hareket azaltma tercihi: 3D yok, kart anında yerinde */ @media (prefers-reduced-motion: reduce){ .gl-products-section .gl-product-card.gl-reveal, .gl-products-section .gl-product-card.gl-reveal.gl-visible{ transform: none; transition: none; transition-delay: 0s !important; } } /* ============================================================ DEFİLE VİDEOLARI — anasayfa sinematik bandı Ölçü ve tipografi Kart 2'den (.gl-cinematic) devralınır; burada yalnızca videoya ve slayt geçişine ait ekler var. ============================================================ */ .gl-defile{ background: #0e1013; } .gl-defile-slide{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease; } .gl-defile-slide.is-active{ opacity: 1; visibility: visible; } /* .gl-cinematic img ile aynı yerleşim — video da bandı doldurur */ .gl-defile-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; background: #0e1013; } /* Kart 2'de görsel 0.38'e kısılıyor; videoda hareket okunmalı diye biraz daha aydınlık, metin kontrastı overlay gradyanından geliyor. */ .dark-theme .gl-defile-video{ filter: brightness(0.52); } /* ---- Gezinme (noktalar + oklar) ---- */ .gl-defile-nav{ position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.5vw, 30px); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 14px; } .gl-defile-dots{ display: flex; align-items: center; gap: 9px; } .gl-defile-dot{ width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: transparent; cursor: pointer; transition: background .3s ease, border-color .3s ease, transform .3s ease; } .gl-defile-dot.is-active{ background: #c9a96e; border-color: #c9a96e; transform: scale(1.25); } .gl-defile-arrow{ width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; font-size: 22px; line-height: 1; color: rgba(240, 232, 220, .85); background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; cursor: pointer; transition: color .3s ease, border-color .3s ease; } .gl-defile-arrow:hover{ color: #c9a96e; border-color: #c9a96e; } .gl-defile-dot:focus-visible, .gl-defile-arrow:focus-visible, .gl-defile-ses:focus-visible{ outline: 2px solid #c9a96e; outline-offset: 2px; } /* ---- Ses aç/kapat ---- Nokta/oklardan bağımsız konumlanır: tek video varsa gezinme çubuğu hiç basılmıyor ama ses butonu yine görünmeli. */ .gl-defile-ses{ position: absolute; right: clamp(16px, 4vw, 44px); bottom: clamp(16px, 2.5vw, 30px); z-index: 4; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; color: rgba(240, 232, 220, .85); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: color .3s ease, border-color .3s ease, background .3s ease; } .gl-defile-ses:hover{ color: #c9a96e; border-color: #c9a96e; } /* Ses açıkken buton "etkin" görünür — durum yalnızca ikondan anlaşılmasın */ .gl-defile-ses[aria-pressed="true"]{ color: #c9a96e; border-color: #c9a96e; background: rgba(201,169,110,.14); } @media (max-width: 640px){ .gl-defile-arrow{ width: 30px; height: 30px; font-size: 19px; } .gl-defile-ses{ width: 34px; height: 34px; font-size: 13px; } } /* Hareket azaltma tercihi: çapraz geçiş yok, slayt anında değişir */ @media (prefers-reduced-motion: reduce){ .gl-defile-slide{ transition: none; } } /* ===== Beğenilenler barı — iletişim sayfası select/buton dili (altın), kompakt ölçek ===== */ .gl-fav-bar-actions{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; } /* Sıralama select — .gl-ilt-select dilini alır, bar boyutuna küçültülür */ .gl-fav-sort-wrap{ display:inline-block; } .gl-fav-sort-wrap .gl-ilt-select{ width:auto; min-width:170px; padding:10px 42px 10px 16px; font-size:12px; letter-spacing:0.04em; } .gl-fav-sort-wrap .gl-ilt-select-arrow{ right:16px; font-size:9px; } /* Tümünü Temizle — .gl-ilt-submit dilinde ama kompakt */ .gl-fav-clear-btn.gl-ilt-submit{ width:auto; margin-top:0; padding:11px 20px; font-size:10px; letter-spacing:0.2em; } .gl-fav-clear-btn.gl-ilt-submit:hover{ letter-spacing:0.24em; } /* ============================================================ HERO MİNİ BAŞLIĞI (eyebrow) — renk kazası + Koleksiyonlar dokunuşu ============================================================ */ /* 1) HATA DÜZELTMESİ — `revert` altın rengi siliyordu. Yukarıdaki `.gelinlik-body [class*="-hero"] p{color:revert}` kuralı (0,2,1) hero paragraflarını "kendi tema rengini korusun" diye istisna tutuyor; ama `revert` yazar (author) katmanının TAMAMINI geri alır — temanın altınını da. Sonuç: tüm hero mini başlıkları krem (#e8e0d4) kalıyordu, oysa hem tema (.gl-atl-hero-eyebrow) hem okunabilirlik katmanı altın istiyor. Bu kural (0,3,0) ile niyeti geri getiriyor. */ .gelinlik-body [class*="-hero"] [class*="-eyebrow"]{ /* 2026-08-05: eskiden #d9bd85 (bir tık açık altın) idi. Bölüm mini başlıkları #c9a96e kullanıyordu; aynı rolün iki farklı altını olmasın diye site aksanında birleştirildi. Okunurluğu aşağıdaki text-shadow taşıyor. */ color: #c9a96e; } /* 2) TÜM hero mini başlıkları — ana başlıkla aynı yazı ailesi. Kapsam: anasayfa (.gl-hero-eyebrow), atölye/koleksiyonlar (.gl-atl-…), kreasyonlar video hero (.gl-kr-vh-…), hakkımızda, iletişim, sss, kvk, beden rehberi. Öznitelik seçici hepsini birden yakalar — yeni bir hero eklendiğinde de kendiliğinden kapsanır. ⚠️ Tema `--font-sans`'ı 'Montserrat' olarak tanımlıyor ama Montserrat siteye HİÇ yüklenmiyor (gelinlik-theme.css yalnız Cormorant Garamond + Jost çekiyor) — yani mini başlıklar sistem yazı tipine (Helvetica/Arial) düşüyordu. Serif küçük puntoda zayıf kalmasın diye punto ve ağırlık bir tık yükseltildi. */ .gelinlik-body [class*="-hero"] [class*="-eyebrow"]{ font-family: var(--font-serif); font-size: var(--ty-eyebrow-hero) !important; /* 14 → 18px, 2026-08-05'te 13→16'dan büyütüldü */ font-weight: 600; /* 500'dü — bkz. aşağıdaki ağırlık notu */ letter-spacing: .3em; text-shadow: 0 1px 6px rgba(0,0,0,.55); } /* 3) Koleksiyonlar hero'su — mini başlık kuyumcu detayı (yalnız bu sayfa). "KOLEKSİYONLAR AYLA UĞUR" uzun tek satır olarak düz bir etiket gibi duruyordu; yazının ardından soluklaşan ince altın çizgi couture editoryal his veriyor. */ /* margin-bottom BİLEREK yok: aşağıdaki "DİKEY RİTİM" bölümü tüm hero mini başlıklarına ortak oranı (1.4em) veriyor. Buraya margin yazılırsa bu sayfa yine ayrışır — düzeltilen sorunun ta kendisi. */ .gl-kol-hero .gl-atl-hero-eyebrow{ display: inline-flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); } /* Çizgi SONDA: başa alındığında yazı, dev başlığın sol kenarından ~72px içeri kayıyor ve hero'nun omurgası olan sol hizalama bozuluyordu. */ .gl-kol-hero .gl-atl-hero-eyebrow::after{ content: ''; flex: 0 0 auto; width: clamp(26px, 4vw, 56px); height: 1px; background: linear-gradient(90deg, #c9a96e, rgba(201,169,110,0)); } /* ============================================================ KOLEKSİYONLAR FİLTRE BARI — MOBİL DÜZEN Masaüstü kuralları @media(min-width:992px)'te; altında düzen yoktu → kategori sekmeleri FİLTRELE'nin yanındaki dar alanda dikey sarıp barı 250px'e şişiriyordu. Mobilde bar dikey yığılır; sekmeler tek satırda parmakla kaydırılır (yatay şerit). ============================================================ */ @media (max-width: 991px){ .gl-kol-filter-bar{ flex-direction:column; align-items:stretch; gap:0; padding:0; } /* Üst satır: FİLTRELE + yatay kaydırılabilir sekme şeridi. width:100%+min-width:0 → iç içe flex'in min-content taşmasını keser, böylece şerit viewport'a sığıp içinde kayar (yoksa 649px'e genişliyordu). */ .gl-kol-toolbar-left{ width:100%; min-width:0; align-items:center; gap:0; padding:2px 14px; border-bottom:1px solid rgba(255,255,255,0.06); } .gl-kol-toolbar-right{ width:100%; min-width:0; } .gl-filter-toggle-btn{ height:46px; margin-right:14px; padding:0 14px 0 0; flex-shrink:0; } .gl-kol-tabs{ flex:1 1 auto; min-width:0; /* flex:1 shrink edebilsin — yoksa şerit içerik boyuna genişler */ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .gl-kol-tabs::-webkit-scrollbar{ display:none; } .gl-kol-tab{ flex-shrink:0; padding:14px 14px; } /* Alt satır: ürün sayısı solda, sıralama sağda */ .gl-kol-toolbar-right{ justify-content:space-between; align-items:center; height:auto; padding:11px 16px; } .gl-kol-count{ border-right:none; padding:0; } .gl-kol-sort{ padding:0; gap:10px; } .gl-kol-sort select{ padding:10px 32px 10px 14px; } } /* ============================================================ DİKEY RİTİM — BAŞLIK BOŞLUKLARI (tüm site) Denetimde aynı rolü oynayan öğeler sayfadan sayfaya farklı boşluk kullanıyordu: hero mini başlık → başlık : 14 · 22×6 · 26 · 32 (4 farklı değer) hero başlık → açıklama : 22×2 · 24×3 · 26 · 28×2 · 32 bölüm mini başlık → başlık: 14×3 · 18×2 · 24 CTA açıklama → buton : 30 · 32 · 36 · 38 · 40×2 Ayrıca Hakkımızda'da mini başlığın alt boşluğu (24) başlığınkinden (18) BÜYÜKTÜ — mini başlık kendi başlığından kopup üstteki bloğa yapışıyordu. ⚠️ ASIL ORANTI HATASI: başlık puntoları clamp() ile ölçekleniyor (hero başlık 40px↔78px), ama boşluklar sabit px'ti. Mobilde punto küçülüp boşluk aynı kalınca oran bozuluyordu. ÇÖZÜM: boşluklar `em` — yani her başlığın KENDİ puntosunun oranı. Punto küçülünce boşluk da aynı oranda küçülür. Oranlar (büyük punto optik olarak daha SIKI boşluk ister — bu yüzden hero başlığı .36em, daha küçük bölüm başlığı .5em): mini başlık → başlık : 1.4em (kendi puntosunun) hero başlık → açıklama: 0.36em bölüm/CTA başlık → açıklama: 0.5em CTA açıklama → buton : 2em Yalnızca `margin-bottom` yazılır, kısayol (`margin`) DEĞİL — birçok açıklama `margin:0 auto` ile ortalanıyor, kısayol o ortalamayı siler. KAPSAM DIŞI (bilerek): · `.gl-kr-vh-*` (kreasyonlar video hero) — 100vh içinde "Keşfet" göstergesiyle çakışmamak için `:has()` ile ayrıca ayarlanmış; ortak orana çekilirse o denge bozulur. · Kart/panel başlıkları (`-pane-title`, `-step-title`, `-visit-title`) — ayrı bir kademe, ekran görüntüsüyle ayrıca değerlendirilecek. ============================================================ */ /* ---- 1. Hero: mini başlık → başlık ---- */ .gl-hero-eyebrow, .gl-page-hero-eyebrow, .gl-atl-hero-eyebrow, .gl-hkk-hero-eyebrow, .gl-ilt-hero-eyebrow, .gl-sss-hero-eyebrow, .gl-kvk-hero-eyebrow, .gl-br-hero-eyebrow{ margin-bottom: 1.4em; } /* ---- 2. Hero: başlık → açıklama ---- */ .gl-hero-title, .gl-page-hero-title, .gl-atl-hero-title, .gl-hkk-hero-title, .gl-ilt-hero-title, .gl-sss-hero-title, .gl-kvk-hero-title, .gl-br-hero-title{ margin-bottom: 0.36em; } /* ---- 3. Hero: açıklama → buton (yalnız buton izleyen iki hero) ---- İki kolonlu hero'da açıklama sağ sütunda ve altında buton yok; oradaki `.gl-atl-hero-aside .gl-atl-hero-lede{margin:0}` (0,2,0) bunu ezer. Bu boşluk `em` DEĞİL sabit: metin bloğu ile buton bloğu arasındaki yapısal ayrım, metnin kendi puntosunun oranı değil. Bkz. 6. maddedeki aynı gerekçe. */ .gl-atl-hero-lede, .gl-kvk-hero-lede{ margin-bottom: clamp(26px, 3vw, 36px); } /* ---- 4. Bölüm: mini başlık → başlık ---- */ .gl-section-eyebrow, .gl-atl-section-eyebrow, .gl-hkk-section-eyebrow, .gl-ilt-section-eyebrow, .gl-krd-section-eyebrow, .gl-br-section-eyebrow, .gl-kr-eyebrow, .gl-ud-related-eyebrow{ margin-bottom: 1.4em; } /* ---- 5. Bölüm: başlık → açıklama ---- */ .bridal-section-title, .gl-atl-section-title, .gl-hkk-section-title, .gl-ilt-section-title, .gl-krd-section-title{ margin-bottom: 0.5em; } /* ---- 6. CTA blokları: mini başlık → başlık → açıklama → buton ---- */ .gl-krd-cta-eyebrow, .gl-sss-cta-eyebrow, .gl-br-cta-eyebrow{ margin-bottom: 1.4em; } .gl-atl-cta-title, .gl-hkk-cta-title, .gl-ilt-cta-title, .gl-krd-cta-title, .gl-sss-cta-title, .gl-br-cta-title, .gl-kr-cta-title{ margin-bottom: 0.5em; } /* Açıklama → buton: `em` DEĞİL sabit. Bu CTA açıklamalarının puntoları eşit değil (Atölye 18px, Hakkımızda/SSS 14px); `2em` verilseydi boşluk 36px ve 28px olur, düzeltmeye çalıştığımız tutarsızlık geri gelirdi. Buradaki boşluk metin bloğu ile buton bloğu arasındaki YAPISAL ayrım — metnin puntosuna değil, sayfa ritmine ait. */ .gl-atl-cta-lede, .gl-hkk-cta-lede, .gl-ilt-cta-lede, .gl-krd-cta-lede, .gl-sss-cta-lede, .gl-br-cta-lede{ margin-bottom: clamp(26px, 3vw, 36px); } /* ---- 7. Başıboş ÜST boşluklar ---- Bu üç başlıkta 14-16px üst boşluk vardı, sitedeki başka hiçbir başlıkta yok. Üstteki ayrımı bölüm dolgusu (padding) veriyor; başlığın kendi üst boşluğu onun üstüne binip bloğu aşağı kaydırıyordu. */ .gl-ilt-cta-title, .gl-atl-cta-title, .gl-atl-measure-title{ margin-top: 0; } /* ============================================================ DİKEY RİTİM — 2. PARTİ: KART / PANEL KADEMESİ Bölüm başlıklarının bir altındaki kademe. Ölçülen oranlar (boşluk ÷ punto): .gl-atl-visit-title 32px / 10px = 0.31em ← en sıkı .gl-br-pane-title 36px / 14px = 0.39em .gl-ilt-pane-title 40px / 16px = 0.40em .gl-kr-step-title 26px / 12px = 0.46em .gl-atl-measure-title 42px / 22px = 0.52em .gl-hkk-founder-title 44px / 28px = 0.64em .gl-hkk-vm-title 34px / 22px = 0.65em ← en gevşek Aynı rol için 0.31–0.65em, yani iki kattan fazla fark. Bölüm başlıklarıyla aynı orana (0.5em) çekiliyor — bu bir alt kademe, ayrı bir dil değil. Hiçbir öğe 6px'ten fazla oynamıyor. ⚠️ KAPSAM DIŞI ve NEDENİ (tahmin değil, tarayıcıda ölçüldü): · `.gl-kvk-sec-title` — margin'i 0; kapsayıcısı `.gl-kvk-sec-head` display:flex + gap:16px. Boşluk flex gap'ten geliyor; margin eklenirse ÇİFT boşluk olur. Genel kural: margin'i zaten 0 olan başlık boşluğunu başka yerden alıyordur, dokunma. · `.gl-krd-title` — clamp(48px, 9vw, 120px), oran 0.20em. Dev display puntosu kendi optik sınıfında; 0.5em verilseydi boşluk 24px'ten 60px'e çıkardı. Çok büyük punto orantısal olarak daha SIKI boşluk ister. · `.gl-rnd-*`, `.gl-hes-*`, `.gl-auth-*`, `.gl-ss-*`, `.gl-si-*`, `.gl-pd-*`, `.gl-shop-*` — hiçbir blade dosyasında kullanılmıyor (randevu/hesabım/giriş/sepet/sipariş/mağaza sayfaları bu projede yok). 1. partide eklenen `.gl-rnd-*` seçicileri bu yüzden geri çıkarıldı. ============================================================ */ /* ---- 8. Kart/panel başlığı → altındaki metin ---- */ .gl-ilt-pane-title, .gl-br-pane-title, .gl-br-controls-title, .gl-hkk-vm-title, .gl-hkk-founder-title, .gl-atl-measure-title, .gl-atl-visit-title, .gl-kr-step-title{ margin-bottom: 0.5em; } /* ---- 9. Küçük etiketler → içerik ---- Mini başlıklarla (eyebrow) aynı rol: üstte duran küçük, harf aralıklı etiket. Ölçülenler 0.46em ile 2.15em arasına savrulmuştu: .gl-krd-other-eyebrow 13px / 6px = 0.46em ← etiketi içeriğe yapıştırıyordu .gl-search-sugg-title 9px / 14px = 1.56em .gl-kvk-toc-title 10px / 18px = 1.80em .gl-krd-statement-eyebrow 13px / 28px = 2.15em ← etiketi başlığından koparıyordu Hepsi mini başlık oranına (1.4em) katılıyor. */ .gl-krd-statement-eyebrow, .gl-krd-other-eyebrow, .gl-kvk-toc-title, .gl-search-label, .gl-search-sugg-title, .gl-sss-search-label, .gl-ilt-socials-label{ margin-bottom: 1.4em; } /* ---- 10. Kart metni → sonraki blok ---- Yapısal ayrım, bu yüzden `em` değil sabit (6. maddedeki gerekçe). Ölçülenler: 22 · 26 · 28 · 30px → tek değere iniyor. */ .gl-kr-lede, .gl-kr-ft-desc, .gl-atl-measure-lede, .gl-ud-desc{ margin-bottom: clamp(22px, 2.4vw, 28px); } /* ============================================================ DİKEY RİTİM — 3. PARTİ: BLOK DOLGULARI (üst = alt) Ölçüm (1440px, tarayıcıda): bölüm üst/alt dolguları ZATEN simetrikti — 6/6 ve 10/10 bölüm. Yani "üst neyse alt da o" ilkesi doğru yerde uygulanmış. Eksik olan ORAN'dı: aynı rol için yedi ayrı değer. Atölye bölümleri 36.5px ← vh tabanlı, aşağıya bak SSS CTA 70px İletişim ana bölüm 72px Hakkımızda, Kreasyon 77px Kreasyonlar CTA 79.2px SSS/Beden ana bölüm 80px KVK ana bölüm 90px ⚠️ ATÖLYE'DE `vh` KAZASI: Atölye'nin beş bölümü dikey dolguda `clamp(36px, 5.5vh, 66px)` kullanıyordu — viewport YÜKSEKLİĞİ. Diğer tüm sayfalar `vw` (genişlik) kullanıyor. 663px yüksekliğinde bir dizüstü penceresinde Atölye 36px alırken aynı rol diğer sayfalarda 77px oluyordu, yarıdan az. Dikey dolgu pencere yüksekliğine bağlanmamalı: pencere kısaldıkça bölümler sıkışır, uzadıkça şişer. ÖLÇEK (×1.5, üst = alt): xl clamp(44px, 5vw, 72px) ana içerik bölümleri lg clamp(30px, 3.4vw, 48px) ara şeritler / yoğun bloklar Yalnızca `padding-top`/`padding-bottom` yazılır — yatay dolgu (her sayfada farklı ve kasıtlı) korunur. KAPSAM DIŞI: · Hero'lar — sabit header (80px) üstlerine bindiği için üst dolgunun fazla olması KASITLI. Ölçümde 80/0 çıkanlar bunlar. · Bir tarafı 0 olan bloklar (`.gl-kr-seasons`, `.gl-kr-process`, `.gl-products-section`) — boşluğu komşu bölüm veriyor, zorlamak çift boşluk yaratır. · Kart dolguları (22-31px) — zaten simetrik, sadece yuvarlak sayı değiller. 31'i 32 yapmak görünmez; 22'yi 32 yapmak SSS akordeonunu gereksiz gevşetir. Dokunmuyorum. ============================================================ */ /* ---- 11. Ana içerik bölümleri ---- */ .gl-atl-zones, .gl-atl-process, .gl-atl-measure, .gl-atl-visits, .gl-atl-cta, .gl-hkk-manifesto, .gl-hkk-founder, .gl-hkk-vm, .gl-hkk-values, .gl-ilt-main, .gl-kr-cta, .gl-krd-statement, .gl-krd-pieces, .gl-krd-lookbook, .gl-sss-main, .gl-sss-cta, .gl-kvk-main, .gl-br-main, .gl-br-cta{ padding-top: clamp(44px, 5vw, 72px); padding-bottom: clamp(44px, 5vw, 72px); } /* ---- 12. Ara şeritler / yoğun bloklar ---- İkisi gerçek asimetriydi (ikisi de sıfırdan farklı, yani kasıtlı değil): .gl-kr-section-head 55 / 44 → 11px fark .gl-ud-main 40 / 44 → 4px fark `.gl-krd-lookbook` de 77/55 ile asimetrikti; o bir tam bölüm olduğu için yukarıdaki xl kademesine alındı. */ .gl-hkk-stats, .gl-krd-stats, .gl-ilt-map, .gl-kr-section-head, .gl-kr-step, .gl-ud-main, .gl-ud-related{ padding-top: clamp(30px, 3.4vw, 48px); padding-bottom: clamp(30px, 3.4vw, 48px); } /* ============================================================ GÖVDE METNİ ÖLÇEĞİ (site geneli) Anasayfa editöryal paragrafındaki artış onaylandı, siteye uyarlandı. Öncesi — okunan gövde metni 11px ile 18px arasına dağılmıştı, ölçek yoktu: 11px .gl-ilt-check-text (KVK onay kutusu etiketi) 12px KVK paragrafları, kreasyon adım metni, beden rehberi 12.5px Hakkımızda değer kartları 13px Hakkımızda/İletişim/Beden lede'leri, kreasyon açıklamaları 13.5px Atölye bölge metinleri, Hakkımızda vizyon/misyon 14px SSS cevapları, ürün bilgi akordeonu, kreasyon detay 16-18px Atölye lede'leri (zaten iyiydi) ⚠️ En kritik ikisi: KVK metni 12px, iletişim formundaki KVK onay etiketi 11px'ti — ikisi de ziyaretçinin GERÇEKTEN okuması gereken, hukuki sonuç doğuran metinler ve sitenin en küçük puntosundaydılar. İki kademe: ana gövde clamp(15px, 1.2vw, 17px) okunan metin, lede, madde ikincil clamp(13.5px, 1.05vw, 15px) yardımcı/etiket metni KAPSAM DIŞI: · Mikro etiketler (rozet, sayaç, ürün kodu — 10-12px): okunan metin değil, işaret. Ayrı kademe, dokunulmadı. · `.gelinlik-body`nin kendi 14px'i: gövde varsayılanı, değiştirmek her yere öngörülemez şekilde yayılır. · Başlıklar, alıntılar (`.gl-motto` 30px, `.gl-sss-q-text` 19px). Punto büyüdüğü için sayfa yükseklikleri artar; KVK ve SSS gibi uzun metinlerde belirgin olur — beklenen davranış. ============================================================ */ /* ---- Ana gövde: okunan metin ---- */ .gl-editorial-right p, .gl-appt p, .gl-atl-section-lede, .gl-atl-measure-lede, .gl-atl-measure-text, .gl-atl-step-body, .gl-atl-step-body p, .gl-atl-zone p, .gl-atl-measure-list li, .gl-atl-checklist li, .gl-atl-cta-lede, .gl-hkk-section-lede, .gl-hkk-manifesto-body, .gl-hkk-founder-text, .gl-hkk-founder-body, .gl-hkk-vm-body, .gl-hkk-value p, .gl-kr-step-text, .gl-kr-ft-desc, .gl-kr-cta-text, .gl-kr-note-quote p, .gl-krd-statement-body, .gl-ilt-section-lede, .gl-ilt-pane-lede, .gl-ilt-info-body, .gl-ilt-info-body p, .gl-ilt-check-text, .gl-sss-a p, .gl-sss-cta-lede, .gl-kvk-section p, .gl-kvk-mt, .gl-kvk-bullet li, .gl-kvk-cat-card p, .gl-kvk-cookie p, .gl-kvk-bottom-cta p, .gl-br-pane-lede, .gl-br-cta-lede, .gl-br-tip p, .gl-br-step-body p, .gl-br-callout p, .gl-ud-acc-body, .gl-ud-acc-body p{ /* 2026-08-05 — ÖLÇEĞE BAĞLANDI. Önceki değer clamp(16.5px, 1.25vw, 18px) idi ve 1440px'te 18px veriyordu; ölçeğin --ty-body'si ise 17px. Sonuç: aynı rol iki boyutta basılıyordu — KVK/SSS/iletişim 18px, hakkımızda/beden rehberi/kreasyonlar 17px. Bölünmenin sebebi aşağıdaki 6. bölümdeki gövde kuralının ÖLÜ sınıf adlarına yazılmış olmasıydı (.gl-kvk-sec-body / .gl-sss-answer — ikisi de DOM'da yok); o kural bu sayfalara hiç ulaşamıyordu. ⚠️ Eski yorumun uyarısı hâlâ geçerli: TABAN belirleyicidir, tavan değil. --ty-body'nin tabanı 16px (clamp'in alt ucu), 1205px'lik bir pencerede ~16.1px basar — eski kuralın şikâyet ettiği "15px'te sabitlenme" sorunu tekrarlamaz. */ font-size: var(--ty-body); line-height: 1.75; } /* ---- Bölüm mini başlıkları (eyebrow) — 13px → 17px ---- Kullanıcı isteği. Hero mini başlıkları KAPSAM DIŞI: onların ayrı bir kuralı var (serif + !important), orada 13.9px kalıyor. clamp kullanıldı çünkü 17px, 0.26em harf aralıklı BÜYÜK HARF metinde dar ekranda kötü sarıyor: 850px üstünde tam 17px, altında kademeli iner. ⚠️ Alt boşlukları `1.4em` olarak tanımlı (bkz. dikey ritim bölümü); punto büyüyünce boşluk da kendiliğinden 18.2px'ten 23.8px'e çıkar — oran korunur, ayrıca ayarlamak gerekmez. */ .gl-section-eyebrow, .gl-atl-section-eyebrow, .gl-hkk-section-eyebrow, .gl-ilt-section-eyebrow, .gl-krd-section-eyebrow, .gl-krd-statement-eyebrow, .gl-krd-cta-eyebrow, .gl-krd-other-eyebrow, .gl-br-section-eyebrow, .gl-br-cta-eyebrow, .gl-sss-cta-eyebrow, .gl-kr-eyebrow, .gl-ud-related-eyebrow{ font-size: clamp(14px, 2vw, 17px); } /* ---- Kreasyonlar bölüm başlığı — Atölye'nin başlık dili ---- İstek: Kreasyonlar'daki "Her sezon, bir hikaye. Her hikaye, bir gelin." satırı, Atölye'deki "Atölyenin Yedi Odası" başlığına uyarlansın. Sebep: iki sayfanın bölüm başlığı yapısı ayrışmıştı — Atölye : eyebrow + BÜYÜK BAŞLIK (48px) + italik açıklama Kreasyonlar : eyebrow + küçük italik satır (16.5px), büyük başlık YOK Kreasyonlar'da o italik satır fiilen bölümün başlığıydı ama başlık gibi görünmüyordu. Artık Atölye ile aynı ölçekte. Kaynak (.gl-atl-section-title): Cormorant · normal · w400 · clamp(30px,4vw,48px) · satır 1.1 · harf aralığı .02em · #f5e3b8 ⚠️ `.gl-kr-section-sub` yukarıdaki GÖVDE METNİ kademesinden çıkarıldı — artık gövde metni değil, başlık. Orada bırakılsaydı 16.5px'e sabitlenirdi. */ .gl-kr-section-sub{ font-family: var(--font-serif); font-size: clamp(30px, 4vw, 48px); font-style: normal; font-weight: 400; letter-spacing: 0.02em; line-height: 1.1; color: #f5e3b8; text-wrap: balance; /* iki satıra dengeli bölünsün */ } /* ---- İkincil: yardımcı / etiket metni ---- ⚠️ 2026-08-05: `.gl-br-controls-sub` bu listeden ÇIKARILDI. Bu kural 15.84px veriyor ve ölçekte böyle bir kademe yok; o öğe yukarıdaki "ölçek dışı kademeler" bloğunda --ty-mini'ye bağlandı. Listede kalsaydı bu kural dosyada daha sonra geldiği için (aynı özgüllük, 0,1,0) yeni kuralı sessizce ezerdi — nitekim ilk denemede öyle oldu. */ .gl-atl-visit-sub, .gl-ilt-info-item, .gl-cinematic-text, .bridal-footer-brand p{ /* Taban aynı sebeple yükseltildi (bkz. ana gövde notu) */ font-size: clamp(15px, 1.1vw, 16px); line-height: 1.7; } /* ============================================================ MOBİL DOKUNMA HEDEFLERİ 390px'te ölçüldü: mobil menü butonu 28×28, header ikon butonları 33×31. Apple 44pt / Android 48dp önerisinin altında; menü butonu sitenin BİRİNCİL mobil gezinme denetimi olduğu için önemli. Görsel boyut DEĞİŞMİYOR — dokunma alanı görünmez bir ::after ile genişletiliyor, ikonlar aynı kalıyor. ⚠️ Yatay genişletme yalnız menü butonunda: iki header ikon butonu arasında sadece 2px boşluk var, onları yanlara büyütmek komşunun üstüne biner ve yanlış butona basılır. Onlarda yalnızca dikey büyütme yapılıyor (48px'lik barda yer var). ============================================================ */ @media (max-width: 991px){ /* Menü butonu: solunda 162px, sağında 16px boşluk → 44×44 güvenli */ .bridal-menu-toggle{ position: relative; } .bridal-menu-toggle::after{ content: ''; position: absolute; inset: -8px; /* 28 + 2×8 = 44px */ } /* İkon butonları: yalnız dikey (yatayda komşuyla 2px boşluk var) */ .gl-hdr-icon-btn{ min-height: 44px; } } /* ---- 13. Anasayfa bölüm başlığı bloğu ---- `.gl-section-head` (anasayfada iki yerde: "2026 Kreasyonları / Her Gelin İçin Bir Hikaye" ve "@aylaugurgelinlik / Instagram'da Bizi Takip") dolgusu `clamp(18px, 2.8vw, 35px) … 0` idi — üstte 35px, altta HİÇ. Ölçüm: başlığın üstünde 60.9px boşluk, altında 16px (o da yalnızca satır yüksekliğinin payı). Başlık ızgaraya yapışıyordu. Eşitlenmesi gereken şey dolgu değil, GÖRÜNEN aralık: ÜST = bölümün üst dolgusu + head'in üst dolgusu ALT = head'in alt dolgusu + head'in kendi alt margin'i Yapısal sebep: bölümün ÜST dolgusu başlığın hemen üstünde duruyor; ALT dolgusu ise ızgaranın altında kalır, başlık bloğunun altına düşmez. Bu yüzden alt dolgu üsttekiyle aynı sayı DEĞİL, farkı kapatan sayı olmalı. Sabit sayı yerine formül — her ekran genişliğinde eşitlik korunsun diye: alt dolgu = bölüm üst dolgusu + head üst dolgusu − head alt margin'i Doğrulama: 1440px → 25.9 + 35 − 16 = 44.9 → ALT 60.9 = ÜST 60.9 ✓ 1000px → 18 + 28 − 14 = 32 → ALT 46 = ÜST 46 ✓ 390px → 14 + 18 − 10 = 22 → ALT 32 = ÜST 32 ✓ Instagram bölümü de aynı kurala bağlı: `home.blade.php`'de o bölümün satır içi üst dolgusu `.gl-section` ile aynı clamp'e çekildi ve ızgaranın `margin-top`'u kaldırıldı. Böylece iki blok yapıca birebir aynı oldu, ayrı bir kural gerekmiyor. ⚠️ Formülün üç bileşeni de başka yerden geliyor; biri değişirse burası da güncellenmeli: · bölüm üst dolgusu → `.gl-section` (custom.css:1818) ve `home.blade.php` Instagram bölümünün satır içi dolgusu · head üst dolgusu → custom.css:4079 · head alt margin'i → custom.css:1823 Medya sorgusu YOK: üç bileşen de clamp'li olduğu için oran mobilde de kendiliğinden korunuyor. (Önceden bu kural 768px üstüyle sınırlıydı; gerekçesi hatalıydı — custom.css:1823 medya sorgusu içinde değil, yani mobilde de geçerli. O sınır yüzünden başlık mobilde ızgaraya yapışık kalıyordu.) */ .gl-section-head{ padding-top: clamp(18px, 2.8vw, 35px); padding-bottom: calc( clamp(14px, 1.8vw, 28px) /* bölümün üst dolgusu (.gl-section) */ + clamp(18px, 2.8vw, 35px) /* head'in üst dolgusu */ - clamp(10px, 1.4vw, 16px) /* head'in kendi alt margin'i */ ); } /* ============================================================ Atölye → Beden Rehberi geçişi Ölçü hazırlık notlarının altında duran ince bağlantı. Buton değil metin bağlantısı: bölümün asıl eylemi randevu almak, bu ikincil bir yönlendirme — buton yapılsa CTA ile yarışırdı. ============================================================ */ .gl-atl-measure-link{ display:inline-flex;align-items:center;gap:9px;margin-top:22px; font-family:var(--font-sans);font-size:14px;letter-spacing:.02em; color:var(--bridal-gold,#c9a96e);text-decoration:none; padding-bottom:3px;border-bottom:1px solid rgba(201,169,110,.35); transition:border-color .25s ease,gap .25s ease; } .gl-atl-measure-link:hover, .gl-atl-measure-link:focus-visible{ color:var(--bridal-gold,#c9a96e); border-bottom-color:rgba(201,169,110,.9); gap:13px; /* ok ileri kayar */ } .gl-atl-measure-link i{font-size:12px;transition:transform .25s ease} .gl-atl-measure-link:hover i{transform:translateX(2px)} @media (prefers-reduced-motion:reduce){ .gl-atl-measure-link, .gl-atl-measure-link i{transition:none} .gl-atl-measure-link:hover{gap:9px} .gl-atl-measure-link:hover i{transform:none} } /* ========================================================================== KREASYONLAR — Tasarımcı Notları sticky timeline 2026-08-04: kreasyonlar.blade.php içine gömülü