/* Kapı otomatiği tanıtım sitesi: tek stil dosyası.
   Açık ve koyu tema cihazın ayarına göre seçilir (prefers-color-scheme). Yazı tipi cihazın kendi yazı tipidir; dış kaynak yok.
   Hareket yalnız en alttaki "prefers-reduced-motion: no-preference" bloğundadır. "Hareketi azalt" açıksa hiçbir şey hareket
   etmez ve her şey bitmiş hâliyle görünür (test bunu denetler: bloğun dışında animation ve transition yazılmaz). */

:root {
  color-scheme: light dark;
  --zemin: #f5f7f6;
  --yuzey: #ffffff;
  --yuzey-2: #e9efec;
  --metin: #15201c;
  --soluk: #4a5953;
  --cizgi: #d2dbd7;
  --vurgu: #0b6b3a;
  --vurgu-koyu: #08552e;
  --vurgu-metin: #ffffff;
  --uyari: #a34a06;
  --tel: #84928c;
  --golge: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px rgb(0 0 0 / .06);
  --yazi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --kenar: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0e1412;
    --yuzey: #151d1a;
    --yuzey-2: #121916;
    --metin: #e6ece9;
    --soluk: #a5b3ad;
    --cizgi: #2a3632;
    --vurgu: #4cc68a;
    --vurgu-koyu: #7ad9a9;
    --vurgu-metin: #03200f;
    --uyari: #f2a33a;
    --tel: #6c7b75;
    --golge: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font: 400 1.0625rem/1.6 var(--yazi);
  overflow-wrap: break-word;
}
a { color: var(--vurgu-koyu); text-underline-offset: .18em; }
a:hover { color: var(--vurgu); }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.3rem + 3.6vw, 3.3rem); font-weight: 750; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1em; }
.ok { vertical-align: -.2em; }

.atla { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--vurgu); color: var(--vurgu-metin); padding: 10px 14px; border-radius: 8px; }
.atla:focus { top: 12px; }

/* ---------- Yerleşim ---------- */
.ic { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* Dar bölüm: kap aynı genişlikte kalır (sol kenarlar hizalı), içindekiler en çok 780 px olur. */
.ic.dar > * { max-width: 780px; }
.bolum { padding: clamp(44px, 6vw, 84px) 0; border-top: 1px solid var(--cizgi); }
.bolum:first-child { border-top: 0; }
.bolum:nth-child(even) { background: var(--yuzey-2); }
.buyuk { font-size: 1.15rem; color: var(--soluk); }
.not { color: var(--soluk); font-size: .98rem; margin-top: 1em; }

/* ---------- Üst bilgi ---------- */
.ust { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); position: relative; z-index: 10; }
.ust-ic { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.marka { display: inline-flex; align-items: center; gap: 10px; color: var(--metin); text-decoration: none; font-weight: 750; font-size: 1.2rem; min-width: 0; margin-right: auto; }
.marka-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Logo: açık temada yazılı logo; koyu temada (siyah harfler okunmaz) yeşil halka ve sitenin yazısı. */
.marka-logo { display: block; height: 32px; width: auto; }
.marka-koyu { display: none; align-items: center; gap: 10px; min-width: 0; }
.marka-im { flex: none; display: block; }
@media (prefers-color-scheme: dark) {
  .marka-logo { display: none; }
  .marka-koyu { display: inline-flex; }
}
.gezinti { display: flex; gap: 4px; }
.gezinti-bag { color: var(--metin); text-decoration: none; padding: 8px 10px; border-radius: 8px; white-space: nowrap; font-size: .98rem; }
.gezinti-bag:hover { background: var(--yuzey-2); color: var(--metin); }
.gezinti-bag[aria-current="page"] { color: var(--vurgu-koyu); font-weight: 650; }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: 10px; font-weight: 600; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-cizgiler { display: inline-grid; gap: 3px; }
.menu-cizgiler span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); box-shadow: var(--golge); padding: 8px 20px 16px; display: grid; }
.menu-bag { color: var(--metin); text-decoration: none; padding: 12px 4px; border-bottom: 1px solid var(--cizgi); font-size: 1.05rem; }
.menu-bag:last-child { border-bottom: 0; }
.menu-bag[aria-current="page"] { color: var(--vurgu-koyu); font-weight: 650; }
@media (max-width: 1039px) {
  .gezinti { display: none; }
  .menu { display: block; }
}
@media (max-width: 419px) {
  .ust-cta { display: none; }
}

