/* Tema "liman": lacivert gece limanı, işaret kırmızısı, pirinç; fener ışığı, işaret sancakları, halat, konteyner istifi, lombar, seyir haritası */
:root{
  --navy:#0a1a30;--navy-2:#102745;--navy-3:#17345a;--red:#d7262e;--red-2:#b81d25;--brass:#c9a24a;--brass-2:#e4c77f;
  --ice:#eef3f8;--steel:#dde4ec;--ink:#0d1b2e;--ink-2:#4a5a70;--bg:#fff;
  --f-head:"Alfa Slab One",Georgia,serif;--f-slab:"Roboto Slab",Georgia,serif;--f-body:"Work Sans",system-ui,sans-serif;
  --rope:repeating-linear-gradient(-62deg,#9c7431 0 5px,#e4c77f 5px 8px,#b98d3e 8px 11px,#7a5a24 11px 13px);
}
::selection{background:var(--red);color:#fff}
body{background:var(--bg)}
.progress{background:var(--brass);height:4px}
.red{color:var(--red)}
.brass{color:var(--brass-2)}

/* Butonlar */
.btn{border-radius:8px;letter-spacing:.01em}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 26px -12px rgba(215,38,46,.9)}
.btn-red:hover,.btn-wa:hover{transform:translateY(-3px)}
.btn-red:hover{background:var(--red-2)}

/* Üst menü */
.top{color:#fff}
.top.scrolled{background:rgba(10,26,48,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 2px 0 rgba(201,162,74,.35)}
.logo{font-family:var(--f-head);font-weight:400;letter-spacing:.01em}
.logo-mark{border-radius:50%;color:#fff;background:radial-gradient(circle,var(--navy) 0 47%,transparent 48%),conic-gradient(var(--red) 0 45deg,#fff 0 90deg,var(--red) 0 135deg,#fff 0 180deg,var(--red) 0 225deg,#fff 0 270deg,var(--red) 0 315deg,#fff 0);box-shadow:0 0 0 2px var(--brass);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.logo-mark svg{width:17px;height:17px}
.logo:hover .logo-mark{transform:rotate(180deg)}
.nav a.link{color:#c9d4e3;position:relative;transition:color .3s}
.nav a.link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brass);transform:scaleX(0);transition:transform .35s}
.nav a.link:hover{color:#fff}
.nav a.link:hover::after{transform:none}
.top .btn-call{background:var(--red);color:#fff;padding:11px 18px;font-size:.92rem;border-radius:99px}

/* Bölüm başlıkları */
.sec{padding:110px 0}
.sec-head{max-width:780px;margin-bottom:54px}
.sec-head h2,.intro-head h2{font-family:var(--f-head);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;margin-top:14px;color:var(--navy)}
.sec-head p{color:var(--ink-2);margin-top:16px;font-size:1.06rem}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-slab);font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0 34%,transparent 36%),conic-gradient(var(--red) 0 90deg,#fff 0 180deg,var(--red) 0 270deg,#fff 0);box-shadow:0 0 0 1.5px var(--red)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;padding:190px 0 120px;overflow:hidden;color:#fff;background:radial-gradient(1000px 600px at 78% 10%,#1d3f6b,transparent 70%),radial-gradient(700px 500px at 0% 100%,#132e52,transparent 70%),var(--navy);display:flex;flex-direction:column;justify-content:center}
.stars{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 22% 40%,#fff,transparent),radial-gradient(1.5px 1.5px at 36% 12%,#fff,transparent),
  radial-gradient(1px 1px at 48% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 63% 22%,#fff,transparent),radial-gradient(1px 1px at 72% 48%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 86% 14%,#fff,transparent),radial-gradient(1px 1px at 93% 36%,#fff,transparent),radial-gradient(1px 1px at 6% 62%,#fff,transparent),radial-gradient(1px 1px at 55% 60%,#fff,transparent);
  opacity:.55;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.25}}

/* İşaret sancakları dizisi */
.bunting{--sag:30px;position:relative;display:flex;padding:0 3vw;pointer-events:auto}
.bunting-line{position:absolute;left:3vw;top:0;width:calc(100% - 6vw);height:var(--sag);overflow:visible}
.bunting-line path{stroke:var(--brass);stroke-width:1.6}
.flag{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--y) * var(--sag))}
.flag svg{width:min(78%,46px);height:auto;aspect-ratio:3/2;transform-origin:50% 0;animation:sway 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.31s);filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.flag::after{content:attr(data-l);font:700 .68rem var(--f-slab);color:var(--brass-2);opacity:.75;margin-top:4px;letter-spacing:.1em}
.flag.gap::after{content:none}
@keyframes sway{0%,100%{transform:rotate(-6deg) skewY(-2deg)}50%{transform:rotate(6deg) skewY(2deg)}}
.top-flags{position:absolute;top:84px;left:0;right:0;z-index:3}

/* Fener */
.lh{position:absolute;z-index:1;left:max(1vw,calc(50% - 700px));bottom:56px;height:min(62vh,540px);aspect-ratio:120/400}
.lh-svg{width:100%;height:100%;display:block;overflow:visible;position:relative;z-index:1}
.lh::before{content:"";position:absolute;left:50%;top:21.5%;width:150px;height:150px;margin:-75px;border-radius:50%;background:radial-gradient(circle,rgba(255,232,163,.75),rgba(255,232,163,0) 65%);animation:glow 10s linear infinite;z-index:2;pointer-events:none}
@keyframes glow{0%,50%,100%{opacity:.35;transform:scale(.8)}12%,62%{opacity:1;transform:scale(1.2)}}
.beam{position:absolute;left:50%;top:21.5%;width:0;height:0;animation:sweep 10s linear infinite;z-index:0;pointer-events:none}
.beam::before,.beam::after{content:"";position:absolute;left:0;top:-110px;width:170vw;height:220px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,232,163,.5),rgba(255,232,163,.14) 40%,rgba(255,232,163,0) 72%);clip-path:polygon(0 48%,100% 0,100% 100%,0 52%);mix-blend-mode:screen}
.beam::after{transform:rotate(180deg)}
@keyframes sweep{from{transform:rotate(-30deg)}to{transform:rotate(330deg)}}

