/* FormanHazır */
@font-face{font-family:'FH Bebas';src:url(../fonts/Bebas.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'FH Bebas';src:url(../fonts/Bebas-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FH Anton';src:url(../fonts/Anton.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:'FH Anton';src:url(../fonts/Anton-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FH Oswald';src:url(../fonts/Oswald.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:'FH Oswald';src:url(../fonts/Oswald-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FH Teko';src:url(../fonts/Teko.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:'FH Teko';src:url(../fonts/Teko-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FH Russo';src:url(../fonts/Russo.woff2) format('woff2');font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:'FH Russo';src:url(../fonts/Russo-ext.woff2) format('woff2');font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'FH Graduate';src:url(../fonts/Graduate.woff2) format('woff2');font-display:swap}

:root{
  --zemin:#f4f6fb;--kart:#ffffff;--metin:#14182b;--soluk:#5d647a;--cizgi:#e2e6f0;
  --ana:#0f1b3d;--vurgu:#c6f432;--vurgu-koyu:#8fb800;--tehlike:#d93636;--basari:#1d9a5b;--uyari:#e3a008;
  --yaricap:14px;--golge:0 8px 30px rgba(15,27,61,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--zemin);color:var(--metin);line-height:1.55;font-size:16px}
a{color:#2648c4}
h1,h2,h3{line-height:1.2;margin:.2em 0 .5em}
h1{font-size:clamp(1.6rem,3.5vw,2.4rem)}
img,svg{max-width:100%;display:block}
[data-tasarim] svg,.onizleme svg{width:100%;height:auto;aspect-ratio:400/440}
.kap{max-width:1200px;margin:0 auto;padding:0 16px}
.dar{max-width:760px}
.kucuk-not{color:var(--soluk);font-size:.88rem}
.gizli{position:absolute;left:-9999px}

.demo-serit{background:#fff4c2;color:#5c4400;text-align:center;font-size:.88rem;padding:6px 12px}
.ust{background:var(--ana);color:#fff;position:sticky;top:0;z-index:20}
.ust-ic{display:flex;align-items:center;gap:24px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800;font-size:1.15rem}
.logo-ikon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--vurgu);color:var(--ana);font-family:'FH Bebas',Impact,sans-serif;font-size:1.3rem}
.menu{display:flex;gap:18px;flex:1}
.menu a,.ust-bag,.sepet-bag{color:#dfe5ff;text-decoration:none;font-weight:600;font-size:.95rem}
.menu a:hover,.ust-bag:hover,.sepet-bag:hover{color:#fff}
.ust-sag{display:flex;gap:16px;align-items:center}
.sepet-bag{background:rgba(255,255,255,.1);padding:8px 14px;border-radius:999px;display:flex;gap:8px;align-items:center}
.rozet{background:var(--vurgu);color:var(--ana);border-radius:999px;padding:0 8px;font-size:.8rem;font-weight:800}
@media (max-width:860px){.menu{display:none}.ust-ic{justify-content:space-between}}

.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--vurgu);color:var(--ana);font-weight:800;border:0;border-radius:12px;padding:12px 22px;text-decoration:none;cursor:pointer;font-size:1rem}
.dugme:hover{background:#b5e61f}
.dugme:disabled{opacity:.5;cursor:not-allowed}
.dugme-ikincil{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.dugme-ikincil:hover{background:rgba(0,0,0,.05)}
.genis{width:100%}
.bag-dugme{background:none;border:0;color:#2648c4;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.bag-dugme.tehlike{color:var(--tehlike)}

.bildirim{background:#eaf2ff;border:1px solid #c9dcff;padding:12px 16px;border-radius:12px;margin:14px 0}
.bildirim-tamam{background:#e8f8ef;border-color:#b6e8cb}
.bildirim-hata{background:#fdecec;border-color:#f5c2c2;color:#8a1f1f}

.kahraman{background:radial-gradient(1200px 500px at 80% 0,#28408f 0,var(--ana) 60%);color:#fff;padding:56px 0 64px}
.kahraman-ic{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.kahraman h1{font-size:clamp(2rem,5vw,3.4rem)}
.kahraman h1 em{font-style:normal;color:var(--vurgu)}
.kahraman p{color:#cdd6f6;font-size:1.1rem}
.etiket{display:inline-block;background:rgba(198,244,50,.15);color:var(--vurgu);padding:4px 12px;border-radius:999px;font-weight:700;font-size:.85rem}
.dugmeler{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.kahraman .dugme-ikincil{color:#fff}
.artilar{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;list-style:none;color:#cdd6f6;font-size:.95rem}
.artilar li::before{content:"✓ ";color:var(--vurgu);font-weight:800}
.kahraman-gorsel{position:relative;min-height:360px}
.donen{width:78%;margin-left:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.donen.kucuk{position:absolute;width:44%;left:0;bottom:0;transform:rotate(-8deg)}
@media (max-width:860px){.kahraman-ic{grid-template-columns:1fr}.kahraman-gorsel{min-height:280px}}

.adimlar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-28px;position:relative}
.adimlar>div{background:var(--kart);border-radius:var(--yaricap);padding:20px;box-shadow:var(--golge)}
.adimlar b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ana);color:var(--vurgu)}
@media (max-width:760px){.adimlar{grid-template-columns:1fr;margin-top:16px}}

.bolum-bas{margin:48px 0 20px}
.bolum-bas p{color:var(--soluk);max-width:720px}
.model-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:16px}
.model-kart{background:var(--kart);border-radius:var(--yaricap);padding:16px;text-decoration:none;color:inherit;box-shadow:var(--golge);transition:transform .15s}
.model-kart:hover{transform:translateY(-3px)}
.model-kart h3{font-size:1.05rem;margin:.6em 0 .2em}
.model-kart p{color:var(--soluk);font-size:.88rem;margin:0 0 .6em}
.model-gorsel{background:linear-gradient(#eef1f8,#e3e8f3);border-radius:10px;padding:12px}
.fiyat{font-weight:800;color:var(--ana)}
.bilgi-serit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px auto}
.bilgi-serit>div{background:var(--kart);border-radius:var(--yaricap);padding:20px;box-shadow:var(--golge)}
@media (max-width:760px){.bilgi-serit{grid-template-columns:1fr}}

/* Konfigürator */
.tasarla{display:grid;grid-template-columns:1fr 440px;gap:28px;padding-top:24px;padding-bottom:40px;align-items:start}
.onizleme-alani{position:sticky;top:84px;background:var(--kart);border-radius:var(--yaricap);padding:16px;box-shadow:var(--golge)}
.onizleme{background:linear-gradient(#eef1f8,#dfe5f1);border-radius:12px;padding:24px;aspect-ratio:400/440;display:grid;place-items:center}
.onizleme svg{width:100%;height:100%;filter:drop-shadow(0 14px 18px rgba(15,27,61,.25))}
.gorunum-sekmeleri{display:flex;gap:8px;margin-bottom:12px}
.gorunum-sekmeleri button{flex:1;border:0;background:#eef1f8;border-radius:10px;padding:10px;font-weight:700;cursor:pointer}
.gorunum-sekmeleri button.aktif{background:var(--ana);color:#fff}
.onizleme-not{font-size:.8rem;color:var(--soluk);margin:10px 0 0}
.secenekler{background:var(--kart);border-radius:var(--yaricap);padding:20px;box-shadow:var(--golge)}
.secenekler details{border-top:1px solid var(--cizgi);padding:12px 0}
.secenekler summary{font-weight:800;cursor:pointer;margin-bottom:8px}
label{display:block;font-weight:600;font-size:.9rem;margin:8px 0}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1.5px solid var(--cizgi);border-radius:10px;background:#fff;margin-top:4px;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid #9db4ff;border-color:#9db4ff}
input[type=checkbox],input[type=radio]{width:auto;margin:0 6px 0 0;accent-color:var(--ana)}
input[type=color]{padding:2px;height:42px;cursor:pointer}
.satir{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.satir input[type=color]{width:60px;margin:0}
.satir-ara{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.iki{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.renk-satiri{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:480px){.iki,.renk-satiri{grid-template-columns:1fr 1fr}}
.palet{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 10px}
.palet button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--cizgi);cursor:pointer}
.mini-modeller{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mini-model{border:2px solid transparent;background:#eef1f8;border-radius:10px;padding:4px;cursor:pointer}
.mini-model.secili{border-color:var(--ana);background:#fff}
.yazi-tipleri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.yazi-tipleri button{border:2px solid var(--cizgi);background:#fff;border-radius:10px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.yazi-tipleri button span{font-size:1.8rem;line-height:1}
.yazi-tipleri button small{font-family:system-ui,sans-serif;font-size:.7rem;color:var(--soluk)}
.yazi-tipleri button.secili,.bedenler button.secili{border-color:var(--ana);background:var(--ana);color:#fff}
.yazi-tipleri button.secili small{color:#cdd6f6}
.bedenler>div{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.bedenler small{width:100%;color:var(--soluk);font-weight:700}
.bedenler button{min-width:46px;border:2px solid var(--cizgi);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:700}
.fiyat-kutu{border-top:2px solid var(--ana);padding-top:14px;margin-top:6px}
.fiyat-kutu ul,.dokum{list-style:none;padding:0;margin:0 0 10px}
.fiyat-kutu li,.dokum li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--cizgi);font-size:.92rem}
.adet-satir{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px}
.adet-satir label{width:110px}
.adet-satir strong{font-size:1.6rem;display:block}
@media (max-width:960px){.tasarla{grid-template-columns:1fr}.onizleme-alani{position:static}.onizleme{max-width:420px;margin:0 auto}}

/* Sepet ve ödeme */
.sepet-duzen{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start;margin-bottom:40px}
@media (max-width:900px){.sepet-duzen{grid-template-columns:1fr}}
.sepet-kalem{display:grid;grid-template-columns:200px 1fr auto;gap:16px;background:var(--kart);border-radius:var(--yaricap);padding:16px;margin-bottom:12px;box-shadow:var(--golge)}
.sepet-gorsel{display:flex;gap:6px}
.sepet-gorsel>div{flex:1;background:#eef1f8;border-radius:10px;padding:6px}
.sepet-islemler{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.sepet-islemler label{display:flex;align-items:center;gap:6px;margin:0}
.sepet-islemler input{width:70px;margin:0}
.sepet-tutar{font-weight:800;font-size:1.1rem}
@media (max-width:640px){.sepet-kalem{grid-template-columns:1fr}.sepet-gorsel{max-width:260px}}
.ozet-kutu,.form-kutu{background:var(--kart);border-radius:var(--yaricap);padding:20px;box-shadow:var(--golge);margin-bottom:16px}
.ozet-kutu{position:sticky;top:84px}
.toplam-satir{display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;margin:10px 0}
.toplam-satir strong{font-size:1.5rem}
.ozet-kalem{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;margin-bottom:10px;font-size:.9rem}
.bos{text-align:center;padding:40px 0}
.adim-cubugu{display:flex;gap:8px;list-style:none;padding:0;margin:20px 0;counter-reset:a}
.adim-cubugu li{flex:1;padding:10px;border-radius:10px;background:#e7ebf5;font-weight:700;font-size:.9rem;counter-increment:a}
.adim-cubugu li::before{content:counter(a) ". "}
.adim-cubugu .aktif{background:var(--ana);color:#fff}
.adim-cubugu .tamam{background:#d8f0e2}
.odeme-secim{border:1.5px solid var(--cizgi);border-radius:12px;padding:12px 16px;margin:12px 0}
.odeme-secim label{display:block;margin:8px 0}
.odeme-secim small{display:block;color:var(--soluk);font-weight:400;margin-left:24px}
.sozlesme-kutu{max-height:260px;overflow:auto;border:1.5px solid var(--cizgi);border-radius:12px;padding:12px 16px;font-size:.86rem;background:#fafbfe;margin-bottom:12px}
.sozlesme h3{font-size:1.05rem}.sozlesme h4{font-size:.95rem;margin:1em 0 .3em}
.sozlesme-tablo{width:100%;border-collapse:collapse;font-size:.85rem;margin:8px 0}
.sozlesme-tablo th,.sozlesme-tablo td{border:1px solid var(--cizgi);padding:6px;text-align:left}
.tesekkur{background:#e8f8ef;border-radius:var(--yaricap);padding:24px;margin:20px 0}
.vurgulu{background:#fffbea;border-left:4px solid var(--uyari)}
.durum-cizgisi{display:flex;list-style:none;padding:0;margin:20px 0;gap:6px}
.durum-cizgisi li{flex:1;text-align:center;padding:10px 6px;border-radius:10px;background:#e7ebf5;font-size:.85rem;font-weight:700;color:var(--soluk)}
.durum-cizgisi .tamam{background:#d8f0e2;color:#0f5a35}
.durum-cizgisi .aktif{background:var(--ana);color:#fff}
@media (max-width:560px){.durum-cizgisi{flex-direction:column}}
.gecmis{list-style:none;padding:0}
.gecmis li{padding:8px 0;border-bottom:1px solid var(--cizgi)}
.gecmis time{color:var(--soluk);font-size:.85rem;margin-right:6px}
.tablo{width:100%;border-collapse:collapse;background:var(--kart);border-radius:12px;overflow:hidden;font-size:.92rem}
.tablo th,.tablo td{padding:10px 12px;border-bottom:1px solid var(--cizgi);text-align:left;vertical-align:top}
.tablo th{background:#f0f3fa;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;color:var(--soluk)}
@media (max-width:640px){.tablo{display:block;overflow-x:auto}}
.durum{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:700;background:#e7ebf5}
.durum-odeme_bekliyor{background:#fff1c7;color:#7a5600}.durum-onaylandi{background:#dce8ff;color:#1c3f99}.durum-uretimde{background:#efe0ff;color:#5b2a91}
.durum-kargoda{background:#d6f3f6;color:#0b5c66}.durum-teslim_edildi{background:#d8f0e2;color:#0f5a35}.durum-iptal{background:#fde0e0;color:#8a1f1f}
.metin{padding-bottom:40px}.metin h2{margin-top:1.4em}
details.sss{background:var(--kart);border-radius:12px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--golge)}
details.sss summary{font-weight:700;cursor:pointer}

.alt{background:var(--ana);color:#cdd6f6;margin-top:40px;padding:40px 0 16px}
.alt-ic{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.alt h4{color:#fff;margin:.2em 0 .6em}
.alt a{color:#cdd6f6;display:block;text-decoration:none;margin:4px 0}
.alt p a{display:inline}
.alt a:hover{color:#fff}
.alt-not{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:14px;font-size:.8rem}
.alt-not a{display:inline;color:var(--vurgu)}
@media (max-width:760px){.alt-ic{grid-template-columns:1fr}}
.wa-dugme{position:fixed;right:16px;bottom:16px;background:#25d366;color:#fff;font-weight:800;text-decoration:none;padding:12px 18px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:30}
@media print{.ust,.alt,.wa-dugme,.demo-serit{display:none}}

/* Kumaş, set, logo, paylaşım (v3) */
.onizleme-arac{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:10px;font-size:.88rem}
.tasarim-kodu{margin-right:auto;color:var(--soluk)}
.tasarim-kodu strong{color:var(--metin);letter-spacing:.04em}
.kumaslar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kumas-kart{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;column-gap:10px;text-align:left;border:2px solid var(--cizgi);background:#fff;border-radius:12px;padding:8px;cursor:pointer;font:inherit}
.kumas-kart .kumas-ornek{grid-row:1/4;width:44px;height:44px;border-radius:8px;background-color:#c9d3ea}
.kumas-kart strong{font-size:.9rem}
.kumas-kart small{color:var(--soluk);font-size:.75rem;line-height:1.3}
.kumas-kart em{font-style:normal;font-weight:800;font-size:.8rem;color:var(--ana)}
.kumas-kart.secili{border-color:var(--ana);box-shadow:0 0 0 2px var(--vurgu)}
.kumas-interlok{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px)}
.kumas-mesh{background-image:radial-gradient(circle,rgba(0,0,0,.35) 1.4px,transparent 1.6px);background-size:7px 7px}
.kumas-kazayagi{background-image:linear-gradient(45deg,rgba(0,0,0,.14) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.14) 75%),linear-gradient(45deg,rgba(0,0,0,.14) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.14) 75%);background-size:8px 8px;background-position:0 0,4px 4px}
.kumas-likra{background-image:linear-gradient(120deg,rgba(255,255,255,.55),transparent 45%,rgba(255,255,255,.35) 70%,transparent)}
.logo-alani{border:1.5px dashed var(--cizgi);border-radius:12px;padding:10px 12px;margin-top:10px}
.logo-alani label.satir{font-weight:500;font-size:.85rem}
.logo-alani input[type=file]{width:auto;flex:1}
.set-secim label.satir input[type=color]{width:46px;height:32px}
.indirim-not{color:var(--basari);font-weight:700;font-size:.88rem;margin:0 0 10px}
.fiyat-kutu li.indirim,.dokum li.indirim{color:var(--basari);font-weight:700}
@media (max-width:480px){.kumaslar{grid-template-columns:1fr}}