/*
 * "Kendin tasarla" ekrani (site/product/three-d.blade.php).
 *
 * Marka renkleri style.css'teki :root degiskenlerinden gelir
 * (--dikkan-color, --dikkan-antrasit-color); burada yeniden tanimlanmaz ki
 * marka rengi tek yerden degistirilebilsin.
 *
 * Yuzey dili: ekranin tamami gri-beyaz bir studyo gradyani, urun onun
 * uzerinde duruyor; secim paneli ise gradyanin uzerinde YUZEN beyaz bir yuzey
 * (masaustunde mutlak konumlu, golgeli). Panelin ici 1px yatay hairline'larla
 * bolunmus bolumler.
 * Yaricap yok (urun listesindeki .all_products_single kartlari da yaricapsiz),
 * vurgu turuncu ve ekranda TEK bir yerde: secili secenegin konturu.
 * Secenekler burada pill DEGIL tam genislikte satir - gerekcesi
 * '.configurator-option' basinda yaziyor. Ortak bir dosyaya cikarilmadi cunku
 * iki ekranin duzeni farkli; ayni kalmasi gereken degerler buraya not edildi.
 */

/*
 * Kart kullanilmiyor: bes-alti esit agirlikta kutu hiyerarsi kurmuyor (gri
 * dolgulu kartlar da urun renderlarini soluklastiriyor). Ayrimi zemin ve
 * baslik boyutu tasiyor.
 *
 * Dikey dolgu burada DEGIL 'configurator-viewport' icinde: ekrana yapisan
 * katman tam 100vh olmali, sayfa dolgusu o hesabi bozardi.
 */
.configurator-page {
    background: #fff;
}

/*
 * YUZEY DILI: KART YOK.
 *
 * Sahne, ozet seridi, secim gruplari ve ozet beyaz zemin + konturlu birer kart
 * olsa hepsi ayni agirlikta olur, goz nereye bakacagini bilemez; beyaz kart
 * beyaz sayfada yalnizca konturuyla var olur. Bu yuzden panelin ici yalnizca
 * 1px yatay cizgilerle bolunmus bolumler - arac konfiguratoru duzeni
 * (Polestar): cerceve yok, yalnizca hairline ayrac ve tek bir turuncu vurgu.
 */

/*
 * Paneldeki tiklanabilir ogelerin cogu <button>: tarayici bunlara kendi
 * sistem fontunu verir, sayfanin geri kalanindan farkli gorunurlerdi.
 */
.configurator-option,
.configurator-reset,
.configurator-toggle,
.configurator-gate__cta,
.configurator-resume__load,
.configurator-resume__close {
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* -------------------------------------------------------------- baslik */

.configurator-head {
    margin-bottom: 26px;
}

.configurator-head__title {
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dikkan-color);
    margin: 0 0 10px;
}

.configurator-head__desc {
    max-width: 720px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #6b6c6f;
    margin: 0;
}

/*
 * KONFIGURATOR HALINDE BASLIK KUCUK.
 *
 * Sablonda tek bir h1 var (bkz. tests/Unit/SiteTemplatesSingleH1Test) ve iki
 * durumda da ayni yerden basiliyor; degisen yalnizca bicim. Konfiguratorde
 * ekran 100vh'e kilitli oldugu icin dikeydeki her piksel secim bolumlerinden
 * goturuluyor: normal boyutta baslik + aciklama ~150px alir ve panelin son
 * bolumleri goruntunun disinda kalir. Kucuk halde ~30px; aciklama cumlesi
 * panelin tepesinde.
 *
 * Metin ayni, yalnizca bicim kucuk - sayfanin basligi hala "Kendin Tasarla".
 */
.configurator-head.is-compact {
    margin-bottom: 14px;
}

.configurator-head.is-compact .configurator-head__title {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin: 0;
}

/* ------------------------------------------------- erisim uyarisi (gate) */

/* Sitedeki mevcut desen: urun detayinda onaysiz uyeye gosterilen turuncu
   bilgi kutusu. Ayni renk ve ayni dil anahtarlari kullaniliyor. */
.configurator-gate {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--dikkan-color);
    color: #fff;
    padding: 26px 28px;
    max-width: 720px;
}

.configurator-gate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: rgba(255, 255, 255, .18);
    font-size: 22px;
}

.configurator-gate__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 6px;
}

.configurator-gate__text {
    font-size: 15.5px;
    line-height: 1.6;
    color: #fff;
    margin: 0;
}

.configurator-gate__cta {
    margin-top: 16px;
    background: #fff;
    color: var(--dikkan-color);
    border: none;
    padding: 11px 22px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.configurator-gate__cta:hover {
    background: rgba(255, 255, 255, .9);
}

/* --------------------------------------------------------------- duzen */

/*
 * Iki kolon: solda 3D sahne, sagda secenek paneli. Panel genisligi sabit
 * degil ama 400px'i asmiyor: secim satirlari solda ad, sagda deger seklinde
 * okunuyor, kolon genisledikce iki uc arasindaki bosluk buyuyup satiri iki
 * ayri parca gibi gostermeye basliyor.
 */
/* Kolonlar tam yukseklige uzar (stretch): sahne kartinin ve panelin
   'height: 100%' hesabi buna dayaniyor. 'start' olsa satir yuksekligi icerige
   gore hesaplanip 'height: 100%' dairesel kalirdi. Tek kolona dusen dar
   ekranda geri 'start' oluyor (bkz. medya sorgusu).

   Kolon araligi 0: iki kolon bitisik, ayrimi panelin sol konturu tasiyor.

   Panel genisligi ekranla birlikte buyuyor: sabit bir deger 2K/4K monitorde
   kenarda ince bir serit gibi kalir. Alt sinir 440px (olcu satirlarinda
   siparis kodu, or. 10.147.RG.PN16.015, alt satira dusmesin), ust sinir
   680px: paneldeki punto sabit oldugu icin daha genisi satirlari asiri
   seyreltiyor.

   Masaustunde IKI KOLON YOK - sahne ekranin tamamini kapliyor, panel onun
   uzerinde yuzuyor (bkz. asagidaki yuzen panel bolumu). Izgara tanimi yine
   de duruyor: 992px altinda ve kurgu kapaliyken ('is-static' /
   'is-scroll-fallback') duzen tek/iki kolon akiyor ve panel akista yerini
   bu tanimdan aliyor.

   Panel olculeri degiskende: hem panelin kendisi hem de modelin
   ortalanacagi bosluk ayni degeri kullaniyor, ikisi birbirinden kaymasin.
   '--cfg-panel-space' = panelin sagda goturdugu toplam yer (panel + iki
   kenar boslugu); model/gorsel bu kadar dar bir alanda ortalaniyor. */
.configurator-layout {
    --cfg-panel-width: clamp(440px, 28vw, 680px);
    --cfg-panel-gap: 28px;
    --cfg-panel-space: calc(var(--cfg-panel-width) + var(--cfg-panel-gap) * 2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--cfg-panel-width));
    gap: 0;
    align-items: stretch;
}

/*
 * ---------------------------------------------------- kaydirma kurgusu
 *
 * Baslik + sahne + panel BIRLIKTE ekrana yapisiyor ve sayfa
 * kaydirmasi yalnizca sag kolonun icerigini yukari cekiyor. Yani ekran sabit
 * duruyor, 3D model hic yerinden oynamiyor.
 *
 * 'configurator-scroll' yuksekligi JS tarafindan yaziliyor:
 * 100dvh + (bastaki bekleme + panel tasmasi + sondaki bekleme). Bu bosluk,
 * yapisan katmanin ekranda kalabilecegi mesafeyi belirliyor; panel ortadaki
 * tasma kadar cekiliyor. Kartlar bitince sayfa normal akisina donup footer'a
 * gidiyor.
 *
 * BASTAKI VE SONDAKI BEKLEME (kapi): bolum ekrana dokundugu an
 * liste cekilmeye baslamiyor, once bolumun tamami cerceveli halde bir sure
 * kimildamadan duruyor; son karttan sonra da yine cerceveli bekleyip ancak
 * ondan sonra serbest kaliyor. Boylece kullanici bolumu hicbir zaman yarim
 * gormuyor. Beklemenin miktari JS'te: SECTION_HOLD.
 *
 * Baslik bu katmanin ICINDE ve kolonlar tam yukseklik (stretch), yani olcum
 * icerikten bagimsiz. Baslik disarida kalip icerik 'align-items: center' ile
 * ortalansa panel yuksekligi her secimde degistigi icin olcum de degisir,
 * kaydirma oynak olurdu.
 */
