/* /public_html/assets/pb19-layout.css */
/* PB19 Layout — SINGLE SOURCE OF TRUTH (NO-SCROLL / FIXED FRAME)
   - Zero scroll (fixed frame)
   - Stable topbar/footer
   - Deterministic layouts:
     * Home: 2 cards (portrait stack / landscape side-by-side)
     * Portal: always side-by-side (even phone portrait)
     * Contact/Admin: single panel variants
*/

:root{
  --pb19-bg1:#0b1220;
  --pb19-bg2:#071018;

  --pb19-accent:#57a4ff;

  --pb19-radius:22px;
  --pb19-gap:18px;
  --pb19-pad:26px;

  --pb19-logo-h:72px;
  --pb19-topbar-h:82px;
  --pb19-foot-h:64px;          /* ✅ küçük ve standart */

  --pb19-panel-w:1120px;
  --pb19-single-w: calc((var(--pb19-panel-w) - var(--pb19-gap)) / 2);

  --pb19-safe-top: env(safe-area-inset-top, 0px);
  --pb19-safe-bot: env(safe-area-inset-bottom, 0px);

  /* Frame (dış çerçeve) inset */
  --pb19-frame-x: clamp(14px, 3.2vw, 22px);
  --pb19-frame-y: clamp(12px, 2.0vh, 18px);

  /* Stage padding (kutular büyüsün diye dikey biraz sıkı) */
  --pb19-stage-pad-y: clamp(10px, 1.4vh, 14px);
}

/* Reset */
*, *::before, *::after{ box-sizing:border-box; }

html, body{
  height:100% !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scrollbar-width:none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; }

body{
  position:fixed;
  inset:0;
  color:#fff;
  background:
    radial-gradient(1100px 600px at 15% 10%, rgba(87,164,255,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(0,255,180,.10), transparent 55%),
    radial-gradient(900px 500px at 50% 100%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, var(--pb19-bg1), var(--pb19-bg2));
}

/* App container (full viewport) */
.pb19-container{
  position:fixed;
  inset:0;
  width:100%;
  height:100svh;
  height:100dvh;
  margin:0;
  padding:0;
  overflow:hidden !important;
}

.pb19-shell{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden !important;
}

/* =========================================================
   BASE (works even without pb19-frame)
   ========================================================= */

/* Topbar */
.pb19-topbar{
  position:fixed;
  left:0; right:0; top:0;

  height: calc(var(--pb19-topbar-h) + var(--pb19-safe-top));
  padding-top: var(--pb19-safe-top);
  padding-inline: var(--pb19-pad);

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;

  z-index:50000;
  isolation:isolate;
  overflow:visible;
  pointer-events:auto;
}

.pb19-leftbar,
.pb19-rightbar{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  height:100%;
}
.pb19-leftbar{ justify-content:flex-start; }
.pb19-rightbar{ justify-content:flex-end; }

.pb19-logo-center{
  justify-self:center;
  display:inline-flex;
  position:relative;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-width:0;
  cursor: default;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.pb19-logo-center img{ pointer-events:none; }

.pb19-headmark{
  height: var(--pb19-logo-h);
  width:auto;
  max-width:100%;
  display:block;
  user-select:none;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.45));
}

/* Footer */
.pb19-foot{
  position:fixed;
  left:0; right:0; bottom:0;

  height: calc(var(--pb19-foot-h) + var(--pb19-safe-bot));
  padding: 0 10px var(--pb19-safe-bot);

  display:flex;
  align-items:center;
  justify-content:center;

  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.68);
  line-height: 1;

  z-index:40000;
  overflow:hidden !important;
}
.pb19-foot-left,
.pb19-foot-right{ display:none !important; }
.pb19-foot-center{
  width:100%;
  text-align:center;
  white-space:nowrap;
}

/* Stage (between topbar & footer) */
.pb19-stage{
  position:fixed;
  left:0; right:0;
  top: calc(var(--pb19-topbar-h) + var(--pb19-safe-top));
  bottom: calc(var(--pb19-foot-h) + var(--pb19-safe-bot));

  padding: var(--pb19-pad);

  display:flex;
  align-items:stretch;
  justify-content:center;

  overflow:hidden !important;
}

