:root {
    color-scheme:light;
    --primary-black:#000000;
    --bg-gray:#c8d6ea;
    --active-tab-gray:#acbed5;
    --site-padding:60px;
    --modal-overlay:rgba(0, 0, 0, 0.6);
    --price-color:#e74c3c;
    --success-green:#27ae60;
    --toolbar-bg:#acbed5;
    --card-blue-bg:#54728c;
    --z-hero:5;
    --z-toolbar:50;
    --z-nav:90;
    --z-header:1000;
    --z-widget:1500;
    --z-overlay:1999;
    --z-drawer:2000;
    --z-modal:20000;
}

html, body {
    background-color:#ffffff !important;
    background:#ffffff !important;
    color:#000000 !important;
    color-scheme:light !important;
    -webkit-font-smoothing:antialiased;
    width:100%;
    overflow-x:hidden;
}

body { padding-top:148px !important; }

/* YARDIMCI SINIFLAR */
.mob-only { display:none !important; }
.desk-only { display:flex !important; }

* { box-sizing:border-box; margin:0; padding:0; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; }
a { text-decoration:none; color:inherit; cursor:pointer; }
ul { list-style:none; }
button { cursor:pointer; }
input, select, textarea { outline:none; resize:none; }

.mob-icon { display:none !important; }
.desk-icon { display:block !important; }

