/* =====================================================================
   ERZİNCANLI COŞKUN BALIK — PREMIUM ENHANCEMENT LAYER
   Purely additive stylesheet loaded after style.css. Nothing in
   style.css is removed; this file only adds new components (theme
   toggle, cursor, progress bar, forms, filters, PWA/a11y polish) and
   reuses the site's existing CSS variables so it always matches the
   current brand palette automatically.
   ===================================================================== */

/* ---------- 1. LIGHT THEME ----------
   Dark "ocean depth" mode stays exactly as designed by default.
   Toggling data-theme="light" on <html> swaps the palette only. */
html[data-theme="light"]{
  --abyss:#ffffff;
  --deep:#f7fafc;
  --panel:#ffffff;
  --panel-2:#f1f7f9;
  --foam:#0d2a3d;
  --muted:#4d6b7a;
  --wave-1:#ffffff;
  --wave-2:#f7fafc;
  --ink-rgb:255,255,255;
  --paper-rgb:13,54,84;
  --on-accent:#ffffff;
  --surface:rgba(13,54,84,0.03);
  --surface-strong:rgba(13,54,84,0.05);
  color-scheme: light;
}
html[data-theme="light"] body{background:var(--abyss);}
html[data-theme="light"] #depth-backdrop{background:var(--wave-1);}
html[data-theme="light"] #depth-backdrop::after{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(45,214,201,0.10), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(203,160,95,0.08), transparent 50%);
}
html[data-theme="light"] header{
  background:rgba(255,255,255,0.78);
  border-bottom:1px solid rgba(13,54,84,0.08);
  box-shadow:0 1px 0 rgba(13,54,84,0.02);
}
html[data-theme="light"] .hero-overlay{
  background:
    linear-gradient(180deg, rgba(3,10,17,0.5) 0%, rgba(4,13,22,0.3) 32%, rgba(4,13,22,0.34) 68%, rgba(3,10,17,0.66) 100%),
    linear-gradient(90deg, rgba(3,10,17,0.32) 0%, rgba(3,10,17,0.08) 45%, rgba(3,10,17,0.18) 100%);
}
html[data-theme="light"] .story-overlay,
html[data-theme="light"] .menu-intro-overlay,
html[data-theme="light"] .contact-bg-overlay{ filter:none; }
html[data-theme="light"] .btn-ghost{ border:1px solid rgba(13,54,84,0.18); color:var(--foam); }
html[data-theme="light"] .btn-ghost:hover{ border-color:var(--foam); }
html[data-theme="light"] .explore-card,
html[data-theme="light"] .highlight-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .photo-slot.filled{
  background:#ffffff; box-shadow:0 2px 14px rgba(13,54,84,0.06);
}
html[data-theme="light"] .dish-thumb{
  background:linear-gradient(160deg, rgba(21,83,128,0.06), rgba(13,54,84,0.06));
}
html[data-theme="light"] ::selection{ background:var(--current); color:#ffffff; }

/* Photo/video sections keep a fixed dark scrim no matter the theme, so their
   text must stay light regardless of data-theme. Scoping the variables here
   (instead of touching style.css) keeps every existing rule working as-is. */
html[data-theme="light"] .hero,
html[data-theme="light"] .story,
html[data-theme="light"] .menu-intro,
html[data-theme="light"] .contact.contact-has-video{
  --foam:#f6fcfd;
  --muted:#c3e2ea;
  --paper-rgb:234,243,243;
  --ink-rgb:5,15,24;
}
html[data-theme="light"] .hero h1 em,
html[data-theme="light"] .hero-side .eyebrow,
html[data-theme="light"] .story .quote-block,
html[data-theme="light"] .menu-intro h2{ color:var(--current); }
html[data-theme="light"] .story .quote-block{ color:#f6fcfd; }
html[data-theme="light"] .hero .btn-ghost,
html[data-theme="light"] .story .btn-ghost,
html[data-theme="light"] .menu-intro .btn-ghost,
html[data-theme="light"] .contact.contact-has-video .btn-ghost{
  border-color:rgba(var(--paper-rgb),0.3);
}
html[data-theme="light"] .hero .hero-side{ border-left-color:rgba(var(--paper-rgb),0.2); }
html[data-theme="light"] .contact.contact-has-video .form-card{
  --foam:#0d2a3d;
  --muted:#4d6b7a;
  --paper-rgb:13,54,84;
  --ink-rgb:255,255,255;
}
html[data-theme="light"] .contact.contact-has-video .contact-card{
  background:linear-gradient(160deg, rgba(21,83,128,0.72), rgba(13,54,84,0.72));
}
html[data-theme="light"] .nav-links{ background:rgba(255,255,255,0.98); }
html[data-theme="light"] #lightbox{ background:rgba(13,54,84,0.85); }
html[data-theme="light"] .depth-tag{ background:rgba(240,180,41,0.06); }
html[data-theme="light"] .gauge-readout{ background:#ffffff; }
html[data-theme="light"] #depth-pill{ background:#ffffff; }
html[data-theme="light"] .map-frame iframe{ filter:saturate(0.95) brightness(1); }
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    /* system preference only applies before the user has made an explicit
       choice; once they toggle, the saved choice always wins (see enhancements.js) */
  }
}

/* ---------- 2. THEME TOGGLE BUTTON ---------- */
.theme-toggle{
  position:relative; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(var(--paper-rgb),0.22); background:transparent;
  color:var(--foam); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, background .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--current); transform:translateY(-2px); }