/* Panel (wrapper) */
.pb19-panel{
  width: min(var(--pb19-panel-w), 100%) !important;
  height: 100% !important;
  min-height:0;

  padding: var(--pb19-gap);
  overflow:hidden !important;
  display:flex;
}

.pb19-panel.is-single{
  width: min(var(--pb19-page-w, var(--pb19-single-w)), 100%);
  max-width: var(--pb19-page-w, var(--pb19-single-w));
}

.pb19-panel > *{ flex:1; min-height:0; }

/* Cards */
.pb19-card{
  position:relative;
  min-height:0;
  min-width:0;

  border-radius: var(--pb19-radius);
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: clamp(14px, 2.2vw, 22px);

  overflow:hidden !important;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Grid primitives */
.pb19-panel-grid,
.pb19-portal-grid,
.pb19-admin-grid{
  width:100%;
  height:100%;
  min-height:0;

  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: var(--pb19-gap);
  align-items:stretch;
}
.pb19-panel-grid > .pb19-card,
.pb19-portal-grid > .pb19-card,
.pb19-admin-grid > .pb19-card{ height:100%; min-height:0; }

.pb19-panel-single{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
}
.pb19-panel-single > .pb19-card{ width:100%; height:100%; min-height:0; }

/* Responsive */
@media (max-width: 900px) and (orientation:portrait){
  :root{
    --pb19-pad:16px;
    --pb19-gap:14px;
    --pb19-logo-h:60px;
    --pb19-topbar-h:76px;
    --pb19-foot-h:54px;
  }

  /* Home/Admin stack */
  .pb19-panel-grid,
  .pb19-admin-grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Portal stacks in portrait (readability on phones) */
  .pb19-portal-grid{
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) and (orientation:landscape){
  :root{
    --pb19-pad:12px;
    --pb19-gap:12px;
    --pb19-logo-h:50px;
    --pb19-topbar-h:64px;
    --pb19-foot-h:44px;
    --pb19-stage-pad-y: 8px;
  }
}

@media (max-width:420px) and (orientation:portrait){
  :root{
    --pb19-pad:12px;
    --pb19-gap:12px;
    --pb19-logo-h:52px;
    --pb19-topbar-h:68px;
    --pb19-foot-h:48px;
  }
  .pb19-foot-center{ white-space:normal; }
}

@media (max-width: 900px) and (orientation:landscape) and (max-height:520px){
  :root{
    --pb19-pad:10px;
    --pb19-gap:10px;
    --pb19-topbar-h:56px;
    --pb19-foot-h:42px;
    --pb19-logo-h:42px;
    --pb19-radius:18px;
    --pb19-stage-pad-y: 6px;
  }
  .pb19-card{ padding:12px !important; }
}

@media (min-width:900px) and (max-width:1280px){
  :root{
    --pb19-pad:18px;
    --pb19-gap:16px;
    --pb19-logo-h:64px;
    --pb19-topbar-h:78px;
    --pb19-foot-h:58px;
  }
}

/* Admin hooks */
body.pb19-admin .pb19-card{ justify-content:flex-start; }

/* =========================================================
   PB19 FRAME MODE
   Aktif etmek için: <body class="... pb19-frame">
   - dış çerçeve + logo boşluğu dengeli
   - footer frame içinde en altta
   ========================================================= */

body.pb19-frame{
  --pb19-frame-w: min(var(--pb19-page-w, var(--pb19-panel-w)), calc(100% - (2 * var(--pb19-frame-x))));
  /* outer-frame radius (override for full-bleed / radius-0 modes) */
  --pb19-frame-r: var(--pb19-radius);
}

/* Tek dış çerçeve (glass) */
body.pb19-frame .pb19-shell::before{
  content:"";
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  top: var(--pb19-frame-y);
  bottom: var(--pb19-frame-y);
  width: var(--pb19-frame-w);

  border-radius: var(--pb19-frame-r, var(--pb19-radius));
  background: rgba(10,16,26,.62);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  pointer-events:none;
  z-index: 1;
}

/* Topbar frame içine */
body.pb19-frame .pb19-topbar{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width: var(--pb19-frame-w) !important;

  top: var(--pb19-frame-y) !important;
  z-index: 50000 !important;
}

/* Footer frame içine */
body.pb19-frame .pb19-foot{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width: var(--pb19-frame-w) !important;

  bottom: var(--pb19-frame-y) !important;

  background: transparent !important;
  z-index: 40000 !important;
}

/* Stage frame içinde kalan alan */
body.pb19-frame .pb19-stage{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width: var(--pb19-frame-w) !important;

  top: calc(var(--pb19-frame-y) + var(--pb19-topbar-h) + var(--pb19-safe-top)) !important;
  bottom: calc(var(--pb19-frame-y) + var(--pb19-foot-h) + var(--pb19-safe-bot)) !important;

  padding: var(--pb19-stage-pad-y) var(--pb19-pad) !important;

  z-index: 2 !important;
}

/* Panel dış çerçeve değil artık: sadece wrapper */
body.pb19-frame .pb19-panel{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  width:100% !important;
  padding: 0 !important;
}


/* Ultra-short landscape: maximize usable height (footer to screen bottom) */
@media (orientation:landscape) and (max-height: 520px){
  :root{
    --pb19-frame-y: 0px;        /* remove vertical frame margin */
    --pb19-frame-x: 14px;       /* keep small side margin */
    --pb19-topbar-h: 64px;
    --pb19-foot-h: 28px;        /* smaller footer */
    --pb19-pad: 10px;
    --pb19-gap: 10px;
  }
  body.pb19-frame .pb19-foot{
    border-top-color: transparent; /* remove “underline” feel */
    font-size: 12px;
  }
  /* Let the panel use full height; footer overlays (does not shrink content) */
  body.pb19-frame .pb19-stage{ bottom: var(--pb19-safe-bot); }
  body.pb19-frame .pb19-panel{
    height: calc(100dvh - var(--pb19-topbar-h) - (var(--pb19-frame-y) * 2) - var(--pb19-safe-top) - var(--pb19-safe-bot));
  }

}

/* Extremely small landscape (older phones) */
@media (orientation:landscape) and (max-height: 420px){
  :root{
    --pb19-frame-x: 10px;
    --pb19-topbar-h: 58px;
    --pb19-foot-h: 26px;
    --pb19-pad: 8px;
    --pb19-gap: 8px;
  }
}

/* =========================================================
   FIX: Contact page must be 1x1 grid (no empty second row on portrait)
   ========================================================= */
body.pb19-contact .pb19-panel-grid{
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}


/* Footer links */
.pb19-foot-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.pb19-foot-brand{ opacity:.86; }
.pb19-foot-sep{ opacity:.35; }
.pb19-foot-link{
  color: rgba(255,255,255,.78);
  text-decoration:none;
}
.pb19-foot-link:hover{ text-decoration:underline; }


@media (max-width:360px){
  .pb19-foot-link--privacy, .pb19-foot-sep--privacy{ display:none; }
}
@media (max-width:320px){
  .pb19-foot-link--docs, .pb19-foot-sep--docs{ display:none; }
}

/* Back button inside footer (compact, PB19-themed) */
.pb19-foot .pb19-backbtn{
  position:absolute;
  right:16px; /* slightly inset from edge */
  bottom: calc(8px + var(--pb19-safe-bot));
  width:34px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(0,90,90,.55), rgba(11,18,32,.92));
  border: 1px solid rgba(140,255,235,.22);
  color: rgba(234,242,255,.94);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.pb19-foot .pb19-backbtn:hover{
  border-color: rgba(140,255,235,.34);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.pb19-foot .pb19-backbtn:active{ transform: translateY(1px); }
.pb19-foot .pb19-backbtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px rgba(140,255,235,.42), 0 0 0 6px rgba(140,255,235,.12), 0 8px 22px rgba(0,0,0,.45);
}
@media (max-width:420px){
  .pb19-foot .pb19-backbtn{ width:32px; height:26px; right:10px; }
}