/*
Theme Name: Sercan Mağaza
Theme URI: https://www.instagram.com/sercanozalit/
Author: Sercan Ozalit - Fotokopi - Promosyon
Description: Ozalit, fotokopi ve promosyon firmaları için WhatsApp siparişli mağaza teması. Ürünler, sepet, üyelik ve sipariş kayıtları WordPress yönetim panelinden yönetilir.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: sercan
*/

:root{
  --pink:#ff7ba8; --mint:#8cf78c; --teal:#57d3c3; --navy:#1d3a5f;
  --bg:#e4f2f0; --paper:#ffffff; --panel:#f3fbfa;
  --text:#0d1a21; --muted:#4d6a76; --line:#0d1a21; --field:#ffffff;
  --shadow:6px 6px 0 var(--line);
  --r:0px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c181e; --paper:#14242c; --panel:#102027;
    --text:#e9f7f4; --muted:#9ebfc4; --line:#33565f; --field:#0e1f26;
    --shadow:6px 6px 0 #071216;
  }
}
:root[data-theme="dark"]{
  --bg:#0c181e; --paper:#14242c; --panel:#102027;
  --text:#e9f7f4; --muted:#9ebfc4; --line:#33565f; --field:#0e1f26;
  --shadow:6px 6px 0 #071216;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Asap',"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55;
}
h1,h2,h3,h4,.f-d{font-family:'Saira',"Segoe UI",system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; margin:0}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 18px}
.bar{display:flex; height:9px; width:100%}
.bar i{flex:1}
.bar i:nth-child(1){background:var(--pink)}
.bar i:nth-child(2){background:var(--mint)}
.bar i:nth-child(3){background:var(--teal)}

