@charset "UTF-8";
/* site/assets/css/login-panel.css */
/*
 * Sagdan acilan giris paneli - yeni tasarim.
 *
 * "My Dikkan" dugmesine basilinca acilan panel ('.extra-info', markup
 * site/layout/master.blade.php icinde): ACIK TEMA, beyaz zeminli bir giris
 * karti - iki tonlu baslik, alt baslik, ikonlu alanlar, turuncu tam
 * genislikte giris dugmesi, saga hizali "sifremi unuttum" ve en altta kayit
 * satiri.
 *
 * ESKI HAL: panel zemini duz gri (#58595B, style.css '.extra-info'), butun
 * metinler beyaz, alanlar cercevesiz beyaz kutular. O hal SILINMEDI, yerinde
 * duruyor - bkz. asagidaki kapsam notu ve login-panel-legacy.blade.php.
 *
 * KAPSAM - yalnizca aday anasayfalar (/v1-/v5, /v7); versiyonsuz anasayfada
 * ve sitenin geri kalaninda eski gri panel kaliyor. Bu iki kez birden
 * guvenceye alindi:
 *
 *   1. Dosya SADECE o adreslerde yukleniyor (master.blade.php <head>,
 *      '$heroVersion' kosulu) - diger sayfalar dosyayi hic indirmiyor.
 *   2. Butun kurallar '.extra-info--v2' sinifi altinda ve o sinif da yalnizca
 *      ayni kosulda <div class="extra-info"> uzerine basiliyor. Yani dosya
 *      yanlislikla her sayfaya baglansa bile eski gri panele dokunamaz.
 *
 * Panelin KENDISINI hedefleyen kural iki sinifi birlikte kullaniyor
 * ('.extra-info.extra-info--v2'): style.css'teki '.extra-info' kurali ayni
 * ozgullukte ve ezilmesi gerekiyor.
 *
 * Dosya style.css ve responsive.css'ten SONRA yuklenmeli. Panelin acilip
 * kapanma mantigi (main.js, '.mdmenu' / '.menu-close' / '.offcanvas-overlay')
 * ve formlarin gonderim JS'i DEGISMEDI.
 */

.extra-info.extra-info--v2 {
    /* Dar telefonlarda ekrani asmasin diye 'min()'.
       400px'ten daha fazla daraltilmamali: reCAPTCHA widget'i 304px sabit genislikte ve
       ic pay + kaydirma cubugu ile birlikte 400px'te tam sigiyor. */
    width: min(400px, 100vw);
    padding: 30px 34px 40px;
    background: #ffffff;
    box-shadow: -18px 0 46px rgba(17, 24, 39, .12);
    /* 'scroll' degil: giris formu ekrana rahat sigdigi halde panelin
       saginda her zaman bos bir kaydirma cubugu dururdu. 'auto' ile cubuk
       yalnizca gercekten tasan icerikte (11 alanli kayit formu) cikiyor. */
    overflow-y: auto;
}

/* Ust satir: logo solda, kapat dugmesi sagda, IKISI DE panelin ic payiyla
   hizali (alanlarin sol/sag kenariyla ayni dikey cizgi). Markup'ta
   '.close-icon' ile '.logo-side' kardes iki blok ve markup sirasi
   degistirilmedi; kapat dugmesi saga float ile alinip logonun satirina
   giriyor.

   NEDEN 'absolute' DEGIL:
   panel kendi kaydirma kutusu ('overflow-y') ve icerik uzun oldugunda sag
   kenarinda bir kaydirma cubugu serdi olusuyor. Mutlak konumlandirilan oge
   'right' degerini o seridi HESABA KATMADAN oluyor, yani cubuk cikinca
   dugme icerigin sag kenarindan ~28px iceride kalir. Float akista
   durdugu icin icerik kutusuna gore hizalanir ve cubuk olsa da olmasa da
   alanlarla ayni cizgide kalir.

   DIKKAT: panele 'position: relative' VERILMEMELI - style.css'te
   'position: fixed' ve panel o sayede ekranin sagina yapisik duruyor. */

.extra-info--v2 .close-icon {
    float: right;
    display: flex;
    align-items: center;
    /* Logo satirinin yuksekligi - dugme o satirin ortasina gelsin. */
    height: 34px;
    margin: 0 0 0 14px;
}

.extra-info--v2 .close-icon > button {
    display: flex;
    align-items: center;
    line-height: 0;
    /* Line Awesome glifi kare em kutusunun icinde biraz bosluk birakiyor;
       X'in GORUNEN sag kenari alanlarin kenariyla otursun diye o bosluk
       kadar geri cekiliyor. */
    margin-right: -3px;
}

/* Logo + kapat satirindan sonra formlar tekrar tam genislige donmeli. */
.extra-info--v2 .side-info {
    clear: both;
}

.extra-info--v2 .close-icon > button i {
    color: #9aa3af;
    font-size: 26px;
    line-height: 1;
    transition: color .15s ease;
}

.extra-info--v2 .close-icon > button:hover i {
    color: #374151;
}

/* Panel basindaki logo ------------------------------------------------- */

.extra-info--v2 .logo-side {
    margin: 0 0 26px !important;
}

/* Logo ile kapat dugmesi ayni satirda ve ayni dikey merkezde.
   Hizalama BILEREK satir yuksekligi ile yapiliyor, flex ile DEGIL: flex
   kutusu yeni bir blok bicimlendirme baglami acar ve blok baglami bir
   float'un yanina oturmaz, asagi kayar - yani logo kapat dugmesinin
   altina duserdi. Satir ici icerik (buradaki <img>) ise float'un yanina
   akar. */
.extra-info--v2 .logo-side .logo {
    min-height: 34px;
    line-height: 34px;
}

.extra-info--v2 .logo-side .logo img {
    width: 176px;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Baslik + alt baslik -------------------------------------------------- */

.extra-info--v2 .login-panel-head {
    margin-bottom: 26px;
}

.extra-info--v2 .login-panel-head h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 31px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Basligin ikinci parcasi turuncu - metin iki ayri dil
   anahtarindan geliyor ('auth.title_lead' + 'auth.title_accent', bkz.
   lang klasorundeki site.php dosyalari).
   DIKKAT: buraya yol yazarken yildiz isareti kullanilmamali; yorumun
   icindeki bir kapanis dizisi yorumu erken bitirip dosyanin geri kalanini
   gecersiz kiliyor (bu satirdan sonraki butun kurallar sessizce devre
   disi kalir). */
.extra-info--v2 .login-panel-head h2 em {
    font-style: normal;
    font-weight: 700;
    color: var(--dikkan-color);
}

.extra-info--v2 .login-panel-head p {
    margin: 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.6;
}

/* Alanlar -------------------------------------------------------------- */

.extra-info--v2 .mydikkan-form .login-field {
    position: relative;
    margin-bottom: 14px;
}

.extra-info--v2 .mydikkan-form .login-field__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #9aa3af;
    font-size: 19px;
    pointer-events: none;
}

.extra-info--v2 .mydikkan-form input,
.extra-info--v2 .mydikkan-form select {
    height: 52px;
    margin-bottom: 0;
    padding: 0 16px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-size: 15px;
    letter-spacing: 0;
    line-height: normal;
}

.extra-info--v2 .mydikkan-form .login-field--icon input {
    padding-left: 50px;
}

.extra-info--v2 .mydikkan-form .login-field--reveal input {
    padding-right: 52px;
}

.extra-info--v2 .mydikkan-form input::placeholder {
    color: #9aa3af;
    font-size: 15px;
}

.extra-info--v2 .mydikkan-form input:focus,
.extra-info--v2 .mydikkan-form select:focus {
    border-color: var(--dikkan-color);
    box-shadow: 0 0 0 4px rgba(255, 65, 0, .13);
    outline: none;
}

/* Alanlar arasi bosluk: kayit formunda alt alta 11 alan var, ikonsuz
   olanlar da ayni araligi korusun. */
.extra-info--v2 .mydikkan-form > input,
.extra-info--v2 .mydikkan-form > select {
    margin-bottom: 14px;
}

/* Sifre goster / gizle ------------------------------------------------- */

.extra-info--v2 .mydikkan-form .login-field__reveal {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa3af;
    font-size: 19px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.extra-info--v2 .mydikkan-form .login-field__reveal:hover {
    color: #4b5563;
    background: #f3f4f6;
}

/* Sifremi unuttum (butonun ustunde, saga hizali) ----------------------- */

.extra-info--v2 .login-panel-helper {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 20px;
}

.extra-info--v2 .login-panel-link {
    color: var(--dikkan-color);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.4;
}

.extra-info--v2 .login-panel-link:hover {
    color: #D93700;
    text-decoration: underline;
}

.extra-info--v2 .login-panel-link i {
    margin-left: 5px;
    font-size: 15px;
    vertical-align: -2px;
}

/* Giris / kayit / sifirlama dugmesi ------------------------------------ */

.extra-info--v2 .mydikkan-form .theme-btn,
.extra-info--v2 .mydikkan-form button[type=submit] {
    width: 100%;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #FF6A2B 0%, var(--dikkan-color) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(255, 65, 0, .26);
    transition: filter .15s ease, box-shadow .15s ease;
}

.extra-info--v2 .mydikkan-form button[type=submit]:hover {
    filter: brightness(1.05);
    background: linear-gradient(90deg, #FF6A2B 0%, var(--dikkan-color) 100%);
    box-shadow: 0 14px 30px rgba(255, 65, 0, .32);
    color: #fff;
}

.extra-info--v2 .mydikkan-form button[type=submit][disabled] {
    opacity: .6;
    box-shadow: none;
    cursor: not-allowed;
}

.extra-info--v2 .mydikkan-form button[type=submit] i {
    font-size: 19px;
}

/* '.theme-btn' butonun 5px disina tasan iki dekoratif kose parantezi
   (style.css '.theme-btn:before/:after') ve hover'da onlari butonun etrafinda
   buyuten animasyonu getiriyor. Bu panelde dugme duz ve cizgiler panelin
   ic payini tasiyordu - burada kapatiliyor. Sitenin
   geri kalanindaki '.theme-btn' dugmeleri etkilenmiyor. */
.extra-info--v2 .mydikkan-form .theme-btn::before,
.extra-info--v2 .mydikkan-form .theme-btn::after {
    content: none;
    display: none;
}

/* Kart alti satiri ---------------------------------------------------- */

/* Kart alti satiri: metin + baglanti tek satirda, ok baglantinin SONUNDA.
   'display: flex' gerekli, cunku style.css '.contact-list p i' butun
   ikonlari sola kaydiriyor ('float: left; width: 25px') - o kural burada
   oku "New to Dikkan Valve?" ile "Register" arasina atiyordu. */
.extra-info--v2 .login-panel-foot {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
    margin: 22px 0 0;
    color: #6b7280;
    font-size: 14.5px;
    line-height: 1.5;
}

.extra-info--v2 .login-panel-foot a {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    white-space: nowrap;
}

.extra-info--v2 .login-panel-foot i {
    float: none;
    width: auto;
    margin-top: 0;
}

/* Kayit / sifirlama formlarindaki "girise don" satiri ortada duruyor. */
.extra-info--v2 .login-panel-foot--center {
    justify-content: center;
}

.extra-info--v2 .login-panel-foot--center a i {
    margin: 0 5px 0 0;
}

/* Hata kutusu --------------------------------------------------------- */

.extra-info--v2 .form-errors {
    color: #b91c1c !important;
    font-size: 14px;
    line-height: 1.5;
}

.extra-info--v2 .form-errors:not(:empty) {
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid #fca5a5;
    border-radius: 9px;
    background: #fef2f2;
}

.extra-info--v2 .form-errors p {
    margin: 0 0 4px;
    color: #b91c1c;
    font-size: 14px;
    line-height: 1.5;
}

.extra-info--v2 .form-errors p:last-child {
    margin: 0;
}

.extra-info--v2 .form-errors a {
    color: #b91c1c;
    font-weight: 700;
}

/* reCAPTCHA. Widget'in genisligi Google tarafindan 304px'e SABITLENMIS
   (icindeki iframe'i biz olceklendiremeyiz), panelin icerik kolonu ise
   332px - bu yuzden kutu sola dayanip saginda bos bir serit birakiyordu.
   Ortalaniyor, boylece bosluk iki yana esit dagiliyor ve kutu alanlarla
   ayni eksene oturuyor. Genisligi zorla alanlara esitlemek icin
   'transform: scale' gerekirdi; ucuncu taraf widget'ini buyutup
   bulaniklastirmamak icin o yol SECILMEDI. */
.extra-info--v2 .g-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

/* Panelin eski gri zeminine gore yazilmis beyaz metin kurallari
   (style.css '.contact-list p / p a') acik zeminde okunmuyor. */
.extra-info--v2 .contact-list p,
.extra-info--v2 .contact-list p a {
    color: #6b7280;
}

.extra-info--v2 .contact-list p a:hover {
    color: var(--dikkan-color);
}

@media (max-width: 400px) {
    .extra-info.extra-info--v2 {
        padding: 22px 20px 34px;
    }

    .extra-info--v2 .login-panel-head h2 {
        font-size: 27px;
    }
}

/* site/assets/css/home-v1.css */
/* ============================================================================
   /v1 anasayfa (bkz. routes/web.php 'home-variant').
   Sadece /v1 adresinde yukleniyor (master.blade.php $heroVersion === 1),
   diger surumlere hicbir stil sizmiyor.

   TASARIM KARARLARI:
   - Omurga IKI KOLONLU bolum kalibi: solda etiket/baslik/aciklama/baglanti,
     sagda kart izgarasi (.v1-split).
   - Hero TAM KANAMA DEGIL: beyaz sayfanin icinde kenarlardan iceri cekilmis
     tek bir kart (.v1-hero__card). Icerigi sayfanin geri kalaniyla ayni
     1296px kutusuna oturuyor.
   - Punto olcegi KUCUK ve ferah: kartlar kucuk, etiketler 11-13px,
     basliklar 32-40px.
   - Renkler sitenin kendi degiskenleri: turuncu #FF4100, antrasit #58595B -
     v5/v6/v7'de de kullanilan AYNI palet, yeni marka rengi yok.
   - Kose yariCAPI her yerde 0 (site geneli kural, urun sayfasindaki kart
     dili - v7'deki yuvarlak kose istisnasi bu surume uygulanmadi).
   - Dis kutuphane yok: hareket CSS gecisleri + IntersectionObserver
     (home-v1.js), v5/v6 ile ayni teknik.
   - Reveal secicileri BILEREK '.v1' kabugunun disina da acik: hero
     (index.blade.php) '.v1' sarmalayicisinin DISINDA duruyor, o yuzden kural
     '.v1-ready [data-v1-reveal]'.
   ============================================================================ */

:root {
    --v1-orange: var(--dikkan-color, #FF4100);
    --v1-ink: #1c1c1c;
    --v1-body:  #1c1c1c;;
    --v1-paper: #fff;
    --v1-paper-2: #F4F5F7;
    --v1-line: rgba(24, 29, 78, 0.10);
    --v1-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Sektor kartlarinin alt gradyani ve haberler bolumundeki sosyal/ucgen
       aksanlari icin lacivert ton - sitenin mevcut paletinde yoktu. */
    --v1-navy: #0B1E3D;
}

/* Plus Jakarta Sans site geneli varsayilan yazi tipi; @font-face ve
   body/h1-h6/p kurali style.css'te. */

/* Sayfa zemini: hero kartinin etrafindaki beyaz cerceve buradan geliyor. */
.hero-v1-page { background: var(--v1-paper); }

.v1 {
    background: var(--v1-paper);
    color: var(--v1-body);
}

/* --------------------------------------------------------------------------
   Kabuk + ortak tipografi
   -------------------------------------------------------------------------- */

.v1-wrap {
    position: relative;
    width: calc(100% - 48px);
    max-width: 1296px;
    margin: 0 auto;
}

.v1-sec { padding: clamp(56px, 6vw, 96px) 0; }

/* Referansin iki kolonlu kalibi. Sol kolon dar ve sabit oranli, sag kolon
   kart izgarasini tasiyor. */
.v1-split {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.v1-split__text { padding-top: 4px; }

h2.v1-h2,
.v1-h2-wrap :is(h1, h2, h3) {
    margin: 0 0 16px;
    font-size: clamp(26px, 2.5vw, 38px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: var(--v1-ink);
    max-width: 15em;
}

.v1-lead {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--v1-body);
    max-width: 34em;
}

.v1-rich {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--v1-body);
    max-width: 44em;
}

.v1-rich p { margin: 0 0 12px; }
.v1-rich p:last-child { margin-bottom: 0; }

.v1-btnrow { margin-top: clamp(22px, 2.5vw, 32px); }

/* Referanstaki alti cizili ok baglantisi. */
.v1-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-left: 0px;
    color: var(--v1-ink);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: gap 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v1-arrowlink i { color: var(--v1-orange); font-size: 17px; }
.v1-arrowlink:hover { gap: 16px; color: var(--v1-orange); }

/* "Yapay Zeka ile Bul" ve "Tum Urunleri Gor" YAN YANA: ikisi ortak bir satir
   kabinda ('.v1-products__ctarow', bkz. v1-products.blade.php). Asagida
   '.v1-products .v1-split' stretch'e alindigi icin bu satir 'margin-top: auto'
   ile sag kolondaki '.v1-catalog__icons' seridiyle ayni banda itiliyor. */
.v1-products__ctarow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: fit-content;
}

/* Sol kolonu sag kolonla (kart izgarasi + ikon seridi) ayni yukseklige
   getirip buton satirini 'margin-top: auto' ile en alta, yani
   '.v1-catalog__icons' seridiyle ayni hizaya itiyor - '.v1-split__text--pager'
   ile AYNI teknik (bkz. yukarida). Sadece bu bolume ozel: diger '.v1-split'
   kullanimlari (haber, sektor vb.) 'align-items: start' ile degismeden
   kaliyor. */
.v1-products .v1-split { align-items: stretch; }

.v1-products .v1-split__text {
    display: flex;
    flex-direction: column;
    /* flex-column'un varsayilani 'align-items: stretch' - onsuz buton satiri
       ('.v1-products__ctarow') satirin tamamini kaplardi. 'flex-start' ile
       icerik genisligine donuyor, sola yapisik kaliyor. */
    align-items: flex-start;
}

.v1-products .v1-products__ctarow { margin-top: auto; }

/* "Find with AI" butonu urunler sayfasindaki AI butonunun
   ('.finder-promo__btn--ai', product-filter-bar.css) yanardoner gorunumunu
   aliyor - ayni zemin, maskeli gecisli halka, parlama, indigo yazi ve gecisli
   ikon. Boyut/padding '.v1-indband__link'ten geliyor ki yanindaki "Tum
   Urunleri Gor" ile ayni boyda kalsin. */
.v1-products a.v1-products__findai {
    --v1-findai-fill:
        radial-gradient(90% 160% at 0% 0%, #FDF0FE 0%, rgba(253, 240, 254, 0) 60%),
        radial-gradient(90% 160% at 100% 0%, #D2F0FF 0%, rgba(210, 240, 255, 0) 60%),
        radial-gradient(90% 160% at 0% 100%, #DFF6FD 0%, rgba(223, 246, 253, 0) 60%),
        radial-gradient(90% 160% at 100% 100%, #F9CCFD 0%, rgba(249, 204, 253, 0) 60%),
        linear-gradient(#EBF4FF, #EBF4FF);
    position: relative;
    border-color: transparent;
    background: var(--v1-findai-fill);
    color: #2B2475;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .85),
        0 -3px 14px rgba(94, 206, 253, .28),
        0 5px 16px rgba(209, 77, 247, .22);
    /* 'transition' BURADA YOK: '.v1-ready [data-v1-reveal]' giris
       animasyonunun transition'ini (ve gecikmesini) ezerdi. */
}

.v1-products a.v1-products__findai::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(120deg, #A59CFA 0%, #5ECEFD 35%, #A9F1FE 55%, #828DFD 75%, #D14DF7 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.v1-products a.v1-products__findai:hover,
.v1-products a.v1-products__findai:focus-visible {
    border-color: transparent;
    background: var(--v1-findai-fill);
    color: #2B2475;
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, .85),
        0 -4px 18px rgba(94, 206, 253, .4),
        0 6px 20px rgba(209, 77, 247, .32);
}

.v1-products a.v1-products__findai i {
    background: linear-gradient(135deg, #5361FD 0%, #A764FA 55%, #C363F9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hover animasyonu - urunler sayfasindaki AI butonuyla birebir ayni
   (product-filter-bar.css 'finder-ai-*'); o dosya /v1'de yuklenmedigi icin
   keyframe'ler burada kendi adlariyla. */
.v1-products a.v1-products__findai:hover,
.v1-products a.v1-products__findai:focus-visible {
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 68%),
        var(--v1-findai-fill);
    background-size: 250% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation:
        v1-findai-shine 1.3s ease-in-out infinite,
        v1-findai-glow 1.1s ease-in-out infinite alternate;
}

.v1-products a.v1-products__findai:hover::before,
.v1-products a.v1-products__findai:focus-visible::before {
    background: linear-gradient(90deg, #A59CFA 0%, #5ECEFD 10%, #A9F1FE 20%, #828DFD 30%, #D14DF7 40%, #A59CFA 50%, #5ECEFD 60%, #A9F1FE 70%, #828DFD 80%, #D14DF7 90%, #A59CFA 100%);
    background-size: 200% 100%;
    padding: 2.5px;
    animation: v1-findai-ring 1.4s linear infinite;
}

.v1-products a.v1-products__findai:hover i,
.v1-products a.v1-products__findai:focus-visible i {
    animation: v1-findai-hue 1.1s ease-in-out infinite alternate;
}

@keyframes v1-findai-shine {
    0%   { background-position: 100% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    65%, 100% { background-position: 0% 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes v1-findai-ring {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

@keyframes v1-findai-glow {
    from {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, .85),
            0 -6px 24px rgba(94, 206, 253, .65),
            0 8px 28px rgba(209, 77, 247, .55);
    }
    to {
        box-shadow:
            inset 0 0 0 3px rgba(255, 255, 255, .85),
            0 -6px 28px rgba(209, 77, 247, .62),
            0 8px 32px rgba(94, 206, 253, .68);
    }
}

@keyframes v1-findai-hue {
    from { filter: hue-rotate(-70deg); }
    to   { filter: hue-rotate(80deg); }
}

@media (prefers-reduced-motion: reduce) {
    .v1-products a.v1-products__findai:hover,
    .v1-products a.v1-products__findai:focus-visible,
    .v1-products a.v1-products__findai:hover::before,
    .v1-products a.v1-products__findai:focus-visible::before,
    .v1-products a.v1-products__findai:hover i,
    .v1-products a.v1-products__findai:focus-visible i {
        animation: none;
    }
}

.v1-arrowlink--light {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.v1-arrowlink--light:hover { color: #fff; border-bottom-color: #fff; }

.v1-arrowlink--sm {
    font-size: 12.5px;
    padding-bottom: 4px;
    border-bottom-width: 1px;
}

/* Cerceveli buton (referanstaki "Teknolojimiz"). */
.v1-outlinebtn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    border: 1px solid var(--v1-orange);
    background: var(--v1-orange);
    color: var(--v1-paper);
    font-size: 13.5px;
    font-weight: 700;
   
    text-decoration: none;
    transition: background 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
    border-radius: 6px;
}

.v1-outlinebtn:hover { background: var(--v1-orange); color: #fff; }

/* --------------------------------------------------------------------------
   Reveal / sayac (home-v1.js)
   -------------------------------------------------------------------------- */

.v1-ready [data-v1-reveal] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.8s var(--v1-ease), transform 0.8s var(--v1-ease);
    transition-delay: calc(var(--v1-i, 0) * 80ms);
}

.v1-ready [data-v1-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-v1-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Sektor kartinin buyume/kuculme suzulmesi ve ilerleme cubugunun kaymasi
       da bu tercihte kapali - kart ve cubuk aninda yerine oturuyor
       (bkz. '.v1-sector.is-featured .v1-sector__body', '.v1-sector__bar-fill'). */
    .v1-sector.is-featured .v1-sector__body { animation: none !important; }
    .v1-sector__bar-fill { transition: none !important; }
}

/* ============================================================================
   HERO
   ----------------------------------------------------------------------------
   Bu dosyayi /v1 ve /v2 PAYLASIYOR (ikisinde de govde sinifi 'hero-v1-page';
   /v2 ayrica 'hero-v2-page' tasir - bkz. master.blade.php). Bolumler, footer
   ve JS ortak, ama HERO'LARI FARKLI:

     /v1 -> liman panoramasi + beyaz gradyan + uzerine binen kesilmis vana,
            tam ekran.
     /v2 -> tek fotografli kurgu; iki adres karsilastirilabilsin diye
            oldugu gibi birakildi.

   Bu yuzden asagidaki iki tasarima ait kurallarin hicbiri prefiksiz
   yazilmiyor. /v1'in secicisi ':not(.hero-v2-page)' ile kuruluyor: /v2'nin de
   'hero-v1-page' sinifi var, prefiks tek basina birakilsa /v1 icin yazilan
   her kural yine iki adrese birden inerdi.
   ============================================================================ */

/* ---- Iki tasarimin ORTAK kurallari -------------------------------------- */

.v1-hero {
    padding: 0;
    background: var(--v1-paper);
}

.v1-hero__media { position: absolute; inset: 0; z-index: 0; }

.v1-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: calc(100% - 96px);
    max-width: 1296px;
    margin: 0 auto;
    padding: clamp(56px, 7vw, 96px) 0;
    flex: 1 1 auto;
}

.v1-hero__content { max-width: 560px; }

/* Referanstaki kirilim (iki tasarimda da ayni): birinci satir koyu, ikinci
   satir turuncu. */
.v1-hero__title-a { color: var(--v1-ink); }
.v1-hero__title-b { color: var(--v1-orange); }

.v1-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

/* .theme-btn sitenin kendi bileseni (style.css); hero'da kose ayraci
   suslemesi (:before/:after) istenmiyor. Kural sadece hero icindeki butona
   kilitli - .theme-btn'in KENDISI ve sitenin geri kalanindaki her kullanimi
   degismedi. */
.v1-hero__cta .theme-btn:before,
.v1-hero__cta .theme-btn:after { content: none; }

/* Hero ile bir sonraki bolum arasindaki bosluk: kartin kendi alt payi
   UZERINE '.v1-sec'in ust payi (en genis ekranda 96px) ekleniyordu ve
   toplamda ~120px'lik bir bosluk olusuyordu. '.v1-sec--first' SADECE ilk
   bolume verilen bir sinif (bkz. v1-sections.blade.php) - sibling secici
   DEGIL, cunku hero ile bolum arasinda '.v1' sarmalayicisi var. */
/* Urun bolumu (kartlar + alt bant + foto seridi) toplamda fazla dikey yer
   kaplamasin diye ust bosluk buradan kisaltildi. */
.v1-sec--first { padding-top: clamp(28px, 3vw, 44px); }


/* ----------------------------------------------------------------------------
   /v1 - iki katman: liman panoramasi (vana fotografin kendi icinde, ayri bir
   PNG katmani yok) + beyaz gradyan.
   ---------------------------------------------------------------------------- */

/* Hero TAM EKRAN: navbar'in (86px) altindan ekranin dibine kadar. Tavan YOK -
   /v2'deki 760px tavani uzun ekranlarda hero'yu durduruyor ve altindaki
   bolumun ust kenari goruniyordu. Taban (520px) yalnizca cok kisa ekranlar
   (yatay telefon) icin var.
   '100svh' DEGIL '100vh': mobil tarayicilarda adres cubugu girip cikarken svh
   degeri degisiyor ve hero her kaydirmada birkac piksel zipliyordu.
   '100vh - 86px' DEGIL: header hero'nun UZERINE binen seffaf bir serit
   (asagidaki NAVBAR bolumu), flow'da yer tutmuyor - 86px dusulseydi ekranin
   altinda bosluk kalir, bir sonraki bolum erken gorunurdu. */
.hero-v1-page:not(.hero-v2-page) .v1-hero__card {
    position: relative;
    display: flex;
    min-height: max(520px, 100vh);
    overflow: hidden;
    background: var(--v1-paper);
    color: var(--v1-ink);
}

/* Liman panoramasi. 'cover' ile tam ekran hero'ya oturtuldugunda dikeyde
   buyuyup yatayda kirpiliyor; kadraj ufuk cizgisi ustte kalacak sekilde
   ayarli, boylece asagida su ve iskele goruinuyor ve vana suyun uzerine
   oturuyor. Gorsel 2170x1085 (bkz. HomeController HERO_V1_BG): 1920x1080'de
   buyutme yok ve yatay kirpma neredeyse sifir.
   Yatay konum 'center' DEGIL 'right': vana fotografin en sagindaki kenarda
   duruyor, 'center' ile yatay kirpma iki yandan esit kesip vanayi kirpiyor.
   'right' ile kirpma tamamen SOLDAN yapiliyor - solda zaten beyaz gradyanin
   altinda kalan gun batimi/gokyuzu oldugu icin kayip gorunmuyor, vana her
   ekran genisliginde tam kaliyor. */
.hero-v1-page:not(.hero-v2-page) .v1-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right 38%;
}

/* Fotografin SOLU beyaz gradyanla kapaniyor - metin fotografin uzerinde
   degil, beyazin uzerinde duruyor. Bu yuzden hero'nun butun yazilari KOYU
   tonda. Gecis dar (34%'te bitiyor): fotografin solu zaten gun batimiyla
   parlak, metnin altini kapamak icin genis bir beyaz alana gerek yok. */
.hero-v1-page:not(.hero-v2-page) .v1-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.623) 2%,
        rgba(255, 255, 255, 0.493) 25%,
        rgba(255, 255, 255, 0.281) 29%,
        rgba(255, 255, 255, 0.158) 32%,
        rgba(255, 255, 255, 0) 36%);
}

/* Masaustunde hero: soldaki beyaz gradyan yok, etiket (Engineered flow
   control) ve alttaki aciklama siyah. */
@media (min-width: 992px) {
    .hero-v1-page:not(.hero-v2-page) .v1-hero__scrim { background: none; }

    /* 'body' oneki: asil renk kurallari bu bloktan SONRA geliyor, ayni
       ozgullukte onlar kazanirdi. */
    body.hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-hero__desc { color: #000; }
}

/* Baslik ustundeki seyrek harfli kucuk etiket. Metin
   'site.hero.v1.eyebrow' anahtarindan gelir. */
.hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow {
    margin: 0 0 18px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.hero-v1-page:not(.hero-v2-page) .v1-hero__title {
    margin: 0 0 18px;
    font-size: clamp(36px, 5vw, 66px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.hero-v1-page:not(.hero-v2-page) .v1-hero__desc {
    margin: 0;
    max-width: 440px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--v1-body);
}

.hero-v1-page:not(.hero-v2-page) .v1-hero__cta { margin-top: 40px; }

.hero-v1-page:not(.hero-v2-page) .v1-hero__cta .theme-btn {
    padding: 16px 34px;
    font-size: 14px;
}

/* ---- /v1, tablet ve telefon ---------------------------------------------
   Beyaz gradyan bu genisliklerde soldan saga degil YUKARIDAN asagi aciliyor -
   dar ekranda yatay gradyan metnin altini kapatmiyordu ve baslik fotografin
   parlak kismina denk geliyordu. Fotograf (vana dahil) 'object-fit: cover'
   ile aynen kaliyor, ayrica gizlenen bir katman yok (vana fotografin kendi
   icinde). */
@media (max-width: 991.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-hero__card {
        min-height: max(480px, calc(100vh - 76px));
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__scrim {
        background: linear-gradient(180deg,
            #fff 0%,
            rgba(255, 255, 255, 0.96) 42%,
            rgba(255, 255, 255, 0.82) 70%,
            rgba(255, 255, 255, 0.62) 100%);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__inner { width: calc(100% - 48px); }
    .hero-v1-page:not(.hero-v2-page) .v1-hero__content { max-width: 620px; }
}

@media (max-width: 575.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-hero__inner { width: calc(100% - 32px); }
    .hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow { letter-spacing: 0.22em; }
    .hero-v1-page:not(.hero-v2-page) .v1-hero__cta .theme-btn { padding: 14px 26px; }
}


/* ----------------------------------------------------------------------------
   /v2 - tek fotografli hero. /v1'in tasarimindan etkilenmesin diye bu
   kurallar yalnizca '.hero-v2-page' altinda gecerli.
   ---------------------------------------------------------------------------- */

/* Kart, ekranin navbar'in (78px) altinda kalan yuksekliginin buyuk kismini
   dolduruyor (tavan 760px, taban 460px - cok kisa/cok uzun ekranlarda makul
   kalsin diye). */
.hero-v2-page .v1-hero__card {
    position: relative;
    display: flex;
    min-height: clamp(460px, calc(100vh - 86px), 760px);
    overflow: hidden;
    background: var(--v1-paper);
    color: var(--v1-ink);
}

.hero-v2-page .v1-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}

/* Fotografin SOLU beyaz gradyanla kapaniyor - metin fotografin uzerinde
   degil, beyazin uzerinde duruyor, bu yuzden butun yazilar KOYU tonda.
   Gecis 78%'e kadar uzuyor: fotograf gece cekilmis koyu bir dokumhane
   karesi, gradyan erken bitse iki yari arasinda sert bir sinir olusuyor.
   Fotografin parlak kismi (eriyik metal) sagda kaldigi icin kadraj da buna
   gore duruyor. */
.hero-v2-page .v1-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #fff 0%,
        rgba(255, 255, 255, 0.98) 24%,
        rgba(255, 255, 255, 0.88) 38%,
        rgba(255, 255, 255, 0.55) 52%,
        rgba(255, 255, 255, 0.22) 66%,
        rgba(255, 255, 255, 0) 78%);
}

.hero-v2-page .v1-hero__title {
    margin: 0 0 18px;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.hero-v2-page .v1-hero__desc {
    margin: 0 0 30px;
    max-width: 440px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--v1-body);
}

.hero-v2-page .v1-hero__cta { margin-top: 45px; }

.hero-v2-page .v1-hero__cta .theme-btn { padding: 15px 32px; font-size: 14px; }

/* ============================================================================
   00 - SERTIFIKALARIMIZ
   Koyu zeminli, ortali baslik + beyaz kutulu logo izgarasi - sektor
   bolumunden ONCE gelen ilk bolum, bkz. v1-sections.blade.php'deki
   '.v1-sec--first' notu. Veri GERCEK ($certificatesPage->children,
   Page id=9) - gercek anasayfada zaten kullanilan AYNI kaynak, burada
   sadece sunum (sabit izgara) farkli.

   Bu blok SADECE /v2 ve /v5'te goruyor - /v1 kendi acik zeminli
   '.v1-certband' bandini kullaniyor (asagida, '01 - URUNLER' bolumunden
   once). Kosul v1-sections.blade.php'de.
   ============================================================================ */

.v1-certs {
    position: relative;
    /* Duz siyah degil, referanstaki gibi hafif yon veren koyu bir gecis. */
    background: radial-gradient(120% 160% at 12% 10%, #1c1c1c 0%, #0a0a0a 55%, #000 100%);
    overflow: hidden;
    height: 400px;
}

/* SADECE /v5'te (govde sinifi 'hero-v5-page', /v1 ve /v2'de yok) siyah
   gecis yerine duz antrasit - bu bolum /v5'teki TEK sertifika sunumu, o
   yuzden sitenin genel antrasit tonuna (--dikkan-antrasit-color) yakin
   duruyor. /v1 ve /v2 kendi siyah gecisini KORUYOR - degisiklik bilincli
   olarak paylasilan '.v1-certs' kuralina degil, buraya yazildi. */
.hero-v5-page .v1-certs {
    background: linear-gradient(180deg, #FF4100 0%, #DB2B0E 100%);
}

.v1-certs__title {
    margin-bottom: 12px;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    color: #fff;
}

/* Kareler KUCUK: kolonlar hala '1fr' (kirilim noktalarinda kolon SAYISI
   degisince otomatik yeniden bolusuyor), ama izgaranin kendisi '.v1-wrap'
   (1296px) kadar genis DEGIL - 'max-width' ile daraltilip ortalaniyor,
   boylece her kare orantili kuculuyor. */
.v1-certs__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}

.v1-certs__card {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.2vw, 18px);
    background: #fff;
    margin-bottom: 25px;
    border-radius: 6px;
}

.v1-certs__card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Varsayilan GRI, hover'da renkli. */
    filter: grayscale(1);
    transition: filter 0.3s var(--v1-ease);
}

.v1-certs__card:hover img { filter: grayscale(0); }

/* ============================================================================
   02C - SERTIFIKALAR BANDI (SADECE /v1)
   Yer ve gorunum gerekcesi v1-sections.blade.php'deki '02C' yorumunda.

   Bant IKI ESIT KOLON ("Kalite" solda, "Surdurulebilirlik" sagda). Ikisi de
   kendi eyebrow/baslik/aciklamasiyla ayni sablonu paylasiyor
   ('.v1-certband__col'), ayrisan tek yer alt icerik: solda 3 logo + sayac
   + CTA, sagda 3 ikonlu madde izgarasi.

   Bu kurallarin hicbiri /v2, /v4 veya /v5'e sizmaz: home-v1.css o
   surumlerde de yukleniyor ama '.v1-certband' markup'i SADECE /v1'de
   basiliyor (blade tarafindaki '$heroVersion === 1' kosulu).
   ============================================================================ */

/* Referanstaki zemin duz beyaz DEGIL, sayfanin geri kalanindan ayrilan cok
   acik bir gri - paletteki '--v1-paper-2' (#F4F5F7) uzerine hafif bir
   gecis. Ustundeki urun izgarasi ('.v1-products', alt dolgusu 0) bu banda
   bosluksuz giriyor; ferahligi bandin KENDI dolgusu veriyor. */
.v1-certband {
    padding: clamp(20px, 2.4vw, 32px) 0;
    /* Acik gri gradyan yerine duz beyaz. */
    background: #fff;
    color: var(--v1-ink);
}

/* Bant kendi icinde TAM ORTADAN ikiye bolunuyor - "Kalite" yarisi solda,
   "Surdurulebilirlik" yarisi saginda, ikisi de esit genislikte ('1fr 1fr').
   '0.42fr/1fr' (urun bolumuyle hizalamak icin) sag tarafi cok daraltiyor,
   fontlar buyuyunce basliklar 3 satira dusup ikonlar kenara yapisiyordu. */
.v1-certband__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

/* Her yarim kendi metnini ('.v1-certband__col--text') + icerigini (logo/CTA
   veya ikonlar) yan yana tasiyor - eski '.v1-certband__mainrow'un rolu, ama
   artik butun bandi degil, TEK bir yarimi kapsiyor. */
.v1-certband__half {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: clamp(16px, 1.8vw, 24px);
    min-width: 0;
}

/* Ayirici cizgi artik logo/Surdurulebilirlik metni arasinda DEGIL, bandin
   TAM ORTASINDA - iki yarimin sinirinda. */
.v1-certband__half--sustain {
    padding-left: clamp(24px, 3vw, 48px);
    border-left: 1px solid var(--v1-line);
}

/* Her kolon SADECE kendi icerigi kadar yer kapliyor - esit agirlikli
   'flex:1 1 0' ile icerik kutunun solunda kalip sagda bosluk birakiyordu.
   Kendi yarisindaki 'justify-content: space-between' arta kalan boslugu 2
   kolon ARASINA dagitiyor - metin sutunlarinin genisligini zaten
   '.v1-certband__desc'in 'max-width: 26em' kurali sinirliyor. Kolonlar
   ayrica kuculebiliyor ('flex-shrink: 1', varsayilan) - dar ekranlarda tasma
   yerine metin sarmasi tercih ediliyor. */
.v1-certband__col {
    flex: 0 1 auto;
    min-width: 0;
}

/* Bosluk/ayirici artik kolonun kendisinde degil, yarimin sinirinda
   ('.v1-certband__half--sustain', yukarida) */

/* '.v1-certband__btn' bu kolonun ICINDE ama '.v1-certband__logos'un
   DISINDA bir kardes eleman - bir onceki duzeltmedeki 'align-items: center'
   sadece logogrid+sayaci ortaliyordu, buton hala varsayilan sola yasliydi.
   Kolonun kendisi de dikey akis (flex column) yapilip ortalaniyor. */
.v1-certband__col--logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Daha buyuk bir pay buyuk logolarda kolonu saga tasiriyordu. */
    margin-left: 30px;
}

.v1-certband__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-certband__eyebrow-line { width: 24px; height: 2px; background: var(--v1-orange); }

/* Butun /v1 bantlarindaki baslik/aciklama puntolari urun bolumundeki
   ('h2.v1-h2' / '.v1-lead') AYNI olcegi kullaniyor - standart tek bir olcek. */
h2.v1-certband__title {
    margin-bottom: 8px;
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.2;
    max-width: none;
    color: var(--v1-ink);
}

.v1-certband__title span { display: block; }

.v1-certband__desc {
    margin-bottom: 0;
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 26em;
    color: var(--v1-body);
}

/* CERCEVESIZ: duz metin + turuncu ok. Telefonda etiket iki satira kiriliyor
   ("View All / Certifications") ve hap seklindeki bir cerceve o iki satirin
   etrafinda kocaman bir bloba donusuyordu.

   Bu ayni zamanda sayfanin geri kalanina UYUYOR - /v1'de urun kartlarinin
   altindaki ok da ayni gerekceyle duz ok ikonu (bkz. '.v1-catalog__linkicon').
   Hover davranisi da oradan aliniyor: renk turuncuya doner, ok 4px saga
   kayar.

   KAPSAM: '.v1-certband' bolumu YALNIZCA /v1'de basiliyor (bkz.
   v1-sections.blade.php, '($heroVersion ?? 1) === 1' kosulu), o yuzden kural
   prefikssiz yazilabiliyor - baska bir surume sizmasi mumkun degil.

   Genislik ayrimi YAPILMADI: masaustunde de duz metin. Iki farkli genislikte
   ayni ogeye iki farkli muamele (telefonda metin, masaustunde hap) tutarsiz
   olurdu. */
.v1-certband__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--v1-ink);
    font-size: 12.5px; /* '.v1-indband__link' ile ayni */
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s var(--v1-ease);
}

.v1-certband__btn i {
    color: var(--v1-orange);
    font-size: 14px;
    transition: transform 0.25s var(--v1-ease);
}

.v1-certband__btn:hover { color: var(--v1-orange); }

.v1-certband__btn:hover i { transform: translateX(4px); }

/* Logolar kart/golge ICINDE DEGIL - duz metnin yaninda, tek satir halinde
   yan yana duran KUCUK gorseller (bkz. '.v1-certband__logo' asagida).
   '.v1-certband__logos' sadece izgara+sayac dikey akisini tasiyor. */
/* '+N sertifika daha' ve 'Tum Sertifikalari Incele' metinleri logo
   sirasinin ORTASINDA duruyor - varsayilan 'align-items: stretch' onlari
   sola yaslardi, 'center' ile ucu de logo grubunun genisligine gore
   ortalaniyor. */
.v1-certband__logos { display: flex; flex-direction: column; align-items: center; }

/* Izgara 3 logo icin (blade 'take(3)' ile birebir) - sayi orada
   degistirilirse bu kolon sayisi da degismeli. Grid yerine FLEX: logolar
   kendi genislikleri kadar yer kapliyor, kart genisligine zorlanmiyor
   (boyutlari farkli). */
.v1-certband__logogrid {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(8px, 0.9vw, 14px);
}

/* Beyaz kart/golge YOK - logolar cercevesiz, bandin kendi zemini uzerinde
   duruyor. '.v1-certs__card' gibi kart stili BILEREK kullanilmadi, bu farkli
   bir gorunum.

   3 gercek sertifika logosu (DNV/TUV/WRAS) daha yuksek boyda 'logos'
   kolonuna sigmayip alt alta kayiyordu ('flex-wrap: wrap' + dar kolon) -
   TEK SATIR gorunumu icin yukseklik dusuk ve grid 'nowrap'. */
.v1-certband__logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    /* 1366px'te ~34px, mobildeki sabit 34px ile ayni boy. */
    height: clamp(28px, 2.5vw, 38px);
}

/* Logolar GRI DEGIL: '.v1-certs__card img'de hover'a kadar 'grayscale(1)'
   duruyor, bu bantta ise TUV/ISO/DNV kendi renklerinde. Filtre burada yok -
   paylasilan '.v1-certs' kurali ellenmedi, yani /v2-/v4-/v5'teki
   gri->renkli gecis AYNEN duruyor. */
.v1-certband__logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* "+N sertifika daha" sayaci: referanstaki turuncu kucuk metin, logo
   sirasinin hemen altinda. */
.v1-certband__more {
    margin: 28px 0 0;
    font-size: 12.5px; /* '.v1-indband__link' ile ayni */
    font-weight: 700;
    color: var(--v1-orange);
}

/* 4. kolon DAR (referansta logolar kolonuyla aynı genislikte) - 3 madde
   yan yana SIGMASI icin satir kirilmasi KAPALI ('nowrap'), her madde esit
   pay aliyor ('flex:1 1 0') ve kendi ic genisligine gore KUCULEBILIYOR
   ('min-width:0'). Etiket boylece TEK satira degil, referanstaki gibi
   ikonun altinda 2 satira sariyor - satirin kendisi hic kirilmiyor. */
.v1-certband__icons {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(16px, 2vw, 28px);
}

.v1-certband__iconitem {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

/* "Lower Emissions/Resource Efficiency/Longer Life Cycle" ikonlari belirgin
   bicimde buyuk - kolon icerik kadar genislikte oldugu icin ('flex:0 0 auto'
   yukarida) buyutmek yan kolonlari sikistirmiyor. */
/* Dizustu genisliklerde dar '.mainrow' icinde sabit 52px ikonlar tasmaya
   sebep oluyordu - 'vw' ile orantili kuculebilen bir 'clamp', genis ekranda
   yine 52px. */
.v1-certband__iconglyph {
    display: inline-flex;
    color: var(--v1-navy);
    font-size: clamp(32px, 3.2vw, 52px);
}

.v1-certband__iconlabel {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--v1-ink);
}

/* Sertifika bandinin SOL kenari urunler bolumunun ('.v1-split',
   0.42fr/1fr) ikon seridiyle ('.v1-catalog__icons') hizali. Tum bandi
   0.42fr/1fr'a cevirmek Sustainability yarisini da daraltip basligi 3
   satira dusururdu (bkz. yukaridaki not) - bu yuzden bant genelindeki
   1fr/1fr'a DOKUNULMUYOR, SADECE "Kalite" yarisinin ic duzeni degisiyor.
   '.v1-certband__half'in 'justify-content: space-between'i logo kumesini
   HER ZAMAN yarinin SAG kenarina yaslardi - o yuzden bu yarim icin
   'flex-start', metin kolonuna da '.v1-split'in metin kolonuyla (0.42fr,
   AYNI gap formulu) BIREBIR AYNI sabit genislik verildi (bandin kendi
   'gap'i cikarilarak) - logo kumesi hemen ardindan, urun ikon seridinin
   basladigi X konumunda basliyor. Sustainability yarisi degismiyor, o
   yuzden 3 satira dusme riski yok. */
@media (min-width: 1200px) {
    .v1-certband__half--quality { justify-content: flex-start; }

    /* Iki metin kolonu da USTE yasli: dikey ortalandiginda Sustainability
       basligi 2 satir oldugu icin o kolonun eyebrow'u ("SUSTAINABILITY")
       "QUALITY"den yukarida kaliyordu. Yarimlar ayni yukseklikte; logolar ve
       ikonlar kendi yarisinda ortada. */
    .v1-certband__row { align-items: stretch; }
    .v1-certband__col--text { align-self: flex-start; }

    /* "View All Certifications"in ALT kenari Quality aciklamasinin
       ('.v1-certband__desc') alt kenariyla ayni hizada. Yarim satir boyunca
       uzamiyor, kendi icerigi kadar - yuksekligini metin kolonu belirliyor,
       logo kolonu da o yarimin dibine yaslaniyor. */
    .v1-certband__half--quality { align-self: start; align-items: flex-end; }

    /* Logolar + "+13 more certifications" yukarida - ust kenari basligin
       ('Proven Reliability.') ust kenariyla ayni hizada, buton ise altta
       aciklamayla hizali kaliyor. Kolon yarimin tam boyuna uzuyor, icerigi iki
       uca dagitiliyor. 39px = eyebrow + alt payi (olculdu: 1366 ve 1903'te
       baslik kolonun ustunden 39px asagida). */
    .v1-certband__half--quality .v1-certband__col--logos {
        align-self: stretch;
        justify-content: space-between;
        padding-top: 39px;
        
    }

    .v1-certband__half--quality .v1-certband__col--text {
        flex: 0 1 calc((min(100vw - 48px, 1296px) - clamp(28px, 4vw, 64px)) * 0.42 / 1.42 - clamp(16px, 1.8vw, 24px));
    }

    /* "Lower Emissions / Resource Efficiency / Longer Life Cycle" yan yana
       ('nowrap') genis ekranda bandin yuksekligini asip tasiyordu (metin
       kolonu 0.42fr'a sabit oldugu icin Sustainability yarisi gorece dar).
       Ikon+etiket ciftleri yan yana degil, UC AYRI SATIR halinde alt alta -
       her satirda ikon solda, etiket saginda. */
    .v1-certband__icons {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(10px, 1.2vw, 16px);
    }

    .v1-certband__iconitem {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
    }

    /* Sustainability aciklamasi 3 satir olsun diye SADECE bu metin
       ('.v1-certband__col--sustain') icin paylasilan '.v1-certband__desc'
       kuralindan ('max-width: 26em') daha dar bir tavan; Quality aciklamasi
       (26em) DEGISMEDI. */
    .v1-certband__col--sustain .v1-certband__desc {
        max-width: 19em;
    }
}

/* Genis ekranda logolar ortadaki ayirici cizgiyi geciyordu (olculdu:
   1600px'te 5px, 1903px'te - 1920 ekran + kaydirma cubugu - 5px tasma).
   Sebep: 3 logonun toplam genisligi (38px boyda ~347px) + metin kolonu +
   30px sol pay, yarimin 620px'ine sigmiyor.
   Esik 1920px DEGIL 1400px: kaydirma cubugu yuzunden 1920 ekranda viewport
   1903px, '@media (min-width: 1920px)' orada hic calismiyor.
   Cozum: sol pay yok, logolar 34px'e (1366 ve mobildeki boy) sabit; logo
   kolonu kuculmuyor ('flex-shrink: 0'), kalan yeri metin kolonu aliyor. */
@media (min-width: 1400px) {
    /* 1366'daki duzen korunuyor - baslik TEK satir, logolar basligin ust
       kenarinda, buton altta aciklamayla hizali. Genis ekranda metin kolonu
       283px'e sikisip basligi iki satira boluyordu (baslik 38px'te ~324px).
       Metin kolonu 330px'e sabit, sigsin diye logolar 32px ve saga kaydirma /
       ustteki pay yok. */
    .v1-certband__half--quality .v1-certband__col--text { flex: 0 0 330px; }

    /* Aciklama 1366'daki gibi 3 satir - genislemis kolonda 2 satira inip
       butonu aciklamanin hizasindan asagida birakiyordu. */
    .v1-certband__half--quality .v1-certband__desc { max-width: 300px; }

    .v1-certband__col--logos {
        flex-shrink: 0;
        margin-left: 0;
    }

    .v1-certband__logo { height: 32px; }
}

/* 4 kolon genis ekranda tek satirda kaliyor; dar ekranda ONCE
   metin+icerik ciftleri kendi satirina duser (Kalite metni+logolar bir
   satir, Surdurulebilirlik metni+ikonlar bir sonraki), sonra telefonda
   hepsi tek tek alt alta. Kolon genislikleri kasitli secildi: text
   (flex:1.3) + logos/icons (flex:0.85) toplami satiri doldurup ciftin
   ayrilmadan sarmasini sagliyor - ayri bir "grup" sarmalayici elemana gerek
   kalmadi. */
@media (max-width: 1199.98px) {
    /* Iki yarim ('.v1-certband__half') yan yana degil, alt alta - her yarim
       kendi icinde hala metin+icerik yan yana (2 oge, sigmasi kolay), o yuzden
       ayri bir "wrap" hilesine gerek yok. */
    /* Masaustundeki 'margin-left: 90px' alt alta dizilince bandi diger
       bolumlerin sol hizasindan iceri itiyordu - sifirlandi. */
    .v1-certband__row { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3vw, 32px); margin-left: 0; }
    .v1-certband__half--sustain {
        padding-left: 0;
        padding-top: clamp(20px, 3vw, 28px);
        border-left: none;
        border-top: 1px solid var(--v1-line);
    }

    /* Bu araliktaki dar kolonda buyutulmus ikonlar (52px) sigmiyor -
       masaustu ('nowrap') buyuklugu korunurken burada kucultuluyor. */
    .v1-certband__iconglyph { font-size: 40px; }
}

@media (max-width: 767.98px) {
    .v1-certband__half { flex-direction: column; align-items: stretch; }
    .v1-certband__col { flex-basis: auto; }
    .v1-certband__icons { gap: 16px; }

    /* Telefonda logo ve ikon siralari kendi kolonlari icinde yatayda
       ortalaniyor: masaustu hizalamasindaki 'margin-left' mobilde de logolari
       saga kaydiriyordu; ikon kolonunda ise '.v1-certband__icons' kendi
       genisligi kadar yer kaplayip (row, nowrap) ebeveyninin
       ('.v1-certband__col', stretch) TAM genisliginde ortalanmiyordu. */
    .v1-certband__col--logos { margin-left: 0; }
    .v1-certband__col--icons { display: flex; justify-content: flex-end; padding-bottom: 18px; }
}

/* ---- KALITE / SURDURULEBILIRLIK: AYRI IKI BANT --------------------------
   Her biri beyaz, tam genislikte, kendi icinde "metin solda / icerik sagda".
   Siralama: Kalite -> Haberler -> Surdurulebilirlik. Ortadaki ayirici cizgi
   ('.v1-certband__half--sustain' sol kenari / mobil ust kenari) yok; asil
   kurallar yukarida AYNEN duruyor, buradaki secicilerin ozgullugu mobil
   dosyadakileri de ezsin diye 'body'li. */
.v1-certband--quality,
.v1-certband--sustain { padding: clamp(28px, 3.2vw, 48px) 0; }

.v1-certband__row--single { grid-template-columns: minmax(0, 1fr); }

body.hero-v1-page:not(.hero-v2-page) .v1-certband--sustain .v1-certband__half--sustain {
    padding: 0;
    border: 0;
}

@media (min-width: 1200px) {
    /* Kalite: metin solda, logolar yarimin SAG kenarinda ('flex-start' yukaridaki
       yari-genislik duzeninden kalmaydi). */
    .v1-certband--quality .v1-certband__half--quality { justify-content: space-between; }

    /* Surdurulebilirlik: tam genislikte 3 ikon dikey liste degil, yan yana
       (ikon ustte, etiket altta). */
    .v1-certband--sustain .v1-certband__icons {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(32px, 4vw, 72px);
    }

    .v1-certband--sustain .v1-certband__iconitem {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .v1-certband--sustain .v1-certband__iconlabel { font-size: 14px; }
    .v1-certband--sustain .v1-certband__col--sustain .v1-certband__desc { max-width: 26em; }
}

/* "Proven Reliability" bandi: Kalite bandi iki kolon. Solda metin; sagda
   ustte 3 logo (kolonun tam genisligine yayilir), altinda ince cizgi,
   cizginin altinda solda "+N more certifications" (rakam turuncu, kalan gri),
   sagda "View All Certifications ->". Yalniz Kalite bandi
   ('.v1-certband--quality'); Surdurulebilirlik bandi degismedi. */
.v1-certband--quality .v1-certband__logos { align-items: stretch; width: 100%; }
.v1-certband--quality .v1-certband__logogrid { justify-content: center; gap: clamp(36px, 4.2vw, 68px); width: 100%; }

.v1-certband__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--v1-line);
}

.v1-certband__foot .v1-certband__more {
    margin: 0;
    font-weight: 500;
    color: var(--v1-body);
}
.v1-certband__foot .v1-certband__more b { color: var(--v1-orange); font-weight: 700; }
.v1-certband__foot .v1-certband__btn { margin-top: 0; margin-left: auto; }

@media (min-width: 1200px) {


    .v1-certband--quality .v1-certband__half--quality .v1-certband__col--text {
        flex: 0 1 auto;
    }
    .v1-certband--quality .v1-certband__half--quality .v1-certband__desc { max-width: 26em; }

    .v1-certband--quality .v1-certband__half--quality .v1-certband__col--logos {
        flex: 0 0 min(48%, 600px);
        align-self: center;
        align-items: stretch;
        justify-content: flex-start;
        padding-top: 0;
        margin-left: 0;
    }

    /* Sag kolon, sol metnin ust kenarindan (eyebrow) alt kenarina (aciklamanin
       son satiri) kadar. Logolar ustte ve buyuk, cizgi + "+N daha" / "View All"
       en altta; kolon metin kolonu kadar uzar. */
    .v1-certband--quality .v1-certband__half--quality { align-items: stretch; }

    .v1-certband--quality .v1-certband__half--quality .v1-certband__col--logos {
        align-self: stretch;
        justify-content: space-between;
    }

    .v1-certband--quality .v1-certband__logos { flex: 1 1 auto; display: flex; justify-content: flex-end; padding-bottom: 18px; }
    .v1-certband--quality .v1-certband__logo { height: clamp(30px, 2.3vw, 42px); }
    .v1-certband--quality .v1-certband__foot { margin-top: 0; padding-top: 14px; }
}

/* ============================================================================
   01 - URUNLER
   ============================================================================ */

/* Bu bolumun alt dolgusu yok, boylece hemen altindaki bolum bosluksuz,
   bitisik basliyor. Altindaki bolum sertifika bandi ('.v1-certband', kendi
   zemini ve genis dolgusu var) - ferahligi o veriyor. Ust dolgu ('.v1-sec' +
   '.v1-sec--first') AYNEN duruyor - kaldirilan yalnizca iki bolumun
   ARASINDAKI bosluk.
   '.v1-products' sadece /v1'de yukleniyor (v2 kendi '.v2-sector'unu
   kullaniyor), o yuzden bu kural baska bir surumu etkilemiyor. */
.v1-products { padding-bottom: 0; }

.v1-products__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.v1-product {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 250px;
    padding: 14px;
    background: var(--v1-paper-2);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s var(--v1-ease), box-shadow 0.3s var(--v1-ease);
}

.v1-product:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(24, 29, 78, 0.10);
}

.v1-product__img {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    bottom: 66px;
    display: block;
    overflow: hidden;
}

.v1-product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--v1-ease);
}

