@charset "utf-8";

/* CSS Document */

html{

    scroll-behavior:smooth;

}



.bm-top-area, .bm-featured {

	padding-bottom: 0 !important;

}

.bm-featured{

    padding: 70px 0 60px;

}



.bm-hero-wrap{

    max-width: 1025px;

    margin: 0 auto;

}



.bm-title-row{

    display: flex;

    align-items: center;

    gap: 24px;

    margin-bottom: 28px;

}



.bm-title-row h2{

    margin: 0;

    font-family: 'Nexa', sans-serif;

	font-weight: 700;

    font-size: 32px;

    line-height: 1.15;

    color: #2e2e2e;

    white-space: nowrap;

}



.bm-title-line{

    flex: 1;

    height: 1px;

    background: #2e2e2e;

    opacity: .5;

}



.bm-hero-image img{

    width: 100%;

    display:block;

    border-radius:8px 8px 0 0;

}

.bm-hero-image iframe{

    display:block;

    width:100%;

    height:630px;

    border:none;

    border-radius:8px 8px 0 0;

}

.bm-meta{

    background:#fff;

    padding:7px 22px;

    border-radius:0 0 12px 12px;



    display:flex;

    align-items:center;

    justify-content:flex-start !important;

    gap:14px;



    font-size:0.8rem !important;

    color:#666c73;

}

.bm-meta .bm-category{

	font-size: 0.8rem !important;

}

.bm-divider2{

    width:1px;

    height:16px;

    background:#666c73;

    align-self:center;

    flex-shrink:0;

}

.bm-summary{

    margin-top: 18px;

    font-family: 'Quicksand', sans-serif;

    font-size: 1.2rem;

	text-align: justify;

    line-height: 1.7;

    color: #474747;

	padding: 10px;

}



/*  HERO KISMI BİTTİ  ----------------------------------  */



/* =======================================================

   📚 YAZI ALANAI BAŞLANGICI

======================================================= */

.bm-content-area{

    padding:70px 0 0;

	background: #fff;

}

.bm-content-area .container {

	width: 1220px !important;

}

.bm-layout{

    display:grid;

    grid-template-columns: minmax(0, 1fr) 290px;

    gap:30px;

    align-items:start;

	margin-bottom: 100px;

}



.bm-main-content{

    min-width:0;

	margin-right: 50px;



}



 /* SOL - YAZI BÖLÜMÜ ------------- */

/* ======================================================= */

.bm-hook-box{

    background:#fbfbfb;

    border-radius:14px;

    padding:28px 34px;

    box-shadow:0 2px 10px rgba(0,0,0,.16);

    border-left:4px solid #d4b43f;



	transition:.35s cubic-bezier(.22,.61,.36,1);

	width: 800px !important; 

	

	margin-bottom: 60px;

}

.bm-hook-box:hover{

    transform:translateY(-4px);

    box-shadow:0 9px 20px rgba(0,0,0,.08);

    border-left-color:#c7a72c;

}



.bm-hook-title{

    font-family:'Quicksand', sans-serif; 

    font-size:22px;

    margin-bottom:18px;

    color:#2d2d2d;

}

.bm-hook-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px 40px;

}

.bm-hook-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:17px;

    color:#555;

    font-family:'Quicksand', sans-serif; 

}



.bm-hook-item i{

    color:#69b84a;

    font-size:18px;

	transition:.3s ease;

}

.bm-hook-box:hover .bm-hook-item i{

    transform:scale(1.08);

    color:#58a83e;

}





 /*  YAZI BODY BÖLÜMÜ ------------- */

/* ======================================================= */



.bm-article-body{

    font-family:'Source Sans 3', sans-serif;

    color:#4b4b4b;

    font-size:18px;

    line-height:1.85;

}

.bm-article-body h3{

    font-family:'Quicksand', sans-serif;

    font-size:1.3rem;

    font-weight:700;

    color:#c0ae15;

    margin:0 0 10px;

    line-height:1.2;

	scroll-margin-top:120px;

}

.bm-article-body h4{

    font-family:'Quicksand', sans-serif;

    font-size:1.1rem;

    font-weight:700;

    color:#3a3a3a;

    margin:0 0 10px;

    line-height:1.25;

}

.bm-article-body p{

    margin:0 0 28px;

	text-align: justify;

	font-weight: 300;

}

.bm-media-wrap {

    margin:30px 0;

}

.bm-media-wrap img{

    width:54%;

    border-radius:16px;

    display:block;

    transition:.35s ease;

}

.bm-media-wrap.media-right img{

    float:right;

    margin:8px 0 18px 34px;

}