/* ---------- top strip ---------- */
.strip{background:var(--navy); color:#fff; font-size:13.5px}
.strip .wrap{display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:38px; flex-wrap:wrap}
.strip a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45)}
.strip .who{display:flex; gap:14px; align-items:center}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:2px solid var(--line)}
.head{display:flex; align-items:center; gap:14px; min-height:74px}
.brandlink{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.brandlink img{width:50px; height:50px}
.brandname{font-family:'Saira'; font-weight:800; font-size:21px; letter-spacing:.08em; line-height:1}
.brandsub{font-size:11.5px; color:var(--muted); letter-spacing:.02em}
nav.main{display:flex; gap:4px; margin-left:8px}
nav.main a{padding:8px 11px; white-space:nowrap; text-decoration:none; font-weight:600; font-size:14.5px; border:2px solid transparent}
nav.main a:hover{border-color:var(--line)}
.head .grow{flex:1}
.searchbox{display:flex; border:2px solid var(--line); background:var(--field); max-width:260px; flex:1 1 170px; min-width:170px}
.searchbox input{border:0; background:transparent; padding:9px 10px; width:100%; outline:none}
.searchbox button{border:0; background:var(--teal); color:#00221d; padding:0 12px; font-weight:700; cursor:pointer}
.iconbtn{position:relative; border:2px solid var(--line); background:var(--paper); padding:9px 12px; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap}
.iconbtn:hover{background:var(--mint); color:#062e06}
.count{position:absolute; top:-9px; right:-9px; background:var(--pink); color:#33001a; border:2px solid var(--line); min-width:23px; height:23px; font-size:12px; font-weight:700; display:grid; place-items:center; padding:0 4px}
.count[hidden]{display:none}
.burger{display:none}

/* ---------- hero ---------- */
.hero{background:var(--panel); border-bottom:2px solid var(--line); overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center; padding-top:46px; padding-bottom:46px}
.hero h1{font-size:clamp(30px,5.4vw,52px); line-height:1.02; font-weight:800}
.hero p.lede{font-size:17.5px; color:var(--muted); max-width:46ch; margin:16px 0 26px}
.ctas{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; border:2px solid var(--line); padding:13px 20px; font-weight:700; text-decoration:none; cursor:pointer; background:var(--paper); box-shadow:var(--shadow); transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(3px,3px); box-shadow:3px 3px 0 var(--line)}
.btn:active{transform:translate(6px,6px); box-shadow:0 0 0 var(--line)}
.btn.pink{background:var(--pink); color:#33001a}
.btn.mint{background:var(--mint); color:#062e06}
.btn.teal{background:var(--teal); color:#00221d}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 13px; font-size:14px; box-shadow:4px 4px 0 var(--line)}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}
.herofig{position:relative; display:grid; place-items:center}
.herofig img{width:min(330px,72vw); filter:drop-shadow(8px 8px 0 rgba(13,26,33,.14))}
.facts{display:flex; gap:0; border:2px solid var(--line); margin-top:30px; background:var(--paper); flex-wrap:wrap}
.facts div{flex:1 1 120px; padding:13px 15px; border-right:2px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block; font-family:'Saira'; font-size:19px}
.facts span{font-size:13px; color:var(--muted)}

/* ---------- sections ---------- */
section{padding:52px 0}
.sechead{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.sechead h2{font-size:clamp(23px,3.4vw,33px)}
.sechead p{margin:6px 0 0; color:var(--muted); max-width:60ch}
.rule{height:9px; width:120px; display:flex; margin-bottom:14px}
.rule i{flex:1}
.rule i:nth-child(1){background:var(--pink)} .rule i:nth-child(2){background:var(--mint)} .rule i:nth-child(3){background:var(--teal)}

.cats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px}
.cat{border:2px solid var(--line); background:var(--paper); padding:9px 15px; font-weight:600; cursor:pointer; font-size:14.5px}
.cat[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px}
.card{border:2px solid var(--line); background:var(--paper); display:flex; flex-direction:column; box-shadow:var(--shadow)}
.thumb{aspect-ratio:4/3; display:grid; place-items:center; font-size:54px; border-bottom:2px solid var(--line); position:relative; user-select:none; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover}
.drop{border:2px dashed var(--line); padding:14px; text-align:center; background:var(--field); cursor:pointer}
.drop.over{background:color-mix(in srgb, var(--mint) 30%, transparent)}
.prev{width:96px; height:96px; border:2px solid var(--line); object-fit:cover; background:var(--panel)}
.tmini{width:38px; height:38px; object-fit:cover; border:1px solid var(--line); vertical-align:middle}
.thumb .tag{position:absolute; left:0; top:0; background:var(--navy); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; letter-spacing:.04em}
.card .body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:7px; flex:1}
.card h3{font-size:17px; line-height:1.2}
.card .desc{font-size:13.5px; color:var(--muted); flex:1}
.price{font-family:'Saira'; font-weight:700; font-size:20px}
.price small{font-weight:500; font-size:12.5px; color:var(--muted)}
.card .act{display:flex; gap:8px}
.card .act .btn{flex:1; justify-content:center}
.empty{border:2px dashed var(--line); padding:40px 20px; text-align:center; color:var(--muted)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border:2px solid var(--line); background:var(--paper)}
.step{padding:24px; border-right:2px solid var(--line)}
.step:last-child{border-right:0}
.step b{font-family:'Saira'; font-size:34px; display:block; line-height:1}
.step h3{margin:6px 0 6px; font-size:18px}
.step p{margin:0; color:var(--muted); font-size:14.5px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.panel{border:2px solid var(--line); background:var(--paper); padding:24px}
.panel h3{font-size:20px; margin-bottom:10px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-weight:600}

footer.site{background:var(--navy); color:#eaf6ff; padding:36px 0 26px; margin-top:10px}
footer.site a{color:#eaf6ff}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:26px}
footer h4{font-size:15px; letter-spacing:.06em; margin-bottom:10px}
footer ul{list-style:none; margin:0; padding:0; font-size:14.5px; display:grid; gap:7px}
.fine{margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,.25); font-size:13px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:#c9e2ef}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; font-size:inherit; font-family:inherit}

/* float wa */
.fab{position:fixed; right:18px; bottom:18px; z-index:45; background:#25d366; color:#04240f; border:2px solid var(--line); box-shadow:5px 5px 0 var(--line); padding:13px 17px; font-weight:700; cursor:pointer; display:flex; gap:9px; align-items:center}
.fab:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--line)}

/* ---------- drawers / modals ---------- */
.scrim{position:fixed; inset:0; background:rgba(8,22,28,.55); z-index:60; display:none}
.scrim.open{display:block}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--paper); border-left:2px solid var(--line); z-index:61; display:none; flex-direction:column}
.drawer.open{display:flex}
.dhead{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:2px solid var(--line)}
.dhead h2{font-size:20px}
.x{border:2px solid var(--line); background:var(--paper); width:36px; height:36px; font-size:17px; cursor:pointer; line-height:1}
.dbody{flex:1; overflow:auto; padding:16px 18px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-content:start}
.dfoot{border-top:2px solid var(--line); padding:16px 18px; display:grid; gap:10px; background:var(--panel)}
.line{display:flex; gap:10px; border:2px solid var(--line); padding:10px}
.line>div:last-child{flex:0 0 auto; white-space:nowrap; text-align:right}
.line .em{font-size:27px; width:38px; display:grid; place-items:center; flex:0 0 auto}
.line .info{flex:1; min-width:0}
.line .info b{display:block; font-size:15px; overflow-wrap:anywhere}
.line .info span{font-size:13px; color:var(--muted)}
.qty{display:flex; border:2px solid var(--line); width:max-content; margin-top:6px}
.qty button{border:0; background:var(--panel); width:30px; height:30px; cursor:pointer; font-weight:700}
.qty input{width:46px; border:0; border-left:2px solid var(--line); border-right:2px solid var(--line); text-align:center; background:var(--field); height:30px}
.tot{display:flex; justify-content:space-between; font-family:'Saira'; font-weight:700; font-size:19px}
.tot.small{font-family:'Asap'; font-weight:500; font-size:14.5px; color:var(--muted)}

.modal{position:fixed; z-index:61; top:50%; left:50%; transform:translate(-50%,-50%); width:min(860px,94vw); max-height:92vh; overflow:hidden; background:var(--paper); border:2px solid var(--line); box-shadow:10px 10px 0 rgba(13,26,33,.25); display:none; flex-direction:column}
.modal.open{display:flex}
.modal .dhead,.modal .tabs{flex:0 0 auto}
.modal .dbody{display:block; overflow:auto}
form .f{display:grid; gap:5px; margin-bottom:12px}
form label{font-size:13.5px; font-weight:600; color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],select,textarea{
  border:2px solid var(--line); background:var(--field); padding:10px 11px; width:100%; outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--pink)}
textarea{min-height:82px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tabs{display:flex; gap:0; border-bottom:2px solid var(--line); flex-wrap:wrap}
.tabs button{border:0; background:transparent; padding:12px 16px; font-weight:700; cursor:pointer; border-bottom:4px solid transparent; font-family:'Saira'}
.tabs button[aria-selected="true"]{border-bottom-color:var(--pink)}
.note{font-size:13px; color:var(--muted)}
.warn{border:2px solid var(--pink); background:color-mix(in srgb, var(--pink) 18%, transparent); padding:11px 13px; font-size:14px}
.ok{border:2px solid var(--mint); background:color-mix(in srgb, var(--mint) 22%, transparent); padding:11px 13px; font-size:14px}
table.adm{width:100%; border-collapse:collapse; font-size:14px}
table.adm th,table.adm td{border:1px solid var(--line); padding:7px 9px; text-align:left; vertical-align:middle}
table.adm th{background:var(--panel); font-family:'Saira'}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:var(--navy); color:#fff; padding:12px 18px; border:2px solid var(--line); z-index:80; font-weight:600; display:none}
.toast.show{display:block}
.chip{display:inline-block; border:2px solid var(--line); padding:3px 9px; font-size:12.5px; font-weight:600; margin-right:6px}

@media (max-width:860px){
  .head{min-height:62px; gap:8px}
  .brandsub{display:none}
  .brandname{font-size:18px}
  .brandlink img{width:42px; height:42px}
  .iconbtn{padding:8px 10px; font-size:13px}
  .strip .wrap{min-height:32px; font-size:12.5px}
  .fab{padding:11px 14px; font-size:13.5px; right:12px; bottom:12px}
  .hero .wrap{grid-template-columns:1fr; padding-top:30px; padding-bottom:34px}
  .herofig{order:-1}
  .herofig img{width:min(210px,52vw)}
  .split,.fgrid{grid-template-columns:1fr}
  .step{border-right:0; border-bottom:2px solid var(--line)}
  .step:last-child{border-bottom:0}
  nav.main,.searchbox{display:none}
  nav.main.open{display:flex; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:2px solid var(--line); flex-direction:column; padding:8px}
  .burger{display:inline-flex}
  .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px}
  .thumb{font-size:40px}
  .row2{grid-template-columns:1fr}
  section{padding:38px 0}
}

/* --- WordPress'e özel eklemeler --- */
.wp-caption, .alignnone{max-width:100%}
.entry img{max-width:100%; height:auto}
.admin-bar header.site{top:32px}
@media (max-width:782px){ .admin-bar header.site{top:46px} }
.crumbs{font-size:13.5px; color:var(--muted); margin-bottom:14px}
.single-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:860px){ .single-wrap{grid-template-columns:1fr} }
.shot{border:2px solid var(--line); background:var(--panel); aspect-ratio:4/3; display:grid; place-items:center; font-size:90px; overflow:hidden}
.shot img{width:100%; height:100%; object-fit:cover}
.formbox{border:2px solid var(--line); background:var(--paper); padding:22px; max-width:440px}
.formbox label{display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:5px}
.formbox input[type=text],.formbox input[type=password],.formbox input[type=email]{margin-bottom:12px}
.formbox .button, .formbox input[type=submit]{border:2px solid var(--line); background:var(--mint); color:#062e06; padding:11px 18px; font-weight:700; cursor:pointer; box-shadow:var(--shadow)}
.login-remember{font-size:14px; margin-bottom:10px}
.pager{display:flex; gap:8px; margin-top:26px}
.pager a,.pager span{border:2px solid var(--line); padding:7px 12px; text-decoration:none; font-weight:600}
a.thumb{text-decoration:none; color:inherit; display:grid}
.card h3 a{color:inherit}
.card h3 a:hover{text-decoration:underline}
.entry p{margin:0 0 12px}
.entry ul,.entry ol{padding-left:20px}