.v1-product:hover .v1-product__img img { transform: scale(1.05); }

.v1-product__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
}

.v1-product__title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--v1-ink);
}

.v1-product__arrow {
    flex: 0 0 auto;
    color: var(--v1-orange);
    font-size: 16px;
    transition: transform 0.25s var(--v1-ease);
}

.v1-product:hover .v1-product__arrow { transform: translateX(4px); }

/* 'v1-product--featured' (turuncu ilk kart) YOK: tek bir kart
   secilmis/one cikmis gibi durmasin diye 02'deki tum kartlar esit agirlikta.
   01 bolumundeki BUYUK kart baska bir sey - islevi olmayan bir vurgu degil,
   oklarla degisen carousel'in AKTIF ogesi. */

/* ============================================================================
   01 - SEKTOR BOLUMU

   Duzen: 3 kolon x 2 satirlik ASIMETRIK izgara. AKTIF sektor
   1. kolonu iki satir boyunca kaplayan buyuk kart, kalan 4 sektor 2. ve 3.
   kolonda 2x2. Sol kolonun dibinde ilerleme cubugu + "1 / 5" + oklar.
   Hangi kartin buyuk oldugunu home-v1.js '[data-v1-sector]' degistiriyor;
   JS yoksa ilk kart buyuk kalir, hicbir kart gizlenmez.

   Buyuk kart 'order: -1' aliyor: izgara akisinda ONCE yerlesip 1. kolonun
   iki satirini kapsiyor, geri kalan 4 kart kendiliginden 2. ve 3. kolona
   diziliyor. DOM sirasi hic degismiyor - JS sadece sinif degistiriyor.
   ============================================================================ */

/* Sol kolon bu bolumde izgarayla ayni yuksekligi paylasiyor: sayfalama
   referansta oldugu gibi kolonun DIBINDE, kart izgarasinin alt hizasina
   yakin duruyor. Diger bolumlerde '.v1-split' hala 'align-items: start'. */
.v1-split--stretch { align-items: stretch; }

.v1-split__text--pager {
    display: flex;
    flex-direction: column;
}

.v1-split__text--pager .v1-sector__pager { margin-top: auto; }

/* Referanstaki iki tonlu baslik: ilk satir koyu, ikinci satir turuncu.
   Renk SPAN'a veriliyor - 'h2.v1-h2' kuralinin ozgucugu (element+sinif)
   bir sinif secicisini yenerdi, ama farkli bir elemana yazildigi icin
   burada catisma yok (bkz. yukaridaki 'h2.v1-h2--light' yorumu). */
.v1-h2--split {
    position: relative;
    padding-top: 24px;
}

/* Baslik ustu kisa turuncu cizgi. Metinli kucuk etiket BILEREK yok.
   Cizgi de gizli (display:none) - kural silinmedi, sadece gizlendi. */
.v1-h2--split::before {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--v1-orange);
}

.v1-h2--split .v1-h2__a,
.v1-h2--split .v1-h2__b { display: block; }
.v1-h2--split .v1-h2__b { color: var(--v1-orange); }

.v1-sector__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 14px;
    /* Yukseklik iki satirdan turetiliyor: buyuk kart bu yuksekligin
       tamamini, kucukler yarisini aliyor. Sabit px yerine clamp - genis
       ekranda referanstaki ferahlik, dar ekranda tasma yok. */
    min-height: clamp(460px, 40vw, 620px);
}

.v1-sector {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    padding: 16px;
    text-decoration: none;
    overflow: hidden;
    background: var(--v1-ink);
}

/* AKTIF sektor: 1. kolon, iki satir boyu. */
.v1-sector.is-featured {
    order: -1;
    grid-row: span 2;
    padding: 22px;
}

.v1-sector__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--v1-ease);
}

.v1-sector:hover .v1-sector__img { transform: scale(1.06); }

/* Tepe net fotograf, gradyan sadece ALTA dogru koyulasan LACIVERT bir ton. */
.v1-sector__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 30, 61, 0) 0%, rgba(11, 30, 61, 0.18) 45%, rgba(11, 30, 61, 0.94) 100%);
}

/* Buyuk kartta metin daha uzun oldugu icin perde biraz yukaridan basliyor -
   yoksa aciklamanin ust satirlari fotografin acik kisminda okunmuyor. */
.v1-sector.is-featured .v1-sector__scrim {
    background: linear-gradient(180deg, rgba(11, 30, 61, 0) 0%, rgba(11, 30, 61, 0.22) 38%, rgba(11, 30, 61, 0.93) 100%);
}

.v1-sector__top, .v1-sector__body { position: relative; z-index: 1; }

.v1-sector__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Kose yaricapi 0 kurali karta uygulaniyor, ikon rozeti kucuk bir kontrol
   oldugu icin referanstaki gibi hafif yuvarlatildi (v1-flow__stage-btn'deki
   ayni istisna). */
.v1-sector__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--v1-orange);
    color: #fff;
    font-size: 17px;
    border-radius: 8px;
    transition: width 0.3s var(--v1-ease), height 0.3s var(--v1-ease);
}

.v1-sector.is-featured .v1-sector__icon {
    width: 48px;
    height: 48px;
    font-size: 21px;
}

/* Referanstaki cerceveli daire ok butonu - kucuk kontrol, yuvarlak. */
.v1-sector__corner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    transition: background 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease);
}

.v1-sector:hover .v1-sector__corner { background: var(--v1-orange); border-color: var(--v1-orange); }

.v1-sector__body { display: flex; flex-direction: column; gap: 6px; }

/* Kart buyudugunde/kuculdugunde izgara yerlesimi kendisi animasyonlanamaz
   (grid-row gecise girmez). Yumusakligi, karta 'is-featured' geldigi anda
   metnin kisa bir yukari suzulmesi sagliyor - JS'in ayrica bir gecis
   koreografisi kurmasi gerekmiyor. */
.v1-sector.is-featured .v1-sector__body {
    animation: v1SectorBodyIn 0.45s var(--v1-ease) both;
}

@keyframes v1SectorBodyIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Referanstaki kucuk kategori etiketi (DENIZCILIK, SU & ATIK SU, ...) -
   onunde kisa turuncu bir cizgi var. CMS'te bu alan yok, metinler dil
   dosyasindan geliyor (bkz. partials/v1-sector.blade.php). */
.v1-sector__tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

.v1-sector__tag::before {
    content: "";
    flex: none;
    width: 18px;
    height: 2px;
    background: var(--v1-orange);
}

.v1-sector__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.v1-sector.is-featured .v1-sector__title {
    font-size: clamp(21px, 2.1vw, 30px);
    line-height: 1.2;
}

.v1-sector__sub,
.v1-sector__leadtext {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-width: 22em;
}

/* Iki uzunluk da HTML'de basili; hangisinin gorunecegine kartin hali karar
   veriyor. Boylece buyuk karta gelen sektor degistiginde JS metin tasimiyor,
   sadece sinif degistiriyor. */
.v1-sector__leadtext { display: none; }
.v1-sector.is-featured .v1-sector__sub { display: none; }

.v1-sector.is-featured .v1-sector__leadtext {
    display: block;
    font-size: 13.5px;
    line-height: 1.65;
    max-width: 24em;
}

.v1-sector__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--v1-orange);
    transition: gap 0.25s var(--v1-ease);
}

.v1-sector:hover .v1-sector__link { gap: 12px; }
.v1-sector.is-featured .v1-sector__link { margin-top: 10px; font-size: 13.5px; }

/* ---- Sol kolonun dibindeki sayfalama (ilerleme cubugu + "1 / 5" + oklar) ---- */

.v1-sector__pager { padding-top: 32px; }

.v1-sector__bar {
    position: relative;
    width: min(190px, 100%);
    height: 2px;
    background: var(--v1-line);
    overflow: hidden;
}

/* Dolgu, cubugun sektor sayisina bolunmus bir dilimi; aktif sektor
   degistiginde kendi genisligi kadar kayiyor. Genislik ve konum CSS
   degiskenlerinden geliyor, JS sadece '--v1-sector-now' sayisini yaziyor. */
.v1-sector__bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(100% / var(--v1-sector-total, 5));
    background: var(--v1-orange);
    transform: translateX(calc(100% * var(--v1-sector-now, 0)));
    transition: transform 0.35s var(--v1-ease);
}