/* ---------- Düğmeler ---------- */
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.dugme { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 12px; background: var(--vurgu); color: var(--vurgu-metin); text-decoration: none; font-weight: 650; border: 2px solid var(--vurgu); }
.dugme:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); color: var(--vurgu-metin); }
.dugme-cizgi { background: transparent; color: var(--metin); border-color: var(--cizgi); }
.dugme-cizgi:hover { background: var(--yuzey); color: var(--metin); border-color: var(--vurgu); }
.dugme-kucuk { min-height: 40px; padding: 8px 14px; font-size: .95rem; white-space: nowrap; }

/* ---------- Giriş ---------- */
.bolum-giris, .bolum-iletisim { padding-top: clamp(28px, 5vw, 64px); }
.giris-ic { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .giris-cizimli { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; }
}
.ust-yazi { display: inline-block; font-size: .85rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--vurgu-koyu); margin-bottom: .8em; }
.giris-alt { font-size: 1.2rem; color: var(--soluk); max-width: 38em; }
.durum { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--yuzey); font-size: .95rem; font-weight: 600; }
.durum-isik { width: 10px; height: 10px; border-radius: 50%; background: var(--uyari); flex: none; }
.iz { display: flex; flex-wrap: wrap; gap: 8px; font-size: .92rem; color: var(--soluk); margin-bottom: 1.4em; }
.iz a { color: var(--soluk); }

/* ---------- Listeler, kutular, tablo ---------- */
.madde-listesi { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 12px; }
.madde-listesi li { position: relative; padding-left: 30px; }
.madde-listesi li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 9px; height: 9px; border-radius: 3px; background: var(--vurgu); }
.madde-listesi.numarali { counter-reset: sira; }
.madde-listesi.numarali li { counter-increment: sira; padding-left: 44px; min-height: 30px; }
.madde-listesi.numarali li::before { content: counter(sira); width: 30px; height: 30px; top: -.05em; left: 0; border-radius: 50%; display: grid; place-items: center; color: var(--vurgu-metin); font-weight: 700; font-size: .92rem; }
.madde-listesi.kucuk { gap: 8px; }
.kutular { display: grid; gap: 18px; margin-top: 1.4em; }
@media (min-width: 720px) {
  .kutular-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kutular-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kenar); padding: 22px; box-shadow: var(--golge); }
.kutu-soluk { background: var(--zemin); box-shadow: none; }
.kart { position: relative; display: flex; flex-direction: column; }
.kart h3 a { color: var(--metin); text-decoration: none; }
.kart h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--kenar); }
.kart:hover { border-color: var(--vurgu); }
.kart p { color: var(--soluk); }
.kart-ok { margin: auto 0 0; color: var(--vurgu-koyu); }
/* Paket kartları: telefonda alt alta, 720 px ve üstünde yan yana (.kutular-3). Düğme kartın dibinde, tam genişlikte. */
.paket { display: flex; flex-direction: column; }
.paket h3 { margin-bottom: .4em; }
.paket-fiyat { margin: 0; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.2rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.paket-kdv { margin: 0 0 .9em; font-size: .9rem; color: var(--soluk); }
.paket-satir { color: var(--soluk); }
/* Ön sipariş (kaynak/veri.mjs → ON_SIPARIS): rozet kartın üstünde; "Ön siparişten sonra" satırı sonraki fiyatı düz yazıyla
   söyler (fiyat düz yazıyla durur). Ana sayfa girişindeki duyuru marka yeşili bir kenarla ayrılır. */
.paket-rozet { align-self: flex-start; margin: 0 0 .8em; padding: 4px 11px; border-radius: 999px; background: var(--vurgu); color: var(--vurgu-metin); font-size: .82rem; font-weight: 700; line-height: 1.4; }
.paket-sonra { margin: -.5em 0 .9em; font-size: .95rem; color: var(--soluk); }
.on-siparis-duyuru { max-width: 38em; margin: 1.2em 0 0; padding: 12px 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--vurgu); border-radius: 0 12px 12px 0; }
.on-siparis-duyuru strong { color: var(--vurgu-koyu); }
.paket-dugme { margin: auto 0 0; padding-top: .4em; }
.paket-dugme .dugme { width: 100%; justify-content: center; }
.tablo { width: 100%; border-collapse: collapse; margin-top: 1em; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--kenar); overflow: hidden; }
.tablo th, .tablo td { text-align: left; vertical-align: top; padding: 13px 16px; border-bottom: 1px solid var(--cizgi); }
.tablo tr:last-child th, .tablo tr:last-child td { border-bottom: 0; }
.tablo th { width: 38%; font-weight: 600; color: var(--soluk); }
.bolum-bag { margin-top: 1.4em; }

