/* ===================== SECTION 2 · INTRO + MULTILINK SLIDER (dolu panel · eğik üst · hero interlock · native drag/scroll) ===================== */ .hm-teaser{ position:relative; margin-top:calc(var(--gap) - var(--slant)); padding:var(--pad-panel-slant) 0 var(--pad-panel); /* section kendi HAVADAR üst nefesi (diagonal üst ↔ başlık) */ background:var(--sl-fill); color:var(--sl-ink); /* TEK PANEL: intro + kartlar AYNI section (hero interlock) */ clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%); transition:background-color .25s ease,color .25s ease; } @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){ .hm-teaser{ clip-path:shape( from 0% calc(var(--slant) + var(--corner)), line to 0% calc(100% - var(--corner)), curve to var(--corner) 100% with 0% 100%, line to calc(100% - var(--corner)) 100%, curve to 100% calc(100% - var(--corner)) with 100% 100%, line to 100% var(--corner), curve to calc(100% - var(--corner)) 0% with 100% 0%, line to var(--corner) var(--slant), curve to 0% calc(var(--slant) + var(--corner)) with 0% var(--slant), close); } } .hm-teaser-stage{ position:relative; margin-top:clamp(40px,5vw,72px); } /* intro↔kartlar HAVADAR boşluk (panel içinde) */ /* başlık düzeni ortak .hm-bas'tan gelir (_common) · kicker / büyük harf h2 / çizgi KALDIRILDI (15.09.2026) */ .hm-intro.hm-bas{ margin-bottom:0; } /* başlık↔kartlar boşluğu .hm-teaser-stage margin-top'ta */ /* link satırları (.hm-links / .hm-linkrow) ORTAK: _common · Sigorta rehberi kategorileri de aynı stili kullanır (15.09.2026) */ .hm-teaser{ --card-w:400px; --card-gap:22px; } /* ── Carousel yan okları (10.09.2026) ──────────────────────────────────── Alttaki .hm-swnav yerine geçti. Yarı saydam cam hap; kartların üstünde durur. Container kenarına hizalı (--gutter) — tam kenarda dursa ekrana yapışık görünürdü. Tema kuralı: gölge YOK · hover'da HAREKET YOK, yalnız saydamlık/renk değişir. Dokunmatikte gizli: orada zaten parmakla sürükleniyor (alt oklar da gizliydi). */ /* 🔴 10.09.2026 · karar: "biri transparanken diğeri daha görünür olmuş." SEBEP: dolgu YARI SAYDAMDI (rgba) + backdrop-filter vardı → görünüm ARKADAKİNE bağlıydı. Sol ok koyu kart fotoğrafının, sağ ok aydınlık panelin üstünde duruyor; aynı kural iki farklı görüntü veriyordu. ÇÖZÜM: dolgu DÜZ renk (arka plandan bağımsız), saydamlık öğenin KENDİ opacity'si. İkisi de nerede durursa dursun birebir aynı görünür. Hover'da opacity 1 → tam görünür. backdrop-filter KALDIRILDI: arkaya göre değişen tek etken oydu. */ .hm-teaser-ok{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:54px; height:54px; border:0; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:#fff; background:var(--brand-700); box-shadow:inset 0 0 0 1px rgba(255,255,255,.30); opacity:.55; transition:opacity .2s ease; } .hm-teaser-ok:hover{ opacity:1; } .hm-teaser-ok:focus-visible{ opacity:1; outline:2px solid var(--sky-300); outline-offset:3px; } /* Koyu temada panel de lacivert: dolgu bir ton açılır ki ok zemine gömülmesin. Opaklık AYNI (.55) — iki temada da davranış tek. */ html.dark .hm-teaser-ok{ background:var(--brand-500); } /* KONUM · 10.09.2026 (iki kez düzeltildi) 1) İlk hâl calc(var(--gutter) + 10px) idi; --gutter :root'ta YOK (yalnız eski .t50-slider bloğunda) → calc geçersiz → left/right düştü → iki buton ÜST ÜSTE. 2) Sonra container hizasına alındı, bu sefer karar "yatayda çok ortada kalmış, section'ın sağ ve solunda olmalı" dedi. Container 1280px, panel ise tam genişlik — aradaki fark okları içeri çekiyordu. Şimdi: konum kabı .hm-teaser-stage (panel genişliği) ve oklar onun KENDİ kenarına oturuyor. Kart kenarına değmesin diye küçük bir iç boşluk kaldı. */ .hm-teaser-ok--sol{ left:clamp(8px,1vw,18px); } .hm-teaser-ok--sag{ right:clamp(8px,1vw,18px); } @media(max-width:1023px){ .hm-teaser-ok{ display:none; } } .hm-teaser-viewport{ overflow:hidden; margin-top:clamp(36px,4vw,52px); } /* tam panel genişliği · kartlar panel kenarına FLUID taşar */ .hm-teaser-track{ display:flex; gap:var(--card-gap); width:max-content; } .hm-teaser-track .hm-tcard{ flex:0 0 var(--card-w); width:var(--card-w); } /* Oklar SAĞA yaslanır (progress çubuğu kalktı) · mobilde hiç görünmez — orada parmak kaydırır */ /* TEK-HİZMET KART · eğik alt kenarlı GERÇEK fotoğraf + başlık + açıklama (link listesi YOK) · kartın TAMAMI link */ .hm-tcard{ position:relative; /* tam-kaplama link (.hm-tcard-cover) buna göre konumlanır */ display:flex; flex-direction:column; border-radius:22px; overflow:hidden; --sgb-slant:24px; --sgb-corner:20px; /* KART alt kenarı EĞİK (sgb-slant-box · fotoğrafla aynı dil) */ background:var(--panel); color:var(--ink); } /* GÖLGE YOK · yükseklik YOK → align-items:stretch tüm kartları EN UZUNA eşitler */ /* 🔗 KARTIN TAMAMI LİNK: boş alanlar dahil her yer hizmet sayfasına gider. Buton (z:3) bunun ÜSTÜNDE kalır. */ .hm-tcard-cover{ position:absolute; inset:0; z-index:2; border-radius:inherit; } .hm-tcard-cover:focus{ outline:none; } /* klavye: görsel/başlık linki odaklanınca kart belli olsun (outline yer kaplamaz → zıplama yok) */ .hm-tcard:focus-within{ outline:2px solid var(--marka); outline-offset:2px; } .hm-tcard-medialink{ display:block; text-decoration:none; } .hm-tcard-media{ position:relative; padding:14px; background:var(--panel); } /* kart rengi fotoğrafı çerçeveler */ /* 28.08.2026 · karar: "resim kutuları çok yatay ölçüde, yüksekliğini biraz arttıralım". Ölçüldü: kutu 372×206 = oran 1.81 (16:9'dan bile yatık) → kare kaynaklı kalkan görsellerinin üstü/altı kırpılıyordu. karar: "gönderdiğim görselleri kestin mi, en boy oranı korunacaktı" — HAKLI. Kırpma tamamen KALDIRILDI: kapaklar kendi oranında (1280×1176 · 1.086) üretiliyor, KUTU görsele uyduruldu (1.086). Kaynaktan kayıp yok. */ .hm-tcard-img{ position:relative; aspect-ratio:1.086; overflow:hidden; /* mobilde biraz daha büyük görsel */ --sgb-slant:24px; --sgb-corner:15px; /* orta görsel ölçeği · alt kenar sol-alçak → sağ-yüksek */ background:linear-gradient(150deg,var(--brand-500),var(--brand-900)); background-size:cover; background-position:center; display:grid; place-items:center; transition:filter .4s ease; } .hm-tcard-img i{ font-size:52px; color:rgba(255,255,255,.9); } /* fallback ikon (kapak yoksa) */ /* hover artık KART geneline bağlı (tam-kaplama link üstte olduğu için medialink hover'ı tetiklenmiyor) · layout SABİT */ .hm-tcard:hover .hm-tcard-img{ filter:brightness(1.07) saturate(1.06); } .hm-tcard-body{ flex:1; display:flex; flex-direction:column; gap:18px; padding:20px 22px 24px; background:var(--panel); color:var(--ink); } /* gap 18: açıklama↔buton min nefes (buton yine margin-top:auto ile altta) */ .hm-tcard-titlelink{ display:block; text-decoration:none; color:inherit; } .hm-tcard-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .hm-tcard-body h3{ margin:0; font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); } .hm-tcard-arr{ flex:0 0 auto; color:var(--marka); font-size:14px; transition:transform .18s ease; } .hm-tcard:hover .hm-tcard-arr{ transform:translateX(4px); } /* açıklama: TAM metin (kırpma/üç nokta YOK) · flex-stretch → kartlar EŞİT yükseklik */ .hm-tcard-body > p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); } /* "Hemen Başvur" · alt eğim KARTIN alt eğimiyle PARALEL (aynı eğim) · üstünde daha ferah margin */ /* Yazı SOLDA (karar · 02.08.2026): ortalı değil, kart metniyle aynı hizada başlar */ .hm-tcard-cta{ position:relative; z-index:3; /* tam-kaplama linkin ÜSTÜNDE dursun (28.08'den beri ikisi de aynı sayfaya gider) */ text-decoration:none; /*