.v1-sector__pagerrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.v1-sector__nav {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--v1-line);
    border-radius: 50%;
    color: var(--v1-ink);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v1-sector__nav:hover {
    background: var(--v1-orange);
    border-color: var(--v1-orange);
    color: #fff;
}

.v1-sector__count {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.v1-sector__count-now { font-weight: 700; color: var(--v1-ink); }
.v1-sector__count-sep { margin: 0 3px; color: var(--v1-line); }
.v1-sector__count-all { color: var(--v1-body); }

/* ============================================================================
   02 - VANA TIPI CAROUSEL (buyuk sahne + yan liste + sayfalama)
   home-v1.js '[data-v1-flow]' burayi yonetiyor - JS kapaliysa/yuklenmezse
   sayfa yine anlamli kalir: ilk slayt zaten HTML'de basili, sadece
   ok/liste tiklamalari calismaz.
   ============================================================================ */

.v1-flow {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.v1-flow__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 32px;
}

/* Referanstaki yumusak dairesel zemin - saf CSS, gorsel dosyasi yok.
   Sagabakis (urunun arkasinda, hafif sagda) - referansla ayni konum. */
.v1-flow__stage-shape {
    position: absolute;
    top: 4%;
    right: 6%;
    width: 62%;
    height: 78%;
    background: radial-gradient(circle at 50% 45%, rgba(255, 65, 0, 0.16) 0%, rgba(255, 65, 0, 0.06) 55%, rgba(255, 65, 0, 0) 74%);
    border-radius: 50%;
}

/* "Pusula ignesi" - referanstaki koseli, turuncu geometrik aksan. Saf CSS
   kesim (clip-path), gorsel dosyasi yok: uzun bir ok/pusula ignesi seklinde
   iki ucgen, sol-uste dogru egik. */
.v1-flow__stage-needle {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 46px;
    height: 96px;
    transform: rotate(-32deg);
    background: linear-gradient(180deg, var(--v1-orange) 0%, var(--v1-orange) 52%, transparent 52%, transparent 100%);
    clip-path: polygon(50% 0%, 100% 62%, 50% 48%, 0% 62%);
    opacity: 0.9;
}

.v1-flow__stage-img {
    position: relative;
    z-index: 1;
    max-width: 74%;
    max-height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(24, 29, 78, 0.16));
}

.v1-flow__stage-card {
    position: absolute;
    left: 0;
    bottom: 4px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 78%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--v1-line);
    box-shadow: 0 16px 32px rgba(24, 29, 78, 0.1);
}

.v1-flow__stage-text { display: flex; flex-direction: column; gap: 4px; }

.v1-flow__stage-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v1-ink);
}

.v1-flow__stage-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--v1-body);
}

.v1-flow__stage-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--v1-orange);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    transition: transform 0.25s var(--v1-ease);
}

.v1-flow__stage-btn:hover { transform: translateX(3px); }

/* --------------------------------- yan liste --------------------------------- */

.v1-flow__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Kartlar DOLU gri degil, BEYAZ zeminli ve ince cerceveli. */
.v1-flow__item {
    display: flex;
    height: 100px;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 2px solid var(--v1-line);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.2s var(--v1-ease), box-shadow 0.2s var(--v1-ease);
}

.v1-flow__item:hover {
    border-color: var(--v1-orange);
    box-shadow: 0 10px 24px rgba(24, 29, 78, 0.08);
}

/* Aktif olan buyuk sahnede zaten gosteriliyor - listeden gizleniyor,
   boylece DOM sirasi hic degismeden "kalan 3" hissi elde ediliyor. */
.v1-flow__item.is-active { display: none; }

/* Kendi cercevesi YOK: kart artik zaten beyaz+cerceveli, ikinci bir
   cerceve iç içe iki kutu gibi durup gereksiz kalabalik yaratiyordu. */
.v1-flow__item-thumb {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
}

.v1-flow__item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.v1-flow__item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.v1-flow__item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v1-ink);
}

.v1-flow__item-sub {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--v1-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v1-flow__item > i { color: var(--v1-orange); font-size: 15px; flex: 0 0 auto; }

/* ---------------------------------- sayfalama ---------------------------------- */

.v1-flow__pager {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.v1-flow__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--v1-line);
    color: var(--v1-ink);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s var(--v1-ease), color 0.2s var(--v1-ease), border-color 0.2s var(--v1-ease);
}

.v1-flow__nav:hover { background: var(--v1-orange); border-color: var(--v1-orange); color: #fff; }

/* "01/04" sayaci + ilerleme cubugu yerine minimal 4 nokta - aktif nokta
   turuncu ve uzun, digerleri kucuk gri. */
.v1-flow__dots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}

.v1-flow__dot {
    padding: 0;
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: var(--v1-line);
    cursor: pointer;
    transition: width 0.25s var(--v1-ease), background 0.25s var(--v1-ease), border-radius 0.25s var(--v1-ease);
}

.v1-flow__dot.is-active {
    width: 22px;
    border-radius: 4px;
    background: var(--v1-orange);
}

/* ============================================================================
   03 - NEDEN DIKKANVALVE (gorsel sol kenardan tasar)
   ============================================================================ */

.v1-whyus { background: #F6F9FC; }

/* Bolum komsulariyla BITISIK duruyor. Bolumun kendi margin/padding'i
   yok - ustteki bosluk bir onceki bolumun ('.v1-products') alt dolgusundan
   gelirdi, o sifirlandi (asagida). Fotograf sol kenardan tastigi icin bu
   iki boslugun goze carpani oydu. */
.v1-whyus__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
}

/* Fotograf satirin TAM yuksekligini kaplasin. 'align-items: center' metin
   kolonu daha uzun oldugunda (dar masaustu genisliklerinde oluyor: kolon
   daraldikca fotograf kisaliyor, metin ise satir sayisiyla uzuyor)
   fotografi ortaliyor ve altinda/ustunde beyaz serit birakiyordu.
   'align-self: stretch' yalnizca gorseli etkiliyor - metin kolonu dikeyde
   ORTALI kalmaya devam ediyor.

   ⚠️ 'aspect-ratio' BILEREK KULLANILMIYOR: oran 'align-self: stretch' ile
   birlestiginde tarayici yuksekligi satirdan aliyor ve GENISLIGI orandan
   turetiyor - fotograf kutusu kolonunun disina tasip metin kolonunun sol
   serisini ortuyor (kutunun 'overflow: hidden'i ve sag kenardaki beyaz
   gradyani metnin ustune biniyor). Iki kolonlu duzende yukseklik bu yuzden
   dogrudan veriliyor. Tek kolona dusen dar ekranlarda oran hala
   kullaniliyor, orada satir paylasimi yok (bkz. asagidaki 1199.98px
   sorgusu). */
.v1-whyus__visual {
    position: relative;
    align-self: stretch;
    /* Bolum haberler bandiyla (.v1-nb) ayni yukseklikte kalsin diye kisa;
       asagidaki min-width:1200px kuraliyla AYNI deger. */
    min-height: clamp(29px, 6.7vw, 88px);
    background: var(--v1-paper-2);
    overflow: hidden;
}

/* Fotograf pencere isigindan dolayi soluk kaliyor - kontrast CSS
   filtresiyle yukseltiliyor, dosyaya dokunulmuyor. Degerler tek yerden
   ayarlanabilir; doygunluk ve parlaklik sadece kontrast artisinin
   fotografi soldurmasini dengeliyor. */
.v1-whyus__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.18) saturate(1.08) brightness(0.96);
}

/* Hero'nun AYNI beyaz gradyani: 03 bolumunun gorseli de sag kenarinda
   beyaza donuyor, boylece fotograf metin kolonuna dikis izi olmadan
   bagliyor. Yon hero'nun aynasi: orada gradyan soldan, burada sagdan
   geliyor. Gradyan baslangici sagda ve ara duraklar zayif tutuldu ki
   beyazlik fotografin uzerine fazla gelmesin; sag kenar yine tam beyaza
   donuyor. */
.v1-whyus__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(246, 249, 252, 0) 68%,
        rgba(246, 249, 252, 0.10) 94%,
        rgba(246, 249, 252, 0.38) 95%,
        rgba(246, 249, 252, 0.86) 97%,
        #F6F9FC 100%);
}

/* Metin kolonu SOLDA (bkz. asagidaki min-width:1200px kuralindaki
   'grid-column' notu), ic bosluk sayfanin 1296px kutusuyla hizali kalsin
   diye dolgu SOL kenara verildi. Ust/alt dolgu gorselle ayni oranda kucuk
   - yoksa metin bloku kisa gorseli asip bolumu uzatirdi. */
.v1-whyus__body {
    /* Ust/alt dolgu haberler bandiyla (.v1-nb) yukseklik esitlensin diye
       kucuk; asagidaki min-width:1200px '.v1-whyus__features' kuraliyla AYNI
       kalsin diye orada da aynen tekrarlaniyor.

       Sol dolgu 'clamp()' ile 140px'te TAVANLI: tavansiz 'max(24px,
       calc((100vw - 1296px) / 2))' genis bir monitorde (orn. 2560px) ~632px'e
       cikiyor, oysa kolonun kendi genisligi (fr tabanli) o kadar bile degil;
       metnin kullanabildigi alan neredeyse SIFIRA iniyor, satirlar tek tek
       kelimeye bolunup bolum COK UZUYORDU. Normal masaustu genisliklerinde
       (viewport <= ~1616px) deger zaten 140'in altinda, container'in 1296px
       kutusuyla hizali kaliyor; daha genis monitorlerde dolgu 140px'te
       sabitlenip metin kolonuna yeterli alan birakiyor. */
    padding: clamp(4px, 0.8vw, 10px) 0 clamp(4px, 0.8vw, 10px) clamp(24px, calc((100vw - 1296px) / 2), 140px);
    max-width: 660px;
}

/* Diger bolumlerdeki '.v1-*__eyebrow' kalibiyla (bkz. '.v1-nb__eyebrow',
   '.v1-news__eyebrow') AYNI: cizgi + kisa buyuk harf etiket, basligin hemen
   SOLUNDA/ustunde, varsayilan (sola yasli) hizada - metin
   'site.v1.whyus.eyebrow' anahtarindan. */
.v1-whyus__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-whyus__eyebrow-line { width: 28px; height: 2px; background: var(--v1-orange); }

/* Baslik saf siyah (--v1-ink) degil, markanin lacivert tonu (--v1-navy,
   '.v1-certband__iconglyph'te kullanilan ayni degisken) - sadece bu
   bolumde, genel '.v1-h2-wrap' kuralina dokunulmadi.
   Bolum haberler bandiyla (.v1-nb) ayni yukseklikte kalsin diye METIN
   blogunun kendi ic bosluklari (baslik boyutu/alt bosluk, paragraf satir
   araligi, buton ust bosluk) kucuk - genel '.v1-h2-wrap', '.v1-rich' ve
   '.v1-btnrow' kurallari SITE GENELINDE kullanildigi icin degistirilmedi,
   hepsi burada '.v1-whyus__body' ile KAPSAMLANDIRILDI. */
.v1-whyus__body .v1-h2-wrap :is(h1, h2, h3) {
    color: var(--v1-navy);
    margin-bottom: 8px;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
}

.v1-whyus__body .v1-rich { line-height: 1.5; }

.v1-whyus__body .v1-btnrow { margin-top: 14px; margin-bottom: 10px; }

/* Ozellikler 2x2 - her ogede ikon METNIN SOLUNDA (ustte degil), iki kolon
   arasinda satirlar boyunca TEK KESINTISIZ dikey cizgi: kenarlik her ogede
   degil, izgaranin kendisinde tek bir cizgi (bkz. '::before' asagida).

   Bu 2x2 kalibi SADECE <1200px'te gecerli (bolum tek kolona dustugunde,
   metnin altinda). >=1200px'te '.v1-whyus__features' '.v1-whyus__grid'in
   kendi UCUNCU kolonu oluyor ve TEK SUTUNLUK dikey listeye donuyor - bkz.
   asagidaki min-width:1200px kurali. */
.v1-whyus__features {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 48px);
    row-gap: clamp(20px, 2.5vw, 28px);
    margin: clamp(26px, 3vw, 38px) 0 0;
    
}

.v1-whyus__features::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--v1-line);
}

.v1-feature {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.v1-feature__icon {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 0px;
    /* Ikon rengi metinle ('.v1-feature__text', '--v1-navy') AYNI. */
    color: var(--v1-navy);
    font-size: 30px;
}

.v1-feature__text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--v1-navy);
}

/* Buton sayfadaki her yerde ayni buton dilini ('.v1-nb__cta' ile AYNI: 6px
   kose, dolu turuncu) kullaniyor. '.v1-outlinebtn' zaten o dil, burada
   ayrica bir override YOK. */

/* Fotograf TUM bolum genisligini kapliyor ('position: absolute; inset: 0'
   ile grid'in tamami) ve iki ucta yumusak bir beyaza karisiyor.

   Duzen: metin SOLDA, fotografin SAGINDA ayrica bir ozellik listesi kolonu.
   Izgara bu yuzden UC kolon (metin | fotograf bosluk payi | ozellikler),
   gradyan IKI YONLU: sol ucta metni, sag ucta ozellikleri okunur kilmak
   icin beyaza soluyor, ortada fotograf tam gorunur kaliyor. Renk tarifi
   (beyaz + AYNI opaklik basamaklari) iki tarafa aynalanmis; koyu/siyah bir
   gecis DEGIL. */
@media (min-width: 1200px) {
    .v1-whyus__grid {
        position: relative;
        box-sizing: border-box;
        /* Hizalama '.v1-whyus__body'/'.v1-whyus__features' kolonlarinin kendi
           dolgusuyla DEGIL, izgaranin KENDI dolgusuyla saglaniyor - '.v1-wrap'
           ile AYNI formul ('max(24px, calc((100vw-1296px)/2))'), TAVANSIZ.
           Dolgu kolonlara yazilsaydi genis monitorde (orn. 2560px) o kolonlarin
           kendi fr genisligi dolgu degerinden (632px) DAHA DAR kalir, metin ic
           alani SIFIRA/negatife inerdi; tavan konursa da izgaranin kenari sayfanin
           1296px kutusuyla hizalanmazdi.
           Dolgu izgaranin DISINDA oldugu icin ('.v1-whyus__visual'in 'inset:0'u
           konumlandigi kutunun DOLGU kenarina, yani izgaranin TAM DIS kenarina
           hizalanir - fotograf yine tam genislikte kalir) kalan ic alan HER ZAMAN
           tam olarak 1296px (ya da dar ekranda 'calc(100% - 48px)') - '.v1-wrap'
           ile BIREBIR AYNI genislik, fr kolonlari o sabit genisligi paylasir. */
        padding: 0 max(24px, calc((100vw - 1296px) / 2));
        /* Taban kuraldaki dusuk tavan (88px), gorselin ('argeyeni.webp', dogal
           orani ~2.99/1) genis ekranlarda 'object-fit: cover' ile SADECE dikey
           ortadaki ince bir seridini gosterip asiri yakinlasmis gorunmesine sebep
           oluyordu - fotografin GENISLIGI her zaman bolumun tam genisligine
           olcekleniyor, dar bir bantta gorselin sadece ~%15-18'i gorunur. Bu
           yuzden burada SADECE >=1200px kuralindaki tavan yuksek (taban kuraldaki
           88px tablet/dar masaustu icin gecerli). */
        /* Buyuk monitorlere ozel ekstra %25 zoom-out asagida, ayri bir
           '@media (min-width: 1920px)' kuraliyla veriliyor (bkz. altta) -
           bu deger normal masaustu (1200-1919px) icin. */
        min-height: clamp(160px, 24vw, 320px);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.85fr);
    }

    .v1-whyus__visual {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Taban kuralda ('.v1-whyus__visual img') 'object-position' verilmedigi
       icin varsayilan (ortadan, %50 %50) kirpiliyor - bant kisa oldugu icin
       bu, fotografin en altindaki masa/klavye seridini goruntuluyor,
       muhendisin/monitorlerin ustu kesiliyordu. Odak yukari kaydirildi. */
    .v1-whyus__visual img {
        object-position: center 65%;
    }

    /* Fotograf metnin/ozelliklerin hemen yaninda bile hafifce sezilir -
       gecis taban kuraldan (yukarida, dar kutu icin kalibre) cok daha genis:
       burada gorsel tum bolum genisligini kapladigi icin yuzdeler de o
       genislige gore yeniden hesaplandi, IKI ucta da. */
    /* Ozellikler kolonundeki yazilar okunsun diye sag taraf ERKEN tam opak
       beyaza donuyor - kolon ~%75'te basladigi icin neredeyse tamami duz beyaz
       zemin uzerinde; daha gec bir gecis kolonun arkasinda monitor ekranini
       gorunur birakiyordu. */
    .v1-whyus__visual::after {
        background: linear-gradient(90deg,
            #F6F9FC 0%,
            rgba(246, 249, 252, 0.92) 14%,
            rgba(246, 249, 252, 0.55) 23%,
            rgba(246, 249, 252, 0.18) 31%,
            rgba(246, 249, 252, 0) 40%,
            rgba(246, 249, 252, 0) 52%,
            rgba(246, 249, 252, 0.18) 58%,
            rgba(246, 249, 252, 0.6) 64%,
            rgba(246, 249, 252, 0.94) 70%,
            #F6F9FC 76%);
    }

    .v1-whyus__body {
        position: relative;
        z-index: 1;
        grid-column: 1;
        /* Sol dolgu artik izgaranin KENDI dolgusundan geliyor (yukarida) -
           buradaki taban kuralin ('.v1-whyus__body', dosyanin ustunde)
           hizalama icin buyutulen sol dolgusu >=1200px'te GEREKSIZ,
           dikey dolgu disinda sifirlaniyor. */
        padding-left: 0;
    }

    /* Ozellikler artik metnin altinda degil, fotografin SAGINDA ayri bir
       kolon - taban kuraldaki 2x2 izgara (<1200px icin) burada TEK SUTUNA
       ve dikey bir listeye donuyor, aradaki tek dikey cizgi ('::before')
       de bir sutunda anlamsizlastigi icin gizleniyor. Dolgu '.v1-whyus__body'nin
       eski (sag hizali) dolgusuyla AYNI mantik, sadece kolonun DIS kenari
       artik SAG (sayfa kutusuyla hizali), IC kenari (fotografa bakan) 0. */
    .v1-whyus__features {
        position: relative;
        z-index: 1;
        grid-column: 3;
        grid-template-columns: minmax(0, 1fr);
        row-gap: clamp(10px, 1.4vw, 16px);
        margin: 0;
        /* Sag dolgu artik izgaranin KENDI dolgusundan geliyor (yukaridaki
           '.v1-whyus__grid' notuna bkz.) - burada sadece dikey dolgu kaliyor. */
        padding: clamp(4px, 0.8vw, 10px) 0;
    }

    .v1-whyus__features::before {
        display: none;
    }

    /* Bant uzun oldugu icin ('.v1-whyus__grid' min-height'i) metnin
       arkasindaki gecis ('.v1-whyus__visual::after') ayni yatay yuzdelerle daha
       fazla dikey fotograf detayini (pencere/yaka golgeleri) aciga cikariyor,
       kontrast dusuyor. Cozum hizalamaya (dolgu/kolon) DOKUNMADAN, SADECE
       metne beyaz bir "hale" (text-shadow) eklemek - metin gorselin uzerinde
       nerede durursa dursun okunur kaliyor, gecisin kendisi degismedi. */
    .v1-whyus__body .v1-whyus__eyebrow,
    .v1-whyus__body .v1-h2-wrap :is(h1, h2, h3),
    .v1-whyus__body .v1-rich,
    .v1-whyus__features .v1-feature__text {
        text-shadow: 0 1px 16px #F6F9FC, 0 1px 16px #F6F9FC, 0 0 6px #F6F9FC;
    }
}

/* Ustteki '@media (min-width: 1200px)' kuralindaki min-height
   (160/24vw/320) normal masaustu icin - bu ekstra kural SADECE genis
   monitorlerde (>=1920px) devreye girip fotografin gorunen dilimini
   buyutuyor. */
@media (min-width: 1920px) {
    .v1-whyus__grid { min-height: clamp(150px, 37.5vw, 400px); }

    /* SADECE /v1, genis monitorlerde gorsele zoom-out. Bant yuksekligi
       (400px) ayni - fotograf bant genisliginin tamamina degil ortadaki
       %75'ine olceklenince 'cover' daha az kirpiyor (gorunen dikey dilim
       ~%62 -> ~%83). Iki yandaki bos seritler gecisin ('::after') zaten beyaz
       oldugu bolgede kaliyor; mask fotografin kenarlarini yumusatip dikis
       izini siliyor. */
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__visual { background: #F6F9FC; }

    .hero-v1-page:not(.hero-v2-page) .v1-whyus__visual img {
        display: block;
        width: 75%;
        margin: 0 auto;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    }
}

/* ============================================================================
   04 - KURESEL ETKI (dunya haritali istatistik bandi)
   Acik zeminli, dunya haritali bant (bkz. v1-sections.blade.php'deki yorum).
   Eski koyu parallax banner'in '.v1-banner*' siniflari kaldirildi; /v6 AYNI
   lang anahtarini ('site.v1.banner.headline') kullaniyor ama kendi ayri
   siniflariyla (home-v6.css) - bu siniflara bagli degil.
   ============================================================================ */

/* Referanstaki bant YATAY ve alcak - butun bolum tek satirda, tepeden
   tirnaga ~200px. Bu yuzden hem bolum payi hem de tipografi sayfanin geri
   kalanindan kucuk: '.v1-sec'in genel payi burada kullanilmiyor. */
.v1-globe { padding: clamp(28px, 3vw, 44px) 0; }

.v1-globe__row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Sabit ve YETERINCE GENIS: daha dar (orn. 300px) olunca iki satirlik
   baslik ("Flowing Together" / "for a Better Tomorrow.") dort satira
   boluniyor. */
.v1-globe__text {
    flex: 0 0 clamp(260px, 22vw, 340px);
    padding-right: clamp(14px, 1.8vw, 26px);
}

/* Diger tum bantlarla ('.v1-certband__eyebrow', '.v1-whyus__eyebrow',
   '.v1-nb__eyebrow'...) AYNI desen: kisa turuncu cizgi + TEK satir kucuk
   buyuk harfli etiket. */
.v1-globe__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-globe__eyebrow-line { width: 24px; height: 2px; background: var(--v1-orange); }

/* 'h2.v1-globe__title' olarak yaziliyor: sadece sinif (0,1,0) yazilirsa
   yukaridaki 'h2.v1-h2' kurali (element+sinif = 0,1,1) ozgullukte kazanir
   ve baslik 38px'te kalir - ilk denemede olan tam olarak buydu. */
h2.v1-globe__title {
    margin-bottom: 10px;
    font-size: clamp(21px, 1.7vw, 28px);
    line-height: 1.22;
    max-width: none;
}

.v1-globe__title span { display: block; }

.v1-globe__text .v1-lead {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.6;
    max-width: none;
}

.v1-globe__stats {
    display: flex;
    flex: 0 0 auto;
    border-left: 1px solid var(--v1-line);
}

.v1-globe__stat {
    padding: 0 clamp(8px, 1.1vw, 18px);
    border-right: 1px solid var(--v1-line);
}

.v1-globe__stat:last-child { border-right: none; }

.v1-globe__staticon {
    display: block;
    margin-bottom: 8px;
    color: var(--v1-ink);
    font-size: 40px;
    line-height: 1;
}

.v1-globe__statnum {
    margin: 0 0 3px;
    font-size: clamp(19px, 1.5vw, 24px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--v1-ink);
}

.v1-globe__statnum i { font-style: normal; }

.v1-globe__statlabel {
    display: block;
    font-size: 12px;
    color: var(--v1-body);
}

.v1-globe__map {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: clamp(10px, 1.4vw, 20px);
    border-left: 1px solid var(--v1-line);
}

.v1-globe__map img {
    display: block;
    width: 100%;
    height: auto;
}

/* Haritanin sag-alt kosesindeki bos okyanus alanina oturuyor (referansta
   oldugu gibi) - kitalarin uzerine binmiyor. */
.v1-globe__mapcaption {
    position: absolute;
    right: -10px;
    bottom: 0;
    max-width: 150px;
    font-size: 12px;
    line-height: 1.45;
    text-align: right;
    color: var(--v1-body);
}

/* Orta genislikte metin+rakamlar ust satirda kaliyor, harita tek basina
   alta iniyor - tek satirda zorlanirsa harita birkac piksele sikisiyordu. */
@media (max-width: 1199.98px) {
    .v1-globe__row { flex-wrap: wrap; }
    .v1-globe__map {
        flex: 1 1 100%;
        margin-top: 24px;
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 991.98px) {
    .v1-globe__row { flex-direction: column; align-items: stretch; }
    .v1-globe__text { flex-basis: auto; padding-right: 0; }
    .v1-globe__stats { border-left: none; border-top: 1px solid var(--v1-line); padding-top: 20px; width: 100%; }
    .v1-globe__map { border-left: none; padding-left: 0; width: 100%; }
    /* Tek sutuna dustugunde metin SOLA degil ORTAYA yaslaniyor - harita da bu
       genislikte tam ortada, ikisi ayni eksende duruyor.
       'display:block' SART: element bir '<span>' ('v1-sections.blade.php'),
       masaustunde 'position:absolute' onu otomatik BLOK yapiyor (CSS spec);
       burada 'position:static'e donunce bu otomatik bloklastirma da kalkiyor,
       span yeniden INLINE oluyor - inline bir ogede 'text-align' KENDI icin
       hicbir sey yapmaz (sadece icindeki satir-ici icerigi hizalar). */
    .v1-globe__mapcaption { position: static; display: block; text-align: center; margin: 10px auto 0; max-width: none; }
}

@media (max-width: 575.98px) {
    .v1-globe__stats { flex-direction: column; }
    .v1-globe__stat { border-right: none; border-bottom: 1px solid var(--v1-line); padding: 14px 0; }
    .v1-globe__stat:first-child { padding-top: 0; }
    .v1-globe__stat:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ============================================================================
   05 - HABERLER
   Bolum sadece bir 3'lu grid degil - ust satirda eyebrow + dekoratif filtre
   sekmeleri, solda baslik/aciklama/CTA/sayfalama, sagda 1 buyuk one cikan
   kart + 2 kucuk yan kart, altta sosyal medya seridi, sag altta turuncu
   ucgen aksan.
   Sekmeler (Tumu/Etkinlikler/Haberler/Icgoruler/Basin) DEKORATIF - CMS'te
   haber-tipi taksonomisi yok, gercek filtreleme yapilmiyor.
   Buyuk kart + yan kartlar arasindaki gecis GERCEK: home-v1.js
   '[data-v1-news]' zaten yuklu 3 haberi '.v1-flow' ile ayni desende
   donduruyor (yeni sorgu/veri yok).
   ============================================================================ */

.v1-news { position: relative; overflow: hidden; }

.v1-news__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: clamp(24px, 3vw, 36px);
}

.v1-news__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-news__eyebrow-line { width: 28px; height: 2px; background: var(--v1-orange); }

.v1-news__tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.v1-news__tab {
    padding: 8px 18px;
    background: var(--v1-paper-2);
    color: var(--v1-body);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
}

.v1-news__tab.is-active { background: var(--v1-orange); color: #fff; }

.v1-news__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 14px 26px;
    background: var(--v1-orange);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.25s var(--v1-ease);
    border-radius: 6px;
    margin-right: 20px;
    height: 50px;
}

.v1-news__cta i { color: #fff; }
.v1-news__cta:hover { filter: brightness(0.92); }

.v1-news__pager { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 2.5vw, 32px); }

.v1-news__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--v1-line);
    border-radius: 50%;
    color: var(--v1-ink);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s var(--v1-ease), color 0.2s var(--v1-ease), border-color 0.2s var(--v1-ease);
}

.v1-news__navbtn:hover { background: var(--v1-orange); border-color: var(--v1-orange); color: #fff; }

.v1-news__count { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--v1-ink); }

/* --------------------------------- kart izgarasi --------------------------------- */

/* Kucuk kartlar YAN YANA (ayni satirda), alt alta degil. Sarmalayici DIV
   yok - stage + 3 kart hepsi dogrudan grid kardesi; aktif olan (.is-active)
   display:none ile akistan cikinca grid'in kendi otomatik yerlesimi kalan
   2 karti 2. ve 3. sutuna kendiliginden koyuyor (v1-flow__item.is-active
   ile AYNI mantik, burada sadece "liste" sutun degil grid hucresi). */
/* Kartlarin boylari esit: 'align-items' varsayilan 'stretch', boylece uc
   kart da satirin en uzunu kadar olup altlari ayni hizada bitiyor. Artan
   yuksekligi FOTOGRAF emiyor (figure'lerde 'flex: 1 1 auto', asagida) -
   metin blogu ve link birbirine bitisik kaliyor, basliktan sonra buyuk
   bir bosluk olusmuyor. */
.v1-news__cards {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.v1-news-feat {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--v1-paper);
    border: 1px solid var(--v1-line);
}

/* 'flex: 1 1 auto': kart satirin en uzunu kadar uzatildiginda artan yuksekligi
   metin degil FOTOGRAF aliyor. 'aspect-ratio' hala taban olcu - bosluk yoksa
   kart eskisi gibi goruluyor. */
.v1-news-feat__figure {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 16 / 11;
    background: var(--v1-paper-2);
    overflow: hidden;
}

.v1-news-feat__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--v1-ease);
}

.v1-news-feat:hover .v1-news-feat__figure img { transform: scale(1.04); }

.v1-news-feat__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }

.v1-news-feat__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--v1-ink);
    transition: color 0.2s var(--v1-ease);
}

.v1-news-feat:hover .v1-news-feat__title { color: var(--v1-orange); }

/* Kartin kendisine 'flex: 1 1 auto' VERILMEZ - uzama izgaranin isi
   ('.v1-news__cards', stretch) ve artan yuksekligi fotograf aliyor
   ('.v1-news-card__figure'). Buraya yazilirsa bosluk metin blogunun
   arasina dagilip linki asagi iter, "kaymis" bir gorunum olusur. */
.v1-news-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--v1-paper);
    border: 1px solid var(--v1-line);
}

/* Aktif olan (su an buyuk kartta gosterilen) yan listeden gizleniyor -
   v1-flow__item.is-active ile AYNI mantik, boylece hep "kalan 2" gorunuyor. */
.v1-news-card.is-active { display: none; }

.v1-news-card__figure {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 4 / 3;
    background: var(--v1-paper-2);
    overflow: hidden;
}

.v1-news-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--v1-ease);
}

.v1-news-card:hover .v1-news-card__figure img { transform: scale(1.05); }

/* Taban kural margin vermiyor - '.v1-news-feat__body' kendi padding+gap'i
   ile bosluk zaten sagliyor, '.v1-news-card' ise figure'in hemen altinda
   dogrudan durdugu icin kendi margin'ini asagida ayrica aliyor. */
.v1-date {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--v1-body);
}

.v1-news-card .v1-date { margin: 14px 16px 0; }

.v1-news-card__title {
    margin: 8px 16px 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--v1-ink);
    transition: color 0.2s var(--v1-ease);
}

.v1-news-card:hover .v1-news-card__title { color: var(--v1-orange); }

.v1-news-card .v1-arrowlink,
.v1-news-feat .v1-arrowlink { margin: 0 16px 16px; align-self: flex-start; margin-top: auto; }

.v1-news-feat .v1-arrowlink { margin-left: 22px; margin-right: 22px; }

/* --------------------------------- sosyal medya seridi --------------------------------- */

.v1-news__social {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: clamp(24px, 3vw, 32px);
    padding: 20px 26px;
    background: rgba(255, 65, 0, 0.06);
    border: 1px solid rgba(255, 65, 0, 0.16);
    border-radius: 6px;
}

.v1-news__social-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    color: var(--v1-orange);
    font-size: 19px;
}

.v1-news__social-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.v1-news__social-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-news__social-title { font-size: 15px; font-weight: 700; color: var(--v1-ink); }
.v1-news__social-desc { font-size: 12.5px; color: var(--v1-body); }

.v1-news__social-links { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }

.v1-news__social-links a {
    display: inline-flex;
    color: var(--v1-ink);
    font-size: 18px;
    transition: color 0.2s var(--v1-ease);
}

.v1-news__social-links a:hover { color: var(--v1-orange); }
.v1-news__social-links i.la-long-arrow-alt-right { margin-left: 6px; color: var(--v1-orange); font-size: 18px; }

/* --------------------------------- ucgen aksan --------------------------------- */

/* Referanstaki sag-alt kose ucgeni - saf CSS (clip-path), gorsel dosyasi
   yok, v1-flow__stage-needle ile AYNI teknik. */
.v1-news__triangle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(110px, 11vw, 190px);
    height: clamp(110px, 11vw, 190px);
    background: var(--v1-orange);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

/* ============================================================================
   Duyarli
   ============================================================================ */