.bm-media-wrap.media-left img{

    float:left;

    margin:8px 34px 18px 0;

}

.bm-media-wide{

    margin:46px 0;

}

.bm-media-wide img{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:0 12px 28px rgba(0,0,0,.08);

    transition:.35s ease;

}

.bm-media-wide img:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 36px rgba(0,0,0,.12);

}

.bm-media-wrap img:hover{

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(0,0,0,.12);

}

.bm-media-wrap::after{

    content:"";

    display:block;

    clear:both;

}

.bm-info-box{

    background:#f2f9fd;

    border-bottom:3px solid #88cdf0;

    padding:20px 34px 15px;

    border-radius:4px;

    margin:34px 44px;

    font-size:1.3rem;

    line-height:1.6;

    font-weight:500;

    color:#2e2e2e;

    text-align:center;

}

.bm-highlight{

    background:#dff2ff;

    padding:2px 6px;

    border-radius:5px;

}



/* AÇIKLAMA KARTLARI ------------*/

.bm-app-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:28px;

    margin:45px 0 34px;

}

.bm-app-card{

    width:230px;

    max-width:100%;



    background:#fff;

    border-radius:14px;

    padding:30px 16px;



    box-shadow:0 4px 13px rgba(0,0,0,.11);

    border-bottom:3px solid #b6a621;



    text-align:center !important;



    transition:.35s cubic-bezier(.22,.61,.36,1);

}

.bm-app-card h4{

    font-family:'Source Sans 3', sans-serif;

    font-size:1.03rem;

    font-weight:700;

    color:#353535;

    margin:0 0 18px;

    line-height:1.25;

    transition:.35s ease;

}

.bm-app-card p{

    font-family:'Source Sans 3', sans-serif;

    font-size:1.03rem;

    line-height:1.3rem;

    color:#666;

    margin:0;

	text-align:center !important;

}

.bm-app-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 36px rgba(0,0,0,.10);

	border-bottom-color:#b89618;

}



.bm-app-card:hover h4{

    color:#d4b43f;

}















 /* SAĞ KART BÖLÜMÜ --------------------------------------------------- */

.bm-sidebar{

    position:sticky;

    top:00;

    right:-320px;



    width:300px;

    height:100vh;



    background:transparent;

    z-index:2000;



    transition:.35s cubic-bezier(.22,.61,.36,1);

    box-shadow:none;



    padding:0 0 0 20px;

    overflow:hidden;

	

	border-left: 1.5px solid #CDCDCD;

}

.bm-sidebar.active{

    right:0;

}

.bm-sidebar-close{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#f3f3f3;

    color:#444;

    margin-left:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    font-size:18px;

	position:relative;

    z-index:2;

}



.bm-sidebar-inner{

    position:sticky;

    top:120px;

	height:100%;

    overflow:auto;

}



/* Her Bir Blok (Widget) */

.bm-widget {

    margin-bottom: 25px;

}



/* Gri Başlık Alanı */

