/* ============================================
   MYK ELEKTRONİK VE AYDINLATMA — Site Stilleri
   ============================================ */

:root{
  --cream:#FBF7EF;
  --cream-deep:#F1EAD9;
  --ink:#2B2318;
  --ink-dim:#6B5F4D;
  --charcoal:#1E1B17;
  --charcoal-2:#262119;
  --brass:#9C7A2E;
  --brass-bright:#C9A961;
  --brass-hover:#7E611F;
  --border:#E1D5B8;
  --white:#FFFFFF;
  --danger:#B3453F;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Consolas, monospace;

  --maxw: 1180px;
  --radius: 10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
button{font-family:inherit;cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--charcoal); color:var(--cream); font-size:12.5px;
  letter-spacing:.02em;
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; gap:12px; flex-wrap:wrap;}
.topbar a{color:var(--brass-bright); font-weight:600;}
.topbar .tb-left{color:#C9BFA9;}

/* ---------- Header / Nav ---------- */
header.site{
  background:var(--cream); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:42px; width:auto;}
.brand-text{font-family:var(--serif); font-size:19px; font-weight:700; line-height:1.15; color:var(--ink);}
.brand-text small{display:block; font-size:10.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-top:2px;}

nav.main-nav{display:flex; align-items:center; gap:26px;}
nav.main-nav a{font-size:14.5px; font-weight:600; color:var(--ink); padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .15s ease, color .15s ease;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--brass); border-color:var(--brass);}