.theme-toggle svg{ width:18px; height:18px; position:absolute; transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.theme-toggle .icon-sun{ opacity:0; transform:rotate(-90deg) scale(0.5); }
.theme-toggle .icon-moon{ opacity:1; transform:rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle .icon-sun{ opacity:1; transform:rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle .icon-moon{ opacity:0; transform:rotate(90deg) scale(0.5); }

/* ---------- 3. SCROLL PROGRESS BAR ---------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:2.5px; width:0%; z-index:10001;
  background:linear-gradient(90deg, var(--current), var(--gold));
  box-shadow:0 0 10px rgba(45,214,201,0.5);
  transition:width .08s linear;
  pointer-events:none;
}

/* ---------- 4. BACK TO TOP ---------- */
#backToTop{
  position:fixed; right:18px; bottom:22px; z-index:199;
  width:46px; height:46px; border-radius:50%;
  background:rgba(var(--ink-rgb),0.6); backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(var(--paper-rgb),0.16); color:var(--foam);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, border-color .25s ease;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover{ border-color:var(--current); }
#backToTop svg{ width:19px; height:19px; }
html[dir="rtl"] #backToTop{ right:auto; left:18px; }
@media (max-width:640px){ #backToTop{ right:12px; bottom:16px; width:42px; height:42px; } html[dir="rtl"] #backToTop{ left:12px; } }

/* ---------- 5. CUSTOM CURSOR (desktop, fine pointer only) ---------- */
@media (hover:hover) and (pointer:fine){
  html.custom-cursor-on, html.custom-cursor-on body{ cursor:none; }
  html.custom-cursor-on a, html.custom-cursor-on button, html.custom-cursor-on input,
  html.custom-cursor-on textarea, html.custom-cursor-on select{ cursor:none; }
  #cursorDot, #cursorRing{
    position:fixed; top:0; left:0; z-index:10002; pointer-events:none;
    border-radius:50%; transform:translate(-50%,-50%);
    will-change:transform;
  }
  #cursorDot{ width:6px; height:6px; background:var(--current); opacity:0; transition:opacity .2s ease; }
  #cursorRing{
    width:34px; height:34px; border:1px solid rgba(45,214,201,0.55);
    opacity:0; transition:opacity .2s ease, width .2s ease, height .2s ease, background .2s ease, border-color .2s ease;
  }
  html.custom-cursor-on #cursorDot, html.custom-cursor-on #cursorRing{ opacity:1; }
  #cursorRing.is-active{ width:50px; height:50px; background:rgba(45,214,201,0.1); border-color:var(--current); }
}

/* ---------- 6. RIPPLE EFFECT ---------- */
.ripple-host{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.5);
  transform:scale(0); pointer-events:none;
  animation:ripple-anim .6s ease-out forwards;
}
html[data-theme="light"] .btn-ghost .ripple, html[data-theme="light"] .nav-cta .ripple{ background:rgba(13,54,84,0.18); }
@keyframes ripple-anim{ to{ transform:scale(1); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .ripple{ display:none; } }

/* ---------- 7. SKELETON LOADING ---------- */
.skel-loading{ position:relative; background:rgba(var(--paper-rgb),0.06); overflow:hidden; }
.skel-loading::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(var(--paper-rgb),0.10), transparent);
  animation:skel-sweep 1.4s ease-in-out infinite;
}
@keyframes skel-sweep{ 100%{ transform:translateX(100%); } }
img.img-fade{ opacity:0; transition:opacity .5s ease; }
img.img-fade.loaded{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .skel-loading::after{ animation:none; display:none; } }