.configurator-scroll {
    position: relative;
}

/*
 * YUKSEKLIK TAM EKRAN. Katman 'top: 0'a yapistigi icin ekrandan uzun bir
 * deger (or. 115vh) alttaki kismi KALICI olarak katlanin altinda birakir;
 * panelin dibindeki etek ve tepesindeki band hicbir kaydirma konumunda tam
 * gorunmez. Bolum ekranin tam boyu: yapistigi an TAMAMI
 * cerceveli oluyor, JS'teki kapi da tam bu varsayima dayaniyor
 * (bkz. product-configurator.js, SECTION_HOLD).
 *
 * 'dvh' once yazilamaz: destegi olmayan tarayici satiri atlar, bu yuzden
 * 'vh' geri dusum olarak ustte duruyor.
 */
.configurator-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    padding: 20px 0 20px;
}

/*
 * STUDYO ZEMINI: EKRANIN TAMAMI tek bir gri-beyaz gradyan; panel bu zeminin
 * uzerinde yuzuyor.
 *
 * Gradyan neden SAHNEDE degil VIEWPORT'ta: baslik ('.configurator-head')
 * sahnenin kardesi, sahnenin disinda. Zemin sahneye verilseydi basligin
 * arkasi beyaz kalir, gradyanin ustunde yatay bir beyaz bant olusurdu.
 *
 * Iki katman: ustteki dogrusal katman yalnizca ALT KENARI koyultuyor (zemin
 * hissi), alttaki radyal katman modelin arkasinda spot isik birakiyor. Ton
 * araligi bilerek dar (#fff -> #e4e5e9): urun renderlarinin kendi beyaz
 * zemini var, koyu bir gradyan modelin kenarinda kesik gibi gorunuyor.
 *
 * Erisim uyarisi halinde ('is-static') zemin YOK: orada sahne de panel de
 * yok, ekranda tek bir metin kutusu duruyor.
 */
.configurator-scroll:not(.is-static) .configurator-viewport {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(203, 205, 211, .5) 100%),
        radial-gradient(118% 88% at 50% 40%, #ffffff 0%, #f8f8fa 36%, #eeeff2 70%, #e4e5e9 100%);
}

.configurator-viewport > .container {
    /* Pay kucuk: katman ekrana oturdugu icin bu bosluk gorunur ve buyuk bir
       deger (or. 80px) kartlardan hakkiyla yer goturur. */
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* min-height: 0 olmadan flex cocuk icerigi kadar buyuyup 100vh'i asiyor
       ve kirpma yerine sayfa kaydirmasi olusuyor. */
    min-height: 0;
}

/*
 * KONFIGURATOR TAM GENISLIK.
 *
 * Sitenin '.container' kalibi (max-width: 1200px, bkz. style.css) 1440px'lik
 * bir ekranda sag ve solda ~120px'lik beyaz seritler birakir; sahne ise
 * ekranin kenarina kadar gitmeli. Kalip yalnizca BU ekranda ve yalnizca
 * konfigurator halinde bozuluyor; erisim uyarisi hali ('is-static') tek bir
 * metin kutusu oldugu icin sitenin normal genisliginde kaliyor.
 *
 * Ustteki header'a dokunulmuyor: o kendi container'inda.
 */
/* Yalnizca iki kolonlu (masaustu) halde: 992px altinda duzen tek kolona
   dusuyor ve panelin yan dolgusunu container'in kendisi tasiyor - orada
   kalibi bozmak metni ekranin kenarina yapistirirdi. */
@media (min-width: 992px) {
    .configurator-scroll:not(.is-static) .configurator-viewport > .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    /* Tam genislikte baslik ekranin sol kenarina yapisirdi; dolgu, sahnenin
       uzerinde yuzen urun adiyla ('.configurator-stage__title', left: 28px)
       ayni hizada olsun diye 28px. */
    .configurator-scroll:not(.is-static) .configurator-head {
        padding-left: 28px;
        padding-right: 28px;
    }
}

.configurator-head {
    flex: 0 0 auto;
}

.configurator-layout {
    flex: 1 1 auto;
    min-height: 0;
}

/* Erisim uyarisi halinde (panel yok) yapisma kapali: sayfa normal aksin. */
.configurator-scroll.is-static .configurator-viewport,
.configurator-scroll.is-scroll-fallback .configurator-viewport {
    position: static;
    height: auto;
    overflow: visible;
    padding: 45px 0 80px;
}

.configurator-scroll.is-static,
.configurator-scroll.is-scroll-fallback {
    height: auto !important;
}

/* Kurgu kapali oldugunda (sticky desteklenmiyor ya da erisim uyarisi hali)
   duzen mobil davranisina doner: sahne kolonun tamamini kaplamaya calismaz,
   panel de kirpmaz. Aksi halde 'height: 100%' sayfa boyu kadar uzuyor. */
.is-scroll-fallback .configurator-panel__inner,
.is-static .configurator-panel__inner {
    transform: none !important;
}

.is-scroll-fallback .configurator-layout,
.is-static .configurator-layout {
    align-items: start;
}

.is-scroll-fallback .configurator-stage,
.is-static .configurator-stage {
    height: auto;
    display: block;
}

.is-scroll-fallback .configurator-stage__frame,
.is-static .configurator-stage__frame {
    flex: none;
    aspect-ratio: 4 / 3;
}

.is-scroll-fallback .configurator-panel,
.is-static .configurator-panel {
    height: auto;
    overflow: visible;
}

/* Kirpan katman da serbest birakiliyor; aksi halde yuksekligi 0'a dusup
   bolumler hic gorunmuyordu (panel artik dikey bir flex yigini). */
.is-scroll-fallback .configurator-panel__scroll,
.is-static .configurator-panel__scroll {
    overflow: visible;
}

/*
 * Ekran kilitliyken sitenin yapiskan navbar'i gizleniyor.
 *
 * main.js, 400px'den sonra '#header-sticky' uzerine 'header-sticky' sinifini
 * ekliyor ve o sinif 'position: fixed' - yani bolum ekrana yapisikken beyaz
 * bir navbar tepeye biniyordu. Sinifi JS ile SILMIYORUZ (main.js her kaydirma
 * olayinda yeniden ekliyor, iki taraf birbiriyle yarisirdi); yalnizca bu
 * sayfada ve yalnizca kilit suresince gorunmez yapiliyor.
 *
 * Kilit bitince (kartlar tukendi ya da yukari donuldu) navbar geri geliyor.
 */
body.configurator-pinned #header-sticky.header-sticky {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

/*
 * Sticky bir sekilde pinlenemezse (ornegin bir ust katmana overflow eklenirse)
 * ekran bozuk gorunmesin: JS bu sinifi ekliyor, panel kendi kaydirma alanina
 * donuyor ve sayfa normal akiyor.
 */
.configurator-scroll.is-scroll-fallback {
    height: auto !important;
}

.is-scroll-fallback .configurator-viewport {
    position: static;
    height: auto;
    overflow: visible;
}

.is-scroll-fallback .configurator-panel {
    transform: none !important;
}

/* ---------------------------------------------------------- 3D sahnesi */

