/* ===========================================================================
   Urun detay sayfasi (resources/views/site/product/detail.blade.php)

   Kurallar product-compare.css ornegindeki gibi ayri dosyada (sablon ici
   <style> blogu yerine).

   Duzen:
     - Sag dar kolon yok; datasheet, Online Catalog ve onay uyarisi
       gorselin altindaki eylem sirasinda.
     - Taksonomi ikon sirasi yok; figur kodu + vana tipi basligin altinda.
     - "Diger Urunler" kart stilinde, karusel/ok YOK: blok SEO
       karariyla sabit 4 urun basiyor (ProductController::relatedProductsFor).
       Mobilde ayni 4 kart yatay kaydirmali sira (bkz. "Mobil duzen").
     - KOSE YARICAPI ISTISNASI: sitenin varsayilan kurali kart yuzeylerinin
       sivri olmasi (bkz. style.css .all_products_single). Bu sayfada kartlar
       YUVARLAK - bilincli, sayfaya ozel istisna.
       Tek degiskenden (--pd-radius) yonetiliyor.

   Sinirlar: font Arial (style.css body), renkler marka paleti (--dikkan-color,
   --dikkan-antrasit-color) ve notr tonlari; dis kutuphane yok, ikonlar Line
   Awesome.

   Global catismalar: style.css'te '#nav-tab', '.nav-tabs', '#nav-d-table',
   '.product-meta', 'a.no-color-btn', '.detail-pro' icin ESKI tasarimin
   kurallari duruyor (baska sayfalar da kullanabilir). Bu sayfa o sinif/id'leri
   artik KULLANMIYOR; yeni isaretleme 'pd-' onekli siniflarla, boylece eski
   kurallari ezmek icin !important yarisi gerekmiyor.
   =========================================================================== */

.pd-crumbband,
.pd-page,
.pd-related {
    /* Metin renkleri IKI seviye: ana metin + ikincil bilgi (figur satiri,
       kart alt basligi, urun aciklamasi). */
    --pd-ink: #2b3440;          /* breadcrumb bileseniyle ayni ton */
    --pd-muted: #6b6c6f;
    --pd-line: #e3e3e6;         /* style.css'teki ince cizgi tonu */
    --pd-soft: #f5f6f8;         /* acik gri zemin (bant, pasif sekme) */
    --pd-radius: 8px;           /* kart yuzeyleri - yukaridaki istisna notu */
    --pd-ctl-radius: 6px;       /* dugme ve sekmeler - sitenin dugme dili */
    --pd-gap: clamp(20px, 2.6vw, 44px);

    /* TIPOGRAFI OLCEGI. Font ailesi her yerde Arial (style.css body);
       puntolar ve kalinliklar YALNIZCA bu degiskenlerden okunur, kurallarda
       sabit sayi yazilmaz.

       UC seviye: H1 (urun adi), H2 (Teknik Ozellikler, sekme basligi, Diger
       Urunler) ve geri kalan HER metin icin tek govde puntosu - tablolar,
       sekmeler, dugmeler, kartlar, bu sayfadaki breadcrumb dahil. Vurgu
       punto ile degil kalinlikla. Buyuk harf (text-transform) kullanilmiyor. */
    --pd-fs-h1: clamp(26px, 2.2vw, 32px);
    --pd-fs-h2: clamp(19px, 1.5vw, 22px);
    --pd-fs-body: 15px;
    --pd-lh-head: 1.25;
    --pd-lh-body: 1.5;
    --pd-fw-regular: 400;
    --pd-fw-bold: 700;
}

/* Ortak breadcrumb bileseni 16px kullaniyor; bu sayfada govde puntosuna
   esitleniyor. Bilesenin kendi degiskeni uzerinden, baska sayfaya dokunmadan. */
.pd-crumbband .dikkan-breadcrumb {
    --bc-font: var(--pd-fs-body);
}

/* Admin panelinden gelen icerikte satir ici font stilleri var (yayindaki
   urunler olculdu): 15 urunun Boyutlar tablosunda 6240 hucrede
   'font-size: 11px', birkac alanda 14px / 10.5px ve 'font-family: Arial'.
   Bu hucreler komsu tablolardan kucuk gorunuyordu. Veri degistirilmiyor;
   icerik alaninda punto ve aile kapsayicidan miras aliniyor. Satir ici stil
   yalnizca !important ile ezilebiliyor. Kalinlik (<strong>) BILEREK
   dokunulmadan birakildi - icerigin vurgusu. */
.pd-spec__body *,
.pd-panel .pro-tab-descrip * {
    font-family: inherit !important;
    font-size: inherit !important;
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   Gri bant ve alt cizgi yok: iz header'in altinda beyaz zemin uzerinde
   duruyor.
--------------------------------------------------------------------------- */

/* Bilesenin kendi dikey boslugu (18px) biraz sikilastiriliyor. */
.pd-crumbband .dikkan-breadcrumb {
    padding: 14px 0;
}

/* ---------------------------------------------------------------------------
   Sayfa govdesi
--------------------------------------------------------------------------- */
.pd-page {
    padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
    color: var(--pd-ink);
}

.pd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pd-gap);
    align-items: stretch;
}