/* ---------- Sorular ---------- */
.sss-liste { display: grid; gap: 10px; margin-top: 1.2em; }
.sss { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; }
.sss summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary h3 { margin: 0; font-size: 1.05rem; }
.sss p { padding: 0 18px 16px; margin: 0; color: var(--soluk); }
.arti { position: relative; flex: none; width: 18px; height: 18px; }
.arti::before, .arti::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--vurgu); border-radius: 2px; }
.arti::after { transform: rotate(90deg); }
.sss[open] .arti::after { transform: rotate(0deg); }

/* ---------- Bağlantı şeması ---------- */
.sema { margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 16px 16px 12px; box-shadow: var(--golge); max-width: 460px; justify-self: center; width: 100%; }
.sema figcaption { font-size: .88rem; color: var(--soluk); margin-top: 6px; text-align: center; }
.sema-ic { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .sema-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}
.svg-sema { display: block; width: 100%; height: auto; font-family: var(--yazi); }
.s-kutu { fill: var(--zemin); stroke: var(--tel); stroke-width: 2; }
.s-kutu-yeni { fill: var(--yuzey); stroke: var(--vurgu); stroke-width: 2.5; }
.s-baslik { fill: var(--metin); font-size: 16px; font-weight: 650; }
.s-alt { fill: var(--soluk); font-size: 12.5px; }
.s-not { fill: var(--vurgu-koyu); font-size: 12.5px; font-weight: 600; }
.s-uyari { fill: var(--uyari); font-size: 12.5px; font-weight: 650; }
.s-tel { fill: none; stroke: var(--tel); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.s-tel-yeni { stroke: var(--vurgu); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: butt; }
.s-birlesme { fill: var(--vurgu); }
.s-yay { fill: none; stroke: var(--vurgu); stroke-width: 2.5; stroke-linecap: round; }
.s-telefon { fill: var(--yuzey); stroke: var(--metin); stroke-width: 2; }
.s-ekran { fill: var(--yuzey-2); }
.s-ac { fill: var(--vurgu); }

/* ---------- Çağrı ve iletişim ---------- */
.cagri-ic { text-align: left; }
.kanal-kutu { margin-top: 1.6em; }
.kanallar { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kanal { display: flex; gap: 12px; align-items: flex-start; }
.kanal svg { flex: none; margin-top: 3px; color: var(--vurgu-koyu); }
.kanal-ad { display: block; font-size: .85rem; color: var(--soluk); }
.kanallar-kucuk { gap: 10px; font-size: .95rem; }

/* ---------- Alt bilgi ---------- */
.alt { background: var(--yuzey); border-top: 1px solid var(--cizgi); padding-top: 40px; }
.alt-ic { display: grid; gap: 28px; }
@media (min-width: 800px) {
  .alt-ic { grid-template-columns: 1.3fr 1fr 1fr; }
}
.alt-ad { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.15rem; }
.alt-marka p { color: var(--soluk); }
.alt-marka .alt-ad { color: var(--metin); }
.alt-durum { font-size: .92rem; }
.alt-gezinti ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alt-gezinti a { color: var(--metin); text-decoration: none; }
.alt-gezinti a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
.firma { font-style: normal; color: var(--soluk); font-size: .98rem; line-height: 1.6; margin-top: 28px; }
.firma strong { color: var(--yazi, inherit); font-weight: 600; }
.alt-firma { max-width: 1120px; margin: 24px auto 0; padding: 0 20px; font-size: .9rem; color: var(--soluk); }
.yerli { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 600; }
.yerli-logo { background: #fff; border-radius: 6px; padding: 4px; height: auto; max-width: 140px; }
.alt-son { max-width: 1120px; margin: 32px auto 0; padding: 18px 20px 28px; border-top: 1px solid var(--cizgi); font-size: .9rem; color: var(--soluk); }

/* ---------- Hareket: yalnız "hareketi azalt" kapalıyken ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Yalnız şema hareket eder: kutunun eklediği teller akar, WiFi yayları yanıp söner. Metne giriş hareketi konmaz:
     hareket başlamadan çekilen ekran görüntüsünde ya da sayfayı işleyen araçta metin bir an bile gizli kalmasın. */
  @keyframes akis { to { stroke-dashoffset: -26; } }
  @keyframes yay { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
  .s-tel-yeni:not(.s-tel-durgun) { animation: akis 1.6s linear infinite; }
  .s-yay { animation: yay 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
  .dugme, .gezinti-bag, .kart { transition: background-color .15s, border-color .15s, color .15s; }
  .arti::after { transition: transform .2s; }
}