.bm-widget-title {

    background-color: #f7f7f7; 

    border-bottom: 1px solid #eeeeee; 

    padding: 12px 18px;

    margin: 0 0 12px 0;

    font-size: 13px;

    font-weight: 700;

    color: #444;

    letter-spacing: 0.5px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Liste İçerikleri */

.bm-widget-list {

    list-style: none;

    padding: 0 18px; /* Yazıları başlığın biraz içinden başlat */

    margin: 0;

}



.bm-widget-list li {

    margin-bottom: 3px;

}



.bm-widget-list li a {

    display:block;

    padding:8px 0 3px  12px ;

    color:#656565;

    text-decoration:none;

    transition:.25s ease;

    border-left:2px solid transparent;

	position:relative;

	font-size: 13px !important;

	line-height: 1.1;

}

.bm-widget-list a.active::before{

    content:"➜";

    position:absolute;

    left:-6px;

    top:20px;

    transform:translateY(-50%);

    color:#d4b43f;

    font-size:14px;

    font-weight:700;



    animation:bmWiggle .55s ease 2;

}

.bm-widget-list li a:hover {

    color: #d4b43f; 

	transform:translateX(3px);

}

.bm-widget-list a.active{

	color:#d4b43f;

    font-weight:700;

    /*border-left-color:#d4b43f;

    background:rgba(212,180,63,.06);*/

}

@keyframes bmWiggle{



    0%   { transform:translateY(-50%) translateX(0); }



    25%  { transform:translateY(-50%) translateX(4px); }



    50%  { transform:translateY(-50%) translateX(-2px); }



    75%  { transform:translateY(-50%) translateX(3px); }



    100% { transform:translateY(-50%) translateX(0); }



}



/* Sosyal Medya İkonları */

.bm-social-icons {

    display: flex;

	justify-content: center;

    gap: 20px;

    padding: 13px 18px 3px;

}



.social-link {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    text-decoration: none;

    font-size: 16px;

	

	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 

                box-shadow 0.4s ease, 

                filter 0.4s ease;

	cursor: pointer;

    position: relative;

    will-change: transform;

}



.social-link.in { background: #0077b5; }

.social-link.wp { background: #25d366; }

.social-link.link { background: #b1a21e; }



.social-link:hover {

    transform: translateY(-3px); 

    box-shadow: 0 5px 12px rgba(0,0,0,0.1); 

    filter: brightness(1.15);

}

.social-link:active {

    transform: translateY(-2px);

    transition: transform 0.1s ease;

}







/* Geri Bildirim Butonları */

.bm-feedback {

    display: flex;

	justify-content: center;

    gap: 30px;

    padding: 5px 18px;

}



.bm-feedback button {

    background: none;

    border: none;

    color: #777;

    cursor: pointer;

    font-size: 14px;

    display: flex;

    align-items: center;

    ggap: 8px;

    transition: all 0.2s ease;

	

}



.bm-feedback button:hover {

    color: #333;

}

.bm-feedback button i {

    padding-right: 10px;    

}

.bm-sidebar-toggle{

    position:fixed;

    right:0;

    top:58%;



    width:46px;

    height:74px;



    border:none;

    border-radius:14px 0 0 14px;



    background:#d4b43f;

    color:#fff;



    display:flex;

    align-items:center;

    justify-content:center;



    font-size:18px;

    z-index:9999;



    box-shadow:0 8px 20px rgba(0,0,0,.12);



    transition:.35s cubic-bezier(.22,.61,.36,1);

}

.bm-sidebar-toggle.show-toggle{

    opacity:1;

    pointer-events:auto;

}





.bm-sidebar-toggle.hide-toggle{

    transform:translateX(70px);

    opacity:0;

    pointer-events:none;

}







/*  🔥 AKSESUARLAR BÖLÜMÜ */

.aksesuarlar-section{

  width: 100%;

  background: #f7f7f7;

  padding: 30px 20px;

	font-family: 'Quicksand', sans-serif;

	min-height: 600px;

	

  position: relative;

  overflow: hidden;

	z-index: 1;

}

/* Ters çevrilmiş görsel */

.aksesuarlar-section::after {

content: "";

  position: absolute;

  left: 0;

  bottom: 0;



  width: 100%;

  height: 300px;



  background-image: url("../images/bg-baklava.webp");

  background-position: bottom center;

  background-repeat: no-repeat;

  background-size: cover;



  transform: scaleY(-1);

z-index: -1;

  pointer-events: none;



}



/* Grid */

.aksesuar-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, 210px);

  justify-content: center;

  gap: 24px;

}



.aksesuar-card {

  width: 210px;

  height: 280px;

  background: #fff;

  border-radius: 10px;

  padding: 8px 3px 10px 3px;

  text-align: left;



  box-shadow: 0 2px 10px rgba(0,0,0,0.08);

  transition: all 0.3s ease;

  cursor: pointer;

	flex: 0 0 auto;

  scroll-snap-align: start;

}





.img-box {

  width: 204px;

  height: 183px;

  background: #f0f0f0;

  border-radius: 5px 5px 0 0;



  display: flex;

  align-items: center;

  justify-content: center;



  margin: 0 auto 12px auto;

  overflow: hidden;

}



.img-box img {

  max-width: 90%;

  max-height: 90%;

  object-fit: contain;

  transition: transform 0.3s ease;

	margin: auto;

}



/* Hover’da hafif büyüme */

.aksesuar-card:hover .img-box img {

  transform: scale(1.05);

}



.aksesuar-card h4 {

  font-size: 16px;

  font-weight: 700;

	padding-left: 10px;

  margin-bottom: 4px;

}



.aksesuar-card p {

  font-size: 14px;

	line-height: 1;

  color: #777;

  margin-bottom: 0;

	padding-left: 10px;

}



.aksesuar-card span {

  font-size: 13px;

  color: #999;

	padding-left: 10px;

}



/* ✨ Hover efekti */

.aksesuar-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 24px rgba(0,0,0,0.12);

}

/*  AKSEUSAR BÖLÜMÜ BİTTİ  */



.video-frame iframe{

    width:100%;

    height:520px;

    border:none;

    border-radius:18px;

}







.bm-diagram-block{

    margin:50px 0;

    padding:28px;



    background:#ffffff;

    border-radius:16px;



    box-shadow:0 8px 20px rgba(0,0,0,.06);

    border:1px solid #f0f0f0;



    transition:.35s ease;

}



.bm-diagram-block:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.bm-diagram-header{

    margin-bottom:18px;

}



.bm-diagram-header h4{

    font-family:'Quicksand', sans-serif;

    font-size:22px;

    font-weight:700;

    color:#2e2e2e;

    margin:0;

}



.bm-diagram-header span{

    display:block;

    font-size:14px;

    color:#888;

    margin-top:4px;

}



.bm-diagram-media{

    overflow:hidden;

    border-radius:12px;

    margin-bottom:18px;

}



.bm-diagram-media img{

    width:100%;

    display:block;

    transition:.4s ease;

}

.bm-diagram-block:hover .bm-diagram-media img{

    transform:scale(1.015);

}

.bm-diagram-footer{

    font-family:'Source Sans 3', sans-serif;

    font-size:16px;

    line-height:1.6;

    color:#666;

}



.bm-diagram-header{

    border-bottom:1px solid #f3f3f3;

    padding-bottom:10px;

}

.bm-mini-note{

    font-size:14px;

    color:#888;

    text-align:center !important;

    margin-top:5px;

	font-style:italic;

}

.video-frame video{

    width:100%;

    display:block;

    border-radius:18px;

    object-fit:cover;

	transition:.4s ease;

}

.video-frame:hover video{

    transform:scale(1.01);

}







@media(min-width:992px){

    .bm-sidebar-toggle,.bm-sidebar-close {

        display:none;

    }

	.bm-layout {

        display: grid;

        grid-template-columns: 1fr 320px; /* İçerik ve Sidebar yan yana */

        gap: 0; 

    }



    .bm-sidebar {

        position: sticky;

        top: 80px; /* Sayfa kayarken yukarıda duracağı mesafe */

        height: calc(100vh - 80px);

        display: block !important;

    }



    .bm-sidebar-toggle, .bm-sidebar-close {

        display: none !important; /* Masaüstünde butonları gizle */

    }

}



@media(max-width:991px){

   /* HERO BÖLÜMÜ */

    .bm-title-row{

        display:block;

    }



    .bm-title-line{

        display:none;

    }



    .bm-title-row h2{

        white-space: normal;

        font-size: 30px;

    }



    .bm-summary{

        font-size: 18px;

    }

	

	/* YAZI BÖLÜMÜ */

	.bm-layout{

        grid-template-columns:1fr;

        gap:40px;

    }



    .bm-sidebar{

		display:block;

        position:fixed;

        top:0;

        right:-320px;

        width:300px;

        height:100vh;

        background:#fff;

        z-index:9999;

        transition:.35s ease;

        box-shadow:-10px 0 20px rgba(0,0,0,.08);

        border-left: none;

		padding-right: 20px;

    }



    .bm-sidebar.active{

        right:0;

    }

	 .bm-sidebar-toggle{

        display:flex;

    }

	





}





@media(max-width:767px){

	

	.bm-content-area .container {

	   width: 100% !important;

    }

	

	.bm-main-content{

	   margin-right: 0;

		padding: 10px;

    }



    .bm-hook-list{

        grid-template-columns:1fr;

    }



    .bm-hook-box{

        padding:22px;

		width: 100% !important;

		margin: 0 auto 30px;

    }

	.bm-hook-title{

		font-size:1.1rem;

	}

	.bm-hook-item {

		font-size:0.9rem;

	}

	.bm-article-body{

        font-size:18px;

        line-height:1.75;

    }



    .bm-article-body h3{

        font-size:28px;

    }



    .bm-info-box{

        padding:22px;

        font-size:1rem;

    }

	.bm-media-wrap img{

        float:none !important;

        width:100%;

        margin:0 0 22px !important;

    }



    .bm-article-body h4{

        font-size:24px;

    }

	.bm-media-wide{

        margin:34px 0;

    }



    .bm-media-wide img{

        border-radius:14px;

    }



    .bm-media-caption{

        font-size:15px;

    }

	.bm-app-grid{

        gap:18px;

    }



    .bm-app-card{

        width:100%;

        padding:24px 20px;

    }



    .bm-app-card h4{

        font-size:24px;

    }



    .bm-app-card p{

        font-size:16px;

    }

	

	.video-frame iframe{

		height:260px;

	}



}