/* --- Gorsel karti --------------------------------------------------------- */
/* Sol kolon: gorsel karti + (varsa) onay uyarisi + eylem sirasi. Kart kalan
   yuksekligi doldurur, boylece sira kolonun dibinde, kartin hemen altinda. */
.pd-media {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pd-gallery {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(16px, 2.5vw, 40px);
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
}

/* Owl, flex cocugu olarak genisligini kendisi hesaplayamiyor: 100% sart. */
.pd-gallery .product-slide-n {
    position: relative;
    width: 100%;
    margin: auto 0;
}

.pd-gallery .product-slide img {
    width: 100%;
    height: clamp(260px, 32vw, 480px);
    object-fit: contain;
}

/* Owl ok dugmeleri: beyaz daire, turuncu ok. Tek gorselli urunlerde Owl oklari zaten gizliyor. */
.pd-gallery .owl-nav button.owl-prev,
.pd-gallery .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: #fff !important;
    border: 1px solid var(--pd-line) !important;
    box-shadow: 0 4px 12px rgba(24, 32, 45, .08);
    color: var(--dikkan-color) !important;
    font-size: 26px !important;
    line-height: 1;
    transition: background-color .2s, color .2s, border-color .2s;
}

.pd-gallery .owl-nav button.owl-prev { left: 0; }
.pd-gallery .owl-nav button.owl-next { right: 0; }

.pd-gallery .owl-nav button.owl-prev:hover,
.pd-gallery .owl-nav button.owl-next:hover {
    background: var(--dikkan-color) !important;
    border-color: var(--dikkan-color) !important;
    color: #fff !important;
}

/* --- Bilgi kolonu --------------------------------------------------------- */
.pd-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Basligin ustundeki kisa turuncu cizgi. */
.pd-title {
    position: relative;
    margin: 0 0 12px;
    padding-top: 22px;
    font-size: var(--pd-fs-h1);
    line-height: var(--pd-lh-head);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
}

.pd-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 4px;
    background: var(--dikkan-color);
}

.pd-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 20px;
    font-size: var(--pd-fs-body);
    font-weight: var(--pd-fw-regular);
    line-height: var(--pd-lh-body);
    color: var(--pd-muted);
}

.pd-sub strong {
    color: var(--pd-ink);
    font-weight: var(--pd-fw-bold);
}

.pd-sub__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dikkan-color);
}

/* Kullanim ortami ikonlari: gorsel kartinin sag ust kosesinde; ikon ustte,
   adi altta, her biri kendi renginde. Gorselin ustune binmesin diye akista
   kendi satirini kapliyor; gorsel kutusu sabit yukseklikte kaldigi icin
   olcek degismiyor. Negatif marjlar ikonlari kartin kosesine yaklastiriyor. */
.pd-icons {
    align-self: flex-end;
    display: flex;
    margin: calc(clamp(12px, 1.8vw, 24px) - clamp(16px, 2.5vw, 40px))
            calc(clamp(12px, 1.8vw, 24px) - clamp(16px, 2.5vw, 40px))
            12px 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px 4px;
    padding: 0;
    list-style: none;
}

.pd-icons .pd-icn {
    display: flex;
    flex: 0 0 84px;
    flex-direction: column;
    align-items: center;
    width: 84px;
    text-align: center;
}

.pd-icons .pd-icn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.pd-icons .pd-icn span {
    display: block;
    width: 100%;
    margin-top: 4px;
    font-size: var(--pd-fs-body);
    line-height: 1.2;
}

/* Malzeme / trim / tip kutucuklari - yalnizca bilgi, secilebilir degil. */
.pd-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.pd-attr {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-ctl-radius);
    font-size: var(--pd-fs-body);
    font-weight: var(--pd-fw-bold);
    line-height: var(--pd-lh-head);
    color: var(--pd-ink);
}

.pd-attr__dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* --- Teknik ozellikler karti ---------------------------------------------- */
.pd-spec {
    padding: 18px;
    background: var(--pd-soft);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
}

.pd-spec__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: var(--pd-fs-h2);
    line-height: var(--pd-lh-head);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
}

.pd-spec__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--dikkan-color);
    border-radius: var(--pd-ctl-radius);
    color: var(--dikkan-color);
    font-size: 20px;
}

/* Acilir kart basligi (Teknik Ozellikler + sekme kartlari). Masaustunde
   duz baslik: dugme gorunumu ve ok yok; acilip kapanma yalnizca mobilde
   (bkz. "Duyarli davranis" > 767px). */
.pd-fold {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: default;
}

.pd-fold__label {
    flex: 1 1 auto;
    min-width: 0;
}

.pd-fold__caret {
    display: none;
}