@media (max-width: 1199.98px) {
    .v1-split { grid-template-columns: minmax(0, 1fr); }
    .v1-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v1-certs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Tek kolona dusunce sol kolon artik izgarayla yukseklik paylasmiyor;
       sayfalamayi dibe iten pay da anlamini yitiriyor. */
    .v1-split--stretch { align-items: start; }
    .v1-split__text--pager .v1-sector__pager { margin-top: 0; }
    .v1-products .v1-split { align-items: start; }
    .v1-products .v1-products__ctarow { margin-top: clamp(18px, 3vw, 32px); }

    /* Buyuk kart iki SATIR yerine ust satirda TAM GENISLIK aliyor, kalan 4
       kart altta 2x2 diziliyor. Iki kolonlu izgarada 'grid-row: span 2'
       kalsaydi kartlardan ikisi buyuk kartin yanina, ikisi altina duserdi. */
    .v1-sector__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        min-height: 0;
    }

    .v1-sector.is-featured {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: clamp(340px, 46vw, 460px);
    }
    .v1-flow { grid-template-columns: minmax(0, 1fr); }
    .v1-flow__stage { min-height: 300px; }
    .v1-whyus__grid { grid-template-columns: minmax(0, 1fr); }
    /* Tek kolonda gorsel metinle satir paylasmiyor, yuksekligini yine
       orandan aliyor - ust kuraldaki 'min-height' burada sifirlaniyor. Oran
       genis/alcak, alt/ust dolgu da ayni oranda kucuk. */
    .v1-whyus__visual { aspect-ratio: 3.81 / 1; min-height: 0; }
    .v1-whyus__body { padding: clamp(17px, 2.3vw, 26px) 24px; max-width: none; }
}

@media (max-width: 991.98px) {
    .v1-wrap { width: calc(100% - 40px); }

    /* Asagidaki dort hero kurali SADECE /v2 icin - /v1'in kendi dar ekran
       kurallari var (bkz. yukaridaki HERO bolumu). */
    .hero-v2-page .v1-hero { padding: 16px 16px 0; }

    /* Tek kolona dusunce gradyan DIKEY olmali: yatay kalsa metin
       fotografin koyu kismina biner ve koyu yazi okunmaz olur. */
    .hero-v2-page .v1-hero__scrim {
        background: linear-gradient(180deg,
            #fff 0%,
            rgba(255, 255, 255, 0.96) 38%,
            rgba(255, 255, 255, 0.72) 56%,
            rgba(255, 255, 255, 0.25) 74%,
            rgba(255, 255, 255, 0) 88%);
    }

    .hero-v2-page .v1-hero__inner {
        width: calc(100% - 48px);
        padding-top: clamp(44px, 8vw, 72px);
    }

    /* Gorselin gradyani da dikeye doner - metin artik gorselin ALTINDA. */
    .v1-whyus__visual::after {
        background: linear-gradient(180deg,
            rgba(246, 249, 252, 0) 55%,
            rgba(246, 249, 252, 0.6) 82%,
            #F6F9FC 100%);
    }

    /* Buyuk kart ust satirda TAM genislik, kalan 2 kart alt satirda yan
       yana - grid'in kendi otomatik akisi ile (bkz. yukaridaki '.v1-news__cards'). */
    .v1-news__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v1-news-feat { grid-column: 1 / -1; }
    /* Taban kural (yukarida) zaten 2x2 - burada ayrica 'gap: 22px 0' vermek
       kolonlar arasi bosluk gap'ini 0'a sifirlayip ortadaki bolum cizgisine
       ('.v1-whyus__features::before') metni yapistirirdi. */
}

@media (max-width: 767.98px) {
    .v1-wrap { width: calc(100% - 32px); }

    /* Bu dort kural da SADECE /v2 icin (yukaridaki nota bkz.).
       /v1 hero-sunda tek buton var, yigilmasi gerekmiyor. */
    .hero-v2-page .v1-hero__inner { width: calc(100% - 32px); }
    .hero-v2-page .v1-hero__cta { flex-direction: column; align-items: stretch; }
    .hero-v2-page .v1-hero__cta .theme-btn { text-align: center; }
    .hero-v2-page .v1-hero__cta .v1-arrowlink { justify-content: flex-start; }

    .v1-products__grid { grid-template-columns: minmax(0, 1fr); }
    .v1-certs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v1-sector__grid { grid-template-columns: minmax(0, 1fr); }
    .v1-sector.is-featured { min-height: clamp(320px, 78vw, 420px); }
    .v1-flow__stage-card { max-width: 92%; }
    .v1-news__cards { grid-template-columns: minmax(0, 1fr); }
    .v1-news-feat { grid-column: auto; }
    .v1-news__tabs { display: none; }
    .v1-news__social { flex-wrap: wrap; }
    .v1-whyus__features { grid-template-columns: minmax(0, 1fr); }
    .v1-feature { padding-left: 0; border-left: none; }
}

/* ============================================================================
   FOOTER - butun kurallar footer.css'te (footer sitenin varsayilani,
   butun sayfalarda yukleniyor).
   ============================================================================ */

/* ============================================================================
   HEADER
   ----------------------------------------------------------------------------
   Markup ortak (header.blade.php butun sayfalarda ayni dosya); buradaki her
   kural govde sinifiyla (bkz. master.blade.php) sinirli, sitenin geri
   kalanindaki navbar'a hicbir sekilde dokunmuyor - footer-v1 ile ayni
   izolasyon deseni.

   HERO bolumunun basindaki notun aynisi burada da gecerli: /v2 de
   'hero-v1-page' sinifini tasiyor, bu yuzden /v1'e ozel kurallar
   ':not(.hero-v2-page)' ile ayriliyor; /v2 eski navbar'i koruyor.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   /v1 - navbar sitenin genelinden daha HAFIF ve daha FERAH: ince punto,
   genis aralikli menu maddeleri ve sagda TEK eylem.

   Navbar AKISTA/STATIK degil, hero'nun UZERINE binen bir serit. Bu yuzden
   site varsayilaninin AKSINE '.header-area' burada 'position: absolute' -
   sitenin genel 'absolute-header' sinifiyla AYNI mekanizma degil (o
   koyu/gradyanli bir varyant, buradaki renk ayri asagida tanimli).

   Renk TEK katmanda: '.header-area' kendisi boyaniyor, ic ic gecmis
   '.navigation'/'.container' SEFFAF birakiliyor - ikisi ayri ayri boyansaydi
   genislikleri (ic container 1320px'te sinirli, disi tam genislik) tam
   ortusmuyor ve kenarda ince bir "dikis" (renksiz serit) kaliyordu. */
/* Renk '.header-area'nin KENDISINDE degil, bir '::before' katmaninda.
   Sebebi bir 'backdrop-filter' tuzagi: uzerinde 'backdrop-filter' olan bir
   eleman kendi altindakiler icin "backdrop root" olusturuyor, yani
   ICINDEKI elemanlarin kendi 'backdrop-filter'i artik sayfayi degil bu
   kokun (bos) icerigini orneklemeye basliyor - acilir menuler cam gorunse
   de arkalarini HIC bulaniklastirmiyordu. Filtre bir cocuk katmanda olunca
   '.header-area' sade bir kapsayici kaliyor. */
.hero-v1-page:not(.hero-v2-page) .header-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: transparent;
}

/* Renk TEK katmanda kaliyor (asagidaki '.navigation'/'.container' seffaf
   notuna bkz.) - sadece tasiyicisi degisti. 'z-index: -1': header'in kendi
   yigin baglaminin en altina oturuyor, yani menu/logo bu katmanin USTUNDE
   ama katman hala sayfanin uzerinde.
   Serit DUZ BEYAZ (yari saydam + bulanik cam degil) - altindaki fotograf
   bulaniklasmiyor. Katman yerinde kaldi (mobilin antrasit zemini 00c'de
   ayni katmani boyuyor). */
.hero-v1-page:not(.hero-v2-page) .header-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;
}

.hero-v1-page:not(.hero-v2-page) .header-area .navigation,
.hero-v1-page:not(.hero-v2-page) .header-area .container {
    background: transparent;
}

/* Kaydirinca JS '#header-sticky'e '.header-sticky' sinifini ekliyor - o zaman
   sitenin varsayilan kurali devreye giriyor ('position:fixed; background:#fff'),
   yukaridaki seffaflik SADECE sayfanin en ustundeyken gecerli. */

.hero-v1-page:not(.hero-v2-page) .header-area .navigation { height: 86px; }
.hero-v1-page:not(.hero-v2-page) .header-area .header-inner-box .logo { height: 86px; }
.hero-v1-page:not(.hero-v2-page) .logo img { width: 168px; }

/* Menu MADDELERI ve adresleri sitenin geri kalaniyla ayni - degisen
   yalnizca ritim: daha genis aralik, daha ince punto, hafif harf araligi. */
.hero-v1-page:not(.hero-v2-page) .main-menu ul > li { margin-right: 34px; }

.hero-v1-page:not(.hero-v2-page) .main-menu ul > li > a {
    padding: 32px 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* ---- acilir alt menu (Company, Media, dil secici) -----------------------
   /v1 sitenin diger sayfalarindaki beyaz, ince kenarlikli paneli kullaniyor
   (header.blade.php '.nav-dropdown-light', kurallar style.css). Eski cam
   panel kurallari ve alt menu linklerine verilen 10px/15px olculer git
   gecmisinde.

   Asagidaki kurallar /v1'in UST menu kurallarinin panele sizmasini
   engelliyor - beyaz panel her sayfada ayni gorunsun diye:
     - '.main-menu ul > li { margin-right: 34px }' panel satirlarina da
       uyuyordu (style.css'teki 0'i eziyor), link 34px dar kaliyordu;
     - ust maddelerin harf araligi panel linklerine de geciyordu;
     - dil secicinin '.lang-aera ul > li > a' kurali (14px) paneldeki dil
       linklerine de uyuyordu; diger sayfalarda orasi 16px. */
.hero-v1-page:not(.hero-v2-page) .main-menu ul > li > ul:not(.mega-menu) li {
    margin-right: 0;
}

.hero-v1-page:not(.hero-v2-page) .main-menu ul > li > ul:not(.mega-menu) li > a {
    letter-spacing: normal;
}

.hero-v1-page:not(.hero-v2-page) .header-right .lang-aera ul > li > ul li > a {
    font-size: 16px;
}

/* Alt menu yazisinin uzerinde beyaz cizgi. main.js uzerine gelinen linke
   'active' ekliyor, style.css de 'a.active:before' ile 16px beyaz cizgi
   ciziyor - eski tasarimda 50px'lik sol bosluga dusuyordu, buradaki 8px
   dolguda yazinin ustune biniyor. */
.hero-v1-page:not(.hero-v2-page) .main-menu ul > li > ul:not(.mega-menu) li > a.active:before {
    display: none;
}

/* Mega menu (Urunler) AYRI ele alinmak zorunda: disaridaki <ul> zaten
   saydam, gorunen yuzeyi icindeki '.container' basiyor (style.css
   'background-color: #fff') - yukaridaki cam kurali <ul>'a uygulansaydi
   opak beyaz container onu tamamen orterdi. Bu yuzden <ul> ':not(.mega-menu)'
   ile disarida birakilip cam DOGRUDAN container'a veriliyor; panel de
   boylece eski tasarimdaki gibi ORTALI kaliyor, tam genislige yayilmiyor.

   Opaklik burada daha yuksek (0.72 vs 0.38): yuzey cok genis ve icerik
   gorsel agirlikli - dusuk opaklikta arkadaki hero fotografi urun
   gorsellerinin ve metinlerin arasindan sizip okunurlugu bozuyordu.
   /v3'te de ayni sebeple mega menu diger dropdown'lardan daha opak. */
.hero-v1-page:not(.hero-v2-page) ul.sub-menu.mega-menu .container {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 20px 45px -14px rgba(16, 24, 40, 0.3);
}

/* ---- arama paneli (buyutecle acilan v5-search) --------------------------
   Panel /v1, /v2, /v5, /v7'de PAYLASILAN bir bilesen; kapsam
   '.hero-v1-page:not(.hero-v2-page)' oldugu icin sadece /v1 etkileniyor.
   Header duz beyaz oldugu icin panel cam degil: v5-search.css'in opak
   varsayilanlari gecerli. Panel zemini varsayilandaki acik gri
   ('--v5s-paper-2') yerine BEYAZ: header'in hemen altindan iniyor, ayni
   yuzeyin devami gibi okunsun. Arama cubugu/sekmeler acik gride kaliyor,
   beyaz panelde ayrisiyorlar. */
.hero-v1-page:not(.hero-v2-page) .v5-search__panel {
    background: var(--v5s-paper);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 24px 60px rgba(16, 24, 40, 0.28);
}

/* ---- header-right: buyutec | dil | Giris Yap ----------------------------
   "Urun Bul" butonu /v1'de BASILMIYOR (bkz. header.blade.php). Geriye ucu
   kaliyor, sira "buyutec -> ayrac -> dil -> buton". Ayrac DOM'da dil
   seciciden SONRA duruyor (sitenin genelinde arac grubunu eylem grubundan
   ayiriyor); '.header-right' zaten flex oldugu icin sira burada 'order' ile
   duzeltiliyor - ortak markup'a dokunmadan. */
.hero-v1-page:not(.hero-v2-page) .header-right .search-trigger,
.hero-v1-page:not(.hero-v2-page) .header-right .v5-search-trigger { order: 1; }
.hero-v1-page:not(.hero-v2-page) .header-right .header-divider { order: 2; margin: 0 20px 0 4px; }
.hero-v1-page:not(.hero-v2-page) .header-right .lang-aera { order: 3; }
.hero-v1-page:not(.hero-v2-page) .header-right .my-dikkan { order: 4; margin-left: 22px; }

/* Mobil ust bardaki buyutec /v1'de de gorunur: mobil arama paneli
   (mobile-search.blade.php) onu kullaniyor ve ikon responsive.css'teki
   mobil header kuraliyla beyaz. */

/* Dil secici referanstaki gibi: dunya ikonu + kisaltma + asagi ok. Ikonlar
   markup'ta kosullu basiliyor (header.blade.php) ve SUS - okunan metin yine
   dil kisaltmasi. */
.hero-v1-page:not(.hero-v2-page) .header-right .lang-aera ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.hero-v1-page:not(.hero-v2-page) .header-right .lang-aera .fa-globe { font-size: 17px; }
.hero-v1-page:not(.hero-v2-page) .header-right .lang-aera .v1-lang-caret { font-size: 11px; }

/* "Giris Yap" sayfadaki TEK buton oldugu icin DOLU turuncu (/v2'de
   cerceveli). Ok yok. .theme-btn'in kose ayraci suslemesi (:before/:after)
   burada da kapali. */
.hero-v1-page:not(.hero-v2-page) .my-dikkan .theme-btn {
    padding: 13px 30px;
    background: var(--v1-orange);
    color: #fff !important;
    border: 1px solid var(--v1-orange);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    border-radius: 6px;
}

.hero-v1-page:not(.hero-v2-page) .my-dikkan .theme-btn:before,
.hero-v1-page:not(.hero-v2-page) .my-dikkan .theme-btn:after { content: none; }

.hero-v1-page:not(.hero-v2-page) .my-dikkan .theme-btn:hover {
    background: #d93700;
    border-color: #d93700;
    color: #fff !important;
}

/* ----------------------------------------------------------------------------
   /v1 - KOSE YARICAPI: sayfadaki kartlarin ve butonlarin sivri kosesi
   olmasin. Site geneli kural (kose yaricapi 0) burada /v1'e OZEL bir
   istisna - /v2 DEGISMEDI, asagidaki her kural
   '.hero-v1-page:not(.hero-v2-page)' ile kilitli.
   Iki olcek: kartlar 10px, butonlar/kucuk kontroller 6px (v1-outlinebtn ve
   v1-news__cta'nin ZATEN kullandigi deger - yeni bir olcek eklenmedi).
   '.v1-news-feat' ve '.v1-news-card'a 'overflow:hidden' de eklendi -
   ikisinin de kenara TAM YASLI (paddingsiz) bir fotograf cocugu var,
   'overflow' olmadan yuvarlatilan kart kosesinden fotografin kendi kare
   kosesi tasardi. Digerlerinde (urun/sektor/whyus karti) 'overflow:hidden'
   zaten vardi. */
.hero-v1-page:not(.hero-v2-page) .v1-product,
.hero-v1-page:not(.hero-v2-page) .v1-sector,
.hero-v1-page:not(.hero-v2-page) .v1-flow__stage-card,
.hero-v1-page:not(.hero-v2-page) .v1-flow__item,
.hero-v1-page:not(.hero-v2-page) .v1-whyus__visual,
.hero-v1-page:not(.hero-v2-page) .v1-certs__card,
.hero-v1-page:not(.hero-v2-page) .v1-news-feat,
.hero-v1-page:not(.hero-v2-page) .v1-news-card {
    border-radius: 10px;
}

.hero-v1-page:not(.hero-v2-page) .v1-news-feat,
.hero-v1-page:not(.hero-v2-page) .v1-news-card {
    overflow: hidden;
}

.hero-v1-page:not(.hero-v2-page) .theme-btn,
.hero-v1-page:not(.hero-v2-page) .v1-flow__nav,
.hero-v1-page:not(.hero-v2-page) .v1-news__social-icon {
    border-radius: 6px;
}

@media (max-width: 991.98px) {
    .hero-v1-page:not(.hero-v2-page) .header-area .navigation,
    .hero-v1-page:not(.hero-v2-page) .header-area .header-inner-box .logo { height: 76px; }

    /* Bu esikte buyutec gizleniyor (bkz. v5-search.css) ve ayrac yukaridaki
       'order' ile en basa alindigi icin solunda ayiracak bir sey kalmiyordu -
       header'in sol kenarinda oylece duran bir cizgi olarak goruinuyordu.
       Sitenin genelinde ayni sorun yok: orada ayrac dil seciciden SONRA
       geliyor. */
    .hero-v1-page:not(.hero-v2-page) .header-right .header-divider { display: none; }
}


/* ----------------------------------------------------------------------------
   /v2 navbar'i: sitenin genelinden daha ince ve hafif, "Giris Yap" DOLU
   turuncu degil CERCEVELI, "Urun Bul" butonu yerinde. /v1'in navbar'indan
   bagimsiz.
   ---------------------------------------------------------------------------- */

.hero-v2-page .header-area .navigation { height: 78px; }
.hero-v2-page .header-area .header-inner-box .logo { height: 78px; }
.hero-v2-page .logo img { width: 168px; }

.hero-v2-page .main-menu ul > li { margin-right: 26px; }

.hero-v2-page .main-menu ul > li > a {
    padding: 28px 0;
    font-size: 14.5px;
    font-weight: 500;
}

.hero-v2-page .header-right a.finder-nav-btn {
    padding: 10px 22px;
    font-size: 13.5px;
    box-shadow: none;
}

/* "Giris Yap" referansta CERCEVELI, sade bir kenarlik - .theme-btn'in kose
   ayraci suslemesi (:before/:after) burada da ISTENMIYOR ("Urun Bul" ile ayni
   karar). Kural SADECE /v2'deki bu butona kilitli. */
.hero-v2-page .my-dikkan .theme-btn {
    padding: 10px 22px;
    background: transparent;
    color: var(--v1-orange);
    border: 1px solid var(--v1-orange);
    font-size: 13.5px;
}

.hero-v2-page .my-dikkan .theme-btn:before,
.hero-v2-page .my-dikkan .theme-btn:after { content: none; }

.hero-v2-page .my-dikkan .theme-btn:hover {
    background: var(--v1-orange);
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .hero-v2-page .header-area .navigation,
    .hero-v2-page .header-area .header-inner-box .logo { height: 72px; }

    .v1-catalog__body {
    margin-top: 10px;
}
}

/* ============================================================================
   01 - URUN TIPLERI BOLUMU ("A Complete Range of Valve Solutions"). SADECE
   /v1'de kullaniliyor (bkz. partials/v1-products.blade.php) - buradaki
   sektor bolumunun ('.v1-sector', hala yukarida duruyor ama /v1'de
   kullanilmiyor) yerini aldi. /v2 kendi sektor bolumunu koruyor, asagidaki
   siniflar onunla hicbir sekilde kesismiyor (ayri isim uzayi).

   3 buyuk fotografli kart (Kelebek/Surgulu/Kuresel Vana) + altinda ince
   ust cizgiyle ayrilmis 4 ikon linki (Globe/Check/Control/Customized) -
   kose yaricapi 0 (site geneli kural).
   ============================================================================ */

.v1-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* Kartlarda gri kutu zemini ve ic bosluk YOK - fotograflar duz sayfa
   zemininde duruyor, kutulanmis kart hissi yok. Ayni sebeple altindaki ok
   da cerceveli kare buton degil, cizgisiz duz ok ikonu. */
.v1-catalog__card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Mobil-only Globe karti (bkz. v1-products.blade.php
   '$v1ProductCards[] = [... "mobileOnly" => true]') - masaustunde HER ZAMAN
   gizli, sadece asagidaki '.hero-v1-page:not(.hero-v2-page)' mobil blogu
   gorunur yapiyor. Bare kural (medya sorgusu disinda) ki hicbir genislikte
   yanlislikla gorunmesin. */
.v1-catalog__card--mobile-only { display: none; }

/* Gorsel kutusu kisa tutuldu - 'object-fit: contain' orani koruyor, sadece
   kutunun kendi yuksekligi kucuk. */
/* Uc vana ayni hizada dursun: farkli en-boy oranlari yuzunden bazilari
   kutuyu (yukseklikce) tam dolduruyor, bazilari (orn. Ball) ortalanip
   ust/alt bosluk birakiyor, alt kenarlari farkli hizalarda gorunuyordu.
   'object-position: bottom' ile uc gorsel de kutunun ALT kenarina
   yaslaniyor, boylece taban hizasi ortak. */
.v1-catalog__img {
    display: block;
    width: 100%;
    /* Vanalar biraz daha asagida dursun diye kutunun USTUNE bosluk - alt
       kenar hizasi ('object-position: bottom') degismiyor, sadece butun kutu
       asagi kayiyor. */
    margin-top: 14px;
    height: clamp(108px, 14.4vw, 144px);
    object-fit: contain;
    object-position: center bottom;
    margin-bottom: 14px;
}

/* Surgulu ve Kuresel vana Kelebek'e gore biraz daha yukarida duruyordu -
   ikisi icin kutunun ustundeki bosluk ayrica artirildi. */
.v1-catalog__card:nth-child(2) .v1-catalog__img,
.v1-catalog__card:nth-child(3) .v1-catalog__img {
    margin-top: 24px;
}

/* Kelebek ve Surgulu vana fotograflari dikey/dar cerceveli oldugu icin
   ayni sabit yukseklikte Kuresel vanadan (yatay/genis cerceve) daha kucuk
   gorunuyordu - uc gorsel de 'object-fit: contain' ile ayni kutuya
   sigdirildigi icin bu, dosyalarin en-boy oranindan kaynaklaniyor, CSS ile
   duzeltiliyor. Sadece masaustunde (bkz. asagidaki min-width) buyutme
   uygulaniyor - telefonda kartlarin kendi beyaz cercevesi var, buyuyen
   gorsel o cerceveyi tasabilir. 'transform-origin: center bottom': buyume
   YUKARI dogru oluyor, alttaki baslik/aciklamaya dogru degil. */
@media (min-width: 768px) {
    .v1-catalog__card:nth-child(1) .v1-catalog__img,
    .v1-catalog__card:nth-child(2) .v1-catalog__img {
        transform: scale(1.3);
        transform-origin: center bottom;
    }
}

/* SADECE 1366px civari: urun gorselleri kucuk, bant da onunla birlikte
   kisaliyor - bandin yuksekligini sag kolon (gorsel izgarasi + ikon seridi)
   belirliyor, soldaki metin daha kisa. Oranlar ('object-fit: contain', 1.3
   buyutme) aynen duruyor. */
@media (min-width: 1300px) and (max-width: 1399.98px) {
    .v1-catalog__img {
        height: 108px;
        margin-top: 6px;
    }

    .v1-catalog__card:nth-child(2) .v1-catalog__img,
    .v1-catalog__card:nth-child(3) .v1-catalog__img {
        margin-top: 16px;
    }
}

/* Baslik+aciklama ok ile ayni satirda ('.v1-catalog__row' altinda) - ok
   metin blogunun dikey ortasinda durabilsin diye masaustunde
   ('.v1-catalog__row' altindaki min-width kurali) satir yon flex-row'a
   donuyor, telefonda (varsayilan) alt alta kaliyor. */
.v1-catalog__row {
    display: flex;
    flex-direction: column;
}

.v1-catalog__body {
    display: flex;
    flex-direction: column;
}

.v1-catalog__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--v1-ink);
    margin-bottom: 6px;
}

.v1-catalog__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--v1-body);

}

.v1-catalog__linkicon {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--v1-orange);
    font-size: 16px;
    transition: transform 0.25s var(--v1-ease);
}

@media (min-width: 768px) {
    .v1-catalog__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
}

.v1-catalog__card:hover .v1-catalog__linkicon { transform: translateX(4px); }

/* Izgara, 'flex-wrap' + sabit 220px taban DEGIL: o kalip dar
   '.v1-split__main' genisliginde (sag kolon ~%70) 4 ogeyi tek satira
   sigdiramiyor, "Customized Solutions" tek basina alt satira dusuyordu.
   Izgarada 4 kolon HER ZAMAN esit bolunuyor, uzun etiket kendi kolonunun
   icinde satir kirar, komsu ogeyi asagi itmez. */
.v1-catalog__icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 10px;
    padding-top: 10px;
 
    border-top: 1px solid var(--v1-line);
    gap: 16px 12px;
}

.v1-catalog__iconlink {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 16px;
    text-decoration: none;
    color: var(--v1-ink);
    border-left: 1px solid var(--v1-line);
}

/* 4 esit kolonda "Check Valves" ve "Control Valves" etiketleri dar kolona
   sigmayip iki satira dusuyordu. 768px+ genislikte izgara yerine icerige
   gore boyutlanan flex satir kullaniliyor - her hap kendi metin genisligi
   kadar yer kapliyor (dikey ayrac cizgisiyle BIRLIKTE), boylece hicbir
   etiket satir kirmiyor. Mobilde (bkz. asagidaki '.hero-v1-page' bloklari)
   izgara aynen kaliyor, bu kural sadece genis ekranda gecerli. */
@media (min-width: 768px) {
    .v1-catalog__icons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .v1-catalog__iconlink {
        flex: 0 0 auto;
    }

    .v1-catalog__iconlabel {
        white-space: nowrap;
    }
}

.v1-catalog__iconlink:first-child { border-left: none; padding-left: 0; }

/* Alt satir ust satira hizali: ilk ogenin SOL dolgusu yukarida
   kaldirildi, burada son ogenin SAG dolgusu (16px,
   '.v1-catalog__iconlink'in taban kuralindan) kaldiriliyor - ikon seridi
   'justify-content: space-between' ile kart izgarasiyla AYNI genislikteki
   kapsayiciya ('.v1-split__main') tam oturuyor, ama son ogenin ic icerigi
   (etiket+ok) o 16px'lik dolgu yuzunden karttaki "Ball Valves"in sag
   kenarindan 16px ICERIDE kaliyordu. */
.v1-catalog__iconlink:last-child { padding-right: 0; }

.v1-catalog__iconwrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    color: #000;
    font-size: 24px;
    overflow: visible;
}

.v1-catalog__iconimg {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Her ikon kendi boyutunu ayri ayarlayabilsin diye tek tek modifier class'lar
   (bkz. v1-products.blade.php '$iconItem['image_key']'). Varsayilan degerleri
   yukaridaki ortak '.v1-catalog__iconimg' ile ayni - buradan tek tek
   buyutup/kucultebilirsin. */
.v1-catalog__iconimg--globe {
    width: 70px;
    height: 70px;
    margin-bottom: 13px;
}

.v1-catalog__iconimg--check {
    width: 70px;
    height: 70px;
}

.v1-catalog__iconimg--control {
    width: 70px;
    height: 70px;
    margin-bottom: 3px;
}

.v1-catalog__iconimg--customized {
    width: 60px;
    height: 60px;
}

.v1-catalog__iconlabel {
    font-size: 13.5px;
    font-weight: 700;
    flex: 1 1 auto;
}

.v1-catalog__iconarrow {
    flex: 0 0 auto;
    color: var(--v1-orange);
    font-size: 15px;
    transition: transform 0.25s var(--v1-ease);
}

.v1-catalog__iconlink:hover .v1-catalog__iconarrow { transform: translateX(4px); }

/* Kalin ok. Line Awesome'in 'las' fontu zaten en kalin (solid) agirlik,
   daha kalini yok - cizgi, kendi renginde ince bir kontur ('text-stroke')
   eklenerek kalinlastiriliyor. /v1'deki TUM 'la-long-arrow-alt-right'
   oklari (butonlarin icindekiler dahil) ayni kalinlikta. Sadece /v1. */
.hero-v1-page:not(.hero-v2-page) .v1-catalog__iconarrow,
.hero-v1-page:not(.hero-v2-page) .la-long-arrow-alt-right {
    -webkit-text-stroke: 0.8px currentColor;
}

/* ---------------------------------------------------- sektor fotograf seridi
   /v1'e ozel (bkz. v1-products.blade.php). Geometri (capraz kesim + karolarin
   kenetlenmesi) /v2'nin '.v2-story__strip' seridinden geliyor ama siniflar
   AYRI: /v1'de sayac ve ok dugmesi yerine ikon + tanitim metni + turuncu
   vurgu cizgisi var, /v2'nin seridi ise ESKI haliyle kaliyor (bkz.
   home-v2.css). Ortak sinif kullanilsaydi /v2 de degisirdi. */
.v1-band {
    --v1-band-slant: clamp(20px, 2.2vw, 32px);
    /* Karolar arasindaki GORUNUR aralik - capraz kesimin icinde. */
    --v1-band-gap: clamp(4px, 0.4vw, 6px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: clamp(20px, 3vw, 32px);
    /* Son karonun ekran disinda kalan payi BURADA kesiliyor; belgeye
       birakilirsa sayfanin yatay kaydirma genisligi buyuyor. */
    overflow: hidden;
}

/* Varsayilan karo: iki kenari da capraz ('/' paralelkenar). Negatif
   'margin-right' ile komsusunun ustune biniyor, komsunun clip-path'i tam
   o ucgeni disarida biraktigi icin ikisi kenetleniyor. */
.v1-band__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 3/2 oran: 4/3'te serit fazla uzundu. */
    aspect-ratio: 3 / 2;
    padding: 18px calc(18px + var(--v1-band-slant)) 18px 18px;
    margin-right: calc(-1 * var(--v1-band-slant));
    background: #000;
    overflow: hidden;
    text-align: left;
    clip-path: polygon(calc(var(--v1-band-slant) + var(--v1-band-gap)) 0, 100% 0, calc(100% - var(--v1-band-slant)) 100%, var(--v1-band-gap) 100%);
}

/* Ilk karonun sol, son karonun sag kenari duz - ekranin kenariyla birlesiyor. */
.v1-band__tile:first-child {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--v1-band-slant)) 100%, 0 100%);
}

.v1-band__tile:last-child {
    clip-path: polygon(calc(var(--v1-band-slant) + var(--v1-band-gap)) 0, 100% 0, 100% 100%, var(--v1-band-gap) 100%);
}

/* Karo bir '<a>': site genelindeki 'a:hover { color: #0B0D26 }' kurali
   (style.css) ozgullukte sinifi geciyor ve hover'da butun metni koyu
   renge cevirirdi - dort durumda da beyazda sabitleniyor. */
.v1-band__tile,
.v1-band__tile:hover,
.v1-band__tile:focus,
.v1-band__tile:visited {
    color: #fff;
}

.v1-band__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--v1-ease);
}

.v1-band__tile:hover img { transform: scale(1.04); }

.v1-band__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.72) 100%);
}

.v1-band__body { position: relative; }

/* Referansta ikon ve baslik AYNI satirda, ikon biraz daha buyuk. */
.v1-band__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.v1-band__icon {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
}

.v1-band__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.v1-band__sub {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.82);
}

/* Referanstaki kisa turuncu vurgu cizgisi - metnin altinda. */
.v1-band__rule {
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 10px;
    background: var(--v1-orange);
    transition: width 0.25s var(--v1-ease);
}

.v1-band__tile:hover .v1-band__rule { width: 44px; }

/* Zikzak kenetleme SADECE tek satirda anlamli: izgara birden fazla satira
   boluninca her yeni satirin ilk karosu negatif kenar boslugundan sola
   kayardi. Dar ekranda paralelkenar iptal, duz dikdortgene donuyor. */