/* ---------- 8. spinner keyframes (used by submit-button loading dot) ---------- */
@keyframes loader-spin{ to{ transform:rotate(360deg); } }

/* ---------- 9. COUNTER ANIMATION SUPPORT ---------- */
.stat b[data-count]{ font-variant-numeric:tabular-nums; }

/* ---------- 10. FOCUS-VISIBLE ACCESSIBILITY ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--current); outline-offset:3px; border-radius:2px;
}
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:10010;
  background:var(--current); color:var(--on-accent); padding:10px 18px;
  border-radius:2px; font-family:'Space Mono',monospace; font-size:0.8rem;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- 11. MENU: SEARCH + FILTER + FAVORITES ---------- */
.menu-sticky-wrap{
  position:sticky; top:64px; z-index:49;
  background:rgba(var(--ink-rgb),0.55); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(var(--paper-rgb),0.08);
}
.menu-sticky-wrap .menu-nav{ position:static; top:auto; }
.menu-toolbar{ padding:14px 28px 4px; }
.menu-toolbar-inner{
  max-width:1180px; margin:0 auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.menu-search{
  flex:1; min-width:200px; position:relative; display:flex; align-items:center;
}
.menu-search svg{
  position:absolute; left:13px; width:16px; height:16px; color:var(--muted); pointer-events:none;
}
html[dir="rtl"] .menu-search svg{ left:auto; right:13px; }
.menu-search input{
  width:100%; background:rgba(var(--paper-rgb),0.05); border:1px solid rgba(var(--paper-rgb),0.14);
  border-radius:20px; padding:9px 16px 9px 38px; color:var(--foam); font-family:'Manrope',sans-serif;
  font-size:0.86rem; transition:border-color .25s ease, background .25s ease;
}
html[dir="rtl"] .menu-search input{ padding:9px 38px 9px 16px; }
.menu-search input::placeholder{ color:var(--muted); }
.menu-search input:focus{ outline:none; border-color:var(--current); background:rgba(var(--paper-rgb),0.08); }
.menu-search .clear-search{
  position:absolute; right:10px; width:20px; height:20px; border-radius:50%; border:0;
  background:rgba(var(--paper-rgb),0.12); color:var(--foam); font-size:0.75rem; cursor:pointer;
  display:none; align-items:center; justify-content:center;
}
html[dir="rtl"] .menu-search .clear-search{ right:auto; left:10px; }
.menu-search.has-value .clear-search{ display:flex; }
.fav-toggle-chip{
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  font-size:0.76rem; letter-spacing:0.03em; padding:8px 15px; border-radius:20px;
  border:1px solid rgba(var(--paper-rgb),0.14); background:rgba(var(--paper-rgb),0.03);
  color:var(--muted); cursor:pointer; transition:all .25s ease;
}
.fav-toggle-chip svg{ width:14px; height:14px; }
.fav-toggle-chip.active{ border-color:#e5453a; color:#ff6b60; background:rgba(229,69,58,0.08); }
.menu-empty-state{
  display:none; text-align:center; padding:60px 20px; color:var(--muted);
}
.menu-empty-state.show{ display:block; }
.menu-empty-state svg{ width:34px; height:34px; margin:0 auto 14px; opacity:0.6; }

.dish-fav-btn{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:rgba(var(--ink-rgb),0.45); backdrop-filter:blur(4px); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:transform .2s ease, background .2s ease;
}
.dish-fav-btn svg{ width:14px; height:14px; stroke:var(--foam); fill:none; transition:fill .2s ease, stroke .2s ease; }
.dish-fav-btn:hover{ transform:scale(1.1); }
.dish-fav-btn.active svg{ fill:#e5453a; stroke:#e5453a; }
.dish-thumb{ position:relative; }
.featured-tag{
  position:absolute; top:8px; left:8px; z-index:2;
  background:var(--gold); color:var(--on-accent); font-family:'Space Mono',monospace;
  font-size:0.55rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:2px; box-shadow:0 3px 10px rgba(0,0,0,0.25);
}
html[dir="rtl"] .featured-tag{ left:auto; right:8px; }
html[dir="rtl"] .dish-fav-btn{ right:auto; left:8px; }
.dish.is-hidden{ display:none !important; }
section.category.is-hidden{ display:none !important; }
.menu-nav a.is-empty{ opacity:0.3; pointer-events:none; }

@media (max-width:700px){
  .menu-sticky-wrap{ top:56px; }
  .menu-toolbar{ padding:12px 16px 2px; }
}

/* ---------- 12. GALLERY FILTER ---------- */
.gallery-filter{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  max-width:1180px; margin:30px auto 0; padding:0 28px;
}
.gallery-filter button{
  font-size:0.76rem; letter-spacing:0.03em; padding:8px 16px; border-radius:20px;
  border:1px solid rgba(var(--paper-rgb),0.14); color:var(--muted);
  background:rgba(var(--paper-rgb),0.03); cursor:pointer; transition:all .25s ease;
}
.gallery-filter button:hover{ border-color:var(--current); color:var(--foam); }
.gallery-filter button.active{ border-color:var(--current); color:var(--current); background:rgba(45,214,201,0.08); }
.gallery-grid .photo-slot{ transition:opacity .35s ease, transform .35s ease; }
.gallery-grid .photo-slot.gallery-hidden{ display:none; }

/* ---------- 13. FORMS (contact + reservation) ---------- */
.form-card{
  border:1px solid rgba(var(--paper-rgb),0.12); border-radius:6px; padding:34px;
  background:linear-gradient(160deg, rgba(21,83,128,0.14), rgba(13,54,84,0.14));
}
html[data-theme="light"] .form-card{ background:#ffffff; box-shadow:0 2px 14px rgba(13,54,84,0.06); }
.form-card h3{ font-size:1.3rem; margin-bottom:6px; }
.form-card .form-sub{ color:var(--muted); font-size:0.86rem; margin-bottom:24px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:'Space Mono',monospace; font-size:0.66rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.field .required-mark{ color:#ff6b60; }
.field input, .field select, .field textarea{
  background:rgba(var(--paper-rgb),0.05); border:1px solid rgba(var(--paper-rgb),0.16);
  border-radius:4px; padding:11px 13px; color:var(--foam); font-family:'Manrope',sans-serif;
  font-size:0.9rem; transition:border-color .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); opacity:0.7; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--current); background:rgba(var(--paper-rgb),0.08);
}
.field textarea{ resize:vertical; min-height:96px; font-family:'Manrope',sans-serif; }
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color:#e5453a; background:rgba(229,69,58,0.06);
}
.field-error{
  font-size:0.72rem; color:#ff6b60; min-height:0; display:none;
}
.field.has-error .field-error{ display:block; }
.form-actions{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.form-note{
  margin-top:16px; font-size:0.76rem; color:var(--muted); line-height:1.6;
  display:flex; gap:8px; align-items:flex-start;
}
.form-note svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--current); }
.form-status{
  margin-top:18px; padding:14px 16px; border-radius:4px; font-size:0.85rem;
  display:none; align-items:center; gap:10px;
}
.form-status.show{ display:flex; animation:form-status-in .35s ease; }
.form-status svg{ width:18px; height:18px; flex-shrink:0; }
.form-status.success{ background:rgba(45,214,201,0.1); color:var(--current); border:1px solid rgba(45,214,201,0.3); }
.form-status.error{ background:rgba(229,69,58,0.08); color:#ff6b60; border:1px solid rgba(229,69,58,0.28); }
@keyframes form-status-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
button.btn-primary[type="submit"]{ border:0; font-family:inherit; cursor:pointer; }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; transform:none !important; }
.btn-loading-dot{
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(13,54,84,0.3);
  border-top-color:var(--on-accent); animation:loader-spin .7s linear infinite; display:none;
}
.btn-primary.is-loading .btn-loading-dot{ display:inline-block; }
.btn-primary.is-loading .btn-label{ opacity:0.7; }

/* character counter for message fields */
.char-count{ font-size:0.68rem; color:var(--muted); text-align:right; margin-top:-2px; }
html[dir="rtl"] .char-count{ text-align:left; }

@media (prefers-reduced-motion: reduce){
  .theme-toggle svg, #backToTop, .form-status, .loader-ring{ transition:none !important; animation:none !important; }
}

/* ---------- 14. TESTIMONIALS — EDITORIAL FULL-WIDTH SLIDER ---------- */
.testimonials{ padding:76px 0 84px; position:relative; z-index:1; overflow:hidden; }
.testimonials .explore-head{ max-width:1180px; margin:0 auto; padding:0 28px 6px; text-align:center; }
.testimonials .explore-head p{ margin-left:auto; margin-right:auto; }

.ts-bg-deco{
  position:absolute; top:-40px; right:-60px; z-index:0; pointer-events:none;
  color:rgba(var(--paper-rgb),0.5);
}
.ts-bg-deco svg{ display:block; width:340px; height:340px; }
html[data-theme="light"] .ts-bg-deco{ color:rgba(13,54,84,0.06); }

.ts-editorial{
  position:relative; z-index:1; max-width:720px; margin:44px auto 0;
}
.ts-viewport{
  position:relative; overflow:hidden; border-radius:28px;
  padding:6px;
}
.ts-track{
  display:flex; align-items:stretch; will-change:transform;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
}
.ts-track.ts-dragging{ transition:none; }
.ts-slide{
  flex:0 0 100%; min-width:0; box-sizing:border-box;
  padding:10px; cursor:grab;
}
.ts-track.ts-dragging .ts-slide{ cursor:grabbing; }

/* ---- Glassmorphism review card ---- */
.ts-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(34px,5vw,54px) clamp(24px,5vw,52px) clamp(30px,4vw,42px);
  border-radius:26px;
  background:linear-gradient(165deg, rgba(var(--paper-rgb),0.12), rgba(var(--paper-rgb),0.04));
  border:1px solid rgba(var(--paper-rgb),0.16);
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,0.55),
    0 1px 0 0 rgba(var(--paper-rgb),0.08) inset,
    0 0 0 1px rgba(var(--paper-rgb),0.02) inset;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  animation:tsCardIn .55s cubic-bezier(.22,.61,.36,1);
}
.ts-card:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--paper-rgb),0.28);
  box-shadow:
    0 26px 70px -18px rgba(0,0,0,0.6),
    0 1px 0 0 rgba(var(--paper-rgb),0.12) inset;
}
@keyframes tsCardIn{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.ts-card-glow{
  position:absolute; inset:-40% -20% auto -20%; height:220px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(45,214,201,0.18), transparent 70%);
  filter:blur(10px);
}
.ts-quote-mark{
  position:relative; z-index:1;
  font-family:'Fraunces',serif; font-style:italic; font-size:3.6rem; line-height:1;
  color:var(--current); opacity:0.5; margin-bottom:-6px;
}
html[data-theme="light"] .ts-card{
  background:linear-gradient(165deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22));
  border-color:rgba(13,54,84,0.12);
  box-shadow:
    0 20px 50px -22px rgba(13,54,84,0.35),
    0 1px 0 0 rgba(255,255,255,0.4) inset;
}