/* technical_features icerigi: 2 kolonlu anahtar -> deger tablosu
   (promote_table_head ilk hucreyi <th scope="row"> yapiyor) ve altinda
   aciklama listesi. '.pro-tab-descrip' BILEREK kullanilmiyor: o sinifin
   style.css'teki "ilk satir koyu bant" kurali burada ilk ozelligi
   ("Standard") baslik gibi boyuyordu. */
.pd-spec__body figure.table {
    width: 100% !important;
    margin: 0;
}

/* Punto !important: dosya basindaki '.pd-spec__body *' miras kurali da
   !important; bu secici daha ozgul oldugu icin kazaniyor, hucreler de
   tablodan miras aliyor. */
.pd-spec__body table {
    width: 100% !important;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--pd-line);
    font-size: var(--pd-fs-body) !important;
    line-height: var(--pd-lh-body);
}

.pd-spec__body th,
.pd-spec__body td {
    padding: 11px 14px;
    border: 1px solid var(--pd-line);
    color: var(--pd-ink);
    vertical-align: top;
    text-align: left;
}

.pd-spec__body th,
.pd-spec__body tbody tr > :first-child {
    width: 36%;
    background: #fafbfc;
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
}

/* CKEditor anahtar kolonuna 150px gibi satir ici genislik yazmis; yukaridaki
   oran tum urunlerde ayni hizayi versin diye onu eziyor. */
.pd-spec__body th[style*="width"] {
    width: 36% !important;
}

.pd-spec__body tbody tr:nth-child(even) > td {
    background: #fcfcfd;
}

/* Gercek kolon basligi tasiyan az sayidaki teknik tablo. */
.pd-spec__body thead th,
.pd-spec__body thead td {
    background: var(--dikkan-antrasit-color);
    border-color: var(--dikkan-antrasit-color);
    color: #fff;
    width: auto;
}

/* Tablonun altindaki aciklama (urun tanimi, "Application: ..."):
   madde isaretsiz gri metin. */
/* Yalnizca tablonun DISINDAKI (dogrudan cocuk) liste/paragraf: hucre
   icindeki bir <p> tablo puntosunda kalmali. */
.pd-spec__body > ul,
.pd-spec__body > p {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--pd-fs-body) !important;
    font-weight: var(--pd-fw-regular);
    line-height: var(--pd-lh-body);
    color: var(--pd-muted);
}

.pd-spec__body ul li + li {
    margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   Onay bekleyen uye uyarisi (eskiden sag kolondaki turuncu kutu)
--------------------------------------------------------------------------- */
.pd-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 65, 0, .06);
    border: 1px solid rgba(255, 65, 0, .35);
    border-left: 4px solid var(--dikkan-color);
    border-radius: var(--pd-ctl-radius);
    font-size: var(--pd-fs-body);
    line-height: var(--pd-lh-body);
    color: var(--pd-ink);
}

.pd-notice i {
    font-size: 20px;
    color: var(--dikkan-color);
}

/* ---------------------------------------------------------------------------
   Eylem sirasi (yer imi / paylas / datasheet / IOM / online katalog)
--------------------------------------------------------------------------- */
/* Dugmeler gorsel kartinin iki kenarina hizali.
   Genis ekranda TEK SATIR: dort dugmenin dogal genisligi (~1030px) kart
   genisligini (~840px) asiyor; flex-wrap kullanilsaydi son dugme alt satira
   tek basina duserdi. Bu yuzden satir kirilmiyor, dugmeler icerikleriyle
   orantili daraliyor, sigmayan etiket iki satira iniyor. Dugme sayisi
   uyelik durumuna gore 3-5 arasi degisiyor; kural sayidan bagimsiz.
   1199px altinda kolon daraldigi icin 2'li izgaraya geciliyor (asagida). */
.pd-actions {
    display: flex;
    gap: 10px;
}

.pd-action {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.pd-btn {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-ctl-radius);
    /* style.css'te global 'a { font-size: 12px }' var; acikca veriliyor. */
    font-size: var(--pd-fs-body);
    font-weight: var(--pd-fw-bold);
    line-height: var(--pd-lh-head);
    color: var(--pd-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.pd-btn .btn-label {
    min-width: 0;
    text-align: left;
}

.pd-btn i {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--dikkan-color);
    transition: color .2s;
}

.pd-btn .btn-caret {
    margin-left: 6px;
    font-size: 14px;
    transition: transform .2s, color .2s;
}

.pd-btn[aria-expanded="true"] .btn-caret {
    transform: rotate(180deg);
}

/* Tum dugmede tek hover davranisi: turuncu zemin + beyaz metin/ikon
   (sayfanin hover dili). */
.pd-btn:hover,
.pd-btn:focus-visible {
    background: var(--dikkan-color);
    border-color: var(--dikkan-color);
    color: #fff;
}

.pd-btn:hover i,
.pd-btn:focus-visible i {
    color: #fff;
}

.pd-btn:focus-visible {
    outline: 2px solid var(--dikkan-antrasit-color);
    outline-offset: 2px;
}

/* --- Acilir menuler (paylas + IOM): ayni govde ----------------------------- */
.share-menu,
.pd-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-ctl-radius);
    box-shadow: 0 10px 24px rgba(24, 32, 45, .12);
    z-index: 20;
}