@media (max-width: 767.98px) {
    .v1-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--v1-band-gap);
    }

    /* ':first-child'/':last-child' varyantlari daha ozgul (0,2,0), ayrica
       sayilmazlarsa buradaki sifirlamayi ezerlerdi. */
    .v1-band__tile,
    .v1-band__tile:first-child,
    .v1-band__tile:last-child {
        clip-path: none;
        padding-right: 18px;
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    .v1-band { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .v1-band__tile img,
    .v1-band__rule { transition: none !important; }
}

@media (max-width: 767.98px) {
    .v1-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Dar ekranda ikonlar 2'li satirlara boluniyor - dikey ayrac cizgisi
       kirik/yaris gorunmesin diye kaldirilip yerine ust cizgi geliyor. */
    .v1-catalog__icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .v1-catalog__iconlink {
        border-left: none;
        padding: 12px 0 0;
        border-top: 1px solid var(--v1-line);
    }
    .v1-catalog__iconlink:nth-child(-n+2) { border-top: none; padding-top: 4px; }
}

@media (max-width: 575.98px) {
    .v1-catalog__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   05 - HABERLER BANDI (SADECE /v1)
   "Global Solutions / Local Impact" bandinin ('.v1-globe') hemen ALTINDA.
   Markup partials/v1-newsband.blade.php, hareket home-v1.js'in son blogu.

   NEDEN AYRI AD ALANI ('.v1-nb*'): bu dosya /v1, /v2, /v4 ve /v5'in
   HEPSINDE yukleniyor. Bu bandin farklari (sekmesiz basli, uc ESIT
   kart, ucerli sayfa ceviren sayfalama, somon zeminli sosyal serit)
   paylasilan '.v1-news*' kurallarini degistirmeyi gerektirirdi ve o
   kurallari /v2-news (/v2, /v4) ile /v1-news (/v5) kullaniyor - yani
   ortak siniflara dokunmak uc surumun haber bolumunu birden bozardi.
   Sadece '.v1-split', '.v1-h2', '.v1-lead' ve '.v1-arrowlink--sm' gibi
   OKUMA amacli ortak kaliplar aynen kullaniliyor, hicbiri burada
   degistirilmiyor.
   ============================================================================ */

/* Ust/alt pay '.v1-sec'in genel degerinden (56-96px) dusuk, SADECE bu
   bolumde - bolum bosu bosuna uzun gorunmesin. */
.v1-nb {
    padding: clamp(32px, 3.4vw, 56px) 0 clamp(16px, 1.8vw, 28px);
    /* "Our Applications" bandiyla (.v1-indband, home-v1-industries.css)
       AYNI zemin rengi. */
    background: #F6F9FC;
}

.v1-nb__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-nb__eyebrow-line { width: 28px; height: 2px; background: var(--v1-orange); }

h2.v1-nb__title { max-width: 13em; }

/* SADECE /v1'de tum eyebrow etiketleri "News & Events" etiketiyle
   ('.v1-nb__eyebrow') AYNI boyut/kalinlikta: 11.5px / 700 / 0.14em. Taban
   kurallar /v2-/v5 ile paylasildigi icin /v1 onekiyle eziliyor. Telefondaki
   800 kalinlik asagidaki mobil kuralda.
   'text-shadow: none': whyus bandindaki beyaz hale (bkz. '.v1-whyus__body
   .v1-whyus__eyebrow') harf kenarlarini yumusatip etiketi ince gosteriyordu -
   hale baslik/paragrafta kaliyor, sadece etiketten kalkti. */
.hero-v1-page:not(.hero-v2-page) .v1-certband__eyebrow,
.hero-v1-page:not(.hero-v2-page) .v1-globe__eyebrow,
.hero-v1-page:not(.hero-v2-page) .v1-indband__eyebrow,
.hero-v1-page:not(.hero-v2-page) .v1-whyus__eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-whyus__eyebrow { text-shadow: none; }

/* Olculen degerler ayni olsa da "Quality", "Sustainability" ve
   "Engineering" gozle News & Events'ten ince duruyordu - bu uc etiket
   masaustunde de 800 (telefonda zaten 800). */
.hero-v1-page:not(.hero-v2-page) .v1-certband__eyebrow,
.hero-v1-page:not(.hero-v2-page) .v1-whyus__eyebrow {
    font-weight: 800;
}

/* Referanstaki dolu turuncu buton. '.v1-news__cta' ile ayni gorunum ama AYRI
   kural: o sinif /v2-news ve /v1-news tarafindan paylasiliyor (bkz. blok
   basindaki not). */
.v1-nb__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 26px;
    background: var(--v1-orange);
    border-radius: 6px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.25s var(--v1-ease);
}

.v1-nb__cta i { color: #fff; font-size: 17px; }
.v1-nb__cta:hover { filter: brightness(0.92); color: #fff; }

/* Sayfalama CTA'nin ALTINDA degil, SAGINDA - ikisi bu satirda yan yana
   duruyor. Dar ekranda '.v1-nb__cta' ile ayni satira sigmayabilir, bu
   yuzden 'flex-wrap' ile alta dusebiliyor. */
.v1-nb__ctarow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: clamp(22px, 2.5vw, 32px);
    margin-bottom: 15px;
}

/* Referansta oklar YUVARLAK degil, hafif yuvarlatilmis KARE - paylasilan
   '.v1-news__navbtn' (daire) bu yuzden kullanilmadi. */
.v1-nb__pager {
    display: flex;
    align-items: center;
    gap: 14px;
}

.v1-nb__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #F6F9FC;
    border: 1px solid var(--v1-ink);
    border-radius: 6px;
    color: var(--v1-ink);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s var(--v1-ease), color 0.2s var(--v1-ease), border-color 0.2s var(--v1-ease);
}

.v1-nb__navbtn:hover { background: var(--v1-orange); border-color: var(--v1-orange); color: #fff; }

.v1-nb__count { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--v1-ink); }

/* --------------------------------- kart izgarasi --------------------------------- */

/* Sayfalar ust uste DEGIL, sirayla: pasif olan akistan tamamen cikiyor
   ('display: none'), boylece bolumun yuksekligi aktif sayfaya gore
   belirleniyor ve sayfa cevrildiginde zipla olmuyor. '.v1-flow__item' ve
   '.v1-news-card' ile AYNI mantik, sadece burada gizlenen TEK KART degil
   UCLU BIR GRUP. */
.v1-nb__page { display: none; }

.v1-nb__page.is-active {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
}

.v1-nb-card {
    display: flex;
    flex-direction: column;
    /* Kart zemini beyaz ('--v1-paper') degil, icinde durduklari '.v1-nb'
       bandinin zeminiyle (#F6F9FC) AYNI - kartlar banttan ayri bir "beyaz
       kutu" gibi gorunmesin diye. */
    background: #F6F9FC;
    text-decoration: none;
    color: inherit;
}

.v1-nb-card__figure {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    background: var(--v1-paper-2);
}

.v1-nb-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--v1-ease);
}

.v1-nb-card:hover .v1-nb-card__figure img { transform: scale(1.05); }

/* Rozet metni GERCEK taksonomi adi (Haberler/Fuarlar/Duyurular) -
   v2-news.blade.php'deki '.v2-news__badge' ile AYNI veri, ayri kural
   (o sinif /v2 ve /v4 tarafindan kullaniliyor, home-v2.css'te). */
.v1-nb-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 14px;
    background: var(--v1-orange);
    border-radius: 4px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
}

.v1-nb-card__date {
    display: block;
    margin-top: 16px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: rgba(28, 28, 28, 0.55);
}

.v1-nb-card__title {
    margin: 8px 0 14px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.38;
    color: var(--v1-ink);
    transition: color 0.25s var(--v1-ease);
}

.v1-nb-card:hover .v1-nb-card__title { color: var(--v1-orange); }

/* Kartlarin altlari ayni hizada bitsin: link 'margin-top: auto' ile en
   alta itiliyor ('.v1-news-card .v1-arrowlink' ile AYNI teknik, burada
   yan bosluk yok cunku kart govdesinin kendi dolgusu yok). */
.v1-nb-card__link { margin-top: auto; align-self: flex-start; }

@media (max-width: 991.98px) {
    .v1-nb__page.is-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .v1-nb__page.is-active { grid-template-columns: minmax(0, 1fr); }
}

/* "06 - HIKAYE BANDI" ('.v1-story*') bolumu kaldirildi (markup
   v1-sections.blade.php'de de yok). Eski CSS git gecmisinde duruyor. */


/* ============================================================================
   /v1 - MOBIL GORUNUM

   Bu dosyanin dar ekran sorgulari mobilde her bolumu tek kolona dusuruyor,
   sayfa ust uste dizilmis tam genislikte fotograf yiginina donuyordu. Mobil
   tasarimda urun kartlari, ikon haplari ve sektor karolari ekrana SIGAN
   satirlar halinde; yatay kaydirmali serit yalnizca asagida belirtilen
   yerlerde var.

   Temel kararlar:
     1. Kartlar/haplar/karolar telefonda da satir halinde (kayan serit YOK).
     2. Hero KOYU: fotograf ekranin tepesinden basliyor, ust serit tamamen
        seffaf (logo ve hamburger beyaz), etiket/baslik/aciklama beyaz,
        basligin ikinci satiri turuncu kaliyor.
     3. Slider noktasi YOK - /v1'in hero'su tek sabit fotograf
        (HomeController::HERO_V1_BG). Calismayan bir gosterge cizmek yerine
        slider ayri bir is olarak birakildi.

   Haber kartlari ('.v1-nb-card') yatay seritte kaliyor (asagida '06').

   KAPSAM: butun kurallar '.hero-v1-page:not(.hero-v2-page)' ile SADECE
   /v1'e kilitli. Bu dosya /v1, /v2, /v4 ve /v5'in hepsinde yukleniyor ve
   '.v1-catalog', '.v1-band', '.v1-certband' gibi siniflar paylasiliyor -
   kapsam verilmezse ayni degisiklik dort surumu birden degistirirdi.
   Masaustu gorunumune (>=992px) hicbir kural dokunmuyor.

   Bu blok dosyanin SONUNDA duruyor: ayni ozgullukteki eski dar ekran
   kurallarini (orn. '.v1-catalog__grid' icin 575px'teki tek kolon) kaynak
   sirasiyla eziyor, yani onlari silmeye gerek kalmiyor.
   ============================================================================ */


/* ---- 00a HERO METNININ YAN BOSLUGU (butun genislikler, sadece /v1) -------
   HATA: hero'nun metin kutusu ('.v1-hero__inner') sayfanin SOL KENARINA
   yapisik duruyordu - etiket, baslik ve buton hepsi 0px icten.

   SEBEP: kutu yan boslugunu 'width: calc(100% - 48px)' + 'margin: 0 auto'
   ile aliyor, ama kapsayicisi ('.v1-hero__card') bir FLEX kutusu ve kutunun
   kendisi 'flex: 1 1 auto' - yani 'flex-grow: 1'. Buyume carpani 1 olan bir
   flex ogesi satirdaki butun bos yeri yutuyor: verilen genislik yalnizca
   BASLANGIC degeri olarak kullaniliyor, oge sonunda kapsayicinin tamamina
   yayiliyor ve 'margin: 0 auto'ya dagitacak bos yer kalmiyor.

   Masaustunde fark edilmemesinin sebebi 'max-width: 1296px': 1296+96px'ten
   GENIS ekranlarda ust sinir devreye girip buyumeyi durduruyor ve kutu
   ortalanmis gorunuyor. Bu esigin ALTINDAKI her genislikte kenar boslugu
   sifir kaliyordu.

   COZUM: buyume carpanini sifirlamak. Kural bilerek MEDYA SORGUSU DISINDA,
   cunku hata masaustunun bir bolumunde de var. */
.hero-v1-page:not(.hero-v2-page) .v1-hero__inner { flex-grow: 0; }


/* ---- 00b HEADER: mobil menunun karartma katmani -------------------------
   HATA: telefonda ust serit cam gibi degil DUZ GRI bir bant olarak
   cikiyordu (olculdu: rgb(136,137,139) - bant boyunca tek tip, hicbir gecis
   yok, yani bir fotograf bulanikligi degil duz bir boya).

   SEBEP: mobil menunun arkasini karartan katman ('<div class="overlay">',
   bkz. layout/header.blade.php - DOM'da '.header-area'nin ICINDE duruyor)
   KAPALI haldeyken gizlenmiyor. Kapali hali (style.css '.overlay')
   'position: absolute; width/height: 100%; opacity: 0.7; z-index: -1' ve
   '@media (max-width: 767px)' icinde rengi '#58595B' oluyor - olculen gri
   tam olarak rgba(88,89,91,0.70), yani bu katmanin kendisi.

   Sitenin geri kalaninda gorunmemesinin sebebi 'z-index: -1': orada
   '.header-area' bir YIGIN BAGLAMI kurmadigi icin negatif katman en yakin
   baglama (koke) cikiyor ve sayfanin butun iceriginin ARKASINA dusuyor.
   /v1'de ise header'a 'position: absolute' + 'z-index: 99' veriliyor
   (yukaridaki HEADER bolumu) - bu bir yigin baglami kuruyor, katman artik
   disari cikamiyor ve header'in zemini ile icerigi ARASINA oturuyor.

   COZUM: kapali haldeki katmani /v1'in header'i icinde tamamen kaldirmak.
   ACIK hali ('.overlay.active' - style.css'te 'position: fixed' tam ekran)
   secicinin disinda kaldigi icin mobil menu acilinca arka plan yine
   kararir. */
.hero-v1-page:not(.hero-v2-page) .header-area .overlay:not(.active) { display: none; }


/* ---- 00c HEADER: mobilde OPAK ANTRASIT ZEMIN ----------------------------
   Ortak mobil header (responsive.css) ile ayni antrasit zemin; fotograf
   gorunmez ve blur uygulanmaz. Mobil logo ve ikonlar responsive.css'te. */
