/* LED GARAJ Panel — yumusak 3B ikon dili (g1-g3 referansli) */
:root {
  --bg:#eef0f4; --yuzey:#ffffff; --metin:#14233d; --soluk:#5d6b82; --kenar:#e1e6ef;
  --mavi:#1f63b8; --mavi-a:#4aa0ee; --mavi-k:#123f86; --sari:#ffc533; --yesil:#6fb83a; --turuncu:#f08a24;
  --gol-1:0 1px 2px rgba(20,35,61,.06), 0 10px 28px rgba(31,63,120,.10);
  --kabartma:10px 10px 22px rgba(27,47,85,.13), -8px -8px 18px #fff;
  --yaricap:22px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  min-height:100vh; color:var(--metin); background:var(--bg);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; line-height:1.45;
  background-image:
    radial-gradient(900px 520px at 6% -8%, rgba(74,160,238,.28), transparent 60%),
    radial-gradient(760px 520px at 100% 104%, rgba(255,197,51,.30), transparent 60%),
    radial-gradient(520px 420px at 92% 6%, rgba(111,184,58,.14), transparent 60%);
  background-attachment:fixed;
}
.ik { width:1em; height:1em; display:block; }
a { color:var(--mavi); }
button, input, select { font:inherit; color:inherit; }
:focus-visible { outline:3px solid rgba(74,160,238,.55); outline-offset:2px; border-radius:10px; }