.share-menu {
    padding: 8px;
    gap: 4px;
    align-items: center;
}

.share-menu .share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--dikkan-color);
    text-decoration: none;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.share-menu .share-icon i {
    font-size: 26px;
    line-height: 1;
}

.share-menu .share-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.share-menu .share-icon:hover,
.share-menu .share-icon:focus-visible {
    color: var(--dikkan-antrasit-color);
    background-color: rgba(0, 0, 0, .04);
}

.share-menu .share-icon:focus-visible {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

.pd-menu {
    min-width: 240px;
    padding: 6px;
}

.pd-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-menu li + li {
    border-top: 1px solid var(--pd-line);
}

.pd-menu a {
    display: block;
    padding: 10px 12px;
    font-size: var(--pd-fs-body);
    line-height: var(--pd-lh-body);
    color: var(--pd-ink);
    text-decoration: none;
}

.pd-menu a:hover {
    color: var(--dikkan-color);
}

.pd-menu p {
    margin: 0;
    padding: 10px 12px;
    font-size: var(--pd-fs-body);
    font-weight: var(--pd-fw-regular);
    line-height: var(--pd-lh-body);
    color: var(--pd-muted);
}

/* ---------------------------------------------------------------------------
   Sekmeler
--------------------------------------------------------------------------- */
.pd-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-top: clamp(28px, 3vw, 40px);
}

.pd-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 12px 20px;
    background: var(--pd-soft);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-ctl-radius);
    font-size: var(--pd-fs-body);
    font-weight: var(--pd-fw-bold);
    line-height: var(--pd-lh-head);
    text-align: left;
    color: var(--pd-ink);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.pd-tab i {
    flex: 0 0 auto;
    font-size: 28px;
    line-height: 1;
    color: var(--pd-ink);
    transition: color .2s;
}

.pd-tab:hover {
    border-color: var(--dikkan-color);
}

.pd-tab:hover i {
    color: var(--dikkan-color);
}

.pd-tab.active {
    background: var(--dikkan-color);
    border-color: var(--dikkan-color);
    color: #fff;
}

.pd-tab.active i {
    color: #fff;
}

.pd-tab:focus-visible {
    outline: 2px solid var(--dikkan-antrasit-color);
    outline-offset: 2px;
}

/* --- Sekme icerigi karti -------------------------------------------------- */
.pd-panels {
    margin-top: 18px;
}

.pd-panel {
    padding: clamp(16px, 2vw, 24px);
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    box-shadow: 0 2px 10px rgba(24, 32, 45, .04);
}

.pd-panel__title {
    margin: 0 0 16px;
    font-size: var(--pd-fs-h2);
    line-height: var(--pd-lh-head);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
}

/* Tablo stilleri style.css'teki '.pro-tab-descrip' kurallarindan geliyor
   (baslik bandi, genis tablolarda yatay kaydirma, ic ice tablo duzeltmeleri);
   burada yalnizca kart icindeki gorunum ince ayarlaniyor. */
/* Tablo puntosu kapsayicida: icindeki her sey (satir ici stilli hucreler
   dahil) dosya basindaki miras kuraliyla bunu aliyor. */
.pd-panel .pro-tab-descrip {
    margin-top: 0;
    font-size: var(--pd-fs-body);
    line-height: var(--pd-lh-body);
}

.pd-panel .pro-tab-descrip figure.table {
    width: 100% !important;
    margin: 0;
}

.pd-panel .pro-tab-descrip table {
    margin: 0;
    border-color: var(--pd-line);
}

.pd-panel .pro-tab-descrip th,
.pd-panel .pro-tab-descrip td {
    padding: 11px 16px;
    border-color: var(--pd-line);
}

/* Koyu baslik bandindaki hucre cizgileri bandla ayni tonda kaybolmasin. */
.pd-panel .pro-tab-descrip thead th,
.pd-panel .pro-tab-descrip thead td {
    border-color: rgba(255, 255, 255, .18);
}

.pd-panel .pro-tab-descrip tbody tr:nth-child(even) > td {
    background-color: #fafbfc;
}

.pd-panel .pro-tab-descrip tbody tr:hover > td {
    background-color: rgba(255, 65, 0, .04);
}

.pd-panel model-viewer {
    width: 100%;
    height: 500px;
}

/* YouTube sarmalayicisi (oynatma bittiginde / durdugunda ortu). */
.hytPlayerWrapOuter,
.hytPlayerWrap {
    width: 100%;
}

.hytPlayerWrap {
    display: inline-block;
    position: relative;
}

.hytPlayerWrap.ended::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}