.ts-stars{ position:relative; z-index:1; display:flex; justify-content:center; gap:5px; color:var(--gold); margin-bottom:20px; }
.ts-stars svg{ width:19px; height:19px; flex:0 0 19px; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

.ts-quote{
  position:relative; z-index:1;
  font-family:'Fraunces',serif; font-weight:400; font-style:normal;
  font-size:clamp(1.05rem,2vw,1.24rem); line-height:1.7; color:var(--foam);
  max-width:560px; margin:0 auto;
}

.ts-person{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:13px; margin-top:30px;
  padding-top:24px; border-top:1px solid rgba(var(--paper-rgb),0.14);
}
.ts-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:0.95rem; letter-spacing:0.02em;
  background:linear-gradient(150deg, var(--current), var(--gold));
  color:var(--on-accent);
  box-shadow:0 4px 14px -4px rgba(45,214,201,0.5);
}
.ts-person-meta{ text-align:left; }
.ts-name{
  font-family:'Manrope',sans-serif; font-weight:700; font-style:normal;
  font-size:0.95rem; color:var(--foam); letter-spacing:0.005em;
}
.ts-google-row{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:0.74rem; letter-spacing:0.02em; color:var(--muted);
}
.ts-google-row svg{ display:block; flex-shrink:0; }
.ts-google-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:#fff; padding:3px; box-sizing:border-box;
}