/* Sahnenin kendi zemini ve dolgusu YOK. Zemin ekranin tamaminin: gri-beyaz
   gradyan '.configurator-viewport' uzerinde (bkz. studyo zemini notu). Sahne
   saydam kalirsa gradyan kesintisiz gorunur; dolgu birakilsa gradyanin
   ortasinda duz bir dikdortgen olusurdu. Dolgu olmadigi icin model/gorsel
   kenara kadar tasiyor (~%15 daha buyuk).

   'position: sticky' burada YOK: bolumun tamami ekrana yapisiyor
   ('.configurator-viewport'). Sahne kolonun tam yuksekligini kaplar ki model
   ekranin ortasinda sabit dursun. Baslik ve model ipucu bu yuzey uzerinde
   yuzuyor, konumlandirma referansi burasi. */
.configurator-stage {
    position: relative;
    background: transparent;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/*
 * Sabit yukseklik yerine oran: model-viewer yuzde yukseklikle calismiyor
 * (icerigi yok, yuksekligini kendisi belirlemiyor), bu yuzden cerceve oranla
 * kuruluyor ve bilesen cerceveyi kapliyor.
 */
/* Gorsel alaninin kendi zemini YOK: beyaz bir zemin, gri tonlu zeminin
   ortasinda beyaz bir dikdortgen olusturur - kart geri gelmis gibi.

   Yukseklik SABIT ORAN DEGIL, kalan bosluk kadar (flex: 1): ekrana yapisan
   kolonda oran vermek, uzun ekranlarda modelin altinda bos alan
   birakir. Mobilde oran geri geliyor (bkz. medya sorgusu). */
.configurator-stage__frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: transparent;
}

.configurator-stage__frame model-viewer,
.configurator-stage__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* model-viewer kendi zeminini ve poster zeminini varsayilan olarak BEYAZ
   boyuyor; bu, gri tonlu alanin ortasinda beyaz bir dikdortgen birakir.
   Ikisi de saydam ki sahnenin zemini modelin arkasinda kalsin. */
.configurator-stage__frame model-viewer {
    background-color: transparent;
    --poster-color: transparent;
}

/* Urun renderlari kirpilamaz (vana govdesi kesilir), o yuzden 'contain'. */
.configurator-stage__frame img {
    object-fit: contain;
}

/* Cozulen urunun adi: sahnenin sol ust kosesinde, modelin altyazisi gibi.
   Ozet etegine sigmiyordu (etek sabit yukseklikte) ve zaten modelin kimligi.
   'pointer-events: none': modelin uzerinde duruyor, fareyi yakalayip
   dondurmeyi engellememeli. */
.configurator-stage__title {
    position: absolute;
    top: 26px;
    left: 28px;
    right: 28px;
    z-index: 2;
    font-size: 13.5px;
    line-height: 1.4;
    color: #8b8c90;
    margin: 0;
    text-transform: capitalize;
    pointer-events: none;
}

.configurator-stage__title:empty {
    display: none;
}

/* Model ipucu ("suruklerek dondurun" vb.) sahnenin ALTINDA degil,
   sahnenin sol alt kosesinde yuzen beyaz bir serit. Akistan cikinca gorsel
   alanina ~34px daha kaliyor ve ipucu modelin yaninda, yani gercekten
   bahsettigi seyin ustunde duruyor. */
.configurator-stage__note {
    position: absolute;
    left: 28px;
    bottom: 26px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 56px);
    background: #fff;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dikkan-antrasit-color);
    margin: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
}

.configurator-stage__note i {
    color: var(--dikkan-color);
    font-size: 16px;
    flex-shrink: 0;
}

.configurator-stage__note:empty {
    display: none;
}

/* ----------------------------------------------------- secenek paneli */

/*
 * Gruplar KART DEGIL: bes eksen alt alta bes esit agirlikta kutu olusturur
 * ve hangisinin sirada oldugu okunmaz. Panel duz beyaz bir kolon; bolumler
 * yalnizca 1px yatay cizgiyle ayriliyor, ayrimi baslik boyutu tasiyor.
 *
 * UC KATMAN:
 *   .configurator-panel        kolonun tamami, dikey yigin, tasmayi kirpar
 *     .configurator-panel__scroll   kalan bosluk; kirpan katman
 *       .configurator-panel__inner  JS'in translateY ile cektigi katman
 *     .configurator-panel__foot     etek; kaydirmadan etkilenmez
 *
 * Etek kirpan katmanin DISINDA: siparis kodu ve eylemler, kullanici panelin
 * neresinde olursa olsun ekranda kalmali.
 */
.configurator-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    /* Sol kolon gri, sag kolon beyaz: ikisinin arasindaki cizgi aslinda renk
       degisiminin kendisi. Yine de 1px hairline birakiliyor, iki ton birbirine
       cok yakin oldugu icin sinir aksi halde bulanik goruluyor. */
    border-left: 1px solid #e3e3e6;
}

/*
 * ------------------------------------------------------- YUZEN PANEL
 *
 * Masaustunde iki kolonlu izgara YOK. Sahne ekranin tamamini kapliyor, panel
 * onun uzerinde - her kenardan 'gap' kadar iceride - yuzuyor. Ayrimi kolon
 * rengi degil GOLGE tasiyor, o yuzden 'border-left' burada kalkiyor.
 *
 * KOSELER KESKIN: sitedeki kart yuzeyleri (urun listesindeki
 * .all_products_single dahil) yaricapsiz ve bu ekran o kurala uyuyor.
 *
 * Model panelin ALTINA GIRMIYOR: '__frame' icindeki model-viewer/gorsel sag
 * kenardan panel genisligi + iki bosluk kadar iceri cekiliyor, boylece model
 * kalan alanda ortalaniyor. Cekme '__frame'in kendisine degil icindeki
 * ogelere uygulaniyor: sahnenin gradyani ve sol alttaki ipucu ekranin
 * tamamini kullanmaya devam etsin.
 *
 * Kaydirma kurgusu etkilenmiyor: JS tasmayi '__scroll'un yuksekliginden
 * olcuyor (measureScrollLink) ve panelin yuksekligi top/bottom ile kesin
 * belirli oldugu icin olcum degismiyor. Kurgu kapaliyken ('is-static',
 * 'is-scroll-fallback') panel yuzmuyor: orada sayfa normal akiyor, mutlak
 * konumlu bir panel akistan tamamen dusup sahnenin uzerine binerdi.
 */
@media (min-width: 992px) {
    .configurator-scroll:not(.is-static):not(.is-scroll-fallback) .configurator-layout {
        position: relative;
        display: block;
    }

    .configurator-scroll:not(.is-static):not(.is-scroll-fallback) .configurator-stage {
        position: absolute;
        inset: 0;
    }

    /*
     * Daraltma 'right' ile DEGIL genislikle yapiliyor.
     *
     * 'right: <bosluk>; width: auto' ile model dogru ortalanir ama urun
     * FOTOGRAFI sola yapisir: <img> yer degistirilen (replaced) bir oge,
     * 'width: auto' onda "kutuyu sol/sag kenardan coz" degil "dogal
     * genisligini kullan" demek - kutu asiri kisitlanmis sayilip 'right'
     * atilir ve gorsel sol kenara oturur. model-viewer replaced olmadigi icin
     * ayni satir onda beklendigi gibi calisir.
     *
     * Genislik acikca verilince iki oge de ayni kutuyu aliyor; 'inset: 0'dan
     * gelen sol kenar duruyor, gorsel 'object-fit: contain' ile bu kutunun
     * ortasina yerlesiyor.
     */
    .configurator-scroll:not(.is-static):not(.is-scroll-fallback) .configurator-stage__frame model-viewer,
    .configurator-scroll:not(.is-static):not(.is-scroll-fallback) .configurator-stage__frame img {
        width: calc(100% - var(--cfg-panel-space));
    }

    .configurator-scroll:not(.is-static):not(.is-scroll-fallback) .configurator-panel {
        position: absolute;
        z-index: 3;
        top: var(--cfg-panel-gap);
        right: var(--cfg-panel-gap);
        bottom: var(--cfg-panel-gap);
        width: var(--cfg-panel-width);
        height: auto;
        border-left: none;
        box-shadow: 0 24px 60px rgba(24, 25, 30, .13), 0 2px 10px rgba(24, 25, 30, .05);
    }
}