.hytPlayerWrap.paused::after {
    content: "";
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 50px;
    right: 0;
    cursor: pointer;
    background-color: black;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px 40px;
    background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}

/* ---------------------------------------------------------------------------
   Diger Urunler
--------------------------------------------------------------------------- */
.pd-related {
    padding: clamp(40px, 5vw, 72px) 0;
    background: var(--pd-soft);
    border-top: 1px solid var(--pd-line);
}

.pd-related__title {
    position: relative;
    margin: 0 0 clamp(20px, 2.4vw, 32px);
    padding-top: 22px;
    font-size: var(--pd-fs-h2);
    line-height: var(--pd-lh-head);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
}

.pd-related__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 4px;
    background: var(--dikkan-color);
}

.pd-related__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 24px);
}

/* Yalnizca mobildeki yatay sirada kullaniliyor (bkz. "Mobil duzen"). */
.pd-related__dots {
    display: none;
}

.pd-rcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    box-shadow: 0 2px 10px rgba(24, 32, 45, .04);
    transition: box-shadow .25s, border-color .25s, transform .25s;
}

.pd-rcard:hover {
    border-color: rgba(255, 65, 0, .45);
    box-shadow: 0 12px 28px rgba(24, 32, 45, .10);
    transform: translateY(-3px);
}

.pd-rcard__img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 8px;
}

.pd-rcard__img img {
    width: 100%;
    height: 170px;
    object-fit: contain;
}

.pd-rcard__body {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: auto;
    padding: 12px 18px 18px;
}

.pd-rcard__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Isim 2 satirda kesiliyor: kartlar isim uzunlugundan bagimsiz esit
   yukseklikte kalsin. */
.pd-rcard__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;          /* 2 satir x 1.5 */
    font-size: var(--pd-fs-body);
    line-height: var(--pd-lh-body);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
    text-decoration: none;
    word-break: break-word;
}

/* Yalnizca mobilde gorunur (bkz. "Mobil duzen"). */
.pd-rcard__fig {
    display: none;
}

.pd-rcard__type {
    display: block;
    margin-top: 4px;
    font-size: var(--pd-fs-body);
    line-height: var(--pd-lh-body);
    color: var(--pd-muted);
}

.pd-rcard__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--dikkan-color);
    border-radius: var(--pd-ctl-radius);
    color: var(--dikkan-color);
    font-size: 18px;
    transition: background-color .2s, color .2s;
}

.pd-rcard:hover .pd-rcard__name {
    color: var(--dikkan-color);
}

.pd-rcard:hover .pd-rcard__go {
    background: var(--dikkan-color);
    color: #fff;
}

/* Butun karti tiklanir yapan ortu (bkz. sablondaki 'related-product-card' notu). */
.pd-rcard .related-product-card {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* Basliktaki link klavye odagini alir; odak halkasi tum kartta gorunsun. */
.pd-rcard:focus-within {
    outline: 2px solid var(--dikkan-color);
    outline-offset: 2px;
}

.pd-rcard__name:focus {
    outline: none;
}

/* Hub linkleri: ortali, aralarinda dikey cizgi. */
.product-hub-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0;
    margin: clamp(24px, 2.6vw, 36px) 0 0;
}

.product-hub-links .product-hub-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 22px;
    font-size: var(--pd-fs-body);
    font-weight: var(--pd-fw-bold);
    color: var(--pd-ink);
    text-decoration: none;
}

.product-hub-links .product-hub-link + .product-hub-link {
    border-left: 1px solid #c9ccd2;
}

.product-hub-links .product-hub-link i {
    font-size: 16px;
    color: var(--dikkan-color);
    transition: transform .2s;
}

.product-hub-links .product-hub-link:hover {
    color: var(--dikkan-color);
}

.product-hub-links .product-hub-link:hover i {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   Datasheet'i olmayan urun modali + bookmark uyarisinin Dikkan temasi
   (SweetAlert2; betikte 'buttonsStyling: false'). Eski <style> blogundan
   aynen tasindi.
--------------------------------------------------------------------------- */
#datasheetModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

#datasheetModal .modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
}

#datasheetModal .modal-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    min-width: 280px;
}

#datasheetModal .modal-close {
    position: absolute;
    right: 10px;
    top: 5px;
    cursor: pointer;
    font-size: 20px;
}