.ts-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px; }
.ts-nav{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--ink-rgb),0.4); backdrop-filter:blur(10px);
  border:1px solid rgba(var(--paper-rgb),0.18); color:var(--foam);
  cursor:pointer; transition:background .2s, border-color .2s, transform .2s;
}
.ts-nav:hover{ background:var(--current); border-color:var(--current); color:var(--on-accent); transform:scale(1.08); }
.ts-nav:active{ transform:scale(0.94); }
.ts-nav:focus-visible{ outline:2px solid var(--current); outline-offset:2px; }
html[data-theme="light"] .ts-nav{ background:rgba(255,255,255,0.75); border-color:rgba(13,54,84,0.12); }

.ts-dots{ display:flex; align-items:center; gap:8px; }
.ts-dot{
  width:8px; height:8px; border-radius:50%; padding:0; border:0; cursor:pointer;
  background:rgba(var(--paper-rgb),0.25); transition:background .25s, transform .25s, width .25s;
}
.ts-dot:hover{ background:rgba(var(--paper-rgb),0.5); }
.ts-dot.is-active{ background:var(--current); width:22px; border-radius:5px; }

@media (max-width:700px){
  .testimonials{ padding:56px 0 64px; }
  .ts-bg-deco svg{ width:220px; height:220px; }
  .ts-bg-deco{ top:-20px; right:-40px; }
  .ts-editorial{ margin-top:30px; }
  .ts-card{ border-radius:22px; }
  .ts-quote-mark{ font-size:2.8rem; }
  .ts-stars{ margin-bottom:16px; }
  .ts-quote{ font-size:1.01rem; }
  .ts-person{ margin-top:22px; padding-top:18px; }
  .ts-controls{ gap:16px; margin-top:26px; }
}
@media (prefers-reduced-motion: reduce){
  .ts-track{ transition-duration:.01ms; }
  .ts-card{ animation:none; }
}