/*! FUL SERVIS — Premium Polish v73
 * SaaS-grade micro-interactions, toast, skeleton, tooltip, empty states,
 * smooth focus rings, refined animations.
 * Mevcut sistem bozulmaz — sadece premium polish katmanı.
 */

:root{
  --t-fast:.12s ease;
  --t-base:.18s ease;
  --t-slow:.32s ease;
  --t-bezier:.25s cubic-bezier(.4,0,.2,1);
  --t-spring:.45s cubic-bezier(.34,1.56,.64,1);

  --sh-glow:0 0 0 4px rgba(27,42,78,.08);
  --sh-card:0 1px 2px rgba(15,26,51,.04),0 4px 12px rgba(15,26,51,.05);
  --sh-card-hover:0 4px 14px rgba(15,26,51,.08),0 16px 32px rgba(15,26,51,.08);
  --sh-floating:0 24px 56px rgba(15,26,51,.18);
}

/* =============================================================
   1. PREMIUM SELECTION COLOR
   ============================================================= */
::selection{background:rgba(201,168,118,.30);color:#0F1A33}
::-moz-selection{background:rgba(201,168,118,.30);color:#0F1A33}

/* =============================================================
   2. PREMIUM FOCUS RING (a11y)
   ============================================================= */
html body :focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(27,42,78,.16) !important;
  border-radius:8px;
}
html body button:focus-visible,
html body a:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(27,42,78,.16) !important;
}

/* =============================================================
   3. CARD MICRO-INTERACTIONS
   ============================================================= */
@media(hover:hover){
  html body .card{
    transition:box-shadow var(--t-bezier), border-color var(--t-bezier), transform var(--t-bezier);
  }
  html body .card:hover{
    box-shadow:var(--sh-card-hover) !important;
    border-color:rgba(201,168,118,.35) !important;
  }
  html body .metric{
    transition:transform var(--t-bezier), box-shadow var(--t-bezier), border-color var(--t-bezier);
  }
  html body .metric:hover{
    transform:translateY(-3px);
    box-shadow:var(--sh-card-hover);
  }
  html body .service-card,
  html body .gallery-cat,
  html body .gallery-item{
    transition:transform var(--t-bezier), box-shadow var(--t-bezier);
  }
  html body .service-card:hover,
  html body .gallery-cat:hover,
  html body .gallery-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--sh-card-hover);
  }
  html body .btn{
    transition:transform var(--t-fast), box-shadow var(--t-bezier), background var(--t-base), border-color var(--t-base), color var(--t-base);
  }
  html body .btn:hover{
    transform:translateY(-1px);
  }
  html body .btn:active{
    transform:translateY(0);
    transition-duration:.05s;
  }
}

/* =============================================================
   4. PREMIUM SCROLLBAR REFINE (desktop)
   ============================================================= */
@media(min-width:768px){
  html body *::-webkit-scrollbar{width:10px;height:10px}
  html body *::-webkit-scrollbar-track{background:transparent}
  html body *::-webkit-scrollbar-thumb{
    background:rgba(15,26,51,.16);
    border-radius:10px;
    border:2px solid transparent;
    background-clip:padding-box;
    transition:background var(--t-base);
  }
  html body *::-webkit-scrollbar-thumb:hover{
    background:rgba(15,26,51,.28);
    background-clip:padding-box;
  }
}

/* =============================================================
   5. TOAST NOTIFICATIONS (window.toast() ile)
   ============================================================= */