/* ---------- Ürünler açılır ağaç menüsü ---------- */
.nav-item-dropdown{position:relative;}
.nav-item-dropdown > .nav-drop-trigger{
  display:flex; align-items:center; gap:5px; background:none; border:none;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.nav-item-dropdown > .nav-drop-trigger:hover,
.nav-item-dropdown.open > .nav-drop-trigger{color:var(--brass); border-color:var(--brass);}
.nav-drop-trigger .caret{font-size:10px; transition:transform .15s ease;}
.nav-item-dropdown.open > .nav-drop-trigger .caret{transform:rotate(180deg);}

.dropdown-tree{
  list-style:none; margin:0; padding:8px 0; display:none;
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 28px rgba(43,35,24,.14); z-index:50;
}
.nav-item-dropdown.open .dropdown-tree{display:block;}
.dropdown-tree li{position:relative;}
.dropdown-tree a, .dropdown-tree .tree-parent{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 16px; font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.dropdown-tree a:hover{background:var(--cream-deep); color:var(--brass);}
.dropdown-tree .tree-parent{cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:inherit;}
.dropdown-tree .tree-parent:hover{background:var(--cream-deep); color:var(--brass);}
.dropdown-tree .tree-parent .caret{font-size:9px; transition:transform .15s ease;}
.dropdown-tree li.open > .tree-parent .caret{transform:rotate(180deg);}
.dropdown-tree .sub-tree{list-style:none; margin:0; padding:0; display:none; background:var(--cream);}
.dropdown-tree li.open > .sub-tree{display:block;}
.dropdown-tree .sub-tree a{padding-left:30px; font-weight:500; font-size:13.5px;}
.dropdown-tree .divider{height:1px; background:var(--border); margin:6px 10px;}

@media (max-width: 880px){
  .nav-item-dropdown > .nav-drop-trigger{width:100%; justify-content:space-between; padding:14px 4px; border-bottom:1px solid var(--border); border-radius:0;}
  .dropdown-tree{position:static; box-shadow:none; border:none; border-radius:0; width:100%; padding:0 0 0 12px;}
  .dropdown-tree a, .dropdown-tree .tree-parent{padding:12px 4px;}
}

.header-actions{display:flex; align-items:center; gap:14px;}
.cart-btn{
  position:relative; display:flex; align-items:center; gap:8px;
  background:var(--charcoal); color:var(--cream); border:none; border-radius:999px;
  padding:9px 16px 9px 14px; font-size:13.5px; font-weight:700;
}
.cart-btn:hover{background:var(--brass-hover);}
.cart-count{
  background:var(--brass-bright); color:var(--charcoal); font-size:11px; font-weight:800;
  border-radius:999px; min-width:19px; height:19px; display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:18px;}

@media (max-width: 880px){
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--cream); flex-direction:column;
    align-items:flex-start; padding:24px; gap:4px; transform:translateX(100%);
    transition:transform .25s ease; overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav a{width:100%; padding:14px 4px; border-bottom:1px solid var(--border); border-radius:0;}
  .nav-toggle{display:block;}
}

@media (max-width: 560px){
  header.site .wrap{padding:10px 14px; gap:8px;}
  .brand img{height:32px;}
  .brand-text{font-size:14px;}
  .brand-text small{display:none;}
  .header-actions{gap:6px;}
  .lang-toggle button{padding:6px 8px; font-size:10.5px;}
  .cart-btn{padding:8px 10px 8px 8px; font-size:0;}
  .cart-btn .cart-count{font-size:11px;}
  .cart-btn::before{content:"🛒"; font-size:15px;}
  .nav-toggle{padding:7px 9px; font-size:16px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:8px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--brass); color:var(--white);}
.btn-primary:hover{background:var(--brass-hover);}
.btn-dark{background:var(--charcoal); color:var(--cream);}
.btn-dark:hover{background:#000;}
.btn-outline{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{border-color:var(--brass); color:var(--brass);}
.btn-whatsapp{background:#25D366; color:#0b3b1e;}
.btn-whatsapp:hover{background:#1fbd5a;}
.btn-block{width:100%;}
.btn:active{transform:scale(.98);}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- Hero (signature) ---------- */
.hero{position:relative; overflow:hidden; background:var(--charcoal); color:var(--cream);}
.hero .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding:76px 24px 88px;
}
.hero-eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-bright); font-weight:700; margin-bottom:18px;}
.hero h1{font-family:var(--serif); font-size:52px; line-height:1.08; margin:0 0 22px; letter-spacing:-.01em;}
.hero p.lead{font-size:16.5px; color:#D8CDB6; max-width:46ch; margin:0 0 32px; line-height:1.65;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.hero-visual{position:relative; display:flex; align-items:center; justify-content:center; min-height:380px;}
.hero-glow{
  position:absolute; width:440px; height:440px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.42) 0%, rgba(201,169,97,.14) 45%, rgba(201,169,97,0) 72%);
  animation:pulse-glow 5s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{opacity:.75; transform:scale(1);}
  50%{opacity:1; transform:scale(1.06);}
}
.hero-carousel{position:relative; width:100%; height:400px; display:flex; align-items:center; justify-content:center;}
.hero-carousel img{
  position:absolute; max-height:400px; width:auto; margin:0 auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
  opacity:0; transition:opacity .9s ease; pointer-events:none;
}
.hero-carousel img.active{opacity:1;}
.hero-dots{display:flex; gap:8px; justify-content:center; margin-top:18px; position:relative;}
.hero-dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:rgba(251,247,239,.3); padding:0;
}
.hero-dots button.active{background:var(--brass-bright); width:22px; border-radius:5px; transition:width .2s ease;}

@media (max-width:900px){
  .hero-carousel{height:260px;}
  .hero-carousel img{max-height:240px;}
}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; padding:44px 20px 40px; text-align:left;}
  .hero h1{font-size:36px;}
  .hero-visual{order:-1; min-height:260px;}
  .hero-glow{width:280px;height:280px;}
  .hero-visual img{max-height:240px;}
}

/* ---------- Section basics ---------- */
section{padding:72px 0;}
.section-head{margin-bottom:38px;}
.eyebrow{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:10px;}
h2.section-title{font-family:var(--serif); font-size:32px; margin:0; letter-spacing:-.01em;}
.section-sub{color:var(--ink-dim); font-size:15px; margin-top:10px; max-width:60ch;}
.section-alt{background:var(--cream-deep);}