.configurator-panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Nokta seridi bu katmana gore konumlaniyor: kaydirmanin gectigi alan
       neresiyse serit de orada duruyor, panelin etegine tasmiyor. */
    position: relative;
}

/* --------------------------------------------------- nokta seridi (rail)

   Panelin sag ic kenarinda, her secim bolumu icin bir nokta.
   Sayfanin kendi kaydirma cubugu ekranin en sagnda kaliyor; bu serit onun
   yerine gecmiyor, panelin KACINCI bolumunde olundugunu gosteriyor.

   Kirpan katmanin icinde ama cekilen '__inner'in disinda: liste kayarken
   serit yerinde duruyor. Panelin yan dolgusu 32px, serit 6-20px arasinda:
   satirlarin uzerine binmiyor.

   Yalnizca masaustunde (992px+) ve yalnizca panel gercekten tasiyorsa
   ciziliyor - tasma yoksa gidilecek bir yer yok, JS seridi gizli tutuyor. */

.configurator-rail {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.configurator-rail[hidden] {
    display: none;
}

/* Nokta kucuk bir isaret ama tiklanabilir alani parmak/imlec icin 16px:
   isaretin kendisi '::before' ile ciziliyor. */
.configurator-rail__dot {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: none;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.configurator-rail__dot::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    /* Kartlar keskin kose, ama bu bir kart degil kucuk bir kontrol. */
    border-radius: 3px;
    background: #c9cace;
    transition: height .18s ease, background-color .18s ease;
}

.configurator-rail__dot:hover::before {
    background: #97989c;
}

/* Bulunulan bolum: nokta uzayip kurumsal turuncuya donuyor - isaret
   buyumuyor, UZUYOR. */
.configurator-rail__dot.is-active {
    height: 26px;
}

.configurator-rail__dot.is-active::before {
    height: 22px;
    background: var(--dikkan-color);
}

.configurator-rail__dot:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

/* Kurgu kapaliyken (sticky yok / erisim uyarisi) panel zaten normal akiyor:
   gidilecek sabit bir bolum yok. */
.is-scroll-fallback .configurator-rail,
.is-static .configurator-rail {
    display: none;
}

.configurator-panel__inner,
.configurator-groups {
    display: flex;
    flex-direction: column;
}

/* Panel icerigi JS tarafindan translateY ile cekiliyor. 'will-change' olmadan
   Chrome her karede yeniden boyama yapip kaydirmayi tirtikli gosteriyor. */
.configurator-panel__inner {
    will-change: transform;
    padding: 30px 32px 24px;
}

/* Secim guncellenirken panel hafifce soluyor: AJAX yanitini beklerken
   ekranin dondugu belli olsun, ama satirlarin yeri kaymasin. */
.configurator-panel.is-loading {
    opacity: .55;
    pointer-events: none;
}

/* ------------------------------------- "kaldiginiz yerden devam" bandi */

/*
 * Panelin EN TEPESI, basligin ustunde. Kaydedilmis konfigurasyonu tarih ve
 * urun gorseliyle sunar; yuklenince onay haline gecip birkac saniye sonra
 * kendiliginden kalkar (bkz. product-configurator.js, RESUME_NOTICE_MS).
 *
 * Yuzey: panelin geri kalani beyaz, band GRI (#f1f1f2) - soldaki sahnenin
 * zeminiyle ayni ton. Boylece band, panelin bir bolumu gibi degil ekranin
 * ustune birakilmis bir not gibi okunuyor. Yaricap yok: sitedeki butun kart
 * yuzeyleri keskin kose (urun listesindeki .all_products_single de oyle).
 *
 * Band, panelin KIRPILAN katmaninin icinde: gorunup kaybolmasi tasma
 * miktarini degistiriyor, o yuzden her hal degisiminde measureScrollLink()
 * cagriliyor.
 */
.configurator-resume {
    margin-bottom: 22px;
}

/*
 * Band, panelin ust dolgusunun ('.configurator-panel__inner', 30px) bir
 * kismini negatif margin ile geri aliyor: panelin ust kenarina 14px pay
 * kaliyor. Panel yuzen bir yuzey oldugundan hizalanacak bir sahne kenari
 * yok; sifir bosluk bandi panelin kenarina sikismis gosterirdi.
 *
 * DEGER '.configurator-panel__inner' ILE BAGLI: oradaki ust dolgu degisirse
 * buradaki pay da degisir.
 *
 * Yalnizca iki kolonlu halde: 992px altinda panel sahnenin ALTINDA duruyor,
 * hizalanacak bir kenar yok - orada band, panelin ust hairline'ina yapisip
 * sikismis gorunurdu.
 */
@media (min-width: 992px) {
    .configurator-resume {
        margin-top: -16px;
    }
}

.configurator-resume__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    /* Sagda capraz dugmesine yer: gorsel onun altina girmesin diye dolgu
       degil dugme konumlandiriliyor, gorsel de kendi genisligini koruyor. */
    padding: 20px 20px 20px 22px;
    background: #f1f1f2;
}

.configurator-resume__close {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    font-size: 17px;
    line-height: 1;
    color: #6b6c6f;
    cursor: pointer;
}

.configurator-resume__close:hover {
    color: var(--dikkan-color);
}

/* Metin kolonu kalan yeri alir, gorsel kendi olcusunu korur. 'min-width: 0'
   olmadan uzun tek kelimeler kolonu tasirdi. */
.configurator-resume__text {
    flex: 1 1 auto;
    min-width: 0;
}

.configurator-resume__title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.005em;
    color: var(--dikkan-antrasit-color);
    margin: 0;
    /* Soru iki satira dustugunde satirlar dengeli bolunsun. */
    text-wrap: pretty;
    /* Capraz dugmesinin altina girmesin. */
    padding-right: 24px;
}

/* Onay halinde metin bir eylem cagirmiyor, yalnizca olan biteni bildiriyor:
   kalin antrasit yerine sakin gri. */
.configurator-resume__title.is-muted {
    font-weight: 400;
    color: #6b6c6f;
}

.configurator-resume__date {
    font-size: 13.5px;
    line-height: 1.3;
    color: #8b8c90;
    margin: 5px 0 0;
    font-variant-numeric: tabular-nums;
}

/* Bandin eylemi DUGME gorunumunde degil bag gorunumunde: etekteki sabit
   dugmelerle ayni agirlikta olursa hatirlatma, ekranin ana eylemi gibi
   okunurdu. Ok turuncu - ekrandaki tek vurgu rengi. */
.configurator-resume__load {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 13px 0 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    cursor: pointer;
}

.configurator-resume__load i {
    font-size: 16px;
    color: var(--dikkan-color);
    transition: transform .15s ease;
}

.configurator-resume__load:hover {
    color: var(--dikkan-color);
}

.configurator-resume__load:hover i {
    transform: translateX(3px);
}

/* Urun gorseli bandin sag ucunda: band, bekleyen konfigurasyonun gorsel
   karsiligi. Olcu SABIT - katalog fotograflarinin oranlari birbirinden farkli
   ve degisken bir kutu, band her urunde baska yukseklikte olurdu. */
.configurator-resume__figure {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 124px;
    height: 74px;
}

.configurator-resume__figure img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Katalog fotograflari BEYAZ ZEMINLI (seffaf degil): gri bandin uzerinde
       beyaz bir kutu gibi durmasin diye harmanlaniyor. */
    mix-blend-mode: multiply;
}