@media (max-width: 991.98px) {
    .hero-v1-page:not(.hero-v2-page) .header-area::before {
        background: var(--dikkan-antrasit-color, #58595B);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}


/* ---- 00d HERO: KOYU KURGU (<=991px) --------------------------------------
   Hero fotografin uzerine beyaz yazi: metin bir beyaz gradyanin degil,
   fotografin KOYULASTIRILMIS ustunun uzerinde duruyor. Masaustu (beyaz
   gradyan + koyu yazi) DEGISMIYOR - bu dar ekrana ozel bir kurgu.

   YUKSEKLIK '140vw': 390px'lik bir telefonda ~546px, ekranin ~%65'i.
   Altindaki "A Complete Range of Valve Solutions" bolumunun ust kenari ilk
   ekranda ince bir serit halinde gorunuyor - sayfanin devam ettigi
   anlasiliyor. Tum ilk ekrani kaplayan bir hero bu ipucunu yok ederdi.

   Ust sinir 660px: '140vw' 430px genisligindeki bir telefonda zaten 602px
   ediyor, daha dusuk bir tavan orada devreye girip artisi yutardi. Alt
   sinir 430px pratikte olu: en dar telefonda bile (320px) '140vw' 448px
   ediyor, yani clamp'in orta degeri her zaman tabanin uzerinde.

   'ZOOM' NASIL CALISIYOR (onemli): fotograf 2170x725, yani ~3:1. Dar bir
   kutuda 'object-fit: cover' olcegi YUKSEKLIKTEN aliyor, dolayisiyla hero ne
   kadar YUKSEK olursa yatayda o kadar cok kirpiliyor ve vana o kadar
   buyuyor. Yani "biraz uzaklastir" demek "hero'yu biraz kisalt" demek -
   baska bir kaldirac yok (fotografin dikeyinde tasma olmadigi icin
   'object-position'in DIKEY degeri hicbir sey yapmiyor).

   Yatay kadraj %82: vana tam kadrajda kaliyor, solda gun batimi ve vincler,
   sagda tankerin govdesi giriyor. */
@media (max-width: 991.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-hero__card {
        min-height: clamp(430px, 140vw, 660px);
        color: #fff;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__media img {
        object-position: 82% 50%;
    }

    /* Gradyan BEYAZ degil KOYU ve sadece metnin oturdugu ust bandi
       karartiyor: %62'den sonra tamamen bitiyor, yani vananin govdesi,
       iskele ve su HIC koyulasmiyor - fotograf parlak kaliyor. En ust (%0)
       biraz daha koyu: logo ve hamburger orada duruyor ve gokyuzunun en acik
       yeri tam o bant. */
    .hero-v1-page:not(.hero-v2-page) .v1-hero__scrim {
        background: linear-gradient(180deg,
            rgba(8, 14, 24, 0.72) 0%,
            rgba(8, 14, 24, 0.62) 18%,
            rgba(8, 14, 24, 0.46) 40%,
            rgba(8, 14, 24, 0.20) 54%,
            rgba(8, 14, 24, 0) 62%);
    }

    /* Metin dikeyde ORTALI DEGIL ust hizali: gradyanin guclu oldugu bantta
       duruyor. Ust dolgu seffaf header'in (76px) altindan basliyor. */
    .hero-v1-page:not(.hero-v2-page) .v1-hero__inner {
        align-items: flex-start;
        padding-top: 88px;
        padding-bottom: clamp(20px, 5vw, 32px);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__content { max-width: none; }

    /* Metin renkleri: degiskenler ('--v1-ink'/'--v1-body') koyu tonlar,
       burada dogrudan beyaza sabitleniyor. Basligin IKINCI satiri
       ('.v1-hero__title-b') turuncu kaliyor - o kural ellenmedi. */
    .hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow {
        /* Dar ekranda etiketin USTUNE 30px pay. Masaustunde pay YOK - taban kural
           'margin: 0 0 18px' oldugu gibi kaliyor (bkz. yukarida). */
        margin-top: 60px;
        margin-bottom: 15px;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.82);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__title {
        margin-bottom: 12px;
        font-size: clamp(28px, 7.6vw, 38px);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__title-a { color: #fff; }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__desc {
        max-width: 16em;
        font-size: 13.5px;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.88);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__cta { margin-top: 32px; }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__cta .theme-btn {
        padding: 13px 24px;
        font-size: 13px;
    }
}


/* ---- 01 URUN KARTLARI: 2x2 IZGARA ----------------------------------------
   DORT kart (Kelebek/Surgulu/Kuresel/Buhar-Globe) 2x2 izgarada; Globe
   normalde asagidaki '$v1ProductIcons' hapinda YASIYOR, burada SADECE mobil
   icin ayrica eklenen bir kopyasi var (bkz. v1-products.blade.php
   '$v1ProductCards[] = [... "mobileOnly" => true]' ve yukaridaki bare kural
   '.v1-catalog__card--mobile-only'). Masaustu bu yuzden HIC etkilenmiyor:
   orada hala 3 kart + asagida 4 ikon hapi (Globe dahil) var.

   KART YUZEYI SADECE TELEFONDA var: masaustunde kartlar bilerek zeminsiz
   (fotograflar duz sayfa zemininde duruyor). Kose yaricapi 10px: /v1'in
   ZATEN kullandigi kart olcegi (bkz. yukaridaki 'KOSE YARICAPI' bolumu),
   yeni bir olcek eklenmedi. */
@media (max-width: 767.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card--mobile-only {
        display: flex;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card {
        padding: 14px 12px 12px;
        background: #fff;
        border: 1px solid var(--v1-line);
        border-radius: 10px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__img {
        margin-top: 24px;
        height: 110px;
        margin-bottom: 10px;
    }

    /* SADECE Kelebek (1.) ve Surgulu (2.) vana gorselleri biraz daha buyuk,
       Kuresel/Globe ayni. Surgulu ayrica 3px daha asagida (27px). */
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card:nth-child(1) .v1-catalog__img,
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card:nth-child(2) .v1-catalog__img {
        height: 122px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card:nth-child(2) .v1-catalog__img {
        margin-top: 27px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__title {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__desc {
        font-size: 11px;
        line-height: 1.45;
    }

    /* Ok aciklamanin ALTINDA ayri bir satir DEGIL, aciklamayla AYNI hizada
       sagda - masaustunun kullandigi 'row' duzenine (bkz. yukarida '@media
       min-width:768px') benziyor ama 'align-items: flex-end' ile ok govdenin
       (baslik+aciklama) EN ALTINDAKI satira (aciklamaya) hizalaniyor, dikey
       ortasina degil. */
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__body {
        margin-top: 12px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__linkicon {
        margin-top: 0;
        font-size: 14px;
    }
}


/* ---- 02 CHECK/CONTROL: YARIM SATIR ----------------------------------------
   Globe yukaridaki 2x2 izgarada, "Customized Solutions" ise mobilde yok - bu
   seritte SADECE Check/Control kaliyor, yan yana yarim genislikte, ikisi de
   AYNI beyaz-kart gorunumunde.

   Globe (':first-child') ve Customized (':last-child') hala DOM'da (bkz.
   v1-products.blade.php - masaustu bu sirayi kullaniyor), burada sadece
   GORUNMEZ yapiliyor - yerini almiyorlar, kalan iki oge ('span 3' + 'span 3')
   6 kolonu aralarinda esit bolusuyor. Hap aciklamasi yok - markup sade
   ikon+baslik+ok. */
@media (max-width: 767.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__icons {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        margin-top: 16px;
        padding-top: 0;
        border-top: none;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlink:first-child,
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlink:last-child {
        display: none;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlink {
        grid-column: span 3;
        justify-content: center;
        gap: 6px;
        padding: 6px 8px;
        background: #fff;
        border: 1px solid var(--v1-line);
        border-radius: 6px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconwrap {
        width: auto;
        height: auto;
        background: none;
        font-size: 15px;
    }

    /* Kisa hap: dolgu 6px, ikon gorseli (masaustunde 70px, bkz.
       '.v1-catalog__iconimg--check/--control' yukarida) SADECE burada 36px. */
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconimg {
        width: 36px;
        height: 36px;
        margin-bottom: 0;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlabel {
        flex: 0 1 auto;
        font-size: 10.5px;
        line-height: 1.25;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconarrow { font-size: 12px; }
}


/* ---- 03 SEKTOR KAROLARI: 3'LU SATIR --------------------------------------
   Eski kurallar bu seridi 767px'te 2, 575px'te TEK kolona dusuruyordu ve
   her karo 'aspect-ratio: 4/3' - bes sektor, tek kolonda ~1300px demekti.
   Karolar telefonda da yan yana ve kare gibi.

   Uc degisiklik:
     - Serit EKRANDAN EKRANA DEGIL: masaustunde '100vw' ile kenardan kenara
       tasiyor, burada urun kartlariyla AYNI hizada (sayfa yan boslugu)
       duruyor.
     - Ikon ve baslik ALT ALTA ('.v1-band__head' satirdan kolona donuyor) -
       110px genislikte "Waterworks" ikonun yanina sigmiyor.
     - Koseler yuvarlak. Site geneli keskin kose kurali /v1'de zaten kartlar
       icin gevsetilmis (10px).

   BES sektor var, ekranda UCU duruyor - kalan ikisi IKINCI SATIRA degil
   YATAY KAYDIRMAYA alindi: ikinci satirda iki karo + bosluk kalmasi kirik
   duruyordu. Karo BOYU ayni, "uc karo yan yana" gorunumu korunuyor; kalan
   ikisine parmakla kaydirarak ulasiliyor (scroll-snap, JS yok).

   Serit sagda ekranin KENDI kenarina kadar uzuyor ve dorduncu karonun bir
   parcasi gorunuyor - kaydirilabilecegini gosteren sey bu, ayri bir ok
   dugmesi veya nokta gostergesi eklenmedi. Kaydirma cubugu gizli. */
@media (max-width: 767.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-band {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        gap: 8px;
        width: auto;
        margin-left: 16px;
        margin-right: 0;
        margin-top: 22px;
        padding-right: 16px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-band::-webkit-scrollbar { display: none; }

    .hero-v1-page:not(.hero-v2-page) .v1-band__tile,
    .hero-v1-page:not(.hero-v2-page) .v1-band__tile:first-child,
    .hero-v1-page:not(.hero-v2-page) .v1-band__tile:last-child {
        clip-path: none;
        margin-right: 0;
        /* %31: ucu ekrana tam siginca dorduncunun ~25px'i goruniyor. */
        flex: 0 0 31%;
        min-width: 0;
        scroll-snap-align: start;
        aspect-ratio: 1.05 / 1;
        padding: 12px 10px;
        border-radius: 10px;
        justify-content: flex-end;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-band__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-band__icon { font-size: 17px; }

    .hero-v1-page:not(.hero-v2-page) .v1-band__title {
        font-size: 11.5px;
        line-height: 1.2;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-band__sub {
        margin-top: 4px;
        font-size: 9.5px;
        line-height: 1.35;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-band__rule {
        width: 18px;
        height: 2px;
        margin-top: 7px;
    }

    /* Metnin okunmasi icin karartma alt yariya cekiliyor - karo artik cok
       kucuk, masaustundeki yumusak gecis burada yetmiyor. */
    .hero-v1-page:not(.hero-v2-page) .v1-band__scrim {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 20%, rgba(0, 0, 0, 0.80) 100%);
    }
}


/* ---- 04 SERTIFIKA BANDI: TELEFONDA KUCULME -------------------------------
   Bant telefonda 4 kolonun tek tek alt alta dustugu bir akis (temel
   kuraldaki '.v1-certband__row { flex-direction: column }'), burada sadece
   punto/bosluk kuculuyor. */
@media (max-width: 767.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-certband { padding: 28px 0; }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__row { gap: 20px; }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__half--sustain {
        padding-top: 20px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__logogrid {
        gap: 10px;
    }

    /* SADECE mobil: sertifika logolari sabit 34px (mobilde 'vw' neredeyse hep
       min degere kilitlendigi icin masaustu/tablet clamp'i degismedi). Logolar
       buyuk oldugu icin bandin boyu uzamasin diye "+13 more certifications" (p)
       ve "View All Certifications" (a) ALT ALTA degil YAN YANA - ikisinin ortak
       atasi olmayan '.v1-certband__more' (logogrid'in kardesi,
       '.v1-certband__logos' icinde) ile '.v1-certband__btn'i
       ('.v1-certband__col--logos' icinde, '.v1-certband__logos'in kardesi) ayni
       satira almak icin '.v1-certband__logos' 'display:contents' yapilip ogeleri
       '.v1-certband__col--logos'un dogrudan flex ogesi haline getirildi;
       logogrid tam genislik alip kendi satirinda kalsin diye 'flex-basis:100%',
       more+btn ise ayni (2.) satirda yan yana. */
    .hero-v1-page:not(.hero-v2-page) .v1-certband__logo {
        height: 34px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__col--logos {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 12px;
        row-gap: 8px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__logos {
        display: contents;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__logogrid {
        flex-basis: 100%;
        justify-content: center;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__more {
        margin: 0;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__btn {
        margin-top: 0;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__eyebrow {
        margin-bottom: 6px;
    }

    .hero-v1-page:not(.hero-v2-page) h2.v1-certband__title {
        margin-bottom: 6px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__desc {
        line-height: 1.5;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__btn {
        font-size: 12.5px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-certband__iconglyph { font-size: 32px; }
    .hero-v1-page:not(.hero-v2-page) .v1-certband__iconlabel { font-size: 11px; }
}


/* ---- 05 AR-GE OZELLIKLERI + SAYI BANDI: 2x2 ------------------------------
   Dort ozellik (Kaliteli Uretim / Teknik Destek / Hizli Tedarik / Cevre)
   ve dort sayi ('71+ Ulke', '45+ Yil', '924+ Urun Tipi', '1000+ Proje')
   telefonda alt alta dort satira boluniyordu. 2x2 duzende ikisi de tek
   bakista goruluyor ve yarim yer kapliyor. Dikey ayraclar kaldirildi:
   2x2'de cizgi yalnizca sol kolonda kalip yarim gorunuyor. */
@media (max-width: 767.98px) {
    /* 2x2 izgara ustundeki baslik/paragraf ile AYNI sol/sag hizada durunca
       kenarlara cok yakin, sikisik gorunuyordu - yatay ic bosluk eklenerek
       metinden biraz iceri cekildi (dikey bosluk/gap'e dokunulmadi). */
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
        padding: 0 12px;
    }

    /* "Global Reach" bandi telefonda sayfanin genel beyaz zemininden ayrissin
       diye SADECE mobilde '.v1-nb' (Haberler bandi) ile ayni acik zemin rengi;
       masaustu/tablet degismedi. */
    .hero-v1-page:not(.hero-v2-page) .v1-globe {
        background: #F6F9FC;
    }

    /* Telefonda TUM eyebrow etiketleri ("ENGINEERING", "GLOBAL REACH",
       "QUALITY", "SUSTAINABILITY", "OUR APPLICATIONS"...) daha kalin -
       masaustunde/tablette kalan 700 (hero'da 600) yerine mobilde 800. */
    .hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-certband__eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-globe__eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-indband__eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-news__eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-news__social-eyebrow,
    .hero-v1-page:not(.hero-v2-page) .v1-nb__eyebrow {
        font-weight: 800;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-feature {
        padding: 0;
        border-left: none;
    }

    /* Telefonda bant basliklari tek olcekte: '.v1-certband__title'/
       '.v1-indband__title'/'.v1-nb__title' zaten paylasilan 'h2.v1-h2'
       olcegini (clamp(26px, 2.5vw, 38px), telefonda sabit 26px) kullaniyor -
       '.v1-globe__title' (21-28px) ve whyus basligi (22-30px) da mobilde AYNI
       olcege cekildi, masaustu/tablet kendi olceklerinde kaliyor. */
    .hero-v1-page:not(.hero-v2-page) h2.v1-globe__title,
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-h2-wrap :is(h1, h2, h3) {
        font-size: clamp(26px, 2.5vw, 38px);
    }

    /* Dar sutunda ortadaki bolum cizgisi metne cok yakin dusup sikisik
       gorunuyordu - 2x2 zaten satirlar arasinda 'gap' ile ayrisiyor,
       cizgiye gerek yok (yukaridaki eski yorumdaki "dikey ayraclar
       kaldirildi" karariyla ayni yaklasim). */
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__features::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    /* Metin kolonunun yan dolgusu '.v1-wrap' ile ayni hizaya (16px) geliyor -
       24px'te bolum kenari komsu bolumlerden kayik duruyordu. */
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-globe__stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
        /* 2x2'de her ogenin ikonu/sayisi/etiketi hucrenin ortasinda - sol
           hizali olunca dar sutunlarda dengesiz duruyordu. */
        text-align: center;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-globe__stat,
    .hero-v1-page:not(.hero-v2-page) .v1-globe__stat:first-child,
    .hero-v1-page:not(.hero-v2-page) .v1-globe__stat:last-child {
        padding: 0;
        border-right: none;
        border-bottom: none;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-globe__staticon { font-size: 26px; margin-bottom: 6px; }
}


/* ---- 06 HABER KARTLARI: YATAY SERIT --------------------------------------
   Uc haber karti tam genislikte ust uste (~900px) degil, yan yana kayan bir
   serit. Urun kartlarindaki gibi 3'e bolmek burada ise yaramaz - kartin
   icinde tarih, uc satirlik baslik ve fotograf var.

   Sayfa cevirme mantigi ('.v1-nb__page' gruplari, home-v1.js) DEGISMIYOR -
   sadece aktif sayfa kayan bir serit oluyor, sayfalama dugmeleri yerinde
   kaliyor. Kaydirma cubugu gizli: kaydirilabilirligin isareti bir sonraki
   kartin gorunen parcasi, gri bir cubuk degil. */
@media (max-width: 767.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-nb__page.is-active {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        gap: 14px;
        margin-right: -16px;
        padding-right: 16px;
        padding-bottom: 4px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-nb__page.is-active::-webkit-scrollbar { display: none; }

    .hero-v1-page:not(.hero-v2-page) .v1-nb-card {
        flex: 0 0 74%;
        min-width: 0;
        scroll-snap-align: start;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-nb-card__date { margin-top: 12px; }
    .hero-v1-page:not(.hero-v2-page) .v1-nb-card__title { margin: 6px 0 12px; font-size: 14.5px; }
}


/* "07 HIKAYE BANDI" mobil kurallari kaldirildi - bolumun kendisi
   (.v1-story*) silindi (bkz. yukaridaki 06 notu). */


/* ---- 07b AR-GE GORSELININ BEYAZ GECISI: DAHA KISA ------------------------
   Dar ekranda gorselin gradyani dikeye donuyor (yukaridaki 991px sorgusu) ve
   beyazlik %55'ten basliyordu - fotografin ALT YARISININ neredeyse tamami
   beyaza giriyordu. Gecis burada daha gec basliyor: ayni ise yariyor
   (fotografin alt kenari beyaz zemine dikissiz baglaniyor) ama bant
   yaklasik yarisi kadar kisa, yani fotografin kendisi daha fazla
   goruinuyor.

   Kural /v1'e kilitli: ustteki 991px kurali PREFIKSSIZ, yani /v2, /v4 ve
   /v5 eski uzun gecisle kaliyor. */
@media (max-width: 991.98px) {
    /* Tam beyaz %97'de basliyor: gecis ancak EN SON pikselde tam beyaza
       ulasinca yuvarlak alt kenar (10px) fotografin soluk ucuyla bir cizgi gibi
       seciliyordu. Katman 1px asagi tasiyor ve kutunun zemini beyaz - alt
       satirdaki alt-piksel bosluktan gri zemin ('--v1-paper-2') gorunmuyor. */
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__visual {
        background: #F6F9FC;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-whyus__visual::after {
        bottom: -1px;
        background: linear-gradient(180deg,
            rgba(246, 249, 252, 0) 83%,
            rgba(246, 249, 252, 0.479) 92%,
            #F6F9FC 97%);
    }
}


/* ---- 08 genel bolum paylari ----------------------------------------------
   '.v1-sec' payi (56px ust + 56px alt) telefonda bolum basina 112px
   demek; alti bolumde ~670px sadece bosluk. 40px'e iniyor. */
@media (max-width: 575.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-sec { padding: 40px 0; }
    .hero-v1-page:not(.hero-v2-page) .v1-sec--first { padding-top: 32px; }
}


/* ----------------------------------------------------------------------------
   /v1 - BUTON DILI: dolu turuncu buton yerine SEFFAF zemin, koyu ince
   cerceve, koyu yazi ve turuncu ok. Ar-Ge butonu ('.v1-outlinebtn') ve
   "All News" ('.v1-nb__cta') ayni gorunumde. Hero'daki buton ('.theme-btn')
   dolu turuncu kaliyor. Kurallar '.hero-v1-page:not(.hero-v2-page)' ile
   kilitli - /v2 ve sitenin geri kalani DEGISMEDI. Header'daki "Giris Yap"
   ayri bir bilesen, buraya dahil edilmedi. */
.hero-v1-page:not(.hero-v2-page) .v1-outlinebtn,
.hero-v1-page:not(.hero-v2-page) .v1-nb__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 26px;
    background: transparent;
    border: 1px solid var(--v1-ink);
    border-radius: 8px;
    color: var(--v1-ink) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    filter: none;
    transition: border-color 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.hero-v1-page:not(.hero-v2-page) .v1-outlinebtn i,
.hero-v1-page:not(.hero-v2-page) .v1-nb__cta i {
    color: var(--v1-orange);
    font-size: 17px;
    transition: transform 0.25s var(--v1-ease);
}

.hero-v1-page:not(.hero-v2-page) .v1-outlinebtn:hover,
.hero-v1-page:not(.hero-v2-page) .v1-nb__cta:hover {
    background: transparent;
    border-color: var(--v1-orange);
    color: var(--v1-ink) !important;
    filter: none;
}

.hero-v1-page:not(.hero-v2-page) .v1-outlinebtn:hover i,
.hero-v1-page:not(.hero-v2-page) .v1-nb__cta:hover i { transform: translateX(4px); }

/* Header'in iki satiri arasinda hafif yatay ayrac cizgisi (yalniz /v1,
   yalniz seffaf/ust hal). Dikey cizgi YOK. Cizgi '.nav-cats'in kendi ust
   kenarinda - tam genislikte. Sticky halde ust satir gizli oldugu icin
   cizgi de kalkiyor. */
body.hero-v1-page:not(.hero-v2-page) #header-sticky:not(.header-sticky) .nav-cats {
    border-top: 1px solid rgba(24, 29, 78, 0.18);
}

/* Company acilirken alt menu yazilarinin uzerinde beyaz bir cizgi
   gorunuyordu: UST menu maddesinin (Company) hover alt cizgisi
   ('.main-menu ul li a.navlink:before', bottom: 30px, absolute-header'da
   beyaz) - link 32px dolguyla yuksek oldugu icin cizgi panelin icine
   dusuyordu. Acilir menusu olan ust maddelerde bu cizgi kalkti; acik panel
   zaten hover geri bildirimi. Alt menusuz maddelerde (Media, Contact) cizgi
   ayni. */
.hero-v1-page:not(.hero-v2-page) .main-menu ul > li:has(> ul) > a.navlink:before {
    display: none;
}

/* site/assets/css/home-v2.css */
/* ============================================================================
   /v1 + /v2 anasayfa - degistirilen bolumlerin ozel hali (GECICI - bkz.
   routes/web.php 'home-variant').

   Dosya /v1'de de yukleniyor (bkz. master.blade.php), cunku '.v2-story'
   (01 sektor) tasarimi iki surumde ortak. '.v2-flow' (02 vana tipi),
   '.v2-news' (05 haberler) ve 'body.hero-v2-page' ile kilitli buton
   kurallari SADECE /v2'ye ozel: /v1 bu siniflari/body class'ini HIC
   uretmiyor, o yuzden bu dosyanin o kisimlari /v1'de sessizce hicbir
   seye baglanmiyor - /v1'e istenmeyen bir sizinti YOK.

   Bu dosya home-v1.css'in USTUNE biniyor ve yalnizca /v1'den FARKLI
   sunulan bolumleri tanimliyor - /v2 icin 1400 satirlik ayri bir kopya
   yok, /v1'de yapilan her duzeltme /v2'ye kendiliginden yansisin diye
   dosyalar paylasiliyor.

   ASAGIDAKI ILK BOLUM (.v2-story) sektor bolumu icin, IKINCI BOLUM
   (.v2-flow, asagida ayrica basligi var) vana tipi carousel'i icin:
   eyebrow'suz, cerceveli CTA butonu, prev/next+sayac+ilerleme cubuklu
   sayfalama, yuvarlak kose.

   Sektor bolumu SIRADAN bir akis - sayfa scroll'u hicbir sekilde ele
   gecirilmiyor (scroll pinleme yok). "Aktif sektor" durumu SADECE elle
   degisiyor: sol koldaki oklar, buyuk kartin kendi oklari, sagdaki liste
   satirlari ve alttaki fotograf seridi - dordu de ayni durumu
   degistiriyor (bkz. home-v2.js). Otomatik donen bir carousel YOK
   (/v1'deki '01 sektor' bolumunde de aynen boyle).

   DUZEN: sol kolon (baslik/aciklama/pager) + sag tarafta buyuk "one cikan"
   kart + yaninda tam sektor listesi, altta kenardan kenara fotograf
   seridi, en altta aktif sektorun vana tipi etiketleri.

   KOSE YARICAPI ISTISNASI: buyuk kart, liste satirlari ve serit kartlari
   BILEREK yuvarlak - site geneli kuralinin
   (bkz. home-v1.css, kart koseleri her yerde keskin) SADECE bu bolume
   ozel istisnasi. Vana tipi etiketleri (icerik etiketi, kart degil) yine
   keskin.

   Dis kutuphane yok; renkler home-v1.css'in degiskenlerinden geliyor.
   ============================================================================ */

/* ============================================================================
   HEADER + HERO butonlari - SADECE /v2.
   "Urun Bul" (header + hero) ve "My Dikkan" (giris/hesap) butonlari
   /v1'de KESKIN kaliyor - bu siniflar home-v1.css'te tanimli ve /v1 ile
   /v2 arasinda PAYLASILIYOR, o yuzden dogrudan orada degistirmek /v1'i de
   degistirirdi. Kural bunun yerine 'body.hero-v2-page' ile kilitleniyor -
   bu sinif SADECE $heroVersion===2 oldugunda ekleniyor (bkz.
   master.blade.php <body> etiketi), /v1 'hero-v1-page' sinifini tasir
   ama 'hero-v2-page'i tasimaz.
   ============================================================================ */

/* Header'daki dolu turuncu "Urun Bul" butonu (bkz. header.blade.php
   '.finder-nav-btn'). */
body.hero-v2-page .header-right a.finder-nav-btn { border-radius: 6px; }

/* Hero'daki AYNI "Urun Bul" butonu (bkz. index.blade.php
   '.v1-hero__cta .theme-btn' - hem /v1 hem /v2 bu hero'yu kullaniyor). */
body.hero-v2-page .v1-hero__cta .theme-btn { border-radius: 6px; }

/* "My Dikkan" (giris/hesap) butonu - '.my-dikkan .theme-btn' hem
   giris yapilmis (route('site.member')) hem giris yapilmamis ('.mdmenu')
   halini KAPSIYOR, ayrica desktop VE mobil header'daki iki kopyayi da
   (ayni siniflar, bkz. header.blade.php) TEK kuralla kapsiyor. */
body.hero-v2-page .my-dikkan .theme-btn { border-radius: 6px; }

.v2-story {
    /* Buyuk kart + liste + serit koselerinde kullanilan TEK yaricap -
       bu bolume ozel istisna, site genelinde 0. */
    --v2-story-radius: 18px;

    /* Sertifikalar bolumunun (koyu zemin) ALT kenari duz kesilmiyor, hemen ardindan gelen bu
       bolum (beyaz zemin) UST kosesi BUYUK yariCAPLA yukari dogru
       "kayiyor" ve koyu zeminin uzerine biniyor. Negatif ust kenar
       boslugu ile ustune biniyor, kendi opak beyaz zemini altindaki
       koyu bolumu kapatiyor - '.v1-certs' bunu KESMIYOR ('overflow:hidden'
       sadece KENDI icerigi icin, sonraki kardes elemani etkilemiyor).
       HER IKI ust kose de (sol VE sag) AYNI yaricapi aliyor. */
    position: relative;
    z-index: 1;
    margin-top: clamp(-90px, -8vw, -48px);
    background: var(--v1-paper);
    border-radius: clamp(48px, 8vw, 140px) clamp(48px, 8vw, 140px) 0 0;
}

.v2-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.v2-story__text {
    position: sticky;
    top: calc(78px + 24px);
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Sol kolon: pager - SADECE TEK bir sade "next" ok dugmesi (ilerleme
   cubugu / sayac / prev yok)
   -------------------------------------------------------------------------- */

.v2-story__pager {
    margin-top: clamp(28px, 4vh, 48px);
}

/* Kucuk kontrol - yuvarlak, buyuk kart/liste/serit koselerinden BAGIMSIZ
   bir karar (bu zaten site genelinde kucuk kontrollerin kurali). */
.v2-story__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--v1-line);
    border-radius: 50%;
    color: var(--v1-ink);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.25s var(--v1-ease), color 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease);
}

.v2-story__nav:hover {
    background: var(--v1-orange);
    border-color: var(--v1-orange);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Sag taraf: buyuk "one cikan" kart + tam sektor listesi
   -------------------------------------------------------------------------- */

.v2-story__showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    /* Bosluk bilerek genis: daha kucuk bir boslukta (16-28px) kartin
       kendi oklari (sag alt kosede) listenin kenarina neredeyse degiyor
       ve ikisi ust uste binmis gibi gorunuyor. */
    gap: clamp(24px, 3vw, 40px);
    align-items: stretch;
}

.v2-story__feature {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 11;
    background: var(--v1-paper-2);
    border-radius: var(--v2-story-radius);
}

/* Kartlar UST USTE biniyor, sadece aktif olan gorunur/tiklanabilir
   (panel crossfade). */
.v2-story__featurecard {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity 0.5s var(--v1-ease), transform 0.6s var(--v1-ease), visibility 0.5s;
}

.v2-story__featurecard.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.v2-story__featurecard img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-story__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%);
}

.v2-story__badge {
    position: relative;
    height: 35px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin: 20px 0 0 20px;
    padding: 9px 16px 9px 9px;
    background: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v1-ink);
}

.v2-story__badgeicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--v1-orange);
    color: #fff;
    font-size: 13px;
}

.v2-story__featurebody {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 28px 28px;
    color: #fff;
}

.v2-story__title {
    font-size: clamp(21px, 2.1vw, 30px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.v2-story__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    max-width: 46em;
}

.v2-story__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    transition: gap 0.25s var(--v1-ease);
}

.v2-story__featurecard:hover .v2-story__cta { gap: 15px; }

/* Sektor listesi. Kapsayici '.v2-story__showcase'te 'align-items: stretch'
   oldugu icin bu liste buyuk kartla AYNI yukseklige geriliyor - satirlar
   '.v2-story__list li{flex:1}' ile bu yuksekligi ESIT PAYLASIYOR, boylece
   bosluk EN ALTTA YIGILMIYOR (5. satir kartin tam dibine oturuyor)
   ve buyuk kartin kendi oklariyla ayni hizada olsa da
   aralarindaki bosluk (yukarisi '.v2-story__showcase' gap) net kaliyor. */
.v2-story__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--v1-line);
    border-radius: var(--v2-story-radius);
    overflow: hidden;
}

.v2-story__list li {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
}

.v2-story__list li + li { border-top: 1px solid var(--v1-line); }

.v2-story__listrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: #fff;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s var(--v1-ease);
}

.v2-story__listrow::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--v1-orange);
    opacity: 0;
    transition: opacity 0.25s var(--v1-ease);
}

.v2-story__listrow.is-active { background: var(--v1-paper-2); }
.v2-story__listrow.is-active::before { opacity: 1; }

.v2-story__listicon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--v1-paper-2);
    color: var(--v1-body);
    font-size: 17px;
    transition: background 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v2-story__listrow.is-active .v2-story__listicon { background: var(--v1-orange); color: #fff; }

.v2-story__listbody {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v2-story__listtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--v1-ink);
}

.v2-story__listsub {
    font-size: 12px;
    line-height: 1.45;
    color: var(--v1-body);
}

.v2-story__listarrow {
    flex: none;
    color: var(--v1-orange);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Fotograf seridi - kenardan kenara ('.v1-wrap' disinda duruyor, bkz.
   partials/v2-sector.blade.php)
   -------------------------------------------------------------------------- */

/* Karolar duz dikdortgen DEGIL, capraz kesilmis paralelkenar - /v1'in
   footer marka panelindeki AYNI 'clip-path' teknigi (bkz. home-v1.css
   '.footer-v1__brand'). Aralarinda GERCEK ama DAR bosluk var, her karo
   KENDI BASINA bir paralelkenar. Sadece ic kenarlar (komsu karoya bakan
   taraf) capraz - ilk karonun SOLU ve son karonun SAGI duz kaliyor.

   Geometri: her karonun ust kenari alt kenarina gore capraz kesim payi
   ('--v2-story-slant') kadar sagda. Karolar esit genislikte yalnizca YAN
   YANA dursa iki komsu arasindaki gorunur aralik "izgara boslugu + kesim
   payi" (~22-36px) olur. Bu yuzden her karo kutusu komsusunun uzerine
   kesim payi kadar BINIYOR (negatif 'margin-right'), gorunur bosluk ise
   clip-path'in kendi icine alinan '--v2-story-gap' kadar - aralik
   dogrudan bu degiskenle olculuyor.

   Kenarlarin ekranla BIRLESMESI: ilk karonun solu duz ve viewport'un sol
   kenarinda. Son karonun kutusu, ustteki binisme kurali yuzunden seridin
   sagindan kesim payi kadar TASIYOR; duz sag kenari ekranin disinda kaldigi
   icin gorunen kisim ekranin sag bitisine kadar dolu geliyor (body'de
   'overflow-x:hidden' var, bkz. style.css - yatay kaydirma cubugu olusmaz).

   '.v1-wrap' disinda durmak (bkz. partials/v2-sector.blade.php) TEK
   BASINA yetmez: bu bolum yine de paylasilan '.v1' sarmalayicisinin
   (v1-sections.blade.php) icinde kaliyor, o da kendi genisligini ebeveyninden
   miras aliyor. '100vw' kirma GERCEKTEN viewport kenarina gidiyor. */
.v2-story__strip {
    --v2-story-slant: clamp(20px, 2.2vw, 32px);
    /* Karolar arasindaki GORUNUR aralik (yatay olcu) - tek yerden. */
    --v2-story-gap: clamp(4px, 0.4vw, 6px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* Izgara boslugu 0: aralik clip-path'in icinde, yoksa ikisi toplanir. */
    gap: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: clamp(28px, 4vw, 48px);
    /* Son karonun ekran disinda kalan payini BURADA kesiyoruz, body'nin
       'overflow-x:hidden'ina bırakmiyoruz: tasma belgeye kalirsa sayfanin
       yatay kaydirma genisligi buyuyor ve odaklanma/kaydirma cagrilari
       sayfayi yatayda oynatabiliyor (oklara basildiginda yatay kayma,
       bkz. home-v2.js). */
    overflow: hidden;
}

/* Varsayilan: HER IKI kenar de capraz (orta karolar) - ust-sol kesik,
   alt-sag kesik, ayni yonde egik ('/' paralelkenar). Kutu, negatif
   'margin-right' ile kolonundan kesim payi kadar tasip komsusunun ustune
   biniyor; iki sekil bu sayede kenetleniyor, ustuste binmiyor (komsunun
   clip-path'i tam o ucgeni disarida birakiyor). */
.v2-story__thumb {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 3;
    padding: 16px calc(16px + var(--v2-story-slant)) 16px 16px;
    margin-right: calc(-1 * var(--v2-story-slant));
    background: #000;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    color: #fff;
    text-align: left;
    clip-path: polygon(calc(var(--v2-story-slant) + var(--v2-story-gap)) 0, 100% 0, calc(100% - var(--v2-story-slant)) 100%, var(--v2-story-gap) 100%);
}

/* Ilk karo: SOL kenar duz (ekranin sol kenariyla birlesiyor), sadece
   sag-alt kesik. */
.v2-story__thumb:first-child {
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--v2-story-slant)) 100%, 0 100%);
}

/* Son karo: SAG kenar duz ve seridin disinda (ekranin sag bitisiyle
   birlesiyor), sadece sol-ust kesik. Sag ic boslugu digerleriyle AYNI
   kaliyor - kutu ekranin sagindan kesim payi kadar tastigi icin ok/baslik
   yine ekran kenarindan ~16px iceride duruyor. */
.v2-story__thumb:last-child {
    clip-path: polygon(calc(var(--v2-story-slant) + var(--v2-story-gap)) 0, 100% 0, 100% 100%, var(--v2-story-gap) 100%);
}

.v2-story__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--v1-ease);
}

.v2-story__thumb:hover img { transform: scale(1.04); }

.v2-story__thumbscrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.66) 100%);
}

.v2-story__thumbindex {
    position: relative;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
}

.v2-story__thumb.is-active .v2-story__thumbindex { color: var(--v1-orange); }

.v2-story__thumbtitle {
    position: relative;
    display: block;
    max-width: calc(100% - 34px);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

/* 'right' capraz kesilen kenardan (bkz. '.v2-story__thumb' clip-path)
   ekstra pay aliyor - yoksa ok diagonal kesimin disinda kalirdi. */
.v2-story__thumbarrow {
    position: absolute;
    right: calc(16px + var(--v2-story-slant, 0px));
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    transition: background 0.25s var(--v1-ease);
}

.v2-story__thumb.is-active .v2-story__thumbarrow,
.v2-story__thumb:hover .v2-story__thumbarrow { background: var(--v1-orange); }

/* --------------------------------------------------------------------------
   Aktif sektorun vana tipi etiketleri (icerik etiketi - keskin kose)
   -------------------------------------------------------------------------- */

.v2-story__types {
    position: relative;
    margin-top: clamp(24px, 3vw, 40px);
}

.v2-story__typespanel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.v2-story__typespanel.is-active { display: flex; }

.v2-story__types-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v1-ink);
}

.v2-story__typelist {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-story__typelist a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--v1-line);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--v1-ink);
    text-decoration: none;
    background: #fff;
    transition: background 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v2-story__typelist a:hover {
    background: var(--v1-orange);
    border-color: var(--v1-orange);
    color: #fff;
}

/* ============================================================================
   02 - VANA TIPI BOLUMU. /v1 VE /v2 KOSULSUZ bu dosyayi kullaniyor (bkz.
   v1-sections.blade.php'deki @include). TEK KASITLI FARK kose yaricapi:
   /v1'de kartlar ve butonlar sert koseli, /v2'de yuvarlak - bkz. asagidaki
   '--v2-flow-radius' degiskeni.
   ============================================================================ */

.v2-flow {
    /* Varsayilan (/v1 dahil HERKES icin) SERT kose - site genelindeki
       keskin kose kuraliyla AYNI. SADECE /v2'de ('body.hero-v2-page',
       bkz. asagisi) yuvarlaniyor - sektor bolumundeki '--v2-story-radius'
       ile o zaman AYNI degere gelir, ama iki bolum birbirinin ust ogesi
       olmadigi icin degisken burada AYRICA tanimli. */
    --v2-flow-radius: 0;
}

body.hero-v2-page .v2-flow {
    --v2-flow-radius: 18px;
}

.v2-flow__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.v2-flow__text {
    display: flex;
    flex-direction: column;
}

/* --------------------------------- sayfalama --------------------------------- */
/* SADECE TEK bir sade "next" ok dugmesi (ilerleme cubugu / sayac / prev
   yok) - sektor bolumundeki AYNI kalip (bkz. '.v2-story__pager'). */

.v2-flow__pager {
    margin-top: clamp(28px, 4vh, 48px);
}

.v2-flow__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    background: #fff;
    border: 1px solid var(--v1-line);
    border-radius: 50%;
    color: var(--v1-ink);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v2-flow__nav:hover {
    background: var(--v1-orange);
    border-color: var(--v1-orange);
    color: #fff;
}

/* --------------------------------- sahne + liste --------------------------------- */

.v2-flow__main {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: stretch;
}

.v2-flow__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    padding: 32px;
    background: var(--v1-paper-2);
    border-radius: var(--v2-flow-radius);
    overflow: hidden;
}

/* /v1'deki AYNI saf-CSS susleme (daire + "pusula ignesi"), bkz.
   home-v1.css '.v1-flow__stage-shape/needle' - gorsel dosyasi yok. */
.v2-flow__stage-shape {
    position: absolute;
    top: 4%;
    right: 6%;
    width: 62%;
    height: 78%;
    background: radial-gradient(circle at 50% 45%, rgba(255, 65, 0, 0.16) 0%, rgba(255, 65, 0, 0.06) 55%, rgba(255, 65, 0, 0) 74%);
    border-radius: 50%;
}

.v2-flow__stage-needle {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 46px;
    height: 96px;
    transform: rotate(-32deg);
    background: linear-gradient(180deg, var(--v1-orange) 0%, var(--v1-orange) 52%, transparent 52%, transparent 100%);
    clip-path: polygon(50% 0%, 100% 62%, 50% 48%, 0% 62%);
    opacity: 0.9;
}

.v2-flow__stage-img {
    position: relative;
    z-index: 1;
    max-width: 74%;
    max-height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(24, 29, 78, 0.16));
}

/* Yuzen kart - /v1'deki '.v1-flow__stage-card' ile AYNI, tek fark
   yuvarlak kose (bu bolumun istisnasi). */
.v2-flow__stage-card {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100% - 40px);
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--v1-line);
    border-radius: 6px;
    box-shadow: 0 16px 32px rgba(24, 29, 78, 0.1);
}

.v2-flow__stage-text { display: flex; flex-direction: column; gap: 4px; }

.v2-flow__stage-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v1-ink);
}

.v2-flow__stage-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--v1-body);
}

.v2-flow__stage-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--v1-orange);
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    transition: transform 0.25s var(--v1-ease);
    
}

.v2-flow__stage-btn:hover { transform: translateX(3px); }

/* Yan liste: kapsayici '.v2-flow__main'de 'align-items:stretch' oldugu
   icin buyuk sahne ile AYNI yukseklige geriliyor, satirlar bu yuksekligi
   ESIT PAYLASIYOR ('.v2-story__list' ile AYNI teknik, bkz. yukarisi) -
   boylece kalan kac kart olursa olsun (aktif haric) bosluk EN ALTTA
   YIGILMIYOR. */
.v2-flow__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.v2-flow__item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--v1-line);
    border-radius: var(--v2-flow-radius);
    box-shadow: 0 10px 24px rgba(24, 29, 78, 0.06);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.2s var(--v1-ease), box-shadow 0.2s var(--v1-ease);
}

.v2-flow__item:hover {
    border-color: var(--v1-orange);
    box-shadow: 0 14px 28px rgba(24, 29, 78, 0.1);
}

/* Aktif olan buyuk sahnede zaten gosteriliyor - sahnedeki kart sagdaki
   listede TEKRARLANMIYOR (bkz. '.v1-flow__item.is-active'
   ile AYNI teknik, home-v1.css). */
.v2-flow__item.is-active { display: none; }

.v2-flow__item-thumb {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
}

.v2-flow__item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.v2-flow__item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.v2-flow__item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--v1-ink);
}

.v2-flow__item-sub {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--v1-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bu ok turuncu DEGIL, notr gri - sahnenin kendi turuncu ok
   dugmesinden (buyuk kart, gercek "aktif" eylem) bilerek ayristiriliyor. */
.v2-flow__item > i { color: var(--v1-body); font-size: 15px; flex: 0 0 auto; }

/* ============================================================================
   05 - HABERLER BOLUMU ("Sektörden Gelişmeler ve Uzman Görüşleri").

   DUZEN olarak /v1-news ile AYNI: eyebrow + pill sekmeler, solda baslik/aciklama/CTA/sayfalama, sagda 1 buyuk one cikan
   kart + 2 kucuk yan kart, altta sosyal medya seridi. O yuzden
   v2-news.blade.php /v1-news'in AYNI siniflarini (`.v1-news__head`,
   `.v1-news-feat`, `.v1-news-card`, `.v1-date`, `.v1-news__pager`, ...)
   DOGRUDAN kullaniyor - hicbiri '.v1-news' ust ogeye kilitli degil,
   yeniden yazmaya gerek yok. Bu dosyada SADECE /v2'nin farkli oldugu
   noktalar icin '.v2-news' KAPSAMLI (scoped) ekler var:
     - Kartlar YUVARLAK kose - /v1'de KESKIN kalan ayni kartlara SADECE
       burada 'border-radius' ekleniyor.
     - Fotografin uzerinde GERCEK kategori rozeti (Page::taxonomies(),
       parent_id 189) - pill etiket, metni UYDURULMUS degil.
     - Tarihin onunde takvim ikonu.
     - Sayfalama tek bir yuvarlak "hap" (pill) icinde - oklar ve sayac
       ayri degil, tek bir oval kapsayicinin icinde.

   Etkilesim ISE /v1-news ile AYNI JS'i kullaniyor (home-v1.js
   '[data-v1-news]') - iki bolum /v1-sections.blade.php'de KARSILIKLI
   DISLAYICI (birbirinin yerine geciyor, $heroVersion), o yuzden ayni
   data-* nitelikleri iki tarafta da CAKISMADAN calisiyor. JS'te
   rozet+ozet metnini guncelleyen iki opsiyonel satir var
   (data-v1-news-stage-tag/-excerpt) - bu elemanlar /v1-news'te YOK,
   querySelector null donunce guard'lar atlaniyor, /v1'in davranisi
   etkilenmiyor.
   ============================================================================ */

.v2-news {
    /* Diger /v2 bolumlerindeki AYNI deger. */
    --v2-news-radius: 18px;
    position: relative;
    overflow: hidden;
}

.v2-news .v1-news-feat,
.v2-news .v1-news-card {
    border-radius: var(--v2-news-radius);
    overflow: hidden;
}

/* GERCEK kategori rozeti (Haberler/Fuarlar/Duyurular) - fotografin
   SOL-UST kosesinde, pill etiket. */
.v2-news__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;
    padding: 6px 14px;
    background: var(--v1-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

/* Tarihin onunde takvim ikonu - taban '.v1-date' zaten var, burada
   SADECE ikonla aradaki boslugu ayarlayan bir kapsam ekleniyor. */
.v2-news .v1-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v2-news .v1-date i { color: var(--v1-body); font-size: 12px; }

/* Buyuk karttaki gercek ozet (haberin kendi 'content' alanindan
   kirpilmis, bkz. blade) - /v1-news'te YOK, sadece burada. */
.v2-news-feat__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: var(--v1-body);
}

/* --------------------------------- sayfalama --------------------------------- */
/* Oklar+sayac ayri degil, TEK bir yuvarlak "hap" (pill)
   icinde - taban '.v1-news__pager' zaten flex row, burada SADECE
   kapsayici bir cerceve+pill zemin ekleniyor, markup degismiyor. */
.v2-news .v1-news__pager {
    display: inline-flex;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--v1-line);
    border-radius: 999px;
}

.v2-news .v1-news__navbtn { border: 0; }

/* --------------------------------------------------------------------------
   Duyarli - '.v1-split'in kirilimlariyla ayni esikler (home-v1.css)
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .v2-story__grid { grid-template-columns: minmax(0, 1fr); }
    .v2-story__text { position: static; }
    .v2-story__showcase { grid-template-columns: minmax(0, 1fr); }
    .v2-story__feature { aspect-ratio: 16 / 9; }

    .v2-flow__grid { grid-template-columns: minmax(0, 1fr); }
    .v2-flow__main { grid-template-columns: minmax(0, 1fr); }
    .v2-flow__stage { min-height: 300px; }

    /* '.v2-news' bolumunun izgarasi '.v1-news__cards' - kendi kirilimi
       zaten home-v1.css'te (991.98px/767.98px), burada AYRICA tekrar
       edilmesine gerek yok. */
}

/* Zikzak kenetleme SADECE tek satirda (5 kolon) anlamli - izgara birden
   fazla satira bolununce (asagida) her yeni satirin ILK karosu da negatif
   kenar boşluguyla sola kayardi ve konteynerden tasardi. O yuzden dar
   ekranda paralelkenar iptal, duz dikdortgene donuyor. */
@media (max-width: 767.98px) {
    .v2-story__strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Paralelkenar iptal oldugu icin aralik yeniden izgaranin isi. */
        gap: var(--v2-story-gap);
    }
    /* ':first-child'/':last-child' varyantlari daha ozgul (0,2,0), bu
       yuzden ayrica sayilmazlarsa buradaki sifirlamayi ezerlerdi. */
    .v2-story__thumb,
    .v2-story__thumb:first-child,
    .v2-story__thumb:last-child {
        clip-path: none;
        padding-right: 16px;
        /* Binisme de iptal: duz dikdortgenlerde uste binmek karolari ezerdi. */
        margin-right: 0;
    }
}

@media (max-width: 575.98px) {
    .v2-story__strip { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .v2-story__featurecard,
    .v2-story__thumb img { transition: none !important; }
}

/* ============================================================================
   01b - SEKTOR BOLUMU, "KAPLAYAN SAHNE" HALI ('.v2-imm*'). SADECE /v2.

   Yukaridaki '.v2-story*' kurallari ayri duruyor: ayni dosyayi /v4 de
   yukluyor ve o adres acik zeminli govdeyi kullaniyor (bkz.
   partials/v2-sector.blade.php'deki kosul). Bu sunum bastan sona
   kendi ad alaninda ('.v2-imm'), o yuzden iki tasarim birbirine
   karisamaz - ayni sayfada ikisi birden hic render edilmiyor zaten.

   KOYU ZEMIN TONU tek bir degiskende ('--v2i-deep'): perdeler, cam
   kartlarin golgeleri ve bolumun kendi zemini AYNI rengi kullanmak
   zorunda, yoksa fotografin bittigi yerde renk bandi olusuyor (ayni
   tuzak icin bkz. home-v6.css '.v6-ocean__fade').
   ============================================================================ */

.v2-imm {
    --v2i-deep: 7, 21, 35;          /* #071523 - fotograflarin koyu tonu */
    --v2i-glass: rgba(255, 255, 255, 0.07);
    --v2i-glass-line: rgba(255, 255, 255, 0.14);

    position: relative;
    overflow: hidden;
    background: rgb(var(--v2i-deep));
}

/* ------------------------------------------------ sahne (arka plan kareleri) */

.v2-imm__stage { position: absolute; inset: 0; }

.v2-imm__shot {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Kare degisiminde hafif bir yakinlasma - '.v2-story' govdesindeki
       buyuk kartin gecis hissi burada da olsun diye. */
    transform: scale(1.06);
    transition: opacity 0.9s var(--v1-ease), transform 1.6s var(--v1-ease);
}

.v2-imm__shot.is-active { opacity: 1; transform: none; }

.v2-imm__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Soldan inen perde: basligin ustunde fotograf ne olursa olsun ayni
   kontrast olsun diye. Sag kenar da hafif koyulasiyor - sektor kartlari
   orada duruyor. */
.v2-imm__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(var(--v2i-deep), 0.97) 0%,
        rgba(var(--v2i-deep), 0.90) 24%,
        rgba(var(--v2i-deep), 0.55) 46%,
        rgba(var(--v2i-deep), 0.30) 66%,
        rgba(var(--v2i-deep), 0.62) 100%);
}

.v2-imm__scrim--bottom {
    background: linear-gradient(180deg,
        rgba(var(--v2i-deep), 0.55) 0%,
        rgba(var(--v2i-deep), 0) 34%,
        rgba(var(--v2i-deep), 0.20) 66%,
        rgba(var(--v2i-deep), 0.78) 100%);
}

/* Turuncu akis egrisi - saf SVG, dis kutuphane yok. */
.v2-imm__flow {
    position: absolute;
    top: 0;
    left: 22%;
    width: 42%;
    height: 100%;
    opacity: 0.5;
    pointer-events: none;
}

.v2-imm__flow path {
    fill: none;
    stroke: var(--v1-orange);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(255, 65, 0, 0.55));
}

/* ------------------------------------------------------------------ izgara */

.v2-imm__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 0.92fr);
    gap: clamp(20px, 2.4vw, 44px);
    /* Bolum kompakt: asgari yukseklik 400-560px, dikey bosluk en fazla
       50px. Bolumun yuksekligini genelde SAGDAKI bes kart belirliyor, bu
       yuzden kartlarin kendi olculeri de asagida kisa tutuluyor - tek
       basina bu degeri kismak yetmez. */
    min-height: clamp(400px, 33vw, 560px);
    padding: clamp(32px, 3.2vw, 50px) 0;
}

/* --------------------------------------------------------------- sol kolon */

.v2-imm__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.v2-imm__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 clamp(12px, 1.4vw, 20px);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.v2-imm__dash {
    display: block;
    flex: 0 0 auto;
    width: 42px;
    height: 2px;
    background: var(--v1-orange);
}

/* Sektor adlari ust uste duruyor: kutu en uzun ada gore yer kapliyor ve
   gecis sirasinda satir kaymiyor (izgara yigini - 'position: absolute'
   kullanilmadi ki kutu kendi genisligini kaybetmesin). */
.v2-imm__eyebrowtext { display: grid; }

.v2-imm__eyebrowitem {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s var(--v1-ease), transform 0.5s var(--v1-ease);
}

.v2-imm__eyebrowitem.is-active { opacity: 1; transform: none; }

