/* ==========================================================================
   cms-custom.css — CMS uyum katmani
   StoreKit temasinin kendi CSS'ine DOKUNULMAZ. Panelden gelen isaretlemenin
   (display_menu, site_icerik.aciklama, site_medya gorselleri) temaya uymasi
   icin gereken duzeltmeler burada toplanir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) display_menu() artiklari
   display_menu() bootstrap isaretlemesi basar. footer.php'deki uyum betigi
   sunum kabugunu giydiriyor; geriye kalan bootstrap gorsel artiklarini burada
   temizliyoruz.
   -------------------------------------------------------------------------- */
/* KRITIK: tema, menu linkinin rengini HTML'deki class="text--black" ile veriyor;
   CSS varsayilani ise .header-wrapper .main-menu a { color: var(--body-bg-one) } = BEYAZ.
   display_menu() o class'i basmaz -> beyaz header uzerinde beyaz yazi = menu gorunmez.
   Rengi burada veriyoruz (temanin CSS'ine dokunmadan). */
.header-wrapper .main-menu a {
    color: var(--black, #000);
}
.header-wrapper .main-menu a:hover {
    color: var(--primary, #d81f28);
}

.main-menu .dropdown-toggle::after {
    display: none !important;   /* bootstrap karesi — kendi chevron ikonumuzu koyuyoruz */
}
.main-menu .menu--dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    position: static;
    float: none;
    min-width: 0;
}

/* Footer menusu: display_menu() alt menuleri de basar — footer'da acilir menu
   olmadigi icin ikinci seviyeyi gizle, yoksa liste ic ice govdelenir. */
.footer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-menu ul {
    display: none;
}
.footer-menu li a {
    color: var(--text-color-lt, #6c6c6c);
    transition: color .3s ease;
}
.footer-menu li a:hover {
    color: var(--base, #000);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   2) Header arama kutusu <div> degil <form> — tema stilini koru
   -------------------------------------------------------------------------- */
form.search-in--header {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3) CMS icerik alani (site_icerik.aciklama — panelden gelen HTML)
   Tema icerik metni icin stil tanimlamaz; okunabilir tipografi burada.
   -------------------------------------------------------------------------- */
.cms-content {
    line-height: 1.8;
    color: var(--text-color, #333);
}
.cms-content h2 {
    font-size: 32px;
    margin: 32px 0 16px;
}
.cms-content h3 {
    font-size: 24px;
    margin: 24px 0 12px;
}
.cms-content h2:first-child,
.cms-content h3:first-child {
    margin-top: 0;
}
.cms-content p {
    margin-bottom: 16px;
}
.cms-content ul,
.cms-content ol {
    margin: 0 0 16px 20px;
    padding-left: 16px;
}
.cms-content ul li {
    list-style: disc;
}
.cms-content ol li {
    list-style: decimal;
}
.cms-content li {
    margin-bottom: 8px;
}
.cms-content a {
    color: var(--base, #000);
    text-decoration: underline;
}
.cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.cms-content iframe {
    max-width: 100%;
}
/* Tablo tasarsa sadece TABLO kaydirilir — icerik alaninin tamamina
   overflow verilirse sayfa altinda yatay bar cikiyor. */
.cms-content .table--scroll,
.cms-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.cms-content table td,
.cms-content table th {
    border: 1px solid #e5e5e5;
    padding: 10px 14px;
}

/* --------------------------------------------------------------------------
   4) Panelden gelen gorseller tema oranini bozmasin
   site_medya / eticaret_media gorselleri sabit oranli degil.
   -------------------------------------------------------------------------- */
.product--card .thumb--wrap img,
.cms-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Breadcrumb basligi: temada h1, ekstra stil gerekmez — sadece uzun
   Turkce sayfa adlarinda tasmayi engelle. */
.breadcrumb--title {
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   5) Bos durum (urun/kategori yokken)
   -------------------------------------------------------------------------- */
.cms-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-color-lt, #6c6c6c);
}

/* ==========================================================================
   6) Hero — tam genislik arka planli slider (panelden: site_medya slider)
   ========================================================================== */
.cms-hero { position: relative; }
.cms-hero--slide,
.cms-hero.cms-hero--empty {
    min-height: 640px;
    height: 72vh;
    max-height: 780px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}
.cms-hero.cms-hero--empty { background-color: #1a1a1a; }
.cms-hero--overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(15,15,18,.60) 0%, rgba(15,15,18,.35) 45%, rgba(15,15,18,.08) 100%);  /* .85/.58/.15'ti — gorsel belirginlessin diye kisildi */
}
.cms-hero .container-fluid { position: relative; z-index: 2; }
.cms-hero--content { max-width: 640px; color: #fff; padding: 40px 0; }
.cms-hero--label {
    color: var(--primary, #d81f28);
    font-size: 18px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px;
}
.cms-hero--title {
    color: #fff; font-size: 54px; line-height: 1.1; font-weight: 800;
    text-transform: uppercase; margin-bottom: 20px;
}
.cms-hero--desc {
    color: rgba(255,255,255,.85); font-size: 18px; line-height: 1.6; margin-bottom: 28px;
}
.cms-hero .swiper-pagination { bottom: 24px; z-index: 3; }
.cms-hero .swiper-pagination-bullet { background: #fff; opacity: .5; width: 10px; height: 10px; }
.cms-hero .swiper-pagination-bullet-active { opacity: 1; background: var(--primary, #d81f28); }
@media (max-width: 991px) {
    .cms-hero--slide, .cms-hero.cms-hero--empty { min-height: 440px; height: auto; padding: 70px 0; }
    .cms-hero--title { font-size: 34px; }
    .cms-hero--desc { font-size: 16px; }
    .cms-hero--overlay { background: linear-gradient(90deg, rgba(15,15,18,.66) 0%, rgba(15,15,18,.45) 100%); }  /* .85/.65'ti */
}

/* ==========================================================================
   7) Anasayfa kategori vitrini (offer) + galeri — yangina uyarlanmis
   ========================================================================== */
.cms-offer--card { text-decoration: none; display: block; }
.cms-offer--ov {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(15,15,18,.10), rgba(15,15,18,.78));
}
.cms-offer--txt { position: relative; z-index: 2; padding: 28px; color: #fff; }
.cms-offer--txt h3 { color: #fff; }
.cms-offer--tag {
    display: inline-block; font-size: 13px; letter-spacing: 1px;
    color: var(--primary, #d81f28); font-weight: 700; margin-bottom: 8px;
}
.cms-offer--btn {
    display: inline-block; margin-top: 8px; font-weight: 700; font-size: 14px; color: #fff;
    border-bottom: 2px solid var(--primary, #d81f28); padding-bottom: 2px; transition: color .3s;
}
.cms-offer--card:hover .cms-offer--btn { color: var(--primary, #d81f28); }
.insta-gallery--card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.cms-ref { transition: box-shadow .3s, transform .3s; }
.cms-ref:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-3px); }

/* 8) Insta/urun galerisi: urun fotolari kirpilmadan, esit yukseklikte, beyaz kutuda */
.insta-gallery--card .thumb--wrap {
    height: 240px; background: #fff; border: 1px solid #eee;
    display: flex; align-items: center; justify-content: center; padding: 14px;
}
.insta-gallery--card .thumb--wrap img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: auto; }
@media (max-width: 767px){ .insta-gallery--card .thumb--wrap { height: 190px; } }

/* 9) Preloader: logo ORIJINAL renkte gorunsun (siyah zemin -> beyaz) */
.preloader { background-color: #ffffff !important; }
.preloader .logo img { max-width: 260px; }
.preloader .loader { color: var(--primary, #d81f28) !important; }

/* 10) Ic sayfa sabit banner: yangin gorseli + koyu overlay + beyaz baslik */
.breadcrumb.bg--img { position: relative; }
.breadcrumb.bg--img::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(15,15,18,.72), rgba(15,15,18,.58));
}
.breadcrumb.bg--img .container { position: relative; z-index: 2; }
.breadcrumb--title { color: #fff !important; }
.breadcrumb--link { color: rgba(255,255,255,.85) !important; }
.breadcrumb--link:hover { color: #fff !important; }
.breadcrumb--item--text { color: #fff !important; font-weight: 600; }
.breadcrumb--icon i { color: rgba(255,255,255,.6) !important; }

/* 11) Preloader logo: tema invert(1) filtresi kirmizi logoyu MAVI yapiyordu -> kaldir */
.preloader .logo img { filter: none !important; }

/* Footer harita: dikdortgen, kart gorunumu */
.footer-map { border: 1px solid rgba(255,255,255,.12); }
.footer-map iframe { display: block; width: 100%; }

/* ===== Kategori sayfasi sol menu (icerik.php $goster_sidebar) ===== */
.cat-sidebar {
	background: #fff;
	border: 1px solid #eceff3;
	border-radius: 12px;
	padding: 22px 20px;
	box-shadow: 0 6px 24px rgba(0,0,0,.05);
}
@media (min-width: 992px) { .cat-sidebar { position: sticky; top: 110px; } }
.cat-sidebar__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--primary, #d81f28);
	color: #16181d;
}
.cat-sidebar__list { list-style: none; margin: 0; padding: 0; }
.cat-sidebar__list li { margin: 0 0 6px; }
.cat-sidebar__list li:last-child { margin-bottom: 0; }
.cat-sidebar__list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 8px;
	color: #3a3f47;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, padding .18s ease;
}
.cat-sidebar__list a::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #cfd4db;
	flex: 0 0 auto;
	transition: background .18s ease;
}
.cat-sidebar__list a:hover {
	background: rgba(216,31,40,.07);
	color: var(--primary, #d81f28);
	padding-left: 18px;
}
.cat-sidebar__list a:hover::before { background: var(--primary, #d81f28); }
.cat-sidebar__list li.active a {
	background: var(--primary, #d81f28);
	color: #fff;
}
.cat-sidebar__list li.active a::before { background: #fff; }

/* Grid'in ic .container'i dar kolonda (col-lg-9) tasmasin */
.cms-content .project-one .container { max-width: 100%; padding-left: 0; padding-right: 0; }

/* ===== Urun grid — kart cercevesi (kategori/tum-urunler sayfalari) ===== */
.cms-content .eticaret-card .product--card {
	border: 1px solid #e9edf2;
	border-radius: 14px;
	padding: 16px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(20,23,28,.05);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
	height: 100%;
}
.cms-content .eticaret-card .product--card:hover {
	box-shadow: 0 16px 36px rgba(20,23,28,.12);
	transform: translateY(-5px);
	border-color: var(--primary, #d81f28);
}
/* Urun gorseli hafif gri zeminde — beyaz kart icinde one ciksin.
   Yukseklik render_grid'in inline 260px'ini ezer (kare/hafif dikdortgen kart) */
.cms-content .eticaret-thumb {
	background: #f6f7f9 !important;
	border-radius: 10px;
	margin-bottom: 14px;
	height: 180px !important;
	padding: 14px !important;
}
.cms-content .content--wrap { padding: 0 4px 4px; gap: 6px; }
/* KATALOG KODU OLMAYAN urunlerde kart bir satir kisa kaliyordu: render_grid kod
   satirini (<p class="text--secondary">) yalnizca kod DOLUYSA basiyor. Baslik
   alanina taban yukseklik verilerek kodlu/kodsuz tum kartlar ayni boyda durur. */
/* ===== TUM URUN KARTLARI AYNI BOYDA =====
   Iki kaynakli farklilik vardi:
     1) katalog kodu olmayan urunlerde kod satiri hic basilmiyor (render_grid)
     2) urun adlari 1-4 satir arasi degisiyor
   Olcum (Playwright, 1440px): kodsuz sayfa 324px, kodlu sayfa 373px, dedektorler 398px.
   Cozum: baslik 3 satirla sinirlanir (uzunu "..." ile kesilir) + iceriye taban
   yukseklik. Olculen sonuc: TUM sayfalarda 374px.
   Tam ad urun detay sayfasinda ve link title'inda duruyor. */
.cms-content .content--wrap { min-height: 130px; justify-content: flex-start !important; }
.cms-content .eticaret-card .title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Gorsel kutulama — render_grid'in inline kuralini pekistirir. Olcum: kodlu ve
   kodsuz kartlarda gorsel ZATEN ayni boyda basiliyor (164x152). Kartlar arasindaki
   gorunum farki fotografin KENDISINDEN: katalog cekimleri beyaz zeminli kesme,
   saha fotograflari dolu arka planli. CSS ile kapatilamaz. */
.cms-content .eticaret-thumb img { max-height: 100% !important; max-width: 100% !important;
	width: auto !important; height: auto !important; object-fit: contain !important; }
.cms-content .eticaret-card .product--card:hover .title a { color: var(--primary, #d81f28) !important; }
.cms-content .eticaret-card .product--card { position: relative; cursor: pointer; }
.cms-content .eticaret-card .title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ============================================================
   Referanslar sayfasi — kutu izgarasi + sayfalama
   Markup: icerik/aciklama1.php (referans sayfasinda devreye girer)
   ============================================================ */
.ref-liste { margin-top: 24px; }

.ref-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}
/* Sayfa basina 25 kutu — genis ekranda tam 5x5 blok olsun (auto-fill 6 sutuna
   cikip son satiri tek basina birakmasin). */
@media (min-width: 1200px) {
	.ref-grid { grid-template-columns: repeat(5, 1fr); }
}

.ref-kutu {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 78px;
	padding: 16px 14px;
	background: #fff;
	border: 1px solid rgba(20, 23, 28, .10);
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--black, #14171c);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.ref-kutu:hover {
	border-color: var(--primary, #d81f28);
	box-shadow: 0 12px 28px rgba(20, 23, 28, .10);
	transform: translateY(-3px);
}

.ref-sayfalama {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}
.ref-sayfa-btn {
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid rgba(20, 23, 28, .12);
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	color: var(--black, #14171c);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ref-sayfa-btn:hover { border-color: var(--primary, #d81f28); }
.ref-sayfa-btn.aktif {
	background: var(--primary, #d81f28);
	border-color: var(--primary, #d81f28);
	color: #fff;
}

.ref-toplam {
	margin-top: 14px;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}

@media (max-width: 575px) {
	.ref-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
	.ref-kutu { min-height: 64px; padding: 12px 10px; font-size: 13px; }
	.ref-sayfa-btn { min-width: 38px; height: 38px; font-size: 14px; }
}

/* ==========================================================================
   12) Urun detay galerisi — gorsel KIRPILMADAN, makul boyutta
   Tema: .product--details .product--img__preview .main--thumb__preview{height:804px}
         (mq'de 612px) + .fit--img{height:100%;object-fit:cover}
   Sonuc: dik urun fotosu 612px'e gerilip kirpiliyordu. Kutuyu kucultup
   object-fit'i contain'e ceviriyoruz — urunun tamami gorunsun.
   Secici, temaninkiyle ayni ozgullukte (0,3,0) ve ondan SONRA yuklendigi
   icin kazanir; !important gerekmiyor.
   ========================================================================== */
.product--details .product--img__preview .product--thumb {
	flex: 0 1 auto;
	width: min(100%, calc(480px * var(--oran, 1)));
	max-width: 100%;
	min-width: 0;
	border: 1px solid #e9edf2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(20,23,28,.05);
	overflow: hidden;
}
.product--details .product--img__preview .main--thumb__preview {
	height: auto;
	width: 100%;
	aspect-ratio: var(--oran, 1);
	padding: 0;
	display: block;
	background: #fff;
}
.product--details .product--img__preview .main--thumb__preview img.fit--img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.product--details .product--img__preview .product-all--img .item-gallery__image-wrapper {
	width: 92px;
	height: 92px;
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 10px !important;
	transition: border-color .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}
.product--details .product--img__preview .product-all--img .item-gallery__image-wrapper img.fit--img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
@media (max-width: 991px) {
	.product--details .product--img__preview .product--thumb { width: min(100%, calc(420px * var(--oran, 1))); }
}
@media (max-width: 575px) {
	.product--details .product--img__preview .product--thumb { width: 100%; }
	.product--details .product--img__preview .product-all--img .item-gallery__image-wrapper { width: 68px; height: 68px; }
}
.all-product-grid .product--card { position: relative; cursor: pointer; }
.all-product-grid .product--card .title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.all-product-grid .product--card.style--three { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #e9edf2; border-radius: 14px; padding: 14px; box-shadow: 0 4px 16px rgba(20,23,28,.05); transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease; }
.all-product-grid .product--card.style--three:hover { box-shadow: 0 16px 36px rgba(20,23,28,.12); border-color: var(--primary, #d81f28); transform: translateY(-4px); }
.all-product-grid .product--card.style--three .thumb--wrap { height: auto !important; margin-bottom: 14px !important; padding: 0 !important; background: #f6f7f9; border-radius: 10px; flex-direction: column; }
.all-product-grid .product--card.style--three .thumb--wrap .thumb { position: relative; width: 100% !important; height: auto !important; min-height: 0; margin-top: 0 !important; aspect-ratio: 1 / 1; overflow: hidden; scale: 1 !important; }
.all-product-grid .product--card.style--three .thumb--wrap .thumb img { position: absolute; top: 16px; left: 16px; width: calc(100% - 32px) !important; height: calc(100% - 32px) !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 6px; }
.all-product-grid .product--card.style--three .cta--wrap { position: static !important; padding: 0 16px 16px !important; }
.all-product-grid .product--card.style--three .product--cta { width: 100% !important; }
.all-product-grid .product--card.style--three .title { font-size: 17px !important; line-height: 1.35; }
.all-product-grid .product--card.style--three:hover .title a { color: var(--primary, #d81f28) !important; }
.cms-kategori-metin { border-top: 1px solid #e9edf2; padding-top: 32px; }
.product--details .product--img__preview .product-all--img .item-gallery__image-wrapper.active,
.product--details .product--img__preview .product-all--img .item-gallery__image-wrapper:hover { border-color: var(--primary, #d81f28); }
.product--details #productImgSrc.cms-zoomable { cursor: zoom-in; }
.mfp-bg { z-index: 100000 !important; background: #0b0b0b !important; opacity: .9 !important; }
.mfp-wrap { z-index: 100001 !important; }
.mfp-image-holder .mfp-content { max-width: 92vw; }
img.mfp-img { width: auto !important; height: min(85vh, 640px) !important; max-height: 85vh !important; max-width: 92vw !important; object-fit: contain; background: #fff; }
@media (max-width: 767px) { img.mfp-img { height: auto !important; width: 92vw !important; max-height: 80vh !important; padding: 0 !important; } }
.cms-benzer { background: #fff; border-top: 1px solid #e9edf2; }
#lightgallery.flex-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0 !important; }
#lightgallery .flex-col-md-3 { width: auto !important; max-width: none !important; flex: none !important; float: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; background: #fff; border: 1px solid #e9edf2; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,23,28,.05); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; }
#lightgallery .flex-col-md-3:hover { box-shadow: 0 16px 36px rgba(20,23,28,.12); transform: translateY(-4px); border-color: var(--primary, #d81f28); }
#lightgallery .wrapping-link { display: block; position: relative; aspect-ratio: 1 / 1; background: #f6f7f9; cursor: zoom-in; }
#lightgallery img.images { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px) !important; height: calc(100% - 24px) !important; max-height: none !important; object-fit: contain; }
#lightgallery .flex-item-wrapper, #lightgallery .flex-item-container { height: auto !important; }
#lightgallery .images-name { color: var(--black, #111) !important; background: none !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.35; padding: 14px 12px !important; margin: 0 !important; text-align: center; }
#lightgallery .images-name:empty { display: none; }
@media (max-width: 1199px) { #lightgallery.flex-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { #lightgallery.flex-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #lightgallery .images-name { font-size: 14px !important; padding: 10px 8px !important; } }
.category--card .cms-thumb { background: #f6f7f9; border-radius: 10px; }
.category--card .cms-thumb img { object-fit: contain !important; padding: 14px; }
.insta-gallery--card .thumb--wrap { aspect-ratio: 1 / 1; background: #fff; border: 1px solid #e9edf2; border-radius: 12px; }
.insta-gallery--card .thumb--wrap img.fit--img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.cms-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cms-video-kart { background: #fff; border: 1px solid #e9edf2; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,23,28,.05); padding-bottom: 14px; }
.cms-video-oran { position: relative; aspect-ratio: 16 / 9; background: #0b0b0b; }
.cms-video-oran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-content h3.cms-video-baslik { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 14px 16px 0; }
.cms-video-aciklama { font-size: 14px; line-height: 1.6; color: var(--text-color-lt, #6c6c6c); margin: 6px 16px 0; }
.cms-video-aciklama p:last-child { margin-bottom: 0; }
@media (max-width: 991px) { .cms-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) { .cms-video-grid { grid-template-columns: 1fr; } }
@media (min-width: 1400px) {
	.product--details .cms-urun-galeri { flex: 0 0 auto; width: auto; max-width: 64%; }
	.product--details .cms-urun-bilgi { flex: 1 1 0; width: auto; min-width: 0; }
	.product--details .cms-urun-bilgi .details-wrap { max-width: 620px; }
	.product--details .cms-urun-galeri > .row { margin-left: 0; margin-right: 0; }
	.product--details .cms-urun-galeri > .row > .col-12 { width: auto; max-width: none; padding-left: 0; padding-right: 0; }
	.product--details .product--img__preview { width: max-content; max-width: 100%; }
	.product--details .product--img__preview .product--thumb { flex: 0 0 auto; max-width: none; width: min(640px, calc(480px * var(--oran, 1)), calc(64vw - 385px)); }
	.product--details .product--img__preview > .product--thumb:first-child { margin-left: 150px; }
}