/* Onay halinde gorsel soluyor ve uzerine onay isareti biniyor. */
.configurator-resume__card.is-loaded .configurator-resume__figure img {
    opacity: .3;
}

.configurator-resume__figure i {
    position: absolute;
    font-size: 34px;
    line-height: 1;
    color: var(--dikkan-antrasit-color);
}

/* Panelin tepesi: figur kodu, urunun adi ve ekranin ne yaptigini soyleyen
   cumle. Kaydirmayla birlikte yukari cikiyor - sabit kalmasi gereken bilgi
   degil, bir kez okunup gecilen bir giris. Ilk iki satiri JS, secim
   cozuldukce yeniden yaziyor. */

/* Figur kodu buyuk bir BASLIK degil, basligin ustundeki kucuk etiket: panelin
   basligi olarak kullaniciya bir sey anlatmiyor (ayni kod ekranin altinda
   siparis kodunun icinde zaten geciyor). */
.configurator-panel__figure {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #8b8c90;
    margin: 0 0 7px;
    font-variant-numeric: tabular-nums;
}

/* Vana tipi secilmemisken yazilacak figure yok. Bos <p> yuksekligi sifir ama
   alt boslugunu koruyor; kaldirilmazsa baslik 7px asagida durur ve iki durum
   arasinda hiza kayar. Ayni desen etekte de var ('__foot:empty'). */
.configurator-panel__figure:empty {
    display: none;
}

/* Urunun kendi adi. Punto 31px DEGIL: katalog adlari uzun ("Buhar Vana Duz
   Regule Klape Vidali Kapak"), 31px'te panelde dort satira cikar ve ekrana
   kilitli panelde secim bolumlerinden yer goturur. */
.configurator-panel__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--dikkan-antrasit-color);
    margin: 0;
    text-wrap: pretty;
}

.configurator-panel__desc {
    font-size: 14px;
    line-height: 1.55;
    color: #6b6c6f;
    margin: 8px 0 0;
}

/*
 * Bolum. Kart degil: yalnizca ustunde bir hairline ve nefes payi.
 * Ilk bolumun ustunde cizgi yok - orada zaten ozet seridinin alt cizgisi var.
 */
.configurator-group {
    background: none;
    padding: 24px 0 0;
    margin-top: 24px;
    border-top: 1px solid #e3e3e6;
}

.configurator-group:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

/* Ozet seridinin ALT cizgisi ilk bolumun ust cizgisi gorevini goruyor; ikisi
   birden basilsa 24px arayla iki paralel cizgi olusur. */
.configurator-specs + .configurator-group {
    border-top: none;
}

/*
 * Bolum basligi: buyuk ve NORMAL kalinlikta.
 *
 * Agirlik degil BOYUT ayiriyor: satirlarin icindeki secenek adlari 700
 * oldugu icin kalin bir baslik onlardan ayrilmazdi.
 */
.configurator-group__label {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--dikkan-antrasit-color);
    margin-top: 10px;
    margin-bottom: 16px;
}

/*
 * VANA TIPI GRUBU.
 *
 * Satirlarin kendisi icin ayri kural YOK: '.configurator-option' dilini aynen
 * kullaniyor (ad + alt satirda endustri + sagda urun sayisi), yani diger
 * eksenlerle gorsel olarak ayni. Buradaki tek fazlalik arama kutusu.
 *
 * Grup panelin ILK cocugu oldugu icin ust cizgisi ve ust dolgusu
 * '.configurator-group:first-child' kuralindan zaten sifirlaniyor.
 */
.configurator-type-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*
 * Arama kutusu. Bicim dili satirlarla AYNI: beyaz dolgu, ic golge kontur,
 * kose yarichapi YOK (bu dosyada hicbir yerde yok - panelin tamami keskin
 * koseli). Boylece kutu listenin bir parcasi gibi duruyor, uzerine
 * yapistirilmis bir arama alani gibi degil.
 *
 * 'appearance: none': tarayicinin type="search" icin koydugu kendi cercevesi
 * ve yuvarlak kosesi (ozellikle WebKit) yukaridaki dili boza.
 */
.configurator-type-search {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--dikkan-antrasit-color);
    background: #fff;
    border: none;
    box-shadow: inset 0 0 0 1px #e3e3e6;
    transition: box-shadow .15s ease;
}

.configurator-type-search::placeholder {
    color: #9a9b9e;
}

.configurator-type-search:hover {
    box-shadow: inset 0 0 0 1px #cfcfd3;
}

/* Odakta turuncu kontur: sitenin geri kalaninda odak isareti bu renk
   (bkz. '.configurator-option:focus-visible'). 'outline' yerine ic golge,
   cunku kutu olculeri degismesin - listedeki satirlarla ayni gerekce. */
.configurator-type-search:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--dikkan-color);
}

/* WebKit'in kutu icindeki temizleme dugmesi BILEREK GIZLENMEDI: basildiginda
   'input' olayi tetikleniyor, yani listeyi de gercekten sifirliyor. Gizlense
   aramayi temizlemenin tek yolu metni elle silmek olurdu. */

/*
 * Ozet seridi: panelin tepesinde buyuk deger + kucuk birim, altinda etiket.
 * Ekranin en belirgin ogesi bu - ekrana bakan kisi tek bakista
 * "neyle ugrasiyorum" sorusunun cevabini aliyor. Degerler hesaplanmis gercek
 * veri (olcu araligi, basinc sinifi, eslesen kayit); bkz. Controller::specs.
 */
.configurator-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    background: none;
    /* Kart degil serit: ustunde ve altinda birer hairline, yanlarda dolgu yok
       ki degerler panelin sol kenariyla hizali kalsin. */
    padding: 18px 0;
    margin-top: 22px;
    border-top: 1px solid #e3e3e6;
    border-bottom: 1px solid #e3e3e6;
}

.configurator-specs__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.configurator-specs__value {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--dikkan-antrasit-color);
    font-variant-numeric: tabular-nums;
}

/* Birim, sayinin yaninda kucuk ve normal kalinlikta: "534 km" dizilisi -
   sayi tasiyici, birim ona yapisik bir aciklama. */
.configurator-specs__unit {
    font-size: 13px;
    font-weight: 400;
    margin-left: 4px;
    color: #8b8c90;
}

.configurator-specs__label {
    font-size: 12.5px;
    line-height: 1.4;
    color: #8b8c90;
}

/*
 * Renk kutucugu seridi (govde ve sit malzemesi eksenleri).
 *
 * Bes-alti tam genislikte satir yerine tek satir kutucuk: kart nefes aliyor ve
 * malzemeler yan yana karsilastirilabiliyor. Ustteki satir secili malzemeyi
 * yaziyor; kutucugun uzerine gelindiginde o malzemeye donuyor, boylece renk ile
 * ad arasindaki bag tiklamadan once kuruluyor.
 *
 * Palet ProductFacetService::materialColor'dan geliyor - urun listesindeki
 * varyant kutucuklari ve sihirbaz ayni renkleri kullaniyor.
 */
/* Kutucuklarin ALTINDA duruyor (bkz. product-configurator.js -> swatchGroup):
   'min-height' korunuyor, cunku imlec kutucuklar arasinda gezerken bu satirin
   icerigi degisiyor ve yuksekligi sabit olmazsa altindaki her sey ziplardi. */
.configurator-swatch-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    margin-top: 14px;
}

.configurator-swatch-head__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.configurator-swatch-head__title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dikkan-antrasit-color);
    text-transform: capitalize;
}

.configurator-swatch-head__title.is-muted {
    font-weight: 400;
    color: #8b8c90;
}

.configurator-swatch-head__alt {
    font-size: 12.5px;
    line-height: 1.3;
    color: #8b8c90;
    text-transform: capitalize;
}

.configurator-swatch-head__value {
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    white-space: nowrap;
}

