/*
 * Mega menu content CSS - shared between the frontend nav dropdown AND the
 * admin builder's live preview pane, so what the admin sees while editing
 * is pixel-for-pixel what visitors see (same classes, same stylesheet).
 * Deliberately plain CSS (not a block's style.scss) since content is no
 * longer block-based - see inc/mega-menu.php header comment.
 */

/*
 * Ozgunluk (specificity) notu: temanin kendi ".navigation .menu .sub-menu"
 * kurali (Ozellestirici > Header & Nav Menu > "Mega Menu: Sub-Nav BG"
 * ayarindan gelen bir arkaplan rengi tasir) UC sinif secicisi kullaniyor,
 * bizim tek sinifli ".sdb-mega-menu" kuralimizdan daha yuksek oncelikli -
 * bu yuzden bizim renk her zaman KAYBEDIYORDU (kullanici maviye ayarlasa
 * bile temanin varsayilan/bordo rengi gorunuyordu). Ayni zincire ".navigation
 * .menu" ekleyip kendi sinifimizla (".sdb-mega-menu") birlestirerek daha
 * yuksek bir ozgunluk elde ediyoruz - boylece !important gerekmiyor.
 */
/*
 * v12 (2026-08-13) - "premium" tasarim brifi: duz beyaz/gri yerine cok
 * hafif bir gradyan + iki kose dokusu (sag-alt: teknik cizim/blueprint
 * noktali izgara, sol-alt: dalga) - ikisi de KASITLI olarak cok dusuk
 * opaklikta (arka planda hissedilsin, dikkat cekmesin). Kullanicinin
 * "Mega Menu: Sub-Nav BG" ozellestirici rengini (--mm-bg-color)
 * hala destekliyoruz ama varsayilan artik duz #fff degil, brifteki
 * radial-gradient - kullanici o ayari degistirirse (bg rengi secerse)
 * gradyanin ustune yine de kendi rengi kazanir (degisken oncelikli).
 */