.fs-toast-container{
  position:fixed;
  top:16px;
  right:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:99999;
  max-width:calc(100vw - 32px);
  pointer-events:none;
}
@media(max-width:640px){
  .fs-toast-container{
    top:auto;
    bottom:90px;
    left:14px;right:14px;
    max-width:none;
  }
}
.fs-toast{
  background:#fff;
  border:1px solid #E2E6EC;
  border-radius:12px;
  padding:13px 16px 13px 14px;
  box-shadow:var(--sh-floating);
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:280px;
  max-width:380px;
  pointer-events:auto;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  color:#1F2A44;
  line-height:1.5;
  animation:fsToastIn .35s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  overflow:hidden;
}
.fs-toast::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:#1B2A4E;
}
.fs-toast.success::before{background:#1F7A50}
.fs-toast.warn::before{background:#B8740C}
.fs-toast.error::before{background:#B91C1C}
.fs-toast.info::before{background:#1F4FA8}
.fs-toast .fs-toast-icon{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;
  background:#EEF1F7;color:#1B2A4E;
}
.fs-toast.success .fs-toast-icon{background:#E6F2EC;color:#1F7A50}
.fs-toast.warn .fs-toast-icon{background:#FBF1DE;color:#B8740C}
.fs-toast.error .fs-toast-icon{background:#FBEAEA;color:#B91C1C}
.fs-toast.info .fs-toast-icon{background:#E6EEFB;color:#1F4FA8}
.fs-toast-body{flex:1;min-width:0}
.fs-toast-title{font-weight:700;color:#0F1A33;margin:0 0 2px;font-size:14px}
.fs-toast-msg{margin:0;color:#6B7588;font-size:13px;line-height:1.5}
.fs-toast-close{
  flex-shrink:0;
  background:transparent;border:0;
  width:24px;height:24px;
  border-radius:6px;
  color:#9099AC;cursor:pointer;
  display:grid;place-items:center;
  font-size:16px;line-height:1;
  transition:background var(--t-base),color var(--t-base);
  font-family:inherit;
}
.fs-toast-close:hover{background:#EDEFF3;color:#1F2A44}
.fs-toast.fs-toast-out{animation:fsToastOut .25s ease forwards}

@keyframes fsToastIn{
  from{opacity:0;transform:translateX(20px) scale(.95)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes fsToastOut{
  to{opacity:0;transform:translateX(20px) scale(.95)}
}
@media(max-width:640px){
  @keyframes fsToastIn{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes fsToastOut{
    to{opacity:0;transform:translateY(20px)}
  }
}

/* =============================================================
   6. SKELETON LOADER (shimmer effect)
   ============================================================= */
.fs-skeleton{
  display:block;
  background:linear-gradient(90deg, #F0F2F6 0%, #FAFBFC 50%, #F0F2F6 100%);
  background-size:200% 100%;
  border-radius:6px;
  animation:fsShimmer 1.4s ease-in-out infinite;
  color:transparent !important;
  user-select:none;
}
.fs-skeleton-line{height:14px;margin:6px 0}
.fs-skeleton-title{height:22px;width:60%}
.fs-skeleton-circle{border-radius:50%}
.fs-skeleton-card{height:100px;border-radius:12px}

@keyframes fsShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* =============================================================
   7. PREMIUM TOOLTIP (data-tooltip attribute)
   ============================================================= */
[data-tooltip]{
  position:relative;
}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#0F1A33;
  color:#fff;
  font-size:12px;
  font-weight:500;
  padding:6px 10px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:10000;
  box-shadow:0 4px 12px rgba(15,26,51,.20);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 4px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  border:4px solid transparent;
  border-top-color:#0F1A33;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:10000;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media(hover:none){
  [data-tooltip]::after,[data-tooltip]::before{display:none}
}

/* =============================================================
   8. EMPTY STATE POLISH
   ============================================================= */
html body .empty{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:36px 18px !important;
  text-align:center;
  color:#9099AC !important;
  font-size:13.5px !important;
  background:#FAFBFC !important;
  border:1px dashed #CDD3DC !important;
  border-radius:12px !important;
  font-style:normal;
  min-height:120px;
}
html body .empty::before{
  content:"○";
  display:grid;place-items:center;
  width:42px;height:42px;
  background:#EDEFF3;
  border-radius:50%;
  color:#9099AC;
  font-size:18px;
  margin-bottom:4px;
}

/* =============================================================
   9. PREMIUM LOADING SPINNER
   ============================================================= */
.fs-spinner{
  display:inline-block;
  width:18px;height:18px;
  border:2px solid rgba(27,42,78,.18);
  border-top-color:#1B2A4E;
  border-radius:50%;
  animation:fsSpin .7s linear infinite;
  vertical-align:middle;
}
.fs-spinner.lg{width:32px;height:32px;border-width:3px}
.fs-spinner.beige{border-color:rgba(201,168,118,.20);border-top-color:#C9A876}
.fs-spinner.white{border-color:rgba(255,255,255,.30);border-top-color:#fff}

@keyframes fsSpin{
  to{transform:rotate(360deg)}
}

/* Button içinde loading state */
.btn[data-loading="1"]{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.btn[data-loading="1"]::after{
  content:"";
  position:absolute;
  width:18px;height:18px;
  top:50%;left:50%;
  margin-top:-9px;margin-left:-9px;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:fsSpin .7s linear infinite;
}

/* =============================================================
   10. FORM VALIDATION VISUAL STATES
   ============================================================= */
html body input.is-invalid,
html body select.is-invalid,
html body textarea.is-invalid,
html body input:user-invalid,
html body input[aria-invalid="true"],
html body select[aria-invalid="true"],
html body textarea[aria-invalid="true"]{
  border-color:#B91C1C !important;
  background:#FEF7F7 !important;
  box-shadow:0 0 0 3px rgba(185,28,28,.08) !important;
}
html body input.is-valid,
html body input:user-valid:not(:placeholder-shown){
  border-color:#1F7A50 !important;
}

.fs-field-error{
  color:#B91C1C;
  font-size:12.5px;
  font-weight:500;
  margin-top:4px;
  display:flex;align-items:center;gap:5px;
}
.fs-field-error::before{
  content:"!";
  display:grid;place-items:center;
  width:14px;height:14px;
  background:#B91C1C;
  color:#fff;
  border-radius:50%;
  font-size:10px;font-weight:700;
}

/* =============================================================
   11. SMOOTH PAGE TRANSITION
   ============================================================= */
@media(prefers-reduced-motion:no-preference){
  html body main,
  html body .main{
    animation:fsFadeIn .35s ease-out;
  }
}
@keyframes fsFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* =============================================================
   12. PREMIUM CHIPS / BADGES
   ============================================================= */
html body .status-pill{
  transition:transform var(--t-base);
}
@media(hover:hover){
  html body .status-pill:hover{transform:scale(1.04)}
}

/* =============================================================
   13. INPUT DETAIL POLISH (clear button, autofill)
   ============================================================= */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #FAF6EE inset !important;
  -webkit-text-fill-color:#0F1A33 !important;
  caret-color:#1B2A4E;
}

/* =============================================================
   14. LINK HOVER UNDERLINE PREMIUM
   ============================================================= */
html body .card a:not(.btn):not(.status-pill):hover{
  text-decoration:underline;
  text-decoration-color:rgba(201,168,118,.5);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

/* =============================================================
   15. SUBTLE GRADIENT OVERLAY (premium hava)
   ============================================================= */
html body .dash-hero,
html body .form-hero,
html body .open-hero,
html body .seo-hero{
  position:relative;
}
html body .dash-hero::after,
html body .form-hero::after{
  content:"";
  position:absolute;
  bottom:0;right:0;
  width:200px;height:200px;
  background:radial-gradient(circle at center, rgba(201,168,118,.10) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* =============================================================
   16. SMOOTH ANIMATIONS — uniform timing
   ============================================================= */
html body .alert,
html body .status-pill,
html body .role-badge,
html body .priority-badge,
html body .task-chip,
html body .usage-badge{
  transition:all var(--t-base);
}

/* =============================================================
   17. FORM PROGRESS / SUBMIT FEEDBACK
   ============================================================= */
.fs-progress{
  width:100%;
  height:3px;
  background:#EDEFF3;
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.fs-progress::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, #C9A876 50%, transparent);
  animation:fsProgressSlide 1.4s ease-in-out infinite;
}
@keyframes fsProgressSlide{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* =============================================================
   18. COPY SUCCESS PULSE
   ============================================================= */
.fs-copy-pulse{
  animation:fsCopyPulse .6s ease;
}
@keyframes fsCopyPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08);box-shadow:0 0 0 4px rgba(31,122,80,.20)}
}

/* =============================================================
   19. PREMIUM PRINT
   ============================================================= */
@media print{
  html body{
    background:#fff !important;
    color:#000 !important;
    font-size:11pt;
  }
  html body .card{
    box-shadow:none !important;
    border:1px solid #ddd !important;
    page-break-inside:avoid;
  }
  html body .table{break-inside:avoid}
  html body h1,html body h2,html body h3{break-after:avoid}
}

/* =============================================================
   20. REVEAL-ON-SCROLL — [data-reveal]
   JS adds .fs-revealed when in viewport (IntersectionObserver).
   ============================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.4,0,.2,1),
             transform .55s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
[data-reveal].fs-revealed{
  opacity:1;
  transform:translateY(0);
}
/* Stagger variants: data-reveal-delay="100" */
[data-reveal][data-reveal-delay="100"]{transition-delay:.10s}
[data-reveal][data-reveal-delay="200"]{transition-delay:.20s}
[data-reveal][data-reveal-delay="300"]{transition-delay:.30s}
[data-reveal][data-reveal-delay="400"]{transition-delay:.40s}

/* =============================================================
   21. KEYBOARD-NAV FOCUS POLISH
   .fs-using-keyboard is added to <html> when user tabs.
   Removes outlines for mouse users; emphasises for keyboard users.
   ============================================================= */
html:not(.fs-using-keyboard) :focus{
  outline:none;
}
html.fs-using-keyboard *:focus-visible{
  outline:2px solid #1B2A4E !important;
  outline-offset:2px !important;
  border-radius:6px;
}

/* =============================================================
   22. FORM .fs-once SUBMIT (companion to data-once attribute)
   Disabled state already styled by base; just smooth opacity.
   ============================================================= */
form[data-once] button[type="submit"][disabled],
form[data-once] input[type="submit"][disabled]{
  opacity:.72;
  cursor:wait;
  transition:opacity var(--t-bezier);
}

/* =============================================================
   23. CONFIRM ELEMENT — visual hint for destructive actions
   ============================================================= */
.fs-confirm[data-confirm]:not(form){
  position:relative;
}

/* =============================================================
   24. REDUCED MOTION RESPECT
   ============================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
}