/* YatComm — yeni tasarım çalışma sürümü */

  :root{
    --bg:#FBF7F0;
    --surface:#FFFFFF;
    --ink:#1F3440;
    --muted:#5E7280;
    --line:#E8DFD2;
    --line-soft:#F1EAE0;
    --sea:#1E7F98;
    --sea-deep:#155E72;
    --sun:#E9A13B;
    --sun-soft:#FBEED7;
    --bgv:#C64B7B;
    --sky1:#FFE0BE;
    --sky2:#EAF4F6;
    --water1:#2E93AC;
    --water2:#155E72;
    --boat:#22394A;
    --chip:#FFFFFF;
    --shadow:0 2px 6px rgba(31,52,64,.07),0 14px 34px rgba(31,52,64,.09);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#161D2B;
      --surface:#1F2838;
      --ink:#F0EAE0;
      --muted:#9AA7B5;
      --line:#2C3648;
      --line-soft:#242E3F;
      --sea:#4FB8C9;
      --sea-deep:#7ACCD9;
      --sun:#F4B860;
      --sun-soft:#33301F;
      --bgv:#E077A0;
      --sky1:#3A3153;
      --sky2:#1B2434;
      --water1:#173B4C;
      --water2:#101E2C;
      --boat:#0C1520;
      --chip:#243043;
      --shadow:0 2px 6px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#161D2B;
    --surface:#1F2838;
    --ink:#F0EAE0;
    --muted:#9AA7B5;
    --line:#2C3648;
    --line-soft:#242E3F;
    --sea:#4FB8C9;
    --sea-deep:#7ACCD9;
    --sun:#F4B860;
    --sun-soft:#33301F;
    --bgv:#E077A0;
    --sky1:#3A3153;
    --sky2:#1B2434;
    --water1:#173B4C;
    --water2:#101E2C;
    --boat:#0C1520;
    --chip:#243043;
    --shadow:0 2px 6px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.4);
  }
  :root[data-theme="light"]{
    --bg:#FBF7F0;
    --surface:#FFFFFF;
    --ink:#1F3440;
    --muted:#5E7280;
    --line:#E8DFD2;
    --line-soft:#F1EAE0;
    --sea:#1E7F98;
    --sea-deep:#155E72;
    --sun:#E9A13B;
    --sun-soft:#FBEED7;
    --bgv:#C64B7B;
    --sky1:#FFE0BE;
    --sky2:#EAF4F6;
    --water1:#2E93AC;
    --water2:#155E72;
    --boat:#22394A;
    --chip:#FFFFFF;
    --shadow:0 2px 6px rgba(31,52,64,.07),0 14px 34px rgba(31,52,64,.09);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:"Seravek","Segoe UI",system-ui,-apple-system,sans-serif;
    line-height:1.65;-webkit-font-smoothing:antialiased;
  }
  .serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
  .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}

  .ribbon{
    background:var(--ink);color:var(--bg);
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    text-align:center;padding:.5rem 1rem;
  }
  .ribbon b{color:var(--sun);font-weight:600}

  .wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem}

  header.site{
    display:flex;align-items:center;justify-content:space-between;
    padding:1.3rem 0;
  }
  .brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.18rem}
  nav.main{display:flex;gap:1.6rem;align-items:center;font-size:.94rem}
  nav.main a{color:var(--muted);text-decoration:none}
  nav.main a:hover,nav.main a:focus-visible{color:var(--ink)}
  nav.main a:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:3px}
  .lang{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.28rem .8rem}
  .lang b{color:var(--ink)}
  @media(max-width:720px){nav.main a.hide-m{display:none}}

  /* ---- hero ---- */
  .hero{padding:3.4rem 0 0}
  .hero .eyebrow{
    color:var(--bgv);font-size:.85rem;letter-spacing:.06em;
    font-weight:600;margin:0 0 1rem;
  }
  .hero h1{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-size:clamp(2.1rem,5vw,3.4rem);
    line-height:1.12;font-weight:600;letter-spacing:.005em;
    margin:0 0 1.15rem;max-width:20ch;text-wrap:balance;
  }
  .hero h1 em{font-style:italic;color:var(--sea)}
  .hero p.lead{font-size:1.1rem;color:var(--muted);max-width:52ch;margin:0 0 1.9rem}
  .cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:3rem}
  .btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.97rem;padding:.72rem 1.5rem;border-radius:999px}
  .btn.primary{background:var(--sea);color:#FFF}
  .btn.primary:hover{background:var(--sea-deep)}
  :root[data-theme="dark"] .btn.primary,:root:not([data-theme="light"]) .btn.primary{color:#FFF}
  .btn.ghost{color:var(--ink);border:1.5px solid var(--line)}
  .btn.ghost:hover{border-color:var(--muted)}
  .btn:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

  /* hero schematic */
  .schematic{
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .schematic .bar{
    display:flex;justify-content:space-between;align-items:center;
    padding:.6rem 1.1rem;
    border-bottom:1px solid var(--line-soft);
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }
  .schematic .bar .dot{color:var(--sun)}
  .schematic svg{display:block;width:100%;height:auto}
  .node{fill:var(--sun)}
  .node-ring{fill:none;stroke:var(--sun);opacity:.5}
  .s-line{stroke:var(--sea);fill:none}
  .s-dash{stroke:var(--sea);fill:none;stroke-dasharray:4 4}
  .s-faint{stroke:var(--line);fill:none}
  .s-label{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;fill:var(--muted);letter-spacing:.08em}
  .s-label.strong{fill:var(--ink);font-weight:600}
  .s-body{font-family:"Seravek","Segoe UI",system-ui,sans-serif;font-size:12.5px;fill:var(--ink)}
  .s-body.dim{fill:var(--muted)}
  .hull{stroke:var(--ink);fill:none;stroke-width:1.6}
  .module-box{fill:var(--sun-soft);stroke:var(--sun);stroke-width:1.2}
  .grid-line{stroke:var(--line-soft)}
  @media (prefers-reduced-motion: no-preference){
    .pulse{animation:pulse 2.6s ease-out infinite}
    @keyframes pulse{
      0%{r:6;opacity:.55}
      70%{r:16;opacity:0}
      100%{r:16;opacity:0}
    }
    .flow{stroke-dasharray:4 4;animation:flow 1.6s linear infinite}
    @keyframes flow{to{stroke-dashoffset:-16}}
  }
  .theme-btn{
    cursor:pointer;background:none;border:1px solid var(--line);border-radius:999px;
    color:var(--ink);font-size:.95rem;line-height:1;padding:.34rem .7rem;
  }
  .theme-btn:hover{border-color:var(--muted)}
  .theme-btn:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

  /* hero: schematic card + app card */
  .hero-duo{
    display:grid;grid-template-columns:1.55fr 1fr;gap:1.3rem;align-items:stretch;
  }
  .hero-duo .schematic{display:flex;flex-direction:column}
  .hero-duo .schematic svg{margin:auto 0}
  /* Kalita CAD: labeled points, visible data flow, and a schematic YatComm module. */
  .kalita-stage{position:relative;isolation:isolate;background:#102a40;}
  .kalita-stage img{display:block;width:100%;height:auto;}
  .kalita-schematic .kalita-links{position:absolute;inset:0;width:100%;height:100%;margin:0;pointer-events:none;}
  .kalita-links path{fill:none;stroke:#42c3dc;stroke-width:2.5;stroke-dasharray:8 8;}
  .kalita-links .kalita-trace{opacity:.7;}
  .kalita-links .kalita-flow{opacity:.85;}
  .kalita-links .kalita-remote{stroke:#7bdcf0;stroke-width:3.2;opacity:1;}
  .kalita-links .kalita-arrow{stroke:#7bdcf0;stroke-width:3.2;stroke-dasharray:none;opacity:1;}
  .kalita-links .kalita-packet{fill:#f4c75f;stroke:#102a40;stroke-width:2;filter:drop-shadow(0 0 5px #f4c75f);}
  .kalita-remote-mobile{display:none;}
  .kalita-tags{position:absolute;inset:0;pointer-events:none;}
  .kalita-tag{position:absolute;display:flex;align-items:center;gap:.45rem;white-space:nowrap;color:#dcebf0;font:600 .73rem/1.2 ui-monospace,Consolas,monospace;text-shadow:0 1px 5px #071b2e,0 0 8px #071b2e;}
  .kalita-tag i{display:block;width:9px;height:9px;flex:none;border-radius:50%;background:#f4c75f;box-shadow:0 0 0 3px #17364f,0 0 12px rgba(244,199,95,.6);}
  .kalita-tag--nav{left:51.6%;top:9.5%;}
  .kalita-tag--fire{left:11%;top:64%;}
  .kalita-tag--dimmer{left:74%;top:64%;}
  .kalita-tag--bilge{left:9%;top:74%;}
  .kalita-tag--fridge{left:12%;top:79%;}
  .kalita-tag--water{left:75%;top:74%;}
  .kalita-tag--battery{left:9%;top:84%;}
  .kalita-tag--motor{left:76%;top:83%;}
  .kalita-tag--tanks{left:15%;top:92%;}
  .kalita-tag--ac{left:77%;top:92%;}
  .kalita-module{position:absolute;left:50%;top:85%;transform:translate(-50%,-50%);width:clamp(72px,19%,124px);min-height:36px;display:grid;place-items:center;border:1px solid #45b9d5;border-radius:6px;background:linear-gradient(135deg,#21495e,#0a243b 67%);box-shadow:0 0 0 3px rgba(8,28,46,.85),0 0 19px rgba(66,195,220,.3),inset 0 1px 8px rgba(106,215,238,.13);}
  .kalita-module-name{color:#dcebf0;font:700 clamp(.57rem,1.2vw,.75rem)/1 ui-monospace,Consolas,monospace;letter-spacing:.09em;}
  .kalita-led{position:absolute;top:5px;width:5px;height:5px;border-radius:50%;}
  .kalita-led--amber{left:6px;background:#f4c75f;box-shadow:0 0 7px #f4c75f;}
  .kalita-led--cyan{right:6px;background:#7bdcf0;box-shadow:0 0 7px #7bdcf0;}
  .kalita-4g{position:absolute;z-index:1;left:60%;top:25%;padding:.28rem .48rem;border:1px solid #45b9d5;border-radius:6px;background:rgba(9,35,54,.92);color:#dcebf0;font:700 .72rem/1.1 ui-monospace,Consolas,monospace;letter-spacing:.04em;white-space:nowrap;box-shadow:0 0 15px rgba(66,195,220,.23);pointer-events:none;}
  .kalita-4g--mobile{display:none;}
  @media(max-width:720px){
    .kalita-tag{font-size:.6rem;gap:.3rem;}
    .kalita-tag i{width:7px;height:7px;box-shadow:0 0 0 2px #17364f,0 0 8px rgba(244,199,95,.45);}
    .kalita-module{min-height:30px;}
    .kalita-links .kalita-trace{opacity:.55;}
    .kalita-remote-desktop,.kalita-4g--desktop{display:none;}
    .kalita-remote-mobile,.kalita-4g--mobile{display:block;}
    .kalita-4g--mobile{left:56%;top:25%;font-size:.57rem;padding:.22rem .34rem;}
  }
  @media(prefers-reduced-motion:no-preference){
    .kalita-links .kalita-trace,.kalita-links .kalita-flow{animation:kalita-flow 2.8s linear infinite;}
    .kalita-links .kalita-remote{animation:kalita-flow 2s linear infinite;}
    .kalita-led--amber{animation:kalita-led 2s ease-in-out infinite;}
    .kalita-led--cyan{animation:kalita-led 2s ease-in-out 1s infinite;}
    .kalita-module{animation:kalita-module-glow 3.5s ease-in-out infinite;}
    @keyframes kalita-flow{to{stroke-dashoffset:-32;}}
    @keyframes kalita-led{50%{opacity:.18;box-shadow:none;}}
    @keyframes kalita-module-glow{50%{box-shadow:0 0 0 3px rgba(8,28,46,.85),0 0 30px rgba(66,195,220,.65),inset 0 1px 8px rgba(106,215,238,.26);}}
  }
  @media(prefers-reduced-motion:reduce){.kalita-links .kalita-packet{display:none;}}
  @media(max-width:720px){
    .hero-duo{grid-template-columns:1fr}
  }
  .app-card{position:relative}
  .notif-layer{
    position:absolute;left:0;right:0;top:50px;
    display:flex;flex-direction:column;gap:.6rem;align-items:center;
    pointer-events:none;
  }
  /* phone-real push notification */
  :root{--ok:#2E8B57;--glass:rgba(255,255,255,.8);--glass-line:rgba(31,52,64,.1)}
  @media (prefers-color-scheme: dark){:root{--ok:#5BBA8A;--glass:rgba(34,43,59,.82);--glass-line:rgba(255,255,255,.12)}}
  :root[data-theme="dark"]{--ok:#5BBA8A;--glass:rgba(34,43,59,.82);--glass-line:rgba(255,255,255,.12)}
  :root[data-theme="light"]{--ok:#2E8B57;--glass:rgba(255,255,255,.8);--glass-line:rgba(31,52,64,.1)}
  .notif{
    display:flex;gap:.7rem;align-items:flex-start;
    background:var(--glass);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid var(--glass-line);
    border-radius:19px;
    box-shadow:0 8px 28px rgba(15,30,45,.18);
    padding:.7rem .85rem;
    width:100%;
    font-family:-apple-system,system-ui,"Segoe UI",sans-serif;
  }
  .notif-layer .notif{width:88%;max-width:300px}
  .n-ico{
    width:36px;height:36px;border-radius:9px;flex-shrink:0;
    background:linear-gradient(150deg,var(--sea),var(--sea-deep));
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 -6px 10px rgba(0,0,0,.12);
  }
  .n-ico.warn{background:linear-gradient(150deg,var(--bgv),#8F2F56)}
  .n-ico.sun{background:linear-gradient(150deg,var(--sun),#C07A18)}
  .n-ico svg{width:22px;height:22px;display:block}
  .n-content{flex:1;min-width:0}
  .n-row{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
  .n-title{font-size:.84rem;font-weight:650;color:var(--ink);letter-spacing:-.01em}
  .n-time{font-size:.7rem;color:var(--muted);flex-shrink:0}
  .n-body{font-size:.82rem;line-height:1.35;color:var(--ink);opacity:.85;margin-top:.08rem}
  .n-body .ok{color:var(--ok)}
  @media (prefers-reduced-motion: no-preference){
    .notif-layer .notif{animation:drop .7s ease both}
    .notif-layer .notif:nth-of-type(2){animation-delay:1s}
    @keyframes drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  }

  /* benefits section */
  .benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
  @media(max-width:720px){.benefit-grid{grid-template-columns:1fr}}
  .benefit-card{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:1.5rem 1.5rem 1.6rem;box-shadow:var(--shadow);
  }
  .n-scene{
    background:linear-gradient(140deg,var(--sky1),var(--sky2));
    border:1px solid var(--line);
    border-radius:14px;
    padding:1rem .95rem;
    margin-bottom:1.1rem;
  }
  .benefit-card h3{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:0 0 .45rem;font-size:1.18rem;font-weight:600;
  }
  .benefit-card p{margin:0;color:var(--muted);font-size:.94rem}
  .more-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:1.3rem;margin-top:1.5rem;
  }
  .more{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:1.15rem 1.2rem;
  }
  .more h4{
    margin:0 0 .5rem;font-size:.92rem;font-weight:650;
    display:flex;align-items:center;gap:.5rem;
  }
  .more h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);flex-shrink:0}
  .more ul{margin:0;padding-left:1rem;font-size:.86rem;color:var(--muted)}
  .more ul li{margin:.3rem 0}
  .more ul li::marker{color:var(--sea)}

  /* ---- sections ---- */
  section{padding:4.4rem 0 0}
  .sec-head{margin-bottom:2.2rem;max-width:60ch}
  .sec-head .tag{
    color:var(--bgv);font-weight:600;font-size:.85rem;letter-spacing:.06em;
    display:block;margin-bottom:.4rem;
  }
  .sec-head h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-size:clamp(1.5rem,3vw,2.15rem);font-weight:600;
    margin:0;line-height:1.2;text-wrap:balance;
  }
  .sec-head p{color:var(--muted);margin:.7rem 0 0}

  .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
  @media(max-width:720px){.feat-grid{grid-template-columns:1fr}}
  .feat{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:1.7rem 1.6rem;box-shadow:var(--shadow);
  }
  .feat .glyph{
    width:44px;height:44px;border-radius:12px;
    background:var(--sun-soft);color:var(--sun);
    display:flex;align-items:center;justify-content:center;
  }
  .feat .glyph svg{width:26px;height:26px}
  .feat h3{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:1rem 0 .45rem;font-size:1.18rem;font-weight:600;
  }
  .feat p{margin:0;color:var(--muted);font-size:.95rem}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
  @media(max-width:720px){.steps{grid-template-columns:1fr}}
  .step{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:1.5rem;box-shadow:var(--shadow);
  }
  .step .num{
    width:34px;height:34px;border-radius:50%;
    background:var(--sea);color:#FFF;font-weight:700;font-size:.95rem;
    display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;
  }
  .step h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:650}
  .step p{margin:0;color:var(--muted);font-size:.93rem}

  .proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
  @media(max-width:720px){.proj-grid{grid-template-columns:1fr}}
  .proj{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:1.6rem;box-shadow:var(--shadow);
  }
  .proj .date{color:var(--bgv);font-size:.8rem;font-weight:600;letter-spacing:.05em}
  .proj h3{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:.45rem 0 .5rem;font-size:1.15rem;font-weight:600;
  }
  .proj p{margin:0;color:var(--muted);font-size:.94rem}

  /* contact */
  .contact-card{
    margin-top:4.6rem;
    background:linear-gradient(160deg,var(--sky1),var(--sky2));
    border:1px solid var(--line);
    border-radius:22px;padding:2.6rem 2.4rem;
    display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:start;
    box-shadow:var(--shadow);
  }
  @media(max-width:720px){.contact-card{grid-template-columns:1fr;padding:1.8rem 1.4rem}}
  .contact-card h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:.2rem 0 .8rem;font-size:1.7rem;font-weight:600;
  }
  .contact-card .tag{color:var(--bgv);font-weight:600;font-size:.85rem}
  .contact-card p{color:var(--muted);max-width:44ch;margin:0}
  .contact-page-link{display:inline-block;margin-top:1.1rem}
  .c-list{list-style:none;margin:0;padding:0;font-size:.95rem}
  .c-list li{display:flex;gap:.8rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line)}
  .c-list li:last-child{border-bottom:0}
  .c-list .k{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    min-width:5.5rem;
  }
  .c-list a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--sun)}

  footer.site{
    margin-top:2.6rem;padding:1.5rem 0 2.3rem;
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    font-size:.82rem;color:var(--muted);
    border-top:1px solid var(--line);
  }

  .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- iç sayfalar ---- */
.crumb{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    margin:0 0 .8rem;
  }
  .crumb a{color:inherit;text-decoration:none}
  .crumb a:hover,.crumb a:focus-visible{color:var(--sea)}
  .crumb b{color:var(--sea);font-weight:600}
  .page-head h1{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:0 0 .6rem;font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:600;line-height:1.15;text-wrap:balance;
  }
  .page-head .sub{color:var(--muted);max-width:60ch;margin:0 0 2.2rem;font-size:1rem}

  /* cards & shared */
  .card{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    box-shadow:var(--shadow);
  }
  .meta-row{
    display:flex;gap:1.2rem;flex-wrap:wrap;
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }
  .meta-row .hl{color:var(--bgv)}

  /* ---- projects page ---- */
  .proj-detail{padding:1.8rem;margin-bottom:1.5rem}
  .proj-detail h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:.5rem 0 .8rem;font-size:1.5rem;font-weight:600;
  }
  .proj-detail p.desc{color:var(--muted);max-width:64ch;margin:0 0 1.4rem;font-size:.95rem}
  .io-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-bottom:1.4rem}
  @media(max-width:720px){.io-grid{grid-template-columns:1fr}}
  .io-box{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
  .io-box .hd{
    padding:.5rem .9rem;background:var(--line-soft);
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  }
  .io-box ul{margin:0;padding:.6rem 1rem .7rem 1.9rem;font-size:.88rem}
  .io-box li{margin:.25rem 0}
  .io-box li::marker{color:var(--sun)}
  .media-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
  @media(max-width:720px){.media-row{grid-template-columns:1fr}}
  .ph{
    border:1.5px dashed var(--line);border-radius:12px;
    min-height:150px;display:flex;flex-direction:column;gap:.3rem;
    align-items:center;justify-content:center;color:var(--muted);
    font-size:.85rem;text-align:center;padding:1rem;
  }
  .ph .big{font-size:1.6rem;opacity:.7}
  .proj-mini{
    padding:1.4rem 1.6rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;
  }
  .proj-mini h3{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:.3rem 0 .2rem;font-size:1.12rem;font-weight:600;
  }
  .proj-mini p{margin:0;color:var(--muted);font-size:.88rem}
  .link{
    color:var(--sea);font-weight:600;text-decoration:none;font-size:.9rem;white-space:nowrap;
    border-bottom:2px solid var(--sun);cursor:pointer;
  }

  /* ---- article page ---- */
  .article{max-width:680px}
  .article .lead{font-size:1.05rem;color:var(--muted)}
  .article h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    font-size:1.35rem;font-weight:600;margin:2rem 0 .6rem;
  }
  .article p{margin:.8rem 0;font-size:.97rem}
  .article ul{font-size:.95rem}
  .article li{margin:.35rem 0}
  .article li::marker{color:var(--sea)}
  .callout{
    border-left:3px solid var(--sun);background:var(--sun-soft);
    border-radius:0 12px 12px 0;padding:.9rem 1.1rem;margin:1.4rem 0;
    font-size:.92rem;
  }
  .art-media{margin:1.6rem 0}
  .other{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line)}
  .other h3{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
    margin:0 0 1rem;font-weight:600;
  }
  .other-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
  @media(max-width:720px){.other-grid{grid-template-columns:1fr}}
  .other-card{padding:1.1rem 1.3rem}
  .other-card .d{font-size:.74rem;color:var(--bgv);font-weight:600;letter-spacing:.05em}
  .other-card h4{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:.3rem 0 .2rem;font-size:1.05rem;font-weight:600;
  }
  .other-card p{margin:0;color:var(--muted);font-size:.86rem}

  /* ---- contact page ---- */
  .contact-cols{display:grid;grid-template-columns:1fr 1.15fr;gap:1.5rem;align-items:start}
  @media(max-width:720px){.contact-cols{grid-template-columns:1fr}}
  .c-info{padding:1.6rem}
  .c-list{list-style:none;margin:0 0 1.4rem;padding:0;font-size:.95rem}
  .c-list li{display:flex;gap:.8rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
  .c-list li:last-child{border-bottom:0}
  .c-list .k{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    min-width:5.2rem;
  }
  .c-list a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--sun)}
  .map{
    border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--line-soft);
  }
  .map svg{display:block;width:100%;height:auto}
  .m-label{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;fill:var(--muted);letter-spacing:.08em}
  .form{padding:1.6rem}
  .form h2{
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    margin:0 0 1.2rem;font-size:1.35rem;font-weight:600;
  }
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  @media(max-width:720px){.frow{grid-template-columns:1fr}}
  .field{margin-bottom:1rem}
  .field label{
    display:block;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
    font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    margin-bottom:.35rem;
  }
  .field input,.field select,.field textarea{
    width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:9px;
    background:var(--bg);color:var(--ink);font-family:inherit;font-size:.93rem;
  }
  .field textarea{min-height:110px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--sun);outline-offset:1px;border-color:var(--sun)}
  .btn-submit{
    display:inline-block;cursor:pointer;border:none;font-family:inherit;
    background:var(--sea);color:#fff;font-weight:600;font-size:.95rem;
    padding:.7rem 1.6rem;border-radius:999px;
  }
  .btn-submit:hover{background:var(--sea-deep)}
  .form .note{font-size:.8rem;color:var(--muted);margin:.7rem 0 0}
  .form-status.is-visible{display:block}

  .contact-page-main{padding-top:3.8rem;padding-bottom:5rem}
  .contact-page-main .page-head{margin-bottom:2rem}
  .contact-page-main .c-info,.contact-page-main .form{height:100%}
  .contact-page-main .c-list{margin-bottom:0}
  .contact-page-main .btn-submit{border-radius:8px}
  @media(max-width:720px){
    .contact-page-main{padding-top:2.6rem;padding-bottom:3.5rem}
    .contact-page-main .c-info,.contact-page-main .form{padding:1.35rem}
  }

  /* ---- projects & articles listing pages ---- */
  .listing-page-main{padding-top:3.8rem;padding-bottom:5rem}
  .listing-page-main .page-head{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:2rem}
  .listing-page-main .page-head .sub{margin-bottom:0}
  .listing-kicker{font:600 .69rem/1.4 ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--sea);white-space:nowrap}
  .content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem}
  .content-grid--articles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .content-card{overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
  .content-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(8,37,57,.12)}
  .content-cover{position:relative;min-height:245px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#09243a,#0e4964)}
  .content-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(ellipse 70% 24% at 100% 105%,transparent 0 33px,rgba(112,213,237,.14) 34px 35px,transparent 36px 66px)}
  .content-cover img{position:relative;z-index:1;display:block;width:100%;height:245px;object-fit:contain;padding:1rem;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
  .content-cover--screen img{padding:1.5rem 1rem}
  .content-body{padding:1.45rem 1.5rem 1.55rem;display:flex;flex-direction:column;flex:1}
  .content-meta{display:flex;justify-content:space-between;gap:.7rem;align-items:center;margin-bottom:.75rem;font:600 .66rem/1.4 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sea)}
  .content-meta time{color:var(--muted);letter-spacing:.05em}
  .content-card h2{font-size:1.25rem;line-height:1.25;letter-spacing:-.02em;margin:0 0 .65rem}
  .content-card p{color:var(--muted);font-size:.91rem;margin:0 0 1.3rem}
  .content-status{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line-soft);font:600 .7rem/1.4 ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#668092}
  .article-cover{min-height:190px;place-items:end start;padding:1.3rem;background:linear-gradient(145deg,#0a2942,#0c5772)}
  .article-cover::before{content:"";position:absolute;width:180px;height:180px;right:-40px;top:-70px;border:1px solid rgba(108,217,239,.34);border-radius:50%;box-shadow:0 0 0 28px rgba(108,217,239,.05),0 0 0 56px rgba(108,217,239,.04)}
  .article-cover--alarm{background:linear-gradient(145deg,#11283d,#075c7d)}
  .article-cover--battery{background:linear-gradient(145deg,#132c43,#655023)}
  .article-cover-mark{position:relative;z-index:1;color:#dff7fc;font:700 2.15rem/1 ui-monospace,Consolas,monospace;letter-spacing:-.06em}
  .article-cover-mark small{display:block;margin-top:.55rem;color:#8eddf2;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
  .listing-note{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.4rem;padding:1rem 1.15rem;border:1px solid #c7dde8;border-radius:12px;background:#e5f2f7;color:#36586d;font-size:.84rem}
  .listing-note strong{color:#0b6585;white-space:nowrap}
  @media(max-width:900px){.content-grid--articles{grid-template-columns:1fr 1fr}}
  @media(max-width:720px){
    .listing-page-main{padding-top:2.6rem;padding-bottom:3.5rem}
    .listing-page-main .page-head{display:block}
    .listing-kicker{display:block;margin-top:1rem}
    .content-grid,.content-grid--articles{grid-template-columns:1fr}
    .content-cover{min-height:210px}
    .content-cover img{height:210px}
    .article-cover{min-height:165px}
  }

  
/* ---- sitewide extras ---- */
nav.main a.on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--sun)}
a.card-link{text-decoration:none;color:inherit;display:block;transition:transform .15s ease}
a.card-link:hover{transform:translateY(-2px)}
main{display:block}
.page-pad{padding-top:2.4rem}
.form-status{font-size:.85rem;color:var(--ok);margin-top:.6rem;display:none}


/* ===== YatComm V1: naval identity, clear navigation, three feature groups ===== */
:root, :root[data-theme="light"] {
  --bg:#edf3f7;--surface:#ffffff;--ink:#10283c;--muted:#50677a;
  --line:#d5e3eb;--line-soft:#e7eff3;--sea:#087ea4;--sea-deep:#075c7d;
  --sun:#e6ad4d;--sun-soft:#e5f4f9;--bgv:#147da2;
  --sky1:#d9ecf4;--sky2:#f0f7fa;--shadow:0 12px 34px rgba(8,37,57,.07);
}
body {background:var(--bg);}
.wrap {max-width:1200px;padding:0 clamp(1.2rem,4vw,3rem);}
.masthead {
  --ink:#f4f9fc;--muted:#b2cbd9;--line:#31516b;--line-soft:#244259;
  --sea:#56cbe8;--sea-deep:#8de3f4;--sun:#edbf6b;--sun-soft:#193951;
  --surface:#0e2a43;--glass:rgba(14,42,67,.88);--glass-line:rgba(137,198,222,.24);
  color:var(--ink);position:relative;overflow:hidden;
  background:radial-gradient(ellipse 60% 55% at 88% 35%,rgba(18,115,150,.44),transparent 72%),
             linear-gradient(122deg,#071629 0%,#0b2842 54%,#0d405a 100%);
}
.masthead::before {content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,#45c6e5 0%,#117eac 56%,#eab85f 100%);}
.masthead::after {content:"";position:absolute;inset:0;pointer-events:none;opacity:.34;
  background:repeating-radial-gradient(ellipse 74% 24% at 100% 107%,transparent 0 46px,rgba(104,192,217,.14) 47px 48px,transparent 49px 88px);}
.masthead .wrap {position:relative;z-index:1;}
header.site {min-height:98px;padding:1.15rem 0;border-bottom:1px solid rgba(170,213,230,.18);gap:2rem;position:relative;}
.brand {display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;text-decoration:none;flex-shrink:0;line-height:1;}
.brand img {display:block;width:216px;height:auto;max-width:100%;}
.brand-sub {font:600 .6rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.24em;color:#9bbfd0;padding-left:3px;}
nav.main {gap:clamp(.8rem,1.5vw,1.5rem);font-weight:600;font-size:.88rem;}
nav.main a {color:#d1e2eb;white-space:nowrap;position:relative;transition:color .2s ease;}
nav.main > a:not(.nav-contact)::after {content:"";position:absolute;left:0;right:100%;bottom:-.42rem;height:2px;background:#58cdea;transition:right .2s;}
nav.main a:hover,nav.main a:focus-visible {color:#fff;}
nav.main > a:not(.nav-contact):hover::after,nav.main > a:not(.nav-contact):focus-visible::after {right:0;}
nav.main .nav-contact {background:#50c8e7;color:#062239;border-radius:8px;padding:.65rem .85rem;}
nav.main .nav-contact:hover {background:#92e1f2;color:#062239;}
.lang-switch{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .45rem;border:1px solid rgba(143,202,224,.45);border-radius:7px;font:700 .68rem/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#7398aa;white-space:nowrap}
.lang-switch a{padding:.18rem .1rem;color:#91b4c5;text-decoration:none}
.lang-switch a:hover,.lang-switch a:focus-visible{color:#fff}
.lang-switch a.is-current{color:#f1bd63}
.menu-toggle {display:none;}
.hero {padding:4.4rem 0 5.6rem;}
.hero .eyebrow {color:#8eddf2;font-size:.79rem;letter-spacing:.19em;text-transform:uppercase;}
.hero h1 {font-family:"Segoe UI",system-ui,sans-serif;font-size:clamp(2.65rem,5.2vw,4.85rem);font-weight:760;line-height:1.07;letter-spacing:-.045em;max-width:20ch;margin-bottom:1.25rem;}
.hero h1 em {font-style:normal;color:#67d2ed;}
.hero p.lead {font-size:clamp(1rem,1.5vw,1.2rem);max-width:65ch;color:#c1d5df;}
.hero .cta-row {margin-bottom:1.7rem;}
.hero .btn {border-radius:8px;}
.hero .btn.primary {background:#49c3e4;color:#07263c;}
.hero .btn.primary:hover {background:#8be2f5;}
.hero .btn.ghost {color:#edf8fc;border-color:#6f9cb1;}
.hero .btn.ghost:hover {border-color:#c5e9f5;}
.hero-facts {display:flex;gap:0;flex-wrap:wrap;margin:0 0 3.1rem;color:#a7c8d7;font-size:.81rem;letter-spacing:.02em;}
.hero-facts span {padding:.15rem 1.2rem;border-left:1px solid #41647c;}
.hero-facts span:first-child {padding-left:0;border-left:0;}
.hero-facts b {color:#f4fbfc;margin-right:.22rem;font-weight:700;}
.masthead .schematic {background:#0b253c;border-color:#345b74;box-shadow:0 18px 52px rgba(0,7,17,.22);}
.masthead .schematic .bar {border-bottom-color:#28475d;}
.masthead .notif {background:rgba(20,49,70,.94);border-color:#49677c;}
.masthead .notif .n-title,.masthead .notif .n-body {color:#eff8fc;}
.masthead .notif .n-time {color:#b6d2df;}
.masthead .notif-layer .notif {box-shadow:0 14px 32px rgba(0,10,22,.38);}
main.wrap {padding-top:.4rem;padding-bottom:4rem;}
section {scroll-margin-top:1.5rem;}
.home-main .sec-head .tag {color:#0FA3CE;text-transform:uppercase;font-size:.86rem;font-weight:700;letter-spacing:.12em;}
.sec-head h2,.benefit-card h3,.contact-card h2 {font-family:"Segoe UI",system-ui,sans-serif;letter-spacing:-.025em;font-weight:700;}
.benefit-card,.step {box-shadow:var(--shadow);}
.n-scene {background: linear-gradient(122deg, #0C83A9 0%, #0FA3CE 54%, #39B8D8 100%);}
.feature-three {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;}
.feature-group {background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.65rem;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;}
.feature-no {font:600 .69rem ui-monospace,Consolas,monospace;letter-spacing:.15em;color:#49788e;}
.feature-icon {height:46px;width:46px;margin:1.7rem 0 .35rem;display:grid;place-items:center;border-radius:10px;background:#d9f1f7;color:#097fa6;font-size:1.65rem;line-height:1;}
.feature-group h3 {font-size:1.28rem;line-height:1.25;margin:.6rem 0 .6rem;}
.feature-group p {color:var(--muted);font-size:.92rem;margin:0 0 1rem;}
.feature-group ul {margin:auto 0 0;padding:1rem 0 0;list-style:none;border-top:1px solid var(--line-soft);font-size:.84rem;color:#284c62;}
.feature-group li {padding:.32rem 0 .32rem 1.15rem;position:relative;}
.feature-group li::before {content:"";position:absolute;left:0;top:.91rem;width:6px;height:6px;border-radius:50%;background:#13a1c8;}
.interface-section {padding-top:5.2rem;}
.interface-grid {display:grid;grid-template-columns:1.35fr .7fr;gap:1.15rem;align-items:stretch;}
.interface-image {margin:0;min-width:0;background:#0d2439;border:1px solid #24475e;border-radius:17px;overflow:hidden;display:flex;flex-direction:column;}
.interface-art {position:relative;min-height:300px;flex:1;display:grid;place-items:center;padding:2rem;overflow:hidden;background:radial-gradient(ellipse at center,#1b4863 0%,#0c273e 58%,#091b30 100%);}
.interface-art img {display:block;max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.27));}
.screen-device {position:relative;width:min(100%,690px);aspect-ratio:2048/1395;isolation:isolate;}
.screen-view {display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.27));transition:opacity .16s ease,transform .16s ease;}
.screen-device.is-changing .screen-view {opacity:.2;transform:scale(.992);}
.screen-hotspots {position:absolute;inset:0;z-index:2;pointer-events:none;}
.screen-hotspot {position:absolute;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;transition:background-color .16s ease,box-shadow .16s ease;transform:translate(-50%,-50%);}
.screen-hotspot:hover,.screen-hotspot:focus-visible {outline:0;background:rgba(14,173,211,.12);box-shadow:0 0 0 2px rgba(23,191,225,.72),0 0 18px rgba(23,191,225,.3);}
.screen-hotspot--tanks {left:30.3%;top:45.9%;width:12%;height:18%;}
.screen-hotspot--battery {left:68%;top:45.9%;width:12%;height:18%;}
.screen-hotspot--switch {left:30.3%;top:70.5%;width:12%;height:18%;}
.screen-hotspot--ac {left:49.2%;top:70.5%;width:12%;height:18%;}
.screen-hotspot--alarms {left:68%;top:70.5%;width:12%;height:18%;}
.screen-hotspot--home {display:none;left:17.2%;top:24%;width:6%;height:10%;}
.screen-device:not([data-screen="main"]) .screen-hotspot--menu {display:none;}
.screen-device:not([data-screen="main"]) .screen-hotspot--home {display:block;}
.screen-device.is-changing .screen-hotspot {pointer-events:none;}
.app-device {position:relative;height:450px;max-width:100%;aspect-ratio:595/1200;isolation:isolate;}
.app-screen {display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.27));transition:opacity .16s ease,transform .16s ease;}
.app-device.is-changing .app-screen {opacity:.2;transform:scale(.992);}
.app-hotspots {position:absolute;inset:0;z-index:2;pointer-events:none;}
.app-hotspot {position:absolute;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;transition:background-color .16s ease,box-shadow .16s ease;}
.app-hotspot:hover,.app-hotspot:focus-visible {outline:0;background:rgba(14,173,211,.12);box-shadow:0 0 0 2px rgba(23,191,225,.72),0 0 18px rgba(23,191,225,.3);}
.app-hotspot--battery {left:15.5%;top:34.5%;width:26%;height:12.8%;}
.app-hotspot--tanks {left:58.8%;top:34.5%;width:26%;height:12.8%;}
.app-hotspot--switch {left:58.8%;top:54%;width:26%;height:12.8%;}
.app-hotspot--ac {left:15.5%;top:73.5%;width:26%;height:12.8%;}
.app-hotspot--alarms {left:58.8%;top:73.5%;width:26%;height:12.8%;}
.app-hotspot--back {display:none;left:1.5%;top:2%;width:18%;height:13%;border-radius:12px;}
.app-device:not([data-screen="main"]) .app-hotspot--menu {display:none;}
.app-device:not([data-screen="main"]) .app-hotspot--back {display:block;}
.app-device.is-changing .app-hotspot {pointer-events:none;}
.zoom-btn {display:none;position:absolute;top:.8rem;right:.8rem;z-index:3;width:44px;height:44px;padding:0;border:1px solid rgba(143,213,232,.65);border-radius:11px;background:rgba(5,25,43,.88);color:#fff;box-shadow:0 8px 18px rgba(0,6,18,.28);font:600 1.45rem/1 system-ui,sans-serif;cursor:pointer;place-items:center;}
.zoom-btn:focus-visible,.image-lightbox-close:focus-visible {outline:3px solid var(--sun);outline-offset:3px;}
.image-lightbox {width:min(96vw,1100px);height:min(92dvh,900px);max-width:none;max-height:none;margin:auto;padding:1rem;border:1px solid #315c75;border-radius:18px;background:#061a2d;color:#fff;box-shadow:0 24px 80px rgba(0,4,14,.6);overflow:hidden;}
.image-lightbox[open] {display:grid;place-items:center;}
.image-lightbox::backdrop {background:rgba(1,10,20,.88);backdrop-filter:blur(5px);}
.image-lightbox-content {width:100%;height:100%;display:grid;place-items:center;min-width:0;min-height:0;}
.image-lightbox-img {display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));}
.image-lightbox-img[hidden] {display:none;}
.image-lightbox.app-mode {padding:3.5rem .8rem .8rem;}
.image-lightbox.app-mode .app-device {height:100%;max-height:100%;max-width:100%;}
.image-lightbox.screen-mode {padding:3.5rem .8rem .8rem;}
.image-lightbox.screen-mode .screen-device {width:min(100%,1100px,105dvh);max-height:100%;}
.image-lightbox-close {position:absolute;top:.65rem;right:.65rem;z-index:2;width:44px;height:44px;padding:0;border:1px solid rgba(143,213,232,.65);border-radius:50%;background:rgba(5,25,43,.92);color:#fff;font:400 1.85rem/1 system-ui,sans-serif;cursor:pointer;}
.interface-image figcaption {display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;padding:1rem 1.3rem;border-top:1px solid #315067;color:#f3f8fa;}
.interface-image figcaption span {font:600 .65rem ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#78cde2;}
.interface-image figcaption strong {font-size:.96rem;}
.contact-card {background:linear-gradient(130deg,#d8edf5,#f8fbfc);}
.footer-band {background:#071b2e;color:#a9c2d1;}
.footer-band footer.site {border:0;margin:0;color:#a9c2d1;}
@media(max-width:1020px) {
  .masthead {overflow:visible;}
  header.site {min-height:82px;}
  .brand img {width:188px;}
  .menu-toggle {display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:42px;background:#133b55;border:1px solid #4d7890;border-radius:9px;cursor:pointer;padding:10px;}
  .menu-toggle span {display:block;height:2px;width:100%;background:#f4fbfd;border-radius:2px;}
  nav.main {display:none;position:absolute;top:calc(100% - 1px);right:0;left:0;z-index:10;background:#0b2941;padding:1.1rem;box-shadow:0 18px 30px rgba(0,6,17,.35);border:1px solid #365d75;border-radius:0 0 12px 12px;flex-direction:column;align-items:stretch;gap:0;}
  nav.main.open {display:flex;}
  nav.main a {padding:.62rem .65rem;}
  nav.main .nav-contact {margin-top:.5rem;text-align:center;}
  nav.main .lang-switch {margin-top:.6rem;padding:.7rem;justify-content:center;align-self:stretch;}
  nav.main .lang-switch a {padding:.25rem .4rem;}
}
@media(max-width:720px) {
  .hero {padding:3.2rem 0 4rem;}
  .hero h1 {font-size:clamp(2.5rem,10vw,3.45rem);}
  .hero-facts {gap:.55rem;margin-bottom:2rem;}
  .hero-facts span {padding:.1rem .65rem 0 0;border:0;}
  .feature-three,.interface-grid {grid-template-columns:1fr;}
  .interface-art {min-height:245px;}
  .phone-image .app-device {height:350px;}
  .zoom-btn {display:grid;}
  .interface-image figcaption {flex-wrap:wrap;}
}

@media (prefers-reduced-motion:reduce) {
  .app-screen,.app-hotspot,.screen-view,.screen-hotspot {transition:none;}
}

/* Gerçek uygulama ekranı ve üç örnek alarm bildirimi. */
.app-card {
  display:flex;
  flex-direction:column;
}
.app-card .app-visual {
  order:3;
  min-height:450px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.1rem;
  background:radial-gradient(
    ellipse at 74% 45%,
    rgba(56,161,193,.22),
    transparent 63%
  );
}
.app-card .app-visual img {
  display:block;width:auto;height:415px;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 16px 24px rgba(0,6,18,.3));
}
.app-card .notif-layer {
  order:2;
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  transform:none;
  width:auto;
  padding:1.2rem 1rem 0;
  margin-bottom:-5px;
  z-index:5;
  align-items:stretch;
  gap:.75rem;
}
.app-card .notif-layer .notif {
  width:100%;max-width:none;padding:.65rem .7rem;min-height:69px;
}
.app-card .n-ico {width:32px;height:32px;}
.app-card .n-ico svg {width:21px;height:21px;}
.app-card .n-title {font-size:.79rem;}
.app-card .n-time {font-size:.64rem;}
.app-card .n-body {font-size:.76rem;}
.app-card .n-ico.battery {background:linear-gradient(145deg,#be8634,#8d5e1d);}
.app-card .n-ico.bilge {background:linear-gradient(145deg,#257dab,#175977);}
.app-card .n-ico.fire {background:linear-gradient(145deg,#dc624b,#a7362d);}
@media (prefers-reduced-motion: no-preference) {
  .app-card .notif-layer .notif:nth-of-type(3) {animation-delay:1.8s;}
}
@media(max-width:950px) and (min-width:721px) {
  .hero-duo {grid-template-columns:1fr;}
  .app-card .app-visual {padding-left:28%;}
  .app-card .notif-layer {left:12%;}
}
@media(max-width:720px) {

  .app-card {
    display: flex;
    flex-direction: column;
  }

  .app-card .app-visual {
    order: 3;
    min-height: 0;
    padding: 1.3rem 1rem .8rem;
  }

  .app-card .app-visual img {
    height: min(380px,96vw);
  }

  .app-card .notif-layer {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 1.2rem 1rem 0;
    gap: .65rem;
    margin-bottom: -5px;
    z-index: 5;
  }

  .app-card .notif-layer .notif {
    min-height: 0;
  }

}

/* Contact form delivery states and bot trap. */
.contact-hp {
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.form-status.is-error {color:#b42318;}
.btn-submit:disabled {opacity:.72;cursor:wait;}