*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

body{
background:#ececec;
color:#333;
font-size:12px;
line-height:1.4;
}

a{
text-decoration:none;
color:#333;
}

img{
max-width:100%;
display:block;
}

.wrapper{
width:980px;
max-width:calc(100% - 20px);
margin:auto;
}

.desktop-only{
display:block;
}

.mobile-only{
display:none;
}

/* ÜST MİNİ BAR */

.topline{
background:#f7f7f7;
border-bottom:1px solid #d9d9d9;
}

.topline-inner{
height:28px;
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
font-size:11px;
color:#7a7a7a;
}

.topline-inner a{
font-size:11px;
color:#666;
}

.topline-social{
display:flex;
align-items:center;
gap:4px;
}

.topline-social a{
width:16px;
height:16px;
border-radius:2px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:10px;
font-weight:bold;
line-height:1;
}

.bg-fb{background:#3b5998;}
.bg-tw{background:#1da1f2;}
.bg-ig{background:#d62976;}
.bg-in{background:#0077b5;}
.bg-yt{background:#ff0000;}
.bg-wa{background:#25d366;}

/* HEADER */

.header{
background:#fff;
border-bottom:1px solid #d5d5d5;
}

.header-row{
display:flex;
align-items:center;
gap:18px;
padding:12px 0 10px;
}

.logo-area{
width:260px;
display:flex;
align-items:center;
}

.logo-area img{
max-height:58px;
width:auto;
}

.search-area{
flex:1;
}

.search-top-links{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
}

.search-top-links a{
font-size:11px;
color:#666;
border:1px solid #d6d6d6;
background:#fafafa;
padding:3px 7px;
line-height:1;
border-radius:2px;
}

.search-form{
display:flex;
height:34px;
}

.search-form input{
flex:1;
border:1px solid #bdbdbd;
border-right:none;
padding:0 12px;
font-size:12px;
outline:none;
background:#fff;
}

.search-form button{
width:42px;
border:1px solid #d9741f;
background:#ef8b27;
color:#fff;
font-size:17px;
cursor:pointer;
font-weight:bold;
}

.head-right{
width:180px;
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}

.mini-account,
.mini-cart{
border:1px solid #d0d0d0;
background:#fafafa;
padding:6px 9px;
min-height:34px;
display:flex;
align-items:center;
gap:6px;
font-size:11px;
border-radius:2px;
}

.mini-cart strong{
color:#d95800;
}

.mini-account:hover,
.mini-cart:hover{
background:#f2f2f2;
}

/* NAV */

.main-nav{
background:#fff;
border-top:1px solid #dedede;
border-bottom:1px solid #d6d6d6;
}

.main-nav ul{
list-style:none;
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
padding:8px 0;
}

.main-nav a{
font-size:11px;
color:#4e4e4e;
}

.main-nav a:hover{
color:#b30021;
}

/* İKON ŞERİT */

.icon-strip{
background:#fff;
padding:10px 0 14px;
}

.icon-strip-row{
display:flex;
align-items:flex-start;
gap:10px;
overflow:hidden;
}

.icon-chip{
width:70px;
flex:0 0 70px;
text-align:center;
}

.icon-chip .icon-thumb{
width:48px;
height:48px;
border-radius:50%;
overflow:hidden;
border:2px solid #d9d9d9;
background:#fff;
margin:0 auto 4px;
}

.icon-chip .icon-thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.icon-chip span{
display:block;
font-size:9px;
line-height:1.2;
color:#555;
min-height:22px;
}

/* ANA ALAN */

.home-main{
padding:0 0 20px;
}

.hero-area{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
gap:12px;
margin-bottom:16px;
align-items:stretch;
}

.hero-left{
background:#fff;
border:1px solid #c9c9c9;
height:420px;
position:relative;
overflow:hidden;
min-width:0;
}

.hero-slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity .45s ease;
}

.hero-slide.active{
opacity:1;
z-index:2;
}

.hero-slide a,
.hero-slide img{
display:block;
width:100%;
height:100%;
}

.hero-slide img{
object-fit:cover;
object-position:center top;
}

.hero-placeholder{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background:#ddd;
color:#666;
font-weight:bold;
}

.hero-dots{
position:absolute;
left:50%;
bottom:8px;
transform:translateX(-50%);
display:flex;
gap:6px;
z-index:5;
}

.hero-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.7);
border:1px solid rgba(0,0,0,.2);
cursor:pointer;
}

.hero-dot.active{
background:#b40021;
}

.hero-right{
display:grid;
grid-template-rows:1fr 1fr;
gap:12px;
height:420px;
min-width:0;
}

.promo-box{
background:#fff;
border:1px solid #c9c9c9;
height:100%;
min-height:0;
overflow:hidden;
position:relative;
}

.promo-box > a,
.promo-fallback,
.promo-fill-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
width:100%;
height:100%;
}

.promo-box > a,
.promo-fill-link{
padding:0;
}

.promo-box > a img,
.promo-fill-link img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.promo-fallback{
padding:16px;
background:#fff;
}

.promo-fallback-text{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
}

.promo-title{
font-size:13px;
font-weight:bold;
color:#cf5f00;
margin-bottom:8px;
text-transform:uppercase;
}

.promo-name{
font-size:20px;
font-weight:bold;
line-height:1.3;
color:#333;
margin-bottom:10px;
word-break:break-word;
}

.promo-price{
font-size:24px;
font-weight:bold;
color:#d95800;
margin-bottom:6px;
}

.promo-small{
font-size:13px;
color:#666;
}

.promo-thumb{
width:140px;
height:140px;
border:1px solid #eee;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 140px;
overflow:hidden;
}

.promo-thumb img{
width:100%;
height:100%;
object-fit:contain;
}

/* BÖLÜM BAŞLIKLARI */

.section-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:8px;
}

.section-head h2{
font-size:22px;
color:#f05a00;
font-weight:normal;
line-height:1;
}

.section-arrows{
display:flex;
align-items:center;
gap:8px;
}

.arrow-btn{
width:24px;
height:24px;
border:1px solid #d6d6d6;
background:#fff;
border-radius:4px;
color:#c38a34;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
cursor:pointer;
}

/* ÜRÜN SATIRI */

.product-row-wrap{
position:relative;
margin-bottom:16px;
}

.product-row{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
}

.catalog-card{
background:#fff;
position:relative;
min-height:214px;
}

.catalog-badge{
position:absolute;
top:0;
left:0;
background:#b50027;
color:#fff;
font-size:9px;
padding:2px 8px;
z-index:2;
}

.catalog-image{
height:132px;
border:1px solid #eee;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
margin-bottom:6px;
}

.catalog-image img{
width:100%;
height:100%;
object-fit:contain;
}

.catalog-name{
font-size:10px;
line-height:1.3;
color:#444;
min-height:28px;
margin-bottom:4px;
}

.catalog-old{
font-size:10px;
color:#b54a4a;
text-decoration:line-through;
margin-bottom:2px;
}

.catalog-price{
font-size:11px;
color:#e05b00;
font-weight:bold;
margin-bottom:7px;
}

.catalog-btn{
display:inline-block;
background:#b50027;
color:#fff;
font-size:10px;
padding:5px 10px;
border-radius:2px;
}

.discount-round{
position:absolute;
right:2px;
bottom:26px;
width:38px;
height:38px;
border-radius:50%;
background:#b50027;
color:#fff;
font-size:9px;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.1;
}

/* İKİLİ BİLGİ KUTUSU */

.double-boxes{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:16px;
}

.info-panel{
background:#fff;
border:1px solid #b50027;
min-height:160px;
}

.info-panel-head{
height:24px;
background:#b50027;
color:#fff;
font-size:11px;
font-weight:bold;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 10px;
text-transform:uppercase;
}

.info-panel-body{
padding:8px;
}

.author-feature{
display:grid;
grid-template-columns:82px 1fr;
gap:10px;
padding-bottom:10px;
border-bottom:1px solid #e2e2e2;
margin-bottom:10px;
}

.author-feature img{
width:82px;
height:82px;
object-fit:cover;
border:1px solid #ddd;
}

.author-feature h3{
font-size:12px;
color:#a14a00;
margin-bottom:5px;
}

.author-feature p{
font-size:10px;
line-height:1.45;
color:#666;
}

.tiny-btn{
display:inline-block;
margin-top:6px;
background:#b50027;
color:#fff;
font-size:9px;
padding:4px 8px;
border-radius:2px;
}

.mini-author-row{
display:grid;
grid-template-columns:1fr 80px;
gap:10px;
align-items:center;
}

.mini-author-row img{
width:80px;
height:80px;
object-fit:cover;
border:1px solid #ddd;
}

.mini-author-row h4{
font-size:11px;
color:#e05b00;
margin-bottom:4px;
}

.mini-author-row p{
font-size:10px;
line-height:1.45;
color:#666;
}

.scala-list{
display:flex;
flex-direction:column;
gap:8px;
}

.scala-item{
display:grid;
grid-template-columns:72px 1fr;
gap:8px;
align-items:flex-start;
padding-bottom:8px;
border-bottom:1px solid #ececec;
}

.scala-item:last-child{
border-bottom:none;
padding-bottom:0;
}

.scala-item img{
width:72px;
height:52px;
object-fit:cover;
border:1px solid #ddd;
}

.scala-item h4{
font-size:11px;
color:#b84e00;
margin-bottom:3px;
line-height:1.3;
}

.scala-item p{
font-size:10px;
color:#666;
line-height:1.4;
}

.scala-item a.more{
color:#b50027;
font-size:10px;
font-weight:bold;
}

/* ALT BANNER BLOKLARI */

.banner-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:6px;
}

.category-banner{
border:1px solid #f08a28;
background:#fff;
min-height:180px;
}

.category-banner-head{
background:#fff;
color:#f08a28;
text-align:center;
font-size:13px;
font-weight:bold;
padding:8px 8px 6px;
border-bottom:1px solid #f0b171;
text-transform:uppercase;
}

.category-banner-body{
height:148px;
position:relative;
overflow:hidden;
background:linear-gradient(180deg,#7e8fa7 0%, #61768f 100%);
}

.category-banner-body.alt{
background:linear-gradient(180deg,#63477e 0%, #3f3057 100%);
}

.category-banner-books{
position:absolute;
left:18px;
right:18px;
bottom:0;
display:flex;
align-items:flex-end;
justify-content:center;
gap:8px;
}

.category-banner-books img{
width:78px;
height:120px;
object-fit:contain;
filter:drop-shadow(0 6px 8px rgba(0,0,0,.28));
}

/* BÜLTEN */

.newsletter-box{
background:#fff;
border:1px solid #ddd;
margin-top:16px;
padding:16px;
}

.newsletter-alert{
margin-bottom:12px;
padding:10px 12px;
font-size:13px;
border:1px solid transparent;
}

.newsletter-alert.success{
background:#dcfce7;
color:#166534;
border-color:#86efac;
}

.newsletter-alert.error{
background:#fee2e2;
color:#991b1b;
border-color:#fca5a5;
}

.newsletter-alert.info{
background:#eff6ff;
color:#1d4ed8;
border-color:#93c5fd;
}

.newsletter-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.newsletter-text strong{
display:block;
font-size:18px;
color:#b50027;
margin-bottom:4px;
}

.newsletter-text span{
font-size:12px;
color:#666;
line-height:1.5;
}

.newsletter-form{
display:flex;
gap:8px;
min-width:330px;
}

.newsletter-form input{
flex:1;
height:38px;
border:1px solid #cfcfcf;
padding:0 12px;
font-size:13px;
outline:none;
background:#fff;
}

.newsletter-form button{
height:38px;
border:none;
background:#b50027;
color:#fff;
padding:0 16px;
font-size:12px;
font-weight:bold;
cursor:pointer;
}

/* FOOTER */

.footer{
margin-top:18px;
background:#fff;
border-top:1px solid #d6d6d6;
padding:16px 0 24px;
}

.footer-grid{
display:grid;
grid-template-columns:1.1fr 1fr 1fr 1fr;
gap:18px;
}

.footer h4{
font-size:13px;
color:#333;
margin-bottom:10px;
}

.footer ul{
list-style:none;
}

.footer li{
margin-bottom:6px;
font-size:12px;
color:#666;
}

.footer a{
color:#666;
}

.footer p{
font-size:12px;
color:#666;
line-height:1.6;
}

.footer-logo img{
max-height:52px;
margin-bottom:10px;
}

/* MODAL */

.forgot-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
z-index:1000;
align-items:center;
justify-content:center;
padding:20px;
}

.forgot-modal.open{
display:flex;
}

.forgot-box{
width:100%;
max-width:460px;
background:#fff;
border-radius:8px;
padding:24px;
position:relative;
}

.forgot-box h3{
font-size:24px;
margin-bottom:10px;
color:#b50027;
}

.forgot-box p{
font-size:14px;
line-height:1.7;
color:#555;
margin-bottom:14px;
}

.forgot-box input{
width:100%;
height:48px;
border:1px solid #ccc;
padding:0 14px;
font-size:15px;
margin-bottom:12px;
outline:none;
}

.forgot-box button{
height:46px;
border:none;
background:#b50027;
color:#fff;
padding:0 18px;
font-size:15px;
font-weight:bold;
cursor:pointer;
}

.forgot-close{
position:absolute;
top:10px;
right:12px;
background:none;
border:none;
font-size:28px;
cursor:pointer;
color:#666;
}

/* MOBİL */

.mobile-header,
.mobile-menu-panel,
.mobile-search-area,
.mobile-home{
display:none;
}

@media(max-width:768px){
.desktop-only{
display:none !important;
}

.mobile-only{
display:block !important;
}

.topline,
.header,
.main-nav,
.icon-strip,
.footer{
display:none;
}

.mobile-header,
.mobile-menu-panel,
.mobile-search-area,
.mobile-home{
display:block;
}

.mobile-header{
background:#fff;
border-bottom:1px solid #d8d8d8;
}

.mobile-header-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 10px;
}

.mobile-logo img{
max-height:52px;
}

.mobile-menu-btn,
.mobile-user-btn,
.mobile-cart-btn{
border:none;
background:none;
font-size:28px;
color:#333;
cursor:pointer;
}

.mobile-menu-panel{
display:none;
background:#fff;
border-bottom:1px solid #ddd;
}

.mobile-menu-panel.open{
display:block;
}

.mobile-menu-panel ul{
list-style:none;
}

.mobile-menu-panel li{
border-top:1px solid #eee;
}

.mobile-menu-panel a{
display:block;
padding:12px 14px;
font-size:14px;
color:#444;
}

.mobile-search-area{
background:#fff;
padding:10px;
border-bottom:1px solid #ddd;
}

.mobile-search-form{
display:flex;
height:42px;
}

.mobile-search-form input{
flex:1;
border:1px solid #bbb;
border-right:none;
padding:0 12px;
font-size:14px;
outline:none;
}

.mobile-search-form button{
width:46px;
border:1px solid #d9741f;
background:#ef8b27;
color:#fff;
font-size:18px;
cursor:pointer;
}

.mobile-home{
padding:12px 0 18px;
}

.mobile-section{
background:#fff;
margin-bottom:12px;
padding:12px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}

.mobile-section h2{
font-size:18px;
color:#f05a00;
margin-bottom:10px;
}

.mobile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.mobile-card{
background:#fff;
border:1px solid #eee;
padding:8px;
}

.mobile-card .catalog-image{
height:150px;
}

.mobile-card .catalog-name{
min-height:36px;
}

.newsletter-inner{
flex-direction:column;
align-items:stretch;
}

.newsletter-form{
min-width:0;
width:100%;
}

.hero-area{
grid-template-columns:1fr;
}

.hero-left{
height:220px;
}

.hero-right{
grid-template-rows:auto auto;
height:auto;
}

.promo-box{
min-height:120px;
height:auto;
}

.promo-thumb{
width:90px;
height:90px;
flex:0 0 90px;
}

.promo-name{
font-size:15px;
}

.promo-price{
font-size:18px;
}
}

@media(max-width:520px){
.wrapper{
max-width:calc(100% - 12px);
}

.mobile-grid{
grid-template-columns:1fr 1fr;
gap:8px;
}

.mobile-card .catalog-image{
height:130px;
}

.category-banner-books img{
width:62px;
height:100px;
}
}

@media(max-width:420px){
.mobile-grid{
grid-template-columns:1fr;
}
}