/* ===== AYBEX AKSESUAR - Ana Stil Dosyası ===== */ :root{ --black:#0a0a0a; --dark:#161616; --dark-soft:#1f1f22; --white:#ffffff; --gray-50:#fafafa; --gray-100:#f4f4f5; --gray-200:#e6e6e8; --gray-300:#d4d4d6; --gray-500:#8a8a8f; --gray-600:#5b5b60; --orange:#ff7a1a; --orange-dark:#ff4d00; --green:#1f8f5f; --radius-sm:10px; --radius:18px; --radius-lg:28px; --shadow:0 10px 30px rgba(0,0,0,.08); --shadow-lg:0 20px 50px rgba(0,0,0,.14); --maxw:1280px; } *{box-sizing:border-box;} html{scroll-behavior:smooth; max-width:100%; overflow-x:hidden;} body{ margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--black); background:var(--white); -webkit-font-smoothing:antialiased; animation:pageIn .55s ease both; max-width:100%; overflow-x:hidden; } /* NOTE: keep this animation opacity-only. Animating `transform` on makes it a permanent containing block for every position:fixed descendant (modals, drawers, etc.) for the lifetime of the page — even after the animation ends — which pushes fixed elements far off-screen on any page taller than the viewport. */ @keyframes pageIn{from{opacity:0;} to{opacity:1;}} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important;} } /* ---------- Scroll-reveal ---------- */ .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);} .reveal.in-view{opacity:1; transform:translateY(0);} .reveal-scale{opacity:0; transform:scale(.9); transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1);} .reveal-scale.in-view{opacity:1; transform:scale(1);} .reveal-delay-1.in-view, .reveal-delay-1{transition-delay:.08s;} .reveal-delay-2.in-view, .reveal-delay-2{transition-delay:.16s;} .reveal-delay-3.in-view, .reveal-delay-3{transition-delay:.24s;} .reveal-delay-4.in-view, .reveal-delay-4{transition-delay:.32s;} h1,h2,h3,h4{ font-family:'Manrope','Inter',sans-serif; margin:0 0 .5em; font-weight:800; letter-spacing:-.02em; } p{margin:0 0 1em; color:var(--gray-600); line-height:1.6;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ul{margin:0; padding:0; list-style:none;} button{font-family:inherit; cursor:pointer;} .container{max-width:var(--maxw); margin:0 auto; padding:0 24px;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; border:none; font-weight:700; font-size:15px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s; white-space:nowrap; } .btn:active{transform:scale(.97);} .btn-primary{background:var(--orange); color:var(--white); box-shadow:0 8px 24px rgba(255,122,26,.35);} .btn-primary:hover{background:var(--orange-dark);} .btn-dark{background:var(--black); color:var(--white);} .btn-dark:hover{background:#000;} .btn-outline{background:transparent; border:1.5px solid var(--gray-300); color:var(--black);} .btn-outline:hover{border-color:var(--black);} .btn-block{width:100%;} .btn-lg{padding:16px 34px; font-size:16px;} .btn:disabled{opacity:.5; cursor:not-allowed;} /* ---------- Top bar ---------- */ .topbar{background:var(--black); color:var(--gray-300); font-size:13px; text-align:center; padding:8px 16px;} .topbar b{color:var(--orange);} /* ---------- Header ---------- */ header.site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--gray-200); } .header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:24px;} .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px;} .logo img{height:40px; width:40px; border-radius:10px;} .logo span{letter-spacing:.02em;} .logo small{display:block; font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--orange);} nav.main-nav{display:flex; align-items:center; gap:28px;} nav.main-nav a{font-weight:600; font-size:15px; color:var(--black); position:relative; padding:6px 0;} nav.main-nav a:hover{color:var(--orange);} nav.main-nav a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange); transition:width .25s ease;} nav.main-nav a:hover::after{width:100%;} .nav-dropdown{position:relative;} .nav-dropdown::after{ /* Bağlantı ile açılır panel arasındaki boşluğu görünmez şekilde kapatır, böylece fare aşağı inerken menü erkenden kapanmaz. */ content:""; position:absolute; left:50%; transform:translateX(-50%); top:100%; width:560px; height:14px; } .nav-dropdown-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:18px; width:560px; display:none; grid-template-columns:1fr 1fr; gap:4px 24px; border:1px solid var(--gray-200); max-height:min(70vh, 520px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; align-content:start; scrollbar-width:thin; scrollbar-color:var(--gray-300) transparent; } .nav-dropdown:hover .nav-dropdown-panel{display:grid;} .nav-dropdown-panel::-webkit-scrollbar{width:8px;} .nav-dropdown-panel::-webkit-scrollbar-track{background:transparent;} .nav-dropdown-panel::-webkit-scrollbar-thumb{background:var(--gray-300); border-radius:8px;} .nav-dropdown-panel::-webkit-scrollbar-thumb:hover{background:var(--gray-500);} .nav-dropdown-panel a{display:block; padding:9px 10px; border-radius:8px; font-weight:500; font-size:14px;} .nav-dropdown-panel a:hover{background:var(--gray-100); color:var(--orange);} .nav-dropdown-panel .brand-label{grid-column:1/-1; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); margin:10px 0 2px; font-weight:700;} .nav-dropdown-panel .brand-label:first-child{margin-top:0;} .nav-dropdown-panel > a:first-child{position:sticky; top:0; background:var(--white); z-index:1; padding-top:2px; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--gray-100);} .header-actions{display:flex; align-items:center; gap:18px;} .icon-btn{position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--gray-100); border:none;} .icon-btn:hover{background:var(--gray-200);} .cart-count{ position:absolute; top:-4px; right:-4px; background:var(--orange); color:#fff; font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .cart-count.bounce{animation:cartBounce .5s cubic-bezier(.34,1.56,.64,1);} @keyframes cartBounce{0%{transform:scale(1);} 35%{transform:scale(1.5);} 60%{transform:scale(.85);} 100%{transform:scale(1);}} .icon-btn{transition:transform .2s ease;} .icon-btn:active{transform:scale(.9);} .icon-btn[title="Ara"]{cursor:pointer;} /* ---------- Arama kutusu (overlay) ---------- */ .search-overlay{ position:fixed; inset:0; background:rgba(17,17,17,.55); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:110px 20px 0; opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:300; } .search-overlay.show{opacity:1; visibility:visible;} .search-box{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:min(560px, 100%); padding:6px 8px 6px 20px; display:flex; align-items:center; gap:10px; transform:translateY(-14px); transition:transform .25s cubic-bezier(.34,1.2,.64,1); } .search-overlay.show .search-box{transform:translateY(0);} .search-box .search-ic{font-size:18px; flex:none; opacity:.6;} .search-box input{flex:1; border:none; outline:none; font-size:16px; padding:15px 0; font-family:inherit; background:transparent; color:var(--black);} .search-box .search-close{ flex:none; width:36px; height:36px; border-radius:50%; border:none; background:var(--gray-100); cursor:pointer; font-size:14px; color:var(--gray-500); } .search-box .search-close:hover{background:var(--gray-200); color:var(--black);} /* ---------- Mobile menu ---------- */ .burger{ display:none; flex-direction:column; gap:4px; width:40px; height:40px; align-items:center; justify-content:center; border:none; background:var(--gray-100); border-radius:50%; flex:none; } .burger span{width:18px; height:2px; background:var(--black); border-radius:2px; transition:transform .3s ease, opacity .3s ease;} .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:299; opacity:0; pointer-events:none; transition:opacity .3s ease;} .drawer-overlay.show{opacity:1; pointer-events:auto;} .mobile-drawer{ position:fixed; top:0; right:-100%; width:84%; max-width:340px; height:100%; background:#fff; z-index:300; box-shadow:-10px 0 50px rgba(0,0,0,.25); transition:right .38s cubic-bezier(.16,.8,.3,1); padding:24px 22px; overflow-y:auto; } .mobile-drawer.open{right:0;} .mobile-drawer .drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;} .mobile-drawer .drawer-close{width:36px; height:36px; border-radius:50%; background:var(--gray-100); border:none; font-size:18px;} .mobile-drawer a{display:block; padding:14px 4px; font-weight:700; font-size:15px; border-bottom:1px solid var(--gray-100); color:var(--black);} .mobile-drawer a:active{color:var(--orange);} .mobile-drawer .drawer-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); font-weight:700; margin:20px 0 6px; padding-top:16px; border-top:1px solid var(--gray-100); } /* Marka akordeonu: her marka bir başlık düğmesi, altında kapalı/açık model listesi */ .drawer-brand{border-bottom:1px solid var(--gray-100);} .drawer-brand-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; padding:13px 4px; font-weight:700; font-size:14.5px; color:var(--black); text-align:left; font-family:inherit; cursor:pointer; } .drawer-brand-toggle .chev{flex:none; color:var(--gray-500); transition:transform .2s ease;} .drawer-brand.open .drawer-brand-toggle .chev{transform:rotate(180deg); color:var(--orange);} .drawer-brand-panel{display:none; padding-bottom:6px;} .drawer-brand.open .drawer-brand-panel{display:block;} .drawer-brand-panel a{ padding:9px 4px 9px 14px; font-weight:500; font-size:13.5px; color:var(--gray-600); border-bottom:none; } .drawer-brand-panel a:active{color:var(--orange);} @media (max-width: 980px){ .burger{display:flex;} } /* ---------- Hero ---------- */ .hero{ background:radial-gradient(ellipse at 75% 25%, #232323 0%, var(--black) 60%); color:#fff; position:relative; overflow:hidden; } .hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding:90px 24px 70px; max-width:var(--maxw); margin:0 auto; } .hero-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,122,26,.12); color:var(--orange); border:1px solid rgba(255,122,26,.35); padding:7px 16px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:22px; animation:badgePulse 2.6s ease-in-out infinite; } @keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,26,.30);} 50%{box-shadow:0 0 0 9px rgba(255,122,26,0);}} .hero-blob{position:absolute; border-radius:50%; filter:blur(70px); z-index:0; pointer-events:none;} .hero-blob.b1{width:420px; height:420px; background:radial-gradient(circle, rgba(255,122,26,.45), transparent 70%); top:-120px; left:5%; animation:blobMove 17s ease-in-out infinite;} .hero-blob.b2{width:340px; height:340px; background:radial-gradient(circle, rgba(255,77,0,.35), transparent 70%); bottom:-100px; right:8%; animation:blobMove 21s ease-in-out infinite reverse;} @keyframes blobMove{ 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(50px,-35px) scale(1.12);} 66%{transform:translate(-35px,25px) scale(.92);} } .hero-copy, .hero-art{position:relative; z-index:1;} .stat-num{display:inline-block;} .hero h1{font-size:56px; line-height:1.05; margin-bottom:20px; color:#fff;} .hero h1 em{font-style:normal; color:var(--orange);} .hero p.lead{color:#bdbdc2; font-size:18px; max-width:460px; margin-bottom:32px;} .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;} .hero-stats{display:flex; gap:36px; margin-top:48px;} .hero-stats div b{display:block; font-size:26px; font-weight:800;} .hero-stats div span{font-size:13px; color:var(--gray-500);} .hero-art{position:relative; display:flex; justify-content:center; align-items:center; min-height:420px;} .hero-art picture{display:block; width:100%; max-width:460px;} .hero-photo{ width:100%; height:auto; display:block; filter:drop-shadow(0 35px 45px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(255,122,26,.25)); animation:floatY 4.5s ease-in-out infinite; } .hero-glow{position:absolute; width:440px; height:440px; background:radial-gradient(circle, rgba(255,122,26,.35), transparent 70%); filter:blur(10px); z-index:0; animation:glowPulse 3.5s ease-in-out infinite;} @keyframes floatY{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-20px) rotate(1deg);}} @keyframes glowPulse{0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);}} /* ---------- Trust strip ---------- */ .trust-strip{border-bottom:1px solid var(--gray-200);} .trust-strip .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; padding:22px 24px;} .trust-item{display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--black);} .trust-item .ic{width:38px; height:38px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; color:var(--orange); flex:none;} .trust-item .ic svg{width:19px; height:19px;} /* ---------- Section headings ---------- */ .section{padding:70px 24px;} .section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:20px; flex-wrap:wrap;} .section-head h2{font-size:34px;} .section-head p{margin:0; max-width:480px;} .eyebrow{color:var(--orange); font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; display:block;} /* ---------- Category cards ---------- */ .cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;} .cat-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:38px; color:#fff; transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s ease; isolation:isolate; } .cat-card:hover{transform:translateY(-8px) scale(1.008); box-shadow:var(--shadow-lg);} .cat-card.kilif{background:linear-gradient(150deg,#2b2b2b,#0a0a0a 65%);} .cat-card.cam{background:linear-gradient(150deg,#ff9a4d,#ff5200 65%);} .cat-card .cat-glow{position:absolute; inset:0; z-index:0; opacity:.55; transition:opacity .4s ease; background:radial-gradient(480px circle at 85% 15%, rgba(255,255,255,.16), transparent 60%);} .cat-card:hover .cat-glow{opacity:.9;} .cat-kicker{position:relative; z-index:1; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:10px; display:block;} .cat-card h3{position:relative; z-index:1; font-size:30px; margin-bottom:10px; letter-spacing:-.01em;} .cat-card p{position:relative; z-index:1; color:rgba(255,255,255,.78); margin-bottom:18px; max-width:320px;} .cat-card .btn{position:relative; z-index:1; align-self:flex-start;} .cat-arrow{transition:transform .25s cubic-bezier(.16,.8,.3,1);} .cat-card:hover .cat-arrow{transform:translateX(4px);} .cat-card .cat-icon{position:absolute; right:-6px; top:-10px; z-index:0; opacity:.16; width:200px; height:240px; transition:transform .5s cubic-bezier(.16,.8,.3,1), opacity .4s ease;} .cat-card:hover .cat-icon{transform:translateY(-8px) rotate(-2deg); opacity:.24;} .cat-tags{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;} .cat-tags span{font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(2px);} .cat-card.cam .cat-tags span{background:rgba(0,0,0,.16); border-color:rgba(255,255,255,.22);} /* ---------- Model chips ---------- */ .model-scroller-wrap{position:relative;} .model-scroller{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; } .model-scroller::-webkit-scrollbar{display:none;} .scroll-nav{ position:absolute; top:calc(50% - 12px); transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid var(--gray-200); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--black); box-shadow:0 6px 18px rgba(17,17,17,.1); transition:.2s; cursor:pointer; } .scroll-nav:hover{border-color:var(--orange); color:var(--orange); transform:translateY(-50%) scale(1.06);} .scroll-nav.prev{left:-14px;} .scroll-nav.next{right:-14px;} .scroll-nav.is-hidden{opacity:0; pointer-events:none;} .model-chip{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 28px; border-radius:var(--radius); background:var(--gray-50); border:1px solid var(--gray-200); min-width:150px; text-align:center; font-weight:700; font-size:14px; transition:.2s cubic-bezier(.16,.8,.3,1); } .model-chip:hover{border-color:var(--orange); background:#fff5ec; transform:translateY(-5px); box-shadow:var(--shadow);} .model-chip .chip-mark{ height:26px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; } .model-chip .brand{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500);} .model-chip .model-name{font-size:14px;} .model-chip .brand-logo.apple-logo{width:22px; height:auto; color:#1d1d1f;} .model-chip .brand-logo.samsung-logo{font-size:12.5px;} .model-chip .brand-logo.generic-logo{ width:26px; height:26px; border-radius:8px; background:var(--gray-200); color:var(--gray-500); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; } @media (max-width:768px){ .scroll-nav{display:none;} } /* ---------- Product grid / cards ---------- */ .filters-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px;} .product-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;} .product-card{ border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; background:#fff; transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column; } .product-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-6px);} .product-card .thumb{aspect-ratio:1/1; background:var(--gray-50); position:relative; overflow:hidden;} .product-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,.8,.3,1);} .product-card:hover .thumb img{transform:scale(1.08);} .badge-discount{position:absolute; top:12px; left:12px; background:var(--orange); color:#fff; font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; animation:badgeIn .4s ease; z-index:2;} @keyframes badgeIn{from{transform:scale(0);} to{transform:scale(1);}} /* ---------- Sold-out ribbon ---------- */ .thumb.sold-out img, .main-image.sold-out img{filter:grayscale(.75); opacity:.55;} .badge-soldout{ position:absolute; top:20px; left:-42px; width:170px; padding:7px 0; z-index:3; background:#1a1a1a; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-align:center; transform:rotate(-40deg); box-shadow:0 3px 10px rgba(0,0,0,.3); } .badge-soldout::before, .badge-soldout::after{content:''; position:absolute; top:100%; border-style:solid; border-width:4px 5px; border-color:#000 transparent transparent transparent; opacity:.35;} .badge-soldout::before{left:0;} .badge-soldout::after{right:0;} .swatch-dot.out-of-stock{position:relative; opacity:.35; cursor:not-allowed;} .swatch-dot.out-of-stock::after{content:''; position:absolute; inset:-2px; background:linear-gradient(to top right, transparent 46%, currentColor 48%, currentColor 52%, transparent 54%); color:#c0392b;} .color-option.out-of-stock{position:relative; opacity:.35; cursor:not-allowed; pointer-events:none;} .color-option.out-of-stock::after{content:''; position:absolute; inset:-2px; border-radius:50%; background:linear-gradient(to top right, transparent 46%, #c0392b 48%, #c0392b 52%, transparent 54%);} .product-card .info{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;} .product-card .model-tag{font-size:11px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.06em;} .product-card h4{font-size:15px; margin:0; font-weight:700; line-height:1.3;} .product-card .swatches{display:flex; gap:6px; margin:2px 0;} .swatch-dot{width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(0,0,0,.1);} .price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto;} .price-now{font-size:18px; font-weight:800;} .price-old{font-size:13px; color:var(--gray-500); text-decoration:line-through;} .add-btn{margin-top:10px; width:100%; padding:11px; border-radius:999px; background:var(--black); color:#fff; border:none; font-weight:700; font-size:14px; transition:background .2s ease, transform .15s ease;} .add-btn:hover{background:var(--orange);} .add-btn:active{transform:scale(.96);} .add-btn.added{background:var(--green);} /* ---------- Brand marquee ---------- */ .brand-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .brand-track{display:flex; gap:18px; width:max-content; animation:marquee 62s linear infinite;} .brand-track:hover{animation-play-state:paused;} .brand-chip{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; flex:none; padding:12px 22px; border-radius:999px; background:#fff; border:1px solid var(--gray-200); box-shadow:0 2px 10px rgba(17,17,17,.05); transition:border-color .2s, box-shadow .2s, transform .2s; } .brand-chip:hover{border-color:var(--orange); box-shadow:0 6px 18px rgba(255,122,26,.12); transform:translateY(-2px);} .brand-chip b{font-size:15px; font-weight:800; color:var(--black); letter-spacing:.01em;} .brand-logo{display:flex; align-items:center; flex:none;} .brand-logo.apple-logo{width:17px; height:auto; color:#1d1d1f;} .brand-logo.apple-logo path{fill:currentColor;} .brand-logo.samsung-logo{font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:800; letter-spacing:-.01em; color:#1428a0;} .brand-logo.xiaomi-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.01em; color:#fff; background:#ff6900; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.redmi-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.02em; color:#f4761b;} .brand-logo.poco-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.01em; color:#1c1c1e; background:#ffd60a; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.huawei-logo{font-family:Arial, Helvetica, sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.01em; color:#fff; background:#ff0000; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.oppo-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.02em; color:#1a9e5c;} .brand-logo.realme-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.01em; color:#1c1c1e; background:#ffd400; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.vivo-logo{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:800; font-style:italic; letter-spacing:.01em; color:#415fff;} .brand-logo.tecno-logo{font-family:Arial, Helvetica, sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.02em; color:#fff; background:#0057c2; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.infinix-logo{font-family:Arial, Helvetica, sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.01em; color:#1c1c1e;} .brand-logo.generalmobile-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.02em; color:#fff; background:#e30613; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.casper-logo{font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:800; letter-spacing:.02em; color:#009fe3;} .brand-logo.reeder-logo{font-family:Arial, Helvetica, sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.02em; color:#1c1c1e;} .brand-logo.tcl-logo{font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:800; letter-spacing:.02em; color:#fff; background:#e2001a; padding:3px 7px; border-radius:6px; line-height:1;} .brand-logo.honor-logo{font-family:Arial, Helvetica, sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.02em; color:#1c1c1e;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} /* ---------- Skeleton loaders ---------- */ .skeleton-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--gray-200); background:#fff;} .skeleton-card .thumb{aspect-ratio:1/1; background:linear-gradient(100deg, var(--gray-100) 30%, var(--gray-200) 45%, var(--gray-100) 60%); background-size:250% 100%; animation:shimmer 1.3s ease infinite;} .skeleton-card .sk-line{height:11px; background:var(--gray-100); border-radius:6px; margin:14px 16px 0;} .skeleton-card .sk-line.short{width:50%; margin-bottom:16px;} @keyframes shimmer{0%{background-position:150% 0;} 100%{background-position:-50% 0;}} /* ---------- Testimonials ---------- */ .testimonial-track{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin;} .testimonial-card{scroll-snap-align:start; flex:0 0 320px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius); padding:26px;} .testimonial-stars{color:#ffb100; font-size:15px; margin-bottom:12px; letter-spacing:2px;} .testimonial-name{font-weight:700; font-size:14px; margin-top:14px;} .testimonial-meta{font-size:12px; color:var(--gray-500);} /* ---------- Why us ---------- */ .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;} .why-card{padding:28px 22px; border-radius:var(--radius); background:var(--gray-50); border:1px solid var(--gray-200); transition:transform .3s ease, box-shadow .3s ease, background .3s ease;} .why-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); background:#fff;} .why-card .ic{width:48px; height:48px; border-radius:14px; background:var(--black); color:var(--orange); display:flex; align-items:center; justify-content:center; margin-bottom:16px;} .why-card h4{font-size:16px; margin-bottom:6px;} .why-card p{font-size:14px; margin:0;} /* ---------- Newsletter ---------- */ .newsletter{background:var(--black); color:#fff; border-radius:var(--radius-lg); padding:50px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;} .newsletter h3{font-size:26px; margin-bottom:6px;} .newsletter p{color:var(--gray-500); margin:0;} .newsletter form{display:flex; gap:10px;} .newsletter input{padding:14px 18px; border-radius:999px; border:none; min-width:260px; font-size:14px;} /* ---------- Footer ---------- */ footer{background:var(--dark); color:var(--gray-300); padding:60px 24px 24px; margin-top:60px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; max-width:var(--maxw); margin:0 auto 40px;} .footer-grid h5{color:#fff; font-size:14px; margin-bottom:16px; letter-spacing:.05em; text-transform:uppercase;} .footer-grid a, .footer-grid p{display:block; font-size:14px; color:var(--gray-500); margin-bottom:10px;} .footer-grid a:hover{color:var(--orange);} .footer-bottom{max-width:var(--maxw); margin:0 auto; padding-top:24px; border-top:1px solid #2a2a2a; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--gray-500);} .footer-bottom a{color:var(--gray-500); transition:color .15s;} .footer-bottom a:hover{color:var(--orange);} .social-row{display:flex; gap:10px;} .social-row a{width:36px; height:36px; border-radius:50%; background:#232323; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;} .social-row a:hover{background:var(--orange); transform:translateY(-2px);} .social-row a svg{width:17px; height:17px; fill:#fff;} /* ---------- Page header (inner pages) ---------- */ .page-head{background:var(--gray-50); padding:36px 24px; border-bottom:1px solid var(--gray-200);} .breadcrumb{font-size:13px; color:var(--gray-500);} .breadcrumb a:hover{color:var(--orange);} .page-head h1{font-size:30px; margin:6px 0 0;} /* ---------- Static info / policy pages ---------- */ .info-page{max-width:860px; margin:0 auto;} .info-page .lead{font-size:17px; color:var(--gray-600); line-height:1.7; margin-bottom:8px;} .info-page h2{font-size:22px; margin-top:44px; margin-bottom:14px;} .info-page h2:first-of-type{margin-top:8px;} .info-page h3{font-size:16px; margin-top:24px; margin-bottom:8px;} .info-page p{font-size:15px; line-height:1.75;} .info-page ul, .info-page ol{margin:0 0 18px; padding-left:20px; color:var(--gray-600); font-size:15px; line-height:1.75;} .info-page li{margin-bottom:6px;} .info-page strong{color:var(--black);} .info-updated{display:inline-block; font-size:12.5px; color:var(--gray-500); background:var(--gray-100); padding:6px 14px; border-radius:999px; margin-bottom:28px;} .info-callout{background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius); padding:20px 24px; margin:20px 0; font-size:14.5px; color:var(--gray-600); line-height:1.7;} .info-callout strong{color:var(--black);} .about-hero{text-align:center; max-width:760px; margin:0 auto 50px;} .about-hero h1{font-size:36px; margin-bottom:14px;} .about-hero p{font-size:16.5px; line-height:1.8;} .about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:var(--maxw); margin:0 auto 60px;} .about-stat{text-align:center; padding:26px 16px; border:1px solid var(--gray-200); border-radius:var(--radius);} .about-stat strong{display:block; font-size:30px; font-family:'Manrope',sans-serif; font-weight:800; color:var(--orange); margin-bottom:4px;} .about-stat span{font-size:13.5px; color:var(--gray-600);} .value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--maxw); margin:0 auto;} .value-card{border:1px solid var(--gray-200); border-radius:var(--radius); padding:28px 24px; transition:box-shadow .2s, transform .2s;} .value-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);} .value-card .ic{width:46px; height:46px; border-radius:14px; background:rgba(255,122,26,.1); display:flex; align-items:center; justify-content:center; margin-bottom:16px;} .value-card .ic svg{width:22px; height:22px; stroke:var(--orange);} .value-card h4{font-size:16px; margin-bottom:6px;} .value-card p{font-size:14px; margin:0;} .steps-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:var(--maxw); margin:0 auto 20px;} .step-card{border:1px solid var(--gray-200); border-radius:var(--radius); padding:24px 20px; position:relative;} .step-card .num{width:32px; height:32px; border-radius:50%; background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-bottom:14px;} .step-card h4{font-size:15px; margin-bottom:6px;} .step-card p{font-size:13.5px; margin:0;} .faq-list{max-width:820px; margin:0 auto;} .faq-item{border-bottom:1px solid var(--gray-200);} .faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; background:none; border:none; text-align:left; padding:20px 4px; font-family:'Manrope',sans-serif; font-weight:700; font-size:15.5px; color:var(--black); cursor:pointer;} .faq-q .chev{flex-shrink:0; width:20px; height:20px; stroke:var(--gray-500); transition:transform .25s ease;} .faq-item.open .faq-q .chev{transform:rotate(180deg); stroke:var(--orange);} .faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;} .faq-a p{padding:0 4px 20px; margin:0; font-size:14.5px;} .faq-cats{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:36px;} .faq-cat-btn{padding:9px 18px; border-radius:999px; border:1.5px solid var(--gray-200); background:#fff; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .15s;} .faq-cat-btn.active, .faq-cat-btn:hover{border-color:var(--orange); color:var(--orange); background:rgba(255,122,26,.06);} @media (max-width:900px){ .about-stats{grid-template-columns:repeat(2,1fr);} .value-grid{grid-template-columns:1fr;} .steps-grid{grid-template-columns:repeat(2,1fr);} } /* ---------- Products listing layout ---------- */ .listing-layout{display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:flex-start;} .filter-box{border:1px solid var(--gray-200); border-radius:var(--radius); padding:22px; position:sticky; top:96px;} .filter-box h5{font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; color:var(--gray-600);} .filter-group{margin-bottom:24px;} .filter-option{display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px; cursor:pointer;} .filter-option input{accent-color:var(--orange); width:16px; height:16px;} .filter-group[data-model-filters]{ max-height:min(48vh, 420px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-right:8px; margin-right:-8px; scrollbar-width:thin; scrollbar-color:var(--gray-300) transparent; } .filter-group[data-model-filters]::-webkit-scrollbar{width:8px;} .filter-group[data-model-filters]::-webkit-scrollbar-track{background:transparent;} .filter-group[data-model-filters]::-webkit-scrollbar-thumb{background:var(--gray-300); border-radius:8px;} .filter-group[data-model-filters]::-webkit-scrollbar-thumb:hover{background:var(--gray-500);} /* ---------- Product detail ---------- */ .product-detail{display:grid; grid-template-columns:1fr 1fr; gap:56px;} .pd-gallery .main-image{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--gray-50); aspect-ratio:1/1; border:1px solid var(--gray-200);} .pd-gallery .main-image img{width:100%; height:100%; object-fit:cover; transition:opacity .25s ease, transform .4s cubic-bezier(.16,.8,.3,1);} .pd-info .model-tag{color:var(--orange); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em;} .pd-info h1{font-size:30px; margin:8px 0 14px;} .pd-price{display:flex; align-items:baseline; gap:12px; margin-bottom:22px;} .pd-price .now{font-size:32px; font-weight:800;} .pd-price .old{font-size:18px; color:var(--gray-500); text-decoration:line-through;} .pd-price .save{background:#fff0e5; color:var(--orange-dark); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px;} .pd-section-title{font-weight:700; font-size:14px; margin:24px 0 10px;} .color-options{display:flex; gap:10px; flex-wrap:wrap;} .color-option{width:42px; height:42px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative; box-shadow:0 0 0 1px var(--gray-300) inset; transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;} .color-option:hover{transform:scale(1.12);} .color-option.active{border-color:var(--orange); transform:scale(1.12);} .color-option-label{font-size:13px; color:var(--gray-600); margin-top:8px;} .qty-row{display:flex; align-items:center; gap:14px; margin:22px 0;} .qty-control{display:flex; align-items:center; border:1px solid var(--gray-300); border-radius:999px; overflow:hidden;} .qty-control button{width:38px; height:38px; background:#fff; border:none; font-size:18px;} .qty-control span{width:40px; text-align:center; font-weight:700;} .feature-list li{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--gray-600); padding:5px 0;} .feature-list li:before{content:"✓"; color:var(--orange); font-weight:800;} .pd-tabs{margin-top:34px; border-top:1px solid var(--gray-200); padding-top:22px;} /* ---------- Product reviews ---------- */ .reviews-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:36px; padding-top:44px; border-top:1px solid var(--gray-200);} .reviews-summary{display:flex; align-items:center; gap:14px;} .reviews-avg{font-size:38px; font-weight:800; line-height:1;} .star-display{display:inline-flex; gap:2px; font-size:14px;} .star-display.stars-lg{font-size:18px;} .star-display .star-on{color:var(--orange);} .star-display .star-off{color:var(--gray-200);} .reviews-layout{display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:flex-start;} .reviews-list{display:flex; flex-direction:column; gap:18px;} .review-card{border:1px solid var(--gray-200); border-radius:var(--radius); padding:18px 20px;} .review-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:12px;} .review-card p{font-size:14px; color:var(--gray-600); margin-bottom:10px; line-height:1.6;} .review-form-box{border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:22px; position:sticky; top:96px;} .star-picker{display:flex; gap:6px; margin-top:6px;} .star-pick{font-size:26px; line-height:1; color:var(--gray-200); transition:transform .15s cubic-bezier(.34,1.56,.64,1), color .15s;} .star-pick:hover{transform:scale(1.15);} .star-pick.active{color:var(--orange);} .review-msg{font-size:13px; margin-bottom:12px; min-height:0;} .review-msg.success{color:#1f8f5f; font-weight:600;} .review-msg.error{color:#c0392b; font-weight:600;} @media (max-width:860px){ .reviews-layout{grid-template-columns:1fr;} .review-form-box{position:static;} } /* ---------- Cart page ---------- */ .cart-layout{display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:flex-start;} .cart-item{display:grid; grid-template-columns:90px 1fr auto; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--gray-200); animation:itemIn .45s cubic-bezier(.16,.8,.3,1) both;} @keyframes itemIn{from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:translateX(0);}} .cart-item img{width:90px; height:90px; object-fit:cover; border-radius:12px; background:var(--gray-50);} .cart-item h4{font-size:15px; margin:0 0 4px;} .cart-item .meta{font-size:13px; color:var(--gray-500); margin-bottom:8px;} .cart-item .remove-link{font-size:13px; color:#c0392b; font-weight:600;} .summary-box{border:1px solid var(--gray-200); border-radius:var(--radius); padding:26px; position:sticky; top:96px;} .summary-row{display:flex; justify-content:space-between; font-size:14px; color:var(--gray-600); margin-bottom:12px;} .summary-row.total{font-size:18px; font-weight:800; color:var(--black); border-top:1px solid var(--gray-200); padding-top:14px; margin-top:14px;} .empty-state{text-align:center; padding:80px 20px;} .empty-state .ic{font-size:56px; margin-bottom:16px;} @keyframes successPop{0%{opacity:0; transform:scale(.3) rotate(-15deg);} 60%{opacity:1; transform:scale(1.15) rotate(5deg);} 100%{transform:scale(1) rotate(0);}} /* ---------- Checkout ---------- */ .checkout-layout{display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:flex-start;} .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .form-grid .full{grid-column:1/-1;} .field label{display:block; font-size:13px; font-weight:700; margin-bottom:7px;} .field input, .field textarea, .field select{ width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--gray-200); font-size:14px; font-family:inherit; } .field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--orange);} .mini-cart-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--gray-200); font-size:13px;} .mini-cart-item img{width:52px; height:52px; border-radius:8px; object-fit:cover; background:var(--gray-50);} /* ---------- Toast ---------- */ .toast{ position:fixed; bottom:28px; right:28px; background:var(--black); color:#fff; padding:16px 22px; border-radius:14px; box-shadow:var(--shadow-lg); font-size:14px; font-weight:600; display:flex; align-items:center; gap:10px; z-index:999; transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; } .toast.show{transform:translateY(0); opacity:1;} /* ---------- Misc ---------- */ .center{text-align:center;} .mt-0{margin-top:0;} .text-muted{color:var(--gray-500);} .spinner{width:28px; height:28px; border-radius:50%; border:3px solid var(--gray-200); border-top-color:var(--orange); animation:spin .7s linear infinite; margin:40px auto;} @keyframes spin{to{transform:rotate(360deg);}} /* ---------- Responsive ---------- */ [data-filter-toggle]{display:none;} @media (max-width: 980px){ .hero-inner{grid-template-columns:1fr; padding-top:50px;} .hero h1{font-size:38px;} .hero-art{order:-1;} .product-grid{grid-template-columns:repeat(2,1fr);} .why-grid{grid-template-columns:repeat(2,1fr);} .cat-grid{grid-template-columns:1fr;} .listing-layout, .product-detail, .cart-layout, .checkout-layout{grid-template-columns:1fr;} .filter-box{position:static;} .footer-grid{grid-template-columns:1fr 1fr;} nav.main-nav{display:none;} /* Ürün listesinde filtreler mobilde ürünlerin üstünü kaplamasın diye varsayılan kapalı, "Filtrele" düğmesiyle açılıp kapanan bir panele döner. */ [data-filter-toggle]{display:flex; align-items:center; justify-content:center;} .filter-box[data-filter-box]{display:none; margin-bottom:24px;} .filter-box[data-filter-box].mobile-open{display:block;} } @media (max-width: 560px){ .product-grid{grid-template-columns:repeat(2,1fr); gap:12px;} .section{padding:44px 16px;} .hero-inner{padding:44px 16px 44px;} .hero h1{font-size:30px;} .footer-grid{grid-template-columns:1fr;} .newsletter{padding:30px;} .newsletter form{width:100%;} .newsletter input{min-width:0; flex:1;} }