/* ==========================================================================
   Gravitas Digital — global styles
   Ported 1:1 from the "Gravitas Digital.dc.html" design canvas <helmet> block.
   Layout and colour live inline on the elements (as in the canvas document) so
   this file only carries what an inline style cannot express: resets, keyframes,
   state selectors and the hover/focus rules the canvas wrote as `style-hover`.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #F6F6F3; overscroll-behavior: none; }
html { scroll-behavior: auto; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background: #B80C09; color: #ffffff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F6F6F3; }
::-webkit-scrollbar-thumb { background: #d6d6cf; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #c2c2b9; }

/* ---- keyframes ---------------------------------------------------------- */
@keyframes gd-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gd-scrolldot { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } }
@keyframes gd-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }
@keyframes gd-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-modalin { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes gd-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes popspin { to { transform: rotate(360deg); } }

/* CRT tube turn-off used when the work panel closes */
@keyframes gd-crtoff {
  0%   { transform: scale(1, 1);         filter: brightness(1);   opacity: 1; }
  55%  { transform: scale(1, 0.012);     filter: brightness(2.2); opacity: 1; }
  78%  { transform: scale(0.4, 0.006);   filter: brightness(3);   opacity: 1; }
  100% { transform: scale(0.004, 0.004); filter: brightness(4);   opacity: 0.85; }
}

/* ---- scroll reveal ------------------------------------------------------ */
/* elements ship with their own opacity/transform inline; JS stamps data-in */
[data-reveal][data-in] { opacity: 1 !important; transform: none !important; }

/* ---- work panel (pop) --------------------------------------------------- */
[data-pop-item] { opacity: 0; transform: translateY(15px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
#pop-screen.is-revealed [data-pop-item] { opacity: 1; transform: none; }

/* ---- teklif formu (morph popup) ----------------------------------------- */
/* [data-pop-item] taban kuralı yukarıda, iki popup da onu paylaşıyor */
#form-pop-screen.is-revealed [data-pop-item] { opacity: 1; transform: none; }
.pop-close-btn:hover  { transform: scale(1.08) !important; }
.pop-close-btn:active { transform: scale(0.9) !important; }
/* dar ekranda tek sütun */
@media (max-width: 759px) { #form-pop-grid { grid-template-columns: 1fr !important; gap: 26px !important; } }

[data-plink] { border-left: 3px solid transparent; }
[data-plink][data-on="1"] { color: #B80C09 !important; border-left: 3px solid #B80C09; padding-left: 12px !important; background: rgba(184,12,9,0.04); }

/* --- önizleme cihazları ------------------------------------------------- */
/* İçerik her iki modda da [data-screen] içinde yaşar; iframe cihazın gerçek
   mantıksal genişliğinde (masaüstü 1280px, mobil 430px) render edilip
   scale() ile küçültülür, böylece site/menü o cihazdaki kırılma noktalarını
   kullanır — sadece kutu daraltılmış olmaz. */
[data-frame-box] { position: relative; }
[data-frame-box] [data-screen] { position: absolute; overflow: hidden; background: #ffffff; }

[data-frame-box="desktop"] {
  aspect-ratio: 16 / 10;
  border: 1px solid #dcdcd4;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 44px -22px rgba(13,13,13,0.35);
}
[data-frame-box="desktop"] [data-screen] { inset: 0; }

/* iPhone 15 Plus — gövde 77.8 × 160.9 mm, ekran 430 × 932 pt,
   Dynamic Island 125 × 36 pt. Oranlar bu ölçülerden türetildi. */
[data-frame-box="mobile"] {
  aspect-ratio: 77.8 / 160.9;
  height: min(620px, 56vh);   /* pencere kaydırma gerektirmeden sığsın */
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(155deg, #4a4a4d 0%, #1c1c1e 34%, #232326 68%, #48484b 100%);
  border-radius: 46px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 26px 60px -26px rgba(13,13,13,0.55);
}
[data-frame-box="mobile"] [data-screen] { inset: 9px; border-radius: 38px; }

/* yan tuşlar: solda ses, sağda güç */
[data-frame-box="mobile"]::before,
[data-frame-box="mobile"]::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: #46464a;
}
[data-frame-box="mobile"]::before { left: -2px; top: 26%; height: 12%; }
[data-frame-box="mobile"]::after  { right: -2px; top: 30%; height: 9%; }

/* Yuvarlak köşe kırpması: overflow:hidden + border-radius, ayrı compositing
   katmanına alınmış çocukları GPU'lu çizimde (Safari, Chrome) her zaman
   kırpmıyor. Yükleme sırasında solan kaplama, dönen spinner ve scale()'li
   iframe köşelerden taşıyıp ekranı keskin köşeli gösteriyordu. clip-path
   tüm alt katmanları keser; maske Safari'yi aynı kırpmaya zorlar. */
[data-frame-box] [data-screen] {
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
[data-frame-box="mobile"] [data-screen] { clip-path: inset(0 round 38px); }
/* masaüstü kutusu 16px yarıçap + 1px kenarlık → iç yarıçap 15px */
[data-frame-box="desktop"] [data-screen] { border-radius: 15px; clip-path: inset(0 round 15px); }

/* önizleme kutularında kaydırma çubuğu görünmesin */
[data-frame-box] [data-screen] { scrollbar-width: none; }
[data-frame-box] [data-screen]::-webkit-scrollbar { display: none; }

/* ---- pricing controls --------------------------------------------------- */
[data-pill] { background: transparent; color: #6c6c66; border-color: rgba(0,0,0,0.16); }
[data-pill][data-on="1"] { background: #0d0d0d; color: #f4f4f2; border-color: #0d0d0d; }

[data-switch] { background: #dcdcd4; }
[data-switch][data-on="1"] { background: #0d0d0d; }
[data-switch] > span { transform: translateX(0); }
[data-switch][data-on="1"] > span { transform: translateX(24px); }

[data-bill-label][data-on="1"] { color: #0d0d0d; }
[data-bill-label][data-on="0"] { color: #a3a39b; }

/* ---- hover / focus (canvas `style-hover` + `style-focus` attributes) ----- */
.gd-navlink:hover     { color: #f4f4f2 !important; }
.gd-navbtn:hover      { color: #f4f4f2 !important; background: rgba(255,255,255,0.08) !important; }
.gd-btn-white:hover   { background: #ffffff !important; }
.gd-btn-dark:hover    { background: #2a2a2a !important; }
.gd-btn-ghost:hover   { border-color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.02) !important; }
.gd-work-card:hover   { background: #121212 !important; border-color: rgba(255,255,255,0.22) !important; }
.gd-client-img:hover  { opacity: 0.85 !important; }
.gd-team-tel:hover    { border-color: rgba(0,0,0,0.4) !important; background: rgba(0,0,0,0.03) !important; }
.gd-contact-link:hover { color: #B80C09 !important; }
.gd-input:focus       { border-color: #B80C09 !important; }
.gd-foot-soc:hover    { color: #f4f4f2 !important; border-color: rgba(255,255,255,0.32) !important; background: rgba(255,255,255,0.05) !important; transform: translateY(-2px); }
.gd-foot-link:hover   { color: #f4f4f2 !important; }
.gd-pop-close:hover   { transform: scale(1.08); }

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #pop-screen, #pop-inner, #pop-backdrop, [data-pop-item],
  #form-pop-screen, #form-pop-inner, #form-pop-backdrop { transition: none !important; }
  [data-pop-item] { opacity: 1 !important; transform: none !important; }
}

/* şeritte şubeli girdi: logo | çizgi | şube adı — hover bütün birimi kaldırır */
/* çözüm kartı figürü: kartın üzerine gelince tabandan hafifçe büyür.
   `scale` ayrı özellik olduğu için JS'in her karede yazdığı transform'la
   çakışmaz; köken tabanda, bel kesimi çizgide kalır. */
.gd-peep { transition: scale .55s cubic-bezier(.22,1,.36,1); }
.gd-work-card:hover .gd-peep { scale: 1.05; }
@media (prefers-reduced-motion: reduce) { .gd-peep { transition: none; } }

.gd-client-unit:hover .gd-client-img,
.gd-client-unit:hover .gd-client-word { opacity: 0.85 !important; }

/* pop-up: pencere içeriğe göre boyutlandığı için normalde kaymaz;
   çok kısa ekranlarda kayar ama çubuk görünmez */
#pop-inner { scrollbar-width: none; -ms-overflow-style: none; }
#pop-inner::-webkit-scrollbar { display: none; }