/* ======================= Base ======================= */
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{margin:0;padding:0;box-sizing:border-box;text-decoration:none}
html,body{overflow-x:hidden}
body{background:#ffffff;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#000}
img{max-width:100%;height:auto;display:block}
.logo-img{width:150px;height:150px}
.img-portrait{width:280px;height:420px}

/* SR Only */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======================= Color Tokens ======================= */
:root{
  --brand:#2a6f97;
  --brand-700:#1b4e6b;
  --ink:#000;
  --ink-soft:#333;
  --paper:#fff;

  /* Back To Top */
  --btn-bg:#ffffff;
  --btn-fg:var(--brand);
  --btn-border:#cfd8de;
  --btn-border-hover:#9fb3c0;

  /* Section theme defaults (daha koyu tonlar) */
  --section-bg:#fff;           /* fallback */
  --agency-bg:#fff;            /* Agency aynı */
  --ports-bg:#e6ebf5;          /* daha koyu pastel mavi */
  --about-bg:#d9d9d9;          /* daha koyu pastel lila */
  /* Contact: bölüm beyaz kalsın; sadece başlık bantlarını boyayacağız */
  --contact-band:#123a61;      /* koyu lacivert bant rengi */
  --contact-band-text:#ffffff; /* bant yazı rengi */
}

/* ======================= Hero & Nav ======================= */
.head{width:100%;height:90vh;position:relative;overflow:hidden}
.head video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;pointer-events:none;filter:brightness(90%)}
.head::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,.18), transparent)}
.site-nav{max-width:1200px;margin:auto;padding:1rem 4rem;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:10}
.nav-logo{max-width:150px;max-height:150px}
.nav-links{list-style:none;display:flex;align-items:center;gap:2rem}
.nav-links li a{color:#ffffff;transition:.3s ease;outline-offset:4px}
.nav-links li a:hover{color:var(--brand)}
.nav-links li a::after{content:'';display:block;width:0;height:2px;background:var(--brand);transition:width .3s;margin:auto}
.nav-links li a:hover::after{width:90%}
.nav-links a:focus-visible{outline:2px solid #ffffff}

/* ======================= Hamburger (küçük) ======================= */
.nav-toggle{
  display:none;
  border:0;background:rgba(15,31,42,.55);color:#fff;
  font-size:0.25rem;
  line-height:1;padding:0.25rem 0.25rem;border-radius:8px;cursor:pointer;
  backdrop-filter:saturate(100%) blur(6px)
}
.nav-toggle:focus-visible{outline:2px solid #fff}

/* ======================= Headline ======================= */
.head-title{
  font-family:'Libre Franklin',sans-serif;
  margin-top:45vh;margin-left:22vh;
  display:flex;flex-direction:column;justify-content:center;
  color:#ffffff;font-size:1.5rem;text-shadow:2px 2px 4px #000
}
.head-title span{-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #ffffff;text-shadow:none}

/* ======================= Layout ======================= */
.container{
  max-width:1200px;margin:auto;padding:3rem 2rem;margin-top:2rem;
  color:var(--ink);background:var(--section-bg);border-radius:10px;display:grid
}
/* Bölüm bazlı arka planlar */
.container[data-section="agency"]  { --section-bg: var(--agency-bg); }
.container[data-section="ports"]   { --section-bg: var(--ports-bg); }
.container[data-section="about"]   { --section-bg: var(--about-bg); }
/* Contact: bölüm beyaz kalsın */
.container[data-section="contact"] { --section-bg:#fff; }

i{display:inline-block;background:transparent;padding:1rem;color:var(--brand);font-size:2rem;margin-bottom:.25rem;border-radius:5px}
.container h1{font-size:2rem;font-weight:800;margin-bottom:1rem;border-bottom:1px solid var(--brand);color:var(--brand)}
.main-box{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:2rem}
.textbox p{color:var(--ink);font-size:1rem;line-height:1.65}
.textbox a{color:var(--brand);font-weight:600}
.imgbox img{display:block;max-width:500px;max-height:500px;border-radius:8px}

/* ======================= Contact başlık bantları (sadece h4'ler) ======================= */
.container[data-section="contact"] .contact-head,
.container[data-section="contact"] .branch-head{
  background:var(--contact-band);
  color:var(--contact-band-text);
  padding:.55rem .8rem;
  border-radius:10px;
  margin:.75rem 0 .75rem;
  line-height:1.2;
  letter-spacing:.2px;
}
.container[data-section="contact"] .contact-head i,
.container[data-section="contact"] .branch-head i{ color:var(--contact-band-text); }

/* ======================= Buttons & Panels ======================= */
.buttons{margin-top:1rem;gap:.75rem;display:flex;flex-direction:column;align-items:stretch}
.buttons button,
.buttons .iskenderun,.buttons .izmit,.buttons .aliaga,.buttons .mersin,.buttons .eregli,
.buttons .trabzon,.buttons .samsun,.buttons .antalya{
  width:100%;display:block;text-align:left;line-height:1.3;padding:.65rem 1rem;border-radius:10px;cursor:pointer
}
.buttons button{border:none;background:var(--brand);color:#fff;font-size:1rem;transition:.12s ease}
.buttons button:hover{background:var(--brand-700);font-size:1.03rem}
.buttons button:focus-visible{outline:2px solid var(--brand-700)}

.blacksea-div,.medsea-div,.aegeansea-div,.marmarasea-div,.straits-div{
  border-left:3px solid var(--brand);border-radius:5px;padding-left:1rem;display:flex;flex-direction:column;gap:1rem
}
.blacksea-div a,.medsea-div a,.aegeansea-div a,.marmarasea-div a,.straits-div a{color:var(--ink)}

/* ======================= Contacts ======================= */
.contact-box{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.contact-box i{background:transparent;padding:0;color:var(--brand);font-size:1rem;margin-bottom:0}
.headoffice-div{
  border-left:3px solid var(--brand);border-radius:5px;padding-left:1rem;
  display:flex;flex-direction:column;
  background-image:url(images/contact-background.png);background-size:cover;background-repeat:no-repeat;
  display:inline-block
}
.headoffice-div h4{margin-top:1.25rem;margin-bottom:.50rem;color:var(--btn-border)}
.headoffice-div p{color:var(--ink);margin-bottom:.50rem}

/* 🔧 Google Maps iframeleri: %100 genişlik (taşma fix) */
iframe[src*="google.com/maps"]{
  width:100%!important;
  max-width:100%!important;
  display:block;
  border:0;
  border-radius:12px;
  margin:0 0 1rem;
  height:400px;
}

/* ======================= Branch buttons ======================= */
.buttons .iskenderun,.buttons .izmit,.buttons .aliaga,.buttons .mersin,.buttons .eregli,
.buttons .trabzon,.buttons .samsun,.buttons .antalya{
  border:1px solid #000;background:#fff;color:var(--brand);font-size:1rem;transition:.2s ease
}
.buttons .iskenderun:hover,.buttons .izmit:hover,.buttons .aliaga:hover,.buttons .mersin:hover,.buttons .eregli:hover,
.buttons .trabzon:hover,.buttons .samsun:hover,.buttons .antalya:hover{
  background:var(--brand);color:#fff
}
.buttons .iskenderun:focus-visible,.buttons .izmit:focus-visible,.buttons .aliaga:focus-visible,.buttons .mersin:focus-visible,.buttons .eregli:focus-visible,
.buttons .trabzon:focus-visible,.buttons .samsun:focus-visible,.buttons .antalya:focus-visible{
  outline:2px solid var(--brand)
}

/* ======================= Branch panels ======================= */
.iskenderun-div,.izmit-div,.aliaga-div,.mersin-div,.eregli-div,
.trabzon-div,.samsun-div,.antalya-div{
  display:block!important;padding:1rem;margin:.75rem 0 1.25rem;gap:1rem;
  border:1px solid #e5edf2;border-radius:14px;background:#fff;overflow:visible
}
.iskenderun-div iframe,.izmit-div iframe,.aliaga-div iframe,.mersin-div iframe,.eregli-div iframe,
.trabzon-div iframe,.samsun-div iframe,.antalya-div iframe{
  width:100%!important;max-width:100%;height:320px;display:block;border:0;border-radius:12px;margin:0 0 .85rem
}
.iskenderun-div>.branchoffices-div,.izmit-div>.branchoffices-div,.aliaga-div>.branchoffices-div,.mersin-div>.branchoffices-div,.eregli-div>.branchoffices-div,
.trabzon-div>.branchoffices-div,.samsun-div>.branchoffices-div,.antalya-div>.branchoffices-div{
  display:block!important;width:100%;margin:0;color:var(--ink);position:relative;z-index:1
}
.branchoffices-div i{background:transparent;margin:0;padding:0;color:var(--brand);font-size:1rem}
.branchoffices-div h3{margin-top:1.25rem;margin-bottom:.5rem;color:var(--brand)}
.branchoffices-div p{color:var(--ink);margin-bottom:.25rem}

/* ======================= Footer ======================= */
footer{width:100%;min-height:10rem;color:#fff;background:var(--brand)}
.column{max-width:1200px;min-height:10rem;margin:auto;padding:1rem 4rem;display:flex;justify-content:space-between;align-items:center;gap:1.25rem}
.column .social i{color:#fff}
.foot-links{list-style:none;display:flex;align-items:center;gap:2rem}
.foot-links li a{color:#fff;transition:.3s ease}
.foot-links li a:hover{cursor:pointer}
.foot-links a:focus-visible{outline:2px solid #fff}

/* ======================= Back To Top (btnFix) ======================= */
.btnFix{
  position:fixed;
  inset-block-end:max(44px, env(safe-area-inset-bottom));
  inset-inline-end:max(12px, env(safe-area-inset-right));
  min-inline-size:34px; min-block-size:34px;
  padding:.18rem .22rem;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 .8rem/1 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
  color:var(--btn-fg);
  background:rgba(255,255,255,.6);
  border:1px solid rgba(207,216,222,.7);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
  z-index:9999
}
.btnFix i{font-size:1.35rem; line-height:1}
.btnFix:hover{
  color:var(--brand);
  background:rgba(255,255,255,.75);
  border-color:var(--btn-border-hover);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.10)
}
.btnFix:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08)}
.btnFix:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* ======================= Drawer içi Head Office bloğu (sadece hamburger içinde) ======================= */
.drawer-contact{display:none;margin-top:.5rem;padding:.75rem .5rem .9rem;border-top:1px solid rgba(255,255,255,.12);color:#e9f2f8}
.drawer-contact h4{color:#b9d7e8;font-size:1rem;font-weight:700;margin-bottom:.5rem}
.drawer-contact p{display:flex;gap:.5rem;align-items:flex-start;font-size:.95rem;line-height:1.45;color:#e9f2f8;margin:.35rem 0}
.drawer-contact i{padding:0;background:transparent;color:#7fc0df;font-size:1.05rem;margin:0;line-height:1.3}
.drawer-contact a{color:#ffffff;text-decoration:underline;text-underline-offset:2px}

/* ======================= Motion Pref ======================= */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
  .btnFix{transition:none}
}

/* =========================================================
   TELEFON (≤640px)
   ========================================================= */
@media (max-width:640px){
  .head{min-height:40vh;height:auto}
  .site-nav{padding:.5rem .75rem}
  .nav-logo img{width:95px!important;height:auto!important}
  .nav-toggle{display:inline-flex;font-size:1.05rem;padding:.3rem .4rem;border-radius:8px}

  .nav-menu{position:relative}
  .nav-links{
    position:absolute; top:100%; right:0;
    width:min(94vw, 480px);
    background:#0f1f2a; color:#fff;
    border-radius:10px; border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 28px rgba(0,0,0,.28);
    padding:8px; display:flex!important; flex-direction:column; gap:.25rem;
    overflow:hidden; max-height:0; opacity:0; visibility:hidden;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s step-end;
  }
  .site-nav.is-open .nav-links{
    opacity:1; visibility:visible;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s step-start;
  }
  .site-nav.is-open .nav-toggle i::before{content:"\ee49"} /* ri-close-line */

  .nav-links li a{color:#fff;font-size:1rem;padding:.55rem .5rem;border-radius:8px;display:block}
  .nav-links li a:hover{background:rgba(255,255,255,.06)}
  .drawer-contact{display:block}

  .head-title{
    position:absolute;left:16px;right:16px;bottom:9vh;top:auto;margin:0;
    text-align:left;display:flex;align-items:flex-start;
    font-size:1.1rem
  }
  .head-title h1{font-size:1.9rem}
  .head-title p{font-size:1rem}

  .container{padding:1.25rem 1rem 1.6rem;margin-top:1rem;border-radius:12px}
  .container p{font-size:1rem;line-height:1.65;letter-spacing:.1px}
  .container h1{font-size:1.35rem;line-height:1.25;letter-spacing:.2px}
  .container h2{font-size:1.15rem;line-height:1.25}
  .container h3{font-size:1.05rem;line-height:1.25}
  .container h1 i{font-size:1em;margin-right:.35rem}

  .main-box{flex-direction:column;gap:1rem}
  .textbox img,.imgbox img{
    width:100%;max-height:280px;object-fit:cover;object-position:center;border-radius:10px
  }
  .container iframe[src*="google.com/maps"]{
    width:100%!important;display:block;border-radius:10px;margin:.6rem .6rem 1rem;border:0
  }

  footer{display:block;background:var(--brand);color:#fff;min-height:180px;padding:1rem 0 1.25rem;position:relative}
  .foot-links{display:none!important}

  .btnFix{min-inline-size:32px;min-block-size:32px;padding:.16rem .2rem;border-radius:9px}
  .btnFix i{font-size:1.3rem}
}

/* =========================================================
   TABLET (641–1024px)
   ========================================================= */
@media (min-width:641px) and (max-width:1024px){
  .head{height:60vh}
  .site-nav{padding:.6rem 1.25rem;justify-content:space-between}
  .nav-logo{margin:0}
  .nav-logo img{width:110px!important;height:auto!important}

  .nav-toggle{display:none!important}
  .nav-links{
    position:static!important;
    width:auto; max-height:none; opacity:1; visibility:visible;
    display:flex!important; flex-direction:row; gap:1.25rem;
    background:transparent; border:0; box-shadow:none; padding:0
  }
  .nav-links li a{color:#fff;font-size:1rem;padding:0}

  .drawer-contact{display:none!important}

  .head-title{
    position:absolute;left:20px;right:20px;bottom:12vh;top:auto;margin:0;
    text-align:left;display:flex;align-items:flex-start;
    font-size:1.25rem
  }
  .head-title h1{font-size:2.2rem}
  .head-title p{font-size:1.1rem}

  .container{
    margin-top:1.25rem;
    padding:2rem 1.5rem;
    border-radius:12px
  }
  .container h1{font-size:1.6rem}
  .textbox p{font-size:1rem}
  .main-box{flex-direction:column;gap:1.25rem}

  .imgbox img,.textbox img{
    width:100%;max-height:380px;object-fit:cover;object-position:center;border-radius:10px
  }

  .foot-links{display:none!important}
  .column{padding:1rem 1.5rem;align-items:center}
}

/* ======================= Küçük telefon (≤480px) ======================= */
@media (max-width:480px){
  .nav-logo img{width:88px!important}
  .head{min-height:34vh}
  .head-title h1{font-size:1.7rem}
  .head-title p{font-size:.98rem}
}

/* ======================= Çok küçük telefon (≤360px) ======================= */
@media (max-width:360px){
  .nav-logo img{width:80px!important}
  .head{min-height:30vh}
  .head-title{bottom:8vh}
  .head-title h1{font-size:1.55rem}
  .head-title p{font-size:.95rem}
}

/* ======================= Desktop (≥1025px) ======================= */
@media (min-width:1025px){
  .nav-toggle{display:none}
  .nav-links{
    position:static;height:auto;width:auto;transform:none;display:flex;gap:2rem;background:transparent;padding:0;border:0;box-shadow:none;opacity:1;visibility:visible;max-height:none
  }
  .drawer-contact{display:none}
}