.view-icons svg { width:24px !important; height:18px !important; padding:0 !important; margin:0 !important; cursor:pointer; transition:color 0.3s; color:#646464; }
.view-icons svg:hover, .view-icons svg.active { color:#000 !important; }

.hamburger { display:none !important; }
.menu-container { display:none; }

/* HEADER */
header { background:#fff; padding:13px var(--site-padding); display:flex; justify-content:flex-end; align-items:center; position:fixed !important; top:0; left:0; width:100%; z-index:5000; box-shadow:none; height:80px; border-bottom:1px solid#f0f0f0; }

/* SUB MENU (SADECE HAKKIMIZDA/İLETİŞİM KISMI KALDI) */
.info-sub-menu { position:fixed; top:80px; left:0; width:100%; height:26px; background-color:#808080; display:flex; padding:0; z-index:4950; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.info-sub-menu div { flex:1; height:100%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; color:#fff; transition:all 0.3s ease; }
.info-sub-menu div:first-child { border-right:1px solid rgba(255,255,255,0.3); }
.info-sub-menu div:hover { background-color:#595959; color:#fff; text-decoration:none; }

.logo { position:absolute; left:50%; transform:translateX(-50%); z-index:10; display:flex; align-items:center; pointer-events:none; }
.logo img { height:48px; width:auto; object-fit:contain; pointer-events:auto; cursor:pointer; }

.header-icons { display:flex; align-items:center; gap:25px; position:relative; z-index:20; }
.header-icons i { cursor:pointer; font-size:20px; color:#333; transition:color 0.3s; }
.header-icons i:hover { color:#000; }

/* NAV */
nav { background-color:#fff; padding:0; position:fixed !important; top:106px; left:0; width:100%; z-index:var(--z-nav); box-shadow:0 6px 18px rgba(0,0,0,0.15); }
nav ul { display:flex; width:100%; background-color:var(--bg-gray); }
nav ul li { 
    cursor:pointer; 
    transition:background-color 0.3s, color 0.3s; 
    padding:15px 10px; 
    flex:1; 
    text-align:center; 
    font-size:11px; 
    font-weight:700; 
    letter-spacing:0.5px; 
    text-transform:uppercase; 
    background-color:var(--bg-gray); 
    color:#666; 
    border-right:1px solid; 
    border-right-color:#fff;
    justify-content:center; 
    align-items:center; 
}
nav ul li:last-child { border-right:none; }
nav ul li:hover, nav ul li.active { background-color:var(--active-tab-gray); color:#000; }

/* --- MENÜ KUTU AYARLARI --- */

/* 1. Size Özel Fon (Turuncu) - DARALTIM */
nav ul li.special-orange {
    background-color: #FFAB76 !important;
    color: #666 !important;
    border-right: none;
    
    /* Yanlardan kıstık (Daha dar olacak) */
    padding: 15px 25px !important; 
    
    /* Diğer kutulardan daha az yer kaplasın (Standart: 1) */
    flex: 0.6 !important; 
}

nav ul li.special-orange:hover, nav ul li.special-orange.active {
    background-color: #E6905C !important;
    color: #000 !important;
}

/* 2. Düz/Degrade Fon - GENİŞLETME */
nav ul li.wide-menu {
    /* Turuncudan artan yeri buna veriyoruz (Standart: 1) */
    flex: 1.1 !important; 
}

.view-section { display:none; animation:fadeIn 0.5s; padding-bottom:50px; position:relative; }
.view-section.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* HERO */
.hero { display:flex; height:350px; background-color:#a8bdaf; overflow:hidden; transition:background-color 0.5s ease; position:relative; z-index:var(--z-hero); margin-top:0 !important; }
.hero-text { flex:1; padding-left:var(--site-padding); padding-right:20px; display:flex; flex-direction:column; justify-content:center; z-index:2; pointer-events:none; }
.hero-text h1, .hero-text p { pointer-events:auto; }
.hero-text h1 { font-family:'Times New Roman', serif; font-size:60px; font-style:italic; margin-bottom:10px; font-weight:400; line-height:1.1; color:#000 !important; }
.hero-text p { font-size:14px; cursor:default; font-weight:400; letter-spacing:0.5px; line-height:1.4; max-width:550px; color:#000 !important; margin-top:0; }
.hero-image { flex:2; background-image:url('https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?ixlib=rb-1.2.1'); background-size:cover; background-position:center; clip-path:polygon(10% 0, 100% 0, 100% 100%, 0% 100%); transition:background-image 0.5s; }

.filter-toolbar { padding:8px var(--site-padding); display:flex; justify-content:space-between; align-items:center; background-color:var(--toolbar-bg); margin-bottom:40px; box-shadow:0 6px 18px rgba(0,0,0,0.15); position:relative; z-index:var(--z-toolbar); transition:margin-bottom 0.3s ease; }
.filter-toolbar.has-submenu { margin-bottom:0 !important; box-shadow:none; border-bottom:1px solid rgba(255,255,255,0.3); }
.toolbar-left { display:flex; align-items:center; gap:30px; }
.current-cat-title { font-size:16px; font-weight:500; text-transform:uppercase; letter-spacing:1px; margin:0; color:#000; white-space:nowrap; }
.view-icons { display:flex; gap:10px; align-items:center; margin-left:10px; }
.toolbar-right select { padding:4px 8px; border:1px solid; border-color:#999; background:#fff; font-size:11px; cursor:pointer; outline:none; border-radius:3px; color:#000; }

/* ESKİ SUB MENU STİLLERİ SİLİNDİ, ÇEKMECE KULLANILIYOR */

/* --- MOBIL GRID STIL --- */
.mobile-category-grid {
    display: none; /* Desktopta gizli */
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 15px;
    margin-bottom: 20px;
}

.cat-grid-item {
    position: relative;
    aspect-ratio: 1/1; /* Kare */
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.cat-grid-item:active { transform: scale(0.98); }

.cat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 15px 10px 10px 10px;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    text-align: left;
}

.products-container { padding:0 var(--site-padding); display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; margin-top:20px; margin-bottom:80px; min-height:400px; transition:grid-template-columns 0.3s ease; }

.product-card {
    position:relative; cursor:pointer;
    background-color:#fff;
    border:1px solid#e0e0e0;
    padding:0 !important;
    border-radius:12px;
    overflow:hidden;
    display:flex; flex-direction:column;
    height:100%;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover { transform:translateY(-3px); box-shadow:0 12px 25px rgba(0,0,0,0.1); border-color:#b0b0b0; }

.product-img-box {
    width:100%; aspect-ratio:4 / 5; background-color:#f9f9f9;
    position:relative; overflow:hidden;
    border-radius:12px 12px 0 0;
    margin:0;
}
.product-img-box img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.product-card:hover .product-img-box img { transform:scale(1.05); }

.quick-view-overlay {
    position:absolute; bottom:0; left:0; width:100%;
    background-color:rgba(255, 255, 255, 0.50);
    padding:8px 0; text-align:center;
    transform:translateY(100%);
    transition:transform 0.3s ease-in-out;
    z-index:5;
    display:block !important; 
}
.quick-view-text {
    font-size:11px; font-weight:800; color:#000; 
    text-transform:uppercase; letter-spacing:1px;
}
.product-card:hover .quick-view-overlay { transform:translateY(0); }

.product-info {
    padding:0 !important;
    display:flex; flex-direction:column; flex:1;
}

.product-info h3 {
    font-size:14px; font-weight:700; color:#000;
    line-height:1.3; height:38px; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    text-transform:capitalize;
    margin:10px 10px 5px 10px !important;
    padding-bottom:5px; border-bottom:1px solid#e0e0e0;
}

.product-sku { 
    font-size:14px; color:#4D4D4D; font-weight:600;
    text-transform:capitalize; 
    margin:0 10px 5px 10px !important;
    display:block;
}

.price-action-box {
    background-color:#54728c;
    border-radius:8px;
    margin:auto 5px 5px 5px !important;
    padding:10px 15px;
    display:flex; justify-content:space-between; align-items:center;
    color:#fff; min-height:55px;
}

.price-content { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; line-height:1; }

.price-main { 
    font-size:22px; font-weight:600; color:#fff; 
    letter-spacing:0.5px; 
    margin-bottom:8px; 
}
.price-sub { font-size:13px; color:rgba(255, 255, 255, 0.8); font-weight:400; }

.cart-icon-btn { font-size:22px; color:#fff; background:transparent; border:none; cursor:pointer; padding:0; display:flex; align-items:center; }
.cart-icon-btn:hover { opacity:0.8; transform:scale(1.1); }

.badge { position:absolute; top:15px; left:15px; background-color:#000; color:#fff; padding:3px 8px; border-radius:4px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; z-index:2; }

.btn-grid-detail, .price-box { display:none !important; }

#product-detail-view { padding:20px var(--site-padding); }
.breadcrumb { font-size:13px; font-weight:bold; color:#333; margin-bottom:15px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:color 0.3s; padding:10px 0; }
.breadcrumb:hover { color:#000; text-decoration:underline; }
.detail-container { display:flex; gap:60px; align-items:flex-start; }
.detail-left { flex:1.5; display:flex; flex-direction:column; align-items:center; }

.main-gallery-img { width:100%; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:20px; border:1px solid#f0f0f0; overflow:hidden !important; cursor:zoom-in; }
.main-gallery-img img { max-width:100%; max-height:60vh; width:auto; object-fit:contain; transition:transform 0.5s ease !important; transform-origin:center center; }
.main-gallery-img:hover img { transform:scale(2.5) !important; }

.gallery-thumbs { display:flex; gap:15px; justify-content:center; flex-wrap:wrap; width:100%; }
.g-thumb { width:70px; height:70px; background:#fff; padding:5px; cursor:pointer; border:1px solid; border-color:#ddd; display:flex; align-items:center; justify-content:center; transition:border-color 0.3s; }
.g-thumb:hover { border-color:#000; }
.g-thumb img { width:100%; height:100%; object-fit:contain; }
.detail-right { flex:1; display:flex; flex-direction:column; }
.detail-title { font-size:32px; font-weight:normal; margin-bottom:10px; color:#000 !important; line-height:1.2; }
.product-code-style { font-size:14px; color:#666; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid; border-bottom-color:#eee; }
.product-code-style strong { color:#000; font-weight:700; margin-left:5px; }
.detail-price { font-size:28px; font-weight:bold; margin-bottom:25px; color:var(--price-color); }
.product-options { margin-bottom:25px; }
.option-label { font-weight:700; margin-bottom:12px; font-size:13px; display:block; color:#000; text-transform:uppercase; }
.size-selector { display:flex; gap:10px; flex-wrap:wrap; }
.size-option { cursor:pointer; }
.size-option input { display:none; }
.size-option span { display:inline-block; padding:10px 15px; border:1px solid; border-color:#ccc; border-radius:4px; font-size:13px; transition:all 0.3s ease; background:#fff; color:#000; }
.size-option input:checked + span { border-color:#000; background-color:#000; color:#fff; }
.qty-label-large { font-size:14px; font-weight:bold; margin-right:10px; color:#000; text-transform:uppercase; }
.qty-input-large { width:60px; padding:10px; font-size:16px; border:1px solid; border-color:#ddd; text-align:center; color:#000; background:#fff; border-radius:4px; }
.btn-black, .btn-order-form { width:100%; padding:16px; border:none; font-weight:bold; cursor:pointer; color:#fff; margin-bottom:15px; border-radius:4px; font-size:14px; text-transform:uppercase; letter-spacing:0.5px; transition:opacity 0.3s; }
.btn-black { background:#000; } .btn-black:hover { opacity:0.8; }
.btn-order-form { background:var(--success-green); } .btn-order-form:hover { background-color:#219150; }
.btn-detail-page { display:block; width:100%; text-align:center; padding:12px; border:1px solid; border-color:#000; background:#fff; color:#000; font-weight:bold; text-transform:uppercase; font-size:12px; transition:0.3s; margin-top:10px; }
.btn-detail-page:hover { background:#000; color:#fff; }
.static-info-box { margin-top:40px; padding-top:25px; border-top:1px solid; border-top-color:#eee; }
.static-info-title { font-size:13px; font-weight:800; margin-bottom:15px; text-transform:uppercase; color:#000; letter-spacing:1px; }
.static-info-content { font-size:14px; color:#555; line-height:1.8; }

.modal-wrapper { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--modal-overlay); z-index:var(--z-modal); display:none; justify-content:center; align-items:center; }
.modal-wrapper.open { display:flex; animation:fadeIn 0.3s; }
.close-modal { position:absolute; top:20px; right:25px; font-size:24px; cursor:pointer; z-index:20; color:#000; }
.modal-content { background:white; width:900px; height:600px; display:flex; position:relative; box-shadow:0 20px 50px rgba(0,0,0,0.3); z-index:var(--z-modal); }

.modal-left { flex:1.3; background:#fff; padding:20px; padding-top:80px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow:hidden; }

.zoom-container { width:100%; height:400px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; overflow:hidden !important; cursor:zoom-in; }
.zoom-container img { width:auto; height:100%; max-width:100%; object-fit:contain; display:block; transition:transform 0.5s ease !important; transform-origin:center center; }
.zoom-container:hover img { transform:scale(2.5) !important; }

.modal-right { flex:1; padding:50px; display:flex; flex-direction:column; justify-content:center; background:#fcfcfc; }
.modal-left img:not(.zoom-container img) { width:60px; height:60px; object-fit:cover; cursor:pointer; border:1px solid; border-color:#ddd; }
.gallery-thumbs, .modal-left div:not(.zoom-container) { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px; }

.cart-drawer-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:5999 !important; display:none; }
.cart-drawer { position:fixed; top:0; right:-450px; width:400px; height:100%; background:white; z-index:6000 !important; transition:right 0.4s ease; display:flex; flex-direction:column; box-shadow:-5px 0 30px rgba(0,0,0,0.1); }
.cart-drawer.open { right:0; }
.cart-header { padding:25px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid; border-bottom-color:#eee; }
.cart-items { flex:1; overflow-y:auto; padding:25px; }
.cart-footer { padding:25px; background:#fcfcfc; border-top:1px solid; border-top-color:#eee; }
.cart-item { display:flex; gap:15px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid; border-bottom-color:#f0f0f0; }
.cart-item img { width:70px; height:70px; object-fit:contain; background:#f9f9f9; }
.cart-item-info { flex:1; }
.cart-item-title { font-size:13px; font-weight:bold; margin-bottom:5px; color:#000; }
.cart-item-price { font-size:12px; color:#666; }
.cart-item-remove { font-size:10px; color:red; cursor:pointer; text-decoration:underline; margin-top:5px; display:block; }

.search-container { position:relative; }
.search-dropdown { position:absolute; top:40px; right:-10px; width:350px; background:rgba(255, 255, 255, 0.98) !important; border:1px solid rgba(0, 0, 0, 0.1); box-shadow:0 10px 30px rgba(0,0,0,0.2); padding:15px; display:none; z-index:10005; border-radius:4px; }
.search-dropdown.active { display:block; animation:slideDown 0.2s ease; }
.search-dropdown input { width:100%; padding:10px; font-size:13px; border-radius:4px; margin-bottom:10px; background:#ffffff !important; color:#000 !important; border:1px solid; border-color:#ddd; }
.mini-search-results { max-height:300px; overflow-y:auto; }
.mini-result-item { display:flex; align-items:center; gap:10px; padding:10px 0; cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.05); }
.mini-result-item:hover { background:rgba(0,0,0,0.05); }
.mini-result-item img { width:50px; height:50px; object-fit:contain; background:#fff; border:1px solid; border-color:#eee; }
.cart-badge { position:absolute; top:-8px; right:-8px; background:black; color:white; font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; }
.cart-badge.show { opacity:1; }

.whatsapp-widget { position:fixed; bottom:25px; right:25px; z-index:var(--z-widget); display:flex; align-items:center; gap:8px; cursor:pointer; transition:transform 0.3s ease; }
.whatsapp-widget:hover { transform:scale(1.05); }
.wa-button { width:42px; height:42px; background-color:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2); font-size:22px; color:white; animation:pulse 2s infinite; }
.wa-tooltip { background:white; padding:6px 12px; border-radius:20px 20px 0 20px; box-shadow:0 4px 15px rgba(0,0,0,0.1); font-size:11px; font-weight:bold; color:#333; opacity:0; transform:translateX(10px); animation:fadeInSlide 0.5s ease forwards 1s; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow:0 0 0 10px rgba(37, 211, 102, 0); } 100% { box-shadow:0 0 0 0 rgba(37, 211, 102, 0); } }
@keyframes fadeInSlide { to { opacity:1; transform:translateX(0); } }

footer { background-color:#000; color:white; padding:60px var(--site-padding) 30px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:50px; align-items:stretch; }
.footer-left { display:flex; flex-direction:column; height:auto; min-height:100%; }
.map-window { flex:1; display:flex; height:100%; min-height:100%; }
.footer-left .map-window iframe { width:100%; height:100% !important; min-height:300px; border:0; border-radius:8px; box-shadow:0 4px 15px rgba(255,255,255,0.1); filter:invert(90%) hue-rotate(180deg) brightness(85%) contrast(85%); }
.footer-right h3, .footer-agreements h3 { font-size:16px; margin-bottom:25px; text-transform:uppercase; letter-spacing:1px; color:#fff; font-weight:bold; padding-bottom:10px; display:inline-block; border-bottom:1px solid; border-bottom-color:#333; }
.footer-agreements { display:flex; flex-direction:column; }
.contact-list { list-style:none; padding:0; margin-bottom:40px; }
.contact-list li { margin-bottom:18px; display:flex; align-items:center; }
.contact-list li a, .contact-list li span { display:flex; align-items:center; color:#b0b0b0; font-size:13px; text-decoration:none; transition:all 0.3s ease; line-height:1.5; }
.contact-list li i { width:25px; font-size:16px; color:#fff; text-align:center; margin-right:15px; }
.footer-right .fa-map-marker-alt { color:#e74c3c; }
.newsletter-box { margin-top:0; padding-top:0; border-top:none; grid-column: 2 / -1; }
.newsletter-box h4 { font-size:16px; font-weight:bold; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px; color:#fff; }
.newsletter-box p { font-size:12px; color:#999; margin-bottom:15px; line-height:1.6; display:inline; margin-right:20px; }
.newsletter-form { display:inline-flex; gap:10px; }
.newsletter-form input { flex:1; min-width:300px; padding:14px; background-color:#1a1a1a; color:#fff; font-size:12px; border-radius:4px; border:1px solid; border-color:#333; }
.newsletter-form button { padding:0 30px; background-color:#fff; color:#000; border:none; font-weight:800; font-size:12px; cursor:pointer; border-radius:4px; transition:0.3s; white-space:nowrap; }
.newsletter-form button:hover { background-color:#ccc; }
.copyright { padding-top:30px; font-size:13px; color:#444; display:flex; justify-content:space-between; align-items:center; border-top:1px solid; border-top-color:#222; }
.copyright span:first-child { flex:1; text-align:left; }
.copyright span:last-child { flex:1; text-align:center; }
.about-section { background-color:#333 !important; color:#fff !important; padding:90px 20px; text-align:center; }
.about-content { max-width:1000px; margin:0 auto; }
.about-content h2 { font-size:24px; margin-bottom:20px; text-transform:uppercase; letter-spacing:1px; color:#fff !important; }
.about-content p { font-size:14px; line-height:1.8; color:#ccc !important; }

.hero-collage { width:100%; height:100%; display:flex; overflow:hidden; }
.collage-item { flex:1; height:100%; position:relative; overflow:hidden; transform:skewX(-10deg); transform-origin:bottom left; border-left:8px solid; border-left-color:#fff; }
.collage-item:first-child { border-left:none; margin-left:-50px; flex:1.2; }
.collage-item:last-child { margin-right:-50px; flex:1.2; }
.collage-img { width:150%; height:100%; background-size:cover; background-position:center; transform:skewX(10deg) translateX(-15%); }

#checkout-view { padding:40px var(--site-padding); }
.checkout-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:60px; }
.form-row { display:flex; gap:20px; margin-bottom:20px; }
.form-col { flex:1; }
.form-col input { width:100%; padding:12px; border-radius:4px; border:1px solid; border-color:#ddd; }
.sms-verification-box { background:#f8f9fa; padding:20px; border-radius:5px; margin-top:20px; border:1px solid; border-color:#ddd; }
.btn-sms { background:#333; color:white; border:none; padding:10px; border-radius:4px; height:45px; width:100%; font-size:12px; font-weight:bold; cursor:pointer; transition:0.3s; }
.btn-sms:disabled { background:#ccc; cursor:not-allowed; }
.order-summary { 
    background: #fff; 
    padding: 30px; 
    border-radius: 8px; 
    height: fit-content; 
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: sticky;
    top: 20px;
}
.summary-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 10px; 
    font-size: 14px; 
    color: #000;
    line-height: 1.5;
}

.summary-row span:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 100px;
}

.summary-total { 
    padding-top: 20px; 
    margin-top: 20px; 
    font-weight: bold; 
    font-size: 18px; 
    color: #000; 
    border-top: 1px solid #ddd; 
}

.order-success-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:50000; display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:all 0.3s ease; }
.order-success-overlay.active { opacity:1; visibility:visible; }
.order-success-box { background:white; padding:40px; border-radius:8px; text-align:center; width:90%; max-width:400px; box-shadow:0 10px 30px rgba(0,0,0,0.3); transform:scale(0.8); transition:transform 0.3s ease; }
.order-success-overlay.active .order-success-box { transform:scale(1); }
.success-icon { font-size:60px; color:#27ae60; margin-bottom:20px; display:block; }
.success-btn { background:#000; color:#fff; padding:12px 30px; border-radius:4px; border:none; font-weight:bold; cursor:pointer; margin-top:20px; width:100%; }
.success-btn:hover { background:#333; }

@media (max-width:768px) {
    :root { --site-padding:15px; }
    body { padding-top:65px !important; }
    .desk-only { display:none !important; }
    .mob-only { display:block !important; }
    header { padding:15px 20px; justify-content:space-between; position:fixed !important; top:0; left:0; width:100%; z-index:5000; height:65px; }
    .logo { position:static; transform:none; left:auto; display:block; }
    .logo img { height:35px; }
    .header-icons { gap:20px; width:auto; justify-content:flex-end; }
    .menu-container { display:block !important; order:3; }
    .hamburger { display:block !important; cursor:pointer; pointer-events:auto; }
    .search-container { order:1; }
    .header-icons > div[onclick="toggleCart()"] { order:2; }
    nav { display:none; position:relative; top:0; }
    nav.open { display:block; }
    nav ul { flex-direction:column; position:fixed !important; top:65px; left:0; width:100%; box-shadow:0 5px 20px rgba(0,0,0,0.1); border-top:1px solid #eee; z-index:4900; }
    nav ul li { flex:none; border-right:none; padding:20px 15px; font-size:14px; border-bottom:1px solid; border-bottom-color:#f0f0f0; }
    
    /* HERO GİZLEME */
    #hero-section { display: none !important; }

    /* MOBIL GRID GORUNUM */
    .mobile-category-grid { 
        display: grid !important; 
        grid-template-columns: 1fr 1fr;
        gap: 2px !important; /* 2px ara boşluk */
        padding: 0 !important; /* Dış boşluk yok */
        margin: 0 !important;
        margin-bottom: 0 !important; 
        background: #fff;
    }

    .cat-grid-item {
        position: relative;
        aspect-ratio: 1/1; /* Kare */
        border-radius: 0 !important; /* Köşe radius yok */
        overflow: hidden;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        box-shadow: none !important; /* Gölge yok */
    }

    /* YENİ: Size Özel Mobile Banner */
    .mobile-special-item {
        grid-column: span 2 !important; /* Tüm satırı kapla */
        background-color: #FFAB76 !important; /* Turuncu */
        background-image: none !important; /* Resim yok */
        aspect-ratio: auto !important; /* Kare olma zorunluluğunu kaldır */
        height: 90px !important; /* Banner havası veren yükseklik */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-special-item .cat-overlay {
        position: static !important; /* Alta yapışmasın */
        background: none !important; /* Gölge yok */
        padding: 0 !important;
        text-align: center !important;
        font-size: 16px !important; /* Biraz daha büyük font */
        text-shadow: none !important;
        width: auto !important;
    }

    /* MOBIL TOOLBAR DUZENLEMESI - 2 SATIR */
    .filter-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important; /* Boşluğu azalttık */
        height: auto !important;
        padding: 10px !important;
        padding-bottom: 5px !important; /* Alt iç boşluğu azalttık */
        order: 2 !important;
        margin-bottom: 0 !important; /* KRİTİK OLAN BU: Dış boşluğu sıfırladık */
    }

    /* 1. SATIR: Sol (Başlık) - Sağ (İkonlar) */
    .toolbar-left {
        width: 100% !important;
        justify-content: space-between !important;
        margin-bottom: 0 !important;
    }

    .current-cat-title {
        font-size: 14px !important;
        margin: 0 !important;
    }

    /* 2. SATIR: Sıralama Select */
    .toolbar-right {
        width: 100% !important;
    }

    .toolbar-right select {
        width: 100% !important;
        height: 30px !important;
        font-size: 13px !important;
    }

    #product-grid { order:4; }
    .whatsapp-widget { bottom:80px; right:20px; }
    .wa-button { width:38px; height:38px; font-size:20px; }
    .wa-tooltip { display:none; }
    .mob-icon { display:block !important; }
    .desk-icon { display:none !important; }
    .products-container { gap:12px !important; padding:0 12px !important; display:grid; align-items:flex-start !important; }
    .products-container.cols-1 { grid-template-columns:1fr !important; }
    .products-container.cols-2 { grid-template-columns:repeat(2, 1fr) !important; }
    .products-container.cols-3 { grid-template-columns:repeat(3, 1fr) !important; gap:4px !important; }
    .product-card { height:auto !important; display:flex !important; flex-direction:column !important; padding:0 !important; border-radius:8px; }
    .product-img-box { aspect-ratio:4 / 5 !important; height:auto !important; border-radius:8px 8px 0 0; margin:0 !important; position:relative !important; }
    .product-info { padding:0 !important; margin-bottom:0; height:auto !important; flex:1 !important; }
    .product-info h3 { font-size:11px !important; max-height:2.8em !important; line-height:1.3 !important; margin:5px 4px 5px 4px !important; padding-bottom:0 !important; overflow:hidden !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; text-overflow:ellipsis !important; white-space:normal !important; }
    .product-sku { font-size:11px !important; margin:0 4px 5px 4px !important; }
    .price-action-box { margin:auto 2px 2px 2px !important; padding:5px 6px !important; min-height:40px !important; border-radius:6px; }
    .price-main { font-size:15px !important; font-weight:800; margin-bottom:2px; }
    .price-sub { font-size:10px !important; }
    .cart-icon-btn { font-size:16px !important; }
    .product-card .quick-view-overlay { display:flex !important; justify-content:center !important; align-items:center !important; visibility:visible !important; opacity:1 !important; transform:translateY(0) !important; position:absolute !important; bottom:0 !important; left:0 !important; width:100% !important; background-color:rgba(255, 255, 255, 0.60) !important; z-index:100 !important; padding:4px 0 !important; height:auto !important; }
    .product-card .quick-view-text { display:block !important; font-size:9px !important; font-weight:800 !important; color:#000 !important; text-transform:uppercase !important; visibility:visible !important; opacity:1 !important; }
    .checkout-grid { display:flex !important; flex-direction:column !important; }
    .order-summary { order:-1 !important; margin-bottom:30px !important; width:100% !important; }
    .footer-grid { display:block !important; }
    .footer-left { width:100% !important; height:300px !important; margin-bottom:30px; }
    .map-window { width:100% !important; height:100% !important; display:block !important; min-height:300px !important; }
    .map-window iframe { height:100% !important; min-height:300px !important; }
    .detail-container { flex-direction:column !important; gap:20px !important; }
    .detail-left { width:100% !important; margin-bottom:20px !important; }
    .detail-right { width:100% !important; padding-top:0 !important; }
    .modal-content { width:95% !important; max-height:85vh !important; overflow-y:auto !important; display:block !important; }
    .modal-left, .detail-left { padding:10px !important; display:flex !important; flex-direction:column !important; height:auto !important; width:100% !important; align-items:center !important; }
    .mobile-zoom-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:30000; display:flex; justify-content:center; align-items:center; overflow:auto; animation:fadeIn 0.3s; }
    .mobile-zoom-content { position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
    .mobile-zoom-content img { width:auto; height:auto; max-width:none; max-height:none; min-width:100%; }
    .mobile-zoom-close { position:fixed; top:20px; right:20px; width:40px; height:40px; background:rgba(255,255,255,0.2); border-radius:50%; color:white; display:flex; justify-content:center; align-items:center; font-size:24px; cursor:pointer; z-index:30001; backdrop-filter:blur(5px); }
    .zoom-container, .main-gallery-img { margin:0 auto 10px auto !important; display:block !important; }
    .zoom-container img, .main-gallery-img img, .product-img-box img { margin:0 auto !important; display:block !important; width:100% !important; height:auto !important; }
    .modal-left img:not(.zoom-container img) { width:50px !important; height:50px !important; }
    .gallery-thumbs { justify-content:center !important; margin-bottom:5px !important; }
    .zoom-container { height:250px !important; }
    .zoom-container img { max-height:100% !important; max-width:100% !important; object-fit:contain !important; }
    .quick-view-overlay { display:none !important; }
    .quick-view-text { display:none !important; }
    .close-modal { font-size:32px !important; top:15px !important; right:15px !important; z-index:20005 !important; background:rgba(255,255,255,0.8); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
    .modal-content { padding-top:0 !important; }
    .modal-right { padding:20px !important; padding-top:15px !important; }
    #product-detail-view { padding-top:16px !important; }
    .breadcrumb { font-size:16px !important; margin-bottom:12px !important; }
    .detail-right { padding-top:5px !important; }
    .btn-black, .btn-order-form { padding:13px !important; margin-bottom:8px !important; }
    .btn-detail-page { padding:10px !important; margin-top:5px !important; }
    .badge {
        top: 6px !important;
        left: 6px !important;
        padding: 2px 5px !important;
        font-size: 9px !important;
        border-radius: 3px !important; }
    /* MOBİL ARAMA KUTUSU DÜZELTMESİ */
    .search-dropdown {
        position: fixed !important;
        top: 65px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid#eee !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.93) !important;
        z-index: 9999 !important;
    }

    /* Arama inputunu da biraz büyütelim */
    .search-dropdown input {
        font-size: 16px !important;
        padding: 12px !important;
        height: 45px !important;}    
}

/* --- YENI KAPSUL PAGINATION TASARIMI (KUCULTULMUS - %50 - HOVER YOK) --- */
.pagination-container{display:flex;justify-content:center;margin:30px 0;padding:0 5px;}
.pagination-capsule{background:#ffffff;border:1px solid#e0e0e0;border-radius:25px;padding:4px 6px;display:flex;align-items:center;gap:8px;box-shadow:0 5px 15px rgba(0,0,0,0.08);}
.pag-circle-btn{width:24px;height:24px;border-radius:50%;border:none;background-color:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 5px rgba(0,0,0,0.2);}
.pag-circle-btn:hover{background-color:#333;transform:scale(1.1);}
.pag-circle-btn.disabled{background-color:#f0f0f0;color:#ccc;cursor:default;box-shadow:none;transform:none;}
.pag-numbers-track{display:flex;gap:4px;padding:0 4px;}
.page-num-simple{font-family:'Helvetica Neue',sans-serif;font-size:11px;font-weight:600;color:#999;cursor:pointer;padding:2px 5px;border-radius:4px;transition:all 0.3s;min-width:20px;text-align:center;}
.page-num-simple:hover{color:#000;background-color:#f9f9f9;}
.page-num-simple.active{color:#000;font-size:13px;font-weight:800;background-color:transparent;pointer-events:none;}
@media (max-width:768px){.pag-circle-btn{width:20px;height:20px;font-size:9px;}.pagination-capsule{padding:3px 4px;gap:5px;}.page-num-simple{font-size:10px;padding:2px 4px;min-width:18px;}.page-num-simple.active{font-size:12px;}}

/* Bu kodu style.css dosyasının en altına yapıştır */
.product-card {
    opacity: 1 !important; /* Ürünleri görünür olmaya zorla */
    animation: none !important; /* Hata yaratan animasyonu iptal et */
}

/* --- ÇEKMECE MENÜ (DRAWER) - BİREBİR AYNI TASARIM --- */

/* Kapsayıcı (Ana Menü Öğesi) */
.drawer-parent {
    position: relative !important;
    overflow: visible !important; /* Taşmaya izin ver ki menü gözüksün */
}

/* Çekmece Kutusu */
.drawer-content {
    display: none;              /* Başlangıçta gizli */
    position: absolute;         /* Bağımsız hareket */
    top: 100%;                  /* Tam altına yapış */
    left: 0;
    width: 100%;                /* Üstteki kutuyla aynı genişlikte */
    flex-direction: column !important;
    background-color: var(--bg-gray); /* Üst menüyle AYNI renk */
    padding: 0 !important;
    margin: 0 !important;
    z-index: 9999;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Mouse Üzerine Gelince (HOVER) Açıl */
.drawer-parent:hover .drawer-content {
    display: flex !important;
    animation: fadeIn 0.3s ease;
}

/* Çekmece İçindeki Linkler */
.drawer-content li {
    width: 100% !important;
    border-right: none !important;      /* Sağ çizgiyi kaldır */
    border-bottom: 1px solid #fff;      /* Altına beyaz çizgi (nav ile aynı mantık) */
    background-color: var(--bg-gray) !important; /* Arka plan aynı */
    color: #666 !important;             /* Yazı rengi aynı */
    
    /* Font ve Hizalama (Nav ile aynı) */
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    justify-content: center !important; /* Ortala */
    padding: 10px 5px !important;       /* Boşluklar */
}

/* Hover Durumu (Nav ile aynı) */
.drawer-content li:hover {
    background-color: var(--active-tab-gray) !important;
    color: #000 !important;
}

/* --- MOBİL ALT MENÜ (2Lİ GRID + TAM GENİŞLİK) --- */
.mobile-sub-menu {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 10px 10px 10px !important;
    margin-top: 0 !important; /* Garanti olsun diye */
    margin-bottom: 5px;
}

.mobile-sub-menu ul {
    display: flex !important;
    flex-wrap: wrap !important; /* Sığmayanı alt satıra at */
    gap: 8px !important;        /* Kutular arası boşluk */
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.mobile-sub-menu li {
    /* MANTIK: %50 genişlikten boşluğu düşüyoruz.
       flex-grow: 1 sayesinde, satırda tek kalırsa otomatik uzar. */
    flex: 1 0 calc(50% - 10px) !important; 
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    padding: 12px 5px !important;
    background-color: #f8f9fa !important;
    color: #333 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    border: 1px solid #e0e0e0 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

/* Seçili Olan */
.mobile-sub-menu li.active-sub {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* --- MOBİL SİPARİŞ FORMU BOŞLUK DÜZENLEMESİ --- */
@media (max-width: 768px) {
    
    /* 1. Sayfanın genel dış boşluğunu azalt (40px -> 15px) */
    #checkout-view {
        padding-top: 15px !important;
        padding-bottom: 20px !important;
    }

    /* 2. Kutucuk satırları arasındaki boşluğu azalt (20px -> 10px) */
    .form-row {
        margin-bottom: 10px !important;
        gap: 10px !important; /* Yan yana duran kutuların arası */
    }
    
    /* Checkout form mobile adjustments */
    .checkout-form {
        padding: 20px;
        margin: 0 -10px;
        border-radius: 8px;
    }
    
    .form-col {
        margin-bottom: 0 !important; /* form-row zaten boşluk veriyor */
    }
    
    .form-col input,
    .form-col textarea,
    .form-col select {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* 3. Sipariş Özeti ile Form arasındaki boşluğu azalt (30px -> 15px) */
    .order-summary {
        margin-bottom: 0 !important;
        padding: 15px !important; /* Özet kutusunun iç boşluğunu da biraz kıstık */
    }
    
    /* Başlıkların alt boşluğunu azalt */
    .checkout-form h2 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }
}

/* === CHECKOUT FORM STYLING FIX === */

/* Main checkout form container gets the card styling */
.checkout-form {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Remove card styling from individual form columns */
.form-col {
    flex: 1;
    /* Removed: background, padding, border-radius, box-shadow */
}

.form-col h2 {
    color: #2c3e50;
    margin-bottom: 30px;
    font-size: 24px;
    text-align: center;
}

/* Style the actual input fields with simple borders */
.form-col input,
.form-col textarea,
.form-col select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.form-col input:focus,
.form-col textarea:focus,
.form-col select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
    outline: none;
}

.form-col label {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: block;
    font-size: 14px;
}

/* SMS verification box styling */
.sms-verification-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
    margin-bottom: 30px;
}

/* --- ÖDEME YÖNTEMİ SEÇİMİ STİLLERİ --- */
.payment-method-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 10px;
}

.payment-option {
    position: relative;
    cursor: pointer;
    display: block;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.payment-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-height: 100px;
}

.payment-option-content i {
    font-size: 28px;
    color: #666;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.payment-option-content span {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

.payment-option:hover .payment-option-content {
    border-color: #4099ff;
    box-shadow: 0 4px 12px rgba(64, 153, 255, 0.1);
}

.payment-option input[type="radio"]:checked + .payment-option-content {
    border-color: #27ae60;
    background: #f0fff4;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.2);
}

.payment-option input[type="radio"]:checked + .payment-option-content i {
    color: #27ae60;
}

.payment-logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

/* SAĞ TARAF ÖDEME SEÇİMİ (Inline Stil) */
.payment-options-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-option-inline {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: #fff;
}

.payment-option-inline:hover {
    border-color: #4099ff;
    background: #f8f9fa;
}

.payment-option-inline input[type="radio"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #27ae60;
}

.payment-option-inline input[type="radio"]:checked ~ .payment-option-label {
    color: #27ae60;
}

.payment-option-inline:has(input:checked) {
    border-color: #27ae60;
    background: #f0fff4;
}

.payment-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.payment-option-label i {
    font-size: 20px;
    color: #666;
}

.payment-option-inline:has(input:checked) .payment-option-label i {
    color: #27ae60;
}

.payment-option-label strong {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.payment-option-label small {
    display: block;
    font-size: 11px;
    color: #888;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .payment-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .payment-option-content {
        flex-direction: row;
        justify-content: flex-start;
        padding: 15px;
        min-height: auto;
    }
    
    .payment-option-content i {
        font-size: 24px;
        margin-bottom: 0;
        margin-right: 12px;
    }
    
    .payment-option-content span {
        font-size: 14px;
        text-align: left;
    }
}

/* --- SIZE ÖZEL (CUSTOM ORDER) PAGE STYLING --- */
.custom-order-container {
    display: flex;
    gap: 30px;
    align-items: stretch; /* CRITICAL: Equal height for both columns */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.info-col {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

.form-col {
    flex: 1;
}

.info-col {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

.custom-form-card {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

.info-col h2, .custom-form-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.steps-vertical {
    margin-bottom: 20px;
    flex: 1;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.step-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.step-content {
    flex: 1;
}

.step-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #000;
}

.step-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.warning-box {
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    border: 2px solid #667eea;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: auto;
}

.warning-box i {
    color: #667eea;
    font-size: 24px;
    flex-shrink: 0;
}

.warning-box p {
    margin: 0;
    font-size: 13px;
    color: #495057;
    line-height: 1.6;
}

.custom-specs-form {
    width: 100%;
}

.custom-form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.custom-form-row .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 12px;
}

.custom-link-group {
    margin-bottom: 12px !important;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #000;
    font-size: 13px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
    background: #fff;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #000;
    outline: none;
}

.form-group small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #666;
    font-style: italic;
}

.btn-primary.big-btn {
    width: 100%;
    padding: 16px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.btn-primary.big-btn:hover {
    opacity: 0.8;
}

.btn-primary.big-btn i {
    font-size: 18px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .custom-order-container {
        flex-direction: column;
        gap: 20px;
        margin: 10px 0;
        padding: 20px 10px;
    }
    
    .info-col,
    .custom-form-card {
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 20px 0; /* Consistent spacing */
        padding: 20px; /* Identical padding */
    }
    
    .info-col h2,
    .custom-form-card h2 {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .custom-form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .step-number {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .step-content h3 {
        font-size: 15px;
    }
    
    .step-content p {
        font-size: 13px;
    }
    
    /* Mobile icon adjustments */
    .step-content h3 i {
        font-size: 16px !important;
        margin-right: 8px !important;
    }
}
/* FORCE HIDDEN CLASS - Override any display rules */
.force-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* --- LCP OPTİMİZASYONU İÇİN YENİ RESİM AYARLARI --- */

/* 1. Kutunun kendisini temizliyoruz (Eski background kalıntıları gitsin) */
.cat-grid-item {
    background-image: none !important; /* Arka plan resmini iptal et */
    position: relative; /* İçindeki resim buna göre hizalansın */
    overflow: hidden; /* Resim taşarsa gizle */
}

/* 2. İçindeki yeni <img> etiketini ayarlıyoruz */
.cat-grid-item img.grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi sündürmeden kutuya tam oturtur (En kritik kod) */
    display: block;
    transition: transform 0.5s ease; /* Hover efekti için */
}

/* 3. Tıklayınca/Üzerine gelince hafif büyüme efekti */
.cat-grid-item:active img.grid-img,
.cat-grid-item:hover img.grid-img {
    transform: scale(1.1);
}

/* --- ADET KUTUSU VE OKLARI İÇİN KESİN ÇÖZÜM (BAŞLANGIÇ) --- */

/* 1. Önce Input'un Kendisini Düzenle */
input[type="number"] {
    -moz-appearance: auto !important; /* Firefox oklarını geri getir */
    appearance: auto !important;      /* Diğer tarayıcılar */
    margin: 0;
    padding-right: 5px; /* Oklar için yer aç */
}

/* 2. Chrome, Safari, Edge İçin Okları Zorla Göster */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    display: block !important;
    position: static !important; /* Kaymaları önler */
    height: auto !important;
    cursor: pointer;
}

/* 3. Adet Kutusunun Boyutunu Sabitle (Kaymayı Önler) */
#modalQty {
    width: 80px !important;
    text-align: center;
    padding: 10px 5px;
    font-size: 16px;
    font-weight: bold;
}

/* --- ADET KUTUSU VE OKLARI İÇİN KESİN ÇÖZÜM (BİTİŞ) --- */
/* Firefox için */
input[type=number] {
    -moz-appearance: textfield; /* Firefox'ta standart görünüm */
}

/* --- YENİ VARYANT SEÇİM KUTUSU (DROPDOWN) TASARIMI --- */
.variant-select-box {
    width: 100%;
    padding: 12px 15px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    outline: none;
    margin-bottom: 15px;
    appearance: none; /* Standart ok işaretini kaldırır, biz ekleyeceğiz */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}
.variant-select-box:focus {
    border-color: #555;
    box-shadow: 0 0 5px rgba(85, 85, 85, 0.3);
}

/* --- ADET OKLARI VE AÇILIR KUTU TASARIMI (KESİN ÇÖZÜM) --- */

/* 1. Adet Kutusundaki Okları Zorla Göster */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    display: block !important;
    cursor: pointer;
}
input[type=number] {
    -moz-appearance: number-input !important;
}

/* 2. Açılır Kutu (Dropdown) Tasarımı */
.variant-select-box {
    width: 100%;
    padding: 12px 40px 12px 15px;
    font-size: 15px;
    color: #333;
    border: 2px solid #eee;
    border-radius: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
    cursor: pointer;
    margin-bottom: 20px;
    appearance: none; /* Custom ok kullanıyoruz */
    -webkit-appearance: none;
}
.variant-select-box:focus {
    border-color: #555;
    outline: none;
}

/* --- MOBILE SPECIFIC FOOTER & NEWSLETTER FIXES --- */
.mobile-break {
    display: none;
}

@media (max-width: 768px) {
    /* Show line break on mobile */
    .mobile-break {
        display: block;
    }

    /* Fix newsletter input overflow */
    .newsletter-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .newsletter-form input {
        min-width: 0 !important;
        width: 100% !important;
    }

    .newsletter-form button {
        width: 100% !important;
        padding: 14px !important;
    }
    
    /* Fix agreements header spacing */
    .footer-agreements h3 {
        margin-top: 30px !important;
        padding-top: 10px !important;
    }
}