/* ---------- Category grid ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.cat-card{
  position:relative; background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:4/5; display:flex; align-items:flex-end;
}
.cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.cat-card:hover img{transform:scale(1.06);}
.cat-card::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,27,23,0) 40%, rgba(30,27,23,.82) 100%);}
.cat-card-label{position:relative; z-index:1; padding:18px; color:#fff;}
.cat-card-label .cnt{font-size:12px; color:#E8DCC0; letter-spacing:.04em;}
.cat-card-label .name{font-family:var(--serif); font-size:19px; font-weight:700; margin-top:2px;}

@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Product grid & cards ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease;
}
.product-card:hover{box-shadow:0 14px 28px rgba(43,35,24,.1); transform:translateY(-2px);}
.pc-photo{
  aspect-ratio:1/1.15; background:var(--cream-deep); display:flex; align-items:center; justify-content:center;
  padding:18px; position:relative;
}
.pc-photo img{max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply;}
.pc-photo img.no-photo, .cart-line img.no-photo{
  opacity:.28; filter:grayscale(1); mix-blend-mode:normal; padding:22%; box-sizing:border-box;
}
.pc-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.pc-cat{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); font-weight:700;}
.pc-name{font-family:var(--serif); font-size:16px; line-height:1.3; margin:0;}
.pc-meta{font-size:12px; color:var(--ink-dim);}
.pc-code{font-family:var(--mono); font-size:10.5px; color:var(--ink-dim);}
.pc-bottom{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px;}
.pc-price{font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink);}
.pc-add{
  background:var(--charcoal); color:var(--cream); border:none; border-radius:7px;
  padding:9px 13px; font-size:12.5px; font-weight:700; white-space:nowrap;
}
.pc-add:hover{background:var(--brass-hover);}
.pc-add.added{background:#3E7A4C;}

@media (max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.product-grid{grid-template-columns:repeat(2,1fr);} .cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.product-grid{grid-template-columns:1fr 1fr; gap:12px;}}

/* ---------- Filters (urunler.html) ---------- */
.filters-bar{
  position:sticky; top:71px; z-index:30; background:var(--cream); border-bottom:1px solid var(--border);
  padding:16px 0; margin-bottom:32px;
}
.filters-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.filters-row input[type=search]{
  flex:1; min-width:180px; border:1px solid var(--border); border-radius:8px; padding:10px 14px;
  font-size:14px; background:var(--white);
}
.chip-group{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  border:1px solid var(--border); background:var(--white); border-radius:999px; padding:7px 14px;
  font-size:12.5px; font-weight:600; color:var(--ink-dim);
}
.chip.active{background:var(--charcoal); color:var(--cream); border-color:var(--charcoal);}
.color-swatch{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0;
  position:relative;
}
.color-swatch.active::after{content:""; position:absolute; inset:-5px; border:2px solid var(--brass); border-radius:50%;}
.results-count{font-size:13px; color:var(--ink-dim); margin-bottom:18px;}
.empty-state{text-align:center; padding:70px 20px; color:var(--ink-dim);}
.empty-state h3{font-family:var(--serif); color:var(--ink); font-size:22px; margin-bottom:8px;}

/* ---------- Cart drawer ---------- */
.cart-drawer-backdrop{
  position:fixed; inset:0; background:rgba(30,27,23,.5); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cart-drawer-backdrop.open{opacity:1; pointer-events:auto;}
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--cream);
  z-index:91; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column;
  box-shadow:-10px 0 30px rgba(0,0,0,.2);
}
.cart-drawer.open{transform:translateX(0);}
.cart-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border);}
.cart-drawer-head h3{font-family:var(--serif); margin:0; font-size:20px;}
.cart-drawer-close{background:none; border:none; font-size:22px; line-height:1; color:var(--ink-dim);}
.cart-drawer-items{flex:1; overflow-y:auto; padding:14px 22px;}
.cart-line{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border);}
.cart-line img{width:60px; height:60px; object-fit:contain; background:var(--cream-deep); border-radius:6px; padding:6px; mix-blend-mode:multiply;}
.cart-line-info{flex:1; min-width:0;}
.cart-line-name{font-size:13.5px; font-weight:600; line-height:1.3;}
.cart-line-meta{font-size:11.5px; color:var(--ink-dim); margin-top:2px;}
.qty-stepper{display:flex; align-items:center; gap:8px; margin-top:8px;}
.qty-stepper button{width:24px; height:24px; border:1px solid var(--border); background:var(--white); border-radius:5px; font-weight:700;}
.qty-stepper span{font-size:13px; min-width:16px; text-align:center;}
.cart-line-price{font-family:var(--serif); font-weight:700; font-size:14px; white-space:nowrap;}
.cart-line-remove{font-size:11.5px; color:var(--danger); margin-top:8px; text-decoration:underline; background:none; border:none; padding:0;}
.cart-drawer-foot{padding:18px 22px 22px; border-top:1px solid var(--border);}
.cart-subtotal{display:flex; justify-content:space-between; font-size:15px; margin-bottom:14px;}
.cart-subtotal b{font-family:var(--serif); font-size:19px;}