.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:60px;align-items:center}
.hero-txt{padding-left:clamp(0px,14vw - 60px,150px)}
.kicker{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-slab);font-weight:500;font-size:.95rem;color:#c9d4e3;letter-spacing:.04em}
.ring{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,var(--navy) 0 40%,transparent 42%),conic-gradient(var(--red) 0 90deg,#fff 0 180deg,var(--red) 0 270deg,#fff 0);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{margin:20px 0 26px}
.h1-a{display:block;font-family:var(--f-head);font-weight:400;font-size:clamp(3.6rem,9.4vw,8.4rem);line-height:.95;letter-spacing:.01em;text-shadow:5px 5px 0 var(--red)}
.h1-b{display:block;margin-top:14px;font-family:var(--f-slab);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.6rem);color:var(--brass-2);text-transform:uppercase;letter-spacing:.07em;line-height:1.15}
.lead{font-size:1.1rem;color:#c4cfdd;max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.badges{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:#dfe6ef}
.badges li{display:flex;align-items:center;gap:8px}
.badges svg{width:18px;height:18px;color:var(--brass)}

.plate{position:relative;margin:0;padding:16px;border-radius:12px;background:radial-gradient(circle,#d9b866 0 2.6px,rgba(0,0,0,.4) 3.2px,transparent 3.6px) 3px 3px/24px 24px,linear-gradient(145deg,#24476f,#16304f);box-shadow:0 40px 80px -30px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.08)}
.plate-img{border-radius:6px;overflow:hidden;aspect-ratio:4/5}
.plate-img img{width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.12) translate(-2%,-1%)}}
.rose{position:absolute;top:-38px;right:-34px;width:112px;height:112px;color:var(--brass-2);animation:spin 50s linear infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.rose text{font:700 11px var(--f-slab);fill:var(--navy)}
.manifest{position:absolute;left:-46px;bottom:-34px;width:250px;background:#fff;color:var(--ink);border-radius:8px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.7);transform:rotate(-3deg)}
.manifest b{display:block;background:var(--red);color:#fff;font:700 .72rem var(--f-slab);letter-spacing:.2em;text-transform:uppercase;padding:8px 14px}
.manifest dl{margin:0;padding:10px 14px 12px;display:grid;gap:6px}
.manifest dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed #cfd8e3;padding-bottom:5px;font-size:.84rem}
.manifest dl div:last-child{border:0;padding:0}
.manifest dt{color:var(--ink-2);font-family:var(--f-slab);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.manifest dd{margin:0;font-weight:600;text-align:right}
.quay{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:1;background:radial-gradient(ellipse 13px 9px at 50% 2px,#091425 0 99%,transparent) 0 0/160px 24px repeat-x,linear-gradient(#1c3354,#0c1d35);border-top:3px solid #2c4a70}

/* Halat ayraç */
.rope{display:flex;align-items:center;gap:0;height:44px;background:#0c1d35;padding:0 3vw;overflow:hidden}
.rope.light{background:#fff}
.rope::before,.rope::after{content:"";flex:1;height:10px;border-radius:9px;background:var(--rope);background-size:30px 10px;animation:rope 2.6s linear infinite;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.rope::after{animation-direction:reverse}
@keyframes rope{to{background-position:30px 0}}
.knot{width:120px;height:40px;flex:none;margin:0 -2px}
.knot path{fill:none;stroke:#b98d3e;stroke-width:7;stroke-linecap:round}
.knot path+path{stroke:#e4c77f;stroke-width:5}
.knot circle{fill:var(--red)}

/* ---------- Giriş (seyir defteri) ---------- */
.intro{background:#fff}
.intro-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:start}
.intro-head{position:sticky;top:110px}
.points{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.points li{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;background:var(--ice);font-weight:600;font-size:.93rem;color:var(--navy)}
.points svg{width:40px;height:40px;padding:9px;border-radius:50%;background:var(--navy);color:var(--brass-2)}
.log-entries{display:grid;gap:18px}
.log-entries p{position:relative;padding:28px 26px 24px 30px;border-radius:4px;font-size:1.06rem;color:var(--ink);background:repeating-linear-gradient(transparent 0 31px,#dce5ef 31px 32px),#f8fafc;background-position:0 23px;border-left:4px solid var(--brass);line-height:32px}
.stamp{display:inline-block;margin:0 0 6px;padding:0 10px;font:700 .72rem/24px var(--f-slab);letter-spacing:.2em;text-transform:uppercase;color:var(--red);border:2px solid var(--red);border-radius:4px;transform:rotate(-3deg);float:right;margin-left:14px;background:#fff}

/* ---------- Hizmetler (konteyner istifi) ---------- */
.yard{background:linear-gradient(transparent calc(100% - 70px),#c9d3de calc(100% - 70px)),repeating-linear-gradient(90deg,transparent 0 120px,rgba(255,255,255,.5) 120px 180px) 0 calc(100% - 34px)/100% 4px no-repeat,var(--steel)}
.yard-in{position:relative;padding:118px 30px 0}
.crane{position:absolute;inset:0;pointer-events:none}
.crane::before,.crane::after{content:"";position:absolute;top:0;bottom:-30px;width:16px;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(0,0,0,.25) 6px 8px),var(--red);border-left:3px solid var(--red-2);border-right:3px solid var(--red-2)}
.crane::before{left:0}.crane::after{right:0}
.girder{position:absolute;left:0;right:0;top:0;height:30px;background:repeating-linear-gradient(60deg,transparent 0 12px,var(--red-2) 12px 15px),repeating-linear-gradient(-60deg,transparent 0 12px,var(--red-2) 12px 15px);border-top:5px solid var(--red);border-bottom:5px solid var(--red)}
.trolley{position:absolute;top:24px;left:6%;width:64px;height:24px;border-radius:4px;background:var(--navy);box-shadow:inset 0 -4px 0 var(--brass);animation:trolley 11s ease-in-out infinite alternate}
@keyframes trolley{to{left:calc(94% - 64px)}}
.cable{position:absolute;left:50%;top:100%;width:2px;height:40px;background:#1c2533;animation:cable 3.6s ease-in-out infinite alternate}
.cable::after{content:"";position:absolute;left:50%;bottom:-12px;width:86px;height:12px;margin-left:-43px;background:#f5c518;border:2px solid #1c2533;border-radius:2px}
@keyframes cable{to{height:62px}}
.stack{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
.box{position:relative;perspective:900px;min-height:230px}
.box::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:3px;background:linear-gradient(#1c2533,#1c2533) 0 0/14px 10px no-repeat,linear-gradient(#1c2533,#1c2533) 100% 0/14px 10px no-repeat,linear-gradient(#1c2533,#1c2533) 0 100%/14px 10px no-repeat,linear-gradient(#1c2533,#1c2533) 100% 100%/14px 10px no-repeat}
.box-face{position:relative;height:100%;padding:22px 62px 22px 20px;border-radius:3px;color:#fff;background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 3px,transparent 3px 9px,rgba(0,0,0,.16) 9px 12px,transparent 12px 16px),var(--c);border-top:6px solid rgba(0,0,0,.28);border-bottom:6px solid rgba(0,0,0,.28);box-shadow:0 18px 30px -18px rgba(10,26,48,.7)}
.box-face::after{content:"";position:absolute;right:0;top:0;bottom:0;width:48px;background:linear-gradient(90deg,#0b1220,#26303f)}
.box-door{position:absolute;right:0;top:6px;bottom:6px;width:48px;z-index:2;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 3px,transparent 3px 10px),var(--c);filter:brightness(.82);border-left:2px solid rgba(0,0,0,.3);transform-origin:100% 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1);display:flex;justify-content:space-evenly}
.box-door i{width:3px;background:linear-gradient(transparent 8%,#e8edf3 8% 14%,rgba(255,255,255,.55) 14% 86%,#e8edf3 86% 92%,transparent 92%)}
.box:hover .box-door{transform:rotateY(-78deg)}
.box-code{display:block;font:700 .74rem var(--f-slab);letter-spacing:.16em;opacity:.8}
.box-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:16px 0 14px;background:rgba(255,255,255,.16);transition:transform .5s}
.box:hover .box-ic{transform:rotate(-10deg) scale(1.08)}
.box-ic svg{width:24px;height:24px}
.box h3{font-family:var(--f-slab);font-weight:700;font-size:1.18rem;line-height:1.2;margin-bottom:8px}
.box p{font-size:.92rem;color:rgba(255,255,255,.88);line-height:1.55}

/* Kayan şerit */
.ticker{background:var(--red);color:#fff;padding:16px 0;font-family:var(--f-head);font-size:clamp(1.2rem,2.4vw,1.8rem);text-transform:uppercase;--mq-speed:36s;--mq-gap:26px}
.ticker span{white-space:nowrap}
.ticker i{font-style:normal;color:var(--brass-2);font-family:var(--f-body)}

/* ---------- İşlerimiz (güverte) ---------- */
.deck{background:radial-gradient(800px 400px at 90% 0,#1a3a63,transparent 70%),var(--navy);color:#fff}
.deck .sec-head h2{color:#fff}
.deck .sec-head p{color:#b9c6d8}
.ports{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:40px;align-items:center}
.port{margin:0;text-align:center}
.port.p2{transform:translateY(60px)}
.port-ring{position:relative;aspect-ratio:1;border-radius:50%;padding:8%;container-type:inline-size;background:radial-gradient(circle at 32% 28%,#f7e3a6,#c9a24a 38%,#8a6a26 72%,#5b4417);box-shadow:0 34px 60px -24px #000,inset 0 0 0 3px rgba(0,0,0,.25),inset 0 0 22px rgba(0,0,0,.35);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.port:hover .port-ring{transform:rotate(12deg)}
.port-ring i{position:absolute;z-index:2;left:50%;top:50%;width:5cqw;height:5cqw;margin:-2.5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4cc,#9b7a30 60%,#4d3912);transform:rotate(calc(var(--k) * 360deg / var(--n))) translateY(-46cqw)}
.port-glass{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#05101f;box-shadow:0 0 0 5px #3a2c10}
.port-glass::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 7px rgba(20,20,20,.65),inset 0 0 40px rgba(0,0,0,.6);background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 32%,transparent 70%,rgba(255,255,255,.08))}
.port figcaption{margin-top:18px;font-family:var(--f-slab);font-size:.9rem;color:var(--brass-2)}

.quay-strip{margin-top:130px}
.strip-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px}
.strip-head h3{font-family:var(--f-head);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem)}
.strip-btns{display:flex;gap:10px}
.strip-btns button{width:50px;height:50px;border-radius:50%;border:2px solid var(--brass);background:transparent;color:var(--brass-2);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,transform .4s}
.strip-btns button:hover{background:var(--brass);color:var(--navy);transform:rotate(-20deg)}
.strip-btns svg{width:22px;height:22px}
.cargo{grid-column:1/-1;display:flex;gap:24px;padding:46px 4px 30px;background:var(--rope) 0 6px/30px 10px repeat-x}
.crate{flex:0 0 270px;margin:0;position:relative;background:#f4f6f9;color:var(--ink);padding:10px 10px 14px;border-radius:4px;transform-origin:50% -40px;animation:hang 5s ease-in-out infinite;animation-delay:calc(var(--d) * -1.3s);box-shadow:0 24px 40px -22px #000}
.crate::before{content:"";position:absolute;left:15%;right:15%;bottom:100%;height:36px;background:linear-gradient(to top right,transparent calc(50% - 1px),#c9a24a calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - 1px),#c9a24a calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 100% 0/50% 100% no-repeat}
@keyframes hang{0%,100%{transform:rotate(calc(var(--sw) * 1.4deg))}50%{transform:rotate(calc(var(--sw) * -1.4deg))}}
.crate img{width:100%;height:300px;object-fit:cover;border-radius:2px;pointer-events:none}
.crate figcaption{font-size:.86rem;font-weight:600;margin-top:10px;line-height:1.4}
.crate-tag{position:absolute;top:22px;left:-8px;z-index:1;background:var(--red);color:#fff;font:700 .72rem var(--f-slab);letter-spacing:.14em;text-transform:uppercase;padding:6px 16px 6px 12px;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%)}
.hatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:70px}
.hatch{position:relative;margin:0;aspect-ratio:4/5;padding:12px;border-radius:20px;background:radial-gradient(circle,#d9b866 0 2.4px,transparent 3px) 2px 2px/22px 22px,#1b355b}
.hatch video{border-radius:10px}
.hatch figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:40px 14px 12px;border-radius:0 0 10px 10px;font-size:.84rem;background:linear-gradient(transparent,rgba(0,0,0,.8));pointer-events:none}

/* ---------- Süreç (seyir haritası) ---------- */
.chart-sec{background:var(--navy-2);color:#fff}
.chart-sec .sec-head h2{color:#fff}
.chart-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:50px;align-items:center}
.chart{padding:10px;border-radius:10px;background:#0c2140;border:3px double var(--brass);box-shadow:0 40px 80px -40px #000}
.chart svg{width:100%;height:auto;display:block}
.land{fill:#1b3b64;stroke:var(--brass);stroke-width:1.2}
.iso{fill:none;stroke:rgba(201,162,74,.4);stroke-dasharray:3 5}
.depth text{fill:rgba(228,199,127,.6);font:italic 500 11px var(--f-slab)}
.route-base{fill:none;stroke:rgba(255,255,255,.18);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.route{fill:none;stroke:#ffd36b;stroke-width:5;stroke-dasharray:.1 11;stroke-linecap:round}
.wp circle{fill:var(--navy);stroke:var(--red);stroke-width:3;transition:fill .4s}
.wp text{fill:#fff;font:400 14px var(--f-head);text-anchor:middle}
.wp.on circle{fill:var(--red);stroke:#fff;animation:wpp 1.8s ease-in-out infinite}
@keyframes wpp{50%{stroke-width:7}}
/* rota boyunca giden nakliye kamyonu (sınıf adı liman.js ile ortak) */
.ship path{fill:#fff}.ship rect{fill:var(--red)}.ship circle{fill:#0b1a2e;stroke:#fff;stroke-width:1.5}
.rose2 g{fill:var(--brass);transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
.rose2 circle{stroke:var(--brass);stroke-width:1.2}
.rose2 text{fill:var(--brass-2);font:700 11px var(--f-slab);text-anchor:middle}
.lbl{fill:#fff;font:700 13px var(--f-slab)}
.cap{fill:rgba(255,255,255,.45);font:italic 500 11px var(--f-slab)}
.plan{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:16px 18px;border-radius:10px;border-left:4px solid transparent;transition:background .4s,border-color .4s}
.plan li.on{background:rgba(255,255,255,.06);border-left-color:var(--brass)}
.buoy{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:400 1.05rem var(--f-head);color:var(--navy);background:radial-gradient(circle,#fff 0 46%,transparent 48%),conic-gradient(var(--red) 0 90deg,#fff 0 180deg,var(--red) 0 270deg,#fff 0)}
.plan h3{font-family:var(--f-slab);font-weight:700;font-size:1.15rem;margin:4px 0 6px}
.plan p{color:#b9c6d8;font-size:.95rem;line-height:1.6}

/* ---------- Mahalleler ---------- */
.berths{background:#fff}
.berth-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
.berth{padding:26px;border-radius:14px;background:var(--ice);border-top:6px solid var(--navy)}
.berth+.berth{border-top-color:var(--red)}
.berth-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.berth-head .flag{flex:none;width:46px;margin:0}
.berth-head .flag svg{width:46px;animation-duration:4.5s}
.berth-head .flag::after{content:none}
.berth-head h3{font-family:var(--f-slab);font-weight:700;font-size:1.2rem;color:var(--navy);flex:1}
.cnt{font:400 1.3rem var(--f-head);color:var(--red)}
.hoods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hoods li{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 9px;border-radius:99px;background:#fff;color:var(--navy);font-weight:500;font-size:.95rem;box-shadow:0 1px 0 #d3dce7;cursor:default;transition:background .3s,color .3s,transform .3s}
.hoods i{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle,#fff 0 36%,transparent 38%),conic-gradient(var(--red) 0 90deg,#e9eef4 0 180deg,var(--red) 0 270deg,#e9eef4 0);transition:transform .7s}
.hoods li:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.hoods li:hover i{transform:rotate(270deg)}

/* ---------- SSS + form ---------- */
.duo{background:var(--ice)}
.duo-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.faq details{background:#fff;border-radius:12px;margin-bottom:10px;padding:0 20px;border-left:5px solid var(--navy);transition:border-color .3s}
.faq details[open]{border-left-color:var(--red)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;font-family:var(--f-slab);font-weight:700;font-size:1.04rem;color:var(--navy)}
.pm{flex:none;width:38px;height:38px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='11'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23c9a24a'/%3E%3Cpath d='M20 2v36M2 20h36M7.3 7.3l25.4 25.4M32.7 7.3 7.3 32.7'/%3E%3C/g%3E%3C/svg%3E") center/34px no-repeat;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pm svg{display:none}
.faq summary:hover .pm{transform:rotate(45deg)}
.faq details[open] .pm{transform:rotate(225deg)}
.faq details p{color:var(--ink-2);padding:0 0 20px;animation:fadeup .5s}
@keyframes fadeup{from{opacity:0;transform:translateY(-8px)}}
#teklif{position:sticky;top:100px;scroll-margin-top:100px}
.quote{position:relative;padding:0 28px 26px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(10,26,48,.45)}
.quote::before{content:"";display:block;height:14px;margin:0 -28px 24px;background:repeating-linear-gradient(90deg,var(--red) 0 28px,#fff 28px 34px,var(--navy) 34px 62px,#fff 62px 68px)}
.quote::after{content:"";position:absolute;inset:22px 8px 8px;border:1.5px dashed #d0d9e4;border-radius:10px;pointer-events:none}
.quote h3{font-family:var(--f-head);font-weight:400;font-size:1.7rem;color:var(--navy)}
.quote .sub{color:var(--ink-2);margin:6px 0 20px;font-size:.95rem}
.field{display:block;margin-bottom:14px;position:relative;z-index:1}
.field span{display:block;font:700 .72rem var(--f-slab);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;padding:12px 14px;border-radius:8px;border:2px solid #d3dce7;background:#fff;color:var(--ink);color-scheme:light;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field select:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(16,39,69,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote .btn-wa{width:100%;margin-top:6px;position:relative;z-index:1}
.quote .note{font-size:.8rem;color:var(--ink-2);text-align:center;margin-top:12px}

/* ---------- Son çağrı ---------- */
.final{background:radial-gradient(700px 400px at 50% 120%,#a51a22,transparent 70%),var(--red);color:#fff;text-align:center;padding:20px 0 110px;overflow:hidden;border-top:8px solid var(--navy)}
.final .bunting{padding-top:0}
.final-flags .flag svg{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 8px 10px rgba(0,0,0,.35));outline:2px solid #fff;outline-offset:-1px}
.final-flags{--sag:46px;max-width:760px;margin:0 auto 40px}
.final-flags .flag svg{width:min(60%,96px)}
.final-flags .flag::after{color:#fff;font-size:.85rem}
.final-flags .bunting-line path{stroke:#fff}
.final-in h2{font-family:var(--f-head);font-weight:400;font-size:clamp(2.8rem,8.6vw,6.6rem);line-height:1;text-shadow:5px 5px 0 var(--navy)}
.final-in p{max-width:560px;margin:22px auto 0;font-size:1.1rem;color:#ffe3e4}
.final-phone{display:inline-flex;align-items:center;gap:14px;margin-top:36px;padding:16px 30px;border-radius:99px;background:#fff;color:var(--navy);text-decoration:none;font:400 clamp(1.3rem,3vw,1.9rem) var(--f-head);box-shadow:0 20px 40px -18px rgba(0,0,0,.6);transition:transform .3s,background .3s,color .3s}
.final-phone svg{width:28px;height:28px;color:var(--red)}
.final-phone:hover{transform:translateY(-4px) rotate(-1deg);background:var(--navy);color:#fff}

/* ---------- Alt bilgi ---------- */
.foot{background:var(--rope) 0 0/30px 10px repeat-x,#071425;color:#a9b6c8;padding:80px 0 30px}
.foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.foot .logo{color:#fff;margin-bottom:16px}
.foot p{font-size:.93rem;max-width:380px}
.foot h4{font-family:var(--f-slab);color:var(--brass-2);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:.93rem}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.copy{margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem}
.mbar{background:rgba(10,26,48,.95);backdrop-filter:blur(12px);border-top:2px solid var(--brass)}
.mbar .btn-call{background:var(--red);color:#fff}

/* ---------- Duyarlı ---------- */
@media (max-width:1100px){
  .hero-txt{padding-left:clamp(0px,10vw,120px)}
  .lh{height:min(46vh,420px);opacity:.85}
}
@media (max-width:980px){
  .stack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .chart{position:sticky;top:84px;z-index:2}
  .ports{grid-template-columns:1.3fr 1fr;gap:24px}
  .port.p0{grid-row:span 2}
  .port.p2{transform:none}
}
@media (max-width:900px){
  .top .nav{background:var(--navy);box-shadow:0 2px 0 rgba(201,162,74,.35)}
  .top-flags{top:80px;--sag:18px}
  .hero{min-height:0;padding:150px 0 96px}
  .hero-in,.intro-in,.duo-in,.berth-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-txt{padding-left:0}
  .lh{left:auto;right:6px;bottom:56px;height:250px;opacity:1}
  .plate{width:calc(100% - 84px);max-width:440px;padding:12px}
  .rose{width:84px;height:84px;top:-26px;right:-22px}
  .manifest{position:relative;left:auto;bottom:auto;width:auto;margin:14px 0 0;transform:none}
  .intro-head,#teklif{position:static}
  .sec{padding:80px 0}
  .points{grid-template-columns:1fr}
  .yard-in{padding:96px 0 0}
  .crane::before,.crane::after{display:none}
  .hatches{grid-template-columns:minmax(0,1fr);max-width:420px;margin-left:auto;margin-right:auto}
  .quote{padding:0 18px 22px}
  .quote::before{margin:0 -18px 22px}
  .row2{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;gap:34px}
  .log-entries p{padding:22px 18px 20px 20px;font-size:1rem}
}
@media (max-width:560px){
  .stack{grid-template-columns:minmax(0,1fr)}
  .box{min-height:0}
  .box-ic{margin:10px 0}
  .cta .btn{flex:1 1 140px;padding:15px 14px}
  .ports{grid-template-columns:1fr 1fr;gap:18px}
  .port.p0{grid-column:1/-1;grid-row:auto;max-width:330px;margin:0 auto;width:100%}
  .port figcaption{font-size:.78rem}
  .crate{flex-basis:230px}
  .crate img{height:250px}
  .strip-head h3{font-size:1.5rem}
  .stamp{float:none;display:table}
}