.navigation .menu .sub-menu.sdb-mega-menu {
	/* background-color: Ozellestirici'nin "Mega Menu: Sub-Nav BG" ayari
	   (--mm-bg-color) HALA gecerli, duz bir renk olarak. background-image
	   ise KASITLI OLARAK ayri ve SABIT bir katman listesi - degiskeni
	   background-image icine (background-color yerine) koymaya
	   calismak, degisken duz bir renk oldugunda (COGU durumda) gecersiz
	   bir <image> degeri uretip TUM background-image kuralinin
	   yoksayilmasina yol aciyordu (CSS: coklu deger listesinde tek bir
	   gecersiz deger butun ozelligi gecersiz kilar). Bu yuzden renk ve
	   gorsel katmanlari BILINCLI olarak iki ayri ozellige bolundu. */
	background-color: var(--mm-bg-color, #f7f9fc);
	background-image:
		radial-gradient(120% 120% at 0% 0%, rgba(247, 249, 252, .92) 0%, rgba(242, 246, 251, .92) 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%236366f1' stroke-width='1' opacity='0.06'%3E%3Cpath d='M0 20h140M0 60h140M0 100h140M20 0v140M60 0v140M100 0v140'/%3E%3Ccircle cx='60' cy='60' r='24'/%3E%3C/g%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Cpath d='M0 90 Q 55 40 110 90 T 220 90 V140 H0 Z' fill='%230ea5e9' opacity='0.04'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: 0 0, 100% 100%, 0 100%;
	background-size: 100% 100%, 140px 140px, 220px 140px;
	box-shadow: 0 20px 40px rgba(15, 23, 42, .06);
	overflow: hidden;
}

/*
 * ".sdb-mm-keep-open" sinifi IKI ayri JS mekanizmasi tarafindan
 * kullaniliyor (bkz. mega-menu-frontend.js): (1) fare "guvenli gecis
 * payi" - initHoverGracePeriod, mouseenter'da ekleyip fare gercekten
 * disari cikip bir sure (400ms) geri donmezse kaldiriyor; (2) 2026-09-05
 * eklendi - initClickToOpen, tetikleyici linke TIKLAMA/DOKUNMA ile ac-
 * kapa (akilli tahta gibi fare/hover'i olmayan dokunmatik ekranlar
 * icin - bu ekranlarda ":hover" hic tetiklenmedigi icin mega menu
 * daha once HICBIR SEKILDE acilamiyordu). Temanin kendi ":hover" kurali
 * (style.css ~5670) sadece fare fiziksel olarak li/.sub-menu kutusunun
 * UZERINDEYKEN gecerli - capraz hareketin gectigi kisa "olu bolge"de
 * VEYA dokunmatik ekranlarda (hic ":hover" olmadigi icin) bu kural
 * devre disi kaliyordu. !important, temanin ayni ozelligi
 * (visibility/opacity/pointer-events) ayarlayan ":hover" kuralinin
 * ustune KASITLI olarak yaziyor - bu, JS'in kontrolu ELE ALDIGI durumlar
 * icin guvenli bir cakisma.
 */
.navigation .menu > li.sdb-mm-keep-open > .sub-menu.sdb-mega-menu {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/*
 * 2026-09-05: off-canvas (hamburger) mobil menude mega-menu'lerin
 * goster/gizle mantigi. Temanin kendi off-canvas acma kurali
 * (".mobile-menu .item-active > ul { display:block }") SADECE <ul>
 * hedefliyor - bizim iceriğimiz <div class="sdb-mega-menu"> oldugu icin
 * bu kural bize hic uygulanmiyor, kendi esdegerimizi tanimliyoruz.
 * Ayrica masaustu ":hover"e gore gizli-varsayilan/mutlak-konumlu CSS'i
 * (visibility/opacity/pointer-events/position) burada GEREKSIZ, off-
 * canvas baglaminda normal blok-akisli bir eleman olarak davranmali -
 * bu yuzden bu ozellikleri de acikca sifirliyoruz.
 */
.mobile-menu .sdb-mega-menu {
	display: none;
	position: static;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	width: 100%;
	margin: 6px 0 0;
	box-shadow: none;
	border: none;
}

.mobile-menu li.item-active > .sdb-mega-menu {
	display: block;
}

.sdb-mm-mobile-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	cursor: pointer;
}

.sdb-mega-menu-inner {
	width: 100%;
	padding: 26px 32px;
	box-sizing: border-box;
}

.mm-columns {
	display: flex;
	gap: 0;
	align-items: flex-start;
	width: 100%;
}

.mm-column {
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 28px;
}

.mm-column:first-child {
	padding-left: 0;
}

.mm-column:last-child {
	padding-right: 0;
}

.mm-column + .mm-column {
	border-left: 1px solid #eef2f7;
}

.mm-heading-wrap {
	margin: 0 0 14px;
}

.mm-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	font-family: Inter, Poppins, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: var(--mm-heading-size, 16px);
	color: var(--mm-heading-color, #0f172a);
}

.mm-heading-link {
	/* .mm-heading'in KENDISI (bkz. sdb_mm_item_html) - satirin tam
	 * genisligini (width:100%) devralir, boylece hover kutusu yazi
	 * kisa/uzun fark etmeksizin her zaman ayni genislikte olur. */
	margin: -6px -8px;
	padding: 6px 8px;
	width: calc(100% + 16px);
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mm-heading-link:hover {
	background-color: var(--mm-link-hover-bg, rgba(99, 102, 241, .06));
}

.mm-heading-icon {
	flex: 0 0 auto;
	width: 53px;
	height: 53px;
	font-size: 53px;
}

.mm-heading-icon-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/*
 * Ozel yuklenen ikon + renk birlikte secilmisse: gorsel <img> yerine bir
 * CSS mask olarak basiliyor - gorselin ALFA (seffaflik) kanali sablon
 * gibi kullanilip, gorunen alan background-color ile doluyor. Sadece
 * SEFFAF ARKA PLANLI (PNG/SVG) tek-renkli/siluet ikonlarda duzgun
 * calisir - duz bir JPG (seffafligi olmayan) yuklenirse tum dikdortgen
 * alan doldugu icin sonuc bir ikon degil, renkli bir kare gibi gorunur.
 */
.mm-heading-icon-mask {
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/*
 * 2026-09-06: kullanici mega menu ogeleri arasina "bosluk ya da cizgi"
 * ekleyebilecegi ogeler istedi - iki yeni item tipi eklendi (bkz.
 * inc/mega-menu.php sdb_mm_sanitize_data()/sdb_mm_item_html() ve
 * assets/js/mega-menu-builder.js newItem()/Item()). Ikisi de saf gorsel,
 * link/metin tasimiyor.
 */
.mm-divider {
	border: none;
	border-top: 1px solid #e5e7eb;
	margin: 8px 0;
}

.mm-spacer {
	display: block;
	width: 100%;
}

/*
 * 2026-09-06: kısa başlıklı linkleri ("Kamlar" / "Kamalar" gibi) dikey
 * yer kaplamadan yan yana göstermek için ("Yanyana Göster" onay kutusu,
 * bkz. inc/mega-menu.php sdb_mm_column_items_html()). İçindeki
 * `.mm-link`'lerin kendi alt boşluğu sıfırlanıp bu satırın kendi alt
 * boşluğu kullanılıyor - aksi halde çift boşluk (satırın + linklerin)
 * birikirdi.
 */
.mm-link-pair {
	display: flex;
	gap: 14px;
	margin: 0 0 2px;
}

.mm-link-pair .mm-link {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.mm-link {
	display: block;
	margin: 0 0 2px;
}

.mm-link a {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 -10px;
	padding: 7px 10px;
	border-radius: 8px;
	font-family: Inter, Poppins, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 500;
	font-size: var(--mm-link-size, 14px);
	line-height: 1.6;
	color: var(--mm-link-color, #334155);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}

.mm-link a::before {
	content: "\276F";
	font-size: 10px;
	color: #94a3b8;
	transition: color .15s ease;
}

.mm-link a:hover {
	color: var(--mm-link-hover-color, #6366f1);
	background-color: var(--mm-link-hover-bg, rgba(99, 102, 241, .06));
}

.mm-link a:hover::before {
	color: var(--mm-link-hover-color, #6366f1);
}

.mm-link--indent a {
	margin-left: 14px;
	padding-left: 10px;
	font-size: calc(var(--mm-link-size, 14px) - 1px);
	color: var(--mm-link-indent-color, #64748b);
}

.mm-link--indent a::before {
	content: "\2013";
	font-size: 12px;
}

/*
 * 2026-09-07: kullanıcı "contain" ile bile görselin sabit bir kutuya göre
 * büyütülüp/küçültülmesini istemedi - "attığım görselin boyutları neyse o
 * boyutlarda görünsün" dedi. Sabit yükseklikli kutu (90px/190px) ve
 * background-image tamamen kaldırıldı; artık gerçek bir <img> etiketi
 * (bkz. inc/mega-menu.php sdb_mm_item_html() aynı tarih notu) kendi doğal
 * piksel boyutunda basılıyor - TEK sınır `max-width:100%` (sütun
 * genişliğini aşmasın diye, aksi halde büyük bir görsel mega menüyü
 * yatay olarak taşırabilirdi). Kutu artık img'in etrafını SIKIca sarıyor
 * (`width:fit-content`) - block eleman olduğu için hâlâ kendi satırında
 * dikey istifleniyor, yan yana kaymıyor.
 */
.mm-promo,
.mm-promo-link {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
}

.mm-promo {
	position: relative;
	background-color: #eceef2;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 10px;
	text-decoration: none;
}

.mm-promo-link {
	margin: 0 0 10px;
}

.mm-promo-link .mm-promo {
	margin: 0;
}

.mm-promo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

.mm-promo.mm-promo-small,
.mm-promo.mm-promo-large {
	height: auto;
}

/*
 * 2026-09-09: kullanıcı üst yazıyı sağ-ortaya taşımayı, fontu
 * büyütmeyi, ve Enter ile satır kırabilmeyi istedi (bir referans görsel
 * paylaştı - sağda dikey ortalı, kalın, iki satıra bölünmüş metin).
 * `white-space: pre-line` metindeki gerçek \n karakterlerini satır
 * kırma olarak render ediyor - textarea'dan gelen \n hem PHP'de
 * (sanitize_textarea_field, esc_html \n'i siler değil) hem JS'te
 * (React düz metin child'ı \n'i olduğu gibi basar) korunuyor, tek
 * gereken bu CSS kuralıydı.
 */
.mm-promo-caption {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	max-width: 55%;
	text-align: right;
	white-space: pre-line;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.mm-promo-large .mm-promo-caption {
	right: 18px;
	font-size: 22px;
}

/*
 * Promo KART (yeni, 2026-08-12) - eski ".mm-promo" (goruntu uzerine yazi
 * bindirme) tasariminin YANINDA, ONU DEGISTIRMEDEN eklendi (bazi mevcut
 * mega menulerde eski tip zaten kullaniliyordu - bkz. "Temel Imalat
 * Islemleri" grubundaki kumpas/mikrometre simulator linkleri). Gorsel usttte,
 * baslik+alt yazi altta, sag alt kosede vurgu renkli daire buton.
 */
.mm-promo-card {
	position: relative;
	display: block;
	text-decoration: none;
	border-radius: 16px;
	background: var(--mm-promo-tint, #eef2fb);
	padding: 10px;
	box-sizing: border-box;
	transition: transform .15s ease, box-shadow .15s ease;
}

.mm-promo-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
}

/*
 * 2026-09-07: sabit 4:3 kutu + object-fit:contain de görseli sabit
 * boyuta göre ölçeklemeye devam ediyordu - kullanıcı gerçek dogal
 * boyutta gösterilmesini istedi (bkz. .mm-promo'daki aynı tarihli not).
 * aspect-ratio kaldırıldı, img artık kendi doğal boyutunda, sadece
 * kartın genişliğini aşmasın diye max-width:100% ile sınırlı.
 */
.mm-promo-card-media {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(0, 0, 0, .04);
}

.mm-promo-card-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

.mm-promo-card-body {
	display: block;
	padding: 12px 34px 2px 4px;
}

.mm-promo-card-title {
	display: block;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	color: #1a1a2e;
}

.mm-promo-card-subtitle {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.4;
	color: #767676;
}

.mm-promo-card-arrow {
	position: absolute;
	right: 14px;
	bottom: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mm-promo-accent, #1f6fed);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}

.mm-promo-card-arrow .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.mm-promo-card:hover .mm-promo-card-arrow {
	transform: translateX(3px);
}

/*
 * Gruplu mega menu (hepsiburada.com tarzi): solda geçiş listesi, uzerine
 * gelince (hover) sagdaki sutunlar degisir. Tum panellerin HTML'i baştan
 * basiliyor ama sadece ".is-active" olan gorunur - gecis JS ile sadece
 * sinif degistirmekten ibaret, panel icerigi yeniden cizilmiyor.
 */
.mm-with-groups {
	display: flex;
	align-items: stretch;
	width: 100%;
}

/*
 * v13 (2026-08-13) "Sol Menü Arka Planı Tasarım Brifi" - duz gri zemin
 * yerine: (1) cok hafif dikey gradyan, (2) panelin alt ~%25'inde cok
 * dusuk opaklikli (0.04-0.06) dekoratif sekiller (dalga, buyuk daire,
 * cokgen, izometrik kup, nokta matrisi) - TEK bir SVG data-URI icinde
 * birlestirilip sadece alta ("left bottom") sabitlendi, boylece panel
 * ne kadar uzun olursa olsun (kac grup oldugu degisken) dekorasyon
 * SADECE alt kisimda kaliyor, ust kisim sade gradyanla kaliyor.
 * (3) kenar golgesi + ince kenarlik, (4) tum koselerde 18px yuvarlama -
 * panel artik disariya "yapisik bir serit" degil, hafifce ayrilmis,
 * kendi basina duran bir kart gibi gorunuyor.
 */
.mm-group-nav {
	position: relative;
	overflow: hidden;
	/* 2026-09-05: 230px -> 260px (kullanici istegi - sol alan biraz daha
	   genis olsun). Bu genislik .mm-with-groups'un toplam genisligini
	   (temanin --main-width'i) DEGISTIRMIYOR, sadece flex:1 olan
	   .mm-group-panels'tan (sagdaki sutunlar) alan calıyor - yani sag
	   taraf otomatik olarak daralıyor, bu kasitli/beklenen bir sonuc. */
	flex: 0 0 260px;
	background-color: #f8fafd;
	background-image:
		linear-gradient(180deg, #fcfcfd 0%, #f8fafd 45%, #f4f7fb 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='280'%3E%3Ccircle cx='10' cy='270' r='100' fill='%233b82f6' opacity='0.05'/%3E%3Cpath d='M-10 230 Q 50 200 110 230 T 240 230' stroke='%237c3aed' stroke-width='2' fill='none' opacity='0.05'/%3E%3Cpolygon points='178,146 206,161 206,189 178,204 150,189 150,161' fill='none' stroke='%230ea5e9' stroke-width='1.5' opacity='0.05'/%3E%3Cg opacity='0.06' fill='%236366f1'%3E%3Ccircle cx='182' cy='66' r='2.5'/%3E%3Ccircle cx='196' cy='66' r='2.5'/%3E%3Ccircle cx='210' cy='66' r='2.5'/%3E%3Ccircle cx='182' cy='80' r='2.5'/%3E%3Ccircle cx='196' cy='80' r='2.5'/%3E%3Ccircle cx='210' cy='80' r='2.5'/%3E%3C/g%3E%3Cpath d='M40 100 L70 84 L100 100 L100 132 L70 148 L40 132 Z M70 84 L70 116 M40 100 L70 116 M100 100 L70 116' stroke='%238b5cf6' stroke-width='1.2' fill='none' opacity='0.05'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat;
	background-position: 0 0, left bottom;
	background-size: 100% 100%, 100% auto;
	border: 1px solid #eef2f7;
	border-radius: 18px;
	box-shadow: 0 10px 35px rgba(15, 23, 42, .04);
	/* Sol padding (2026-09-05'ten once 4px idi) yariya dusuruldu (2px) -
	   sag/ust/alt ayni kaldi, sadece sol tarafta sekmelere daha fazla
	   yatay alan birakmak icin. */
	padding: 6px 4px 6px 2px;
	margin: -2px 24px -2px 0;
}

.mm-group-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px;
	margin-bottom: 3px;
	font-weight: 600;
	font-size: var(--mm-group-tab-size, 14px);
	color: var(--mm-group-tab-color, #333333);
	cursor: pointer;
	border-radius: 10px;
	transition: background .18s ease, color .18s ease;
}

.mm-group-tab-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: inherit;
	opacity: .75;
}

.mm-group-tab-icon-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 4px;
}

.mm-group-tab-label {
	flex: 1 1 auto;
}

.mm-group-tab-chevron {
	/* Pasif sekmelerde tamamen kaldırılıyor (display:none) - sadece
	   opacity:0 ile gizlenseydi 14px+gap genişliğinde bir boşluk HER
	   sekmede (aktif olmasa bile) ayrılmaya devam ederdi, bu da metnin
	   tek satıra sığması için gereken alanı boşuna çalardı. */
	display: none;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	font-size: 14px;
}

.mm-group-tab:not(.is-active):hover {
	background: rgba(99, 102, 241, .05);
}

.mm-group-tab.is-active {
	color: var(--mm-group-tab-active-color, #ffffff);
	/* İki renk de aynıysa (varsayılan/özelleştirilmemiş durum) bu düz bir
	   renk gibi görünür - gradyan sadece iki farklı renk seçildiğinde
	   fark edilir oluyor. */
	background: linear-gradient(135deg, var(--mm-group-tab-active-bg, #1f4acb), var(--mm-group-tab-active-bg-2, #1f4acb));
	box-shadow: 0 6px 16px rgba(99, 102, 241, .22);
}

.mm-group-tab.is-active .mm-group-tab-icon {
	opacity: 1;
}

.mm-group-tab.is-active .mm-group-tab-chevron {
	display: flex;
}

/*
 * Mobil (off-canvas) duzen - masaustunde ayni HTML/CSS hover-panel
 * olarak kullanildigi icin .sdb-mega-menu-inner'in 32px'lik sol/sag
 * padding'i, .mm-group-nav'in sabit 230px genisligi VE .mm-with-groups/
 * .mm-columns'un yan-yana (row) duzeni orada kasitli - ama dar (off-
 * canvas) baglamda bunlar tek satira sigmayan etiketlere ve asiri dar
 * sutunlara yol aciyordu. Tema'nin kendi mobil kirilma noktasiyla
 * (bkz. style.css .smart-head { display:none } @media max-width:940px)
 * tutarli bir esik kullanildi.
 *
 * 2026-09-05: grup gecisi artik tiklama/dokunma ile de calisiyor (bkz.
 * mega-menu-frontend.js initClickToOpen) - bu yuzden .mm-group-panels
 * (sag/asagi icerik paneli, GERCEK linkleri icerir) ONCEDEN burada
 * "zaten islevsiz" diye display:none yapilmisti, o karar artik GECERSIZ
 * ve panel tekrar gorunur kilindi. Yan-yana (nav solda, panel saginda)
 * yerine ALT ALTA istiflendi - dar ekranda ikisini yan yana sigdirmak
 * okunmaz sutunlar dogururdu.
 */
@media (max-width: 940px) {
	.sdb-mega-menu-inner {
		padding: 18px 14px;
	}

	.mm-with-groups {
		flex-direction: column;
	}

	.mm-group-nav {
		width: 100%;
		max-width: 100%;
		margin: 0 0 14px;
	}

	.mm-group-tab {
		padding: 10px 6px;
	}

	.mm-group-panels {
		width: 100%;
	}

	.mm-columns {
		flex-direction: column;
	}

	.mm-column {
		padding: 4px 0 !important;
	}

	.mm-column + .mm-column {
		border-left: none;
		border-top: 1px solid #eef2f7;
		margin-top: 10px;
		padding-top: 14px !important;
	}
}

.mm-group-panels {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}

.mm-group-panel {
	display: none;
}

.mm-group-panel.is-active {
	display: block;
	animation: mm-group-fade .15s ease;
}

@keyframes mm-group-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}