/* Fare kutucugun uzerindeyken ust satir "onizleme" halinde: secili degeri
   gecici olarak degistirdigi belli olsun diye biraz soluk. */
.configurator-swatch-head.is-preview .configurator-swatch-head__title,
.configurator-swatch-head.is-preview .configurator-swatch-head__value {
    color: #6b6c6f;
}

.configurator-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/*
 * Renk secici DAIRE: ekranin "yaricap yok" kurali KART YUZEYLERI icin
 * gecerli (panel, secim satirlari, band) - renk secici kucuk bir kontrol,
 * nokta seridindeki isaretler gibi yuvarlanabiliyor.
 *
 * Ic kontur, acik renkli kutucuk (paslanmaz gri) beyaz panel uzerinde
 * kaybolmasin diye.
 */
/*
 * Govde ve sit malzemesi kutucuklari TEK RENK DEGIL,
 * iki renkli gradyan - dokum bir yuzeyin isik alan ve golgede kalan yani.
 *
 * Ikinci renk PALETTEN GELMIYOR, mevcut renkten TURETILIYOR: renk hala tek
 * yerde (ProductFacetService::materialColor) duruyor ve ayni paleti kullanan
 * urun listesi ile sihirbaz degismiyor - gradyan yalnizca bu ekranda. Yeni
 * bir malzeme eklendiginde gradyan
 * kendiliginden olusuyor, ikinci bir hex girmeye gerek yok.
 *
 * Renk JS'ten '--swatch-color' degiskeniyle geliyor (product-configurator.js,
 * swatchGroup/facetButton). 'background-color' de ayni degiskenden yaziliyor:
 * 'color-mix' desteklemeyen tarayicida 'background-image' satiri tamamen
 * gecersiz sayilir ve kutucuk duz renge doner.
 */
