:root{ color-scheme:light; --display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif; --body:'Instrument Sans','Helvetica Neue',Arial,sans-serif; --pad:64px; /* Yuzeyler */ --bg:#FAF9F6; --surface:#FFFFFF; --soft:#F2F0EA; --soft-2:#F5F3ED; --glass:rgba(255,255,255,.88); --header-glass:rgba(250,249,246,.92); --band:#14130F; --on-band:#E8E5DC; --on-band-2:#A8A499; --stage-1:#F6F2E9; --stage-2:#EFECE2; --stage-3:#E7E3D7; --shadow:20,19,15; --shadow-a:.24; /* Metin */ --ink:#14130F; --ink-2:#5E5B52; --ink-3:#6F6C63; /* Cizgiler */ --line:#E7E4DC; --line-soft:#F0EEE8; --ghost-line:#DED9CC; --hover-line:#D6D0C0; --field-line:#92908B; --muted-dot:#949085; /* Vurgu ve durum */ --accent:#87663F; --on-accent:#FFFFFF; --accent-deep:#6B5433; --save-bg:#F0EADF; --primary-hover:#000000; --disabled-bg:#E4E1D8; --ok:#3C784B; --ok-bg:#EEF4EF; --ok-line:#CFE2D4; --ok-ink:#2F6B3D; --danger:#A13B32; --danger-bg:#FBF3F2; --danger-line:#E3C9C5; --tag-off:#F4F1EC; /* Gorseller: koyu cihaz kenari, logo */ --rim:transparent; --swatch-ring:rgba(20,19,15,.10); --logo-bg:#14130F; --logo-fg:#E8E5DC; --img-dim:1; } /* Koyu gorunum: ziyaretcinin basliktaki dugmeyle sectigi tema (varsayilan acik). Sunucu secimi cerezden okuyup olarak gonderir. */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#121110; --surface:#1C1B19; --soft:#262420; --soft-2:#211F1C; --glass:rgba(33,31,28,.88); --header-glass:rgba(18,17,16,.88); --band:#1F1D1A; --on-band:#E8E5DC; --on-band-2:#ABA79C; --stage-1:#2A2723; --stage-2:#211F1C; --stage-3:#181715; --shadow:0,0,0; --shadow-a:.55; --ink:#F2EFE8; --ink-2:#C4BFB3; --ink-3:#A29D91; --line:#2E2C28; --line-soft:#262420; --ghost-line:#3A3733; --hover-line:#4A463F; --field-line:#7A766D; --muted-dot:#7A766D; --accent:#D2AB7C; --on-accent:#17130E; --accent-deep:#E0C49D; --save-bg:#2E271E; --primary-hover:#FFFFFF; --disabled-bg:#2A2825; --ok:#83C596; --ok-bg:#17261B; --ok-line:#2A4331; --ok-ink:#83C596; --danger:#F2958A; --danger-bg:#2A1816; --danger-line:#5A2F2A; --tag-off:#262420; --rim:rgba(255,255,255,.28); --swatch-ring:rgba(255,255,255,.26); --logo-bg:#F2EFE8; --logo-fg:#121110; --img-dim:.92; } /* Artirilmis kontrast: her gorunumde belirgin daha fazla ayrim (HIG: color.md) */ @media (prefers-contrast:more){ :root{ --ink-2:#46443D; --ink-3:#4E4B44; --accent:#5F4527; --line:#B9B4A6; --ghost-line:#8C887C; --field-line:#6F6C63; } } @media (prefers-contrast:more){ :root[data-theme="dark"]{ --ink-2:#DAD6CC; --ink-3:#C4BFB3; --accent:#E6C79F; --line:#5C5850; --ghost-line:#7A766D; --field-line:#A29D91; } } *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .btn:focus-visible,.chip:focus-visible,.cart-pill:focus-visible{border-radius:inherit} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.pcard:hover{transform:none!important}} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased} h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.025em;text-wrap:balance;font-weight:600} p{margin:0;text-wrap:pretty} a{color:inherit;text-decoration:none} a:hover{color:var(--accent)} img{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} .wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)} .muted{color:var(--ink-3)} .sub{color:var(--ink-2)} .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} /* --- bantlar --- */ .announce{display:flex;align-items:center;justify-content:center;gap:24px;min-height:40px;padding:8px 16px;background:var(--band);color:var(--on-band);font-size:12.5px;text-align:center} .announce span[aria-hidden]{opacity:.32} .site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px;padding:0 var(--pad);background:var(--header-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.035em} .nav{display:flex;gap:30px;font-size:15px;color:var(--ink-2)} .nav a.is-active{color:var(--ink);font-weight:500} .header-left{display:flex;align-items:center;gap:46px} .header-right{display:flex;align-items:center;gap:20px} .cart-pill{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;font-weight:500} .cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer} .theme-toggle:hover{border-color:var(--accent)} .theme-toggle .icon-sun{display:none} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} .admin-side .theme-toggle{width:100%;border-radius:10px;gap:10px;justify-content:flex-start;padding:0 12px;font-size:14.5px;color:var(--ink-2)} .menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)} /* --- butonlar --- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:10px;border:1px solid transparent;font-size:15.5px;font-weight:500;cursor:pointer;transition:.15s ease} .btn-primary{background:var(--ink);color:var(--bg)} .btn-primary:hover{background:var(--primary-hover);color:var(--bg)} .btn-ghost{border-color:var(--ghost-line);background:var(--surface);color:var(--ink)} .btn-ghost:hover{border-color:var(--accent);color:var(--ink)} .btn-sm{height:42px;padding:0 18px;font-size:14px;border-radius:9px} .btn-block{width:100%} .btn:disabled{background:var(--disabled-bg);border-color:var(--disabled-bg);color:var(--ink-3);cursor:not-allowed;box-shadow:none} .btn-danger{border-color:var(--danger-line);background:var(--surface);color:var(--danger)} .btn-danger:hover{background:var(--danger-bg);color:var(--danger)} .link-accent{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--accent)} .chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14.5px;color:var(--ink-2)} .chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:500} .badge{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:500;letter-spacing:.04em} .badge-accent{background:var(--accent);color:var(--on-accent)} .stock-dot{display:inline-flex;align-items:center;gap:7px;font-size:13px} .stock-dot::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--ok)} .stock-dot.is-out::before{background:var(--muted-dot)} /* --- hero --- */ .hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center;padding:84px 0 92px} .hero h1{font-size:clamp(36px,4.6vw,66px);line-height:1.02} .hero-copy{display:flex;flex-direction:column;gap:28px} .hero-lead{font-size:18.5px;line-height:1.6;color:var(--ink-2);max-width:500px} .pill-eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;height:30px;padding:0 14px;border:1px solid var(--ghost-line);border-radius:999px;background:var(--soft);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)} .pill-eyebrow::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)} .hero-stage{position:relative;min-height:620px;border-radius:24px;background:radial-gradient(120% 90% at 22% 12%,var(--stage-1) 0%,var(--stage-2) 46%,var(--stage-3) 100%);overflow:hidden;display:flex;align-items:center;justify-content:center} .art{max-height:100%;height:auto} .art-rim{stroke:var(--rim);stroke-width:3} .swatches span,.color-opt i,.bundle-opt i,.mini i,.cart-item .thumb,.table .thumb{box-shadow:inset 0 0 0 1px var(--swatch-ring)} .logo-bg{fill:var(--logo-bg)} .logo-fg{stroke:var(--logo-fg)} .pcard-stage img,.pdp-stage img,.hero-stage img,.panel-stage img{filter:brightness(var(--img-dim))} .hero-stage .art{height:84%;width:auto;max-width:70%;filter:drop-shadow(0 34px 54px rgba(var(--shadow),var(--shadow-a))) brightness(var(--img-dim));transform:rotate(4deg)} .hero-stage img{max-height:84%;width:auto;object-fit:contain} .panel-stage img{max-height:80%;width:auto;object-fit:contain} .stage-note{position:absolute;left:32px;bottom:32px;display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-radius:14px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line)} .trust-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3)} /* --- guven seridi --- */ .trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .trust > div{display:flex;gap:14px;padding:30px 32px;border-right:1px solid var(--line)} .trust > div:first-child{padding-left:0} .trust > div:last-child{border-right:0;padding-right:0} .trust b{display:block;font-size:15.5px;font-weight:600;margin-bottom:5px} .trust small{font-size:13.5px;line-height:1.5;color:var(--ink-3)} /* --- bolumler --- */ .section{padding-top:88px} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:26px} .section-head h2{font-size:34px} .panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden} .panel-body{display:flex;flex-direction:column;gap:22px;padding:60px 56px} .panel-stage{position:relative;min-height:520px;background:linear-gradient(160deg,var(--stage-1) 0%,var(--stage-3) 100%);display:flex;align-items:center;justify-content:center;padding:40px} .panel-stage .art{height:80%;width:auto;max-width:62%;filter:drop-shadow(0 30px 46px rgba(var(--shadow),var(--shadow-a))) brightness(var(--img-dim));transform:rotate(-4deg)} .stage-tag{position:absolute;right:28px;top:28px;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;background:var(--surface);font-size:13px;font-weight:500} .price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .price{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.03em} .price-old{font-size:15px;color:var(--ink-3);text-decoration:line-through} .spec-chips{display:flex;gap:10px;flex-wrap:wrap} .spec-chips span{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:13.5px;color:var(--ink-2)} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .step{display:flex;flex-direction:column;gap:14px;padding:34px 32px;border:1px solid var(--line);border-radius:18px;background:var(--surface)} .step span{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink-3)} .step h3{font-size:21px} .step p{font-size:15px;line-height:1.6;color:var(--ink-2)} /* --- urun kartlari --- */ .filters{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:28px} .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;transition:.18s ease} .pcard:hover{border-color:var(--hover-line);transform:translateY(-2px);box-shadow:0 18px 34px -24px rgba(var(--shadow),calc(var(--shadow-a) + .16))} .pcard-stage{position:relative;height:276px;background:linear-gradient(165deg,var(--stage-1) 0%,var(--stage-3) 100%);display:flex;align-items:center;justify-content:center;padding:26px} .pcard-stage .art{height:100%;width:auto;filter:drop-shadow(0 18px 26px rgba(var(--shadow),var(--shadow-a))) brightness(var(--img-dim));transform:rotate(-6deg)} .pcard-stage img{height:100%;width:100%;object-fit:contain} .pcard-stage .badge{position:absolute;left:16px;top:16px} .pcard-body{display:flex;flex-direction:column;gap:10px;padding:20px} .pcard-body h3{font-size:17px} .pcard-body p{font-size:13.5px;line-height:1.5;color:var(--ink-3)} .swatches{display:flex;gap:6px} .swatches span{width:16px;height:16px;border-radius:999px;border:1px solid var(--line)} .pcard-foot{display:flex;align-items:baseline;justify-content:space-between;padding-top:6px} .pcard-foot b{font-family:var(--display);font-size:19px;font-weight:600} /* --- kapanis + footer --- */ .cta-band{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:52px 56px;border-radius:22px;background:var(--band);color:var(--on-band);border:1px solid var(--line)} .cta-band h2{font-size:34px;color:var(--on-band)} .cta-band p{font-size:16px;color:var(--on-band-2);max-width:560px;margin-top:12px} .cta-band .btn{background:var(--on-band);color:var(--band);font-weight:600;flex-shrink:0} .site-footer{margin-top:88px;padding-top:56px;border-top:1px solid var(--line)} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px} .footer-col{display:flex;flex-direction:column;gap:12px;font-size:14.5px;color:var(--ink-2)} .footer-col b{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .pay-tags{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px} .pay-tags span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12px;color:var(--ink-2)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0 32px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)} .footer-bottom nav{display:flex;gap:22px} /* --- urun detay --- */ .crumbs{display:flex;align-items:center;gap:8px;padding-top:22px;font-size:13.5px;color:var(--ink-3)} .pdp{display:grid;grid-template-columns:1fr 540px;gap:56px;padding-top:28px;align-items:start} .pdp-stage{position:relative;min-height:660px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(110% 80% at 30% 15%,var(--stage-1) 0%,var(--stage-2) 55%,var(--stage-3) 100%);display:flex;align-items:center;justify-content:center;padding:48px;overflow:hidden} .pdp-stage .art{height:100%;max-height:560px;width:auto;filter:drop-shadow(0 34px 52px rgba(var(--shadow),var(--shadow-a))) brightness(var(--img-dim))} .pdp-stage img{max-height:560px;object-fit:contain} .pdp-stage .stage-tag{left:24px;right:auto;top:24px;background:var(--glass)} .pdp-info{display:flex;flex-direction:column;gap:22px} .pdp-info h1{font-size:40px;line-height:1.08} .price-block{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .price-block .price{font-size:38px} .save-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:var(--save-bg);color:var(--accent-deep);font-size:13px;font-weight:600} .opt-group{display:flex;flex-direction:column;gap:12px} .opt-head{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;font-weight:600} .opt-head span{font-weight:400;color:var(--ink-3)} .color-row{display:flex;gap:10px;flex-wrap:wrap} .color-opt{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:999px;background:none;cursor:pointer;padding:0} .color-opt i{width:32px;height:32px;border-radius:999px;display:block} .color-opt[aria-pressed="true"]{border:2px solid var(--ink)} .variant-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .variant-opt{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left} .variant-opt b{font-size:15px;font-weight:600} .variant-opt small{font-size:13px;color:var(--ink-3)} .variant-opt[aria-pressed="true"]{border:2px solid var(--ink)} .variant-opt[aria-pressed="true"] small{color:var(--accent-deep)} .bundle{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--ghost-line);border-radius:16px;background:var(--soft-2)} .bundle-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600} .bundle-opts{display:flex;gap:10px;flex-wrap:wrap} .bundle-opt{display:flex;align-items:center;gap:10px;flex:1 1 160px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left} .bundle-opt[aria-pressed="true"]{border:2px solid var(--ink)} .bundle-opt i{width:26px;height:34px;border-radius:7px;display:block;flex-shrink:0} .bundle-opt b{display:block;font-size:13.5px;font-weight:600} .bundle-opt small{font-size:12.5px;color:var(--ink-3)} .assure{display:flex;flex-direction:column;gap:12px} .add-status{display:flex;align-items:center;gap:10px;margin:0;min-height:22px;font-size:14.5px;color:var(--ok)} .add-status a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px} .duo{position:relative;width:min(92%,540px);aspect-ratio:1/1} .duo .art{position:absolute;height:auto;max-height:none} .duo .duo-case{width:40%;left:10%;top:14%;transform:rotate(-11deg);filter:drop-shadow(0 26px 40px rgba(var(--shadow),var(--shadow-a))) brightness(var(--img-dim))} .duo .duo-phone{width:46%;left:40%;top:2%;transform:rotate(5deg);filter:drop-shadow(0 34px 54px rgba(var(--shadow),var(--shadow-a))) brightness(var(--img-dim))} .assure div{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)} .spec-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px} .spec-table div{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14.5px} .spec-table span{color:var(--ink-3)} .spec-table b{font-weight:500;text-align:right} .mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .mini{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)} .mini i{width:58px;height:78px;border-radius:14px;flex-shrink:0;display:block;background-size:cover;background-position:center} .mini b{display:block;font-size:15px;font-weight:600} .mini small{display:block;font-size:13px;color:var(--ink-3);margin:4px 0} .mini u{display:block;font-size:15px;font-weight:600;color:var(--accent-deep);text-decoration:none} /* --- sepet --- */ .steps-bar{display:flex;align-items:center;gap:16px;padding-top:30px;flex-wrap:wrap} .steps-bar div{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-3)} .steps-bar div.is-active{color:var(--ink);font-weight:600} .steps-bar i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--ghost-line);border-radius:999px;font-size:13px;font-weight:600;font-style:normal} .steps-bar div.is-active i{background:var(--ink);border-color:var(--ink);color:var(--bg)} .steps-bar hr{width:56px;height:1px;border:0;background:var(--ghost-line);margin:0} .cart-layout{display:grid;grid-template-columns:1fr 420px;gap:32px;padding-top:32px;align-items:start} .cart-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden} .cart-item{display:flex;align-items:center;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line-soft)} .cart-item:last-child{border-bottom:0} .cart-item .thumb{width:76px;height:100px;border-radius:14px;flex-shrink:0;background-size:cover;background-position:center} .cart-item .info{display:flex;flex-direction:column;gap:6px;flex-grow:1;min-width:0} .cart-item .info b{font-size:16.5px;font-weight:600} .cart-item .info small{font-size:13.5px;color:var(--ink-3)} .cart-item .line-total{font-family:var(--display);font-size:19px;font-weight:600;width:116px;text-align:right} .qty{display:flex;align-items:center;border:1px solid var(--field-line);border-radius:10px;overflow:hidden} .qty button{width:44px;height:44px;border:0;background:none;font-size:17px;cursor:pointer;color:var(--ink)} .qty span{width:36px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:15px;font-weight:600} .remove-btn{align-self:flex-start;min-height:44px;border:0;background:none;color:var(--ink-3);font-size:13.5px;cursor:pointer;text-align:left;padding:0;text-decoration:underline;text-underline-offset:3px} .remove-btn:hover{color:var(--danger)} .box{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)} .box h2{font-size:19px} .summary-rows{display:flex;flex-direction:column;gap:11px;font-size:14.5px} .summary-rows div{display:flex;justify-content:space-between;gap:16px} .summary-total{display:flex;align-items:baseline;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)} .summary-total b{font-size:16px;font-weight:600} .summary-total .price{font-size:28px} .radio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .radio-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))} .radio-card{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--surface)} .radio-card[aria-pressed="true"],.radio-card.is-on{border:2px solid var(--ink)} .radio-card i{width:20px;height:20px;border:1px solid var(--field-line);border-radius:999px;flex-shrink:0;margin-top:2px;display:inline-flex;align-items:center;justify-content:center} .radio-card.is-on i{border-color:var(--ink)} .radio-card.is-on i::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--ink)} .radio-card b{display:block;font-size:15px;font-weight:600} .radio-card small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:4px} .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:13.5px;font-weight:600} .field input,.field textarea,.field select{height:48px;padding:0 14px;border:1px solid var(--field-line);border-radius:10px;background:var(--surface);font-size:16px} .field textarea{height:auto;padding:12px 14px;line-height:1.5;resize:vertical} .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:var(--accent);outline-offset:1px;border-radius:10px} .field [aria-invalid="true"]{border-color:var(--danger)} .field-error{margin:0;font-size:13.5px;line-height:1.4;color:var(--danger)} .field-hint{margin:0;font-size:13px;color:var(--ink-3)} .field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .note{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--soft-2);font-size:14px;color:var(--ink-2)} .note div{display:flex;align-items:center;gap:10px} .empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 24px;border:1px dashed var(--hover-line);border-radius:18px;text-align:center;color:var(--ink-2)} .flash{padding:14px 18px;border-radius:12px;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-ink);font-size:14.5px} .flash.is-error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)} /* --- admin --- */ .admin-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh} .admin-side{display:flex;flex-direction:column;gap:6px;padding:26px 18px;border-right:1px solid var(--line);background:var(--surface)} .admin-side .brand{padding:0 10px 22px} .admin-side a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;font-size:14.5px;color:var(--ink-2)} .admin-side a:hover{background:var(--soft);color:var(--ink)} .admin-side a.is-active{background:var(--ink);color:var(--bg)} .admin-side form{margin-top:auto;padding-top:20px} .admin-main{padding:34px 40px 80px;min-width:0} .admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:24px;flex-wrap:wrap} .admin-head h1{font-size:28px} .table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);font-size:14.5px} .table th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--soft-2)} .table td{padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle} .table tr:last-child td{border-bottom:0} .table .thumb{width:44px;height:58px;border-radius:9px;background-size:cover;background-position:center;border:1px solid var(--line)} .table .row-main{display:flex;align-items:center;gap:12px} .tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;background:var(--soft);font-size:12px;font-weight:500;color:var(--ink-2)} .tag.is-on{background:var(--ok-bg);color:var(--ok-ink)} .tag.is-off{background:var(--tag-off);color:var(--ink-3)} .row-actions{display:flex;gap:8px;justify-content:flex-end} .admin-form{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start} .form-card{display:flex;flex-direction:column;gap:18px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--surface)} .form-card h2{font-size:18px} .rowset{display:flex;flex-direction:column;gap:10px} .rowset .rowline{display:flex;gap:8px;align-items:center} .rowset .rowline input{flex:1 1 0;min-width:0;height:44px;padding:0 12px;border:1px solid var(--field-line);border-radius:9px;font-size:14px} .rowset .rowline input[type=color]{flex:0 0 46px;padding:3px;height:42px} .rowset .rowline button{flex-shrink:0;width:44px;height:44px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;color:var(--ink-3)} .rowset .rowline button:hover{color:var(--danger);border-color:var(--danger-line)} .image-drop{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .image-preview{width:100%;height:220px;border:1px solid var(--line);border-radius:14px;background:var(--soft-2) center/contain no-repeat;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:13.5px} .switch{display:flex;align-items:center;gap:10px;font-size:14.5px} .admin-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px} .admin-login form{display:flex;flex-direction:column;gap:16px;width:380px;padding:32px;border:1px solid var(--line);border-radius:18px;background:var(--surface)} .stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-bottom:26px} .stat{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)} .stat b{font-family:var(--display);font-size:26px;font-weight:600} .stat span{font-size:13px;color:var(--ink-3)} .order-items{font-size:13.5px;color:var(--ink-2);line-height:1.6} @media (max-width:1180px){ :root{--pad:32px} .hero,.panel,.pdp,.cart-layout,.admin-form{grid-template-columns:1fr} .pdp-stage{min-height:460px} .hero-stage{min-height:420px} .grid,.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .trust{grid-template-columns:repeat(2,minmax(0,1fr))} .trust > div{padding:24px 20px!important;border-bottom:1px solid var(--line)} .spec-table{grid-template-columns:1fr;gap:0} .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ .steps{grid-template-columns:1fr} .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .nav{display:none} .menu-toggle{display:inline-flex} .site-header{position:sticky} .nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px var(--pad) 14px;background:var(--bg);border-bottom:1px solid var(--line)} .nav.is-open a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line-soft)} .nav.is-open a:last-child{border-bottom:0} .admin-shell{grid-template-columns:1fr} .admin-side{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:0;border-bottom:1px solid var(--line)} .admin-side .brand{padding:0 8px 0 0} .admin-side form{margin:0} .admin-main{padding:24px 18px 60px} .cta-band{flex-direction:column;align-items:flex-start;padding:34px} .panel-body{padding:34px 24px} } @media (max-width:640px){ :root{--pad:18px} .site-header{height:62px} .cart-pill span:not(.cart-count){display:none} .cart-pill{padding:0 12px} .header-right{gap:12px} .header-right > span[aria-hidden]{display:none} .announce{gap:0;font-size:12px} .announce span:nth-child(n+2){display:none} .grid,.mini-grid,.variant-row,.field-row{grid-template-columns:repeat(2,minmax(0,1fr))} .radio-grid,.radio-grid.three{grid-template-columns:1fr} .trust{grid-template-columns:1fr} .pdp-stage{padding-top:76px} .trust > div{border-right:0} .hero{padding:28px 0 32px;gap:22px} .section{padding-top:48px} .section-head{flex-direction:column;align-items:flex-start;gap:10px} .section-head h2,.cta-band h2{font-size:24px} .pdp-info h1{font-size:28px} .price{font-size:26px} .price-block .price{font-size:30px} .cart-item{flex-wrap:wrap;gap:14px} .cart-item .line-total{width:auto;margin-left:auto} .footer-grid{grid-template-columns:1fr} .table{display:block;overflow-x:auto;white-space:nowrap} } /* --- telefonuna uyan kilif filtresi --- */ .phone-filter{display:flex;flex-direction:column;gap:18px;margin-bottom:28px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface)} .phone-filter-head h3{font-size:19px} .phone-filter-head p{margin-top:6px;font-size:14.5px} .phone-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end} .phone-filter-row .btn{height:48px} .phone-filter select:disabled{color:var(--ink-3);background:var(--soft-2);cursor:not-allowed} .phone-filter-result{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-soft);font-size:15px} .phone-filter-result .link-accent{min-height:44px} .compat-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .compat-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14px;color:var(--ink-2)} .compat-list a:hover{border-color:var(--accent);color:var(--ink)} @media (max-width:640px){ .phone-filter{padding:18px} .phone-filter-row{grid-template-columns:1fr} .phone-filter-row .btn{width:100%} }