.ruyaAttendanceMobileApp{display:none}
@media(max-width:900px){
.ruyaAttendanceAdminPage .ruyaAttendanceSummary,
.ruyaAttendanceAdminPage .ruyaAttendanceToolbar,
.ruyaAttendanceAdminPage .ruyaAttendanceBulkBar,
.ruyaAttendanceAdminPage .ruyaAttendanceTableCard{display:none!important}
.ruyaAttendanceMobileApp{display:block;padding:0 12px 105px}
.ruyaAttendanceMobileTop{display:flex;justify-content:space-between;gap:12px;margin:6px 0 12px}
.ruyaAttendanceMobileTop>div:first-child{display:flex;flex-direction:column}
.ruyaAttendanceMobileTop small{font-size:10px;font-weight:900;color:#8190a5}
.ruyaAttendanceMobileTop strong{font-size:21px;color:#17233d;margin-top:3px}
.ruyaAttendanceMobileTop span{font-size:11px;color:#7d899b;margin-top:4px}
}
@media(max-width:900px){
.ruyaAttendanceMobilePending{min-width:64px;padding:8px 10px;border-radius:15px;background:#edf3ff;text-align:center}
.ruyaAttendanceMobilePending b{display:block;font-size:18px;color:#315fc7}
.ruyaAttendanceMobileStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ruyaAttendanceMobileStats>div{background:#fff;border:1px solid #e7ebf2;border-radius:15px;padding:10px 11px}
.ruyaAttendanceMobileStats b{display:block;font-size:18px;color:#17233d}
.ruyaAttendanceMobileStats span{font-size:9px;font-weight:800;color:#7b8798}
.ruyaAttendanceMobileTools{display:grid;grid-template-columns:1fr 118px;gap:8px;margin-bottom:9px}
.ruyaAttendanceMobileSearch{grid-column:1/-1;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #dfe6ef;border-radius:14px;padding:0 12px;height:44px}
.ruyaAttendanceMobileSearch input{border:0!important;outline:0!important;width:100%;font-size:13px}
.ruyaAttendanceMobileTools select,.ruyaAttendanceMobileTools button{height:41px;border:1px solid #dfe6ef;border-radius:13px;background:#fff;font-size:11px;font-weight:800}
.ruyaAttendanceMobileTools button.active{background:#edf3ff;border-color:#91a9eb;color:#315bc1}
}
@media(max-width:900px){
.ruyaAttendanceMobileSelectClass{width:100%;height:40px;border:0;border-radius:13px;background:#172f73;color:#fff;font-size:11px;font-weight:850;margin-bottom:10px}
.ruyaAttendanceMobileList{display:flex;flex-direction:column;gap:9px}
.ruyaAttendanceMobileCard{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;background:#fff;border:1px solid #e6ebf2;border-radius:17px;padding:12px}
.ruyaAttendanceMobileCheck input{width:18px;height:18px;accent-color:#214899}
.ruyaAttendanceMobileStudent{min-width:0;display:flex;flex-direction:column}
.ruyaAttendanceMobileStudent strong{font-size:13px;color:#17233d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ruyaAttendanceMobileStudent span{font-size:10px;color:#7b8798;margin-top:3px}
.ruyaAttendanceMobileStudent small{font-size:9px;color:#8a95a5;margin-top:4px}
.ruyaAttendanceMobileStatus{align-self:start;border-radius:999px;padding:6px 8px;font-size:9px;font-weight:900}
.ruyaAttendanceMobileStatus.arrived{background:#e7f7ef;color:#1d9556}
.ruyaAttendanceMobileStatus.absent{background:#fdebed;color:#ca4149}
.ruyaAttendanceMobileStatus.waiting{background:#eaf1ff;color:#3e72d6}
}
@media(max-width:900px){
.ruyaAttendanceMobileActions{grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:2px}
.ruyaAttendanceMobileActions button{height:36px;border:0;border-radius:11px;font-size:11px;font-weight:850}
.ruyaAttendanceMobileActions .arrived{background:#e8f7ef;color:#188b50}
.ruyaAttendanceMobileActions .absent{background:#fdebed;color:#c63e47}
.ruyaAttendanceMobileBulk{position:fixed;left:12px;right:12px;bottom:78px;z-index:30;display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:10px 11px;background:#14254e;border-radius:17px}
.ruyaAttendanceMobileBulk strong{font-size:11px;color:#fff}
.ruyaAttendanceMobileBulk button{height:36px;border:0;border-radius:10px;padding:0 11px;font-size:10px;font-weight:850}
.ruyaAttendanceMobileBulk button:nth-of-type(1){background:#e6f7ee;color:#198b50}
.ruyaAttendanceMobileBulk button:nth-of-type(2){background:#fdebed;color:#c43d46}
}
@media(max-width:900px){
.ruyaAttendanceMobileCard{padding:9px 10px;gap:7px}
.ruyaAttendanceMobileStudent strong{font-size:12px}
.ruyaAttendanceMobileActions button{height:32px;font-size:10px}
.ruyaAttendanceMobileStatus{padding:5px 7px;font-size:8.5px}
.ruyaAttendanceMobileList{gap:7px}
.ruyaAttendanceMobileMore{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:11px 0 0;padding:10px 12px;background:#fff;border:1px solid #e5eaf1;border-radius:14px}
.ruyaAttendanceMobileMore span{font-size:10px;color:#7c8798}
.ruyaAttendanceMobileMore button{border:0;border-radius:10px;background:#172f73;color:#fff;font-size:10px;font-weight:850;padding:8px 11px}
}
@media(max-width:900px){
.ruyaAttendanceAdminPage>.v5Intro{display:none!important}
.ruyaAttendanceMobilePending{display:none!important}
.ruyaAttendanceMobileClassList{display:flex;flex-direction:column;gap:9px}
.ruyaAttendanceMobileClassCard{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left;background:#fff;border:1px solid #e5eaf1;border-radius:17px;padding:13px 14px}
.ruyaAttendanceMobileClassCard>div:first-child{display:flex;flex-direction:column}
.ruyaAttendanceMobileClassCard strong{font-size:13px;color:#17233d}
.ruyaAttendanceMobileClassCard span{font-size:9px;color:#7b8798;margin-top:3px}
.ruyaAttendanceMobileClassMeta{display:flex;gap:6px;grid-column:1/3}
.ruyaAttendanceMobileClassMeta span{padding:5px 7px;border-radius:999px;font-weight:800}
.ruyaAttendanceMobileClassMeta .arrived{background:#e8f7ef;color:#188b50}
.ruyaAttendanceMobileClassMeta .waiting{background:#eaf1ff;color:#3e72d6}
.ruyaAttendanceMobileClassMeta .absent{background:#fdebed;color:#c63e47}
.ruyaAttendanceMobileClassCard>b{grid-column:2;grid-row:1;color:#315bc1;font-size:10px;align-self:center}
.ruyaAttendanceMobileList.hidden{display:none!important}
}
@media(max-width:900px){
.ruyaAttendanceMobileBulk{
position:static!important;
left:auto!important;
right:auto!important;
bottom:auto!important;
margin:0 0 10px!important;
}
}
@media(max-width:900px){
.ruyaAttendanceMobileApp{display:flex!important;flex-direction:column}
.ruyaAttendanceMobileTop{order:1}
.ruyaAttendanceMobileStats{order:2}
.ruyaAttendanceMobileTools{order:3}
.ruyaAttendanceMobileSelectClass{order:4}
.ruyaAttendanceMobileBulk{order:5!important}
.ruyaAttendanceMobileClassList{order:6}
.ruyaAttendanceMobileList{order:7}
.ruyaAttendanceMobileMore{order:8}
}


/* RUYA_BRANCH_HOME_V3 */

.ruyaBranchHomeV3{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:
    4px
    clamp(14px,4vw,22px)
    calc(120px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}

.ruyaBranchHomeV3 .ruyaBranchHeroV3{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:174px;
  padding:20px 16px 14px;
  margin:0 0 14px;
  overflow:hidden;

  background:#fff;
  border:0;
  box-shadow:none;
  border-radius:0;
}

.ruyaBranchHomeV3 .ruyaBranchHeroV3::before{
  display:none;
}

.ruyaBranchHomeV3 .ruyaBranchHeroV3 .ruya-r792-hero-copy{
  position:relative;
  z-index:2;
  width:68%;
}

.ruyaBranchHomeV3 .ruyaBranchHeroV3 h1{
  margin:0 0 10px;
  color:#162b62;
  font-size:clamp(20px,5.5vw,29px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.035em;
}

.ruyaBranchHomeV3 .ruyaBranchHeroMessage{
  margin:0;
  max-width:330px;
  color:#f13255 !important;
  font-size:clamp(17px,4.7vw,24px) !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  transform:rotate(-1deg);
}

.ruyaBranchHomeV3 .ruyaBranchHeroV3 img{
  position:absolute;
  right:-4px;
  bottom:0;
  width:37%;
  max-width:190px;
  height:auto;
  object-fit:contain;
  opacity:1;
}

/* Sınıflarım tek kart */

.ruyaClassSummaryCard{
  appearance:none;
  width:100%;
  min-height:116px;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 24px;
  gap:14px;
  align-items:center;

  margin:0 0 13px;
  padding:16px;

  border:1px solid #cfe3fb;
  border-radius:24px;
  background:
    radial-gradient(circle at 96% 10%,rgba(164,205,255,.24) 0 54px,transparent 55px),
    linear-gradient(135deg,#edf8ff 0%,#f8fbff 100%);

  box-shadow:
    0 9px 26px rgba(25,51,105,.055);

  text-align:left;
  color:#14275c;
}

.ruyaClassSummaryIcon{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:19px;
  background:
    linear-gradient(145deg,#dff1ff,#edf3ff);

  color:#6245d7;
}

.ruyaClassSummaryCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.ruyaClassSummaryCopy h2{
  margin:0 0 4px;
  font-size:23px;
  line-height:1.1;
  color:#14275c;
}

.ruyaClassSummaryCopy b{
  display:block;
  margin:0 0 4px;
  color:#526182;
  font-size:15px;
  font-weight:600;
}

.ruyaClassSummaryCopy small{
  color:#76809b;
  font-size:13px;
}

.ruyaClassSummaryCard>i{
  color:#142e77;
  font-style:normal;
  font-size:36px;
  line-height:1;
}

/* Rehberlik ana kartı */

.ruyaGuidanceMainCard{
  appearance:none;
  width:100%;
  min-height:116px;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) 24px;
  gap:14px;
  align-items:center;

  margin:0 0 14px;
  padding:16px;

  border:1px solid #ddd8ff;
  border-radius:24px;

  background:
    radial-gradient(circle at 96% 70%,rgba(206,192,255,.22) 0 52px,transparent 53px),
    linear-gradient(135deg,#f4f0ff 0%,#fbfaff 100%);

  box-shadow:
    0 9px 26px rgba(69,49,142,.055);

  color:#172c67;
  text-align:left;
}

.ruyaGuidanceMainIcon{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:19px;
  background:linear-gradient(145deg,#e7dcff,#f1ebff);
  color:#6843da;
}

.ruyaGuidanceMainCard h2{
  margin:0 0 6px;
  color:#152b68;
  font-size:22px;
  line-height:1.1;
}

.ruyaGuidanceMainCard p{
  margin:0;
  color:#687493;
  font-size:14px;
  line-height:1.3;
}

.ruyaGuidanceMainCard>i{
  color:#142e77;
  font-style:normal;
  font-size:36px;
}

/* 2 x 2 hızlı kartlar */

.ruyaBranchQuickV3{
  margin-top:0;
}

.ruyaBranchQuickGridV3{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.ruyaBranchQuickCardV3{
  appearance:none;
  min-height:128px;
  padding:14px;

  display:flex;
  align-items:center;
  gap:11px;

  border:1px solid rgba(31,61,121,.10);
  border-radius:23px;
  box-shadow:
    0 8px 22px rgba(32,58,113,.045);

  text-align:left;
  color:#172955;
}

.ruyaBranchQuickCardV3.blue{
  background:linear-gradient(145deg,#eaf8ff,#f8fcff);
  border-color:#cceafa;
}

.ruyaBranchQuickCardV3.rose{
  background:linear-gradient(145deg,#fff0f7,#fff9fc);
  border-color:#f3d4e5;
}

.ruyaBranchQuickCardV3.yellow{
  background:linear-gradient(145deg,#fff7dc,#fffdf5);
  border-color:#f2e2ad;
}

.ruyaBranchQuickCardV3.amber{
  background:linear-gradient(145deg,#fff5dd,#fffaf0);
  border-color:#f3ddb0;
}

.ruyaBranchQuickCardV3.mint{
  background:linear-gradient(145deg,#e9faf3,#f8fffc);
  border-color:#cfeadf;
}

.ruyaBranchQuickCardV3.lilac{
  background:linear-gradient(145deg,#f2efff,#fbfaff);
  border-color:#ddd8f7;
}

.ruyaBranchQuickIconV3{
  flex:0 0 auto;
  width:58px;
  height:58px;

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

  border-radius:17px;
  background:rgba(255,255,255,.58);

  color:#6543d7;
}

.ruyaBranchQuickCardV3 div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.ruyaBranchQuickCardV3 b{
  color:#172955;
  font-size:17px;
  line-height:1.1;
}

.ruyaBranchQuickCardV3 small{
  color:#727c94;
  font-size:12.5px;
  line-height:1.25;
}

/* Sınıflarım modal / bottom sheet */

.ruyaClassModalBack{
  position:fixed;
  inset:0;
  z-index:99997;

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

  padding-top:
    calc(64px + env(safe-area-inset-top));

  background:rgba(20,32,60,.36);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.ruyaClassModalSheet{
  width:min(100%,720px);
  max-height:82dvh;

  display:flex;
  flex-direction:column;

  padding:
    20px
    16px
    calc(22px + env(safe-area-inset-bottom));

  overflow:hidden;

  background:#fff;
  border-radius:30px 30px 0 0;

  box-shadow:
    0 -18px 55px rgba(22,42,84,.18);
}

.ruyaClassModalHead{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;

  padding:0 4px 15px;

  border-bottom:1px solid #edf0f6;
}

.ruyaClassModalHead small{
  display:block;
  margin-bottom:3px;
  color:#8a93a8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}

.ruyaClassModalHead h2{
  margin:0;
  color:#14275c;
  font-size:27px;
  letter-spacing:-.035em;
}

.ruyaClassModalHead p{
  margin:4px 0 0;
  color:#788198;
  font-size:13px;
}

.ruyaClassModalClose{
  appearance:none;
  width:48px;
  height:48px;

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

  border:0;
  border-radius:50%;

  background:#f5f6fa;
  color:#25375f;

  font-size:31px;
  line-height:1;
}

.ruyaClassModalGrid{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;

  padding:16px 2px 4px;
}

.ruyaClassModalItem{
  appearance:none;
  min-height:92px;

  display:grid;
  grid-template-columns:48px minmax(0,1fr) 16px;
  align-items:center;
  gap:9px;

  padding:12px;

  border:1px solid #e4e7ef;
  border-radius:19px;

  background:#fbfcff;
  text-align:left;
  color:#1b2b52;
}

.ruyaClassModalIcon{
  width:46px;
  height:46px;

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

  border-radius:14px;

  background:#f0ebff;
  color:#6645d7;
}

.ruyaClassModalItem div{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.ruyaClassModalItem b{
  overflow:hidden;
  color:#1b2b52;

  font-size:14px;
  line-height:1.15;

  text-overflow:ellipsis;
}

.ruyaClassModalItem small{
  margin-top:4px;
  color:#8a92a3;
  font-size:11.5px;
}

.ruyaClassModalItem i{
  color:#8a92a3;
  font-size:22px;
  font-style:normal;
}

.ruyaClassModalEmpty{
  grid-column:1/-1;
  padding:24px;

  border:1px dashed #dce0e8;
  border-radius:18px;

  color:#7c8498;
  text-align:center;
}

@media(max-width:420px){

  .ruyaBranchHomeV3{
    padding-left:16px;
    padding-right:16px;
  }

  .ruyaBranchHomeV3 .ruyaBranchHeroV3{
    min-height:156px;
    padding-left:3px;
    padding-right:3px;
  }

  .ruyaBranchHomeV3 .ruyaBranchHeroV3 .ruya-r792-hero-copy{
    width:72%;
  }

  .ruyaBranchQuickCardV3{
    min-height:120px;
    padding:12px 10px;
  }

  .ruyaBranchQuickIconV3{
    width:50px;
    height:50px;
  }

  .ruyaBranchQuickCardV3 b{
    font-size:15.5px;
  }

  .ruyaBranchQuickCardV3 small{
    font-size:11.5px;
  }

}

@media(min-width:700px){

  .ruyaBranchHomeV3{
    max-width:860px;
  }

  .ruyaBranchQuickGridV3{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

}


/* RUYA_GUIDANCE_REFERENCE_FIT_V5 */

/*
 * ÖNEMLİ:
 * Header, hero ve alt navigasyon burada STILLENMIYOR.
 * Hero ruyaFitHeroV35'in mevcut veli stilini aynen kullanır.
 */

.ruyaGuidanceReferenceHomeV4{
  width:100%;
  margin:0 auto;
  background:#fff;
  box-sizing:border-box;
}

/* BODY: alt menüye kadar gerçek kullanılabilir alan */
.ruyaGuidanceReferenceHomeV4 .ruyaFitHomeV35Body{
  width:100% !important;

  height:
    var(
      --ruya-guidance-fit,
      calc(100dvh - 240px)
    ) !important;

  min-height:0 !important;
  max-height:none !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  box-sizing:border-box !important;

  /*
   * Veli ana ekranındaki yatay hizayı koruyoruz.
   * Hero için özel ölçü tanımlamıyoruz.
   */
  padding-bottom:4px !important;
}

/* Hero küçülmesin / değişmesin */
.ruyaGuidanceReferenceHomeV4 .ruyaFitHeroV35{
  flex:0 0 auto !important;
}

/*
 * HERO SONRASI REFERANS ICERIK
 */
.ruyaGuidanceReferenceHomeV4 .ruyaGuidanceContentV4{
  flex:1 1 auto !important;

  min-height:0 !important;
  width:100% !important;

  display:grid !important;

  /*
   * 2 geniş kart +
   * 2 satır küçük kart
   */
  grid-template-rows:
    minmax(74px,1fr)
    minmax(74px,1fr)
    minmax(78px,1fr)
    minmax(78px,1fr) !important;

  gap:7px !important;

  padding-top:2px !important;
  padding-bottom:4px !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* ========================================================
   GENİŞ KARTLAR
   ======================================================== */

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCardV4{
  appearance:none;

  width:100% !important;
  height:100% !important;
  min-height:0 !important;

  display:grid !important;

  grid-template-columns:
    clamp(58px,16vw,72px)
    minmax(0,1fr)
    20px !important;

  align-items:center !important;

  gap:12px !important;

  padding:
    clamp(8px,1.8vh,12px)
    13px !important;

  border-radius:19px !important;

  box-sizing:border-box !important;

  text-align:left !important;

  box-shadow:
    0 4px 14px
    rgba(28,53,101,.035) !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCardV4.classes{
  border:
    1px solid #bfe0f8 !important;

  background:
    radial-gradient(
      circle at 96% 5%,
      rgba(180,216,255,.24)
      0 48px,
      transparent 49px
    ),
    linear-gradient(
      135deg,
      #eaf7ff 0%,
      #f8fbff 100%
    ) !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCardV4.guidance{
  border:
    1px solid #d9d2fa !important;

  background:
    radial-gradient(
      circle at 96% 78%,
      rgba(210,194,255,.20)
      0 48px,
      transparent 49px
    ),
    linear-gradient(
      135deg,
      #f0edff 0%,
      #faf9ff 100%
    ) !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideIconV4{
  width:
    clamp(54px,15vw,68px) !important;

  height:
    clamp(54px,15vw,68px) !important;

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

  border-radius:15px !important;

  background:
    linear-gradient(
      145deg,
      #deefff,
      #eee8ff
    ) !important;

  color:#673fd6 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCopyV4{
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;

  justify-content:center !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCopyV4 strong{
  margin:0 !important;

  color:#132960 !important;

  font-size:
    clamp(17px,4.6vw,21px) !important;

  line-height:1.05 !important;

  font-weight:800 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCopyV4 b{
  margin-top:3px !important;

  color:#65728f !important;

  font-size:
    clamp(12px,3.4vw,14px) !important;

  line-height:1.1 !important;

  font-weight:500 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCopyV4 small{
  margin-top:3px !important;

  color:#6e7b98 !important;

  font-size:
    clamp(11px,3.1vw,13px) !important;

  line-height:1.1 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceWideCardV4>i{
  color:#102e76 !important;

  font-size:30px !important;
  font-style:normal !important;
  line-height:1 !important;
}

/* ========================================================
   2 x 2 KARTLAR
   ======================================================== */

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickGridV4{
  grid-row:3 / span 2;

  min-height:0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(2,minmax(0,1fr)) !important;

  gap:7px !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCardV4{
  appearance:none;

  width:100% !important;
  height:100% !important;

  min-height:0 !important;
  min-width:0 !important;

  display:grid !important;

  grid-template-columns:
    clamp(46px,13.5vw,60px)
    minmax(0,1fr) !important;

  align-items:center !important;

  gap:8px !important;

  padding:
    8px
    9px !important;

  border-radius:18px !important;

  box-sizing:border-box !important;

  overflow:hidden !important;

  text-align:left !important;

  box-shadow:
    0 3px 12px
    rgba(25,50,100,.025) !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCardV4.blue{
  background:
    linear-gradient(
      145deg,
      #e9f7ff,
      #f8fcff
    ) !important;

  border:
    1px solid #bee2f5 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCardV4.rose{
  background:
    linear-gradient(
      145deg,
      #fff0f8,
      #fff9fc
    ) !important;

  border:
    1px solid #f0cfe1 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCardV4.yellow{
  background:
    linear-gradient(
      145deg,
      #fff7dc,
      #fffdf5
    ) !important;

  border:
    1px solid #efdda5 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCardV4.amber{
  background:
    linear-gradient(
      145deg,
      #fff5dc,
      #fffaf0
    ) !important;

  border:
    1px solid #f0dba9 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickImageV4,
.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickIconV4{
  width:
    clamp(44px,13vw,58px) !important;

  height:
    clamp(44px,13vw,58px) !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:14px !important;

  overflow:hidden !important;

  background:
    rgba(255,255,255,.55) !important;

  color:#6841d6 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickImageV4 img{
  display:block !important;

  width:92% !important;
  height:92% !important;

  object-fit:contain !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCopyV4{
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;

  justify-content:center !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCopyV4 strong{
  color:#152a5f !important;

  font-size:
    clamp(13px,3.8vw,16px) !important;

  line-height:1.05 !important;

  font-weight:800 !important;
}

.ruyaGuidanceReferenceHomeV4
.ruyaGuidanceQuickCopyV4 small{
  margin-top:4px !important;

  color:#6d7995 !important;

  font-size:
    clamp(10px,2.9vw,12px) !important;

  line-height:1.15 !important;
}

/* ========================================================
   DAHA KISA EKRANLAR
   HERO AYNI KALIYOR — SADECE KARTLAR SIKIŞIYOR
   ======================================================== */

.ruyaGuidanceReferenceHomeV4.short
.ruyaGuidanceContentV4{
  gap:5px !important;
}

.ruyaGuidanceReferenceHomeV4.short
.ruyaGuidanceWideCardV4{
  padding:
    6px
    11px !important;
}

.ruyaGuidanceReferenceHomeV4.short
.ruyaGuidanceQuickCardV4{
  padding:
    6px
    8px !important;

  gap:6px !important;
}

.ruyaGuidanceReferenceHomeV4.very-short
.ruyaGuidanceContentV4{
  gap:4px !important;
}

.ruyaGuidanceReferenceHomeV4.very-short
.ruyaGuidanceWideCopyV4 small{
  display:none !important;
}

.ruyaGuidanceReferenceHomeV4.very-short
.ruyaGuidanceQuickCopyV4 small{
  font-size:10px !important;
}

/* ========================================================
   SINIFLARIM — GERÇEK OVERLAY BOTTOM SHEET
   ======================================================== */

.ruyaGuidanceClassModalBackV4{
  position:fixed !important;
  inset:0 !important;

  z-index:2147483000 !important;

  display:flex !important;

  align-items:flex-end !important;
  justify-content:center !important;

  padding:0 !important;

  background:
    rgba(18,30,57,.38) !important;

  backdrop-filter:
    blur(10px) !important;

  -webkit-backdrop-filter:
    blur(10px) !important;
}

.ruyaGuidanceClassModalV4{
  width:min(100%,720px) !important;

  height:min(72dvh,650px) !important;
  max-height:72dvh !important;

  display:flex !important;
  flex-direction:column !important;

  margin:0 !important;

  padding:
    18px
    14px
    calc(
      18px +
      env(safe-area-inset-bottom)
    ) !important;

  overflow:hidden !important;

  background:#fff !important;

  border-radius:
    28px
    28px
    0
    0 !important;

  box-shadow:
    0 -18px 55px
    rgba(22,42,84,.20) !important;
}

.ruyaGuidanceClassModalHeadV4{
  flex:0 0 auto !important;

  display:flex !important;

  align-items:flex-start !important;
  justify-content:space-between !important;

  gap:12px !important;

  padding:
    0
    4px
    13px !important;

  border-bottom:
    1px solid #edf0f5 !important;
}

.ruyaGuidanceClassModalHeadV4 small{
  display:block !important;

  color:#8a92a5 !important;

  font-size:10.5px !important;
  font-weight:800 !important;

  letter-spacing:.13em !important;
}

.ruyaGuidanceClassModalHeadV4 h2{
  margin:
    5px
    0
    0 !important;

  color:#13275b !important;

  font-size:26px !important;

  line-height:1 !important;
}

.ruyaGuidanceClassModalHeadV4 p{
  margin:
    7px
    0
    0 !important;

  color:#798298 !important;

  font-size:12.5px !important;
}

.ruyaGuidanceClassModalCloseV4{
  appearance:none !important;

  flex:0 0 auto !important;

  width:46px !important;
  height:46px !important;

  border:0 !important;
  border-radius:50% !important;

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

  background:#f5f6fa !important;
  color:#25385f !important;

  font-size:27px !important;

  line-height:1 !important;
}

.ruyaGuidanceClassModalGridV4{
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  -webkit-overflow-scrolling:touch;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  align-content:start !important;

  gap:8px !important;

  padding:
    13px
    1px
    8px !important;

  overscroll-behavior:contain !important;
}

.ruyaGuidanceClassItemV4{
  appearance:none !important;

  min-width:0 !important;
  min-height:78px !important;

  display:grid !important;

  grid-template-columns:
    42px
    minmax(0,1fr)
    12px !important;

  align-items:center !important;

  gap:8px !important;

  padding:9px !important;

  border:
    1px solid #e2e6ee !important;

  border-radius:17px !important;

  background:#fbfcff !important;

  text-align:left !important;
}

.ruyaGuidanceClassIconV4{
  width:41px !important;
  height:41px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  border-radius:12px !important;

  background:#f0ebff !important;
  color:#6742d6 !important;
}

.ruyaGuidanceClassItemV4 div{
  min-width:0 !important;

  display:flex !important;
  flex-direction:column !important;
}

.ruyaGuidanceClassItemV4 b{
  display:-webkit-box !important;

  overflow:hidden !important;

  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;

  white-space:normal !important;

  overflow-wrap:anywhere !important;

  color:#182852 !important;

  font-size:12.5px !important;
  line-height:1.13 !important;

  font-weight:800 !important;
}

.ruyaGuidanceClassItemV4 small{
  display:block !important;

  margin-top:4px !important;

  color:#8a92a4 !important;

  font-size:10.5px !important;

  white-space:nowrap !important;
}

.ruyaGuidanceClassItemV4 i{
  color:#8a93a5 !important;

  font-size:20px !important;
  font-style:normal !important;
}

.ruyaGuidanceClassEmptyV4{
  grid-column:1/-1 !important;

  padding:24px !important;

  color:#7d8699 !important;

  text-align:center !important;
}

/*
 * Tablet
 */
@media(min-width:700px){

  .ruyaGuidanceReferenceHomeV4
  .ruyaGuidanceContentV4{
    max-width:680px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

}