.dikkan-swal {
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

.dikkan-swal .swal2-title {
    font-size: 22px;
    color: var(--dikkan-antrasit-color);
}

.dikkan-swal .swal2-html-container {
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

.dikkan-swal__confirm,
.dikkan-swal__cancel {
    display: inline-block;
    margin: 0 6px;
    padding: 11px 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: .2s;
}

.dikkan-swal__confirm {
    background: var(--dikkan-color);
    color: #fff;
}

.dikkan-swal__confirm:hover {
    background: var(--dikkan-antrasit-color);
}

/* Ikincil eylem: cerceveli, dolgusuz - "Giris Yap" ile ayni agirligi tasimasin. */
.dikkan-swal__cancel {
    background: transparent;
    border-color: #d1d5db;
    color: var(--dikkan-antrasit-color);
}

.dikkan-swal__cancel:hover {
    border-color: var(--dikkan-antrasit-color);
}

/* ---------------------------------------------------------------------------
   Duyarli davranis
--------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .pd-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Dar kolonda ikiserli izgara; tek kalan son dugme (3 ya da 5 dugmeli
       durum) satiri tam kaplar, boylece sag kenar yine karta hizali. */
    .pd-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-action:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .pd-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .pd-gallery .product-slide img {
        height: clamp(240px, 60vw, 420px);
    }
}

@media (max-width: 767px) {
    .pd-page .container.widewidth,
    .pd-related .container.widewidth,
    .pd-crumbband .container.widewidth {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pd-btn {
        padding: 8px 12px;
    }

    .pd-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pd-tab {
        gap: 10px;
        min-height: 54px;
        padding: 10px 12px;
    }

    .pd-tab i {
        font-size: 22px;
    }

    .pd-spec__body th,
    .pd-spec__body tbody tr > :first-child {
        width: 42%;
    }

    .pd-spec__body th[style*="width"] {
        width: 42% !important;
    }

    /* Yan yana kolonlar yerine tam genislikte alt alta satirlar - kucuk
       ekranda daha rahat okunuyor. Metin solda govde puntosunda, turuncu
       ok sagda, satirlar ince cizgiyle ayrili. Uzun bag metni kendi
       satirinda sariyor; SEO icin kisaltilmiyor (Aksiyon No 25). */
    .product-hub-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 20px;
        border-top: 1px solid var(--pd-line);
    }

    .product-hub-links .product-hub-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        min-height: 48px;
        padding: 12px 0;
        border-bottom: 1px solid var(--pd-line);
        line-height: 1.35;
        text-align: left;
    }

    .product-hub-links .product-hub-link + .product-hub-link {
        border-left: 0;
    }

    .product-hub-links .product-hub-link i {
        flex: 0 0 auto;
        font-size: 18px;
    }
}

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

     - "Diger Urunler" mobilde yatay kaydirmali sira; kutuphane yok, CSS
       scroll-snap + noktalar (script sablonun sonunda). Urun sayisi sabit 4.
     - "View All" baglantisi YOK: vana tipi sayfasina giden aciklayici hub
       linki (Aksiyon No 25) zaten asagida.
     - Teknik Ozellikler ve sekme kartlari acilir, ACIK basliyor.
     - Galeride buyutec dugmesi YOK.
     - Header ve footer sitenin ortak parcalari; bu dosyanin kapsami disinda.
     - Sira: galeri -> baslik/figur/malzeme -> eylem dugmeleri -> Teknik
       Ozellikler. Isaretleme masaustu iki kolonu icin degismiyor; mobilde
       iki kolon 'display: contents' ile acilip 'order' ile diziliyor.
     - Teknik Ozellikler: gri baslik bandi, beyaz govde. Teknik bolumde
       daha az cerceve: tablolarda dikey cizgi, zebra ve golge yok.
       Aciklama 14/21px, "Application" etiketi kendi satirinda kalin.
     - Aktif sekme dolu turuncu degil: acik turuncu zemin + turuncu cerceve
       ve metin; dort sekme esit yukseklikte. Masaustu sekmeleri degismedi.
     - Acik kartin oku yukari, kapalinin asagi bakiyor.
     - Sekme tablosu tasiyorsa USTUNDE "kaydirin" ipucu (script sablonda),
       kaydirma cubugu belirgin, ilk kolon (Bore/DN) sabit.
     - Diger Urunler: ekranda tam 2 kart, ucuncusu gorunmuyor; kaydirilabilir
       oldugunu noktalar soyluyor. Vana tipi yerine figur kodu.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .pd-page {
        padding: 16px 0 32px;
    }

    /* Iki kolon aciliyor: cocuklari tek sutunda yukaridaki sirayla. */
    .pd-hero {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .pd-media,
    .pd-info {
        display: contents;
    }

    .pd-gallery { order: 1; flex: 0 0 auto; margin-bottom: 22px; }
    .pd-notice  { order: 2; margin-bottom: 18px; }
    .pd-title   { order: 3; }
    .pd-sub     { order: 4; }
    .pd-attrs   { order: 5; }
    .pd-actions { order: 6; }
    .pd-spec    { order: 7; }

    /* Breadcrumb mobilde urunler sayfasindaki gibi duz
       satir - hap zemini, cerceve, golge ve ic bosluk yok (bkz.
       products-mobile.css 'breadcrumb'). Punto bu sayfanin govde puntosunda
       (--pd-fs-body) kaliyor. Bilesenin stili satir ici <style>'da; iki
       sinifli secici onu siradan bagimsiz eziyor. */
    .pd-crumbband .dikkan-breadcrumb ol {
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Galeri: oklar yerine gorselin altinda noktalar. Tek gorselli
       urunlerde Owl noktalari '.disabled' ile zaten gizliyor. */
    .pd-gallery {
        padding: 16px 16px 12px;
    }

    .pd-gallery .owl-nav {
        display: none;
    }

    .pd-gallery .owl-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
    }

    /* Ikonlar gorselin ustune binmesin diye mobilde kucuk. */
    .pd-icons .pd-icn {
        flex-basis: 62px;
        width: 62px;
    }

    .pd-icons .pd-icn img {
        width: 36px;
        height: 36px;
    }

    .pd-icons .pd-icn span {
        font-size: 11px;
    }

    .pd-gallery .owl-dots button.owl-dot span {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        transition: background-color .2s;
    }

    .pd-gallery .owl-dots button.owl-dot.active span {
        background: var(--dikkan-color);
    }

    /* Eylem dugmeleri en dar ekranda da ikiserli; ikon + etiket sola dayali.
       Alttaki ince cizgi Teknik Ozellikler kartindan ayiriyor. */
    .pd-actions {
        gap: 8px;
        margin-bottom: 14px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--pd-line);
    }

    .pd-btn {
        justify-content: flex-start;
        min-height: 48px;
    }

    .pd-title {
        padding-top: 18px;
    }

    .pd-sub {
        margin-bottom: 14px;
    }

    .pd-attrs {
        gap: 8px;
        margin-bottom: 18px;
    }

    .pd-attr {
        gap: 8px;
        padding: 8px 12px 8px 10px;
    }

    .pd-attr__dot {
        width: 18px;
        height: 18px;
    }

    /* Acilir kartlar */
    .pd-fold {
        cursor: pointer;
    }

    .pd-fold__caret {
        display: block;
        flex: 0 0 auto;
        font-size: 20px;
        line-height: 1;
        color: var(--pd-ink);
        transition: transform .2s;
    }

    /* Acik kart: ok yukari (kapatmak icin), kapali: asagi. */
    .pd-fold[aria-expanded="true"] .pd-fold__caret {
        transform: rotate(180deg);
    }

    .pd-fold:focus-visible {
        outline: 2px solid var(--dikkan-antrasit-color);
        outline-offset: 2px;
    }

    /* Teknik Ozellikler: gri baslik bandi, beyaz govde; tablo karta 6px
       iceriden oturuyor, alttaki aciklama metni biraz daha iceriden. */
    .pd-spec {
        padding: 0;
        background: #fff;
        overflow: hidden;
    }

    .pd-spec__head {
        margin-bottom: 0;
        padding: 12px 14px;
        background: var(--pd-soft);
    }

    .pd-spec__body {
        padding: 0 6px 16px;
    }

    /* Daha az cerceve: tablo dis kenarligi, dikey cizgiler, anahtar
       kolonunun zemini ve zebra kalkiyor; satirlari yalnizca yatay ince
       cizgi ayiriyor. Kart, bant ve tablo tek parca gorunsun. */
    .pd-spec__body table {
        border: 0;
    }

    .pd-spec__body th,
    .pd-spec__body td {
        border-width: 0 0 1px;
    }

    .pd-spec__body th,
    .pd-spec__body tbody tr > :first-child,
    .pd-spec__body tbody tr:nth-child(even) > td {
        background: none;
    }

    /* Aciklama: 14/21px. "Application:" gibi etiketli maddenin etiketi
       script'le '.pd-spec__label' icine aliniyor ve kendi satirinda
       kalin duruyor; maddeler ince cizgiyle ayriliyor. */
    .pd-spec__body > ul,
    .pd-spec__body > p {
        padding: 0 8px;
        font-size: 14px !important;
        line-height: 21px;
    }

    .pd-spec__body > ul li + li {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--pd-line);
    }

    .pd-spec__label {
        display: block;
        margin-bottom: 2px;
        font-weight: var(--pd-fw-bold);
        color: var(--pd-ink);
    }

    .pd-spec.is-folded .pd-spec__head,
    .pd-panel.is-folded .pd-panel__title {
        margin-bottom: 0;
    }

    .pd-spec.is-folded .pd-spec__body,
    .pd-panel.is-folded > :not(.pd-panel__title) {
        display: none;
    }

    /* Satirlar esit yukseklikte: iki satira inen etiket (Dimensions &
       Order Codes) bir sirayi digerinden uzun gostermesin. */
    .pd-tabs {
        grid-auto-rows: 1fr;
        margin-top: 24px;
    }

    .pd-tab.active {
        background: rgba(255, 65, 0, .06);
        color: var(--dikkan-color);
    }

    .pd-tab.active i {
        color: var(--dikkan-color);
    }

    /* "Diger degerler icin kaydirin": tablonun USTUNDE, yalnizca tablo
       kutusuna sigmadiginda (script 'hidden'i kaldiriyor). Punto
       !important: ipucu '.pro-tab-descrip' icinde, dosya basindaki miras
       kurali onu tablo puntosuna cekerdi. */
    .pd-swipe-hint {
        display: flex;
        justify-content: flex-end;
        margin: 0 0 8px;
        line-height: 1.35;
        color: var(--pd-muted);
    }

    .pd-swipe-hint[hidden] {
        display: none;
    }

    .pd-panel .pro-tab-descrip .pd-swipe-hint {
        font-size: 13px !important;
    }

    /* Kaydirma cubugu belirgin: ince ama gorunur gri. */
    .pd-panel .table-container {
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: #b9bcc2 #eef0f2;
    }

    .pd-panel .table-container::-webkit-scrollbar {
        height: 6px;
    }

    .pd-panel .table-container::-webkit-scrollbar-track {
        background: #eef0f2;
        border-radius: 3px;
    }

    .pd-panel .table-container::-webkit-scrollbar-thumb {
        background: #b9bcc2;
        border-radius: 3px;
    }

    /* Ilk kolon (Bore / DN / Part No.) yatay kaydirmada sabit. Yalnizca
       tablonun KENDI satirlari: hucre icindeki ic tablolara degmesin.
       Zemin opak olmali, yoksa kayan hucreler altindan gorunur; sag
       kenardaki cizgi box-shadow ile, cunku border-collapse'ta kenarlik
       tabloya ait ve hucreyle birlikte kaymiyor. */
    .pd-panel .pro-tab-descrip .table-container > figure > table > * > tr > :first-child,
    .pd-panel .pro-tab-descrip .table-container > table > * > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: inset -1px 0 0 var(--pd-line);
    }

    .pd-panel .pro-tab-descrip .table-container > figure > table > tbody > tr > :first-child,
    .pd-panel .pro-tab-descrip .table-container > table > tbody > tr > :first-child {
        background-color: #fff;
    }

    .pd-panels {
        margin-top: 12px;
    }

    /* Daha az cerceve: golge yok; govde hucrelerinde dikey cizgi ve zebra
       yok, satirlari yatay ince cizgi ayiriyor. Koyu baslik bandindaki
       dikey ayiricilar kaliyor (cok katli basliklarda gruplari ayiriyor).
       Dokunmatik ekranda hover zemini de kapali. */
    .pd-panel {
        padding: 16px;
        box-shadow: none;
    }

    .pd-panel .pro-tab-descrip table {
        border-left: 0;
        border-right: 0;
    }

    .pd-panel .pro-tab-descrip tbody td,
    .pd-panel .pro-tab-descrip tbody th {
        border-left: 0;
        border-right: 0;
    }

    .pd-panel .pro-tab-descrip tbody tr:nth-child(even) > td,
    .pd-panel .pro-tab-descrip tbody tr:hover > td {
        background-color: transparent;
    }

    /* "Diger Urunler": yatay sira, ekranda tam 2 kart (ucuncu kartin ucu
       gorunmuyor). Kaydirilabilir
       oldugunu alttaki noktalar gosteriyor. Kenar boslugu kadar disari
       tasma kaydirirken kartlarin ekran kenarina kadar akmasi icin. */
    .pd-related {
        padding: 32px 0;
    }

    .pd-related__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - 10px) / 2);
        gap: 10px;
        margin: 0 -16px;
        padding: 4px 16px 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }

    .pd-related__grid::-webkit-scrollbar {
        display: none;
    }

    .pd-rcard {
        scroll-snap-align: start;
    }

    /* Kaydirilan sirada yukari kalkma kirpiliyor. */
    .pd-rcard:hover {
        transform: none;
    }

    .pd-rcard__img {
        padding: 16px 12px 4px;
    }

    /* Ad masaustundeki gibi 2 satirda kesiliyor; kazanilan satir boyu
       (~22px) gorsele verildi. */
    .pd-rcard__img img {
        height: 112px;
    }

    .pd-rcard__body {
        padding: 8px 12px 12px;
    }

    /* Ad 2 satir (masaustu kurali, min-height ile yer ayrilmis), altinda
       vana tipi yerine figur kodu. */
    .pd-rcard__fig {
        display: block;
        margin-top: 4px;
        font-size: var(--pd-fs-body);
        line-height: var(--pd-lh-body);
        color: var(--pd-muted);
    }

    .pd-rcard__type {
        display: none;
    }

    .pd-rcard__go {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .pd-related__dots {
        display: flex;
        justify-content: center;
        gap: 2px;
        margin-top: 8px;
    }

    .pd-related__dots:empty {
        display: none;
    }

    /* 24x24 dokunma alani, 8px gorunen nokta (style.css'teki owl-dot
       kuraliyla ayni olcu). */
    .pd-related__dots button {
        position: relative;
        width: 24px;
        height: 24px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .pd-related__dots button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: 50%;
        background: #d1d5db;
        transition: background-color .2s;
    }

    .pd-related__dots button.active::before {
        background: var(--dikkan-color);
    }
}