:root{--bg:#030b14;--panel:#0a1b2a;--muted:#9cc7e6;--text:#e6f3ff;--line:rgba(0,229,255,.18);--neon:#00e5ff;--accent:#62ff8e;--warning:#ffd166;--max:1100px;--radius:20px;--shadow:0 20px 120px rgba(0,229,255,.10)}
*{box-sizing:border-box} html,body{height:100%}
html{scroll-behavior:smooth;scroll-padding-top:var(--headerH,72px)}
body{margin:0;color:var(--text);font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;background:radial-gradient(1200px 600px at 80% -10%,rgba(0,229,255,0.12),transparent 60%),radial-gradient(900px 700px at -10% 110%,rgba(98,255,142,0.10),transparent 55%),linear-gradient(180deg,#020810,#020b14)}
/* Devre deseni */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cdefs%3E%3Cpattern id='g' width='120' height='120' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 10 h100 M10 60 h100 M10 110 h100 M10 10 v100 M60 10 v100 M110 10 v100' stroke='%2308a6c2' stroke-width='1' stroke-opacity='.45'/%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%2300e5ff'/%3E%3Ccircle cx='60' cy='60' r='2.5' fill='%2362ff8e'/%3E%3Ccircle cx='110' cy='110' r='2.5' fill='%23ffffff'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");filter:blur(.35px)}

.container{width:min(var(--max),92vw);margin-inline:auto}

/* ================== MODERN BUTTON SET ================== */
.btn{
  --btn1: var(--neon);
  --btn2: color-mix(in srgb, var(--neon), #fff 35%);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  height:44px;padding:0 18px;border-radius:9999px;
  font-weight:800;letter-spacing:.2px;text-decoration:none;user-select:none;
  color:#001422; /* koyu metin, dark temada okunur */
  background:linear-gradient(180deg,var(--btn1),var(--btn2));
  border:1px solid color-mix(in srgb, var(--btn1), #000 18%);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--btn1), transparent 70%),
    0 0 0 1px color-mix(in srgb, var(--btn1), #000 25%) inset;
  background-size:100% 200%;
  background-position:50% 0%;
  transition:transform .15s ease, box-shadow .25s ease, background-position .35s ease, filter .25s ease;
}
.btn:hover{transform:translateY(-2px);background-position:50% 100%;filter:saturate(110%)}
.btn:active{transform:translateY(0);filter:saturate(115%)}
.btn:focus-visible{outline:3px solid color-mix(in srgb, var(--btn1), #fff 40%);outline-offset:2px}

.btn.alt{
  --btn1: var(--accent);
  --btn2: color-mix(in srgb, var(--accent), #fff 40%);
  color:#012b1d;
  border-color: color-mix(in srgb, var(--btn1), #000 15%);
}
.btn.ghost{
  background:transparent;color:var(--text);
  border:1px solid var(--line);box-shadow:none;
}
.btn.ghost:hover{background:color-mix(in srgb, var(--panel), #000 6%);transform:none}

/* Header’daki WhatsApp düğmesi: linkte wa.me/whatsapp geçenler */
header .nav a.btn[href*="wa.me"],
header .nav a.btn[href*="whatsapp"]{
  --btn1:#25D366; --btn2:#1ebe5a;
  color:#fff;border-color:rgba(37,211,102,.55);
  box-shadow:0 10px 26px rgba(37,211,102,.35),0 0 0 1px rgba(37,211,102,.45) inset;
  position:relative;padding-left:42px;
}
header .nav a.btn[href*="wa.me"]::before,
header .nav a.btn[href*="whatsapp"]::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;background:no-repeat center/contain
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'><path d='M16 3C9.4 3 4 8.4 4 15c0 2.3.7 4.5 2 6.4L4.3 29l7-1.8c1.8 1 3.8 1.5 5.7 1.5 6.6 0 12-5.4 12-12S22.6 3 16 3zm6.9 17.3c-.3.8-1.6 1.5-2.2 1.6-.6.1-1.4.2-2.3-.1-.5-.1-1.1-.4-1.9-.8-3.3-1.8-5.5-4.9-5.7-5.1-.2-.3-1.4-1.9-1.4-3.6 0-1.7.9-2.5 1.2-2.8.3-.3.8-.4 1.1-.4h.8c.2 0 .6 0 .9.7.3.7 1.2 2.5 1.3 2.7.1.2.1.5 0 .7-.1.2-.2.4-.4.6-.2.2-.4.5-.6.7-.2.2-.4.4-.2.8.2.4.9 1.6 2 2.6 1.4 1.2 2.5 1.6 2.9 1.8.4.2.6.2.9-.1.3-.3 1-1.1 1.2-1.5.3-.4.5-.3.9-.2.3.1 2.3 1.1 2.7 1.3.4.2.7.3.8.5.1.2.1.8-.2 1.6z'/></svg>");
}
@media (max-width:920px){
  header .nav a.btn[href*="wa.me"],
  header .nav a.btn[href*="whatsapp"]{height:42px;padding-left:40px}
  header .nav a.btn[href*="wa.me"]::before,
  header .nav a.btn[href*="whatsapp"]::before{left:12px;width:17px;height:17px}
}

/* ======================================================== */

header{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(8px) saturate(120%);background:rgba(2,12,20,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;transition:padding .2s ease, background .2s ease, box-shadow .2s ease}
header.scrolled .nav{padding:8px 0;background:rgba(2,12,20,.86);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* === Logo yerleşimi (brand) === */
.brand{ display:flex; align-items:center; gap:10px; }
.brand .dot{ display:none; }               /* önceki neon nokta gizlensin */
.brand-logo{ height:40px; width:auto; display:block; }

/* === Markalar: 130x130 sabit kart + çalışan oklar === */
.brand-carousel{ position:relative; margin-top:6px; }

.brands-slider{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:12px 56px;           /* oklar için boşluk */
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.brands-slider::-webkit-scrollbar{ display:none; }

.brand-card{
  flex:0 0 130px;              /* eşit genişlik */
  width:130px; height:130px;   /* eşit yükseklik */
  display:grid; place-items:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(2,74,111,.06);
  scroll-snap-align:center;
  transition:transform .15s ease, box-shadow .25s ease;
}
.brand-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,229,255,.12); }
.brand-card img{
  width:100%; height:100%;
  object-fit:contain;          /* logoyu kırpmadan sığdır */
  padding:14px;                /* nefes payı */
}

/* oklar */
.brand-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f5f7f9);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  color:#0b1b2b; display:grid; place-items:center; cursor:pointer; z-index:2;
}
.brand-prev{ left:6px; }
.brand-next{ right:6px; }
.brand-arrow:hover{ transform:translateY(-50%) scale(1.05); }

/* açık tema uyumu */
body.theme-corporate .brand-card{ background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px rgba(2,74,111,.06) }
body.theme-corporate .brand-arrow{ background:linear-gradient(180deg,#fff,#f6f9fb) }

/* mobil: swipe, oklar gizli */
@media (max-width:920px){
  .brands-slider{ padding:10px 8px; gap:12px; }
  .brand-card{ width:110px; height:110px; flex-basis:110px; }
  .brand-arrow{ display:none; }
}


@media (max-width:920px){
  .brand-logo{ height:32px; }
}

/* Koyu temada da kontrastı koru (gerekirse hafif parlaklık) */
body:not(.theme-corporate) .brand-logo{
  filter: brightness(1.02) contrast(1.02);
}
nav{display:flex;align-items:center}
nav a{color:var(--text);text-decoration:none;opacity:.9;margin:0 8px}
nav a:hover{opacity:1}

/* Mobil menü */
.menu-toggle{display:none;appearance:none;border:1px solid var(--line);background:rgba(10,27,42,.6);color:var(--text);padding:10px 12px;border-radius:12px}
.menu-toggle .bars{display:block;width:22px;height:2px;background:var(--text);position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text)}
.menu-toggle .bars::before{top:-6px}.menu-toggle .bars::after{top:6px}    

.hero{padding:72px 0 48px}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.hero h1{margin:6px 0 10px;font-size:clamp(28px,5vw,54px);line-height:1.1;font-weight:900;background:radial-gradient(120% 120% at 30% 0%,var(--neon),#a8f9ff,var(--accent) 70%,#c9ffe9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 6px 22px rgba(0,229,255,.35)}
.hero p{color:var(--muted)}
.hero .panel{background:linear-gradient(180deg,rgba(10,27,42,.85),rgba(10,27,42,.6));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.hero .bullets{display:grid;gap:10px;margin-top:16px;padding:10px;}
.bullet{display:flex;gap:10px;align-items:flex-start}
.bullet i{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);margin-top:4px}
.sertifika img {width: 595px;    border-radius: 10px; overflow: hidden;border: 1px solid #ddd;}

section{padding:36px 0;position:relative}
section .head{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
h2{margin:0;font-size:clamp(22px,3.2vw,36px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:linear-gradient(180deg,rgba(10,27,42,.85),rgba(10,27,42,.6));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:6px 0 6px}
.muted{color:var(--muted)}

.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}
.about .map{border:0;width:100%;height:280px;border-radius:12px;filter:grayscale(.2) contrast(1.05)}

.services .card ul{margin:8px 0 0 18px}

.blog .cards{grid-template-columns:repeat(3,1fr)}
.blog .meta{font-size:12px;color:#bcd9ef}

.contact .grid{display:grid;grid-template-columns:1fr .9fr;gap:18px}
.contact form{display:grid;gap:10px}
.contact input,.contact textarea,.contact select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:#061523;color:#fff;}
.contact textarea{min-height:120px}

.products .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.product{background:linear-gradient(180deg,rgba(10,27,42,.9),rgba(10,27,42,.6));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.product img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0b1e2e}
.product .pdx{padding:10px}

.brands-slider{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 0}

footer{padding:26px 0;border-top:1px solid var(--line);color:#b7d2e8}

/* RSS liste görünümü */
#rssList{list-style:none; padding-left:0}
#rssList li{margin:0}
.rss-row{display:flex; align-items:center; gap:10px; text-decoration:none}
.rss-row img{width:44px; height:44px; object-fit:cover; border-radius:8px; background:#0b1e2e; border:1px solid var(--line)}
.rss-row span{color: #3b4f74;line-height: 20px;font-weight: 500;font-size: 14px; padding: 10px 0;}
    

@media(max-width:920px){.hero .grid,.about,.contact .grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.products .grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.products .grid{grid-template-columns:repeat(2,1fr)}section{padding:42px 0}}

/* KVKK modal */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.6);z-index:60}
.modal .box{width:min(800px,92vw);max-height:85vh;overflow:auto;background:linear-gradient(180deg,rgba(10,27,42,.95),rgba(10,27,42,.85));border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow)}
.modal .close{float:right;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:6px 10px}
.modal.show{display:grid}

/* === Kategori kartları: solda görsel, sağda metin + link === */
#kategori-ve-urunler .cat-card{
  display:grid;
  grid-template-columns: 112px 1fr;   /* sol görsel + sağ içerik */
  gap:16px;
  align-items:center;
}
#kategori-ve-urunler .cat-card .thumb{
  width:112px; height:112px;
  border-radius:16px;
  background:#0b1e2e;
  border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden;
}
#kategori-ve-urunler .cat-card .thumb img{
  width:100%; height:100%; object-fit:cover;
}
#kategori-ve-urunler .cat-body h3{ margin:0 0 4px; }
#kategori-ve-urunler .cat-body .cta{
  display:inline-block; margin-top:8px; font-weight:800;
  color:#ff8a00; text-decoration:none;
}
#kategori-ve-urunler .cat-body .cta:hover{ text-decoration:underline; }

/* dar ekranda tek sütun */
@media (max-width:560px){
  #kategori-ve-urunler .cat-card{
    grid-template-columns: 92px 1fr;
  }
  #kategori-ve-urunler .cat-card .thumb{ width:92px; height:92px; border-radius:14px; }
}


/* === Mobilde Bilgi Merkezi (Blog) taşıma düzeltmesi === */
@media (max-width: 920px){
  .blog .cards{
    display:grid;
    grid-template-columns: 1fr;      /* 1 sütun */
    gap: 12px;
    overflow: visible;               /* yatay scroll’u engelle */
  }
  .blog .card{
    min-width: 0;                    /* grid içi taşmayı kes */
    overflow-wrap: anywhere;         /* uzun kelimeleri kır */
  }
}

/* Ek güvence: çok dar ekranlar için */
@media (max-width: 560px){
  .blog .cards{ grid-template-columns: 1fr; }
  .sertifika img {width: 100%}

}

/* Yatay taşma ihtimalini tamamen kapatmak için (opsiyonel) */
section .container, .blog, .blog .cards{ overflow-x: hidden; }


/* ====== NAV – masaüstü ====== */
@media (min-width: 921px){
  #siteNav{display:flex; align-items:center; gap:8px;}
  #siteNav a{ color:var(--text); text-decoration:none; opacity:.9; margin:0 8px; }
  #siteNav a:hover{ opacity:1; }
  .menu-toggle{ display:none; }
}

/* ====== NAV – mobil tam ekran siyah panel ====== */
@media (max-width: 920px){
  header{ z-index:1100; }
  .menu-toggle{ display:inline-flex; }

  #siteNav{
    position: fixed; left:0; right:0; top: var(--headerH,64px); bottom:0;
    display:flex; flex-direction:column; gap:12px; padding:20px 24px;
    background:#000; transform: translateY(-100%); opacity:0; visibility:hidden;
    pointer-events:none; z-index:1090; transition: transform .25s ease, opacity .2s ease, visibility .2s;
    overscroll-behavior: contain;
  }
  body.mobile-open #siteNav{ transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto; }

  body.mobile-open{ overflow:hidden; }
  body.mobile-open::before{ content:""; position:fixed; inset:0; background:#000; opacity:.82; z-index:1080; pointer-events:none; }

  #siteNav a{ margin:0; padding:14px 4px; font-size:18px; border-bottom:1px solid var(--line); text-decoration:none; }
}

/* =============== Kurumsal Tema (aydınlık) =============== */
body.theme-corporate{
  --bg:#f6f9fb; --panel:#ffffff; --text:#0b1b2b; --muted:#5b6b7a; --line:rgba(2,74,111,.15);
  --neon:#0ea5e9; --accent:#2563eb; --warning:#f59e0b;
  color:var(--text); background:linear-gradient(180deg,#f6f9fb,#eef4f8);
}
body.theme-corporate::before{opacity:.08; mix-blend-mode:normal; filter:none;}
body.theme-corporate header{background:rgba(255,255,255,.92); border-bottom:1px solid var(--line)}
body.theme-corporate header.scrolled .nav{background:rgba(255,255,255,.98); box-shadow:0 6px 20px rgba(2,74,111,.10)}
body.theme-corporate .brand .dot{background:var(--neon); box-shadow:0 0 0 4px rgba(14,165,233,.2)}
@media (min-width:921px){
  body.theme-corporate #siteNav a{ color:#0b1b2b; opacity:.8; }
  body.theme-corporate #siteNav a:hover{ opacity:1; }
}
@media (max-width:920px){
  body.theme-corporate #siteNav{ background:#fff; border-top:1px solid var(--line) }
  body.theme-corporate body.mobile-open::before{ background:#000; opacity:.8 }
}
body.theme-corporate .hero h1{ color:#0b1b2b; background:none; text-shadow:none }
body.theme-corporate .hero .panel,
body.theme-corporate .card,
body.theme-corporate .product{ background:var(--panel); border:1px solid var(--line); box-shadow:0 10px 30px rgba(2,74,111,.06) }
body.theme-corporate .product img{ background:#f1f5f9 }
body.theme-corporate .muted{ color:var(--muted) }
body.theme-corporate .btn{
  color:#fff; --btn1: var(--accent); --btn2: color-mix(in srgb, var(--accent), #fff 35%);
  background: linear-gradient(180deg, var(--btn1), var(--btn2));
  box-shadow:0 8px 28px rgba(14,165,233,.20), 0 0 0 1px rgba(14,165,233,.28) inset;
}
body.theme-corporate .btn.alt{
  --btn1:#10b981; --btn2:#6ee7b7; color:#00322b;
}
body.theme-corporate .btn.ghost{ background:transparent; color:#0b1b2b; border:1px solid var(--line) }
body.theme-corporate footer{ background:#fff; color:#3b4a5a; border-top:1px solid var(--line) }

/* === HERO: video/görsel arka plan katmanı === */
.hero{ position:relative; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-media .bg-video,
.hero-media .bg-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: saturate(115%) contrast(105%) brightness(95%);
}
/* Okunabilirlik için yumuşak degrade örtü */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(14,165,233,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.55));
}
/* İçerik üstte kalsın */
.hero > .container{ position:relative; z-index:2; }
/* Kurumsal tema ile uyum için hafif ayar */
body.theme-corporate .hero::after{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(14,165,233,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70));
}
/* Mobilde video kapansın, görsel kalsın */
@media (max-width: 920px){
  .hero-media .bg-video{ display:none; }
  .hero::after{
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.72));
  }
}
/* Hareket azalt tercihi */
@media (prefers-reduced-motion: reduce){
  .hero-media .bg-video{ display:none; }
}