/* ---------- Contact / footer band ---------- */
.contact-band{background:var(--charcoal); color:var(--cream);}
.contact-band .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; padding:72px 24px;}
.contact-band h2{font-family:var(--serif); font-size:30px; margin:0 0 14px;}
.contact-band p{color:#C9BFA9; line-height:1.7; max-width:44ch;}
.contact-list{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px;}
.contact-list li{display:flex; gap:12px; font-size:14.5px;}
.contact-list b{color:var(--brass-bright); font-family:var(--serif); font-size:12px; letter-spacing:.06em; text-transform:uppercase; min-width:96px;}
@media (max-width:900px){.contact-band .wrap{grid-template-columns:1fr;}}

footer.site{background:var(--charcoal-2); color:#9C9384; padding:26px 0; font-size:12.5px;}
footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Forms (cart/checkout, contact) ---------- */
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-dim); margin-bottom:6px;}
.form-field input, .form-field textarea{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:11px 13px; font-size:14px;
  background:var(--white); font-family:inherit;
}
.form-field textarea{min-height:90px; resize:vertical;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:600px){.form-row-2{grid-template-columns:1fr;}}

/* ---------- Cart page layout ---------- */
.cart-page-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:44px; align-items:flex-start;}
@media (max-width:900px){.cart-page-grid{grid-template-columns:1fr;}}
.summary-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:sticky; top:100px;}
.summary-card h3{font-family:var(--serif); margin:0 0 16px; font-size:19px;}

/* ---------- Misc ---------- */
.badge-soft{display:inline-block; background:var(--cream-deep); color:var(--ink-dim); border-radius:999px; padding:4px 10px; font-size:11px; font-weight:600;}
.divider{height:1px; background:var(--border); border:none; margin:0;}
.map-embed{width:100%; height:280px; border:0; border-radius:var(--radius); filter:grayscale(.15);}

/* ---------- Kurumsal: Sertifikalar ---------- */
.cert-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:18px;
  margin:30px 0;
}
.cert-card{
  display:block; background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .15s ease, transform .15s ease;
}
.cert-card:hover{box-shadow:0 10px 24px rgba(43,35,24,.12); transform:translateY(-2px);}
.cert-card img{width:100%; height:180px; object-fit:cover;}
.cert-title{padding:12px 14px; font-size:13.5px; font-weight:700; color:var(--ink);}

/* ---------- Kurumsal: Katalog ---------- */
.catalog-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 30px; text-align:center; margin:30px 0;
}
.catalog-icon{font-size:44px; margin-bottom:10px;}
.catalog-card h3{font-family:var(--serif); font-size:21px; margin:6px 0 10px;}
.catalog-card p{color:var(--ink-dim); font-size:14.5px; line-height:1.7; max-width:520px; margin:0 auto;}

/* ---------- Kurumsal: Biz Kimiz ---------- */
.about-content p{margin:0 0 18px;}

/* ---------- Dil değiştirme düğmesi ---------- */
.lang-toggle{display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden;}
.lang-toggle button{
  background:none; border:none; padding:7px 13px; font-size:12px; font-weight:800;
  color:var(--ink-dim); letter-spacing:.03em;
}
.lang-toggle button.active{background:var(--charcoal); color:var(--cream);}
.lang-toggle button:not(.active):hover{color:var(--brass);}