.v2-imm__title {
    margin: 0 0 clamp(14px, 1.5vw, 20px);
    max-width: 14ch;
    font-size: clamp(1.95rem, 3.4vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: #fff;
}

.v2-imm__title-a,
.v2-imm__title-b { display: inline; }

/* Ikinci parca turuncu - '.v1-h2--split' ile AYNI karar,
   sadece zemin koyu oldugu icin ilk parca beyaz. */
.v2-imm__title-b { color: var(--v1-orange); }

.v2-imm__lead {
    margin: 0 0 clamp(18px, 2vw, 26px);
    max-width: 38ch;
    font-size: clamp(14px, 1vw, 15px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

/* Cerceveli hap buton. Kose yariCAPI bu bolumun ZATEN yuvarlak
   olan kart diliyle uyumlu - bkz. partials/v2-sector.blade.php'deki
   "kose yariCAPI istisnasi" notu. */
.v2-imm__allbtn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease), background 0.25s var(--v1-ease);
}

.v2-imm__allbtn i { color: var(--v1-orange); font-size: 18px; }

.v2-imm__allbtn:hover {
    gap: 20px;
    color: #fff;
    border-color: var(--v1-orange);
    background: rgba(255, 65, 0, 0.14);
}

/* ------------------------------------------ ilerleme cizgileri + sade ok */

.v2-imm__pager {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: auto;
    padding-top: clamp(18px, 2.2vw, 32px);
}

.v2-imm__dots { display: flex; align-items: center; gap: 8px; }

/* Cizgiler '.v2-story' fotograf seridinin ISLEVINI tasiyor (her biri bir sektore
   gidiyor), o yuzden gercek <button> - sadece gorsel bir gosterge degil. */
.v2-imm__dot {
    padding: 8px 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.v2-imm__dotline {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.32);
    transition: width 0.3s var(--v1-ease), background 0.3s var(--v1-ease);
}

.v2-imm__dot.is-active .v2-imm__dotline { width: 30px; background: var(--v1-orange); }
.v2-imm__dot:hover .v2-imm__dotline { background: rgba(255, 255, 255, 0.7); }

.v2-imm__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: border-color 0.25s var(--v1-ease), background 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v2-imm__nav:hover { border-color: var(--v1-orange); background: var(--v1-orange); color: #fff; }

.v2-imm__navlabel {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------- yuzen one cikan kart */

/* Kartlar izgara yigini olarak ust uste: kapsayicinin yuksekligi en uzun
   karta gore sabit kaliyor, gecerken bolum ziplamiyor. */
.v2-imm__feature { align-self: end; display: grid; }

.v2-imm__card {
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.4vw, 22px);
    padding: clamp(16px, 1.6vw, 24px);
    border: 1px solid var(--v2i-glass-line);
    border-radius: 16px;
    background: var(--v2i-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px rgba(var(--v2i-deep), 0.45);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.6s var(--v1-ease), transform 0.6s var(--v1-ease), border-color 0.25s var(--v1-ease);
}

.v2-imm__card.is-active { opacity: 1; visibility: visible; transform: none; }
.v2-imm__card:hover { border-color: rgba(255, 65, 0, 0.55); }

.v2-imm__cardbody { flex: 1 1 auto; min-width: 0; }

.v2-imm__cardbody .v2-imm__dash { margin-bottom: 12px; }

.v2-imm__cardtitle {
    display: block;
    margin-bottom: 6px;
    font-size: clamp(1.15rem, 1.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.v2-imm__carddesc {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.76);
}

.v2-imm__cardgo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 65, 0, 0.6);
    border-radius: 50%;
    color: var(--v1-orange);
    font-size: 19px;
    transition: background 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v2-imm__card:hover .v2-imm__cardgo { background: var(--v1-orange); color: #fff; }

/* --------------------------------------------------------- sektor listesi */

.v2-imm__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 0.6vw, 9px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2-imm__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: clamp(9px, 0.9vw, 12px) clamp(13px, 1.2vw, 18px);
    border: 1px solid var(--v2i-glass-line);
    border-radius: 14px;
    background: var(--v2i-glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: left;
    cursor: pointer;
    transition: background 0.25s var(--v1-ease), border-color 0.25s var(--v1-ease);
}

.v2-imm__row:hover { background: rgba(255, 255, 255, 0.12); }

/* Aktif satirin turuncu sol seridi - '.v2-story' govdesindeki AYNI isaret
   ('.v2-story__listrow.is-active'), sadece koyu zemine uyarlandi. */
.v2-imm__row::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -1px;
    width: 3px;
    border-radius: 3px;
    background: var(--v1-orange);
    opacity: 0;
    transition: opacity 0.25s var(--v1-ease);
}

.v2-imm__row.is-active::before { opacity: 1; }
.v2-imm__row.is-active { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.22); }

.v2-imm__rowicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 18px;
    transition: background 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v2-imm__row.is-active .v2-imm__rowicon { background: var(--v1-orange); color: #fff; }

.v2-imm__rowbody { flex: 1 1 auto; min-width: 0; }

.v2-imm__rowtitle {
    display: block;
    margin-bottom: 2px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.v2-imm__rowsub {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.68);
}

.v2-imm__rowarrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.25s var(--v1-ease), transform 0.25s var(--v1-ease);
}

.v2-imm__row:hover .v2-imm__rowarrow,
.v2-imm__row.is-active .v2-imm__rowarrow { color: var(--v1-orange); transform: translateX(3px); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1199.98px) {
    /* Uc kolon bu genislikte sikisiyor: metin ustte tam genislikte,
       altinda yuzen kart ve sektor listesi yan yana. */
    .v2-imm__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 0;
    }
    .v2-imm__text { grid-column: 1 / -1; }
    .v2-imm__feature { align-self: stretch; margin-top: clamp(20px, 2.6vw, 32px); }
    .v2-imm__list { margin-top: clamp(20px, 2.6vw, 32px); }
    .v2-imm__title { max-width: 18ch; }
    .v2-imm__flow { display: none; }
}

@media (max-width: 767.98px) {
    .v2-imm__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .v2-imm__feature,
    .v2-imm__list { margin-top: 28px; }
    .v2-imm__title,
    .v2-imm__lead { max-width: none; }
    /* Tek kolonda soldan gelen perde ise yaramaz - fotograf butun genisligi
       kapliyor, o yuzden dikey koyulastirma. */
    .v2-imm__scrim {
        background: linear-gradient(180deg,
            rgba(var(--v2i-deep), 0.90) 0%,
            rgba(var(--v2i-deep), 0.80) 45%,
            rgba(var(--v2i-deep), 0.92) 100%);
    }
    .v2-imm__pager { flex-wrap: wrap; row-gap: 12px; }
    .v2-imm__navlabel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-imm__shot,
    .v2-imm__card,
    .v2-imm__eyebrowitem { transition: none !important; }
    .v2-imm__shot { transform: none !important; }
}

/* site/assets/css/home-v1-surface.css */
/* ============================================================================
   /v1 YUZEY YUMUSATMASI
   ----------------------------------------------------------------------------
   /v1'in daha YUMUSAK okunmasi icin dort tasarim tercihi (fark
   render/anti-aliasing kaynakli degil - anti-aliasing zaten acik, style.css
   '-webkit-font-smoothing'):

     1. Kart kenari 1px sert hairline degil, YUMUSAK GOLGE.
     2. Kart ve ikon rozetlerinin kosesi yuvarlatilmis.
     3. Satir yuksekligi daha genis.
     4. Govde metni saf siyah degil ACIK GRI.

   Dordu de render maliyeti olmayan, statik boyama ozellikleri: ek istek,
   ek kutuphane, ek JS yok; sayfa agirligina etkisi bu dosyanin kendi
   boyutu kadar. (Sayfanin gercek hiz sorunu ayri bir is: urun gorselleri
   68px'lik bir karo icin 1.8 MB'a kadar PNG indiriyor.)

   ----------------------------------------------------------------------------
   KAPSAM - NEDEN AYRI DOSYA
   ----------------------------------------------------------------------------
   Degisiklik yalnizca /v1'i kapsiyor. home-v1.css'i /v1, /v2, /v4 ve /v5 PAYLASIYOR, o
   yuzden oraya yazilan her kural dort adresi birden degistirirdi. Bu dosya
   master.blade.php'de YALNIZCA '$heroVersion === 1' kosuluyla yukleniyor -
   yani diger surumler dosyayi indirmiyor bile, sizma matematiksel olarak
   imkansiz. Ayni izolasyon deseni home-v2-flow.css'te de kullaniliyor.

   Secicilerdeki '.hero-v1-page:not(.hero-v2-page)' prefiksi bu yuzden
   GUVENLIK icin degil, OZGULLUK icin: home-v1.css'in /v1'e ozel bloklari
   ayni prefiksi tasiyor, esit ozgullukte kalip kaynak sirasina gore
   kazanabilmek icin ayni bicim korunuyor.

   Dosya home-v1.css VE home-v2.css'ten SONRA yukleniyor (ikisi de /v1'de
   aktif), yoksa ezmeler tutmazdi.
   ============================================================================ */


/* ---- 00 JETONLAR ----------------------------------------------------------
   Iki degeri kaynagindan degistirmek, tek tek kural ezmekten temiz: sayfadaki
   BUTUN hairline'lar ve BUTUN govde metinleri (header ve footer dahil) tek
   satirla yumusuyor.

   '--v1-line' :root'ta tanimli; govde sinifinda yeniden tanimlanmasi
   :root'tan miras alinan degeri body ve butun alt ogeleri icin gecersiz
   kilar. Yeni bir renk AILESI girmiyor - ayni lacivert, dusuk opaklikta.

   '--v1-body' home-v1.css'te '--v1-ink' ile ayni saf siyah (#1c1c1c), yani
   govde metni basliklarla ayni agirlikta okunurdu. Buradaki deger ayni notr
   lacivert-grinin acik tonu; beyaz zeminde kontrast orani ~6.8:1, WCAG AA
   esigi olan 4.5:1'in uzerinde. Basliklar '--v1-ink' kullandigi icin
   ETKILENMIYOR - amac zaten baslik/govde ayrimini gorunur kilmak. */
.hero-v1-page:not(.hero-v2-page) {
    --v1-line: rgba(24, 29, 78, 0.06);
    --v1-body: #55596B;

    /* Kart golgesi: cok yakin + cok dusuk opaklikta bir temas
       golgesi (kartin zemine degdigi yer) ve genis yayilan ikinci bir
       katman. Tek katmanli golge bu olcekte "bulanik" duruyor. */
    --v1-soft-shadow:
        0 1px 2px rgba(24, 29, 78, 0.04),
        0 8px 24px -8px rgba(24, 29, 78, 0.12);
}


/* ---- 01 URUN KARTLARI (MASAUSTU) ------------------------------------------
   Masaustunde kartlarin cercevesi ve zemini BILEREK yok (fotograflar duz
   sayfa zemininde duruyor) - burada sadece metin ritmi genisletiliyor.

   Ikon rozetinin kose yaricapi 10px: /v1'in kart olceginin AYNISI (bkz.
   home-v1.css'teki mobil kart kurali), yeni bir olcek eklenmedi. Site
   genelindeki "kose yaricapi 0" kurali bu bolumun yuvarlak rozetleri icin
   bilincli olarak esnetiliyor. */
.hero-v1-page:not(.hero-v2-page) .v1-catalog__title {
    line-height: 1.35;
}

.hero-v1-page:not(.hero-v2-page) .v1-catalog__desc {
    line-height: 1.7;
}

.hero-v1-page:not(.hero-v2-page) .v1-catalog__iconwrap {
    border-radius: 10px;
}


/* ---- 02 URUN KARTLARI + IKON HAPLARI (TELEFON) ----------------------------
   Telefonda kartlarin ve haplarin cercevesi VAR (110px'lik karolarda
   cerceve olmadan uc kart tek karmasaya donusuyor - bkz. home-v1.css'teki
   gerekce). Cerceve kalkmiyor; yukaridaki jeton sayesinde zaten soluyor,
   ustune yumusak golge biniyor: "kagit kart" hissini veren sey sert cizgi
   degil bu golge.

   Haplarin yaricapi 6px -> 10px: kartlarla AYNI olcege hizalaniyor, iki
   farkli yuvarlaklik yan yana durmasin diye. */
@media (max-width: 767.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card {
        box-shadow: var(--v1-soft-shadow);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__desc {
        line-height: 1.55;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlink {
        border-radius: 10px;
        box-shadow: var(--v1-soft-shadow);
    }
}


/* ---- 03 HERO: BEYAZ UST BANT + UZAKLASTIRILMIS KADRAJ (<=991px) ----------
   Hero fotografinin kadraji dar ekranda biraz uzaklastiriliyor. Fotograf
   2170x725 (~3:1) ve 'object-fit: cover' olcegi dar ekranda YUKSEKLIKTEN
   aliyor, yani tek kaldirac gorselin yuksekligi - hero ne kadar alcaksa
   kadraj o kadar genis. Hero'nun BOYU bilerek uzun (140vw), o yuzden
   kisaltmak yerine GORSEL hero'dan kisa tutuluyor: foto alta
   sabitleniyor, ustte kalan serit acikta kaliyor.

   BANT YUKSEKLIGI = HEADER YUKSEKLIGI (76px, bkz. home-v1.css'teki
   '.header-area .navigation' mobil kurali) ve yuzde DEGIL sabit piksel.
   Sebebi: gecis cizgisi boylece header'in tam alt kenarina oturuyor, yani
   rastgele bir yerde kesilmis fotograf gibi degil "ust serit beyaz, fotograf
   onun altinda basliyor" gibi okunuyor. Yuzde verilseydi cizgi hero'nun
   boyuna gore kayar, 430px'lik ekranda header'in ortasindan gecerdi.

   Olcum (390px telefon, hero 546px): gorsel 546 -> 470px, olcek 0.753 ->
   0.648, yani kadraj %14 genisliyor ve vana ~%12 kuculuyor.

   Bandin rengi ayrica boyanmiyor - '.v1-hero__card' zemini zaten
   '--v1-paper' (beyaz), gorsel kisalinca altindaki beyaz kendiliginden
   goruinuyor. Yine de acikca yaziliyor ki ileride kart zemini degisirse
   bant sessizce baska bir renge donmesin. */
@media (max-width: 991.98px) {
    .hero-v1-page:not(.hero-v2-page) .v1-hero__media {
        background: var(--v1-paper);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-hero__media img {
        position: absolute;
        left: 0;
        bottom: 0;
        height: calc(100% - 76px);
    }

    /* Karartma gradyani da bandin ALTINDAN basliyor. 'inset: 0' birakilsaydi
       %72 opaklikla baslayan koyu katman beyaz bandi gri yapardi. Gradyanin
       kendisine dokunulmuyor - sadece baslangic noktasi kayiyor, dolayisiyla
       basligin oturdugu bant (icerik 88px'ten basliyor) en koyu yerde
       kalmaya devam ediyor. */
    .hero-v1-page:not(.hero-v2-page) .v1-hero__scrim {
        top: 76px;
    }
}


/* ---- 04 URUN KARTLARI: GIRIS ANIMASYONU KAPALI ---------------------------
   SORUN: telefonda "A Complete Range of Valve Solutions" bolumunun basligi
   gorunurken ALTINDAKI uc urun karti ve dort ikon hapi BOS kalabiliyor -
   bolumun yarisi bos bir cerceve gibi duruyor.

   SEBEP: butun bu ogeler 'data-v1-reveal' tasiyor ve home-v1.css'teki
   '.v1-ready [data-v1-reveal]' kurali onlari 'opacity: 0' ile BASLATIYOR;
   gorunur hale gelmeleri home-v1.js'teki IntersectionObserver'in '.is-in'
   sinifini eklemesine bagli. Gozlemcinin esigi 'threshold: 0.08' +
   'rootMargin: 0px 0px -10% 0px', yani oge ekranin alt %10'luk seridini
   GECMEDEN tetiklenmiyor. Baslik ve aciklama kadraja tam giriyor, kartlar
   ise tam o serit icinde kaliyor - yani hic kaybolmuyorlar, sadece o anda
   henuz gelmemis oluyorlar.

   COZUM: bu iki oge grubu icin giris animasyonunu tamamen kapatmak - ilk
   boyamada yerlerinde ve gorunur olsunlar. JS'e DOKUNULMUYOR: gozlemci
   '.is-in' sinifini yine ekliyor, ama asagidaki kural zaten son duruma
   esit oldugu icin gorsel olarak hicbir sey olmuyor.

   NEDEN MARKUP'TAN SILINMEDI: 'data-v1-reveal' oznitelikleri
   v1-products.blade.php'de duruyor ve o partial'i /v1 disinda /v5, /v3 ve
   /v7 de kullaniyor (bkz. v1-sections.blade.php'deki kosul). Oznitelik
   silinseydi dort adres birden degisirdi; degisiklik /v1 ile sinirli.

   OZGULLUK: temel kural '.v1-ready [data-v1-reveal]' (0,2,0). '.v1-ready'
   <html> uzerinde, '.hero-v1-page' <body> uzerinde duruyor, o yuzden ikisi
   ic ice yaziliyor; sonuc (0,5,0) ile zaten yeterli, ustelik bu dosya daha
   sonra yukleniyor. '!important' gerekmedi.

   KAPSAM NOTU: /v1'de bu desene sahip BASKA bolumler de var (sektor seridi,
   sertifika bandi, haber seridi, sayilar); bu kural yalnizca urun
   kartlarini kapsiyor. */
.v1-ready .hero-v1-page:not(.hero-v2-page) .v1-catalog__card,
.v1-ready .hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlink {
    opacity: 1;
    transform: none;
    transition: none;
}


/* ---- 06 AR-GE BOLUMU -------------------------------------------------------
   Acik zemin, SOLA yasli metin, fotograf sadece beyaza soluyor - karartma
   YOK. Tasarim tum genisliklerde tek kaynaktan, home-v1.css'teki
   '.v1-whyus*' temel kurallarindan geliyor - burada ayrica bir >=1200px
   override'ina GEREK YOK. */


/* ---- LACIVERT -> KURUMSAL KOYU -------------------------------------------
   Sayfadaki lacivertler kurumsal renge cekiliyor. /v1'de '--v1-navy'
   (#0B1E3D) dort yerde kullaniliyor: Ar-Ge basligi, Ar-Ge ozelliklerinin
   ikon ve metni, Surdurulebilirlik ikonlari. Sayfanin geri kalan basliklari
   ve kart basliklari '--v1-ink' (#1c1c1c) kullaniyor; bu dordu de ona
   cekiliyor. Degiskenin kendisine dokunulmuyor - home-v1.css /v2, /v4
   ve /v5'te de yukleniyor ve oradaki sektor kartlarinin lacivert gradyani
   ('.v1-sector__scrim') ayni tonu kullaniyor. */
.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-h2-wrap :is(h1, h2, h3),
.hero-v1-page:not(.hero-v2-page) .v1-feature__icon,
.hero-v1-page:not(.hero-v2-page) .v1-feature__text,
.hero-v1-page:not(.hero-v2-page) .v1-certband__iconglyph {
    color: var(--v1-ink);
}

/* Ar-Ge ozellik metinleri: Surdurulebilirlik ikon etiketleriyle ayni olcu
   (mobilde home-v1-mobile.css ile ayni) her ekran genisliginde: 12/18,
   semibold. */
.hero-v1-page:not(.hero-v2-page) .v1-feature__text {
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

/* Bant aciklamalari: masaustu/tablette her bandin kendi olcusu vardi
   (Urunler ve Haberler 14.5/1.75, Ar-Ge 14.5/1.5, Global Reach 13/1.6 -
   '.v1-globe__text .v1-lead'). Hepsi Sektor bandinin ('.v1-indband__lead',
   home-v1-industries.css) olcusune cekiliyor: 14.5px; satir araligi
   hepsinde 1.9 (1.55 ve 1.7 sikisik duruyor).
   Mobilde home-v1-mobile.css'in govde metni kurali
   (14/22, daha ozgul) gecerli kaliyor - orada zaten hepsi ayni.
   Ar-Ge metni CMS'ten '<p>' olarak geliyor ve style.css'in genel 'p'
   kurali (16px/26px, #58595B) paragrafa DOGRUDAN uygulandigi icin
   '.v1-rich'e verilen olcu miras kalmiyordu - paragraf da ayrica
   hedefleniyor, rengi diger aciklamalarla ('--v1-body') ayni. */
.hero-v1-page:not(.hero-v2-page) .v1-lead,
.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-rich,
.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-rich p {
    font-size: 14.5px;
    line-height: 1.9;
}

.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-rich p {
    color: var(--v1-body);
}

/* Ikon boylari: Ar-Ge ozellikleri, Global Reach ve Surdurulebilirlik ayni
   boyda - tablet ve masaustunde 40px. Mobilde home-v1-mobile.css'in ikon
   olcegi gecerli (ucu de 32px). Masaustundeki Ar-Ge kurali
   home-v1-polish.css'te (bu dosyadan sonra yukleniyor), o da 40px. */
@media (min-width: 768px) {
    .hero-v1-page:not(.hero-v2-page) .v1-feature__icon,
    .hero-v1-page:not(.hero-v2-page) .v1-globe__staticon,
    .hero-v1-page:not(.hero-v2-page) .v1-certband__iconglyph {
        font-size: 40px;
    }
}

/* site/assets/css/home-v1-industries.css */
/* ==========================================================================
   /v1 - sektor fotograf seridinin ustundeki BASLIK BANDI ('.v1-indband')
   --------------------------------------------------------------------------
   Acik mavimsi zemin, solda kucuk turuncu cizgili "OUR APPLICATIONS"
   etiketi + tek renkli koyu baslik, sagda aciklama + cerceveli "View All
   Industries" butonu yan yana.

   Dosya ayri tutuluyor cunku isaretlemeyi tasiyan parca
   (partials/v1-products.blade.php) /v1 DISINDA da basiliyor; hem link
   (master.blade.php) hem markup '$heroVersion === 1' kosuluna kilitli,
   boylece bu tasarim diger surumlere sizmiyor.

   Zemin kenardan kenara, METIN ise sayfanin normal hizasinda ('.v1-wrap').
   ========================================================================== */

/* Zemin #F6F9FC tasarim gorselinden orneklendi (bant zemini #F5F8FA -
   #F9FAFC araliginda) - sitenin var olan 'neredeyse beyaz' tonlarindan
   (ornegin '--v1-paper-2', #F4F5F7) BILEREK farkli, hafif mavimsi bir ton. */
.v1-indband {
    /* Bandin USTUNDE 15px hava - urun bolumuyle
       yapisik durmasin. Altindaki fotograf seridiyle ise bilerek yapisik
       (bkz. asagidaki '.v1-indband + .v1-band'). */
    margin-top: 15px;
    background: #F6F9FC;
}

/* Sol blok (etiket+baslik) ve sag blok (aciklama+buton) tek satirda,
   aralarinda esnek bosluk. Sabit yukseklik yok - dikey boyut icerikten ve
   dolgudan geliyor. */
.v1-indband__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 14px;
    /* +52.5px ustte ve altta: bant yuksekligi '.v1-certband'a (masaustunde
       ~260-270px) yaklasiyor (~250-260px). */
    padding: calc(clamp(8px, 1vw, 14px) + 52.5px) 0;
}

.v1-indband__heading { min-width: 0; }

/* '.v1-certband__eyebrow' ile AYNI desen - kisa turuncu cizgi + kucuk buyuk
   harf etiket. Kural burada tekrar tanimlaniyor cunku '.v1-certband'
   home-v1.css'te, bu bant ise ayri dosyada; ikisini ayni sinifa baglamak
   yanlis bir baglilik kurardi. */
.v1-indband__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v1-body);
}

.v1-indband__eyebrow-line { width: 24px; height: 2px; background: var(--v1-orange); }

/* Telefonda tum eyebrow etiketleri diger
   /v1 bantlariyla (home-v1.css) AYNI sekilde daha kalin gorunsun. */
@media (max-width: 767.98px) {
    .v1-indband__eyebrow { font-weight: 800; }
}

/* Baslik TEK RENK koyu - iki tonlu (beyaz+turuncu) '.v1-h2--split' kurali
   BILEREK kullanilmiyor. Iki satir '<span>' ile blok gosteriliyor (bkz.
   blade), '.v1-certband__title' ile AYNI teknik. */
/* 'h2.' ile ONE alindi - '.v1-h2' kuralinin ('h2.v1-h2',
   home-v1.css) ozgulluguyla (element+sinif) ESLESMESI gerekiyor, yoksa
   sadece sinif secici ('.v1-indband__title') kaybeder ve margin/font-size
   burada degil oradan gelir. '.v1-certband__title' de AYNI teknigi kullaniyor. */
/* Puntolar urun bolumundeki ('h2.v1-h2' /
   '.v1-lead', home-v1.css) ile AYNI standart olceği kullaniyor. */
h2.v1-indband__title {
    margin: 0;
    font-size: clamp(26px, 2.5vw, 38px);
    line-height: 1.2;
    max-width: none;
    color: var(--v1-ink);
}

/* Baslik iki satir - "Expertise Suited to" / "Every Sector". */
.v1-indband__title span { display: block; }

.v1-indband__meta {
    display: flex;
    align-items: center;
    /* Aciklama butonla birlikte saga yaslaniyor ('space-between' onu
       basligin hemen yanina iterdi); genis gap aciklamayi butondan
       uzaklastiriyor. */
    justify-content: flex-end;
    gap: clamp(48px, 5vw, 96px);
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.v1-indband__lead {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    /* Aciklama 3 satira dagilsin diye dar. */
    max-width: 23em;
    color: var(--v1-body);
}

/* Buton cerceveli bir kutu - koyu ince kenarlik, seffaf zemin, kucuk kose
   yaricapi. '.v1-arrowlink' (alt cizgili duz metin) ayri bir buton dili,
   ona dokunulmadi. */
.v1-indband__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid #000;
    border-radius: 6px;
    background: transparent;
    color: var(--v1-ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.25s var(--v1-ease), color 0.25s var(--v1-ease);
}

.v1-indband__link i {
    color: var(--v1-orange);
    font-size: 15px;
    transition: transform 0.25s var(--v1-ease);
}

.v1-indband__link:hover {
    border-color: var(--v1-orange);
    color: var(--v1-orange);
}

.v1-indband__link:hover i { transform: translateX(4px); }

/* Bant ile fotograf seridi ARASINDAKI bosluk kapatiliyor ve karolarin
   arasindaki ayrik da bandin zemin renginde - ikisi tek bir blok gibi
   okunuyor.

   Karolarin arasindaki aralik bir 'gap' DEGIL: '.v1-band__tile' clip-path
   ile capraz kesiliyor (bkz. home-v1.css '--v1-band-gap'), kesilen yerden
   ARKADAKI zemin goruniyor. Yani araligi renklendirmek icin seridin kendi
   zeminini boyamak yeterli, karolara dokunmak gerekmiyor.

   Secici '.v1-indband + .v1-band': serit /v1 disinda da basiliyor, kural
   yalnizca HEMEN bandin ardindan gelen seride - yani /v1'deki haline -
   uyguluyor. */
.v1-indband + .v1-band {
    margin-top: 0;
    /* Karolar arasi aralik ustundeki '.v1-indband' zeminiyle (#F6F9FC)
       AYNI renk. */
    background: #F6F9FC;
}

/* Dar ekran: sol/sag blok alt alta, buton yine metnin altina geciyor. */
@media (max-width: 767px) {
    .v1-indband__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 0;
        row-gap: 16px;
    }

    .v1-indband__meta {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}

/* SADECE 1366px civari: aciklama + "View All Sectors" butonu
   eyebrow+baslik blogunun ALT kenarina yaslaniyor - ortaya hizali olunca
   basligin biraz ustunde kaliyordu. */
@media (min-width: 1300px) and (max-width: 1399.98px) {
    .v1-indband__inner { align-items: flex-end; }
}

/* Aciklama + buton biraz asagi. 'position:relative +
   top' bandin yuksekligini ve basligin yerini degistirmeden sadece bu blogu
   kaydiriyor. 'transform' KULLANILMADI: blok 'data-v1-reveal' tasiyor ve
   '.v1-ready [data-v1-reveal].is-in' (home-v1.css) 'transform:none' ile
   onu ezerdi. Telefonda (alt alta dizilim) uygulanmiyor. */
@media (min-width: 768px) {
    .v1-indband__meta { position: relative; top: 12px; }
}

/* site/assets/css/home-v1-polish.css */
/* ============================================================================
   /v1 SON POLISH
   ----------------------------------------------------------------------------
   Masaustu genisliklerde (1440 / 1763 / 1794px) hizalama, tipografi ve ikon
   tutarliligi duzeltmeleri. home-v1-surface.css ile AYNI izolasyon: master.blade.php'de
   yalnizca '$heroVersion === 1' iken yukleniyor, /v2-/v4-/v5 indirmiyor.

   Kurallarin neredeyse tamami MASAUSTU (>=992 / >=1200px) - telefon olculeri
   home-v1-mobile.css'te ayrica ayarli, o dosya bu dosyadan SONRA yukleniyor
   ve bu dosyadan etkilenmiyor.
   ============================================================================ */


/* ---- 1) Eyebrow'lar: tek desen -------------------------------------------
   Hero etiketinde (ENGINEERED FLOW CONTROL) de diger butun bolumlerdeki
   kisa turuncu cizgi var; cizgi boylari hepsinde 24px. */
.hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.v1-hero__eyebrow-line {
    display: block;
    flex: none;
    width: 24px;
    height: 2px;
    background: var(--v1-orange);
}

/* Hero icerigi 'calc(100% - 96px)' ile 48px iceriden basliyordu, sayfanin
   geri kalani ('.v1-wrap') 24px - 1392px'ten dar her masaustunde hero
   metni diger bolumlerin sol cizgisinden 24px iceride kaliyordu (olculdu:
   1280'de 48 / 24). <992px'te bu zaten 24px'e cekilmisti. */
@media (min-width: 992px) {
    .hero-v1-page:not(.hero-v2-page) .v1-hero__inner { width: calc(100% - 48px); }
}

.hero-v1-page:not(.hero-v2-page) .v1-whyus__eyebrow-line,
.hero-v1-page:not(.hero-v2-page) .v1-nb__eyebrow-line {
    width: 24px;
}


/* ---- 2) Bolum basliklari: tek olcek ---------------------------------------
   Engineering ve Global Reach basliklari da sayfanin diger butun
   H2'lerinin kullandigi 'h2.v1-h2' olcegini (clamp(26px, 2.5vw, 38px))
   aliyor; kendi kurallariyla 28.8px / 24.5px kalirlardi. Telefondaki
   esitleme home-v1.css'te. */
@media (min-width: 992px) {
    .hero-v1-page:not(.hero-v2-page) h2.v1-globe__title,
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-h2-wrap :is(h1, h2, h3) {
        font-size: clamp(26px, 2.5vw, 38px);
        line-height: 1.18;
    }
}

/* Paragraf sonlarinda tek kalan kelime ("world.", "insights.", "forward.")
   ve "A Complete Range of / Valve Solutions" gibi satir sonunda kalan
   baglaclar. 'pretty' son satiri tek kelime birakmamaya calisiyor,
   'balance' kisa basligin satirlarini esitliyor. Desteklemeyen tarayicida
   hic etkisi yok (eski davranis). */
.hero-v1-page:not(.hero-v2-page) .v1-lead,
.hero-v1-page:not(.hero-v2-page) .v1-rich p,
.hero-v1-page:not(.hero-v2-page) .v1-certband__desc {
    text-wrap: pretty;
}

.hero-v1-page:not(.hero-v2-page) .v1-products h2.v1-h2 {
    text-wrap: balance;
}


/* ---- 3) Urun kartlari: basliklar ayni hizada ------------------------------
   Gate ve Ball vanalarin gorseli asagi insin diye kutularinin UST payi 10px
   daha buyuk (24px, 1366'da 16px). Alt pay ayni kalsa bu iki kartin
   basligi/aciklamasi/oku da 10px asagi kayar (olculdu: 1215 / 1225 /
   1225); alt pay ayni miktarda kucuk: gorseller yerinde, uc baslik ayni
   satirda. */
@media (min-width: 768px) {
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card:nth-child(2) .v1-catalog__img,
    .hero-v1-page:not(.hero-v2-page) .v1-catalog__card:nth-child(3) .v1-catalog__img {
        margin-bottom: 4px;
    }
}

/* "Customized Solutions": dolu siyah disli PNG yerine kontur disli
   (v1-products.blade.php 'glyph'). Boyu yandaki cizgi ikonlarin gorunen
   boyuna yakin. */
.v1-catalog__iconglyph {
    font-size: 34px;
    line-height: 1;
    color: var(--v1-ink);
}


/* ---- 4) Engineering (Ar-Ge) bandi -----------------------------------------
   a) Sol kenar: izgara dolgusu '100vw' ile hesaplaniyordu - 100vw kaydirma
      cubugunu da sayar, '.v1-wrap' ise saymaz. Kaydirma cubuklu her
      tarayicida icerik ~8px (cubugun yarisi) SAGA kayiyordu. '100%'
      (bolumun kendi genisligi, cubuk haric) '.v1-wrap' ile birebir ayni.
   b) Ust/alt pay: eyebrow bolumun ust kenarina, buton alt kenarina
      yapisikti (diger bolumlerde ~70px, burada ~25px). Pay buyutuldu.
   c) Metin kolonu: basliklar tek olcege (38px'e kadar) cikinca
      "Reliable Technology," dar kolona sigmayip uc satira dusuyordu -
      kolon biraz genisledi (1fr/1.6fr -> 1.2fr/1.4fr), ozellik kolonu
      ayni.
   d) Beyaz gecis: duraklar viewport YUZDESIYDI, metin ise sabit genislikte
      bir kabin icinde. Genis ekranda (1794px) metin kolonu gecisin bittigi
      yerin ICINE tasiyor, paragraf muhendisin omzunun uzerinde okunmuyordu.
      Duraklar artik kabin sol kenarina gore (piksel) - her genislikte metin
      kolonunun arkasi ayni beyazlikta. Sag taraf degismedi. */
@media (min-width: 1200px) {
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__grid {
        padding: 0 max(24px, calc((100% - 1296px) / 2));
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.85fr);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-whyus__body {
        padding-top: clamp(28px, 3vw, 44px);
        padding-bottom: clamp(28px, 3vw, 44px);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-whyus__features {
        padding-top: clamp(28px, 3vw, 44px);
        padding-bottom: clamp(28px, 3vw, 44px);
    }

    /* Ozellik ikonlari Global Reach'teki istatistik ikonlariyla (40px) ayni
       boyda. Ikonlar sabit genislikte bir
       kutuda ortalaniyor, dort metin de ayni x'ten basliyor. Kamyon digerlerinden
       genis bir glif - ayni font boyunda daha iri gorundugu icin biraz kucuk.
       Buyuk ikonun yaninda tek satirlik metin ustte kalmasin diye dikeyde
       ortali. */
    .hero-v1-page:not(.hero-v2-page) .v1-whyus__features {
        row-gap: clamp(12px, 1.6vw, 20px);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-feature {
        align-items: center;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-feature__icon {
        justify-content: center;
        width: 40px;
        /* Global Reach ve Surdurulebilirlik ikonlariyla ayni boy - 40px
           (home-v1-surface.css'teki ortak kural). */
        font-size: 40px;
    }

    /* Kamyon genis bir glif - ayni boyda digerlerinden iri gorunur; oran
       korunarak 36/40. */
    .hero-v1-page:not(.hero-v2-page) .v1-feature__icon .la-truck {
        font-size: 36px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-whyus__visual::after {
        background: linear-gradient(90deg,
            #F6F9FC 0,
            #F6F9FC calc(max(24px, (100% - 1296px) / 2) + 200px),
            rgba(246, 249, 252, 0.92) calc(max(24px, (100% - 1296px) / 2) + 330px),
            rgba(246, 249, 252, 0.55) calc(max(24px, (100% - 1296px) / 2) + 450px),
            rgba(246, 249, 252, 0.18) calc(max(24px, (100% - 1296px) / 2) + 540px),
            rgba(246, 249, 252, 0) calc(max(24px, (100% - 1296px) / 2) + 640px),
            rgba(246, 249, 252, 0) 52%,
            rgba(246, 249, 252, 0.18) 58%,
            rgba(246, 249, 252, 0.6) 64%,
            rgba(246, 249, 252, 0.94) 70%,
            #F6F9FC 76%);
    }
}


/* ---- 5) Haber bandi --------------------------------------------------------
   a) Sayfalama kutulari (38px) "All News" butonundan (49px) kisaydi - ayni
      satirda iki farkli yukseklik. Kutular butonla ayni boy.
   b) Alt satir: "All News" satiri kartlardaki "More Information"
      linklerinden ~10px asagida bitiyordu. Sol kolon kartlarla ayni boya
      uzayip buton satiri en alta itiliyor; buton, linklerle ayni dikey
      eksende (linkin ortasi = butonun ortasi). */
@media (min-width: 992px) {
    .hero-v1-page:not(.hero-v2-page) .v1-nb__navbtn {
        width: 48px;
        height: 48px;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-nb .v1-split { align-items: stretch; }

    .hero-v1-page:not(.hero-v2-page) .v1-nb .v1-split__text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-nb__ctarow {
        margin-top: auto;
        padding-top: clamp(22px, 2.5vw, 32px);
        /* Buton ~49px, link ~30px: (49 - 30) / 2 = ~10px asagi tasiyor. */
        margin-bottom: -10px;
    }

    /* Satirin boyunu cogu zaman SOL kolon belirliyor (uc satirlik baslik);
       kartlar o boya uzamazsa linkleri yine yukarida kaliyordu. Kart
       izgarasi kolonun tam boyuna uzuyor, kartin kendi 'margin-top: auto'
       kurali ('.v1-nb-card__link') linki en alta itiyor. */
    .hero-v1-page:not(.hero-v2-page) .v1-nb .v1-split__main {
        display: flex;
        flex-direction: column;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-nb__pages {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .hero-v1-page:not(.hero-v2-page) .v1-nb__page.is-active { flex: 1 1 auto; }
}


/* ---- 6) Global Reach -------------------------------------------------------
   Baslik tek olcege cikinca metin kolonu da biraz genisliyor (yoksa "for a
   Better Tomorrow" uc satira bolunurdu). Harita altyazisi 'right: -10px'
   ile kabin sag kenarindan tasiyordu - kabin icine alindi. */
@media (min-width: 1200px) {
    .hero-v1-page:not(.hero-v2-page) .v1-globe__text {
        flex-basis: clamp(300px, 28vw, 450px);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-globe__mapcaption {
        right: 0;
    }

    /* Harita, metin kolonu genisleyince kucuk kaldi (1440'ta 475 -> 389px).
       Yer istatistiklerden aciliyor: kolon ic paylari daraldi, uzun etiketler
       ("Years of / Experience", "Completed / Project") iki satira iniyor.
       Kazanilan genislik 'flex: 1 1 auto' ile dogrudan haritaya gidiyor;
       bant yuksekligi degismiyor (satirin boyunu metin kolonu belirliyor). */
    .hero-v1-page:not(.hero-v2-page) .v1-globe__stat {
        padding: 0 clamp(10px, 0.9vw, 14px);
    }

    .hero-v1-page:not(.hero-v2-page) .v1-globe__statlabel {
        max-width: 6.5em;
        line-height: 1.35;
    }
}


/* ---- 7) Footer: kurallar footer.css'te ------------------------------------ */

/* site/assets/css/home-v1-mobile.css */
/* ============================================================================
   /v1 MOBIL OLCU STANDARDI
   ----------------------------------------------------------------------------
   Telefon ekraninda bolumlerin her biri kendi boslugu, kendi punto ve kendi
   buton olcusuyle yazilmisti (olcum 390px: bolum arasi 21-73px, eyebrow ->
   baslik 6-14px, alti farkli govde metni, 38/42/48/49px butonlar). Bu dosya
   hepsini tek olcu sistemine indiriyor:

     Sayfa kenari      16px   (sitenin mevcut olcusu; 12px'te kalan header
                               ve Ar-Ge ozellikleri de buna cekildi)
     Bolum boslugu     56px   (her bolum 28px ust/alt dolgu -> iki bolumun
                               icerigi arasi 56px, renkli zeminler dahil)
     Eyebrow           11/16  -> 12px -> H2 26/32 -> 12px -> govde 14/22
     Kucuk metin       12/18
     Kart basligi      14/20
     Bilesen boslugu   16px, buyuk bosluk 24px, izgara boslugu 12px
     Buton             44px yukseklik, 6px kose (sitenin tek buton dili)

   Kose yaricaplari (buton 6px, kart 10px) BILEREK degismedi: ikisi de
   site genelinde zaten kullanilan olcek.

   KAPSAM: yalnizca /v1 ve yalnizca <768px. master.blade.php bu dosyayi
   '$heroVersion === 1' kosuluyla, /v1'in butun diger dosyalarindan SONRA
   yukluyor - ezilen kurallar home-v1.css, home-v1-surface.css ve
   home-v1-industries.css'te. 'body' on eki ozgullugu bir kademe artiriyor,
   boylece sira degisse bile kurallar gecerli kaliyor.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ---- SAYFA KENARI (16px) -------------------------------------------- */
    body.hero-v1-page:not(.hero-v2-page) .header-area .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__features {
        padding-left: 16px;
        padding-right: 16px;
    }


    /* ---- BOLUM BOSLUGU (28px dolgu -> 56px aralik) ---------------------- */
    body.hero-v1-page:not(.hero-v2-page) .v1-products {
        padding-top: 28px;
        padding-bottom: 0;
    }

    /* Uygulamalar bandi (gri): baslik blogu ve sektor seridi TEK gri zemin.
       Aralarinda beyaz serit yok; serit tam genislikte, ilk karo yine
       16px'ten basliyor (scroll-padding ile kaydirma durdugunda da). */
    body.hero-v1-page:not(.hero-v2-page) .v1-indband {
        margin-top: 28px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-indband__inner {
        padding: 28px 0 24px;
        row-gap: 16px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band {
        margin: 0;
        padding: 0 16px 28px;
        scroll-padding-left: 16px;
        background: #F6F9FC;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband {
        padding: 28px 0;
    }

    /* Kalite / Surdurulebilirlik: ayirici cizginin iki yaninda 28px - iki
       yarim, iki ayri bolum gibi 56px aralikla okunuyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__row {
        gap: 28px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__half--sustain {
        padding-top: 28px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-nb {
        padding: 28px 0;
    }

    /* Ar-Ge: fotograf bolumun ust kenarina bitisik kaliyor; alt dolgu
       yoktu, son ozellik satiri Global Reach basligina 21px'e yapisiyordu. */
    body.hero-v1-page:not(.hero-v2-page) .v1-whyus {
        padding-bottom: 28px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__grid {
        row-gap: 24px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__body {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-btnrow {
        margin-top: 16px;
        margin-bottom: 0;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-globe {
        padding: 28px 0;
    }


    /* ---- EYEBROW (11/16, 12px alt bosluk) ------------------------------- */
    /* 'inline-flex' yerine 'flex': satir ici kalinca ebeveynin 26px satir
       yuksekligi eyebrow'un ustune ~10px gorunmez bosluk ekliyordu. */
    body.hero-v1-page:not(.hero-v2-page) .v1-hero__eyebrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-indband__eyebrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__eyebrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb__eyebrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__eyebrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-globe__eyebrow {
        display: flex;
        width: fit-content;
        margin-bottom: 12px;
        font-size: 11px;
        line-height: 16px;
        font-weight: 800;
        letter-spacing: 0.14em;
    }


    /* ---- H2 (26/32, 12px alt bosluk) ------------------------------------ */
    body.hero-v1-page:not(.hero-v2-page) h2.v1-h2,
    body.hero-v1-page:not(.hero-v2-page) h2.v1-indband__title,
    body.hero-v1-page:not(.hero-v2-page) h2.v1-certband__title,
    body.hero-v1-page:not(.hero-v2-page) h2.v1-globe__title,
    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-h2-wrap :is(h1, h2, h3) {
        margin: 0 0 12px;
        font-size: 26px;
        line-height: 32px;
        letter-spacing: -0.01em;
    }


    /* ---- GOVDE METNI (14/22) -------------------------------------------- */
    body.hero-v1-page:not(.hero-v2-page) .v1-hero__desc,
    body.hero-v1-page:not(.hero-v2-page) .v1-lead,
    body.hero-v1-page:not(.hero-v2-page) .v1-globe__text .v1-lead,
    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-rich,
    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__body .v1-rich p {
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-lead {
        margin-bottom: 0;
    }

    /* Metin blogu -> buton satiri: 16px (bilesen boslugu). */
    body.hero-v1-page:not(.hero-v2-page) .v1-products__ctarow,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb__ctarow {
        margin-top: 16px;
        margin-bottom: 0;
    }

    /* Baslik blogu -> kart izgarasi / serit: 24px (buyuk bosluk). */
    body.hero-v1-page:not(.hero-v2-page) .v1-split__text {
        padding-top: 0;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-products .v1-split,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb .v1-split {
        row-gap: 24px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__col--logos,
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__col--icons {
        margin-top: 24px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-globe__stats {
        margin-top: 24px;
    }


    /* ---- KART BASLIGI (14/20) ve KUCUK METIN (12/18) -------------------- */
    body.hero-v1-page:not(.hero-v2-page) .v1-catalog__title,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb-card__title {
        font-size: 14px;
        line-height: 20px;
    }

    /* Ar-Ge ozellik metinleri: Surdurulebilirlik ikon etiketleriyle
       ('.v1-certband__iconlabel') ayni - 12/18, semibold. */
    body.hero-v1-page:not(.hero-v2-page) .v1-feature__text {
        font-weight: 600;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-catalog__desc,
    body.hero-v1-page:not(.hero-v2-page) .v1-feature__text,
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__iconlabel,
    body.hero-v1-page:not(.hero-v2-page) .v1-globe__statlabel,
    body.hero-v1-page:not(.hero-v2-page) .v1-globe__mapcaption,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb-card__date {
        font-size: 12px;
        line-height: 18px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-catalog__iconlabel {
        font-size: 12px;
        line-height: 16px;
    }

    /* Sektor karolari: 9.5px alt yazi telefonda okunmuyordu. 12px'e cikinca
       metin iki satira iniyor - karo bunun icin biraz uzatildi (1.05 -> 0.9). */
    body.hero-v1-page:not(.hero-v2-page) .v1-band__tile,
    body.hero-v1-page:not(.hero-v2-page) .v1-band__tile:first-child,
    body.hero-v1-page:not(.hero-v2-page) .v1-band__tile:last-child {
        aspect-ratio: 0.9 / 1;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band__title {
        font-size: 12px;
        line-height: 16px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band__sub {
        font-size: 12px;
        line-height: 16px;
    }


    /* ---- BUTON (44px, 6px kose) ----------------------------------------- */
    body.hero-v1-page:not(.hero-v2-page) .v1-hero__cta .theme-btn,
    body.hero-v1-page:not(.hero-v2-page) .v1-indband__link,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb__cta,
    body.hero-v1-page:not(.hero-v2-page) .v1-outlinebtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 44px;
        padding: 0 18px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 16px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-indband__link i,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb__cta i,
    body.hero-v1-page:not(.hero-v2-page) .v1-outlinebtn i {
        font-size: 16px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-nb__navbtn {
        width: 44px;
        height: 44px;
        border-radius: 6px;
    }


    /* ---- ESIT HUCRELER -------------------------------------------------- */
    /* Surdurulebilirlik ikonlari: metin genisligine gore 88/105/92px ve
       ortalanmis bir satir yerine tam genislikte uc esit kolon. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__icons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__iconitem {
        min-width: 0;
    }

    /* Sertifika logolari: uc esit hucre, logo hucrenin icinde ortali. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__logogrid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__logo {
        justify-content: center;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__features {
        gap: 16px 12px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-globe__stats {
        gap: 16px 12px;
    }


    /* Ar-Ge: dort ozellik ayni bolumun devami - buton ile arasinda 50px
       (izgara 24 + taban kuraldaki 26px margin) iki ayri bolum gibi
       okunuyordu. 24 + 8 = 32px. */
    body.hero-v1-page:not(.hero-v2-page) .v1-whyus__features {
        margin-top: 8px;
    }

    /* Hero: mevcut dikey karartma aciklama metninin alt satirlarinda
       (%54-62) bitiyordu. Uzerine SADECE sol yarimi hafifce koyulastiran
       ikinci bir katman - vana (sagda) degismiyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-hero__scrim {
        background:
            linear-gradient(90deg,
                rgba(8, 14, 24, 0.35) 0%,
                rgba(8, 14, 24, 0.22) 45%,
                rgba(8, 14, 24, 0) 70%),
            linear-gradient(180deg,
                rgba(8, 14, 24, 0.72) 0%,
                rgba(8, 14, 24, 0.62) 18%,
                rgba(8, 14, 24, 0.46) 40%,
                rgba(8, 14, 24, 0.20) 54%,
                rgba(8, 14, 24, 0) 62%);
    }

    /* Haberler: "Tum Haberler" solda, sayfalama grubu sagda; grup ici 12px. */
    body.hero-v1-page:not(.hero-v2-page) .v1-nb__ctarow {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 12px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-nb__pager {
        gap: 12px;
    }

    /* Kalite: "+13 sertifika daha" ile "Tum Sertifikalar" 12px arayla tek
       uzun metin gibi okunuyordu - biri sola, biri saga yaslaniyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__col--logos {
        justify-content: space-between;
    }

    /* Global Reach ikonlari: sabit kare kutu icinde ortali, Ar-Ge ve
       Surdurulebilirlik ikonlariyla ayni boy (36px). */
    body.hero-v1-page:not(.hero-v2-page) .v1-globe__staticon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        font-size: 36px;
        line-height: 36px;
        margin-bottom: 8px;
    }

    /* Harita: gorselin kendisi soluk (opacity zaten 1) - renk tonu
       degismeden kontrast hafifce artiriliyor. */
    /* 'contrast()' orta gri ustundeki tonlari ACIYOR - noktalar acik gri
       oldugu icin haritayi belirginlestirmez. Parlaklik dusurulerek gri noktalar
       koyulasiyor, turuncu noktalar doygunlukla canli kaliyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-globe__map img {
        filter: brightness(0.68) saturate(1.35);
    }


    /* Kalite: "+13 sertifika daha" ikincil bilgi (regular), "Tum
       Sertifikalar" asil eylem (semibold). */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__more {
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__btn {
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
    }

    /* Surdurulebilirlik etiketleri: iki satirlik yer ayrildi ("Resource
       Efficiency" zaten iki satir; ceviriler uzarsa ikon hizasi kaymasin). */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__iconlabel {
        min-height: 36px;
        line-height: 18px;
        text-align: center;
    }


    /* Urunler: Surgulu vananin gorseli 3px asagida (margin-top 27px,
       home-v1.css) - bu yuzden baslik, aciklama ve ok da Kelebek'e gore 3px
       asagida kaliyor. Gorselin yeri degismiyor, alt
       boslugu 3px azaltilarak metin satiri Kelebek'le ayni hizaya geliyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-catalog__card:nth-child(2) .v1-catalog__img {
        margin-bottom: 7px;
    }

    /* Haberler seridi: yandaki kartin basligi ekran kenarinda kesik harfle
       bitiyordu ("We Took Our P..."). Seridin gorunen sag parcasi (karttan
       sonraki %26) yumusakca soluyor; kaydirma sona gelince (home-v1.js
       '.is-end') solma kalkiyor, son kart tam gorunuyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-nb__page.is-active {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(74% + 2px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(74% + 2px), transparent 100%);
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-nb__page.is-active.is-end {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* Kalite: "+13 sertifika daha" bir link degil ama turuncu oldugu icin
       "Tum Sertifikalar" ile yarisan ikinci bir link gibi okunuyordu -
       govde metni rengine donuyor, tek eylem sagdaki link kaliyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__more {
        color: var(--v1-body);
    }

    /* Kalite: sola/saga yaslanan sayac ve link sayfa kenarina (16px)
       dayaniyordu; logolar hucrelerinde ortali oldugu icin satir logo
       sirasindan genis gorunuyordu. Iki uc 20px iceri (8-12px yetmiyor).
       360px telefonda tek satirda
       kalsin diye ikisi arasindaki asgari bosluk 12 -> 4px (space-between
       zaten aralarini acik tutuyor). Kolonun kendisine dolgu verilmedi:
       logogrid de ayni flex kapsayicida, o da daralirdi. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__more {
        margin-left: 20px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__btn {
        margin-right: 20px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__col--logos {
        column-gap: 4px;
    }

    /* Sayac ve linkin ustune bosluk. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__more,
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__btn {
        margin-top: 16px;
    }

    /* Sertifika logolari: uc esit hucrede genis TUV logosu (en/boy 3.81)
       hucreye sigmak icin kuculuyor, DNV (2.33) ve WRAS (2.24) ise 34px
       tam boyda kaliyordu. Kolonlar logolarin kendi en/boy oranina gore
       bolununce ucu de ayni yukseklikte gorunuyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__logogrid {
        grid-template-columns: minmax(0, 2.33fr) minmax(0, 3.81fr) minmax(0, 2.24fr);
    }

    /* IKON OLCEGI: sayfada alti farkli ikon
       boyu (17/22/24/30/36/40px) ve dort farkli ok boyu (12/14/16/17px)
       vardi. Uc ikon boyu, iki ok boyu:
         Kucuk 20px  sektor karolari
         Orta  24px  footer iletisim (footer.css)
         Buyuk 36px  Ar-Ge ozellikleri, Surdurulebilirlik, Global Reach
                     sayilari
         Ok    16px  buton ve linklerde, 14px kart iclerinde
       Check/Control PNG gorselleri (36px) font ikonu degil, bu olcege
       dahil edilmedi. */
    body.hero-v1-page:not(.hero-v2-page) .v1-band__icon {
        font-size: 20px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-feature__icon,
    body.hero-v1-page:not(.hero-v2-page) .v1-certband__iconglyph {
        font-size: 36px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-catalog__iconarrow,
    body.hero-v1-page:not(.hero-v2-page) .v1-nb-card__link i {
        font-size: 14px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-certband__btn i {
        font-size: 16px;
    }

    /* Sektor seridi: haber seridiyle AYNI geometri - %74 genislik, 14px aralik, 16:10
       oran ('.v1-nb-card__figure') - ve ayni sag kenar solmasi (seridin
       sonunda home-v1.js '.is-end' ile kalkiyor). Seridin 16px yan dolgusu
       oldugu icin solma karonun bittigi yerden (%74 + ~6px) basliyor. */
    body.hero-v1-page:not(.hero-v2-page) .v1-band {
        gap: 14px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(74% + 6px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(74% + 6px), transparent 100%);
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band.is-end {
        -webkit-mask-image: none;
        mask-image: none;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band__tile,
    body.hero-v1-page:not(.hero-v2-page) .v1-band__tile:first-child,
    body.hero-v1-page:not(.hero-v2-page) .v1-band__tile:last-child {
        flex: 0 0 74%;
        aspect-ratio: 16 / 10;
        padding: 16px;
    }

    /* Karo buyuyunce yazilar da olcekteki karsiliklarina cikiyor: baslik
       kart basligi (14/20), alt yazi kucuk metin (12/18). */
    body.hero-v1-page:not(.hero-v2-page) .v1-band__head {
        gap: 8px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band__title {
        font-size: 14px;
        line-height: 20px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band__sub {
        font-size: 12px;
        line-height: 18px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-band__rule {
        width: 24px;
        margin-top: 10px;
    }

    /* Karartma: buyuyen karoda yazinin durdugu alt yari (%45 ve asagisi)
       karisik fotograflarda (Oil&Gas) da yeterince koyu olmali. Ust kisim
       acik, gecis erken basliyor ve dipte 0.88. */
    body.hero-v1-page:not(.hero-v2-page) .v1-band__scrim {
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.38) 45%,
            rgba(0, 0, 0, 0.88) 100%);
    }

    /* Haber kartlari: fotograf kosesi 8px ile sayfadaki tek disarida kalan
       deger (urun kartlari ve sektor karolari 10px); rozet 11.5px ile
       olcegin (kucuk metin 12px) altindaydi. */
    body.hero-v1-page:not(.hero-v2-page) .v1-nb-card__figure {
        border-radius: 10px;
    }

    body.hero-v1-page:not(.hero-v2-page) .v1-nb-card__badge {
        font-size: 12px;
    }
}

/* site/assets/css/v5-search.css */
/* ============================================================================
   /v5 arama paneli - header'in altindan inen katalog paneli.
   28 Agu 2026: GECICI (bkz. routes/web.php 'home-variant'). Bu dosya SADECE
   /v5 adresinde yukleniyor (master.blade.php'de $heroVersion === 5 kosulu),
   bu yuzden gercek anasayfa ve /v1-/v4 hic etkilenmiyor - onlarda buyutec
   eskisi gibi tam ekran '.search-popup'i aciyor.

   Tasarim kararlari:
   - Renkler home-v5.css ile AYNI degiskenlerden: turuncu #FF4100, antrasit
     #58595B, gri zemin #F4F5F7, hairline rgba(24,29,78,.08). Yeni marka rengi
     yok, yeni yazi tipi yok (site Arial'da kaliyor).
   - Kose yariCAPI 0. Kart yuzeyleri bu projede keskin; yuvarlaklik sadece
     kucuk isaretlerde (sayac rozetleri de degil - onlar da duz).
   - Panelin ust kenarindaki 2px turuncu cizgi, panelin header'dan CIKTIGINI
     anlatan tek suslemedir; ayni cizgi hero'nun turuncu kirilimiyle ayni renk.
   - IC KAYDIRMA YOK: panel her zaman ekrana sigmali. Sag sutun en fazla 10
     satir gosteriyor ve iki kolona bolunuyor; kisa ekranlarda olculer
     kuculuyor, kaydirma cubugu eklenmiyor.
   - Dis kutuphane yok: acilis/kapanis CSS gecisi, davranis v5-search.js.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Header'daki buyutec
   -------------------------------------------------------------------------- */

/* /v5'te ikonun sinifi '.search-trigger' DEGIL '.v5-search-trigger': main.js
   yalnizca '.search-trigger'e baglandigi icin, sinif ayrilmasa ayni tiklama hem
   eski tam ekran pop-up'i hem bu paneli acardi. Sinif degisince style.css'teki
   olculer de gelmedigi icin ayni olculer burada tekrarlaniyor (font-size 24px,
   margin-right 18px, 991px altinda gizli) - gorunum diger sayfalarla ayni. */
.header-right .v5-search-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.header-right .v5-search-trigger i {
    font-size: 24px;
    margin-right: 18px;
    position: relative;
    top: 2px;
    color: var(--dikkan-antrasit-color, #58595B);
    transition: color 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-right .v5-search-trigger:hover i,
.header-right .v5-search-trigger:focus-visible i {
    color: var(--dikkan-color, #FF4100);
}

@media (max-width: 991px) {
    .header-right .v5-search-trigger { display: none; }
}

/* --------------------------------------------------------------------------
   Kabuk
   -------------------------------------------------------------------------- */

.v5-search {
    --v5s-orange: var(--dikkan-color, #FF4100);
    --v5s-ink: #4a4a49;
    --v5s-body: var(--dikkan-antrasit-color, #58595B);
    --v5s-paper: #fff;
    --v5s-paper-2: #F4F5F7;
    --v5s-line: rgba(24, 29, 78, 0.08);
    --v5s-line-2: rgba(24, 29, 78, 0.16);
    --v5s-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* JS acilista header'in alt kenarindan hesaplayip yaziyor; header sticky
       olsun olmasin panel her zaman header'in HEMEN altindan baslar. */
    --v5s-top: 100px;

    position: fixed;
    inset: 0;
    z-index: 1001;
    visibility: hidden;
    pointer-events: none;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

/* Kok elemanin kendisi HICBIR ZAMAN pointer-events:auto olmaz (asagida
   sadece karartma ve panel alir). Kok 'inset: 0' ile TUM ekrani (header
   satiri dahil) kapliyor; eskiden panel acikken kok da pointer-events:auto
   oluyordu ve header'in ustune GORUNMEZ bir katman biniyordu - buyutece
   ikinci tiklama bu katmana çarpip hicbir seye ulasmiyordu, panel
   kapanmiyordu (6 Eyl 2026, Gizem'in bildirdigi hata). Karartma ve panel
   zaten 'top: var(--v5s-top)' ile header'in ALTINDAN basladigi icin bu
   degisiklik header seridini her zaman tiklanabilir birakiyor. */
.v5-search.is-open {
    visibility: visible;
}

/* --------------------------------------------------------------------------
   Karartma
   -------------------------------------------------------------------------- */

.v5-search__backdrop {
    position: fixed;
    top: var(--v5s-top);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 13, 38, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--v5s-ease);
}

.v5-search.is-open .v5-search__backdrop { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

/* Genislik hero ve /v5 bolumleriyle BIREBIR ayni izgarada (.v5-wrap ile ayni
   olcu), boylece panel sayfanin ustune yapistirilmis yabanci bir kutu gibi
   durmuyor, ayni kolonlarda oturuyor. */
.v5-search__panel {
    position: absolute;
    top: var(--v5s-top);
    left: 50%;
    transform: translate(-50%, -12px);
    width: calc(100% - 24px);
    max-width: 1296px;
    background: var(--v5s-paper-2);
    border: 1px solid var(--v5s-line);
    border-top: 2px solid var(--v5s-orange);
    box-shadow: 0 24px 60px rgba(11, 13, 38, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--v5s-ease), transform 0.45s var(--v5s-ease);
}

.v5-search.is-open .v5-search__panel {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Arama satiri
   -------------------------------------------------------------------------- */

.v5-search__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--v5s-paper-2);
}

/* Ikon input'un ICINDE duruyor: sol konum = barin ic bosluğu (20px) + input'un
   kendi ic bosluğu (18px). Tiklamayi yutmamasi icin pointer-events kapali. */
.v5-search__bar-icon {
    position: absolute;
    left: 38px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--v5s-body);
    pointer-events: none;
    transition: color 0.25s var(--v5s-ease);
}

.v5-search__input {
    flex: 1 1 auto;
    height: 56px;
    padding: 0 20px 0 52px;
    border: 1px solid var(--v5s-line);
    background: var(--v5s-paper);
    color: var(--v5s-ink);
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 56px;
    outline: none;
    transition: border-color 0.25s var(--v5s-ease), box-shadow 0.25s var(--v5s-ease);
}

.v5-search__input::placeholder {
    color: #9a9c9f;
    opacity: 1;
}

.v5-search__input:focus {
    border-color: var(--v5s-orange);
    box-shadow: 0 0 0 1px var(--v5s-orange);
}

.v5-search__bar:focus-within .v5-search__bar-icon { color: var(--v5s-orange); }

/* Tarayicinin type=search icin bastigi kendi temizleme carpisi: bizim kapatma
   dugmemizle yan yana iki carpi cikiyordu. */
.v5-search__input::-webkit-search-cancel-button { display: none; }

.v5-search__close {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--v5s-line);
    background: var(--v5s-paper);
    color: var(--v5s-ink);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s var(--v5s-ease), color 0.25s var(--v5s-ease), border-color 0.25s var(--v5s-ease);
}

.v5-search__close:hover {
    background: var(--v5s-orange);
    border-color: var(--v5s-orange);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Govde: sol sekmeler + sag liste
   -------------------------------------------------------------------------- */

.v5-search__body {
    display: grid;
    grid-template-columns: 268px 1fr;
    gap: 24px;
    padding: 4px 20px 20px;
}

.v5-search__tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v5-search__tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    height: 52px;
    border: 0;
    background: transparent;
    color: var(--v5s-body);
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.25s var(--v5s-ease), color 0.25s var(--v5s-ease), box-shadow 0.25s var(--v5s-ease);
}

.v5-search__tab i {
    font-size: 20px;
    color: var(--v5s-body);
    transition: color 0.25s var(--v5s-ease);
}

/* Secili sekme ile ustune gelinen sekme AYNI gorunur (28 Agu 2026 karari):
   once aktif sekmede turuncu bir kenar cizgisi ve kalin yazi vardi, tiklama
   hissi hover'dan kopuyordu. Iki durum tek kurala baglandi ki sekmeye basmak
   "uzerine geldigim sey secildi" hissini bozmadan calissin. */
.v5-search__tab:hover,
.v5-search__tab.is-active {
    background: rgba(255, 255, 255, 0.6);
    color: var(--v5s-ink);
}

.v5-search__panes {
    position: relative;
    min-height: 264px;
}

.v5-search__pane {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 32px;
    align-content: start;
}

.v5-search__pane.is-active { display: grid; }

/* --------------------------------------------------------------------------
   Satirlar
   -------------------------------------------------------------------------- */

.v5-search__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    min-height: 52px;
    color: var(--v5s-ink);
    text-decoration: none;
    transition: background 0.2s var(--v5s-ease), box-shadow 0.2s var(--v5s-ease);
}

/* Sekmelerdeki karar burada da gecerli: turuncu kenar cizgisi yok, satirin
   ustune gelindiginde yalnizca zemin aciliyor ve baslik turuncuya donuyor. */
.v5-search__row:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--v5s-ink);
}

.v5-search__row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v5-search__row-label {
    font-size: 14.5px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s var(--v5s-ease);
}

.v5-search__row:hover .v5-search__row-label { color: var(--v5s-orange); }

/* Vana tipi satirlarinda sektor adi: ayni ad iki sektorde birden gecebiliyor,
   ayirt edici bilgi bu. */
.v5-search__row-meta {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dikkan-antrasit-color, #58595B);
}

.v5-search__row-count {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--v5s-body);
    font-variant-numeric: tabular-nums;
}

/* Urun sonuclarindaki Dikkan figur kodu. */
.v5-search__row-figure {
    flex: 0 0 auto;
    padding: 4px 8px;
    background: rgba(255, 65, 0, 0.08);
    color: var(--v5s-orange);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.06em;
}

/* Aranıyor / sonuc yok / hata: tek satirlik bilgi, iki kolonu birden kaplar. */
.v5-search__note {
    grid-column: 1 / -1;
    padding: 18px 14px;
    font-size: 14px;
    color: var(--v5s-body);
}

.v5-search__more {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--v5s-orange);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.v5-search__more i { transition: transform 0.25s var(--v5s-ease); }
.v5-search__more:hover { color: var(--v5s-orange); }
.v5-search__more:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Alt serit
   -------------------------------------------------------------------------- */

.v5-search__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--v5s-line);
    background: var(--v5s-paper);
}

.v5-search__hint {
    font-size: 12.5px;
    color: var(--v5s-body);
}

.v5-search__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--v5s-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s var(--v5s-ease);
}

.v5-search__all i {
    color: var(--v5s-orange);
    transition: transform 0.25s var(--v5s-ease);
}

.v5-search__all:hover { color: var(--v5s-orange); }
.v5-search__all:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Kucuk ekranlar
   -------------------------------------------------------------------------- */

/* Buyutec ikonu style.css'te 991px altinda gizli, yani panel pratikte masaustu
   ekranlarda aciliyor. Yine de dar/kisa pencerelerde bozulmasin diye olculer
   asagi cekiliyor - IC KAYDIRMA EKLENMIYOR, icerik kucuk kalarak sigiyor. */
@media (max-width: 1100px) {
    .v5-search__body { grid-template-columns: 220px 1fr; }
    .v5-search__pane { grid-template-columns: minmax(0, 1fr); }
    .v5-search__panes { min-height: 0; }
}

@media (max-width: 767px) {
    .v5-search__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .v5-search__tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
    }

    .v5-search__tab { height: 44px; }
    .v5-search__tab span { display: none; }
    .v5-search__tab i { font-size: 22px; }
}

@media (max-height: 760px) {
    .v5-search__bar { padding: 12px 14px; }
    .v5-search__input { height: 48px; line-height: 48px; }
    .v5-search__close { width: 48px; height: 48px; }
    .v5-search__body { padding: 0 14px 12px; }
    .v5-search__tab { height: 44px; }
    .v5-search__row { min-height: 44px; }
    .v5-search__panes { min-height: 220px; }
    .v5-search__foot { padding: 10px 20px; }
}