.configurator-swatch,
.configurator-option__swatch {
    border-radius: 50%;
    background-color: var(--swatch-color, #c9cacd);
    background-image: linear-gradient(
        140deg,
        color-mix(in srgb, var(--swatch-color, #c9cacd) 66%, #ffffff) 0%,
        color-mix(in srgb, var(--swatch-color, #c9cacd) 78%, #16171c) 100%
    );
}

.configurator-swatch {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
    transition: box-shadow .15s ease, transform .15s ease;
}

.configurator-swatch:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px #dcdcdf;
}

.configurator-swatch:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 3px;
}

/* Secili kutucuk: 2px turuncu halka, kutucukla arasinda bir bosluk birakarak
   - halka rengin kendisine yapissa turuncu malzeme (bronz) secili
   gorunmezdi. Bosluk KART ZEMINIYLE ayni renk (#fff): farkli bir ton halkanin
   cevresinde ince bir cerceve gibi kalirdi. */
.configurator-swatch.is-selected {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4px var(--dikkan-color);
}

/* Kutucuk seridinde "Farketmez" satiri yok; secimi kaldirma bagi burada. */
.configurator-clear {
    display: inline-block;
    margin-top: 14px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: #8b8c90;
    text-decoration: underline;
    cursor: pointer;
}

.configurator-clear:hover {
    color: var(--dikkan-color);
}

.configurator-clear:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

/*
 * Secenekler pill DEGIL, tam genislikte SATIR (arac konfiguratorlerindeki
 * secim listesi gibi): solda ad, sagda o secenegin degeri, secili satir
 * cerceveyle isaretli. Pill'lerde ad ve sayac ic ice girer ve secenekler satir
 * sonlarina gore dagildigi icin hangi grubun nerede bittigi okunmaz.
 *
 * Koseler sivri (yaricap yok): sayfadaki tum yuzeyler ve urun listesindeki
 * kartlar (.all_products_single) da yaricapsiz.
 */
.configurator-options {
    display: flex;
    flex-direction: column;
    /* Satirlar iki satirlik metin tasidigi icin (ad + alt bilgi) 8px'lik
       aralik satirlari birbirine yapistirir; 10px. */
    gap: 10px;
}

.configurator-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    /*
     * Satir da BEYAZ, karti saran kontur dilinin aynisi: gri dolgulu satirlar
     * beyaz panelin icini "ikinci bir zemin" gibi gosterir.
     *
     * Secili OLMAYAN satirda kontur neredeyse gorunmez tonda; belirgin kontur
     * YALNIZCA secili satira ait, yani kontur bir ayirt edici. Her satirda
     * koyu kontur olsa alt alta bes-alti satir "tablo" gibi okunur.
     */
    background: #fff;
    border: none;
    /* Iki satirlik metin rahat otursun diye dolgu 16/18. */
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--dikkan-antrasit-color);
    cursor: pointer;
    /* Kontur 'border' ile DEGIL ic golgeyle ciziliyor: secili satir 2px
       kontur alirken kutu olculeri degismiyor, yani liste ziplamiyor. */
    box-shadow: inset 0 0 0 1px #e3e3e6;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Hover'da kontur bir tik belirginlesiyor: secili halin (beyaz + koyu kontur)
   hafif bir onizlemesi. Satir zaten beyaz oldugu icin isaret artik dolguda
   degil KONTURDA; cok soluk bir gri tint de ekleniyor, aksi halde imlecin
   hangi satirda oldugu yalnizca 1px'lik ton farkindan okunurdu. */
.configurator-option:hover {
    background: #fafafa;
    box-shadow: inset 0 0 0 1px #cfcfd3;
}

.configurator-option:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

/*
 * Secili satir: 1px TURUNCU kontur.
 *
 * Panelde baska hicbir renk yok, dolayisiyla tek turuncu kontur ekranin TEK
 * vurgusu ve secimin nerede oldugu tek bakista okunuyor.
 *
 * Kalinlik 2px degil 1px: secili olmayan satirlar da 1px konturlu, kalinlik
 * degisince satirin ic olculeri ayni kalsa bile cerceve "oynuyor" gibi
 * gorunur.
 */
.configurator-option.is-selected {
    background: #fff;
    color: var(--dikkan-antrasit-color);
    box-shadow: inset 0 0 0 1px var(--dikkan-color);
}

.configurator-option__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.configurator-option__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.configurator-option__name {
    font-weight: 700;
    text-transform: capitalize;
    overflow-wrap: anywhere;
}

/* Ikinci satir: malzemenin Ingilizce adi ya da olcunun agirligi - satiri tek
   kelimeden bir katalog kaydina cevirdigi icin var. */
.configurator-option__sub {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    color: #8b8c90;
    text-transform: capitalize;
}

/* Secili satirda alt satir da bir tik koyulasiyor: beyaz kutuda soluk gri
   fazla siliniyor. */
.configurator-option.is-selected .configurator-option__sub {
    color: #6b6c6f;
}

.configurator-option.is-selected .configurator-option__name {
    color: var(--dikkan-antrasit-color);
}

/*
 * Sagdaki deger adin kendisi kadar belirgin: ayni koyulukta ve kalin. Soluk
 * gri/kucuk yazilsa satir "etiket + dipnot" gibi durur ve panel zayif
 * gorunurdu.
 */
.configurator-option__value {
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    white-space: nowrap;
    align-self: flex-start;
}

.configurator-option__value--code {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* Secili satirin sagindaki deger de marka renginde: turuncu yalnizca satirin
   cevresini degil bilgiyi de isaretliyor. */
.configurator-option.is-selected .configurator-option__value {
    color: var(--dikkan-color);
}

/* "Farketmez" satiri bir secenek degil, ekseni temizleyen eylem: zemini yok,
   yazisi soluk. */
.configurator-option--any {
    background: none;
    box-shadow: none;
    padding: 11px 15px;
}

.configurator-option--any .configurator-option__name {
    font-weight: 400;
    color: #8b8c90;
    text-decoration: underline;
}

.configurator-option--any:hover {
    background: none;
    box-shadow: none;
}

.configurator-option--any:hover .configurator-option__name {
    color: var(--dikkan-color);
}

/*
 * Olcu satirlari.
 *
 * Satirlar iki satirlik (ad + agirlik); dar dolgu iki satiri kutuya sikistirip
 * listeyi bogucu gosterir. Liste 21 satira kadar cikabiliyor ama uzunluk
 * kirpma ile yonetiliyor (ilk 8 satir + "tumunu goster"), yani dolgudan
 * tasarruf etmeye gerek yok.
 */
.configurator-option--dn {
    padding: 14px 18px;
    font-size: 14px;
}

.configurator-option--dn .configurator-option__name {
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

/* Olcu listesini acan dugme. Sihirbazdaki '.finder-toggle' ile ayni islev,
   burada satir listesinin altina tam genislikte oturuyor. */
/* Zemin ve kontur, secili olmayan secim satirlariyla ayni: beyaz + 1px
   soluk kontur. */
.configurator-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 11px 15px;
    background: #fff;
    border: none;
    box-shadow: inset 0 0 0 1px #e3e3e6;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dikkan-color);
    cursor: pointer;
    transition: background .15s ease;
    margin-bottom: 50px;
}

.configurator-toggle:hover {
    background: #fafafa;
    box-shadow: inset 0 0 0 1px #cfcfd3;
}

.configurator-toggle:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

.configurator-toggle i {
    transition: transform .18s ease;
}

.configurator-toggle.is-open i {
    transform: rotate(180deg);
}

/*
 * Malzeme/trim renk kutucugu: palet urun listesindeki .variant-swatch ve
 * sihirbazdaki .finder-option__swatch ile AYNI kaynaktan geliyor
 * (ProductFacetService::materialColor), boylece ayni malzeme her ekranda ayni
 * renkte. Bicim burada farkli: satir yuksekligi pill'e gore genis oldugu icin
 * kutucuk 14px'e buyudu ve kosesi SIVRI - bu panelde yuvarlatilmis oge yok.
 * Ic golge, acik renkli kutucuk beyaz zeminde kaybolmasin diye.
 */
.configurator-option__swatch {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.configurator-group__hint {
    font-size: 13.5px;
    line-height: 1.5;
    color: #8b8c90;
    margin: 0;
}

/*
 * PASIF BOLUM: vana tipi secilmeden eksenler kurulamiyor ama
 * bolumler panelde duruyor - panel tek parca okunmali, bolumler tip secilince
 * birden belirmemeli. Basligin rengi soluyor ki hangilerinin henuz
 * calismadigi bir bakista anlasilsin; boyut ve yer aynen kaliyor, aksi halde
 * tip secildiginde panel ziplardi.
 */
.configurator-group--locked .configurator-group__label {
    color: #b4b5b9;
}

/*
 * Satirin GRI TASLAGI: gercek secim satiriyla ayni kutu, icinde metin yerine
 * iki cubuk. Aciklama metni yerine bu duruyor - kutu, bolumun dolacagini
 * metinden daha iyi anlatiyor.
 *
 * 'pointer-events: none' hem tiklamayi hem hover'i kesiyor: taslak, uzerine
 * gelindiginde canli satir gibi davranmamali.
 */
.configurator-option--ghost {
    background: #f7f7f8;
    box-shadow: inset 0 0 0 1px #ebebee;
    cursor: default;
    pointer-events: none;
}

.configurator-option__ghost {
    display: block;
    height: 12px;
    width: 42%;
    background: #e4e4e7;
}

/* Sagdaki deger cubugu (gercek satirlarda urun sayisi / siparis kodu). */
.configurator-option__ghost--value {
    width: 56px;
    flex: 0 0 56px;
}

/* --------------------------------------------------------------- ozet */

/*
 * PANELIN ETEGI: yalnizca PANEL kolonu kadar genis ve kirpan katmanin
 * disinda. Kod her zaman ekranda (panelin son karti olsa kullanici tam da
 * secim yaparken kodu goremezdi), sahneden serit goturmuyor, pay hesabi yok,
 * tek gosterim.
 *
 * Etek KIRPILMAZ ve ic kaydirma almaz: icerigi sabit sayida satir (etiket,
 * kod, istege bagli agirlik/IMPA, dipnot, iki dugme).
 */
.configurator-panel__foot {
    flex: 0 0 auto;
    padding: 18px 32px 22px;
    border-top: 1px solid #e3e3e6;
    background: #fff;
}

.configurator-panel__foot:empty {
    display: none;
}

/* Etegin ilk satiri: solda "Siparis kodu" etiketi, sagda eslesen kayit
   sayisi. Ikisi de kucuk ve gri; asil deger bir alt satirda. */
.configurator-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.configurator-summary__label {
    font-size: 12.5px;
    color: #8b8c90;
    flex-shrink: 0;
}

.configurator-summary__matches {
    font-size: 12.5px;
    color: var(--dikkan-color);
    text-align: right;
    margin: 0;
}

.configurator-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}

/*
 * "SECIMLERI SIFIRLA" SATIRI: kodun altinda, sol kenara yasli.
 *
 * Siparis kodunun saginda dursa koddan ~120px goturur - uzun kodlar sarip son
 * hanelerini alt satirda birakirdi. Kod tam genislikte, sifirla da kendi
 * satirinda ve etekteki butun sol hizali ogelerle (kod, agirlik/IMPA, dipnot, "urunleri listele") ayni
 * dikey cizgide basliyor.
 */
.configurator-summary__tools {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

/* Ayni bordered/ikincil dil ('.configurator-actions a.is-secondary' ile),
   ama daha kucuk: bu tek basina, gecici bir eylem - etegin iki sabit
   dugmesiyle ayni agirlikta olursa "sifirla"nin altinda kendi eylem seridi
   varmis hissi verirdi. */
.configurator-compare-btn {
    /* Agirlik/IMPA degerlerinin saginda, satirin sag ucunda. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    text-decoration: none;
    background: #fff;
    box-shadow: inset 0 0 0 1px #cfcfd3;
    transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

.configurator-compare-btn i {
    font-size: 14px;
}

.configurator-compare-btn:hover {
    background: #fafafa;
    box-shadow: inset 0 0 0 1px var(--dikkan-color);
    color: var(--dikkan-color);
}

/*
 * Siparis kodu: bu ekranin CIKTISI, dolayisiyla etegin en iri ogesi -
 * kullanicinin sayfadan alip goturdugu tek deger bu.
 * Esit genislikli rakam: kodlar karsilastirilarak okunuyor.
 */
.configurator-summary__value {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--dikkan-antrasit-color);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

/* Olcu secilmeden siparis kodu yok: yerine "secim yapilmadi" yaziyor, o da
   bir kod gibi iri gorunmemeli. */
.configurator-summary__value--muted {
    font-size: 15px;
    font-weight: 400;
    color: #9a9b9f;
}

/* Agirlik ve IMPA: kodun yanindaki ikincil degerler, tek satirda yan yana.
   Alt alta degil yan yana - etek dikeyde buyuyemez.

   Karsilastirma dugmesi de bu satirda (son cocuk, 'margin-left: auto' ile
   sag uca yaslanir). 'align-items: center' bu yuzden gerekli - varsayilan
   'stretch' 36px'lik dugmeyi metin satirinin yuksekligine ceker. Dar ekranda satir sarabilir; dugme o zaman kendi satirinda ve
   yine sagda kalir. */
.configurator-summary__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    margin-top: 8px;
}

.configurator-summary__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12.5px;
    white-space: nowrap;
}

.configurator-summary__meta-label {
    color: #8b8c90;
}

.configurator-summary__meta-value {
    font-weight: 700;
    color: var(--dikkan-antrasit-color);
    font-variant-numeric: tabular-nums;
}

/* Yildizli dipnot: hangi verinin baglayici oldugunu soyleyen kucuk gri not. */
.configurator-summary__note {
    font-size: 11.5px;
    line-height: 1.45;
    color: #9a9b9f;
    margin: 10px 0 0;
}

/* Hicbir katalog kaydina uymayan secim. Etekte kodun yerini aliyor, o yuzden
   altinda "sifirla" satiriyla arasinda bosluk gerekiyor. */
.configurator-summary__empty {
    background: rgba(255, 65, 0, .06);
    border-left: 3px solid var(--dikkan-color);
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dikkan-antrasit-color);
}

/* ------------------------------------------------------------ aksiyonlar */

/* (Datasheet +) listele + iletisime gec + urun sayfasi 440px'lik panelde tek
   satira sigmaz; birincil sikisip yariya kirpilir. Bu yuzden birincil HER
   ZAMAN kendi tam genislikteki satirinda (flex-basis: 100%); ikincil dugmeler
   (listele, iletisime gec, varsa datasheet) ustteki satirda esit genislikte
   paylasiyor. */
.configurator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.configurator-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 45px;
    font-size: 14.5px;
    font-weight: 700;
    padding: 0 20px;
    text-decoration: none;
    transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
}

.configurator-actions a.is-primary {
    flex: 1 1 100%;
}

.configurator-actions a.is-secondary {
    flex: 1 1 130px;
}

/* Birincil eylem SABIT DEGIL: tek kayit eslesince "urun sayfasi"
   (konfigurasyonun tam teknik karsiligi orada), 1'den fazla eslesmede
   "iletisime gec" - bkz. product-configurator.js, actions(). Bu kural JS'te
   tek yerde duruyor; buradaki bicim hangisi birincil olursa ona uyguluyor. */
.configurator-actions a.is-primary {
    background: var(--dikkan-color);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(255, 65, 0, .9);
}

.configurator-actions a.is-primary:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* Ikincil eylem, secim satirlariyla ayni dil: beyaz dolgu + kontur. Kontur
   satirlardakinden bir tik koyu (#cfcfd3): 50px yuksekliginde bir dugmede
   #e3e3e6 beyaz zeminde neredeyse kayboluyor. */
.configurator-actions a.is-secondary {
    background: #fff;
    border: none;
    box-shadow: inset 0 0 0 1px #cfcfd3;
    color: var(--dikkan-antrasit-color);
}

.configurator-actions a.is-secondary:hover {
    background: #fafafa;
    box-shadow: inset 0 0 0 1px #cfcfd3;
    color: var(--dikkan-color);
}

/* PASIF DUGME. Su an yalnizca "urun sayfasi" kullaniyor: 1'den
   fazla katalog kaydi eslesiyorken gidilecek TEK bir urun sayfasi yok, dugme
   duruyor ama basilamaz - bkz. product-configurator.js, actions().

   'pointer-events: none' BILEREK KULLANILMADI (finder.css'teki
   '.finder-submit.is-disabled' oyle yapiyor): o kural imleci de gecirdigi
   icin dugmenin uzerinde yasak isareti CIKMIYOR, kullanici dugmenin neden
   tepki vermedigini anlamaz. Bunun yerine karsilastirma ekranindaki
   desen izleniyor ('.compare-toggle.is-disabled', '.compare-bar__submit
   .is-disabled'): imlec 'not-allowed', renk soluk, ve dugme JS tarafinda
   href'siz basildigi icin tiklama zaten bir yere gitmiyor. */
.configurator-actions a.is-secondary.is-disabled,
.configurator-actions a.is-secondary.is-disabled:hover {
    cursor: not-allowed;
    background: #f4f5f6;
    box-shadow: inset 0 0 0 1px #e3e3e6;
    color: #9a9b9e;
    transform: none;
}

/* Secimleri sifirla: dugme degil alti cizili bag (bkz.
   '.configurator-summary__tools'). */
.configurator-reset {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #6b6c6f;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.configurator-reset:hover {
    color: var(--dikkan-color);
}

.configurator-reset:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

.configurator-loading {
    padding: 30px 0;
    text-align: center;
    font-size: 14.5px;
    color: #8b8c90;
}
/* ---------------------------------------------------------- responsive */

@media (max-width: 991px) {
    .configurator-layout {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    /* Nokta seridi yalnizca masaustunde: burada sayfa normal akiyor,
       taraycinin kendi kaydirmasi zaten var ve dar ekranda serit
       satirlarin uzerine binerdi. JS de ayni kirilimda seridi kurmuyor. */
    .configurator-rail {
        display: none;
    }

    /* Tek kolonda sabitleme/kaydirma kurgusu kapali: dar ekranda ekranin
       yarisi modele gidince seceneklere yer kalmiyor. JS de ayni kirilimda
       devre disi kaliyor (matchMedia '(min-width: 992px)'). */
    .configurator-scroll {
        height: auto !important;
    }

    .configurator-viewport {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
        padding: 40px 0 60px;
    }

    /* Tek kolonda kart yuksekligi icerige gore; sahne de kirpmasin. */
    .configurator-stage {
        height: auto;
        display: block;
    }

    /* Ekrana yapisma yokken gorsel alanina yeniden ORAN veriliyor: flex ile
       doldurulacak bir bosluk kalmadi. */
    .configurator-stage__frame {
        aspect-ratio: 4 / 3;
        flex: none;
    }

    .configurator-panel {
        height: auto;
        overflow: visible;
        /* Tek kolonda panel sahnenin YANINDA degil ALTINDA: dikey ayirac
           anlamsiz, ustteki cizgi ise sahneden ayirmak icin gerekli. */
        border-left: none;
        border-top: 1px solid #e3e3e6;
    }

    .configurator-panel__scroll {
        overflow: visible;
    }

    .configurator-panel__inner {
        transform: none !important;
        will-change: auto;
        padding: 26px 0 20px;
    }

    /* Tek kolonda etek yapismiyor, icerigin sonunda akiyor; yanlardaki dolgu
       da kalkiyor ki panelin geri kalaniyla hizali kalsin. */
    .configurator-panel__foot {
        padding: 18px 0 0;
    }
}

@media (max-width: 767px) {
    .configurator-viewport {
        padding: 32px 0 56px;
    }

    /* Dar ekranda bolum basliklari 25px'te sayfayi bogar. */
    .configurator-group__label {
        font-size: 21px;
    }

    .configurator-panel__title {
        font-size: 19px;
    }

    .configurator-stage__frame {
        aspect-ratio: 1 / 1;
    }

    /* Sahnenin uzerinde yuzen ogeler dar ekranda kenara yaklasir. */
    .configurator-stage__title {
        top: 18px;
        left: 18px;
        right: 18px;
    }

    .configurator-stage__note {
        left: 18px;
        bottom: 18px;
        max-width: calc(100% - 36px);
    }

    .configurator-gate {
        padding: 20px;
    }

    /* Dar ekranda 124px'lik gorsel, metin kolonundan soruyu iki-uc satira
       bolecek kadar yer aliyor: kuculuyor ama kalkmiyor - band, hangi urunun
       bekledigini gostermek icin var. */
    .configurator-resume__figure {
        width: 88px;
        height: 58px;
    }

    .configurator-resume__card {
        gap: 10px;
        padding: 16px 16px 16px 18px;
    }

    .configurator-resume__title {
        font-size: 14.5px;
    }

    .configurator-actions a {
        flex: 1;
        justify-content: center;
    }
}

/* ------------------------------------------------- hareket tercihi (a11y)

   Isletim sisteminde "hareketi azalt" seciliyse yukselme efekti kapanir;
   renk ve cerceve degisimleri kalir, yani hicbir etkilesim isareti
   kaybolmaz. */

@media (prefers-reduced-motion: reduce) {
    .configurator-option,
    .configurator-actions a,
    .configurator-resume__load i,
    .configurator-rail__dot::before {
        transition: none;
    }

    .configurator-actions a.is-primary:hover,
    .configurator-resume__load:hover i {
        transform: none;
    }
}