/* kabartma karo (g1 tarzi) */
.karo { display:grid; place-items:center; width:var(--b,64px); height:var(--b,64px); border-radius:calc(var(--b,64px)*.29);
  background:linear-gradient(145deg,#fff,#ece9e4); box-shadow:var(--kabartma); font-size:calc(var(--b,64px)*.62); flex:none; }

.karo .ik { width:66%; height:66%; }
/* ---------- GIRIS ---------- */
.giris-sayfa .giris { min-height:100vh; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(24px,5vw,80px); padding:clamp(20px,5vw,72px); max-width:1320px; margin:0 auto; }
.vitrin .logo { width:min(300px,62vw); display:block; margin-bottom:clamp(18px,3vw,34px); }
.vitrin h1 { font-size:clamp(28px,4.2vw,52px); line-height:1.08; letter-spacing:-.02em; font-weight:800; }
.vitrin h1 em { font-style:normal; background:linear-gradient(90deg,var(--mavi),var(--mavi-a)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vitrin p { margin-top:14px; color:var(--soluk); font-size:clamp(15px,1.5vw,18px); max-width:34em; }
.kume { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,22px); margin-top:clamp(24px,4vw,44px); max-width:420px; --b:clamp(76px,9.5vw,104px); }
.kume .karo { width:100%; height:auto; aspect-ratio:1; border-radius:26%; font-size:clamp(40px,5.8vw,62px); animation:yuz 5.5s ease-in-out infinite; }
.kume .karo:nth-child(2n) { animation-delay:-1.4s; } .kume .karo:nth-child(3n) { animation-delay:-2.8s; } .kume .karo:nth-child(5n) { animation-delay:-4.1s; }
@keyframes yuz { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

.kart { background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9); border-radius:30px; box-shadow:var(--gol-1), 0 30px 60px rgba(31,63,120,.12); padding:clamp(24px,3.4vw,44px); }
.kart-baslik { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.kart-baslik .karo { --b:58px; }
.kart-baslik h2 { font-size:24px; letter-spacing:-.01em; }
.kart-baslik small { display:block; color:var(--soluk); font-size:14px; margin-top:2px; }

.alan { margin-bottom:16px; }
.alan label { display:block; font-weight:650; font-size:14px; margin-bottom:7px; }
.girdi { position:relative; display:flex; align-items:center; }
.girdi > .ik { position:absolute; left:14px; font-size:24px; pointer-events:none; }
.girdi input, .girdi select { width:100%; height:54px; padding:0 16px 0 52px; border:1.5px solid var(--kenar); background:#f7f9fc; border-radius:16px; font-size:17px; transition:border-color .15s, box-shadow .15s, background .15s; box-shadow:inset 0 2px 4px rgba(20,35,61,.05); }
.girdi input:focus, .girdi select:focus { outline:none; border-color:var(--mavi-a); background:#fff; box-shadow:0 0 0 4px rgba(74,160,238,.2); }
.girdi .birim { position:absolute; right:16px; font-weight:700; color:var(--soluk); pointer-events:none; }
.girdi input.birimli { padding-right:56px; }
.goz { position:absolute; right:8px; width:40px; height:40px; border:0; background:transparent; border-radius:12px; cursor:pointer; color:var(--soluk); font-size:13px; font-weight:700; }
.goz:hover { background:rgba(31,99,184,.08); color:var(--mavi); }

.dugme { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px; padding:0 26px; border:0; border-radius:18px; cursor:pointer; font-weight:750; font-size:17px; color:#fff; width:100%;
  background:linear-gradient(180deg,#58aef5,#1f63b8); box-shadow:0 10px 22px rgba(31,99,184,.38), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(10,40,100,.25); transition:transform .12s, box-shadow .12s, filter .12s; text-decoration:none; }
.dugme:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 28px rgba(31,99,184,.42), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(10,40,100,.25); }
.dugme:active { transform:translateY(1px); }
.dugme .ik { font-size:26px; }
.dugme.sari { color:#4a2f00; background:linear-gradient(180deg,#ffe486,#f2a90e); box-shadow:0 10px 22px rgba(242,169,14,.4), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(160,95,0,.25); }
.dugme.hayalet { color:var(--mavi); background:#fff; border:1.5px solid var(--kenar); box-shadow:var(--gol-1); font-weight:700; height:50px; font-size:15.5px; }
.hata { display:flex; gap:10px; align-items:flex-start; background:#fff4ec; border:1px solid #ffd2b0; color:#8a3b00; padding:12px 14px; border-radius:14px; margin-bottom:16px; font-size:14.5px; }
.hata ul { margin-left:18px; }
.hata .ik { font-size:22px; flex:none; }
.alt-not { margin-top:18px; text-align:center; color:var(--soluk); font-size:13px; }

/* ---------- PANEL ---------- */
.ust { position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:rgba(238,240,244,.78); border-bottom:1px solid rgba(225,230,239,.9); }
.ust-ic { max-width:1320px; margin:0 auto; padding:12px clamp(16px,3vw,40px); display:flex; align-items:center; gap:16px; }
.ust .logo { height:42px; width:auto; display:block; }
.bosluk { flex:1; }
.kisi { display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:5px 14px 5px 6px; box-shadow:var(--gol-1); font-weight:650; font-size:14.5px; }
.kisi .karo { --b:34px; box-shadow:none; background:#eaf3fe; }
.cikis { text-decoration:none; font-weight:700; font-size:14.5px; padding:9px 16px; border-radius:999px; background:#fff; box-shadow:var(--gol-1); color:var(--metin); }
.cikis:hover { color:var(--mavi); }

.ana { max-width:1320px; margin:0 auto; padding:clamp(18px,3vw,40px) clamp(16px,3vw,40px) 64px; }
.karsilama { display:flex; align-items:center; gap:clamp(14px,2vw,26px); margin-bottom:clamp(18px,2.6vw,30px); }
.karsilama .karo { --b:clamp(64px,8vw,92px); }
.karsilama h1 { font-size:clamp(24px,3.2vw,38px); letter-spacing:-.02em; line-height:1.1; font-weight:800; }
.karsilama p { color:var(--soluk); margin-top:6px; font-size:clamp(14px,1.4vw,17px); }

.bilgiler { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:clamp(18px,2.6vw,30px); }
.bilgi { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.85); border:1px solid #fff; border-radius:20px; padding:14px 16px; box-shadow:var(--gol-1); min-width:0; }
.bilgi .karo { --b:50px; }
.bilgi b { display:block; font-size:19px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.bilgi span { color:var(--soluk); font-size:13px; }

.izgara { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(16px,2.4vw,30px); align-items:start; }
.panel-kart { background:rgba(255,255,255,.88); border:1px solid #fff; border-radius:var(--yaricap); box-shadow:var(--gol-1), 0 28px 56px rgba(31,63,120,.09); padding:clamp(18px,2.6vw,34px); }
.adim { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; padding:22px 0; border-top:1px dashed var(--kenar); }
.adim:first-of-type { border-top:0; padding-top:4px; }
.adim .karo { --b:56px; grid-row:1 / span 2; }
.adim h3 { font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.adim h3 .no { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--mavi); color:#fff; font-size:12.5px; font-weight:800; }
.adim .aciklama { color:var(--soluk); font-size:14px; margin-top:-2px; }
.adim .icerik { grid-column:2; margin-top:8px; }
.ikili { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:end; }
.ikili .carp { height:54px; display:grid; place-items:center; font-size:22px; color:var(--soluk); font-weight:700; }
.rozet-satir { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.rozet { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:#eef5fe; color:var(--mavi-k); font-weight:700; font-size:13.5px; border:1px solid #d6e6fa; }
.rozet .ik { font-size:17px; }
.rozet.sabit { background:#fff7df; border-color:#ffe29a; color:#7a4d00; }
button.rozet { cursor:pointer; font-family:inherit; }
button.rozet:hover { background:#e1eefc; }
.sayfa-sec { display:flex; align-items:center; gap:14px; padding:12px 14px; border:2px solid var(--mavi-a); background:#f2f8ff; border-radius:16px; }
.sayfa-sec .karo { --b:44px; }
.sayfa-sec b { font-size:17px; } .sayfa-sec small { display:block; color:var(--soluk); font-size:13px; }
.sayfa-sec .secili { margin-left:auto; font-size:26px; }
.bitis { margin-top:8px; padding-top:22px; border-top:1px dashed var(--kenar); display:grid; gap:12px; }

.onizleme-kart h2 { display:flex; align-items:center; gap:12px; font-size:20px; margin-bottom:4px; }
.onizleme-kart h2 .karo { --b:42px; }
.onizleme-kart .alt { color:var(--soluk); font-size:14px; margin-bottom:18px; }
.cerceve-yer { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; gap:6px 10px; align-items:center; }
.olcu-ust { grid-column:2; text-align:center; font-weight:750; font-size:13.5px; color:var(--mavi); display:flex; align-items:center; gap:8px; }
.olcu-ust::before, .olcu-ust::after { content:""; flex:1; height:2px; background:linear-gradient(90deg,transparent,var(--mavi-a)); } .olcu-ust::after { background:linear-gradient(270deg,transparent,var(--mavi-a)); }
.olcu-yan { writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; font-weight:750; font-size:13.5px; color:var(--mavi); display:flex; align-items:center; gap:8px; height:100%; }
.olcu-yan::before, .olcu-yan::after { content:""; flex:1; width:2px; background:linear-gradient(180deg,transparent,var(--mavi-a)); } .olcu-yan::after { background:linear-gradient(0deg,transparent,var(--mavi-a)); }
.tahta { display:grid; place-items:center; min-height:300px; background:linear-gradient(145deg,#e9edf3,#f7f9fc); border-radius:18px; padding:clamp(10px,2vw,22px); box-shadow:inset 4px 4px 12px rgba(27,47,85,.08), inset -4px -4px 12px #fff; }
.ekran { width:100%; max-width:560px; border-radius:12px; padding:7px; background:linear-gradient(145deg,#2a3346,#0c111b); box-shadow:0 22px 40px rgba(12,17,27,.35), 0 0 0 1px rgba(255,255,255,.08) inset; max-height:560px; }
.ekran iframe { width:100%; height:100%; border:0; border-radius:6px; display:block; background:#161a20; }
.etiket-satir { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:14px; color:var(--soluk); font-size:13.5px; }

.adimlar { margin-top:20px; display:grid; gap:12px; counter-reset:n; }
.adimlar li { list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:14.5px; }
.adimlar li::before { counter-increment:n; content:counter(n); flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,#ffe486,#f2a90e); color:#4a2f00; font-weight:800; font-size:13px; box-shadow:0 3px 8px rgba(242,169,14,.4); }
.adimlar code { background:#eef2f8; padding:1px 7px; border-radius:7px; font-size:13px; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); background:var(--metin); color:#fff; padding:14px 20px; border-radius:16px; font-weight:650; box-shadow:0 18px 40px rgba(20,35,61,.35); display:flex; align-items:center; gap:12px; transition:transform .35s cubic-bezier(.2,.9,.3,1.2); z-index:50; max-width:calc(100vw - 32px); }
.toast { opacity:0; visibility:hidden; }
.toast.acik { transform:translate(-50%,0); opacity:1; visibility:visible; } .toast .ik { font-size:30px; flex:none; } .toast b { display:block; font-size:16px; } .toast small { display:block; font-weight:500; opacity:.8; font-size:13px; margin-top:1px; } .toast small:empty { display:none; }

@media (max-width:1020px) { .izgara { grid-template-columns:1fr; } .bilgiler { grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px) {
  .giris-sayfa .giris { grid-template-columns:1fr; padding:22px 16px 40px; align-items:start; gap:22px; }
  .kume { grid-template-columns:repeat(6,1fr); max-width:none; margin-top:20px; --b:60px; } .kume .karo:nth-child(n+7) { display:none; }
  .kume .karo { font-size:clamp(26px,7vw,40px); }
}
@media (max-width:560px) {
  .ust .kisi span { display:none; } .kisi { padding:5px; }
  .ikili { grid-template-columns:1fr; } .ikili .carp { height:auto; }
  .adim { grid-template-columns:1fr; } .adim .karo { grid-row:auto; --b:46px; } .adim .icerik { grid-column:1; }
  .bilgiler { grid-template-columns:1fr 1fr; gap:10px; } .bilgi { padding:12px; gap:10px; } .bilgi .karo { --b:40px; } .bilgi b { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }