/**
 * components.css
 * Reusable UI components used across multiple pages: blocks, buttons, cards,
 * badges, alerts, layered nav, category nav. No page-specific styles.
 */

/* Block (sidebar/content blocks) */
.block{margin:0 0 40px}
.block .block-title{margin:5px 0 10px;line-height:1.2;font-size:16px;font-weight:500;color:#313131}
.block .block-title a{text-decoration:none!important}
.block .block-subtitle{margin:0;font-size:13px}
#poll-answers{margin:0 20px 10px}
#poll-answers li{padding:5px 0}
.block .block-content li.item{padding:7px 9px}
.block .block-content ol{margin:10px 0}
.block .block-content ol li.item{padding:3px 0}
.block .block-content ol li.item .product-name{margin:0}
.block .btn-remove,.block .btn-edit{float:right;margin:0 0 0 5px}
.block .actions{font-size:13px;text-align:right}
.block .actions a{float:left;margin:5px 0}
.block .actions button.button{float:right}
.block .actions button.button span{height:24px;padding:0 5px;font-size:13px;line-height:24px}
.block .empty{margin:0;padding:10px 0}

/* Mini products list (sidebar / mini-cart list) */
.mini-products-list .product-image{float:left}
.mini-products-list .product-details{margin-left:70px;text-align:left;line-height:1.4}
.mini-products-list li{padding:10px 0;position:relative}
.mini-products-list li .product-name a{color:#777}
.mini-products-list li .product-name a:hover{color:#08c}
.mini-products-list li a.btn-remove{position:absolute;right:0;top:9px;color:#777}
.mini-products-list li .product-image{border:1px solid #ddd;background-color:#fff;padding:2px;border-radius:4px}
.mini-products-list li .product-image img{width:50px;height:auto}
.block .block-content .mini-products-list li.item{padding:10px 0}
.mini-products-list .price-box{margin:5px 0}

/* Block variants */
.block.block-banner{border:0}
.block.block-banner .block-content{text-align:center}
.block.block-banner img{max-width:100%}
.block.block-subscribe{border-radius:5px}
.block.block-subscribe .block-title{background-color:transparent;border:0}
.block.block-subscribe .block-title strong{font-size:1.4em;text-transform:none;font-weight:400;padding-bottom:10px}
.block.block-subscribe .block-content{background-color:transparent}
.block.block-subscribe .form-subscribe-header{padding:10px 20px}
.block.block-subscribe label{font-size:14px}
.block.block-subscribe .input-box{padding:10px 20px 20px}
.block.block-subscribe .input-box input.input-text{width:100%;height:34px;padding:5px}
.block.block-subscribe .actions{background-color:transparent;border:0;padding:0 20px 20px}
.block.block-subscribe .actions button.button span{height:34px;line-height:34px}
.block.block-subscribe.home-sidebar-block{border:1px solid #ddd;border-top:5px solid #08c;border-radius:7px;background-color:#fbfbfb;text-align:center;padding:25px 20px 0}
.block.block-subscribe.home-sidebar-block .block-title strong{font-size:16px;color:#313131;font-weight:500;padding:30px 0 20px}
.block.block-subscribe.home-sidebar-block .block-content p{line-height:1.8}
.block.block-subscribe.home-sidebar-block .input-box{padding:10px 10px 40px}
.block.block-subscribe.home-sidebar-block .input-box input.input-text{float:left;padding:5px 60px 5px 10px;border:1px solid #d3d3d3;border-radius:5px;background-color:#fefefe;line-height:16px}
.block.block-subscribe.home-sidebar-block button.button{float:left;margin-left:-51px;width:50px;height:34px}
.block.block-subscribe.home-sidebar-block button.button span{min-width:49px;padding:0;line-height:32px;height:32px;background-color:#fefefe;color:#515151;border:0;border-left:1px solid #d3d3d3;border-radius:0 5px 5px 0}
.block.block-subscribe.home-sidebar-block button.button span span{border:0}

/* Parallax subscribe */
.parallax-subscribe input.input-text{background-color:#e3e2e2;color:#666;height:34px;line-height:18px;padding:8px 100px 8px 10px;width:100%}
.parallax-subscribe button.button{position:absolute;z-index:1;right:0;top:0}
.parallax-subscribe button.button span{height:34px;line-height:34px;padding:0;border-radius:0 3px 3px 0;width:90px;min-width:90px}

/* Forms & buttons (reusable) */
input,select,textarea,button{font-size:12px;vertical-align:middle;color:#484747}
input.input-text,select,textarea{background:#fff;border:1px solid #ccc;padding:2px 8px;height:26px;color:#777;font-size:13px;border-radius:3px;font-family:var(--font-body)}
select{background:#fff;border:1px solid #ccc;padding:2px 8px;height:26px;color:#777;font-size:13px}
input.input-text,textarea{padding:8px}
label{margin:0;vertical-align:middle;color:#777;font-size:13px;font-weight:400}
button.button::-moz-focus-inner{padding:0;border:0}
button.button{-webkit-border-fit:lines;overflow:visible;width:auto;border:0;padding:0;margin:0;background:transparent;cursor:pointer}
button.button span{font-family:var(--font-body);display:block;border:0;padding:0 15px;font-weight:400;font-size:14px;text-align:center;white-space:nowrap;color:#fff;line-height:38px;border-radius:5px}
button.button span span{border:0;padding:0;color:inherit;border-width:0;background:transparent;line-height:inherit}
button.button:hover span{opacity:.9;filter:alpha(opacity=90)}
button.disabled span{background:#bbb!important}
.input-box label{margin-bottom:10px}
.btn-remove{position:relative;display:block;width:23px;height:23px;text-indent:-9999px;overflow:hidden;padding:5px 0;font-size:13px;color:#08c;line-height:1}
.btn-remove:hover{color:#08c}
.btn-remove:before{content:"\e82c";display:block;position:absolute;left:0;right:0;font-family:"porto";text-indent:0;text-align:right}

/* Block layered nav (filter sidebar) */
.block.block-layered-nav{border:0;margin-top:-14px}
.block.block-layered-nav .block-content{background-color:transparent;position:relative;z-index:2}
.block.block-layered-nav .block-content ol{margin:0}
dl#narrow-by-list{margin:0}
.block-layered-nav dt,.block-layered-nav .currently .block-subtitle,.block-category-nav .block-title{padding:10px 15px;font-size:13px;font-weight:500;border:1px solid #ddd;background-color:#f5f5f5;color:#777;position:relative;cursor:pointer;border-radius:7px 7px 0 0;margin-top:14px}
.catalog-category-view .block-category-nav .block-title{margin-top:0;margin-bottom:0}
.block-layered-nav dt.closed,.block-category-nav .block-title.closed{border-radius:7px}
.block-layered-nav dt:before,.block-category-nav .block-title:before{content:"\e80d";width:26px;height:26px;display:block;border:1px solid #ddd;font-family:'porto';position:absolute;right:15px;top:50%;margin-top:-13px;border-radius:3px;color:#ccc;text-align:center;line-height:24px;background-color:#fff;font-size:10px}
.block-layered-nav dt.closed:before,.block-category-nav .block-title.closed:before{content:"\e80b"}
.block-layered-nav dt:hover:before,.block-category-nav .block-title:hover:before{background-color:#08c;color:#fff}
.block-layered-nav dd,.block-category-nav .block-content{padding:10px 15px;margin:0;font-size:13px;border:1px solid #ddd;border-top:0;border-radius:0 0 7px 7px;background-color:#fbfbfb}
.block-layered-nav dd a{color:#777;font-size:13px;line-height:2.5}
.block-layered-nav .currently ol{border:1px solid #ddd;border-width:0 1px;background-color:#fbfbfb;padding:10px 0;margin:0}
.block-layered-nav .currently li{padding:5px 15px;position:relative;z-index:1;line-height:1.5}
.block-layered-nav .currently .label{padding:0;display:inline-block;vertical-align:middle}
.block-layered-nav .currently .value{display:inline-block;vertical-align:middle}
.block-layered-nav .currently .btn-previous,.block-layered-nav .currently .btn-remove{position:absolute;right:15px;top:4px;margin:0;line-height:21px;padding:0}
.block-layered-nav .currently .btn-previous{right:17px}
.block-layered-nav .actions{font-size:11px;padding:10px 15px;background:#f7f7f7;border:1px solid #ddd;border-radius:0 0 7px 7px;text-align:right;margin-bottom:14px}
.block-layered-nav .actions a{float:none}
.block-currency select{width:240px;max-width:100%}

/* Block category nav (category sidebar) */
.cms-index-index .block-category-nav{margin:0}
.block-category-nav{border-radius:7px;border-color:#ddd;overflow:hidden;margin-bottom:28px;line-height:1.42857143}
.block-category-nav .block-title{cursor:pointer;margin:0}
.block-category-nav .block-title strong{padding:0}
.block-category-nav .block-content{padding:10px 15px}
.block-category-nav .category-list{list-style:none;padding:0;margin:0}
.block-category-nav .category-list li{position:relative}
.block-category-nav .category-list a{color:#777;font-size:13px;line-height:2.5}
.block-category-nav .category-list ul{padding-left:15px;margin:0;list-style:none;display:none}
.block-category-nav .category-list a.plus{position:absolute;right:1px;color:#08c;font-size:16px;line-height:32px}

/* KVKK banner (reusable UI block) */
.kvkk-banner {position: fixed;bottom: 0;left: 0;width: 100%;background: #fdfbf9; color: #2c2c2c; z-index: 9999999;font-family: var(--font-body);box-shadow: 0 -10px 40px rgba(0,0,0,0.08);border-top: 1px solid #eee5de;}
.kvkk-content {max-width: 1200px; margin: auto;padding: 20px 30px;display: flex;justify-content: space-between;align-items: center;gap: 30px;}
.kvkk-text {font-size: 13px;line-height: 1.8;max-width: 75%;letter-spacing: 0.3px;}
.kvkk-text a {color: #a68b6a; text-decoration: none;border-bottom: 1px solid #d4c4b1;margin: 0 4px;transition: 0.3s;}
.kvkk-text a:hover {color: #8a7356;border-bottom-color: #8a7356;}
.kvkk-buttons {display: flex;gap: 15px;white-space: nowrap;}
.kvkk-btn {padding: 10px 24px;border: none;border-radius: 2px; cursor: pointer;font-size: 12px;font-weight: 500;letter-spacing: 1px;text-transform: uppercase;transition: all 0.4s ease;}
.kvkk-btn.accept {background: #1a1a1a;color: #ffffff;}
.kvkk-btn.reject {background: transparent;color: #666;border: 1px solid #d4c4b1;}
.kvkk-btn:hover {transform: none; opacity: 0.8;letter-spacing: 1.2px;}
@media(max-width:900px){
.kvkk-content {flex-direction: column;align-items: center;text-align: center;padding: 25px;}
.kvkk-text {max-width: 100%;margin-bottom: 10px;}
.kvkk-buttons {width: 100%;justify-content: center;}
}
.pm-valid-icon {position: absolute;right: 14px;top: 50%;transform: translateY(-50%) scale(0);color: var(--valid);font-size: 1rem;font-weight: 700;transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;opacity: 0;pointer-events: none;}
.pm-valid-icon.show {transform: translateY(-50%) scale(1);opacity: 1;}